@aurodesignsystem/auro-formkit 2.0.0-beta.42 → 2.0.0-beta.44

package/components/datepicker/src/dropdownVersion.js

@@ -1 +0,0 @@
-export default '3.0.0';

package/components/datepicker/src/formkit/auro-dropdownVersion.js

@@ -1 +0,0 @@
-export default '3.0.0';

package/components/datepicker/src/formkit/auro-inputVersion.js

@@ -1 +0,0 @@
-export default '4.2.0';

package/components/datepicker/src/index.js

@@ -1,6 +0,0 @@
-import { AuroDatePicker } from "./auro-datepicker.js";
-
-AuroDatePicker.register();
-
-// Enable TypeScript support
-export { AuroDatePicker };

package/components/datepicker/src/inputVersion.js

@@ -1 +0,0 @@
-export default '4.2.0';

package/components/datepicker/src/popoverVersion.js

@@ -1 +0,0 @@
-export default '4.1.2';

package/components/datepicker/src/styles/color-calendar-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`.calendarNavBtn{border-color:var(--ds-auro-calendar-nav-btn-border-color);background-color:var(--ds-auro-calendar-nav-btn-container-color);color:var(--ds-auro-calendar-nav-btn-chevron-color)}.calendarNavBtn:hover,.calendarNavBtn:focus{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}.calendarNavBtn:active{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);box-shadow:inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color)}.mobileHeader{background-color:var(--ds-auro-calendar-mobile-header-container-color);box-shadow:0 0 10px var(--ds-auro-calendar-mobile-header-boxshadow-color)}.mobileDateLabel{color:var(--ds-auro-calendar-mobile-header-text-color)}:host(:not([noRange])) .headerDateTo:after{background-color:var(--ds-auro-calendar-mobile-header-divider-color)}.mobileFooterActions{background-color:var(--ds-auro-calendar-mobile-footer-container-color)}@media screen and (max-width: 576px){.calendarNavBtn{--ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5)}}`;

package/components/datepicker/src/styles/color-calendar.css

@@ -1,35 +0,0 @@
-.calendarNavBtn {
-  border-color: var(--ds-auro-calendar-nav-btn-border-color);
-  background-color: var(--ds-auro-calendar-nav-btn-container-color);
-  color: var(--ds-auro-calendar-nav-btn-chevron-color);
-}
-.calendarNavBtn:hover, .calendarNavBtn:focus {
-  --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
-}
-.calendarNavBtn:active {
-  --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
-  box-shadow: inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color);
-}
-
-.mobileHeader {
-  background-color: var(--ds-auro-calendar-mobile-header-container-color);
-  box-shadow: 0 0 10px var(--ds-auro-calendar-mobile-header-boxshadow-color);
-}
-
-.mobileDateLabel {
-  color: var(--ds-auro-calendar-mobile-header-text-color);
-}
-
-:host(:not([noRange])) .headerDateTo:after {
-  background-color: var(--ds-auro-calendar-mobile-header-divider-color);
-}
-
-.mobileFooterActions {
-  background-color: var(--ds-auro-calendar-mobile-footer-container-color);
-}
-
-@media screen and (max-width: 576px) {
-  .calendarNavBtn {
-    --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #2c67b5);
-  }
-}

package/components/datepicker/src/styles/color-calendar.scss

@@ -1,51 +0,0 @@
-// // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// // See LICENSE in the project root for license information.
-
-// // ---------------------------------------------------------------------
-
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
-
-.calendarNavBtn {
-  border-color: var(--ds-auro-calendar-nav-btn-border-color);
-  background-color: var(--ds-auro-calendar-nav-btn-container-color);
-  color: var(--ds-auro-calendar-nav-btn-chevron-color);
-
-  &:hover,
-  &:focus {
-    --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
-  }
-
-  &:active {
-    --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
-    
-    box-shadow: inset 0 0 0 1px var(--ds-auro-calendar-nav-btn-border-color);
-  }
-}
-
-.mobileHeader {
-  background-color: var(--ds-auro-calendar-mobile-header-container-color);
-  box-shadow: 0 0 10px var(--ds-auro-calendar-mobile-header-boxshadow-color);
-}
-
-.mobileDateLabel {
-  color: var(--ds-auro-calendar-mobile-header-text-color);
-}
-
-:host(:not([noRange])) {
-  .headerDateTo {
-    &:after {
-      background-color: var(--ds-auro-calendar-mobile-header-divider-color);
-    }
-  }
-}
-
-.mobileFooterActions {
-  background-color: var(--ds-auro-calendar-mobile-footer-container-color);
-}
-
-@include auro_breakpoint($max: $ds-grid-breakpoint-sm) {
-  .calendarNavBtn {
-    --ds-auro-calendar-nav-btn-border-color: var(--ds-color-border-ui-default-default, #{$ds-color-border-ui-default-default});
-  }
-}

package/components/datepicker/src/styles/color-cell-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host ::slotted([slot^=date_]){color:var(--ds-auro-calendar-cell-price-text-color)}:host ::slotted([slot^=date_][highlight]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d)}.day{border-color:var(--ds-auro-calendar-cell-border-color);background-color:var(--ds-auro-calendar-cell-container-color);color:var(--ds-auro-calendar-cell-text-color)}.day.selected{--ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);box-shadow:var(--ds-auro-calendar-boxshadow-color)}.day.selected:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);box-shadow:unset}.day.selected:not(:hover){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff)}.day:hover{--ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #e4e8ec);--ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a)}.day.disabled{--ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff)}.day.inRange:before,.day.rangeDepartDate:before,.day.rangeReturnDate:before,.day.lastHoveredDate:before{background-color:var(--ds-auro-calendar-cell-in-range-color)}.day.sameDateTrip:before{--ds-auro-calendar-cell-in-range-color: transparent}:host([disabled]){--ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}`;

package/components/datepicker/src/styles/color-cell.css

@@ -1,45 +0,0 @@
-/* stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors */
-:host ::slotted([slot^=date_]) {
-  color: var(--ds-auro-calendar-cell-price-text-color);
-}
-:host ::slotted([slot^=date_][highlight]) {
-  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #0b6f4d);
-}
-
-.day {
-  border-color: var(--ds-auro-calendar-cell-border-color);
-  background-color: var(--ds-auro-calendar-cell-container-color);
-  color: var(--ds-auro-calendar-cell-text-color);
-}
-.day.selected {
-  --ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #225296);
-  --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #225296);
-  --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #ffffff);
-  box-shadow: var(--ds-auro-calendar-boxshadow-color);
-}
-.day.selected:hover {
-  --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);
-  --ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);
-  box-shadow: unset;
-}
-.day.selected:not(:hover) {
-  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #ffffff);
-}
-.day:hover {
-  --ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #e4e8ec);
-  --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #2a2a2a);
-}
-.day.disabled {
-  --ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
-  --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #ffffff);
-}
-.day.inRange:before, .day.rangeDepartDate:before, .day.rangeReturnDate:before, .day.lastHoveredDate:before {
-  background-color: var(--ds-auro-calendar-cell-in-range-color);
-}
-.day.sameDateTrip:before {
-  --ds-auro-calendar-cell-in-range-color: transparent;
-}
-
-:host([disabled]) {
-  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #adadad);
-}

package/components/datepicker/src/styles/color-cell.scss

@@ -1,73 +0,0 @@
-// // Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// // See LICENSE in the project root for license information.
-
-// // ---------------------------------------------------------------------
-
-/* stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors */
-
-@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-
-:host {
-  ::slotted([slot^="date_"]) {
-    color: var(--ds-auro-calendar-cell-price-text-color);
-  }
-
-  ::slotted([slot^="date_"][highlight]) {
-    --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-success-default, #{$ds-color-text-success-default});
-  }
-}
-
-.day {
-  border-color: var(--ds-auro-calendar-cell-border-color);
-  background-color: var(--ds-auro-calendar-cell-container-color);
-  color: var(--ds-auro-calendar-cell-text-color);
-
-  &.selected {
-    --ds-auro-calendar-border-color: var(--ds-color-border-ui-active-default, #{$ds-color-border-ui-active-default});
-    --ds-auro-calendar-cell-container-color: var(--ds-color-container-ui-primary-active-default, #{$ds-color-container-ui-primary-active-default});
-    --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
-
-    box-shadow: var(--ds-auro-calendar-boxshadow-color);
-
-    &:hover {
-      --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
-      --ds-auro-calendar-cell-border-color: var(--ds-color-border-ui-focus-default, #{$ds-color-border-ui-focus-default});
-
-      box-shadow: unset;
-    }
-
-    &:not(:hover) {
-      --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse});
-    }
-  }
-
-  &:hover {
-    --ds-auro-calendar-cell-container-color: var(--ds-color-brand-neutral-200, #{$ds-color-brand-neutral-200});
-    --ds-auro-calendar-cell-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default});
-  }
-
-  &.disabled {
-    --ds-auro-calendar-cell-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
-    --ds-auro-calendar-cell-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default});
-  }
-
-  &.inRange,
-  &.rangeDepartDate,
-  &.rangeReturnDate,
-  &.lastHoveredDate {
-    &:before {
-      background-color: var(--ds-auro-calendar-cell-in-range-color);
-    }
-  }
-
-  &.sameDateTrip {
-    &:before {
-      --ds-auro-calendar-cell-in-range-color: transparent;
-    }
-  }
-}
-
-:host([disabled]) {
-  --ds-auro-calendar-cell-price-text-color: var(--ds-color-text-ui-disabled-default, #{$ds-color-text-ui-disabled-default});
-}

package/components/datepicker/src/styles/color-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[auro-input]::part(wrapper){--ds-auro-input-border-color: transparent;--ds-auro-input-container-color: transparent}.dpTriggerContent [auro-input]:nth-child(2):before{background-color:var(--ds-auro-datepicker-range-input-divider-color)}.placeholderDate{color:var(--ds-auro-datepicker-placeholder-color)}`;

package/components/datepicker/src/styles/color-month-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{background-color:var(--ds-auro-calendar-month-container-color)}@media screen and (min-width: 576px){:host(:not(:last-of-type)):after{background-color:var(--ds-auro-calendar-month-divider-color)}}.header{color:var(--ds-auro-calendar-month-header-color)}`;

package/components/datepicker/src/styles/color-month.css

@@ -1,34 +0,0 @@
-*, *:before, *:after {
-  box-sizing: border-box;
-}
-@media (prefers-reduced-motion: reduce) {
-  *, *:before, *:after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-*:focus-visible {
-  outline: 0;
-}
-*:focus-visible {
-  outline: 0;
-}
-
-:focus:not(:focus-visible) {
-  outline: 3px solid transparent;
-}
-
-:host {
-  background-color: var(--ds-auro-calendar-month-container-color);
-}
-
-@media screen and (min-width: 576px) {
-  :host(:not(:last-of-type)):after {
-    background-color: var(--ds-auro-calendar-month-divider-color);
-  }
-}
-
-.header {
-  color: var(--ds-auro-calendar-month-header-color);
-}

package/components/datepicker/src/styles/color-month.scss

@@ -1,27 +0,0 @@
-// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-// Import Auro tokens
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-
-@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
-@import '@aurodesignsystem/webcorestylesheets/src/core';
-
-
-:host {
-  background-color: var(--ds-auro-calendar-month-container-color);
-}
-
-:host(:not(:last-of-type)) {
-  @include auro_grid-breakpoint--sm {
-    &:after {
-      background-color: var(--ds-auro-calendar-month-divider-color);
-    }
-  }
-}
-
-.header {
-  color: var(--ds-auro-calendar-month-header-color);
-}

package/components/datepicker/src/styles/color.css

@@ -1,43 +0,0 @@
-/* stylelint-disable max-nesting-depth, declaration-no-important, selector-class-pattern, declaration-empty-line-before */
-.util_displayInline {
-  display: inline;
-}
-
-.util_displayInlineBlock {
-  display: inline-block;
-}
-
-.util_displayBlock {
-  display: block;
-}
-
-.util_displayFlex {
-  display: flex;
-}
-
-.util_displayHidden {
-  display: none;
-}
-
-.util_displayHiddenVisually {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-}
-
-[auro-input]::part(wrapper) {
-  --ds-auro-input-border-color: transparent;
-  --ds-auro-input-container-color: transparent;
-}
-
-.dpTriggerContent [auro-input]:nth-child(2):before {
-  background-color: var(--ds-auro-datepicker-range-input-divider-color);
-}
-
-.placeholderDate {
-  color: var(--ds-auro-datepicker-placeholder-color);
-}

package/components/datepicker/src/styles/color.scss

@@ -1,30 +0,0 @@
-// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-/* stylelint-disable max-nesting-depth, declaration-no-important, selector-class-pattern, declaration-empty-line-before */
-
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-
-@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
-@import '@aurodesignsystem/webcorestylesheets/src/utilityClasses/displayProperties';
-
-[auro-input] {
-  &::part(wrapper) {
-    --ds-auro-input-border-color: transparent;
-    --ds-auro-input-container-color: transparent;
-  }
-}
-
-.dpTriggerContent {
-  [auro-input] {
-    &:nth-child(2) {
-      &:before {
-        background-color: var(--ds-auro-datepicker-range-input-divider-color);
-      }
-    }
-  }
-}
-
-.placeholderDate {
-  color: var(--ds-auro-datepicker-placeholder-color);
-}

package/components/datepicker/src/styles/style-auro-calendar-cell-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`@media screen and (max-width: 576px){:host{display:flex;justify-content:center}}.day{position:relative;width:var(--ds-size-500, 2.5rem);height:calc(var(--ds-size-700, 3.5rem) - 2px);padding:0;border-width:1px;border-style:solid;border-radius:var(--ds-size-300, 1.5rem);cursor:pointer;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);user-select:none}.day.disabled{cursor:default !important}.day.inRange::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%)}@media screen and (min-width: 576px){.day.inRange::before{width:var(--ds-size-600, 3rem)}}.day.rangeDepartDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(0%, -50%)}@media screen and (min-width: 576px){.day.rangeDepartDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.day.rangeReturnDate::before,.day.lastHoveredDate::before{position:absolute;z-index:-1;top:50%;left:50%;display:block;width:14.2857142857vw;height:var(--ds-size-600, 3rem);content:"";transform:translate(-50%, -50%);width:7.1428571429vw;transform:translate(-100%, -50%)}@media screen and (min-width: 576px){.day.rangeReturnDate::before,.day.lastHoveredDate::before{width:calc(var(--ds-size-600, 3rem)/2)}}.dateSlot{display:flex;flex-direction:column;font-size:var(--ds-text-body-size-xxs, 0.625rem)}::slotted([slot^=date_]){position:absolute;top:80%;left:50%;width:80%;overflow:hidden;white-space:nowrap;transform:translate(-50%, -50%)}::slotted(auro-icon){max-height:24px;max-width:24px}:host([renderForDateSlot]) .buttonWrapper{position:relative;width:100%;top:5px}:host([renderForDateSlot]) .currentDayMarker{position:relative;padding-bottom:5px;top:-8px}@media screen and (min-width: 576px){.day{width:var(--ds-size-600, 3rem);height:var(--ds-size-800, 4rem);font-size:var(--ds-text-body-size-lg, 1.125rem)}.day:hover{cursor:pointer}.dateSlot{font-size:var(--ds-text-body-size-xs, 0.75rem)}}`;

package/components/datepicker/src/styles/style-auro-calendar-cell.css

@@ -1,123 +0,0 @@
-/* stylelint-disable selector-max-class, order/properties-order, declaration-empty-line-before, scss/selector-nest-combinators,
-   selector-pseudo-element-colon-notation, max-nesting-depth, at-rule-empty-line-before, no-descending-specificity, declaration-no-important */
-@media screen and (max-width: 576px) {
-  :host {
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.day {
-  position: relative;
-  width: var(--ds-size-500, 2.5rem);
-  height: calc(var(--ds-size-700, 3.5rem) - 2px);
-  padding: 0;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--ds-size-300, 1.5rem);
-  cursor: pointer;
-  font-family: var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);
-  font-size: var(--ds-text-body-size-default, 1rem);
-  user-select: none;
-}
-.day.disabled {
-  cursor: default !important;
-}
-.day.inRange::before {
-  position: absolute;
-  z-index: -1;
-  top: 50%;
-  left: 50%;
-  display: block;
-  width: 14.2857142857vw;
-  height: var(--ds-size-600, 3rem);
-  content: "";
-  transform: translate(-50%, -50%);
-}
-@media screen and (min-width: 576px) {
-  .day.inRange::before {
-    width: var(--ds-size-600, 3rem);
-  }
-}
-.day.rangeDepartDate::before {
-  position: absolute;
-  z-index: -1;
-  top: 50%;
-  left: 50%;
-  display: block;
-  width: 14.2857142857vw;
-  height: var(--ds-size-600, 3rem);
-  content: "";
-  transform: translate(-50%, -50%);
-  width: 7.1428571429vw;
-  transform: translate(0%, -50%);
-}
-@media screen and (min-width: 576px) {
-  .day.rangeDepartDate::before {
-    width: calc(var(--ds-size-600, 3rem) / 2);
-  }
-}
-.day.rangeReturnDate::before, .day.lastHoveredDate::before {
-  position: absolute;
-  z-index: -1;
-  top: 50%;
-  left: 50%;
-  display: block;
-  width: 14.2857142857vw;
-  height: var(--ds-size-600, 3rem);
-  content: "";
-  transform: translate(-50%, -50%);
-  width: 7.1428571429vw;
-  transform: translate(-100%, -50%);
-}
-@media screen and (min-width: 576px) {
-  .day.rangeReturnDate::before, .day.lastHoveredDate::before {
-    width: calc(var(--ds-size-600, 3rem) / 2);
-  }
-}
-
-.dateSlot {
-  display: flex;
-  flex-direction: column;
-  font-size: var(--ds-text-body-size-xxs, 0.625rem);
-}
-
-::slotted([slot^=date_]) {
-  position: absolute;
-  top: 80%;
-  left: 50%;
-  width: 80%;
-  overflow: hidden;
-  white-space: nowrap;
-  transform: translate(-50%, -50%);
-}
-
-::slotted(auro-icon) {
-  max-height: 24px;
-  max-width: 24px;
-}
-
-:host([renderForDateSlot]) .buttonWrapper {
-  position: relative;
-  width: 100%;
-  top: 5px;
-}
-:host([renderForDateSlot]) .currentDayMarker {
-  position: relative;
-  padding-bottom: 5px;
-  top: -8px;
-}
-
-@media screen and (min-width: 576px) {
-  .day {
-    width: var(--ds-size-600, 3rem);
-    height: var(--ds-size-800, 4rem);
-    font-size: var(--ds-text-body-size-lg, 1.125rem);
-  }
-  .day:hover {
-    cursor: pointer;
-  }
-  .dateSlot {
-    font-size: var(--ds-text-body-size-xs, 0.75rem);
-  }
-}

package/components/datepicker/src/styles/style-auro-calendar-cell.scss

@@ -1,147 +0,0 @@
-// // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// // See LICENSE in the project root for license information.
-
-// // ---------------------------------------------------------------------
-
-@import '@aurodesignsystem/webcorestylesheets/src/breakpoints';
-@import '@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables';
-
-/* stylelint-disable selector-max-class, order/properties-order, declaration-empty-line-before, scss/selector-nest-combinators,
-   selector-pseudo-element-colon-notation, max-nesting-depth, at-rule-empty-line-before, no-descending-specificity, declaration-no-important */
-
-@mixin in-range-pseudo-elem {
-  position: absolute;
-  z-index: -1;
-  top: 50%;
-  left: 50%;
-
-  display: block;
-  width: calc(100vw / 7);
-  height: var(--ds-size-600, $ds-size-600);
-
-  content: '';
-  transform: translate(-50%, -50%);
-}
-
-:host {
-  @include auro_breakpoint($max: $ds-grid-breakpoint-sm) {
-    display: flex;
-    justify-content: center;
-  }
-}
-
-.day {
-  position: relative;
-
-  width: var(--ds-size-500, $ds-size-500);
-  height: calc(var(--ds-size-700, $ds-size-700) - 2px);
-
-  padding: 0;
-
-  border-width: 1px;
-  border-style: solid;
-  border-radius: var(--ds-size-300, $ds-size-300);
-
-  cursor: pointer;
-
-  font-family: var(--ds-font-family-default, $ds-font-family-default);
-  font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
-
-  user-select: none;
-
-  &.disabled {
-    cursor: default !important;
-  }
-
-  &.inRange::before {
-    @include in-range-pseudo-elem;
-
-    @include auro_grid-breakpoint--sm {
-      width: var(--ds-size-600, $ds-size-600);
-    }
-  }
-
-  &.rangeDepartDate {
-    &::before {
-      @include in-range-pseudo-elem;
-
-      width: calc(calc(100vw / 7) / 2);
-
-      transform: translate(0%, -50%);
-
-      @include auro_grid-breakpoint--sm {
-        width: calc(var(--ds-size-600, $ds-size-600) / 2);
-      }
-    }
-  }
-
-  &.rangeReturnDate::before,
-  &.lastHoveredDate::before {
-    @include in-range-pseudo-elem;
-
-    width: calc(calc(100vw / 7) / 2);
-
-    transform: translate(-100%, -50%);
-
-    @include auro_grid-breakpoint--sm {
-      width: calc(var(--ds-size-600, $ds-size-600) / 2);
-    }
-  }
-}
-
-.dateSlot {
-  display: flex;
-  flex-direction: column;
-
-  font-size: var(--ds-text-body-size-xxs, $ds-text-body-size-xxs);
-}
-
-::slotted([slot^="date_"]) {
-  position: absolute;
-  top: 80%;
-  left: 50%;
-
-  width: 80%;
-
-  overflow: hidden;
-  white-space: nowrap;
-
-  transform: translate(-50%, -50%);
-}
-
-::slotted(auro-icon) {
-  max-height: 24px;
-  max-width: 24px;
-}
-
-:host([renderForDateSlot]) {
-  .buttonWrapper {
-    position: relative;
-    width: 100%;
-  
-    top: 5px;
-  }
-  
-  .currentDayMarker {
-    position: relative;
-    padding-bottom: 5px;
-    top: -8px;
-  }
-}
-
-@include auro_grid-breakpoint--sm {
-  .day {
-    width: var(--ds-size-600, $ds-size-600);
-    height: var(--ds-size-800, $ds-size-800);
-
-    font-size: var(--ds-text-body-size-lg, $ds-text-body-size-lg);
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  .dateSlot {
-    font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
-  }
-}

package/components/datepicker/src/styles/style-auro-calendar-css.js

@@ -1,2 +0,0 @@
-import { css } from 'lit';
-export default css`:host{--calendar-width: 336px;--mobile-footer-height: 150px;--mobile-header-height: 68px;height:100vh;height:100dvh}@media screen and (max-width: 576px){:host{width:100%}}.calendarNavBtn{display:flex;width:var(--ds-size-500, 2.5rem);height:var(--ds-size-500, 2.5rem);align-items:center;justify-content:center;border-width:1px;border-style:solid;border-radius:50%;cursor:pointer}.prevMonth,.nextMonth{position:absolute;top:var(--ds-size-200, 1rem)}.prevMonth{left:var(--ds-size-50, 0.25rem)}.nextMonth{right:var(--ds-size-50, 0.25rem)}.headerActions{padding:0 var(--ds-size-200, 1rem)}.mobileHeader{display:none;width:100%;height:var(--mobile-header-height);z-index:1;align-items:center;flex-direction:row}.headerDateFrom{display:flex;height:var(--mobile-header-height);flex:1;flex-direction:column;justify-content:center;padding:0 var(--ds-size-150, 0.75rem) 0 var(--ds-size-200, 1rem)}.mobileDateLabel{font-size:var(--ds-text-body-size-xs, 0.75rem)}.headerDateTo{height:calc(var(--mobile-header-height) - var(--ds-size-300, 1.5rem));padding:var(--ds-size-300, 1.5rem) var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host(:not([noRange])) .headerDateTo{position:relative;display:flex;flex:1;flex-direction:column;justify-content:center}:host(:not([noRange])) .headerDateTo:after{position:absolute;top:calc(50% + 10px);left:0;display:block;width:1px;height:var(--ds-size-300, 1.5rem);content:"";transform:translateY(-50%)}.mobileFooter{display:none;width:100%;align-items:flex-end;flex-direction:column;justify-content:flex-end}.mobileFooterActions{position:relative;bottom:0;left:50%;display:none;width:calc(100% - var(--ds-size-200, 1rem)*2);align-items:flex-end;flex-direction:column;justify-content:flex-end;padding:var(--ds-size-150) calc(var(--ds-size-200, 1rem));transform:translateX(-50%)}.mobileFooterActions auro-button{width:100%}@media screen and (max-width: 576px){.prevMonth,.nextMonth{display:none}.mobileHeader,.mobileFooter,.mobileFooterActions{display:flex}.calendarWrapper{display:flex;height:100%;max-height:100dvh;flex-direction:column;overflow:auto hidden}.calendars{display:flex;flex-direction:column;flex:1;align-items:center;width:100%;overflow-y:scroll;overscroll-behavior:contain}.calendars:after{display:block;width:100%;height:var(--mobile-footer-height);content:""}}@media screen and (min-width: 576px){.calendars{display:flex;flex-direction:row}}`;