@globalpayments/vega 2.70.0 → 2.75.1

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.css

@@ -5,279 +5,1067 @@
  */
 :host {
   --vega-litepicker-container-width: calc(var(--vega-litepicker-day-width) * 7);
-  --vega-litepicker-day-width: 40px;
-  --vega-litepicker-day-height: 40px;
 }
 
-.litepicker {
-  display: none;
+.calendar,
+.calendar .container__main,
+.calendar .container__months {
+  height: 100%;
 }
 
-.litepicker button {
-  border-width: 0px;
-  background: none;
+:host(.small.range) .calendar.static-height .container__main,
+:host(.regular.range) .calendar.static-height .container__main,
+:host(.large.range) .calendar.static-height .container__main {
+  aspect-ratio: 1/1;
 }
 
-.litepicker .container__main {
+:host .month-item-header .button-today::part(link) {
+  color: rgba(var(--v-text-link, 19, 98, 226, 1));
+  vertical-align: top;
+}
+:host .month-item-header vega-dropdown .month-item-name,
+:host .month-item-header vega-dropdown .month-item-year {
   display: flex;
-  flex-direction: column;
-  padding: 32px;
-  border-radius: 12px;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
   background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
-  box-shadow: var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));
   border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
 }
-@media screen and (min-width: 320px) and (max-width: 350px) {
-  .litepicker .container__main {
-    padding: 12px;
-  }
+:host .month-item-header vega-dropdown.active .month-item-name,
+:host .month-item-header vega-dropdown.active .month-item-year {
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 3px;
+  border: 1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1));
+}
+:host .month-item-header .button-previous-month.disabled,
+:host .month-item-header .button-next-month.disabled {
+  pointer-events: none;
 }
 
-.litepicker .container__months {
-  display: flex;
+:host(.small.single) vega-dropdown .month-item-name span {
+  max-width: 48px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.litepicker .container__months.columns-2 {
+:host(.small) {
+  --vega-litepicker-day-width: 28px;
+  --vega-litepicker-day-height: 28px;
+  --vega-date-picker-calendar-range-space-size: 16px;
+}
+:host(.small) .current-month-year {
+  text-align: center;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+:host(.small) .month-item-header {
+  gap: 8px;
+  margin-bottom: 12px;
+}
+:host(.small) .month-item-header .button-today {
+  height: 16px;
+}
+:host(.small) .month-item-header .month-item-name,
+:host(.small) .month-item-header .month-item-year {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .month-item-header .month-item-name,
+  :host(.small) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .month-item-header .month-item-name,
+  :host(.small) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .month-item-header .month-item-name,
+  :host(.small) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+:host(.small) .month-item-header .month-item-name {
+  margin-right: 4px;
+}
+:host(.small) .month-item-header vega-dropdown .month-item-name {
+  margin-right: 8px;
+}
+:host(.small) .month-item-header vega-dropdown .month-item-name,
+:host(.small) .month-item-header vega-dropdown .month-item-year {
+  border-radius: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  gap: 2px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .month-item-header vega-dropdown .month-item-name,
+  :host(.small) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .month-item-header vega-dropdown .month-item-name,
+  :host(.small) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .month-item-header vega-dropdown .month-item-name,
+  :host(.small) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+:host(.small) .month-item-header vega-dropdown .month-item-name vega-icon,
+:host(.small) .month-item-header vega-dropdown .month-item-year vega-icon {
+  width: 12px;
+  height: 12px;
+}
+:host(.small) .month-item-header .small-month-item-name {
+  margin-right: 8px;
+}
+:host(.small) .month-item-header .small-month-item-name::part(label-container),
+:host(.small) .month-item-header .small-month-item-year::part(label-container) {
+  font-size: 14px;
+}
+:host(.small) .month-item .current-month-year {
+  margin-bottom: 4px;
+}
+:host(.small) .calendar .container__main {
+  max-width: 360px;
+  max-height: 360px;
+}
+:host(.small) .calendar .container__months .month-item-header {
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+  margin-bottom: 4px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .calendar .container__months .month-item-header {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .calendar .container__months .month-item-header {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .calendar .container__months .month-item-header {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+:host(.small) .calendar .container__months .month-item-weekdays-row {
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+:host(.small) .calendar .container__months .month-item-weekdays-row div {
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .calendar .container__months .month-item-weekdays-row div {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .calendar .container__months .month-item-weekdays-row div {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .calendar .container__months .month-item-weekdays-row div {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+:host(.small) .calendar .container__days .day-item {
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+:host(.small) .calendar .container__days .day-item .is-start-date,
+:host(.small) .calendar .container__days .day-item .is-end-date {
+  font-family: "Inter", sans-serif;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.small) .calendar .container__days .day-item .is-start-date,
+  :host(.small) .calendar .container__days .day-item .is-end-date {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.small) .calendar .container__days .day-item .is-start-date,
+  :host(.small) .calendar .container__days .day-item .is-end-date {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.small) .calendar .container__days .day-item .is-start-date,
+  :host(.small) .calendar .container__days .day-item .is-end-date {
+    font-family: "Inter", sans-serif;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 16px;
+    letter-spacing: 0px;
+  }
+}
+
+:host(.small.range) .calendar .container__main {
   width: 100%;
+  max-width: 600px;
+  max-height: 360px;
+}
+
+:host(.regular) {
+  --vega-litepicker-day-width: 40px;
+  --vega-litepicker-day-height: 40px;
+  --vega-date-picker-calendar-range-space-size: 24px;
+}
+:host(.regular) .current-month-year {
+  text-align: center;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
 }
-@media (min-width: 320px) {
-  .litepicker .container__months.columns-2 {
-    flex-direction: column;
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
   }
 }
-@media (min-width: 768px) {
-  .litepicker .container__months.columns-2 {
-    flex-direction: row;
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+:host(.regular) .month-item-header {
+  gap: 16px;
+  margin-bottom: 24px;
+}
+:host(.regular) .month-item-header .button-today {
+  height: 16px;
+}
+:host(.regular) .month-item-header .button-today.with-label {
+  height: 18px;
+}
+:host(.regular) .month-item-header .month-item-name,
+:host(.regular) .month-item-header .month-item-year {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .month-item-header .month-item-name,
+  :host(.regular) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .month-item-header .month-item-name,
+  :host(.regular) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .month-item-header .month-item-name,
+  :host(.regular) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+:host(.regular) .month-item-header .month-item-name {
+  margin-right: 4px;
+}
+:host(.regular) .month-item-header vega-dropdown .month-item-name {
+  margin-right: 16px;
+}
+:host(.regular) .month-item-header vega-dropdown .month-item-name,
+:host(.regular) .month-item-header vega-dropdown .month-item-year {
+  border-radius: 4px;
+  padding-left: 8px;
+  padding-right: 8px;
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .month-item-header vega-dropdown .month-item-name,
+  :host(.regular) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .month-item-header vega-dropdown .month-item-name,
+  :host(.regular) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .month-item-header vega-dropdown .month-item-name,
+  :host(.regular) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 16px;
+  }
+}
+:host(.regular) .month-item .current-month-year {
+  margin-bottom: 12px;
+}
+:host(.regular) .calendar .container__main {
+  max-width: 450px;
+  max-height: 450px;
+}
+:host(.regular) .calendar .container__months .month-item-header {
+  margin-bottom: 12px;
+}
+:host(.regular) .calendar .container__months .month-item-weekdays-row {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+:host(.regular) .calendar .container__months .month-item-weekdays-row div {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .calendar .container__months .month-item-weekdays-row div {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .calendar .container__months .month-item-weekdays-row div {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .calendar .container__months .month-item-weekdays-row div {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+:host(.regular) .calendar .container__days .day-item {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+  }
+}
+:host(.regular) .calendar .container__days .day-item .is-start-date,
+:host(.regular) .calendar .container__days .day-item .is-end-date {
+  font-family: "Inter", sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 18px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.regular) .calendar .container__days .day-item .is-start-date,
+  :host(.regular) .calendar .container__days .day-item .is-end-date {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.regular) .calendar .container__days .day-item .is-start-date,
+  :host(.regular) .calendar .container__days .day-item .is-end-date {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.regular) .calendar .container__days .day-item .is-start-date,
+  :host(.regular) .calendar .container__days .day-item .is-end-date {
+    font-family: "Inter", sans-serif;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 18px;
   }
 }
 
-.litepicker .container__months .month-item {
-  box-sizing: content-box;
-  position: relative;
-  width: var(--vega-litepicker-container-width);
-  z-index: 1;
+:host(.regular.range) .calendar .container__main {
+  width: 100%;
+  max-width: 900px;
+  max-height: 450px;
 }
 
-@media (min-width: 768px) {
-  .litepicker .container__months.columns-2 .month-item:first-of-type {
-    padding-right: 32px;
+:host(.large) {
+  --vega-litepicker-day-width: 56px;
+  --vega-litepicker-day-height: 56px;
+  --vega-date-picker-calendar-range-space-size: 40px;
+}
+:host(.large) .current-month-year {
+  text-align: center;
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .current-month-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host(.large) .month-item-header {
+  gap: 16px;
+  margin-bottom: 24px;
+}
+:host(.large) .month-item-header .button-today {
+  height: 16px;
+}
+:host(.large) .month-item-header .button-today.with-label {
+  height: 24px;
+}
+:host(.large) .month-item-header .month-item-name {
+  margin-right: 4px;
+}
+:host(.large) .month-item-header .month-item-name,
+:host(.large) .month-item-header .month-item-year {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+  gap: 8px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .month-item-header .month-item-name,
+  :host(.large) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .month-item-header .month-item-name,
+  :host(.large) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .month-item-header .month-item-name,
+  :host(.large) .month-item-header .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host(.large) .month-item-header vega-dropdown .month-item-name {
+  margin-right: 24px;
+}
+:host(.large) .month-item-header vega-dropdown .month-item-name,
+:host(.large) .month-item-header vega-dropdown .month-item-year {
+  border-radius: 8px;
+  padding-left: 12px;
+  padding-right: 12px;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .month-item-header vega-dropdown .month-item-name,
+  :host(.large) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
   }
 }
-@media (min-width: 768px) {
-  .litepicker .container__months.columns-2 .month-item:last-of-type {
-    padding-left: 32px;
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .month-item-header vega-dropdown .month-item-name,
+  :host(.large) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .month-item-header vega-dropdown .month-item-name,
+  :host(.large) .month-item-header vega-dropdown .month-item-year {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    letter-spacing: 0px;
   }
 }
-.litepicker .container__months .month-item:nth-child(2)::before {
-  background-color: rgba(var(--v-bg-divider, 171, 198, 216, 1));
-  margin-top: 32px;
-  margin-bottom: 32px;
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
-  display: none;
-  width: 1px;
-  content: "";
+:host(.large) .month-item .current-month-year {
+  margin-bottom: 16px;
 }
-@media (min-width: 768px) {
-  .litepicker .container__months .month-item:nth-child(2)::before {
-    display: block;
-  }
+:host(.large) .calendar .container__main {
+  max-width: 600px;
+  max-height: 600px;
 }
-
-.litepicker .container__months .month-item-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 32px;
-  text-align: center;
+:host(.large) .calendar .container__months .month-item-header {
   font-family: "Inter", sans-serif;
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 700;
   line-height: 24px;
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  letter-spacing: 0px;
+  margin-bottom: 16px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__months .month-item-header {
+  :host(.large) .calendar .container__months .month-item-header {
     font-family: "Inter", sans-serif;
-    font-size: 16px;
+    font-size: 20px;
     font-weight: 700;
     line-height: 24px;
+    letter-spacing: 0px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__months .month-item-header {
+  :host(.large) .calendar .container__months .month-item-header {
     font-family: "Inter", sans-serif;
-    font-size: 16px;
+    font-size: 20px;
     font-weight: 700;
     line-height: 24px;
+    letter-spacing: 0px;
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__months .month-item-header {
+  :host(.large) .calendar .container__months .month-item-header {
     font-family: "Inter", sans-serif;
-    font-size: 16px;
+    font-size: 20px;
     font-weight: 700;
     line-height: 24px;
+    letter-spacing: 0px;
   }
 }
-
-.litepicker .container__months .month-item-header div > .month-item-name {
-  margin-right: 5px;
-}
-
-.litepicker .container__months .month-item-header .button-previous-month,
-.litepicker .container__months .month-item-header .button-next-month {
-  visibility: hidden;
-  text-decoration: none;
-  cursor: default;
+:host(.large) .calendar .container__months .month-item-weekdays-row {
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
 }
-
-.litepicker .container__months .month-item-header .button-previous-month *,
-.litepicker .container__months .month-item-header .button-next-month * {
-  pointer-events: none;
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
 }
-
-.litepicker .container__months .month-item-header .button-previous-month > svg,
-.litepicker .container__months .month-item-header .button-previous-month > img {
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
 }
-
-.litepicker .container__months .month-item-header .button-next-month > svg,
-.litepicker .container__months .month-item-header .button-next-month > img {
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .calendar .container__months .month-item-weekdays-row {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
 }
-
-.litepicker .container__months .month-item-weekdays-row {
-  display: flex;
-  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+:host(.large) .calendar .container__months .month-item-weekdays-row div {
   font-family: "Inter", sans-serif;
-  font-size: 14px;
+  font-size: 20px;
   font-weight: 700;
-  line-height: 18px;
+  line-height: 24px;
+  letter-spacing: 0px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__months .month-item-weekdays-row {
+  :host(.large) .calendar .container__months .month-item-weekdays-row div {
     font-family: "Inter", sans-serif;
-    font-size: 14px;
+    font-size: 20px;
     font-weight: 700;
-    line-height: 18px;
+    line-height: 24px;
+    letter-spacing: 0px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__months .month-item-weekdays-row {
+  :host(.large) .calendar .container__months .month-item-weekdays-row div {
     font-family: "Inter", sans-serif;
-    font-size: 14px;
+    font-size: 20px;
     font-weight: 700;
-    line-height: 18px;
+    line-height: 24px;
+    letter-spacing: 0px;
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__months .month-item-weekdays-row {
+  :host(.large) .calendar .container__months .month-item-weekdays-row div {
     font-family: "Inter", sans-serif;
-    font-size: 14px;
+    font-size: 20px;
     font-weight: 700;
-    line-height: 18px;
+    line-height: 24px;
+    letter-spacing: 0px;
   }
 }
-
-.litepicker .container__months .month-item-weekdays-row > div {
-  padding-top: 12px;
-  padding-bottom: 12px;
-  padding-left: 8px;
-  padding-right: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+:host(.large) .calendar .container__days .day-item {
   font-family: "Inter", sans-serif;
-  font-size: 14px;
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :host(.large) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .calendar .container__days .day-item {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+:host(.large) .calendar .container__days .day-item .is-start-date,
+:host(.large) .calendar .container__days .day-item .is-end-date {
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
   font-weight: 700;
-  line-height: 18px;
-  width: var(--vega-litepicker-day-width);
+  line-height: 24px;
+  letter-spacing: 0px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__months .month-item-weekdays-row > div {
+  :host(.large) .calendar .container__days .day-item .is-start-date,
+  :host(.large) .calendar .container__days .day-item .is-end-date {
     font-family: "Inter", sans-serif;
-    font-size: 14px;
+    font-size: 20px;
     font-weight: 700;
-    line-height: 18px;
+    line-height: 24px;
+    letter-spacing: 0px;
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__months .month-item-weekdays-row > div {
+  :host(.large) .calendar .container__days .day-item .is-start-date,
+  :host(.large) .calendar .container__days .day-item .is-end-date {
     font-family: "Inter", sans-serif;
-    font-size: 14px;
+    font-size: 20px;
     font-weight: 700;
-    line-height: 18px;
+    line-height: 24px;
+    letter-spacing: 0px;
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__months .month-item-weekdays-row > div {
+  :host(.large) .calendar .container__days .day-item .is-start-date,
+  :host(.large) .calendar .container__days .day-item .is-end-date {
     font-family: "Inter", sans-serif;
-    font-size: 14px;
+    font-size: 20px;
     font-weight: 700;
-    line-height: 18px;
+    line-height: 24px;
+    letter-spacing: 0px;
   }
 }
 
-.litepicker .container__months .month-item:first-child .button-previous-month {
-  visibility: visible;
+:host(.large.range) .calendar .container__main {
+  width: 100%;
+  max-width: 1200px;
+  max-height: 600px;
 }
 
-.litepicker .container__months .month-item:last-child .button-next-month {
-  visibility: visible;
+.calendar .container__main {
+  display: flex;
+  flex-direction: column;
 }
 
-.litepicker .container__months .month-item.no-previous-month .button-previous-month {
-  visibility: hidden;
+.calendar .container__months {
+  display: flex;
 }
 
-.litepicker .container__months .month-item.no-next-month .button-next-month {
-  visibility: hidden;
+.calendar .container__months.columns-2 {
+  width: 100%;
+  flex-direction: row;
 }
 
-.litepicker .container__days {
+.calendar .container__months .month-item {
+  box-sizing: content-box;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  flex-direction: column;
+}
+
+.calendar .container__months.columns-2 .month-item:first-of-type {
+  padding-right: var(--vega-date-picker-calendar-range-space-size);
+}
+
+.calendar .container__months.columns-2 .month-item:last-of-type {
+  padding-left: var(--vega-date-picker-calendar-range-space-size);
+}
+
+.calendar .container__months .month-item:nth-child(2)::before {
+  background-color: rgba(var(--v-bg-divider, 171, 198, 216, 1));
+  margin-bottom: 32px;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  display: none;
+  width: 1px;
+  content: "";
+  display: block;
+}
+
+.calendar .container__months .month-item-weekdays-row {
+  color: rgba(var(--v-text-primary, 32, 54, 69, 1));
+  place-items: center;
+}
+
+.calendar .container__days {
   text-align: center;
+  place-items: center;
+  flex: 1 1 auto;
 }
 
-.litepicker.static-height .container__days {
+.calendar.static-height .container__days {
   align-content: flex-start;
-  height: calc(var(--vega-litepicker-day-height) * 6);
 }
 
-.litepicker .container__days > div,
-.litepicker .container__days > a {
+.calendar:not(.static-height) .container__days {
+  flex: none;
+}
+
+.calendar .container__months .month-item-weekdays-row > div,
+.calendar .container__days > div,
+.calendar .container__days > a {
   padding: 4px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   height: var(--vega-litepicker-day-height);
-  width: var(--vega-litepicker-day-width);
+  width: 100%;
+  min-width: var(--vega-litepicker-day-width);
 }
 
-.litepicker .container__days .day-item {
+.calendar .container__days .day-item {
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
   font-family: "Inter", sans-serif;
   font-size: 16px;
   font-weight: 500;
   line-height: 22px;
   letter-spacing: 0px;
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 18px;
   text-align: center;
   border-radius: 9999px;
   cursor: default;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__days .day-item {
+  .calendar .container__days .day-item {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -286,7 +1074,7 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__days .day-item {
+  .calendar .container__days .day-item {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -295,7 +1083,7 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__days .day-item {
+  .calendar .container__days .day-item {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 500;
@@ -303,42 +1091,18 @@
     letter-spacing: 0px;
   }
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__days .day-item {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 18px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__days .day-item {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 18px;
-  }
-}
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__days .day-item {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 18px;
-  }
-}
 
-.litepicker .container__days .day-item:not(.is-locked):active {
+.calendar .container__days .day-item:not(.is-locked):not(.is-disabled):active {
   background-color: rgba(var(--v-bg-action-active, 29, 65, 195, 1));
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
   border-width: 0px;
 }
 
-.litepicker .day-item.is-start-date.is-end-date.is-locked:active {
+.calendar .day-item.is-start-date.is-end-date.is-locked:active {
   background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
 }
 
-.litepicker .container__days .day-item:hover:before {
+.calendar .container__days .day-item:hover:before {
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
   border-radius: 9999px;
   position: absolute;
@@ -350,16 +1114,24 @@
   z-index: -1;
 }
 
-.litepicker .container__days .day-item.is-locked:hover:before,
-html.dark .litepicker .container__days .day-item.is-locked:hover:before {
+.calendar .container__days .day-item.is-locked:hover:before,
+html.dark .calendar .container__days .day-item.is-locked:hover:before {
+  border-style: none;
+}
+
+.calendar .container__days .day-item.is-disabled:hover:before {
   border-style: none;
 }
 
-.litepicker .container__days .day-item:hover {
+.calendar .container__days .day-item.is-locked, .calendar .container__days .day-item.is-disabled {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.calendar .container__days .day-item:hover {
   position: relative;
 }
 
-.litepicker .container__days .day-item.is-today {
+.calendar .container__days .day-item.is-today {
   color: rgba(var(--v-text-link, 19, 98, 226, 1));
   font-family: "Inter", sans-serif;
   font-size: 14px;
@@ -367,7 +1139,7 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   line-height: 18px;
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__days .day-item.is-today {
+  .calendar .container__days .day-item.is-today {
     font-family: "Inter", sans-serif;
     font-size: 14px;
     font-weight: 700;
@@ -375,7 +1147,7 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__days .day-item.is-today {
+  .calendar .container__days .day-item.is-today {
     font-family: "Inter", sans-serif;
     font-size: 14px;
     font-weight: 700;
@@ -383,7 +1155,7 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__days .day-item.is-today {
+  .calendar .container__days .day-item.is-today {
     font-family: "Inter", sans-serif;
     font-size: 14px;
     font-weight: 700;
@@ -391,14 +1163,14 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   }
 }
 
-.litepicker .container__days .day-item.is-in-range {
+.calendar .container__days .day-item.is-in-range {
   border-radius: 0px;
   position: relative;
   z-index: 2;
   background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
 }
 
-.litepicker .container__days .day-item:not(.is-locked).is-in-range:hover:before {
+.calendar .container__days .day-item:not(.is-locked):not(.is-disabled).is-in-range:hover:before {
   border: 1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));
   border-radius: 9999px;
   position: absolute;
@@ -410,46 +1182,18 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   z-index: -1;
 }
 
-.litepicker .container__days .day-item.is-start-date {
+.calendar .container__days .day-item.is-start-date {
   background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
   border-radius: 9999px;
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 18px;
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
   position: relative;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__days .day-item.is-start-date {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__days .day-item.is-start-date {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
-}
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__days .day-item.is-start-date {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
-}
 
-.litepicker .container__days .day-item.is-start-date:hover:before {
+.calendar .container__days .day-item.is-start-date:hover:before {
   z-index: 2;
 }
 
-.litepicker .container__days .day-item.is-start-date:after {
+.calendar .container__days .day-item.is-start-date:after {
   position: absolute;
   top: 0px;
   right: 0px;
@@ -464,12 +1208,12 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
 }
 
-.litepicker .container__days .day-item.is-start-date.is-flipped {
+.calendar .container__days .day-item.is-start-date.is-flipped {
   border-radius: 9999px;
   position: relative;
 }
 
-.litepicker .container__days .day-item.is-start-date.is-flipped:after {
+.calendar .container__days .day-item.is-start-date.is-flipped:after {
   position: absolute;
   top: 0px;
   right: 0px;
@@ -483,46 +1227,18 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   z-index: -1;
 }
 
-.litepicker .container__days .day-item.is-end-date {
+.calendar .container__days .day-item.is-end-date {
   background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
   border-radius: 9999px;
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 18px;
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
   position: relative;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__days .day-item.is-end-date {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
-}
-@media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__days .day-item.is-end-date {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
-}
-@media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__days .day-item.is-end-date {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
-}
 
-.litepicker .container__days .day-item.is-end-date:hover:before {
+.calendar .container__days .day-item.is-end-date:hover:before {
   z-index: 2;
 }
 
-.litepicker .container__days .day-item.is-end-date:after {
+.calendar .container__days .day-item.is-end-date:after {
   position: absolute;
   top: 0px;
   right: 0px;
@@ -537,12 +1253,12 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   background-color: rgba(var(--v-bg-date-picker-range, 229, 239, 255, 1));
 }
 
-.litepicker .container__days .day-item.is-end-date.is-flipped {
+.calendar .container__days .day-item.is-end-date.is-flipped {
   border-radius: 9999px;
   position: relative;
 }
 
-.litepicker .container__days .day-item.is-end-date.is-flipped:after {
+.calendar .container__days .day-item.is-end-date.is-flipped:after {
   position: absolute;
   top: 0px;
   right: 0px;
@@ -556,33 +1272,29 @@ html.dark .litepicker .container__days .day-item.is-locked:hover:before {
   z-index: -1;
 }
 
-.litepicker .container__days .day-item.is-start-date.is-end-date {
+.calendar .container__days .day-item.is-start-date.is-end-date {
   border-radius: 9999px;
 }
 
-.litepicker .container__days .day-item.is-start-date.is-end-date:after,
-html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after {
+.calendar .container__days .day-item.is-start-date.is-end-date:after,
+html.dark .calendar .container__days .day-item.is-start-date.is-end-date:after {
   background: none;
 }
 
-.litepicker .container__tooltip {
+.calendar .container__tooltip {
   display: none;
 }
 
-.litepicker .container__days .day-item.is-locked {
+.calendar .container__days .day-item.is-locked {
   color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
   cursor: not-allowed;
 }
 
-.litepicker .container__days .day-item.is-disabled {
-  text-decoration: line-through;
-}
-
-.litepicker.mobilefriendly[data-plugins*=mobilefriendly] .container__days > div {
-  height: var(--vega-litepicker-day-height);
+.calendar.mobilefriendly[data-plugins*=mobilefriendly] .container__days > div {
+  height: var(--vega-date-picker-calendar-day-height);
 }
 
-.litepicker .clear-button {
+.calendar .clear-button {
   font-family: "Inter", sans-serif;
   font-size: 18px;
   font-weight: 700;
@@ -591,7 +1303,7 @@ html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after
   color: rgba(var(--v-text-link, 19, 98, 226, 1));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .clear-button {
+  .calendar .clear-button {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -600,7 +1312,7 @@ html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .clear-button {
+  .calendar .clear-button {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -609,7 +1321,7 @@ html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .clear-button {
+  .calendar .clear-button {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -618,7 +1330,7 @@ html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after
   }
 }
 
-.litepicker .footer-container {
+.calendar .footer-container {
   margin-top: 16px;
   height: 24px;
 }
@@ -627,42 +1339,48 @@ html.dark .litepicker .container__days .day-item.is-start-date.is-end-date:after
   display: none !important;
 }
 
-.litepicker {
+.calendar {
   left: initial !important;
   top: initial !important;
   position: initial !important;
 }
 
-:host {
-  position: absolute;
-}
-
 .button-next-month svg,
 .button-previous-month svg {
   width: 12px;
   height: 16px;
 }
 
-.litepicker .month-item-header > div.dropdown-section {
+.calendar .container__days .day-item.is-disabled {
+  color: rgba(var(--v-text-disabled, 176, 180, 181, 1));
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.calendar .container__days > div:not(.day-item) {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.calendar .month-item-header > div.dropdown-section {
   display: flex;
   gap: 12px;
 }
-.litepicker .month-item-header > div.dropdown-section .dropdown-current-value {
+.calendar .month-item-header > div.dropdown-section .dropdown-current-value {
   position: relative;
   display: flex;
   gap: 4px;
   align-items: center;
   cursor: pointer;
 }
-.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active {
+.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active {
   color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
 }
-.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:active {
+.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:active {
   color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
 }
-.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:hover {
+.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:hover {
   color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
 }
-.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:focus-visible {
+.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:focus-visible {
   color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }