@salt-ds/lab 1.0.0-alpha.76 → 1.0.0-alpha.78

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.78
+
+### Patch Changes
+
+- 630f412: Fixed TabsNext having double focus rings.
+- Updated dependencies [3b02e9e]
+- Updated dependencies [31e992a]
+- Updated dependencies [9e27ba2]
+- Updated dependencies [3ad2fc4]
+  - @salt-ds/core@1.50.0
+
+## 1.0.0-alpha.77
+
+### Minor Changes
+
+- 848272a: Added a `textAlign` prop to `TH` and `TD`. This allows for easy text alignment when using numerical data.
+- a2e614d: - Fixed multiple design inconsistencies in `Table`. For example, the alignment of wrapped text, column header separator height etc.
+
+  - Updated the `zebra` implementation in `Table`. Previously `zebra` supported `primary`, `secondary` and `tertiary` values. This has been simplified to `true` and `false`.
+
+  The color of the alternating rows is determined by the `variant` prop:
+
+  - `primary` variant uses the secondary background for alternating rows.
+  - `secondary` variant uses the primary background for alternating rows.
+  - `tertiary` variant uses the primary background for alternating rows.
+
+  ```diff
+  - <Table zebra="primary" />
+  - <Table zebra="secondary" />
+  - <Table zebra="tertiary" />
+  + <Table zebra={true} />
+  ```
+
+### Patch Changes
+
+- 77ce501: fix date input selection
+
+  empty dates should return null, rather than an invalid date
+
+  resolves: 5499
+
+- 5d4898c: - Fixed visual design issues with `Calendar`, `CalendarMonth`, `CalendarWeekHeader`, `CalendarDay`, `DatePicker` and `DatePickerActions` components.
+  - Fixed text being truncated in `Calendar`'s year dropdown when zooming out.
+- Updated dependencies [378fc01]
+- Updated dependencies [1f53f12]
+- Updated dependencies [22fed0d]
+- Updated dependencies [770bc9c]
+- Updated dependencies [54e4b19]
+- Updated dependencies [bbb7dba]
+- Updated dependencies [c3df8d8]
+  - @salt-ds/core@1.49.0
+
 ## 1.0.0-alpha.76
 
 ### Minor Changes

package/css/salt-lab.css

@@ -195,6 +195,8 @@
 
 /* src/calendar/Calendar.css */
 .saltCalendar {
+  --calendar-gap: var(--salt-spacing-fixed-100);
+  --calendar-day-size: var(--salt-size-base);
   background: var(--salt-container-primary-background);
   padding: var(--salt-spacing-100);
 }
@@ -228,6 +230,9 @@
   align-items: center;
   box-sizing: border-box;
 }
+.saltCalendarNavigation-yearDropdown {
+  min-width: 4.3em;
+}
 .saltCalendarNavigation-hideYearDropdown {
   grid-template-columns: min-content auto min-content;
   grid-gap: var(--salt-spacing-300);
@@ -240,16 +245,14 @@
 
 /* src/calendar/CalendarWeekHeader.css */
 .saltCalendarWeekHeader {
-  display: grid;
-  gap: var(--salt-spacing-fixed-100);
-  grid-template-columns: repeat(7, var(--salt-size-base));
+  display: flex;
   text-align: center;
   align-items: center;
   height: var(--salt-size-base);
-  margin: var(--salt-spacing-fixed-100);
+  gap: var(--calendar-gap);
 }
 .saltCalendarWeekHeader-dayOfWeek {
-  width: var(--salt-size-base);
+  width: var(--calendar-day-size);
   color: var(--salt-content-secondary-foreground);
   font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-fontWeight);
@@ -2776,11 +2779,14 @@
 .saltTable-divider-tertiary {
   --table-divider-color: var(--salt-separable-tertiary-borderColor);
 }
-table.saltTable-zebra-primary tbody tr:nth-of-type(odd) {
+table.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-secondary-background);
+}
+table.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {
   --table-background: var(--salt-container-primary-background);
 }
-table.saltTable-zebra-secondary tbody tr:nth-of-type(odd) {
-  --table-background: var(--salt-container-secondary-background);
+table.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {
+  --table-background: var(--salt-container-primary-background);
 }
 table.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {
   --table-background: var(--salt-container-tertiary-background);
@@ -2805,7 +2811,6 @@ table.saltTable thead {
   font-size: var(--salt-text-label-fontSize);
   font-weight: var(--salt-text-label-fontWeight-strong);
   line-height: var(--salt-text-label-lineHeight);
-  white-space: nowrap;
 }
 table.saltTable thead.saltTable-thead-sticky {
   position: sticky;
@@ -2844,7 +2849,6 @@ table.saltTable tfoot {
   font-size: var(--salt-text-fontSize);
   line-height: var(--salt-text-lineHeight);
   font-weight: var(--salt-text-fontWeight-strong);
-  white-space: nowrap;
 }
 table.saltTable tfoot.saltTable-tfoot-sticky {
   position: sticky;
@@ -2875,41 +2879,57 @@ table.saltTable tfoot.saltTable-tfoot-divider-none tr {
   --table-footer-divider-color: transparent;
 }
 table.saltTable th {
-  overflow: hidden;
-  padding: var(--salt-spacing-100);
+  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);
+  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));
   position: relative;
   text-align: start;
+  vertical-align: top;
+  font-weight: inherit;
+}
+table.saltTable th.saltTable-th-align-left {
+  text-align: start;
+}
+table.saltTable th.saltTable-th-align-right {
+  text-align: end;
 }
-.table.saltTable th[scope=row] {
+table.saltTable tbody th[scope=row] {
   font-weight: var(--salt-text-fontWeight-strong);
   line-height: var(--salt-text-lineHeight);
 }
 table.saltTable th + th::before {
-  --table-th-separator-height: calc(var(--salt-size-base) / 2 - 2 * var(--salt-size-fixed-100));
   background: var(--salt-separable-tertiary-borderColor);
   content: "";
   position: absolute;
   z-index: 1;
   display: block;
-  width: var(--salt-size-border);
-  height: var(--table-th-separator-height);
-  top: calc(50% - var(--table-th-separator-height) * 0.5);
+  width: var(--salt-size-fixed-100);
+  height: calc(100% - var(--salt-spacing-200));
   left: 0;
+  top: var(--salt-spacing-100);
 }
 table.saltTable tr {
   background: var(--table-background);
+}
+table.saltTable tbody tr {
   height: var(--table-row-height);
   min-height: var(--table-row-height);
 }
 table.saltTable tbody tr:not(:last-child) {
   border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);
 }
-table.saltTable-divider-none tbody tr {
+table.saltTable.saltTable-divider-none tbody tr {
   --table-divider-color: transparent;
 }
 table.saltTable td {
   height: 100%;
-  padding: var(--salt-spacing-100);
+  vertical-align: top;
+  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);
+}
+table.saltTable td.saltTable-td-align-left {
+  text-align: start;
+}
+table.saltTable td.saltTable-td-align-right {
+  text-align: end;
 }
 
 /* src/tabs/Tab.css */
@@ -3369,6 +3389,9 @@ table.saltTable td {
   left: 0;
   top: 0;
 }
+.saltTabNextTrigger:focus-visible {
+  outline: none;
+}
 
 /* src/tabs-next/TabOverflowList.css */
 .saltTabOverflow {
@@ -4145,7 +4168,21 @@ table.saltTable td {
 }
 
 /* src/calendar/internal/CalendarDay.css */
+.salt-density-touch {
+  --calendar-day-highlight-size: 14px;
+}
+.salt-density-low {
+  --calendar-day-highlight-size: 12px;
+}
+.salt-density-medium {
+  --calendar-day-highlight-size: 10px;
+}
+.salt-density-high {
+  --calendar-day-highlight-size: 8px;
+}
 .saltCalendarDay {
+  --calendar-day-zIndex-content: calc(var(--salt-zIndex-default) + 1);
+  --calendar-day-zIndex-highlight: calc(var(--calendar-day-zIndex-content) + 2);
   font-family: var(--salt-text-fontFamily);
   font-weight: var(--salt-text-fontWeight);
   line-height: var(--salt-text-lineHeight);
@@ -4161,86 +4198,231 @@ table.saltTable td {
   justify-content: center;
   align-items: center;
   position: relative;
-  overflow: hidden;
 }
 .saltCalendarDay-content {
   margin: 0 var(--salt-spacing-50);
   width: 100%;
+  z-index: var(--calendar-day-zIndex-content);
+}
+.saltCalendarDay:hover {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background-hover);
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),
+.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,
+.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd),
+.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {
+  border-radius: 0;
 }
 .saltCalendarDay-focused,
-.saltCalendarDay.saltCalendarDay:focus-visible {
-  outline: var(--salt-focused-outline);
-  outline-offset: calc(0px - var(--salt-focused-outlineWidth));
+.saltCalendarDay:focus,
+.saltCalendarDay:focus-visible {
+  outline: none;
+  z-index: var(--calendar-day-zIndex-content);
 }
-.saltCalendarDay-outOfRange {
-  color: var(--salt-content-secondary-foreground);
+.saltCalendarDay-focused:focus-visible::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-focused-outlineWidth) * -1);
+  border-radius: var(--salt-palette-corner-weak, 0);
 }
-.saltCalendarDay-outOfRange:hover {
+.saltCalendarDay-selected .saltCalendarDay-content,
+.saltCalendarDay-selected:hover .saltCalendarDay-content,
+.saltCalendarDay-selectedStart .saltCalendarDay-content,
+.saltCalendarDay-hoveredStart .saltCalendarDay-content,
+.saltCalendarDay-selectedSpan .saltCalendarDay-content,
+.saltCalendarDay-hoveredSpan .saltCalendarDay-content,
+.saltCalendarDay-selectedEnd .saltCalendarDay-content,
+.saltCalendarDay-hoveredEnd .saltCalendarDay-content {
   color: var(--salt-content-primary-foreground);
 }
-.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {
-  border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);
+.saltCalendarDay-selectedSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before,
+.saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd)::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: calc(var(--calendar-gap) * -1);
+  right: calc(var(--calendar-gap) * -1);
+  bottom: 0;
+  background: var(--salt-selectable-background-hover);
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
 }
-.saltCalendarDay-outOfRange.saltCalendarDay-highlighted:before {
-  background: var(--salt-content-secondary-foreground);
+.saltCalendarDay-selectedStart::before,
+.saltCalendarDay-selectedEnd::before {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--salt-selectable-background-selected);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
 }
-.saltCalendarDay:hover,
-.saltCalendarDay-hoveredOffset,
-.saltCalendarDay-hoveredOffset:hover {
-  background: var(--salt-selectable-background-hover);
+.saltCalendarDay-selectedStart,
+.saltCalendarDay-selectedStart::before,
+.saltCalendarDay-focused.saltCalendarDay-selectedStart,
+.saltCalendarDay-focused.saltCalendarDay-selectedStart::before {
+  border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),
+.saltCalendarDay-focused.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before,
+.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart),
+.saltCalendarDay-selectedEnd:not(.saltCalendarDay-selectedStart)::before {
+  border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;
+}
+.saltCalendarDay-focused.saltCalendarDay-selectedSameDay,
+.saltCalendarDay-focused.saltCalendarDay-selectedSameDay::before,
+.saltCalendarDay-selectedSameDay,
+.saltCalendarDay-selectedSameDay::before {
+  border-radius: var(--salt-palette-corner-weak, 0);
 }
-.saltCalendarDay-selected {
+.saltCalendarMonth-single .saltCalendarDay:hover:not(.saltCalendarDay-selected) {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background-hover);
   border-radius: var(--salt-palette-corner-weak, 0);
 }
-.saltCalendarDay-selectedStart {
-  z-index: var(--salt-zIndex-default);
-  border-top-left-radius: var(--salt-palette-corner-weak, 0);
-  border-bottom-left-radius: var(--salt-palette-corner-weak, 0);
+.saltCalendarMonth-single .saltCalendarDay-selected::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background-selected);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  border-radius: var(--salt-palette-corner-weak, 0);
 }
-.saltCalendarDay-selectedEnd {
-  border-top-right-radius: var(--salt-palette-corner-weak, 0);
-  border-bottom-right-radius: var(--salt-palette-corner-weak, 0);
+.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-selectedSpan,
+.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredSpan {
+  outline-offset: calc(calc(var(--salt-focused-outlineWidth) * -1));
 }
-.saltCalendarDay-selected,
-.saltCalendarDay-selected:hover,
-.saltCalendarDay-selectedStart,
-.saltCalendarDay-selectedStart:hover,
-.saltCalendarDay-selectedEnd,
-.saltCalendarDay-selectedEnd:hover {
+.saltCalendarMonth-range .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {
   color: var(--salt-content-primary-foreground);
-  background: var(--salt-selectable-background-selected);
-  box-shadow: 0 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected);
+  background: var(--salt-selectable-background-hover);
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-selectedSpan::before,
+.saltCalendarMonth-range .saltCalendarDay:hover.saltCalendarDay-hoveredSpan::before,
+.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before,
+.saltCalendarMonth-range .saltCalendarDay-focused.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-selectedStart)::before {
+  border-radius: 0;
+}
+.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd) {
+  border-radius: 0;
+}
+.saltCalendarMonth-range .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedEnd):not(.saltCalendarDay-unselectable)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: calc(var(--calendar-gap) * -1);
+  right: 0;
+  bottom: 0;
+  background: var(--salt-selectable-background-hover);
+  border-radius: 0;
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
 }
-.saltCalendarDay-hoveredSpan,
-.saltCalendarDay-hoveredSpan:hover,
-.saltCalendarDay-selectedSpan,
-.saltCalendarDay-selectedSpan:hover {
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan::before {
+  border-radius: 0;
+}
+.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart),
+.saltCalendarMonth-offset .saltCalendarDay-focused.saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart)::before {
+  border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarMonth-offset .saltCalendarDay:hover:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),
+.saltCalendarMonth-offset .saltCalendarDay-hoveredStart:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd),
+.saltCalendarMonth-offset .saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd) {
   color: var(--salt-content-primary-foreground);
   background: var(--salt-selectable-background-hover);
-  box-shadow:
-    calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),
-    calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),
-    0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);
 }
-.saltCalendarDay-disabled,
-.saltCalendarDay-disabled:hover,
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan:not(.saltCalendarDay-selectedStart):not(.saltCalendarDay-selectedSpan):not(.saltCalendarDay-selectedEnd)::before {
+  border-top: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);
+  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-background-hover);
+}
+.saltCalendarMonth-offset .saltCalendarDay-hoveredStart,
+.saltCalendarMonth-offset .saltCalendarDay-selectedStart {
+  border-radius: var(--salt-palette-corner-weak, 0) 0 0 var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarMonth-offset .saltCalendarDay.saltCalendarDay-hoveredEnd,
+.saltCalendarMonth-offset .saltCalendarDay-selectedEnd {
+  border-radius: 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0;
+}
+.saltCalendarMonth-offset .saltCalendarDay-hoveredSpan,
+.saltCalendarMonth-offset .saltCalendarDay-selectedSpan {
+  border-radius: 0;
+}
+.saltCalendarMonth-offset .saltCalendarDay-selectedStart.saltCalendarDay-selectedEnd {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-outOfRange {
+  color: var(--salt-content-secondary-foreground);
+}
+.saltCalendarDay-outOfRange:hover {
+  color: var(--salt-content-primary-foreground);
+}
+.saltCalendarDay-outOfRange .saltCalendarDay-today > span:last-of-type {
+  border-bottom: var(--salt-size-indicator) var(--salt-borderStyle-solid) var(--salt-content-secondary-foreground);
+}
+.saltCalendarDay-outOfRange .saltCalendarDay-highlighted::after {
+  background: var(--salt-content-secondary-foreground);
+}
 .saltCalendarDay-unselectable,
 .saltCalendarDay-unselectable:hover {
   background: var(--salt-selectable-background-disabled);
   cursor: var(--salt-cursor-disabled);
 }
-.saltCalendarDay-highlighted:before,
-.saltCalendarDay-highlighted:hover:before {
+.saltCalendarDay-highlighted {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  overflow: hidden;
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-selectedEnd .saltCalendarDay-highlighted {
+  right: 1px;
+}
+.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {
+  right: -1px;
+}
+.saltCalendarDay-selectedStart .saltCalendarDay-highlighted,
+.saltCalendarDay-hoveredEnd:not(.saltCalendarDay-selectedEnd) .saltCalendarDay-highlighted,
+.saltCalendarDay-hoveredSpan .saltCalendarDay-highlighted,
+.saltCalendarDay-selectedSpan .saltCalendarDay-highlighted {
+  border-radius: 0;
+}
+.saltCalendarDay-selectedSameDay .saltCalendarDay-highlighted {
+  border-radius: var(--salt-palette-corner-weak, 0);
+}
+.saltCalendarDay-highlighted::after {
   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);
+  top: 0;
+  right: 0;
+  box-sizing: border-box;
+  height: var(--calendar-day-highlight-size);
+  width: var(--calendar-day-highlight-size);
   background: var(--salt-accent-background);
   position: absolute;
+  clip-path: polygon(100% 0, 100% 100%, 0 0);
+  z-index: var(--calendar-day-zIndex-highlight);
 }
-.saltCalendarDay-unselectable:after {
+.saltCalendarDay-focused:focus-visible .saltCalendarDay-highlighted::after {
+  border: var(--salt-focused-outline);
+}
+.saltCalendarDay-unselectable::after {
   content: "";
   height: var(--salt-size-fixed-100);
   width: calc(100% - var(--salt-spacing-100));
@@ -4252,29 +4434,42 @@ table.saltTable td {
   display: block;
   width: calc(100% - calc(var(--salt-spacing-50) * 2));
   height: var(--salt-size-indicator);
-  background-color: var(--salt-accent-borderColor);
+  background: var(--salt-accent-borderColor);
   border-radius: var(--salt-palette-corner-weak);
   position: absolute;
   bottom: var(--salt-spacing-50);
   left: var(--salt-spacing-50);
   right: var(--salt-spacing-50);
 }
-.saltCalendarDay-disabled,
-.saltCalendarDay-disabled:hover {
-  color: var(--salt-content-secondary-foreground-disabled);
-}
 .saltCalendarDay-hidden {
   visibility: hidden;
 }
 
 /* src/calendar/internal/CalendarMonth.css */
 .saltCalendarMonth-grid {
-  display: grid;
-  gap: var(--salt-spacing-fixed-100);
-  grid-template-columns: repeat(7, var(--salt-size-base));
-  grid-template-rows: repeat(6, var(--salt-size-base));
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: calc(var(--calendar-day-size) * 7 + var(--calendar-gap) * 6);
   text-align: center;
-  margin: var(--salt-spacing-fixed-100);
+  gap: var(--calendar-gap);
+}
+.saltCalendarMonth-grid > .saltCalendarMonth-week {
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--calendar-gap);
+  width: 100%;
+}
+.saltCalendarMonth-grid > .saltCalendarMonth-week > .saltCalendarDay:last-child::before {
+  right: 0;
+}
+.saltCalendarMonth-grid > .saltCalendarMonth-week > .saltCalendarDay:first-child::before {
+  left: 0;
+}
+.saltCalendarMonth-grid > .saltCalendarMonth-week > * {
+  width: var(--calendar-day-size);
+  height: var(--calendar-day-size);
+  box-sizing: border-box;
 }
 
 /* src/list-deprecated/internal/Highlighter.css */
@@ -4377,4 +4572,4 @@ table.saltTable td {
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/57a51704-289d-402c-8b86-74fcedd46ceb.css */
+/* src/27998536-4bfd-4de6-b13d-bf9d1508a15e.css */

package/dist-cjs/app-header/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { Toolbar } from \"../toolbar\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  (\n    {\n      children,\n      className,\n      // ...rest\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-app-header\",\n      css: appHeaderCss,\n      window: targetWindow,\n    });\n\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","appHeaderCss","jsx","Toolbar","clsx","MenuIcon"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAI1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA;AAAA;AAAA,KAGF,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,WAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAOD,IACE,uBAAAC,cAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,kBAAA,iCAAqBC,cAAS,EAAA,EAAA,CAAA;AAAA,QAG7B;AAAA;AAAA,KACH;AAAA;AAeN;;;;"}
+{"version":3,"file":"AppHeader.js","sources":["../src/app-header/AppHeader.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { MenuIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { Toolbar } from \"../toolbar\";\n\nimport appHeaderCss from \"./AppHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltAppHeader\");\n\nexport type AppHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const AppHeader = forwardRef<HTMLDivElement, AppHeaderProps>(\n  (\n    {\n      children,\n      className,\n      // ...rest\n    },\n    ref,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-app-header\",\n      css: appHeaderCss,\n      window: targetWindow,\n    });\n\n    // const [innerContainerRef, overflowedItems] = useOverflowObserver(\n    //   \"horizontal\",\n    //   null\n    // );\n\n    return (\n      <Toolbar\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        overflowButtonIcon={<MenuIcon />}\n        // OverflowButtonProps={{ align: \"start\" }}\n      >\n        {children}\n      </Toolbar>\n    );\n    // return (\n    //   <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n    //     <div className={withBaseName(\"innerContainer\")} ref={innerContainerRef}>\n    //       <OverflowMenu\n    //         className={withBaseName(\"navMenu\")}\n    //         IconComponent={MenuIcon}\n    //         source={overflowedItems}\n    //       />\n    //       {children}\n    //     </div>\n    //   </div>\n    // );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","appHeaderCss","jsx","Toolbar","clsx","MenuIcon"],"mappings":";;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAI1C,MAAM,SAAA,GAAYC,gBAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA;AAAA;AAAA,KAGF,GAAA,KACG;AACH,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,WAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAOD,IAAA,uBACEC,cAAA;AAAA,MAACC,eAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,kBAAA,iCAAqBC,cAAA,EAAA,EAAS,CAAA;AAAA,QAG7B;AAAA;AAAA,KACH;AAAA,EAcJ;AACF;;;;"}

package/dist-cjs/breadcrumbs/Breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text, type TooltipProps } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentType,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport type { CascadingMenuProps } from \"../cascading-menu/CascadingMenuProps\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps\n  extends Pick<CascadingMenuProps, \"onItemClick\"> {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  overflowLabel?: string;\n  Icon?: ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={clsx(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\"),\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={clsx(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\"),\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={clsx(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Breadcrumb","useWindow","useComponentCssInjection","breadcrumbCss","useBreadcrumbsContext","Children","jsx","Text","clsx","jsxs","Link"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAiB3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAYC,wCAAsB,EAAA;AAExE,IAAA,MAAM,WAAc,GAAAC,cAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cACE,mBAAAC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,CAAA;AAAA,QACT,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,SAAA;AAAA,UACA,aAAa,cAAc;AAAA,SAC7B;AAAA,QACA,OAAQ,EAAA,OAAA;AAAA,QAEP;AAAA;AAAA,KAGH,mBAAAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAD,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,SAAA;AAAA,UACA;AAAA,YACE,CAAC,YAAA,CAAa,sBAAsB,CAAC,GAAG;AAAA,WAC1C;AAAA,UACA,aAAa,SAAS;AAAA,SACxB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,oBAASF,cAAA,CAAA,IAAA,EAAA,EAAK,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,CAAA;AAAA,UAC/C,WAAA,mCACEI,SAAK,EAAA,EAAA,OAAA,EAAS,GAAG,OAAQ,EAAA,OAAA,EAAS,GAAG,KAAA,EACnC,QACH,EAAA;AAAA;AAAA;AAAA,KAEJ;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACX,GAAG;AAAA,KACD,GAAA,cAAA;AAEJ,IACE,uBAAAJ,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAO,EAAA;AAAA,UACL,GAAG,cAAA;AAAA,UACH,UAAU,QAAY,IAAA,aAAA;AAAA,UACtB,UAAU,QAAY,IAAA;AAAA,SACxB;AAAA,QACA,SAAA,EAAWE,SAAK,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,QAC1C,GAAG,kBAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text, type TooltipProps } from \"@salt-ds/core\";\nimport type { IconProps } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentType,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport type { CascadingMenuProps } from \"../cascading-menu/CascadingMenuProps\";\nimport breadcrumbCss from \"./Breadcrumb.css\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps\n  extends Pick<CascadingMenuProps, \"onItemClick\"> {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  overflowLabel?: string;\n  Icon?: ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb\",\n      css: breadcrumbCss,\n      window: targetWindow,\n    });\n\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={clsx(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\"),\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={clsx(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\"),\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={clsx(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Breadcrumb","useWindow","useComponentCssInjection","breadcrumbCss","useBreadcrumbsContext","Children","jsx","Text","clsx","jsxs","Link"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAiB3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,aAAA,EAAe,aAAA,EAAe,OAAA,KAAYC,wCAAA,EAAsB;AAExE,IAAA,MAAM,WAAA,GAAcC,cAAA,CAAS,KAAA,CAAM,QAAQ,CAAA,KAAM,CAAA;AACjD,IAAA,MAAM,WAAA,GAAc,QAAQ,CAAC,WAAA;AAE7B,IAAA,MAAM,oBAAA,GAAuB,MAC3B,cAAA,mBACEC,cAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,CAAA;AAAA,QACT,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,SAAA;AAAA,UACA,aAAa,cAAc;AAAA,SAC7B;AAAA,QACA,OAAA,EAAQ,OAAA;AAAA,QAEP;AAAA;AAAA,KACH,mBAEAC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWD,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb,SAAA;AAAA,UACA;AAAA,YACE,CAAC,YAAA,CAAa,sBAAsB,CAAC,GAAG;AAAA,WAC1C;AAAA,UACA,aAAa,SAAS;AAAA,SACxB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,IAAA,oBAAQF,cAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA;AAAA,UAC/C,WAAA,mCACEI,SAAA,EAAA,EAAK,OAAA,EAAS,GAAG,OAAA,EAAQ,OAAA,EAAS,GAAG,KAAA,EACnC,QAAA,EACH;AAAA;AAAA;AAAA,KAEJ;AAGJ,IAAA,MAAM,UAAU,oBAAA,EAAqB;AAErC,IAAA,MAAM;AAAA,MACJ,KAAA,EAAO,cAAA;AAAA,MACP,SAAA,EAAW,kBAAA;AAAA,MACX,GAAG;AAAA,KACL,GAAI,cAAA;AAEJ,IAAA,uBACEJ,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACL,GAAG,cAAA;AAAA,UACH,UAAU,QAAA,IAAY,aAAA;AAAA,UACtB,UAAU,QAAA,IAAY;AAAA,SACxB;AAAA,QACA,SAAA,EAAWE,SAAA,CAAK,OAAA,EAAS,kBAAkB,CAAA;AAAA,QAC1C,GAAG,kBAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}