@globalpayments/vega 2.70.0 → 2.73.0

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

@@ -5,70 +5,574 @@
  */
 :host {
   --vega-litepicker-container-width: calc(var(--vega-litepicker-day-width) * 7);
+}
+
+.calendar,
+.calendar .container__main,
+.calendar .container__months {
+  height: 100%;
+}
+
+: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;
+}
+
+:host(.small) {
+  --vega-litepicker-day-width: 28px;
+  --vega-litepicker-day-height: 28px;
+  --vega-date-picker-calendar-range-space-size: 16px;
+}
+: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) .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;
+  }
+}
+
+:host(.regular.range) .calendar .container__main {
+  width: 100%;
+  max-width: 900px;
+  max-height: 450px;
+}
+
+:host(.large) {
+  --vega-litepicker-day-width: 56px;
+  --vega-litepicker-day-height: 56px;
+  --vega-date-picker-calendar-range-space-size: 40px;
+}
+:host(.large) .calendar .container__main {
+  max-width: 600px;
+  max-height: 600px;
+}
+:host(.large) .calendar .container__months .month-item-header {
+  font-family: "Inter", sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0px;
+  margin-bottom: 16px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :host(.large) .calendar .container__months .month-item-header {
+    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) .calendar .container__months .month-item-header {
+    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) .calendar .container__months .month-item-header {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+: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;
+}
+@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;
+  }
+}
+@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;
+  }
+}
+@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;
+  }
+}
+:host(.large) .calendar .container__months .month-item-weekdays-row div {
+  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) .calendar .container__months .month-item-weekdays-row div {
+    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) .calendar .container__months .month-item-weekdays-row div {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
 }
-
-.litepicker {
-  display: none;
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :host(.large) .calendar .container__months .month-item-weekdays-row div {
+    font-family: "Inter", sans-serif;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0px;
+  }
+}
+: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: 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: 24px;
+  letter-spacing: 0px;
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  :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: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  :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: 24px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  :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: 24px;
+    letter-spacing: 0px;
+  }
 }
 
-.litepicker button {
-  border-width: 0px;
-  background: none;
+:host(.large.range) .calendar .container__main {
+  width: 100%;
+  max-width: 1200px;
+  max-height: 600px;
 }
 
-.litepicker .container__main {
+.calendar .container__main {
   display: flex;
   flex-direction: column;
-  padding: 32px;
-  border-radius: 12px;
-  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;
-  }
 }
 
-.litepicker .container__months {
+.calendar .container__months {
   display: flex;
 }
 
-.litepicker .container__months.columns-2 {
+.calendar .container__months.columns-2 {
   width: 100%;
-}
-@media (min-width: 320px) {
-  .litepicker .container__months.columns-2 {
-    flex-direction: column;
-  }
-}
-@media (min-width: 768px) {
-  .litepicker .container__months.columns-2 {
-    flex-direction: row;
-  }
+  flex-direction: row;
 }
 
-.litepicker .container__months .month-item {
+.calendar .container__months .month-item {
   box-sizing: content-box;
   position: relative;
-  width: var(--vega-litepicker-container-width);
+  width: 100%;
+  height: 100%;
   z-index: 1;
+  display: flex;
+  flex-direction: column;
 }
 
-@media (min-width: 768px) {
-  .litepicker .container__months.columns-2 .month-item:first-of-type {
-    padding-right: 32px;
-  }
+.calendar .container__months.columns-2 .month-item:first-of-type {
+  padding-right: var(--vega-date-picker-calendar-range-space-size);
 }
-@media (min-width: 768px) {
-  .litepicker .container__months.columns-2 .month-item:last-of-type {
-    padding-left: 32px;
-  }
+
+.calendar .container__months.columns-2 .month-item:last-of-type {
+  padding-left: var(--vega-date-picker-calendar-range-space-size);
 }
-.litepicker .container__months .month-item:nth-child(2)::before {
+
+.calendar .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;
@@ -80,18 +584,13 @@
   display: none;
   width: 1px;
   content: "";
-}
-@media (min-width: 768px) {
-  .litepicker .container__months .month-item:nth-child(2)::before {
-    display: block;
-  }
+  display: block;
 }
 
-.litepicker .container__months .month-item-header {
+.calendar .container__months .month-item-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 32px;
   text-align: center;
   font-family: "Inter", sans-serif;
   font-size: 16px;
@@ -100,7 +599,7 @@
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .container__months .month-item-header {
+  .calendar .container__months .month-item-header {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -108,7 +607,7 @@
   }
 }
 @media screen and (min-width: 1024px) and (max-width: 1439px) {
-  .litepicker .container__months .month-item-header {
+  .calendar .container__months .month-item-header {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -116,7 +615,7 @@
   }
 }
 @media screen and (min-width: 1440px) and (max-width: 9999px) {
-  .litepicker .container__months .month-item-header {
+  .calendar .container__months .month-item-header {
     font-family: "Inter", sans-serif;
     font-size: 16px;
     font-weight: 700;
@@ -124,160 +623,93 @@
   }
 }
 
-.litepicker .container__months .month-item-header div > .month-item-name {
+.calendar .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 {
+.calendar .container__months .month-item-header .button-previous-month,
+.calendar .container__months .month-item-header .button-next-month {
   visibility: hidden;
   text-decoration: none;
   cursor: default;
 }
 
-.litepicker .container__months .month-item-header .button-previous-month *,
-.litepicker .container__months .month-item-header .button-next-month * {
+.calendar .container__months .month-item-header .button-previous-month *,
+.calendar .container__months .month-item-header .button-next-month * {
   pointer-events: none;
 }
 
-.litepicker .container__months .month-item-header .button-previous-month > svg,
-.litepicker .container__months .month-item-header .button-previous-month > img {
+.calendar .container__months .month-item-header .button-previous-month > svg,
+.calendar .container__months .month-item-header .button-previous-month > img {
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 
-.litepicker .container__months .month-item-header .button-next-month > svg,
-.litepicker .container__months .month-item-header .button-next-month > img {
+.calendar .container__months .month-item-header .button-next-month > svg,
+.calendar .container__months .month-item-header .button-next-month > img {
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
 }
 
-.litepicker .container__months .month-item-weekdays-row {
-  display: flex;
+.calendar .container__months .month-item-weekdays-row {
   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) {
-  .litepicker .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) {
-  .litepicker .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) {
-  .litepicker .container__months .month-item-weekdays-row {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
-}
-
-.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;
-  font-family: "Inter", sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 18px;
-  width: var(--vega-litepicker-day-width);
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  .litepicker .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) {
-  .litepicker .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) {
-  .litepicker .container__months .month-item-weekdays-row > div {
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 700;
-    line-height: 18px;
-  }
+  place-items: center;
 }
 
-.litepicker .container__months .month-item:first-child .button-previous-month {
+.calendar .container__months .month-item:first-child .button-previous-month {
   visibility: visible;
 }
 
-.litepicker .container__months .month-item:last-child .button-next-month {
+.calendar .container__months .month-item:last-child .button-next-month {
   visibility: visible;
 }
 
-.litepicker .container__months .month-item.no-previous-month .button-previous-month {
+.calendar .container__months .month-item.no-previous-month .button-previous-month {
   visibility: hidden;
 }
 
-.litepicker .container__months .month-item.no-next-month .button-next-month {
+.calendar .container__months .month-item.no-next-month .button-next-month {
   visibility: hidden;
 }
 
-.litepicker .container__days {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+.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 +718,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 +727,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 +735,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 +758,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 +783,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 +791,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 +799,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 +807,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 +826,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 +852,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 +871,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 +897,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 +916,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 +947,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 +956,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 +965,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 +974,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 +983,77 @@ 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));
+}
+.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:active {
+  color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
+}
+.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:hover {
+  color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
+}
+.calendar .month-item-header > div.dropdown-section .dropdown-current-value.active:focus-visible {
+  color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
+}
+
+.locked-month-button {
+  width: 32px;
+  height: 32px;
+}
+
+vega-dropdown .month-item-name,
+vega-dropdown .month-item-year {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  cursor: pointer;
+}
+vega-dropdown.active .month-item-name,
+vega-dropdown.active .month-item-year {
   color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
 }
-.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:active {
+vega-dropdown.active .month-item-name:active,
+vega-dropdown.active .month-item-year:active {
   color: rgba(var(--v-text-link-active, 29, 65, 195, 1));
 }
-.litepicker .month-item-header > div.dropdown-section .dropdown-current-value.active:hover {
+vega-dropdown.active .month-item-name:hover,
+vega-dropdown.active .month-item-year: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 {
+vega-dropdown.active .month-item-name:focus-visible,
+vega-dropdown.active .month-item-year:focus-visible {
   color: rgba(var(--v-text-link-focus, 4, 112, 236, 1));
 }