@salt-ds/lab 1.0.0-alpha.33 → 1.0.0-alpha.34

package/css/salt-lab.css

@@ -196,6 +196,8 @@
 /* src/calendar/Calendar.css */
 .saltCalendar {
   width: min-content;
+  background: var(--salt-container-primary-background);
+  padding: var(--salt-spacing-100);
 }
 
 /* src/carousel/Carousel.css */
@@ -868,6 +870,7 @@
   height: min-content;
   border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);
   box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
 }
 .saltDialog-info {
   border-color: var(--salt-status-info-borderColor);
@@ -983,8 +986,8 @@
   box-shadow: var(--salt-overlayable-shadow-scroll);
 }
 
-/* src/dialog/DialogTitle.css */
-.saltDialogTitle {
+/* src/dialog/DialogHeader.css */
+.saltDialogHeader {
   padding-bottom: var(--salt-spacing-100);
   padding-left: var(--salt-spacing-300);
   padding-right: var(--salt-spacing-300);
@@ -994,16 +997,16 @@
   gap: var(--salt-spacing-100);
   box-sizing: border-box;
 }
-.saltDialogTitle-title {
+.saltDialogHeader-header {
   margin: 0;
 }
-.saltDialogTitle .saltStatusIndicator.saltIcon {
+.saltDialogHeader .saltStatusIndicator.saltIcon {
   --icon-size: var(--salt-text-h2-lineHeight);
 }
-.saltDialogTitle-withAccent {
+.saltDialogHeader-withAccent {
   position: relative;
 }
-.saltDialogTitle-withAccent::before {
+.saltDialogHeader-withAccent::before {
   content: "";
   position: absolute;
   top: 0;
@@ -1012,98 +1015,19 @@
   width: var(--salt-size-accent);
   background: var(--salt-accent-background);
 }
-.saltDialogTitle-error::before {
+.saltDialogHeader-error::before {
   background: var(--salt-status-error-borderColor);
 }
-.saltDialogTitle-info::before {
+.saltDialogHeader-info::before {
   background: var(--salt-status-info-borderColor);
 }
-.saltDialogTitle-success::before {
+.saltDialogHeader-success::before {
   background: var(--salt-status-success-borderColor);
 }
-.saltDialogTitle-warning::before {
+.saltDialogHeader-warning::before {
   background: var(--salt-status-warning-borderColor);
 }
 
-/* src/drawer/Drawer.css */
-.saltDrawer {
-  background: var(--drawer-background);
-  display: flex;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 100%;
-  overflow: auto;
-  padding: var(--salt-spacing-300);
-  box-shadow: var(--salt-overlayable-shadow-modal);
-  z-index: var(--salt-zIndex-drawer);
-  position: fixed;
-  top: 0;
-  box-sizing: border-box;
-}
-.saltDrawer-primary {
-  --drawer-background: var(--salt-container-primary-background);
-}
-.saltDrawer-secondary {
-  --drawer-background: var(--salt-container-secondary-background);
-}
-.saltDrawer-top {
-  left: 0;
-  right: 0;
-  bottom: auto;
-}
-.saltDrawer-top.saltDrawer-enterAnimation {
-  animation: var(--salt-animation-slide-in-bottom);
-}
-.saltDrawer-top.saltDrawer-exitAnimation {
-  animation: var(--salt-animation-slide-out-bottom);
-}
-.saltDrawer-right {
-  left: auto;
-  right: 0;
-  height: 100%;
-}
-.saltDrawer-right.saltDrawer-enterAnimation {
-  animation: var(--salt-animation-slide-in-right);
-}
-.saltDrawer-right.saltDrawer-exitAnimation {
-  animation: var(--salt-animation-slide-out-right);
-}
-.saltDrawer-left {
-  left: 0;
-  right: auto;
-  height: 100%;
-}
-.saltDrawer-left.saltDrawer-enterAnimation {
-  animation: var(--salt-animation-slide-in-left);
-}
-.saltDrawer-left.saltDrawer-exitAnimation {
-  animation: var(--salt-animation-slide-out-left);
-}
-.saltDrawer-bottom {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: auto;
-}
-.saltDrawer-bottom.saltDrawer-enterAnimation {
-  animation: var(--salt-animation-slide-in-top);
-}
-.saltDrawer-bottom.saltDrawer-exitAnimation {
-  animation: var(--salt-animation-slide-out-top);
-}
-
-/* src/drawer/DrawerCloseButton.css */
-.saltDrawerCloseButton-container {
-  position: relative;
-  display: flex;
-  justify-content: flex-end;
-}
-.saltButton-secondary.saltDrawerCloseButton {
-  position: fixed;
-  margin-top: calc(var(--salt-spacing-300) * -1);
-  margin-right: calc(var(--salt-spacing-300) * -1);
-}
-
 /* src/dropdown/Dropdown.css */
 .saltDropdown {
   --saltIcon-margin: 2px 0 0 8px;
@@ -2407,6 +2331,7 @@
 }
 .saltOption[aria-disabled=true] {
   color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
 }
 
 /* src/option/OptionGroup.css */
@@ -2455,6 +2380,7 @@
   border-color: var(--overlay-borderColor);
   border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));
   border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));
+  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));
   background: var(--overlay-background);
   box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
   color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));
@@ -4056,137 +3982,95 @@
 .saltCalendarCarousel-track > :nth-child(2) {
   position: relative;
 }
-.saltCalendarCarousel-shouldAnimate {
-  transition: transform 200ms ease-in-out;
-}
 
 /* src/calendar/internal/CalendarDay.css */
 .saltCalendarDay {
-  --calendar-day-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-background: var(--salt-selectable-background);
-  --calendar-day-background-hover: var(--salt-selectable-background-hover);
-  --calendar-day-text-color-hover: var(--salt-content-primary-foreground);
-  --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);
-  --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);
-  --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);
-  --calendar-day-blocked-background: var(--calendar-day-background);
-  --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);
-  --calendar-day-unselectable-background: var(--calendar-day-background);
-  --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);
-  --calendar-day-selected-background: var(--salt-selectable-background-selected);
-  --calendar-day-selected-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);
-  --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);
-  --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);
-  --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);
-  --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);
-  --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);
-  --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground);
-  --calendar-day-focused-outline: var(--salt-focused-outline);
-  --calendar-day-size: var(--salt-size-base);
-  --calendar-day-fontSize: var(--salt-text-fontSize);
-}
-.saltCalendarDay {
-  width: var(--calendar-day-size);
-  height: var(--calendar-day-size);
-  color: var(--calendar-day-text-color);
-  background-color: var(--calendar-day-background);
-  font-size: var(--calendar-day-fontSize);
-  border: 0;
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  line-height: var(--salt-text-lineHeight);
+  font-size: var(--salt-text-fontSize);
+  width: var(--salt-size-base);
+  height: var(--salt-size-base);
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
   cursor: pointer;
-  position: relative;
+  border: none;
+  padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+  overflow: hidden;
+}
+.saltCalendarDay-content {
+  margin: 0 var(--salt-spacing-50);
+  width: 100%;
 }
 .saltCalendarDay:focus-visible {
-  outline: var(--calendar-day-focused-outline);
+  outline: var(--salt-focused-outline);
   outline-offset: calc(0px - var(--salt-focused-outlineWidth));
 }
 .saltCalendarDay-outOfRange {
-  color: var(--calendar-day-outOfRange-text-color);
-}
-.saltCalendarDay:hover {
-  background: var(--calendar-day-background-hover);
-  color: var(--calendar-day-text-color-hover);
-}
-.saltCalendarDay-unselectableMedium,
-.saltCalendarDay-unselectableMedium:hover {
-  color: var(--calendar-day-blocked-text-color);
-  cursor: var(--calendar-day-blocked-cursor);
-  background: var(--calendar-day-blocked-background);
-}
-.saltCalendarDay-today {
-  border: 1px solid var(--calendar-day-currentDay-borderColor);
-}
-.saltCalendarDay-selectedSpan {
-  background: var(--calendar-day-selectedSpan-background);
-  color: var(--calendar-day-selectedSpan-text-color);
-}
-.saltCalendarDay-hoveredSpan,
-.saltCalendarDay-hoveredSpan:hover {
-  background: var(--calendar-day-hoveredSpan-background);
-  color: var(--calendar-day-hoveredSpan-text-color);
+  color: var(--salt-content-secondary-foreground);
 }
+.saltCalendarDay:hover,
 .saltCalendarDay-hoveredOffset,
 .saltCalendarDay-hoveredOffset:hover {
-  background: var(--calendar-day-hoveredOffset-background);
-  color: var(--calendar-day-hoveredOffset-text-color);
+  background: var(--salt-selectable-background-hover);
 }
-.saltCalendarDay-selected,
-.saltCalendarDay-selected:hover {
-  background: var(--calendar-day-selected-background);
-  color: var(--calendar-day-selected-text-color);
+.saltCalendarDay-selectedStart {
+  z-index: var(--salt-zIndex-default);
 }
+.saltCalendarDay-selected,
+.saltCalendarDay-selected:hover,
 .saltCalendarDay-selectedStart,
-.saltCalendarDay-selectedStart:hover {
-  background: var(--calendar-day-selectedStart-background);
-  color: var(--calendar-day-selectedStart-text-color);
-}
+.saltCalendarDay-selectedStart:hover,
 .saltCalendarDay-selectedEnd,
 .saltCalendarDay-selectedEnd:hover {
-  background: var(--calendar-day-selectedEnd-background);
-  color: var(--calendar-day-selectedEnd-text-color);
-}
-.saltCalendarDay-selected:focus-visible {
-  outline-color: var(--calendar-day-selected-focused-outlineColor);
-}
-.saltCalendarDay-selectedStart:focus-visible {
-  outline-color: var(--calendar-day-selectedStart-focused-outlineColor);
-}
-.saltCalendarDay-selectedEnd:focus-visible {
-  outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);
-}
-.saltCalendarDay-unselectableLow,
-.saltCalendarDay-unselectableLow:hover {
-  color: var(--calendar-day-unselectable-text-color);
-  background: var(--calendar-day-unselectable-background);
-  cursor: var(--calendar-day-unselectable-cursor);
-  text-decoration: line-through;
-}
-.salt-density-high {
-  --calendar-day-blocked-icon-size: 14px;
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);
 }
-.salt-density-medium {
-  --calendar-day-blocked-icon-size: 18px;
+.saltCalendarDay-hoveredSpan,
+.saltCalendarDay-hoveredSpan:hover,
+.saltCalendarDay-selectedSpan,
+.saltCalendarDay-selectedSpan:hover {
+  background: var(--salt-selectable-background-hover);
+  box-shadow:
+    calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
+    calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
+    0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
+}
+.saltCalendarDay-disabled,
+.saltCalendarDay-disabled:hover,
+.saltCalendarDay-unselectable,
+.saltCalendarDay-unselectable:hover {
+  background: var(--salt-selectable-background-disabled);
+  cursor: var(--salt-selectable-cursor-disabled);
 }
-.salt-density-low {
-  --calendar-day-blocked-icon-size: 24px;
+.saltCalendarDay-highlighted:before {
+  content: "";
+  height: var(--salt-spacing-200);
+  width: var(--salt-spacing-200);
+  top: calc(var(--salt-spacing-100) * -1);
+  right: calc(var(--salt-spacing-100) * -1);
+  transform: rotate(45deg);
+  background: var(--salt-selectable-borderColor-selected);
+  position: absolute;
 }
-.salt-density-touch {
-  --calendar-day-blocked-icon-size: 28px;
+.saltCalendarDay-disabled {
+  color: var(--salt-content-secondary-foreground-disabled);
 }
-.saltCalendarDay-blockedIcon {
-  fill: var(--calendar-day-blocked-icon-color);
+.saltCalendarDay-unselectable:after {
+  content: "";
+  height: var(--salt-size-border);
+  width: calc(100% - var(--salt-spacing-100));
+  background: var(--salt-content-secondary-foreground);
   position: absolute;
-  --icon-size: var(--calendar-day-blocked-icon-size);
-  pointer-events: none;
-  line-height: 1.29;
+}
+.saltCalendarDay-today,
+.saltCalendarDay-today:hover {
+  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-foreground-active);
+  margin-bottom: calc(var(--salt-size-indicator) * -1);
 }
 .saltCalendarDay-hidden {
   visibility: hidden;
@@ -4195,50 +4079,49 @@
 /* src/calendar/internal/CalendarMonth.css */
 .saltCalendarMonth-dateGrid {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
+  gap: var(--salt-size-border);
+  grid-template-columns: repeat(7, var(--salt-size-base));
+  grid-template-rows: repeat(6, var(--salt-size-base));
   text-align: center;
+  margin: var(--salt-size-border);
 }
 
 /* src/calendar/internal/CalendarNavigation.css */
-.salt-density-medium,
-.salt-density-touch,
-.salt-density-low {
-  --calendar-navigation-gap: calc(var(--salt-size-unit) * 0.5);
-}
-.salt-density-high {
-  --calendar-navigation-gap: 0px;
-}
-.saltCalendarNavigation-hideYearDropdown {
-  --calendar-navigation-gap: calc(var(--salt-size-unit) * 2);
-}
 .saltCalendarNavigation {
   display: grid;
-  grid-template-columns: min-content auto auto min-content;
-  grid-gap: var(--calendar-navigation-gap);
+  grid-template-columns: min-content auto min-content;
+  padding-bottom: var(--salt-spacing-100);
+  grid-gap: 0;
+  align-items: center;
+  height: var(--salt-size-base);
 }
 .saltCalendarNavigation-hideYearDropdown {
   grid-template-columns: min-content auto min-content;
+  grid-gap: var(--salt-spacing-300);
+}
+.saltCalendarNavigation-dropdowns {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: var(--salt-spacing-100);
 }
 
 /* src/calendar/internal/CalendarWeekHeader.css */
-.saltCalendarWeekHeader {
-  --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor);
-  --calendar-week-header-text-color: var(--salt-content-secondary-foreground);
-  --calendar-week-header-size: var(--salt-size-base);
-  --calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize));
-}
 .saltCalendarWeekHeader {
   display: grid;
-  grid-template-columns: repeat(7, 1fr);
+  gap: var(--salt-size-border);
+  grid-template-columns: repeat(7, var(--salt-size-base));
   text-align: center;
-  box-shadow: inset 0 -1px 0 var(--calendar-week-header-underline-color);
+  align-items: center;
+  height: var(--salt-size-base);
+  margin: var(--salt-size-border);
 }
 .saltCalendarWeekHeader-dayOfWeek {
-  width: var(--calendar-week-header-size);
-  height: var(--calendar-week-header-size);
-  color: var(--calendar-week-header-text-color);
-  line-height: var(--calendar-week-header-size);
-  font-size: var(--calendar-week-header-fontSize);
+  width: var(--salt-size-base);
+  color: var(--salt-content-secondary-foreground);
+  font-family: var(--salt-text-fontFamily);
+  font-weight: var(--salt-text-fontWeight);
+  font-size: var(--salt-text-fontSize);
+  line-height: var(--salt-text-lineHeight);
 }
 
 /* src/list-deprecated/internal/Highlighter.css */
@@ -4436,4 +4319,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/00f2fde8-73d7-4e9d-b591-059001f044c9.css */
+/* src/c6e1d4ac-675b-4241-bf4e-3d3c78a6ade3.css */

package/dist-cjs/calendar/Calendar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCalendar {\n  width: min-content;\n}\n";
+var css_248z = ".saltCalendar {\n  width: min-content;\n  background: var(--salt-container-primary-background);\n  padding: var(--salt-spacing-100);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Calendar.css.js.map

package/dist-cjs/calendar/internal/CalendarCarousel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCalendarCarousel-track {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n  position: relative;\n}\n\n.saltCalendarCarousel-shouldAnimate {\n  transition: transform 200ms ease-in-out;\n}\n";
+var css_248z = ".saltCalendarCarousel-track {\n  display: grid;\n  grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n  position: absolute;\n  left: 0;\n  width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n  position: relative;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CalendarCarousel.css.js.map

package/dist-cjs/calendar/internal/CalendarCarousel.js

@@ -10,20 +10,16 @@ var core = require('@salt-ds/core');
 var CalendarContext = require('./CalendarContext.js');
 var CalendarCarousel$1 = require('./CalendarCarousel.css.js');
 var utils = require('./utils.js');
-var window$1 = require('@salt-ds/window');
+var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 
 function getMonths(month) {
   return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
 }
-function usePreviousMonth(visibleMonth) {
-  const previous = core.usePrevious(visibleMonth, [utils.formatDate(visibleMonth)]);
-  return previous != null ? previous : date.today(date.getLocalTimeZone());
-}
 const withBaseName = core.makePrefixer("saltCalendarCarousel");
 const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref) {
   const { ...rest } = props;
-  const targetWindow = window$1.useWindow();
+  const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
     testId: "salt-calendar-carousel",
     css: CalendarCarousel$1,
@@ -35,18 +31,9 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
   const containerRef = React.useRef(null);
   const diffIndex = (a, b) => utils.monthDiff(a, b);
   const { current: baseIndex } = React.useRef(visibleMonth);
-  const previousVisibleMonth = usePreviousMonth(visibleMonth);
-  core.useIsomorphicLayoutEffect(() => {
-    var _a, _b;
-    if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {
-      (_a = containerRef.current) == null ? void 0 : _a.classList.remove(withBaseName("shouldAnimate"));
-    } else {
-      (_b = containerRef.current) == null ? void 0 : _b.classList.add(withBaseName("shouldAnimate"));
-    }
-  }, [utils.formatDate(visibleMonth), utils.formatDate(previousVisibleMonth)]);
   core.useIsomorphicLayoutEffect(() => {
     if (containerRef.current) {
-      containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * 100}%, 0, 0)`;
+      containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * -101}%, 0, 0)`;
     }
   });
   const [months, setMonths] = React.useState(() => getMonths(visibleMonth));
@@ -57,18 +44,7 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
       });
       return oldMonths.concat(newMonths);
     });
-    const finishTransition = () => {
-      setMonths(getMonths(visibleMonth));
-    };
-    const container = containerRef.current;
-    if (container && parseFloat(window.getComputedStyle(container).transitionDuration) > 0) {
-      container == null ? void 0 : container.addEventListener("transitionend", finishTransition);
-      return () => {
-        container == null ? void 0 : container.removeEventListener("transitionend", finishTransition);
-      };
-    } else {
-      finishTransition();
-    }
+    setMonths(getMonths(visibleMonth));
     return void 0;
   }, [utils.formatDate(visibleMonth)]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -84,7 +60,7 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
       children: months.map((date, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
         className: withBaseName("slide"),
         style: {
-          transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`
+          transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`
         },
         "aria-hidden": index !== 1 ? "true" : void 0,
         children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonth.CalendarMonth, {

package/dist-cjs/calendar/internal/CalendarCarousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarCarousel.js","sources":["../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport {\n  DateValue,\n  getLocalTimeZone,\n  isSameMonth,\n  today,\n} from \"@internationalized/date\";\nimport { CalendarMonth, CalendarMonthProps } from \"./CalendarMonth\";\nimport {\n  makePrefixer,\n  useIsomorphicLayoutEffect,\n  usePrevious,\n} from \"@salt-ds/core\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarCarouselCss from \"./CalendarCarousel.css\";\nimport { formatDate, monthDiff } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type CalendarCarouselProps = Omit<CalendarMonthProps, \"date\">;\n\nfunction getMonths(month: DateValue) {\n  return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nfunction usePreviousMonth(visibleMonth: DateValue) {\n  const previous = usePrevious(visibleMonth, [formatDate(visibleMonth)]);\n\n  return previous ?? today(getLocalTimeZone());\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarCarousel\");\n\nexport const CalendarCarousel = forwardRef<\n  HTMLDivElement,\n  CalendarCarouselProps\n>(function CalendarCarousel(props, ref) {\n  const { ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-carousel\",\n    css: calendarCarouselCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: { visibleMonth },\n  } = useCalendarContext();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n  const { current: baseIndex } = useRef(visibleMonth);\n  const previousVisibleMonth = usePreviousMonth(visibleMonth);\n\n  useIsomorphicLayoutEffect(() => {\n    if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {\n      containerRef.current?.classList.remove(withBaseName(\"shouldAnimate\"));\n    } else {\n      containerRef.current?.classList.add(withBaseName(\"shouldAnimate\"));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [formatDate(visibleMonth), formatDate(previousVisibleMonth)]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.style.transform = `translate3d(${\n        diffIndex(baseIndex, visibleMonth) * 100\n      }%, 0, 0)`;\n    }\n  });\n\n  const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n  useEffect(() => {\n    setMonths((oldMonths) => {\n      const newMonths = getMonths(visibleMonth).filter((month) => {\n        return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n      });\n\n      return oldMonths.concat(newMonths);\n    });\n    const finishTransition = () => {\n      setMonths(getMonths(visibleMonth));\n    };\n    const container = containerRef.current;\n\n    if (\n      container &&\n      parseFloat(window.getComputedStyle(container).transitionDuration) > 0\n    ) {\n      container?.addEventListener(\"transitionend\", finishTransition);\n\n      return () => {\n        container?.removeEventListener(\"transitionend\", finishTransition);\n      };\n    } else {\n      finishTransition();\n    }\n\n    return undefined;\n  }, [formatDate(visibleMonth)]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className={withBaseName()}\n      style={{\n        overflowX: \"hidden\",\n        position: \"relative\",\n      }}\n      ref={ref}\n    >\n      <div className={withBaseName(\"track\")} ref={containerRef}>\n        {months.map((date, index) => (\n          <div\n            key={formatDate(date)}\n            className={withBaseName(\"slide\")}\n            style={{\n              transform: `translateX(${diffIndex(date, baseIndex) * 100}%)`,\n            }}\n            aria-hidden={index !== 1 ? \"true\" : undefined}\n          >\n            <CalendarMonth isVisible={index === 1} {...rest} date={date} />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n"],"names":["usePrevious","formatDate","today","getLocalTimeZone","makePrefixer","forwardRef","CalendarCarousel","useWindow","useComponentCssInjection","calendarCarouselCss","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useState","useEffect","isSameMonth","jsx","CalendarMonth"],"mappings":"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"}
+{"version":3,"file":"CalendarCarousel.js","sources":["../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { DateValue, isSameMonth } from \"@internationalized/date\";\nimport { CalendarMonth, CalendarMonthProps } from \"./CalendarMonth\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarCarouselCss from \"./CalendarCarousel.css\";\nimport { formatDate, monthDiff } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type CalendarCarouselProps = Omit<CalendarMonthProps, \"date\">;\n\nfunction getMonths(month: DateValue) {\n  return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarCarousel\");\n\nexport const CalendarCarousel = forwardRef<\n  HTMLDivElement,\n  CalendarCarouselProps\n>(function CalendarCarousel(props, ref) {\n  const { ...rest } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-calendar-carousel\",\n    css: calendarCarouselCss,\n    window: targetWindow,\n  });\n\n  const {\n    state: { visibleMonth },\n  } = useCalendarContext();\n  const containerRef = useRef<HTMLDivElement>(null);\n  const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n  const { current: baseIndex } = useRef(visibleMonth);\n\n  useIsomorphicLayoutEffect(() => {\n    if (containerRef.current) {\n      containerRef.current.style.transform = `translate3d(${\n        diffIndex(baseIndex, visibleMonth) * -101 // needs to be higher than 100% so the next month doesn't show on the edges\n      }%, 0, 0)`;\n    }\n  });\n\n  const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n  useEffect(() => {\n    setMonths((oldMonths) => {\n      const newMonths = getMonths(visibleMonth).filter((month) => {\n        return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n      });\n\n      return oldMonths.concat(newMonths);\n    });\n    setMonths(getMonths(visibleMonth));\n    return undefined;\n  }, [formatDate(visibleMonth)]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  return (\n    <div\n      className={withBaseName()}\n      style={{\n        overflowX: \"hidden\",\n        position: \"relative\",\n      }}\n      ref={ref}\n    >\n      <div className={withBaseName(\"track\")} ref={containerRef}>\n        {months.map((date, index) => (\n          <div\n            key={formatDate(date)}\n            className={withBaseName(\"slide\")}\n            style={{\n              transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`,\n            }}\n            aria-hidden={index !== 1 ? \"true\" : undefined}\n          >\n            <CalendarMonth isVisible={index === 1} {...rest} date={date} />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","CalendarCarousel","useWindow","useComponentCssInjection","calendarCarouselCss","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useState","useEffect","isSameMonth","formatDate","jsx","CalendarMonth"],"mappings":";;;;;;;;;;;;;;;AAaA,SAAS,UAAU,KAAkB,EAAA;AACnC,EAAA,OAAO,CAAC,KAAA,CAAM,QAAS,CAAA,EAAE,QAAQ,CAAE,EAAC,CAAG,EAAA,KAAA,EAAO,MAAM,GAAI,CAAA,EAAE,MAAQ,EAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AACxE,CAAA;AAEA,MAAM,YAAA,GAAeA,kBAAa,sBAAsB,CAAA,CAAA;AAEjD,MAAM,gBAAmB,GAAAC,gBAAA,CAG9B,SAASC,iBAAAA,CAAiB,OAAO,GAAK,EAAA;AACtC,EAAM,MAAA,EAAA,GAAK,MAAS,GAAA,KAAA,CAAA;AAEpB,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,KAAA,EAAO,EAAE,YAAa,EAAA;AAAA,MACpBC,kCAAmB,EAAA,CAAA;AACvB,EAAM,MAAA,YAAA,GAAeC,aAAuB,IAAI,CAAA,CAAA;AAChD,EAAA,MAAM,YAAY,CAAC,CAAA,EAAc,CAAiB,KAAAC,eAAA,CAAU,GAAG,CAAC,CAAA,CAAA;AAEhE,EAAA,MAAM,EAAE,OAAA,EAAS,SAAU,EAAA,GAAID,aAAO,YAAY,CAAA,CAAA;AAElD,EAAAE,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAA,YAAA,CAAa,QAAQ,KAAM,CAAA,SAAA,GAAY,eACrC,SAAU,CAAA,SAAA,EAAW,YAAY,CAAI,GAAA,CAAA,GAAA,CAAA,QAAA,CAAA,CAAA;AAAA,KAEzC;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,CAAC,QAAQ,SAAS,CAAA,GAAIC,eAAS,MAAM,SAAA,CAAU,YAAY,CAAC,CAAA,CAAA;AAElE,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,CAAC,SAAc,KAAA;AACvB,MAAA,MAAM,YAAY,SAAU,CAAA,YAAY,CAAE,CAAA,MAAA,CAAO,CAAC,KAAU,KAAA;AAC1D,QAAO,OAAA,CAAC,UAAU,IAAK,CAAA,CAAC,aAAaC,gBAAY,CAAA,QAAA,EAAU,KAAK,CAAC,CAAA,CAAA;AAAA,OAClE,CAAA,CAAA;AAED,MAAO,OAAA,SAAA,CAAU,OAAO,SAAS,CAAA,CAAA;AAAA,KAClC,CAAA,CAAA;AACD,IAAU,SAAA,CAAA,SAAA,CAAU,YAAY,CAAC,CAAA,CAAA;AACjC,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACN,EAAA,CAACC,gBAAW,CAAA,YAAY,CAAC,CAAC,CAAA,CAAA;AAE7B,EAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,WAAW,YAAa,EAAA;AAAA,IACxB,KAAO,EAAA;AAAA,MACL,SAAW,EAAA,QAAA;AAAA,MACX,QAAU,EAAA,UAAA;AAAA,KACZ;AAAA,IACA,GAAA;AAAA,IAEA,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,MAAG,GAAK,EAAA,YAAA;AAAA,MACzC,QAAO,EAAA,MAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,0BAChBA,cAAA,CAAA,KAAA,EAAA;AAAA,QAEC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAC/B,KAAO,EAAA;AAAA,UACL,SAAW,EAAA,CAAA,WAAA,EAAc,SAAU,CAAA,IAAA,EAAM,SAAS,CAAI,GAAA,CAAA,GAAA,CAAA,EAAA,CAAA;AAAA,SACxD;AAAA,QACA,aAAA,EAAa,KAAU,KAAA,CAAA,GAAI,MAAS,GAAA,KAAA,CAAA;AAAA,QAEpC,QAAC,kBAAAA,cAAA,CAAAC,2BAAA,EAAA;AAAA,UAAc,WAAW,KAAU,KAAA,CAAA;AAAA,UAAI,GAAG,IAAA;AAAA,UAAM,IAAA;AAAA,SAAY,CAAA;AAAA,OAPxD,EAAAF,gBAAA,CAAW,IAAI,CAQtB,CACD,CAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/calendar/internal/CalendarContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { useCalendar } from \"../useCalendar\";\n\ntype CalendarState = {\n  state: ReturnType<typeof useCalendar>[\"state\"];\n  helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n};\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n  const context = useContext(CalendarContext);\n\n  if (!context) {\n    throw new Error(\"Unexpected usage\");\n  }\n\n  return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAQM,MAAA,eAAA,GAAkBA,oBAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}
+{"version":3,"file":"CalendarContext.js","sources":["../src/calendar/internal/CalendarContext.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport { useCalendar } from \"../useCalendar\";\n\ninterface CalendarState {\n  state: ReturnType<typeof useCalendar>[\"state\"];\n  helpers: ReturnType<typeof useCalendar>[\"helpers\"];\n}\n\nconst CalendarContext = createContext<CalendarState | null>(null);\n\nif (process.env.NODE_ENV !== \"production\") {\n  CalendarContext.displayName = \"CalendarContext\";\n}\n\nfunction useCalendarContext(): CalendarState {\n  const context = useContext(CalendarContext);\n\n  if (!context) {\n    throw new Error(\"Unexpected usage\");\n  }\n\n  return context;\n}\n\nexport { CalendarContext, useCalendarContext };\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAQM,MAAA,eAAA,GAAkBA,oBAAoC,IAAI,EAAA;AAEhE,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,eAAA,CAAgB,WAAc,GAAA,iBAAA,CAAA;AAChC,CAAA;AAEA,SAAS,kBAAoC,GAAA;AAC3C,EAAM,MAAA,OAAA,GAAUC,iBAAW,eAAe,CAAA,CAAA;AAE1C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAM,MAAA,IAAI,MAAM,kBAAkB,CAAA,CAAA;AAAA,GACpC;AAEA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}

package/dist-cjs/calendar/internal/CalendarDay.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n  --calendar-day-text-color: var(--salt-content-primary-foreground);\n  --calendar-day-background: var(--salt-selectable-background);\n  --calendar-day-background-hover: var(--salt-selectable-background-hover);\n  --calendar-day-text-color-hover: var(--salt-content-primary-foreground);\n  --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);\n  --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);\n  --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);\n  --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);\n  --calendar-day-blocked-background: var(--calendar-day-background);\n  --calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);\n  --calendar-day-unselectable-background: var(--calendar-day-background);\n  --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);\n\n  --calendar-day-selected-background: var(--salt-selectable-background-selected);\n  --calendar-day-selected-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selected-focused-outlineColor: var(--salt-color-white); TODO: Check with design */\n\n  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);\n  /* --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white);  TODO: Check with design */\n\n  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n  --calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);\n\n  --calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground); /* TODO should not be foreground color */\n\n  /* Focus */\n  --calendar-day-focused-outline: var(--salt-focused-outline);\n  --calendar-day-size: var(--salt-size-base);\n  --calendar-day-fontSize: var(--salt-text-fontSize);\n}\n\n.saltCalendarDay {\n  width: var(--calendar-day-size);\n  height: var(--calendar-day-size);\n  color: var(--calendar-day-text-color);\n  background-color: var(--calendar-day-background);\n  font-size: var(--calendar-day-fontSize);\n  border: 0;\n  cursor: pointer;\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--calendar-day-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--calendar-day-outOfRange-text-color);\n}\n\n.saltCalendarDay:hover {\n  background: var(--calendar-day-background-hover);\n  color: var(--calendar-day-text-color-hover);\n}\n\n.saltCalendarDay-unselectableMedium,\n.saltCalendarDay-unselectableMedium:hover {\n  color: var(--calendar-day-blocked-text-color);\n  cursor: var(--calendar-day-blocked-cursor);\n  background: var(--calendar-day-blocked-background);\n}\n\n.saltCalendarDay-today {\n  border: 1px solid var(--calendar-day-currentDay-borderColor);\n}\n\n.saltCalendarDay-selectedSpan {\n  background: var(--calendar-day-selectedSpan-background);\n  color: var(--calendar-day-selectedSpan-text-color);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover {\n  background: var(--calendar-day-hoveredSpan-background);\n  color: var(--calendar-day-hoveredSpan-text-color);\n}\n\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--calendar-day-hoveredOffset-background);\n  color: var(--calendar-day-hoveredOffset-text-color);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover {\n  background: var(--calendar-day-selected-background);\n  color: var(--calendar-day-selected-text-color);\n}\n\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover {\n  background: var(--calendar-day-selectedStart-background);\n  color: var(--calendar-day-selectedStart-text-color);\n}\n\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--calendar-day-selectedEnd-background);\n  color: var(--calendar-day-selectedEnd-text-color);\n}\n\n.saltCalendarDay-selected:focus-visible {\n  outline-color: var(--calendar-day-selected-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedStart:focus-visible {\n  outline-color: var(--calendar-day-selectedStart-focused-outlineColor);\n}\n\n.saltCalendarDay-selectedEnd:focus-visible {\n  outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);\n}\n\n.saltCalendarDay-unselectableLow,\n.saltCalendarDay-unselectableLow:hover {\n  color: var(--calendar-day-unselectable-text-color);\n  background: var(--calendar-day-unselectable-background);\n  cursor: var(--calendar-day-unselectable-cursor);\n  text-decoration: line-through;\n}\n\n.salt-density-high {\n  --calendar-day-blocked-icon-size: 14px;\n}\n\n.salt-density-medium {\n  --calendar-day-blocked-icon-size: 18px;\n}\n\n.salt-density-low {\n  --calendar-day-blocked-icon-size: 24px;\n}\n\n.salt-density-touch {\n  --calendar-day-blocked-icon-size: 28px;\n}\n\n.saltCalendarDay-blockedIcon {\n  fill: var(--calendar-day-blocked-icon-color);\n  position: absolute;\n  --icon-size: var(--calendar-day-blocked-icon-size);\n  pointer-events: none;\n  line-height: 1.29;\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
+var css_248z = ".saltCalendarDay {\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  width: var(--salt-size-base);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: pointer;\n  border: none;\n  padding: 0;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n}\n.saltCalendarDay-content {\n  margin: 0 var(--salt-spacing-50);\n  width: 100%;\n}\n\n.saltCalendarDay:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(0px - var(--salt-focused-outlineWidth));\n}\n\n.saltCalendarDay-outOfRange {\n  color: var(--salt-content-secondary-foreground);\n}\n\n.saltCalendarDay:hover,\n.saltCalendarDay-hoveredOffset,\n.saltCalendarDay-hoveredOffset:hover {\n  background: var(--salt-selectable-background-hover);\n}\n.saltCalendarDay-selectedStart {\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltCalendarDay-selected,\n.saltCalendarDay-selected:hover,\n.saltCalendarDay-selectedStart,\n.saltCalendarDay-selectedStart:hover,\n.saltCalendarDay-selectedEnd,\n.saltCalendarDay-selectedEnd:hover {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-hoveredSpan,\n.saltCalendarDay-hoveredSpan:hover,\n.saltCalendarDay-selectedSpan,\n.saltCalendarDay-selectedSpan:hover {\n  background: var(--salt-selectable-background-hover);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),\n    calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltCalendarDay-disabled,\n.saltCalendarDay-disabled:hover,\n.saltCalendarDay-unselectable,\n.saltCalendarDay-unselectable:hover {\n  background: var(--salt-selectable-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltCalendarDay-highlighted:before {\n  content: \"\";\n  height: var(--salt-spacing-200); /* TODO: change for size-modifier when available */\n  width: var(--salt-spacing-200);\n  top: calc(var(--salt-spacing-100) * -1);\n  right: calc(var(--salt-spacing-100) * -1);\n  transform: rotate(45deg);\n  background: var(--salt-selectable-borderColor-selected);\n  position: absolute;\n}\n\n.saltCalendarDay-disabled {\n  color: var(--salt-content-secondary-foreground-disabled);\n}\n.saltCalendarDay-unselectable:after {\n  content: \"\";\n  height: var(--salt-size-border);\n  width: calc(100% - var(--salt-spacing-100));\n  background: var(--salt-content-secondary-foreground);\n  position: absolute;\n}\n\n.saltCalendarDay-today,\n.saltCalendarDay-today:hover {\n  border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-foreground-active);\n  margin-bottom: calc(var(--salt-size-indicator) * -1);\n}\n\n.saltCalendarDay-hidden {\n  visibility: hidden;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CalendarDay.css.js.map