@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.3

package/dist-cjs/packages/lab/src/banner/Banner.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--saltBanner-background, var(--salt-container-primary-background));\n  --banner-fontSize: var(--saltBanner-fontSize, var(--salt-text-fontSize));\n  --banner-lineHeight: var(--saltBanner-lineHeight, var(--salt-text-lineHeight));\n  --banner-padding: var(--saltBanner-padding, var(--salt-size-unit));\n  --banner-label-color: var(--saltBanner-label-color, var(--salt-text-primary-foreground));\n}\n\n.saltBanner {\n  background: var(--banner-background);\n  border-color: var(--saltBanner-borderColor, var(--banner-status-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n  border-bottom: 2px solid var(--saltBanner-borderColor, var(--banner-status-borderColor));\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding: 0 var(--banner-padding);\n  position: relative;\n  /*min-height: 36px;*/\n  width: 100%;\n  align-items: center;\n}\n\n.saltBanner-closeButton {\n  margin: calc(var(--salt-size-unit) * 0.5) auto calc(var(--salt-size-unit) * 0.5) var(--salt-size-unit);\n}\n\n.saltBanner-label {\n  flex: 1 0;\n  padding: calc(var(--banner-padding) + 2px) 0 calc(var(--banner-padding));\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  color: var(--banner-label-color);\n}\n\n/* Styles applied to status indicator */\n.saltBanner-icon {\n  color: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n  fill: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n  margin-right: var(--saltTooltip-icon-marginRight, 6px);\n  flex: 0 0 auto;\n}\n\n.saltBanner-link {\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  margin-left: 1ch;\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-status-borderColor: var(--salt-status-info-borderColor);\n  --banner-status-icon-color: var(--salt-status-info-foreground);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-status-borderColor: var(--salt-status-error-borderColor);\n  --banner-status-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-status-borderColor: var(--salt-status-warning-borderColor);\n  --banner-status-icon-color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-status-borderColor: var(--salt-status-success-borderColor);\n  --banner-status-icon-color: var(--salt-status-success-foreground);\n}\n\n.saltBanner-emphasize.saltBanner-info {\n  --banner-background: var(--salt-status-info-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-error {\n  --banner-background: var(--salt-status-error-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-success {\n  --banner-background: var(--salt-status-success-background-emphasize);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--saltBanner-background, var(--salt-container-primary-background));\n  --banner-fontSize: var(--saltBanner-fontSize, var(--salt-text-fontSize));\n  --banner-lineHeight: var(--saltBanner-lineHeight, var(--salt-text-lineHeight));\n  --banner-padding: var(--saltBanner-padding, var(--salt-size-unit));\n  --banner-label-color: var(--saltBanner-label-color, var(--salt-text-primary-foreground));\n}\n\n.saltBanner {\n  background: var(--banner-background);\n  border-color: var(--saltBanner-borderColor, var(--banner-status-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n  border-bottom: 2px solid var(--saltBanner-borderColor, var(--banner-status-borderColor));\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding: 0 var(--banner-padding);\n  position: relative;\n  /*min-height: 36px;*/\n  width: 100%;\n  align-items: center;\n}\n\n.saltBanner-closeButton {\n  margin: calc(var(--salt-size-unit) * 0.5) auto calc(var(--salt-size-unit) * 0.5) var(--salt-size-unit);\n}\n\n.saltBanner-label {\n  flex: 1 0;\n  padding: calc(var(--banner-padding) + 2px) 0 calc(var(--banner-padding));\n  font-weight: var(--salt-text-label-fontWeight);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  color: var(--banner-label-color);\n}\n\n/* Styles applied to status indicator */\n.saltBanner-icon {\n  color: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n  fill: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n  margin-right: var(--saltTooltip-icon-marginRight, 6px);\n  flex: 0 0 auto;\n}\n\n.saltBanner-link {\n  font-weight: var(--salt-text-label-fontWeight);\n  margin-left: 1ch;\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-status-borderColor: var(--salt-status-info-borderColor);\n  --banner-status-icon-color: var(--salt-status-info-foreground);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-status-borderColor: var(--salt-status-error-borderColor);\n  --banner-status-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-status-borderColor: var(--salt-status-warning-borderColor);\n  --banner-status-icon-color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-status-borderColor: var(--salt-status-success-borderColor);\n  --banner-status-icon-color: var(--salt-status-success-foreground);\n}\n\n.saltBanner-emphasize.saltBanner-info {\n  --banner-background: var(--salt-status-info-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-error {\n  --banner-background: var(--salt-status-error-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-success {\n  --banner-background: var(--salt-status-success-background-emphasize);\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/calendar/internal/CalendarDay.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n  --calendar-day-text-color: var(--salt-text-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-text-primary-foreground);\n  --calendar-day-outOfRange-text-color: var(--salt-text-secondary-foreground-disabled);\n  --calendar-day-blocked-text-color: var(--salt-text-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-text-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-text-primary-foreground);\n  --calendar-day-selected-focused-outlineColor: var(--salt-color-white);\n\n  --calendar-day-selectedStart-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedStart-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-selectedStart-focused-outlineColor: var(--salt-color-white);\n\n  --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);\n  --calendar-day-selectedEnd-text-color: var(--salt-text-primary-foreground);\n  --calendar-day-selectedEnd-focused-outlineColor: var(--salt-color-white);\n\n  --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);\n  --calendar-day-selectedSpan-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredSpan-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredOffset-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-currentDay-borderColor: var(--salt-text-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 = "/* TODO: Design need to align characteristics for CalendarDay */\n.saltCalendarDay {\n  --calendar-day-text-color: var(--salt-text-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-text-primary-foreground);\n  --calendar-day-outOfRange-text-color: var(--salt-text-secondary-foreground-disabled);\n  --calendar-day-blocked-text-color: var(--salt-text-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-text-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-text-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-text-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-text-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-text-primary-foreground);\n\n  --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredSpan-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);\n  --calendar-day-hoveredOffset-text-color: var(--salt-text-primary-foreground);\n\n  --calendar-day-currentDay-borderColor: var(--salt-text-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";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/cascading-menu/CascadingMenuItem.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".saltMenuItem {\n  background: var(--salt-selectable-background);\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  right: 0;\n  cursor: pointer;\n  overflow: hidden;\n  text-align: left;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltMenuItem-menuItemText {\n  flex-grow: 2;\n  white-space: nowrap;\n}\n\n.saltMenuItem-menuItemEndAdornment {\n  margin-left: 8px; /* density */\n}\n\n.saltMenuItem-menuItemStartAdornmentContainer {\n  margin-right: var(--salt-size-unit);\n  width: 12px;\n}\n\n.saltMenuItem-menuItemAdornmentHidden {\n  visibility: hidden;\n}\n\n.saltMenuItem.saltMenuItem-menuItemDivider {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltMenuItem-menuItemHover:hover {\n  background: #a4d5f4;\n}\n\n/* extra specificity requred to override ListItem selected */\n.saltMenuItem.saltMenuItem-menuItemBlurSelected {\n  background: var(--salt-selectable-background-blurSelected) !important;\n}\n";
+var css_248z = ".saltMenuItem {\n  background: var(--salt-selectable-background);\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  right: 0;\n  cursor: pointer;\n  overflow: hidden;\n  text-align: left;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltMenuItem-menuItemText {\n  flex-grow: 2;\n  white-space: nowrap;\n}\n\n.saltMenuItem-menuItemEndAdornment {\n  margin-left: 8px; /* density */\n}\n\n.saltMenuItem-menuItemStartAdornmentContainer {\n  margin-right: var(--salt-size-unit);\n  width: 12px;\n}\n\n.saltMenuItem-menuItemAdornmentHidden {\n  visibility: hidden;\n}\n\n.saltMenuItem.saltMenuItem-menuItemDivider {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltMenuItem-menuItemHover:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n/* extra specificity requred to override ListItem selected */\n.saltMenuItem.saltMenuItem-menuItemBlurSelected {\n  background: var(--salt-selectable-background-blurSelected) !important;\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/color-chooser/ColorChooser.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(3 * var(--salt-size-unit) - 2px) !important;\n  width: calc(3 * var(--salt-size-unit) - 2px) !important;\n  border: 1px solid var(--salt-differential-negative-foreground);\n  /* RGBA using red-700 */\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  );\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: calc(var(--salt-size-unit) * 3);\n  display: contents;\n}\n\n.saltColorChooser-overlayButtonClose {\n  margin: 5px;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
+var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(3 * var(--salt-size-unit) - 2px) !important;\n  width: calc(3 * var(--salt-size-unit) - 2px) !important;\n  border: 1px solid var(--salt-status-negative-foreground);\n  /* RGBA using red-700 */\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  );\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: calc(var(--salt-size-unit) * 3);\n  display: contents;\n}\n\n.saltColorChooser-overlayButtonClose {\n  margin: 5px;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/color-chooser/Swatch.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  ) !important;\n}\n";
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  ) !important;\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/contact-details/ContactAvatar.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var core = require('@salt-ds/core');
-var Avatar = require('../avatar/Avatar.js');
 require('./internal/FavoriteToggleWithTooltip.js');
 var ContactDetailsContext = require('./internal/ContactDetailsContext.js');
 var clsx = require('clsx');
@@ -25,8 +24,8 @@ const ContactAvatar = React.forwardRef(
     if (variant === "mini") {
       return null;
     }
-    const avatarSize = variant === "default" ? "large" : "medium";
-    return /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, {
+    const avatarSize = variant === "default" ? 3 : 2;
+    return /* @__PURE__ */ jsxRuntime.jsx(core.Avatar, {
       ...restProps,
       ref,
       "aria-hidden": true,

package/dist-cjs/packages/lab/src/contact-details/ContactAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Avatar, AvatarProps } from \"../avatar\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltContactAvatar\");\n\nexport interface ContactAvatarProps extends AvatarProps {}\n\nexport const ContactAvatar = forwardRef<HTMLDivElement, ContactAvatarProps>(\n  function (props, ref) {\n    const { className, ...restProps } = props;\n    const context = useContactDetailsContext();\n    const { variant, primary, isStacked, setHasAvatar } = context;\n\n    useEffect(() => {\n      setHasAvatar(true);\n      return () => {\n        setHasAvatar(false);\n      };\n    }, [setHasAvatar]);\n\n    if (variant === \"mini\") {\n      return null;\n    }\n\n    const avatarSize = variant === \"default\" ? \"large\" : \"medium\";\n    return (\n      <Avatar\n        {...restProps}\n        ref={ref}\n        aria-hidden={true}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"stacked\")]: isStacked,\n          },\n          className\n        )}\n        size={avatarSize}\n      >\n        {primary\n          ? primary\n              .split(\" \")\n              .map((x) => x.charAt(0))\n              .slice(0, 2)\n          : null}\n      </Avatar>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useContactDetailsContext","useEffect","jsx","Avatar","clsx"],"mappings":";;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAI9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAAU,OAAO,GAAK,EAAA;AACpB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACpC,IAAA,MAAM,UAAUC,8CAAyB,EAAA,CAAA;AACzC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEtD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,OAAO,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,SAAA,GAAY,OAAU,GAAA,QAAA,CAAA;AACrD,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAM,EAAA,UAAA;AAAA,MAEL,oBACG,OACG,CAAA,KAAA,CAAM,GAAG,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,CAAA,CACtB,KAAM,CAAA,CAAA,EAAG,CAAC,CACb,GAAA,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ContactAvatar.js","sources":["../src/contact-details/ContactAvatar.tsx"],"sourcesContent":["import { forwardRef, useEffect } from \"react\";\nimport { makePrefixer, Avatar, AvatarProps } from \"@salt-ds/core\";\nimport { useContactDetailsContext } from \"./internal\";\nimport { clsx } from \"clsx\";\n\nconst withBaseName = makePrefixer(\"saltContactAvatar\");\n\nexport type ContactAvatarProps = AvatarProps;\n\nexport const ContactAvatar = forwardRef<HTMLDivElement, ContactAvatarProps>(\n  function (props, ref) {\n    const { className, ...restProps } = props;\n    const context = useContactDetailsContext();\n    const { variant, primary, isStacked, setHasAvatar } = context;\n\n    useEffect(() => {\n      setHasAvatar(true);\n      return () => {\n        setHasAvatar(false);\n      };\n    }, [setHasAvatar]);\n\n    if (variant === \"mini\") {\n      return null;\n    }\n\n    const avatarSize = variant === \"default\" ? 3 : 2;\n    return (\n      <Avatar\n        {...restProps}\n        ref={ref}\n        aria-hidden={true}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"stacked\")]: isStacked,\n          },\n          className\n        )}\n        size={avatarSize}\n      >\n        {primary\n          ? primary\n              .split(\" \")\n              .map((x) => x.charAt(0))\n              .slice(0, 2)\n          : null}\n      </Avatar>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useContactDetailsContext","useEffect","jsx","Avatar","clsx"],"mappings":";;;;;;;;;;;AAKA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAI9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAAU,OAAO,GAAK,EAAA;AACpB,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AACpC,IAAA,MAAM,UAAUC,8CAAyB,EAAA,CAAA;AACzC,IAAA,MAAM,EAAE,OAAA,EAAS,OAAS,EAAA,SAAA,EAAW,cAAiB,GAAA,OAAA,CAAA;AAEtD,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,MAAA,OAAO,MAAM;AACX,QAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAAA,OACpB,CAAA;AAAA,KACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,IAAA,IAAI,YAAY,MAAQ,EAAA;AACtB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,SAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAC/C,IAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,SAAA;AAAA,SAC7B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAM,EAAA,UAAA;AAAA,MAEL,oBACG,OACG,CAAA,KAAA,CAAM,GAAG,CAAA,CACT,IAAI,CAAC,CAAA,KAAM,CAAE,CAAA,MAAA,CAAO,CAAC,CAAC,CAAA,CACtB,KAAM,CAAA,CAAA,EAAG,CAAC,CACb,GAAA,IAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/content-status/ContentStatus.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title {\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
+var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title {\n  font-weight: var(--salt-text-display1-fontWeight); /* TODO: Use correct token */\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/dialog/DialogContent.js

@@ -19,7 +19,6 @@ const DialogContent = React.forwardRef(
       ...rest,
       className: clsx.clsx(
         withBaseName(),
-        className,
         {
           [withBaseName("leftGutter")]: !!status
         },

package/dist-cjs/packages/lab/src/dialog/DialogContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n    const handleRef = useForkRef(ref, setContentElement);\n\n    return (\n      <div\n        {...rest}\n        className={clsx(\n          withBaseName(),\n          className,\n          {\n            [withBaseName(\"leftGutter\")]: !!status,\n          },\n          className\n        )}\n        id={`${dialogId}-body`}\n        ref={handleRef}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useContext","DialogContext","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA,GAAIC,iBAAWC,2BAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useContext } from \"react\";\nimport { DialogContext } from \"./internal/DialogContext\";\n\nimport \"./DialogContent.css\";\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {}\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent(props, ref) {\n    const { children, className, ...rest } = props;\n    const { status, dialogId, setContentElement } = useContext(DialogContext);\n\n    const handleRef = useForkRef(ref, setContentElement);\n\n    return (\n      <div\n        {...rest}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"leftGutter\")]: !!status,\n          },\n          className\n        )}\n        id={`${dialogId}-body`}\n        ref={handleRef}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useContext","DialogContext","useForkRef","jsx","clsx"],"mappings":";;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAA,MAAM,EAAE,MAAQ,EAAA,QAAA,EAAU,iBAAkB,EAAA,GAAIC,iBAAWC,2BAAa,CAAA,CAAA;AAExE,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,iBAAiB,CAAA,CAAA;AAEnD,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,SAClC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,IAAI,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA;AAAA,MACP,GAAK,EAAA,SAAA;AAAA,MAEJ,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/dropdown/DropdownButton.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".saltDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-typography-fontWeight-medium);\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.saltDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
+var css_248z = ".saltDropdownButton {\n  --saltButton-background-hover: var(--salt-actionable-secondary-background);\n  --saltButton-background-active: var(--salt-actionable-secondary-background);\n  --saltButton-fontWeight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n  --saltButton-textAlign: left;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n}\n\n.saltDropdownButton:active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n  --saltButton-text-color-active: var(--salt-actionable-secondary-foreground);\n}\n\n.saltDropdownButton-fullwidth {\n  width: 100%;\n}\n\n.saltDropdownButton-content {\n  align-items: center;\n  flex: 1;\n  width: 100%;\n  display: flex;\n  white-space: nowrap;\n}\n\n.saltDropdownButton-buttonLabel {\n  display: inline-block;\n  letter-spacing: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  width: 100%;\n}\n\n.saltDropdownButton-formField.saltButton:focus,\n.saltDropdownButton-formField.saltButton:focus-visible {\n  outline: none;\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/file-drop-zone/FileDropZone.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-dropTarget-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: calc(var(--salt-size-unit) * 3);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-dropTarget-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background-emphasize);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-dropTarget-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-dropTarget-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: calc(var(--salt-size-unit) * 3);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background-emphasize);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-target-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/index.js

@@ -31,7 +31,6 @@ var Accordion = require('./accordion/Accordion.js');
 var AccordionSummary = require('./accordion/AccordionSummary.js');
 var AccordionDetails = require('./accordion/AccordionDetails.js');
 var AppHeader = require('./app-header/AppHeader.js');
-var Avatar = require('./avatar/Avatar.js');
 var Badge = require('./badge/Badge.js');
 var Banner = require('./banner/Banner.js');
 var Breadcrumb = require('./breadcrumbs/Breadcrumb.js');
@@ -192,7 +191,6 @@ exports.Accordion = Accordion.Accordion;
 exports.AccordionSummary = AccordionSummary.AccordionSummary;
 exports.AccordionDetails = AccordionDetails.AccordionDetails;
 exports.AppHeader = AppHeader.AppHeader;
-exports.Avatar = Avatar.Avatar;
 exports.Badge = Badge.Badge;
 exports.Banner = Banner.Banner;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;

package/dist-cjs/packages/lab/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/packages/lab/src/list/Highlighter.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".saltHighlighter-highlight {\n  font-weight: var(--salt-typography-fontWeight-bold);\n}\n";
+var css_248z = ".saltHighlighter-highlight {\n  font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/list/ListItem.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".saltListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-text-primary-foreground);\n  --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n  --list-item-selected-focus-outlineColor: var(--salt-color-white); /* TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n  font-weight: var(--salt-typography-fontWeight-bold);\n}\n\n.saltListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--saltList-item-cursor, pointer);\n  background: var(--saltList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--saltList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-size-unit);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n  --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n  content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n";
+var css_248z = ".saltListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-text-primary-foreground);\n  --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--saltList-item-cursor, pointer);\n  background: var(--saltList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--saltList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-size-unit);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n  --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n  content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/list-deprecated/internal/scrollIntoView.js

@@ -4,15 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var computeScrollIntoView = require('compute-scroll-into-view');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var computeScrollIntoView__default = /*#__PURE__*/_interopDefaultLegacy(computeScrollIntoView);
-
 function scrollIntoView(item, list) {
   if (!item) {
     return;
   }
-  const actions = computeScrollIntoView__default["default"](item, {
+  const actions = computeScrollIntoView.compute(item, {
     boundary: list,
     block: "nearest",
     scrollMode: "if-needed"

package/dist-cjs/packages/lab/src/list-deprecated/internal/scrollIntoView.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrollIntoView.js","sources":["../src/list-deprecated/internal/scrollIntoView.js"],"sourcesContent":["import computeScrollIntoView from \"compute-scroll-into-view\";\n\nexport function scrollIntoView(item, list) {\n  if (!item) {\n    return;\n  }\n\n  const actions = computeScrollIntoView(item, {\n    boundary: list,\n    block: \"nearest\",\n    scrollMode: \"if-needed\",\n  });\n\n  actions.forEach(({ el, top, left }) => {\n    el.scrollTop = top;\n    el.scrollLeft = left;\n  });\n}\n"],"names":["computeScrollIntoView"],"mappings":";;;;;;;;;;AAEgB,SAAA,cAAA,CAAe,MAAM,IAAM,EAAA;AACzC,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,OAAA;AAAA,GACF;AAEA,EAAM,MAAA,OAAA,GAAUA,0CAAsB,IAAM,EAAA;AAAA,IAC1C,QAAU,EAAA,IAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IACP,UAAY,EAAA,WAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,QAAQ,CAAC,EAAE,EAAI,EAAA,GAAA,EAAK,MAAW,KAAA;AACrC,IAAA,EAAA,CAAG,SAAY,GAAA,GAAA,CAAA;AACf,IAAA,EAAA,CAAG,UAAa,GAAA,IAAA,CAAA;AAAA,GACjB,CAAA,CAAA;AACH;;;;"}
+{"version":3,"file":"scrollIntoView.js","sources":["../src/list-deprecated/internal/scrollIntoView.js"],"sourcesContent":["import { compute } from \"compute-scroll-into-view\";\n\nexport function scrollIntoView(item, list) {\n  if (!item) {\n    return;\n  }\n\n  const actions = compute(item, {\n    boundary: list,\n    block: \"nearest\",\n    scrollMode: \"if-needed\",\n  });\n\n  actions.forEach(({ el, top, left }) => {\n    el.scrollTop = top;\n    el.scrollLeft = left;\n  });\n}\n"],"names":["compute"],"mappings":";;;;;;AAEgB,SAAA,cAAA,CAAe,MAAM,IAAM,EAAA;AACzC,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAA,OAAA;AAAA,GACF;AAEA,EAAM,MAAA,OAAA,GAAUA,8BAAQ,IAAM,EAAA;AAAA,IAC5B,QAAU,EAAA,IAAA;AAAA,IACV,KAAO,EAAA,SAAA;AAAA,IACP,UAAY,EAAA,WAAA;AAAA,GACb,CAAA,CAAA;AAED,EAAA,OAAA,CAAQ,QAAQ,CAAC,EAAE,EAAI,EAAA,GAAA,EAAK,MAAW,KAAA;AACrC,IAAA,EAAA,CAAG,SAAY,GAAA,GAAA,CAAA;AACf,IAAA,EAAA,CAAG,UAAa,GAAA,IAAA,CAAA;AAAA,GACjB,CAAA,CAAA;AACH;;;;"}

package/dist-cjs/packages/lab/src/logo/Logo.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".salt-density-high {\n  --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n  --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n  --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n  --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n  --logo-color: var(--saltLogo-color, var(--salt-palette-neutral-secondary-foreground));\n  --logo-divider-color: var(--saltLogo-pipe-color, var(--salt-separable-secondary-borderColor));\n  --logo-divider-height: var(--saltLogo-title-height, var(--salt-size-divider-height));\n  --logo-divider-margin: 0 calc(var(--salt-size-unit) * 2);\n  --logo-fontSize: var(--salt-text-fontSize);\n  --logo-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltLogo-compact {\n  --logo-pipe-margin: 0 calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--logo-height);\n}\n\n.saltLogo img {\n  max-height: 100%;\n}\n\n.saltLogo-wrapper {\n  display: inline-flex;\n  position: relative;\n  height: var(--logo-height);\n}\n\n.saltLogo-logo {\n  fill: var(--logo-color);\n  margin: auto;\n  stroke: none !important;\n  text-align: center;\n  font-size: var(--logo-fontSize);\n  line-height: var(--logo-lineHeight);\n}\n\n.saltLogo-appTitle {\n  align-self: center;\n  color: var(--logo-color);\n  position: relative;\n}\n\n.saltLogo-titlePipe {\n  border-right: 1px solid var(--logo-divider-color);\n  margin: var(--logo-divider-margin);\n  height: var(--logo-divider-height);\n}\n";
+var css_248z = ".salt-density-high {\n  --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n  --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n  --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n  --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n  --logo-color: var(--saltLogo-color, var(--salt-text-secondary-foreground));\n  --logo-divider-color: var(--saltLogo-pipe-color, var(--salt-separable-secondary-borderColor));\n  --logo-divider-height: var(--saltLogo-title-height, var(--salt-size-separator-height));\n  --logo-divider-margin: 0 calc(var(--salt-size-unit) * 2);\n  --logo-fontSize: var(--salt-text-fontSize);\n  --logo-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltLogo-compact {\n  --logo-pipe-margin: 0 calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--logo-height);\n}\n\n.saltLogo img {\n  max-height: 100%;\n}\n\n.saltLogo-wrapper {\n  display: inline-flex;\n  position: relative;\n  height: var(--logo-height);\n}\n\n.saltLogo-logo {\n  fill: var(--logo-color);\n  margin: auto;\n  stroke: none !important;\n  text-align: center;\n  font-size: var(--logo-fontSize);\n  line-height: var(--logo-lineHeight);\n}\n\n.saltLogo-appTitle {\n  align-self: center;\n  color: var(--logo-color);\n  position: relative;\n}\n\n.saltLogo-titlePipe {\n  border-right: 1px solid var(--logo-divider-color);\n  margin: var(--logo-divider-margin);\n  height: var(--logo-divider-height);\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/metric/MetricContent.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-differential-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-differential-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-differential-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-differential-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
+var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-status-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-status-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-status-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-status-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js

@@ -19,12 +19,16 @@ const ParentChildItem = React.forwardRef(
     ...rest
   }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
-      className: clsx.clsx(className, withBaseName(), {
-        ...direction && {
-          [withBaseName(`slide-${direction}`)]: !disableAnimations
+      className: clsx.clsx(
+        withBaseName(),
+        {
+          ...direction && {
+            [withBaseName(`slide-${direction}`)]: !disableAnimations
+          },
+          "saltFlexItem-stacked": isStacked
         },
-        "saltFlexItem-stacked": isStacked
-      }),
+        className
+      ),
       ref,
       ...rest,
       children

package/dist-cjs/packages/lab/src/parent-child-item/ParentChildItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FlexItem,\n  flexItemAlignment,\n  makePrefixer,\n  ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n   */\n  align?: flexItemAlignment;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Direction for slide animations.\n   */\n  direction?: SlideDirection;\n  /**\n   * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n   */\n  grow?: ResponsiveProp<number>;\n  /**\n   * Determines whether the component is stacked\n   */\n  isStacked?: boolean;\n  /**\n   * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n   */\n  shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n  function ParentChildItem(\n    {\n      disableAnimations = false,\n      direction,\n      isStacked,\n      children,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    return (\n      <FlexItem\n        className={clsx(className, withBaseName(), {\n          ...(direction && {\n            [withBaseName(`slide-${direction}`)]: !disableAnimations,\n          }),\n          \"saltFlexItem-stacked\": isStacked,\n        })}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </FlexItem>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","ParentChildItem","jsx","FlexItem","clsx"],"mappings":";;;;;;;;;;AAwCA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,EAAgB,EAAA;AAAA,QACzC,GAAI,SAAa,IAAA;AAAA,UACf,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,SACzC;AAAA,QACA,sBAAwB,EAAA,SAAA;AAAA,OACzB,CAAA;AAAA,MACD,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ParentChildItem.js","sources":["../src/parent-child-item/ParentChildItem.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  FlexItem,\n  flexItemAlignment,\n  makePrefixer,\n  ResponsiveProp,\n} from \"@salt-ds/core\";\nimport \"./ParentChildItem.css\";\n\nexport type SlideDirection = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ParentChildItemProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Allows the alignment specified by parent to be overridden for individual items, default is \"start\".\n   */\n  align?: flexItemAlignment;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Direction for slide animations.\n   */\n  direction?: SlideDirection;\n  /**\n   * Defines the ability for an item to grow x times more compared to it's siblings, default is 0.\n   */\n  grow?: ResponsiveProp<number>;\n  /**\n   * Determines whether the component is stacked\n   */\n  isStacked?: boolean;\n  /**\n   * Defines the ability for an item to shrink x times more compared to it's siblings, default is 1.\n\n   */\n  shrink?: ResponsiveProp<number>;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildItem\");\nexport const ParentChildItem = forwardRef<HTMLDivElement, ParentChildItemProps>(\n  function ParentChildItem(\n    {\n      disableAnimations = false,\n      direction,\n      isStacked,\n      children,\n      className,\n      ...rest\n    },\n    ref\n  ) {\n    return (\n      <FlexItem\n        className={clsx(\n          withBaseName(),\n          {\n            ...(direction && {\n              [withBaseName(`slide-${direction}`)]: !disableAnimations,\n            }),\n            \"saltFlexItem-stacked\": isStacked,\n          },\n          className\n        )}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </FlexItem>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","ParentChildItem","jsx","FlexItem","clsx"],"mappings":";;;;;;;;;;AAwCA,MAAM,YAAA,GAAeA,kBAAa,qBAAqB,CAAA,CAAA;AAChD,MAAM,eAAkB,GAAAC,gBAAA;AAAA,EAC7B,SAASC,gBACP,CAAA;AAAA,IACE,iBAAoB,GAAA,KAAA;AAAA,IACpB,SAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,IAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,uBACGC,cAAA,CAAAC,aAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,GAAI,SAAa,IAAA;AAAA,YACf,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,SAAA,CAAA,CAAW,IAAI,CAAC,iBAAA;AAAA,WACzC;AAAA,UACA,sBAAwB,EAAA,SAAA;AAAA,SAC1B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,GAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js

@@ -56,7 +56,7 @@ const ParentChildLayout = React.forwardRef(function ParentChildLayout2({
     })
   };
   return /* @__PURE__ */ jsxRuntime.jsx(core.FlexLayout, {
-    className: clsx.clsx(className, withBaseName()),
+    className: clsx.clsx(withBaseName(), className),
     ref,
     ...rest,
     children: stackedView ? stackedViewChildren[stackedViewElement] : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {

package/dist-cjs/packages/lab/src/parent-child-layout/ParentChildLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  FlexLayout,\n  FlexLayoutProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  stackedAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  stackedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Orientation for slide animations.\n   */\n  orientation?: Orientation;\n  /**\n   * Controls the space between columns.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n  orientation: Orientation,\n  stackedViewElement: StackedViewElement\n) => {\n  let direction: SlideDirection = \"right\";\n\n  if (orientation === \"horizontal\") {\n    if (stackedViewElement === \"parent\") {\n      direction = \"left\";\n    } else {\n      direction = \"right\";\n    }\n  } else {\n    if (stackedViewElement === \"parent\") {\n      direction = \"bottom\";\n    } else {\n      direction = \"top\";\n    }\n  }\n\n  return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    stackedAtBreakpoint = \"sm\",\n    stackedViewElement = \"parent\",\n    disableAnimations = false,\n    parent,\n    child,\n    className,\n    orientation = \"horizontal\",\n    ...rest\n  },\n  ref\n) {\n  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n  const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n  const stackedViewChildren = {\n    parent: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {parent}\n      </ParentChildItem>\n    ),\n    child: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {child}\n      </ParentChildItem>\n    ),\n  };\n\n  return (\n    <FlexLayout className={clsx(className, withBaseName())} ref={ref} {...rest}>\n      {stackedView ? (\n        stackedViewChildren[stackedViewElement]\n      ) : (\n        <>\n          <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n            {parent}\n          </ParentChildItem>\n          <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n            {child}\n          </ParentChildItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,SAAW,EAAA,YAAA,EAAc,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ParentChildLayout.js","sources":["../src/parent-child-layout/ParentChildLayout.tsx"],"sourcesContent":["import {\n  Breakpoints,\n  FlexLayout,\n  FlexLayoutProps,\n  makePrefixer,\n} from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { ParentChildItem, SlideDirection } from \"../parent-child-item\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport \"./ParentChildLayout.css\";\n\nexport type StackedViewElement = \"parent\" | \"child\";\n\ntype Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ParentChildLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Breakpoint at which the parent and child will stack.\n   */\n  stackedAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Change element that is displayed when in staked view.\n   */\n  stackedViewElement?: StackedViewElement;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Orientation for slide animations.\n   */\n  orientation?: Orientation;\n  /**\n   * Controls the space between columns.\n   */\n  gap?: FlexLayoutProps<ElementType>[\"gap\"];\n  /**\n   * Parent component to be rendered\n   */\n  parent: ReactNode;\n  /**\n   * Child component to be rendered\n   */\n  child: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltParentChildLayout\");\n\nconst getDirection = (\n  orientation: Orientation,\n  stackedViewElement: StackedViewElement\n) => {\n  let direction: SlideDirection = \"right\";\n\n  if (orientation === \"horizontal\") {\n    if (stackedViewElement === \"parent\") {\n      direction = \"left\";\n    } else {\n      direction = \"right\";\n    }\n  } else {\n    if (stackedViewElement === \"parent\") {\n      direction = \"bottom\";\n    } else {\n      direction = \"top\";\n    }\n  }\n\n  return direction;\n};\n\nexport const ParentChildLayout = forwardRef<\n  HTMLDivElement,\n  ParentChildLayoutProps\n>(function ParentChildLayout(\n  {\n    stackedAtBreakpoint = \"sm\",\n    stackedViewElement = \"parent\",\n    disableAnimations = false,\n    parent,\n    child,\n    className,\n    orientation = \"horizontal\",\n    ...rest\n  },\n  ref\n) {\n  const stackedView = useIsViewportLargerThanBreakpoint(stackedAtBreakpoint);\n\n  const parentChildDirection = getDirection(orientation, stackedViewElement);\n\n  const stackedViewChildren = {\n    parent: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {parent}\n      </ParentChildItem>\n    ),\n    child: (\n      <ParentChildItem\n        disableAnimations={disableAnimations}\n        direction={parentChildDirection}\n        isStacked={stackedView}\n      >\n        {child}\n      </ParentChildItem>\n    ),\n  };\n\n  return (\n    <FlexLayout className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n      {stackedView ? (\n        stackedViewChildren[stackedViewElement]\n      ) : (\n        <>\n          <ParentChildItem grow={0} disableAnimations={disableAnimations}>\n            {parent}\n          </ParentChildItem>\n          <ParentChildItem grow={2} disableAnimations={disableAnimations}>\n            {child}\n          </ParentChildItem>\n        </>\n      )}\n    </FlexLayout>\n  );\n});\n"],"names":["makePrefixer","forwardRef","ParentChildLayout","useIsViewportLargerThanBreakpoint","jsx","ParentChildItem","FlexLayout","clsx","jsxs","Fragment"],"mappings":";;;;;;;;;;;;;AAiDA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAEzD,MAAM,YAAA,GAAe,CACnB,WAAA,EACA,kBACG,KAAA;AACH,EAAA,IAAI,SAA4B,GAAA,OAAA,CAAA;AAEhC,EAAA,IAAI,gBAAgB,YAAc,EAAA;AAChC,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,MAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,OAAA,CAAA;AAAA,KACd;AAAA,GACK,MAAA;AACL,IAAA,IAAI,uBAAuB,QAAU,EAAA;AACnC,MAAY,SAAA,GAAA,QAAA,CAAA;AAAA,KACP,MAAA;AACL,MAAY,SAAA,GAAA,KAAA,CAAA;AAAA,KACd;AAAA,GACF;AAEA,EAAO,OAAA,SAAA,CAAA;AACT,CAAA,CAAA;AAEa,MAAA,iBAAA,GAAoBC,gBAG/B,CAAA,SAASC,kBACT,CAAA;AAAA,EACE,mBAAsB,GAAA,IAAA;AAAA,EACtB,kBAAqB,GAAA,QAAA;AAAA,EACrB,iBAAoB,GAAA,KAAA;AAAA,EACpB,MAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACX,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,WAAA,GAAcC,oEAAkC,mBAAmB,CAAA,CAAA;AAEzE,EAAM,MAAA,oBAAA,GAAuB,YAAa,CAAA,WAAA,EAAa,kBAAkB,CAAA,CAAA;AAEzE,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,wBACGC,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,MAAA;AAAA,KACH,CAAA;AAAA,IAEF,uBACGD,cAAA,CAAAC,+BAAA,EAAA;AAAA,MACC,iBAAA;AAAA,MACA,SAAW,EAAA,oBAAA;AAAA,MACX,SAAW,EAAA,WAAA;AAAA,MAEV,QAAA,EAAA,KAAA;AAAA,KACH,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,uBACGD,cAAA,CAAAE,eAAA,EAAA;AAAA,IAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IACnE,QAAA,EAAA,WAAA,GACC,oBAAoB,kBAEpB,CAAA,mBAAAC,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACE,QAAA,EAAA;AAAA,wBAACL,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,MAAA;AAAA,SACH,CAAA;AAAA,wBACCD,cAAA,CAAAC,+BAAA,EAAA;AAAA,UAAgB,IAAM,EAAA,CAAA;AAAA,UAAG,iBAAA;AAAA,UACvB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/pill/Pill.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, calc(var(--salt-size-unit) * 0.75));\n  padding-right: var(--saltPill-label-paddingRight, calc(var(--salt-size-unit) * 0.75));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-foreground);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: var(--salt-size-graphic-small);\n  margin-left: calc(var(--salt-size-unit) * 0.75);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
+var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, calc(var(--salt-size-unit) * 0.75));\n  padding-right: var(--saltPill-label-paddingRight, calc(var(--salt-size-unit) * 0.75));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-foreground);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: calc(var(--salt-size-unit) * 0.75);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/skip-link/SkipLink.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* CSS Variables for the Skip Link */\n.saltSkipLink {\n  --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));\n  --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));\n  --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));\n  --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground));\n}\n\n/* Overrides */\n.saltSkipLink {\n  --saltLink-color-focus: var(--skipLink-color);\n}\n\n.saltSkipLink-target {\n  --skipLink-target-focus: var(--salt-focused-outline);\n}\n\n/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  display: block;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n  opacity: 1;\n  width: auto;\n  height: auto;\n  white-space: nowrap;\n  margin: var(--skipLink-margin);\n  padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);\n  background: var(--skipLink-background);\n  color: var(--skipLink-color);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltSkipLink {\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--saltSkipLink-fontFamily, var(--salt-typography-fontFamily));\n  line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));\n}\n\n/*Styles applied to the skip link focus target*/\n.saltSkipLink-target {\n  outline: var(--skipLink-target-focus);\n}\n";
+var css_248z = "/* CSS Variables for the Skip Link */\n.saltSkipLink {\n  --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));\n  --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));\n  --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));\n  --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground));\n}\n\n/* Overrides */\n.saltSkipLink {\n  --saltLink-color-focus: var(--skipLink-color);\n}\n\n.saltSkipLink-target {\n  --skipLink-target-focus: var(--salt-focused-outline);\n}\n\n/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  display: block;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n  opacity: 1;\n  width: auto;\n  height: auto;\n  white-space: nowrap;\n  margin: var(--skipLink-margin);\n  padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);\n  background: var(--skipLink-background);\n  color: var(--skipLink-color);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltSkipLink {\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--saltSkipLink-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));\n}\n\n/*Styles applied to the skip link focus target*/\n.saltSkipLink-target {\n  outline: var(--skipLink-target-focus);\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/lab/src/stepper-input/useStepperInput.js

@@ -185,6 +185,7 @@ const useStepperInput = (props, inputRef) => {
   };
   const getButtonProps = (type = stepperDirection.INCREMENT, buttonPropsProp = {}) => ({
     "aria-hidden": true,
+    "data-testid": `${type}-button`,
     tabIndex: -1,
     ...buttonPropsProp,
     onMouseDown: callAll(

package/dist-cjs/packages/lab/src/stepper-input/useStepperInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, MutableRefObject } from \"react\";\nimport { ButtonProps, useControlled, useId } from \"@salt-ds/core\";\nimport { InputProps } from \"../input\";\nimport { useDynamicAriaLabel } from \"./internal/useDynamicAriaLabel\";\nimport { useSpinner } from \"./internal/useSpinner\";\nimport { StepperInputProps } from \"./StepperInput\";\n\ntype Direction = \"decrement\" | \"increment\";\n\nconst stepperDirection = {\n  INCREMENT: \"increment\" as Direction,\n  DECREMENT: \"decrement\" as Direction,\n};\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nconst callAll =\n  (...fns: any[]) =>\n  (...args: any[]) =>\n    fns.forEach((fn) => fn && fn(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n  inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number | string) => {\n  if (typeof inputCharacter === \"number\") return;\n  return (\n    (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n    inputCharacter === \"\"\n  );\n};\n\nconst toFloat = (inputValue: number | string) => {\n  // Plus, minus, and empty characters are treated as 0\n  if (isAllowedNonNumeric(inputValue)) return 0;\n  return parseFloat(inputValue.toString());\n};\n\nconst santizedInput = (numberString: string) =>\n  (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nconst getButtonIcon = (type: Direction) =>\n  type === stepperDirection.INCREMENT ? \"triangle-up\" : \"triangle-down\";\n\nexport const useStepperInput = (\n  props: StepperInputProps,\n  inputRef: MutableRefObject<HTMLInputElement | null>\n) => {\n  const {\n    block = 10,\n    decimalPlaces = 0,\n    defaultValue = 0,\n    liveValue,\n    max = Number.MAX_SAFE_INTEGER,\n    min = Number.MIN_SAFE_INTEGER,\n    onChange,\n    step = 1,\n    value,\n    InputProps: inputPropsProp = {},\n  } = props;\n\n  const [currentValue, setCurrentValue, isControlled] = useControlled({\n    controlled: value,\n    default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n    name: \"stepper-input\",\n  });\n  const inputId = useId(inputPropsProp.id);\n\n  const isOutOfRange = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) > max || toFloat(currentValue) < min;\n  };\n\n  const isAtMax = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) >= max || (max === 0 && currentValue === \"\");\n  };\n\n  const isAtMin = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) <= min || (min === 0 && currentValue === \"\");\n  };\n\n  const valuesHaveDiverged = () => {\n    if (liveValue === undefined || currentValue === undefined) return false;\n    return (\n      toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !==\n      toFloat(currentValue)\n    );\n  };\n\n  const { setHasAnnounced } = useDynamicAriaLabel(\n    \", value out of date\",\n    liveValue !== undefined,\n    inputRef,\n    currentValue,\n    valuesHaveDiverged\n  );\n\n  const decrement = () => {\n    if (currentValue === undefined || isAtMin()) return;\n    let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n    // Set value to `max` if it's currently out of range\n    if (max !== undefined && isOutOfRange()) nextValue = max;\n\n    setNextValue(nextValue);\n  };\n\n  const decrementBlock = () => {\n    if (currentValue === undefined || isAtMin()) return;\n    let nextValue =\n      currentValue === \"\"\n        ? block * -step\n        : toFloat(currentValue) - step * block;\n\n    // Set value to `max` if it's currently out of range\n    if (max !== undefined && isOutOfRange()) nextValue = max;\n\n    setNextValue(nextValue);\n  };\n\n  const increment = () => {\n    if (currentValue === undefined || isAtMax()) return;\n    let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n    // Set value to `min` if it's currently out of range\n    if (min !== undefined && isOutOfRange()) nextValue = min;\n\n    setNextValue(nextValue);\n  };\n\n  const incrementBlock = () => {\n    if (currentValue === undefined || isAtMax()) return;\n    let nextValue =\n      currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n    // Set value to `min` if it's currently out of range\n    if (min !== undefined && isOutOfRange()) nextValue = min;\n\n    setNextValue(nextValue);\n  };\n\n  const setNextValue = (modifiedValue: number) => {\n    let nextValue = modifiedValue;\n    if (nextValue < min) nextValue = min;\n    if (nextValue > max) nextValue = max;\n\n    const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n    if (isNaN(toFloat(roundedValue))) return;\n\n    if (!isControlled) {\n      setCurrentValue(roundedValue);\n    }\n\n    if (onChange) {\n      onChange(roundedValue);\n    }\n  };\n\n  const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n    useSpinner(decrementBlock, isAtMin());\n\n  const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n    useSpinner(decrement, isAtMin());\n\n  const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n    useSpinner(incrementBlock, isAtMax());\n\n  const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n    useSpinner(increment, isAtMax());\n\n  const handleInputBlur = () => {\n    if (currentValue === undefined) return;\n\n    const roundedValue = toFixedDecimalPlaces(\n      toFloat(currentValue),\n      decimalPlaces\n    );\n\n    if (\n      currentValue !== \"\" &&\n      !isAllowedNonNumeric(currentValue) &&\n      !isControlled\n    ) {\n      setCurrentValue(roundedValue);\n    }\n\n    if (onChange) {\n      onChange(roundedValue);\n    }\n  };\n\n  const handleInputFocus = () => {\n    setHasAnnounced(false);\n  };\n\n  const handleInputChange = (event: KeyboardEvent) => {\n    const changedValue = (event.currentTarget as HTMLInputElement).value;\n\n    if (!isControlled) {\n      setCurrentValue(santizedInput(changedValue));\n    }\n\n    if (onChange) {\n      onChange(santizedInput(changedValue));\n    }\n  };\n\n  const handleInputKeyDown = (event: KeyboardEvent) => {\n    if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n      event.preventDefault();\n      event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n    }\n    if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n      event.preventDefault();\n      event.key === \"PageUp\"\n        ? incrementSpinnerBlock()\n        : decrementSpinnerBlock();\n    }\n  };\n\n  const handleButtonMouseDown = (\n    event: MouseEvent<HTMLButtonElement>,\n    type: Direction = stepperDirection.INCREMENT\n  ) => {\n    if (event.nativeEvent.button !== 0) return;\n    type === stepperDirection.INCREMENT\n      ? incrementSpinner()\n      : decrementSpinner();\n  };\n\n  const handleButtonMouseUp = () => inputRef.current?.focus();\n\n  const refreshCurrentValue = () => {\n    const refreshedcurrentValue =\n      liveValue !== undefined ? liveValue : defaultValue;\n    if (refreshedcurrentValue === undefined) return;\n\n    setCurrentValue(\n      toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n    );\n\n    inputRef.current?.focus();\n\n    if (onChange) {\n      onChange(\n        toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n      );\n    }\n  };\n\n  const getButtonProps = (\n    type: Direction = stepperDirection.INCREMENT,\n    buttonPropsProp: ButtonProps = {}\n  ) => ({\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    ...buttonPropsProp,\n    onMouseDown: callAll(\n      (event: MouseEvent<HTMLButtonElement>) =>\n        handleButtonMouseDown(event, type),\n      buttonPropsProp.onMouseDown\n    ),\n    onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp),\n  });\n\n  const getInputProps = (\n    inputProps: InputProps = {}\n  ): InputProps | undefined => {\n    if (currentValue === undefined) return undefined;\n    return {\n      ...inputProps,\n      inputProps: {\n        role: \"spinbutton\",\n        \"aria-invalid\": isOutOfRange(),\n        \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n        \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n        \"aria-valuenow\": toFloat(\n          toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)\n        ),\n        id: inputId,\n        ...inputProps.inputProps,\n      },\n      onBlur: callAll(inputProps.onBlur, handleInputBlur),\n      onChange: callAll(inputProps.onChange, handleInputChange),\n      onFocus: callAll(inputProps.onFocus, handleInputFocus),\n      onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),\n      value: String(currentValue),\n    };\n  };\n\n  return {\n    decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,\n    getButtonIcon,\n    getButtonProps,\n    getInputProps,\n    incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,\n    isAtMax,\n    isAtMin,\n    refreshCurrentValue,\n    stepperDirection,\n    valuesHaveDiverged,\n  };\n};\n"],"names":["useControlled","useId","useDynamicAriaLabel","useSpinner"],"mappings":"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"}
+{"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, MutableRefObject } from \"react\";\nimport { ButtonProps, useControlled, useId } from \"@salt-ds/core\";\nimport { InputProps } from \"../input\";\nimport { useDynamicAriaLabel } from \"./internal/useDynamicAriaLabel\";\nimport { useSpinner } from \"./internal/useSpinner\";\nimport { StepperInputProps } from \"./StepperInput\";\n\ntype Direction = \"decrement\" | \"increment\";\n\nconst stepperDirection = {\n  INCREMENT: \"increment\" as Direction,\n  DECREMENT: \"decrement\" as Direction,\n};\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nconst callAll =\n  (...fns: any[]) =>\n  (...args: any[]) =>\n    fns.forEach((fn) => fn && fn(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n  inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number | string) => {\n  if (typeof inputCharacter === \"number\") return;\n  return (\n    (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n    inputCharacter === \"\"\n  );\n};\n\nconst toFloat = (inputValue: number | string) => {\n  // Plus, minus, and empty characters are treated as 0\n  if (isAllowedNonNumeric(inputValue)) return 0;\n  return parseFloat(inputValue.toString());\n};\n\nconst santizedInput = (numberString: string) =>\n  (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nconst getButtonIcon = (type: Direction) =>\n  type === stepperDirection.INCREMENT ? \"triangle-up\" : \"triangle-down\";\n\nexport const useStepperInput = (\n  props: StepperInputProps,\n  inputRef: MutableRefObject<HTMLInputElement | null>\n) => {\n  const {\n    block = 10,\n    decimalPlaces = 0,\n    defaultValue = 0,\n    liveValue,\n    max = Number.MAX_SAFE_INTEGER,\n    min = Number.MIN_SAFE_INTEGER,\n    onChange,\n    step = 1,\n    value,\n    InputProps: inputPropsProp = {},\n  } = props;\n\n  const [currentValue, setCurrentValue, isControlled] = useControlled({\n    controlled: value,\n    default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n    name: \"stepper-input\",\n  });\n  const inputId = useId(inputPropsProp.id);\n\n  const isOutOfRange = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) > max || toFloat(currentValue) < min;\n  };\n\n  const isAtMax = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) >= max || (max === 0 && currentValue === \"\");\n  };\n\n  const isAtMin = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) <= min || (min === 0 && currentValue === \"\");\n  };\n\n  const valuesHaveDiverged = () => {\n    if (liveValue === undefined || currentValue === undefined) return false;\n    return (\n      toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !==\n      toFloat(currentValue)\n    );\n  };\n\n  const { setHasAnnounced } = useDynamicAriaLabel(\n    \", value out of date\",\n    liveValue !== undefined,\n    inputRef,\n    currentValue,\n    valuesHaveDiverged\n  );\n\n  const decrement = () => {\n    if (currentValue === undefined || isAtMin()) return;\n    let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n    // Set value to `max` if it's currently out of range\n    if (max !== undefined && isOutOfRange()) nextValue = max;\n\n    setNextValue(nextValue);\n  };\n\n  const decrementBlock = () => {\n    if (currentValue === undefined || isAtMin()) return;\n    let nextValue =\n      currentValue === \"\"\n        ? block * -step\n        : toFloat(currentValue) - step * block;\n\n    // Set value to `max` if it's currently out of range\n    if (max !== undefined && isOutOfRange()) nextValue = max;\n\n    setNextValue(nextValue);\n  };\n\n  const increment = () => {\n    if (currentValue === undefined || isAtMax()) return;\n    let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n    // Set value to `min` if it's currently out of range\n    if (min !== undefined && isOutOfRange()) nextValue = min;\n\n    setNextValue(nextValue);\n  };\n\n  const incrementBlock = () => {\n    if (currentValue === undefined || isAtMax()) return;\n    let nextValue =\n      currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n    // Set value to `min` if it's currently out of range\n    if (min !== undefined && isOutOfRange()) nextValue = min;\n\n    setNextValue(nextValue);\n  };\n\n  const setNextValue = (modifiedValue: number) => {\n    let nextValue = modifiedValue;\n    if (nextValue < min) nextValue = min;\n    if (nextValue > max) nextValue = max;\n\n    const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n    if (isNaN(toFloat(roundedValue))) return;\n\n    if (!isControlled) {\n      setCurrentValue(roundedValue);\n    }\n\n    if (onChange) {\n      onChange(roundedValue);\n    }\n  };\n\n  const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n    useSpinner(decrementBlock, isAtMin());\n\n  const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n    useSpinner(decrement, isAtMin());\n\n  const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n    useSpinner(incrementBlock, isAtMax());\n\n  const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n    useSpinner(increment, isAtMax());\n\n  const handleInputBlur = () => {\n    if (currentValue === undefined) return;\n\n    const roundedValue = toFixedDecimalPlaces(\n      toFloat(currentValue),\n      decimalPlaces\n    );\n\n    if (\n      currentValue !== \"\" &&\n      !isAllowedNonNumeric(currentValue) &&\n      !isControlled\n    ) {\n      setCurrentValue(roundedValue);\n    }\n\n    if (onChange) {\n      onChange(roundedValue);\n    }\n  };\n\n  const handleInputFocus = () => {\n    setHasAnnounced(false);\n  };\n\n  const handleInputChange = (event: KeyboardEvent) => {\n    const changedValue = (event.currentTarget as HTMLInputElement).value;\n\n    if (!isControlled) {\n      setCurrentValue(santizedInput(changedValue));\n    }\n\n    if (onChange) {\n      onChange(santizedInput(changedValue));\n    }\n  };\n\n  const handleInputKeyDown = (event: KeyboardEvent) => {\n    if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n      event.preventDefault();\n      event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n    }\n    if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n      event.preventDefault();\n      event.key === \"PageUp\"\n        ? incrementSpinnerBlock()\n        : decrementSpinnerBlock();\n    }\n  };\n\n  const handleButtonMouseDown = (\n    event: MouseEvent<HTMLButtonElement>,\n    type: Direction = stepperDirection.INCREMENT\n  ) => {\n    if (event.nativeEvent.button !== 0) return;\n    type === stepperDirection.INCREMENT\n      ? incrementSpinner()\n      : decrementSpinner();\n  };\n\n  const handleButtonMouseUp = () => inputRef.current?.focus();\n\n  const refreshCurrentValue = () => {\n    const refreshedcurrentValue =\n      liveValue !== undefined ? liveValue : defaultValue;\n    if (refreshedcurrentValue === undefined) return;\n\n    setCurrentValue(\n      toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n    );\n\n    inputRef.current?.focus();\n\n    if (onChange) {\n      onChange(\n        toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n      );\n    }\n  };\n\n  const getButtonProps = (\n    type: Direction = stepperDirection.INCREMENT,\n    buttonPropsProp: ButtonProps = {}\n  ) => ({\n    \"aria-hidden\": true,\n    \"data-testid\": `${type}-button`,\n    tabIndex: -1,\n    ...buttonPropsProp,\n    onMouseDown: callAll(\n      (event: MouseEvent<HTMLButtonElement>) =>\n        handleButtonMouseDown(event, type),\n      buttonPropsProp.onMouseDown\n    ),\n    onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp),\n  });\n\n  const getInputProps = (\n    inputProps: InputProps = {}\n  ): InputProps | undefined => {\n    if (currentValue === undefined) return undefined;\n    return {\n      ...inputProps,\n      inputProps: {\n        role: \"spinbutton\",\n        \"aria-invalid\": isOutOfRange(),\n        \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n        \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n        \"aria-valuenow\": toFloat(\n          toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)\n        ),\n        id: inputId,\n        ...inputProps.inputProps,\n      },\n      onBlur: callAll(inputProps.onBlur, handleInputBlur),\n      onChange: callAll(inputProps.onChange, handleInputChange),\n      onFocus: callAll(inputProps.onFocus, handleInputFocus),\n      onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),\n      value: String(currentValue),\n    };\n  };\n\n  return {\n    decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,\n    getButtonIcon,\n    getButtonProps,\n    getInputProps,\n    incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,\n    isAtMax,\n    isAtMin,\n    refreshCurrentValue,\n    stepperDirection,\n    valuesHaveDiverged,\n  };\n};\n"],"names":["useControlled","useId","useDynamicAriaLabel","useSpinner"],"mappings":"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"}