@salt-ds/core 1.47.0 → 1.47.1

package/dist-cjs/segmented-button-group/SegmentedButtonGroup.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSegmentedButtonGroup {\n  display: flex;\n  flex-direction: row;\n  background: var(--button-background);\n  gap: var(--salt-size-border);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after {\n  content: \"\";\n  width: var(--salt-size-border);\n  position: absolute;\n  background: var(--button-background);\n  /* Accomodate button border */\n  right: calc(var(--salt-size-border) * -2);\n  top: calc(var(--salt-size-border) * -1);\n  bottom: calc(var(--salt-size-border) * -1);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before {\n  content: \"\";\n  width: var(--salt-size-border);\n  position: absolute;\n  background: var(--salt-separable-primary-borderColor);\n  /* Accomodate button border */\n  left: calc(var(--salt-size-border) * -2);\n  top: calc(var(--salt-size-border) * -1);\n  bottom: calc(var(--salt-size-border) * -1);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:first-of-type) {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:last-of-type) {\n  border-bottom-right-radius: 0;\n  border-top-right-radius: 0;\n}\n";
+var css_248z = ".saltSegmentedButtonGroup {\n  display: flex;\n  flex-direction: row;\n  background: var(--button-background);\n  gap: var(--salt-spacing-fixed-100);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:last-of-type)::after {\n  content: \"\";\n  width: var(--salt-spacing-fixed-100);\n  position: absolute;\n  background: var(--button-background);\n  /* Accomodate button border */\n  right: calc(var(--salt-size-fixed-100) * -2);\n  top: calc(var(--salt-size-fixed-100) * -1);\n  bottom: calc(var(--salt-size-fixed-100) * -1);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before {\n  content: \"\";\n  width: var(--salt-spacing-fixed-100);\n  position: absolute;\n  background: var(--salt-separable-primary-borderColor);\n  /* Accomodate button border */\n  left: calc(var(--salt-size-fixed-100) * -2);\n  top: calc(var(--salt-size-fixed-100) * -1);\n  bottom: calc(var(--salt-size-fixed-100) * -1);\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:first-of-type) {\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n\n.saltSegmentedButtonGroup > .saltButton:not(:last-of-type) {\n  border-bottom-right-radius: 0;\n  border-top-right-radius: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SegmentedButtonGroup.css.js.map

package/dist-cjs/slider/internal/SliderThumb.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSliderThumb {\n  align-items: center;\n  background: var(--salt-accent-borderColor);\n  cursor: var(--salt-selectable-cursor-hover);\n  display: flex;\n  height: var(--salt-size-selectable);\n  outline: none;\n  position: absolute;\n  top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);\n  transform: translateX(-50%);\n  width: var(--salt-size-border-strong);\n  touch-action: none;\n}\n\n.saltSliderThumb-disabled {\n  background: var(--salt-accent-borderColor-disabled);\n  pointer-events: none;\n}\n\n.saltSliderThumb-focusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderThumb:active,\n.saltSliderThumb-dragging {\n  cursor: var(--draggable-grab-cursor-active);\n}\n\n.saltSliderThumb-input {\n  border: 0;\n  appearance: none;\n  cursor: var(--salt-selectable-cursor-hover);\n  height: var(--salt-size-base);\n  left: var(--slider-progressPercentage);\n  margin: 0;\n  opacity: 0.0001;\n  overflow: hidden;\n  -webkit-appearance: none;\n  pointer-events: none;\n  width: var(--salt-size-base);\n  padding: 0;\n  position: absolute;\n  transform: translateX(-50%);\n}\n\n.saltSliderThumb-secondThumb {\n  /* The second thumb needs to sit on top the first thumb */\n  z-index: 2;\n}\n\n/* Visually hide accessible text. Can not\n  use visibility: hidden as we need the screen\n  reader to announce it */\n.saltSliderThumb-accessibleText {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
+var css_248z = ".saltSliderThumb {\n  align-items: center;\n  background: var(--salt-accent-borderColor);\n  cursor: var(--salt-cursor-grab);\n  display: flex;\n  height: var(--salt-size-selectable);\n  outline: none;\n  position: absolute;\n  top: calc(((var(--salt-size-selectable) - var(--salt-size-bar)) / 2) * -1);\n  transform: translateX(-50%);\n  width: var(--salt-size-fixed-200);\n  touch-action: none;\n}\n\n.saltSliderThumb-disabled {\n  background: var(--salt-accent-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n  pointer-events: none;\n}\n\n.saltSliderThumb-focusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltSliderThumb:active,\n.saltSliderThumb-dragging {\n  cursor: var(--salt-cursor-grab-active);\n}\n\n.saltSliderThumb-input {\n  border: 0;\n  appearance: none;\n  cursor: var(--salt-cursor-grab);\n  height: var(--salt-size-base);\n  left: var(--slider-progressPercentage);\n  margin: 0;\n  opacity: 0.0001;\n  overflow: hidden;\n  -webkit-appearance: none;\n  pointer-events: none;\n  width: var(--salt-size-base);\n  padding: 0;\n  position: absolute;\n  transform: translateX(-50%);\n}\n\n.saltSliderThumb-secondThumb {\n  /* The second thumb needs to sit on top the first thumb */\n  z-index: 2;\n}\n\n/* Visually hide accessible text. Can not\n  use visibility: hidden as we need the screen\n  reader to announce it */\n.saltSliderThumb-accessibleText {\n  position: absolute;\n  height: 1px;\n  width: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SliderThumb.css.js.map

package/dist-cjs/slider/internal/SliderTooltip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSliderTooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  bottom: 50%;\n  left: 50%;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: absolute;\n  transform: translate(-50%, -50%);\n  text-align: var(--saltTooltip-textAlign, left);\n  user-select: none;\n  visibility: hidden;\n  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltSliderTooltip-visible,\n.saltSliderTooltip:hover {\n  visibility: visible;\n}\n\n.saltSliderTooltip-arrow {\n  fill: var(--salt-container-primary-background);\n  height: var(--salt-size-icon);\n  left: 50%;\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  transform: translateX(-50%);\n  stroke: var(--salt-container-primary-borderColor);\n  stroke-width: var(--salt-size-border);\n  width: var(--salt-size-icon);\n}\n\n.saltSliderTooltip-text {\n  white-space: nowrap;\n}\n";
+var css_248z = ".saltSliderTooltip {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-fixed-100));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  bottom: 50%;\n  left: 50%;\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  position: absolute;\n  transform: translate(-50%, -50%);\n  text-align: var(--saltTooltip-textAlign, left);\n  user-select: none;\n  visibility: hidden;\n  z-index: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n}\n\n.saltSliderTooltip-visible,\n.saltSliderTooltip:hover {\n  visibility: visible;\n}\n\n.saltSliderTooltip-arrow {\n  fill: var(--salt-container-primary-background);\n  height: var(--salt-size-icon);\n  left: 50%;\n  position: absolute;\n  pointer-events: none;\n  top: 100%;\n  transform: translateX(-50%);\n  stroke: var(--salt-container-primary-borderColor);\n  stroke-width: var(--salt-size-fixed-100);\n  width: var(--salt-size-icon);\n}\n\n.saltSliderTooltip-text {\n  white-space: nowrap;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SliderTooltip.css.js.map

package/dist-cjs/slider/internal/SliderTrack.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSliderTrack {\n  --slider-track-background: var(--salt-track-borderColor);\n  --slider-track-fill: var(--salt-accent-borderColor);\n  --slider-progressPercentage: 0%;\n  --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);\n  /* For range */\n  --slider-progressPercentageStart: 0%;\n  --slider-progressPercentageEnd: 0%;\n\n  display: flex;\n  touch-action: none;\n  width: 100%;\n}\n\n.saltSliderTrack.saltSliderTrack-withMarks {\n  /* To wrap the marks within the boundary box */\n  margin-bottom: calc(var(--salt-size-base) / 2);\n}\n\n.saltSliderTrack-disabled {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSliderTrack-container {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n  align-items: center;\n  cursor: var(--salt-selectable-cursor-hover);\n  display: flex;\n  flex: 1;\n  height: var(--salt-size-selectable);\n  position: relative;\n  width: 100%;\n}\n\n.saltSliderTrack-disabled,\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n  pointer-events: none;\n}\n\n.saltSliderTrack-rail {\n  display: flex;\n  flex: 100%;\n  height: var(--salt-size-bar);\n  justify-content: space-between;\n  position: relative;\n}\n\n.saltSliderTrack-rail::before,\n.saltSliderTrack-rail::after {\n  content: \"\";\n  display: block;\n  height: 100%;\n}\n\n.saltSliderTrack-rail::before {\n  background: var(--slider-track-fill);\n  border-top-left-radius: var(--salt-palette-corner-weaker);\n  border-bottom-left-radius: var(--salt-palette-corner-weaker);\n  width: calc(var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));\n}\n\n.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {\n  border-bottom-left-radius: unset;\n}\n\n.saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  border-top-right-radius: var(--salt-palette-corner-weaker);\n  border-bottom-right-radius: var(--salt-palette-corner-weaker);\n  width: calc(100% - var(--slider-progressPercentage) - 1.5 * var(--salt-size-border-strong));\n}\n\n.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {\n  border-bottom-right-radius: unset;\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::before {\n  background: var(--slider-track-background);\n  width: calc(var(--slider-progressPercentageStart) - (var(--salt-size-border-strong) * 1.5));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  width: calc(100% - var(--slider-progressPercentageEnd) - (var(--salt-size-border-strong) * 1.5));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n  background: var(--slider-track-fill);\n  height: 100%;\n  left: calc(var(--slider-progressPercentageStart) + 1.5 * var(--salt-size-border-strong));\n  position: absolute;\n  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-border-strong) * 3);\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n  user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-wrapper {\n  cursor: var(--salt-draggable-grab-cursor-active);\n}\n\n.saltSliderTrack-disabled {\n  --slider-track-fill: var(--salt-accent-borderColor-disabled);\n  --slider-track-background: var(--salt-track-borderColor-disabled);\n}\n\n.saltSliderTrack-ticks {\n  top: calc(var(--salt-size-bar) + var(--slider-tick-height));\n  position: absolute;\n  width: 100%;\n}\n\n.saltSliderTrack-tick {\n  background: var(--slider-track-background);\n  height: var(--slider-tick-height);\n  position: absolute;\n  transform: translate(-50%);\n  width: var(--salt-size-border-strong);\n}\n\n.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {\n  visibility: hidden;\n}\n\n.saltSliderTrack-tickSelected {\n  background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-tick:first-of-type {\n  transform: unset;\n}\n\n.saltSliderTrack-tick:last-of-type {\n  transform: translateX(-100%);\n}\n\n.saltSliderTrack-marks {\n  position: absolute;\n  user-select: none;\n  width: 100%;\n}\n\n.saltSliderTrack-markLabel {\n  color: var(--salt-content-secondary-foreground);\n  font-family: var(--salt-text-label-fontFamily);\n  font-weight: var(--salt-text-label-fontWeight);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  transform: translateX(-50%);\n  top: calc(var(--slider-tick-height) + var(--salt-spacing-50));\n  white-space: nowrap;\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {\n  transform: translateX(0%);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {\n  transform: translateX(-100%);\n}\n\n/* Styles applied when slider and range slider are inside a form field */\n\n.saltFormField .saltSliderTrack.saltSliderTrack-withMark {\n  margin-bottom: 0;\n}\n\n.saltFormField .saltSliderTrack-container {\n  --saltFormField-label-width: 10%;\n\n  height: var(--salt-size-base);\n}\n\n.saltFormField .saltSliderTrack-markLabel {\n  top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);\n}\n";
+var css_248z = ".saltSliderTrack {\n  --slider-track-background: var(--salt-track-borderColor);\n  --slider-track-fill: var(--salt-accent-borderColor);\n  --slider-progressPercentage: 0%;\n  --slider-tick-height: calc((var(--salt-size-selectable) - var(--salt-size-bar)) / 2);\n  /* For range */\n  --slider-progressPercentageStart: 0%;\n  --slider-progressPercentageEnd: 0%;\n\n  display: flex;\n  touch-action: none;\n  width: 100%;\n}\n\n.saltSliderTrack.saltSliderTrack-withMarks {\n  /* To wrap the marks within the boundary box */\n  margin-bottom: calc(var(--salt-size-base) / 2);\n}\n\n.saltSliderTrack-disabled {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltSliderTrack-container {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  width: 100%;\n}\n\n.saltSliderTrack-wrapper {\n  align-items: center;\n  cursor: var(--salt-cursor-hover);\n  display: flex;\n  flex: 1;\n  height: var(--salt-size-selectable);\n  position: relative;\n  width: 100%;\n}\n\n.saltSliderTrack-disabled,\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltSliderTrack-disabled .saltSliderTrack-wrapper {\n  pointer-events: none;\n}\n\n.saltSliderTrack-rail {\n  display: flex;\n  flex: 100%;\n  height: var(--salt-size-bar);\n  justify-content: space-between;\n  position: relative;\n}\n\n.saltSliderTrack-rail::before,\n.saltSliderTrack-rail::after {\n  content: \"\";\n  display: block;\n  height: 100%;\n}\n\n.saltSliderTrack-rail::before {\n  background: var(--slider-track-fill);\n  border-top-left-radius: var(--salt-palette-corner-weaker);\n  border-bottom-left-radius: var(--salt-palette-corner-weaker);\n  width: calc(var(--slider-progressPercentage) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-hasMinTick.saltSliderTrack-rail::before {\n  border-bottom-left-radius: unset;\n}\n\n.saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  border-top-right-radius: var(--salt-palette-corner-weaker);\n  border-bottom-right-radius: var(--salt-palette-corner-weaker);\n  width: calc(100% - var(--slider-progressPercentage) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-hasMaxTick.saltSliderTrack-rail::after {\n  border-bottom-right-radius: unset;\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::before {\n  background: var(--slider-track-background);\n  width: calc(var(--slider-progressPercentageStart) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail::after {\n  background: var(--slider-track-background);\n  width: calc(100% - var(--slider-progressPercentageEnd) - var(--salt-size-fixed-300));\n}\n\n.saltSliderTrack-range .saltSliderTrack-rail .saltSliderTrack-fill {\n  background: var(--slider-track-fill);\n  height: 100%;\n  left: calc(var(--slider-progressPercentageStart) + var(--salt-size-fixed-300));\n  position: absolute;\n  width: calc(var(--slider-progressPercentageEnd) - var(--slider-progressPercentageStart) - var(--salt-size-fixed-600));\n}\n\n.saltSliderTrack-minLabel,\n.saltSliderTrack-maxLabel {\n  user-select: none;\n}\n\n.saltSliderTrack-dragging,\n.saltSliderTrack-dragging .saltSliderTrack-wrapper {\n  cursor: var(--salt-cursor-grab-active);\n}\n\n.saltSliderTrack-disabled {\n  --slider-track-fill: var(--salt-accent-borderColor-disabled);\n  --slider-track-background: var(--salt-track-borderColor-disabled);\n}\n\n.saltSliderTrack-ticks {\n  top: calc(var(--salt-size-bar) + var(--slider-tick-height));\n  position: absolute;\n  width: 100%;\n}\n\n.saltSliderTrack-tick {\n  background: var(--slider-track-background);\n  height: var(--slider-tick-height);\n  position: absolute;\n  transform: translate(-50%);\n  width: var(--salt-size-fixed-200);\n}\n\n.saltSliderTrack-withTicks .saltSliderTrack-tickHidden {\n  visibility: hidden;\n}\n\n.saltSliderTrack-tickSelected {\n  background: var(--slider-track-fill);\n}\n\n.saltSliderTrack-tick:first-of-type {\n  transform: unset;\n}\n\n.saltSliderTrack-tick:last-of-type {\n  transform: translateX(-100%);\n}\n\n.saltSliderTrack-marks {\n  position: absolute;\n  user-select: none;\n  width: 100%;\n}\n\n.saltSliderTrack-markLabel {\n  color: var(--salt-content-secondary-foreground);\n  font-family: var(--salt-text-label-fontFamily);\n  font-weight: var(--salt-text-label-fontWeight);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  overflow: hidden;\n  position: absolute;\n  text-overflow: ellipsis;\n  transform: translateX(-50%);\n  top: calc(var(--slider-tick-height) + var(--salt-spacing-50));\n  white-space: nowrap;\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:first-of-type {\n  transform: translateX(0%);\n}\n\n.saltSliderTrack-constrainLabelPosition .saltSliderTrack-markLabel:last-of-type {\n  transform: translateX(-100%);\n}\n\n/* Styles applied when slider and range slider are inside a form field */\n\n.saltFormField .saltSliderTrack.saltSliderTrack-withMark {\n  margin-bottom: 0;\n}\n\n.saltFormField .saltSliderTrack-container {\n  --saltFormField-label-width: 10%;\n\n  height: var(--salt-size-base);\n}\n\n.saltFormField .saltSliderTrack-markLabel {\n  top: calc((var(--salt-size-base) - var(--salt-size-bar)) / 2);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=SliderTrack.css.js.map

package/dist-cjs/spinner/Spinner.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n  position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n  stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));\n}\n\n/* Styles applied when `size=\"medium\"` */\n.saltSpinner-medium {\n  --spinner-strokeWidth: var(--salt-size-bar);\n  height: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n  --spinner-strokeWidth: var(--salt-size-bar);\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied when `size=\"small\"` */\n.saltSpinner-small {\n  --spinner-strokeWidth: var(--salt-size-bar-small);\n  height: var(--salt-size-icon);\n  width: var(--salt-size-icon);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltSpinner {\n  position: relative;\n}\n\n/* Styles applied to the SVG stop elements */\n.saltSpinner-gradientStop {\n  stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background));\n}\n\n/* Styles applied when `size=\"medium\"` */\n.saltSpinner-medium {\n  --spinner-strokeWidth: var(--salt-size-bar);\n  height: var(--salt-size-base);\n  width: var(--salt-size-base);\n}\n\n/* Styles applied when `size=\"large\"` */\n.saltSpinner-large {\n  --spinner-strokeWidth: var(--salt-size-bar);\n  height: calc(var(--salt-size-base) * 2);\n  width: calc(var(--salt-size-base) * 2);\n}\n\n/* Styles applied when `size=\"small\"` */\n.saltSpinner-small {\n  --spinner-strokeWidth: var(--salt-size-fixed-200);\n  height: var(--salt-size-icon);\n  width: var(--salt-size-icon);\n}\n\n/* Styles applied to the SVG */\n.saltSpinner-spinner {\n  animation: spinner 0.9s linear infinite;\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n@keyframes spinner {\n  0% {\n    transform: rotate(0);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Spinner.css.js.map

package/dist-cjs/split-layout/SplitLayout.js

@@ -15,7 +15,7 @@ var SplitLayout$1 = require('./SplitLayout.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltSplitLayout");
 const SplitLayout = React.forwardRef(
-  ({ endItem, startItem, className, ...rest }, ref) => {
+  function SplitLayout2({ as, endItem, startItem, className, ...rest }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-split-layout",
@@ -26,6 +26,7 @@ const SplitLayout = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       FlexLayout.FlexLayout,
       {
+        as,
         className: clsx.clsx(withBaseName(), className),
         ref,
         justify,

package/dist-cjs/split-layout/SplitLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ReactElement,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  makePrefixer,\n} from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: FlexLayoutProps<ElementType>[\"direction\"];\n      /**\n       * End component to be rendered.\n       */\n      endItem?: ReactNode;\n      /**\n       * Controls the space between left and right items.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Start component to be rendered.\n       */\n      startItem?: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n  props: SplitLayoutProps<T>,\n) => ReactElement | null;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    { endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-split-layout\",\n      css: splitLayoutCss,\n      window: targetWindow,\n    });\n\n    const justify = endItem && !startItem ? \"end\" : \"space-between\";\n    return (\n      <FlexLayout\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        justify={justify}\n        {...rest}\n      >\n        {startItem}\n        {endItem}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","splitLayoutCss","jsxs","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAyC5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE,EAAE,OAAS,EAAA,SAAA,EAAW,WAAW,GAAG,IAAA,IACpC,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA;AAChD,IACE,uBAAAC,eAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"SplitLayout.js","sources":["../src/split-layout/SplitLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport { FlexLayout, type FlexLayoutProps } from \"../flex-layout\";\nimport { type PolymorphicComponentPropWithRef, makePrefixer } from \"../utils\";\nimport splitLayoutCss from \"./SplitLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltSplitLayout\");\n\nexport type SplitLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line.\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"row\".\n       */\n      direction?: FlexLayoutProps<ElementType>[\"direction\"];\n      /**\n       * End component to be rendered.\n       */\n      endItem?: ReactNode;\n      /**\n       * Controls the space between left and right items.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Start component to be rendered.\n       */\n      startItem?: ReactNode;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype SplitLayoutComponent = <T extends ElementType = \"div\">(\n  props: SplitLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nexport const SplitLayout: SplitLayoutComponent = forwardRef(\n  function SplitLayout<T extends ElementType = \"div\">(\n    { as, endItem, startItem, className, ...rest }: SplitLayoutProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-split-layout\",\n      css: splitLayoutCss,\n      window: targetWindow,\n    });\n\n    const justify = endItem && !startItem ? \"end\" : \"space-between\";\n    return (\n      <FlexLayout\n        as={as as ElementType}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        justify={justify}\n        {...rest}\n      >\n        {startItem}\n        {endItem}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","SplitLayout","useWindow","useComponentCssInjection","splitLayoutCss","jsxs","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAyC5C,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,SAASC,YACP,CAAA,EAAE,EAAI,EAAA,OAAA,EAAS,WAAW,SAAW,EAAA,GAAG,IAAK,EAAA,EAC7C,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAU,GAAA,OAAA,IAAW,CAAC,SAAA,GAAY,KAAQ,GAAA,eAAA;AAChD,IACE,uBAAAC,eAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/stack-layout/StackLayout.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Default variables applied to the root element */\n.saltStackLayout {\n  --stackLayout-separator-weight: var(--salt-size-border, 1);\n}\n\n.saltStackLayout-separator > * {\n  position: relative;\n}\n.saltStackLayout-separator > *:not(:last-child)::after {\n  position: absolute;\n  display: block;\n  content: \"\";\n  background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/*\n * Seperator offset based on seperator alignment\n * var(--stackLayout-separator-weight) is used to take into account the thickness of the seperator,so even at higher weights it will be at the start/center/end\n*/\n.saltStackLayout-separator-start {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-separator-weight) * -1);\n}\n.saltStackLayout-separator-center {\n  --stackLayout-seperator-offset: calc((var(--stackLayout-gap) * -0.5) + (var(--stackLayout-separator-weight) * -0.5));\n}\n.saltStackLayout-separator-end {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-gap) * -1);\n}\n\n/* When alignment is 'row' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-row.saltStackLayout-separator > *:not(:last-child)::after {\n  height: 100%;\n  width: var(--stackLayout-separator-weight);\n  right: var(--stackLayout-seperator-offset);\n  top: 0;\n}\n\n/* When alignment is 'column' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-column.saltStackLayout-separator > *:not(:last-child)::after {\n  width: 100%;\n  height: var(--stackLayout-separator-weight);\n  bottom: var(--stackLayout-seperator-offset);\n  left: 0;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltStackLayout {\n  --stackLayout-separator-weight: var(--salt-size-fixed-100, 1);\n}\n\n.saltStackLayout-separator > * {\n  position: relative;\n}\n.saltStackLayout-separator > *:not(:last-child)::after {\n  position: absolute;\n  display: block;\n  content: \"\";\n  background-color: var(--salt-separable-secondary-borderColor);\n}\n\n/*\n * Seperator offset based on seperator alignment\n * var(--stackLayout-separator-weight) is used to take into account the thickness of the seperator,so even at higher weights it will be at the start/center/end\n*/\n.saltStackLayout-separator-start {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-separator-weight) * -1);\n}\n.saltStackLayout-separator-center {\n  --stackLayout-seperator-offset: calc((var(--stackLayout-gap) * -0.5) + (var(--stackLayout-separator-weight) * -0.5));\n}\n.saltStackLayout-separator-end {\n  --stackLayout-seperator-offset: calc(var(--stackLayout-gap) * -1);\n}\n\n/* When alignment is 'row' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-row.saltStackLayout-separator > *:not(:last-child)::after {\n  height: 100%;\n  width: var(--stackLayout-separator-weight);\n  right: var(--stackLayout-seperator-offset);\n  top: 0;\n}\n\n/* When alignment is 'column' and we have seperators (last child doesn't need a seperator) */\n.saltStackLayout-column.saltStackLayout-separator > *:not(:last-child)::after {\n  width: 100%;\n  height: var(--stackLayout-separator-weight);\n  bottom: var(--stackLayout-seperator-offset);\n  left: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StackLayout.css.js.map

package/dist-cjs/stack-layout/StackLayout.js

@@ -21,7 +21,8 @@ function parseSpacing(value) {
   return `calc(var(--salt-spacing-100) * ${value})`;
 }
 const StackLayout = React.forwardRef(
-  ({
+  function StackLayout2({
+    as,
     children,
     className,
     direction = "column",
@@ -29,7 +30,7 @@ const StackLayout = React.forwardRef(
     separators,
     style,
     ...rest
-  }, ref) => {
+  }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
       testId: "salt-stack-layout",
@@ -47,6 +48,7 @@ const StackLayout = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       FlexLayout.FlexLayout,
       {
+        as,
         className: clsx.clsx(
           withBaseName(),
           {

package/dist-cjs/stack-layout/StackLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n  FlexLayout,\n  type FlexLayoutProps,\n  type LayoutDirection,\n  type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>,\n) => ReactElement | null;\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      children,\n      className,\n      direction = \"column\",\n      gap = 3,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: PolymorphicRef<T>,\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap\": parseSpacing(flexGap),\n    };\n    return (\n      <FlexLayout\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(flexDirection ?? \"\")]: flexDirection,\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className,\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","stackLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAUC,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}
+{"version":3,"file":"StackLayout.js","sources":["../src/stack-layout/StackLayout.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n} from \"react\";\nimport { useBreakpoint } from \"../breakpoints\";\nimport {\n  FlexLayout,\n  type FlexLayoutProps,\n  type LayoutDirection,\n  type LayoutSeparator,\n} from \"../flex-layout\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type ResponsiveProp,\n  makePrefixer,\n  resolveResponsiveValue,\n} from \"../utils\";\nimport stackLayoutCss from \"./StackLayout.css\";\n\nconst withBaseName = makePrefixer(\"saltStackLayout\");\n\nexport type StackLayoutProps<T extends ElementType> =\n  PolymorphicComponentPropWithRef<\n    T,\n    {\n      /**\n       * Defines the default behavior for how flex items are laid out along the cross axis on the current line, default is \"stretch\".\n       */\n      align?: FlexLayoutProps<ElementType>[\"align\"];\n      /**\n       * Establishes the main-axis, defining the direction children are placed. Default is \"column\".\n       */\n      direction?: ResponsiveProp<LayoutDirection>;\n      /**\n       * Controls the space between items, default is 3.\n       */\n      gap?: FlexLayoutProps<ElementType>[\"gap\"];\n      /**\n       * Adds a separator between elements, default is false.\n       */\n      separators?: LayoutSeparator | boolean;\n      /**\n       * Defines the margin around the component. It can be specified as a number (which acts as a multiplier) or a string representing the margin value. Default is `0`.\n       */\n      margin?: FlexLayoutProps<ElementType>[\"margin\"];\n      /**\n       * Defines the padding within the component. It can be specified as a number (which acts as a multiplier) or a string representing the padding value. Default is `0`.\n       */\n      padding?: FlexLayoutProps<ElementType>[\"padding\"];\n    }\n  >;\n\ntype StackLayoutComponent = <T extends ElementType = \"div\">(\n  props: StackLayoutProps<T>,\n) => ReturnType<FunctionComponent>;\n\nfunction parseSpacing(value: number | string | undefined) {\n  if (value === undefined || typeof value === \"string\") {\n    return value;\n  }\n\n  return `calc(var(--salt-spacing-100) * ${value})`;\n}\n\nexport const StackLayout: StackLayoutComponent = forwardRef(\n  function StackLayout<T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      direction = \"column\",\n      gap = 3,\n      separators,\n      style,\n      ...rest\n    }: StackLayoutProps<T>,\n    ref?: ForwardedRef<unknown>,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stack-layout\",\n      css: stackLayoutCss,\n      window: targetWindow,\n    });\n\n    const { matchedBreakpoints } = useBreakpoint();\n\n    const flexGap = resolveResponsiveValue(gap, matchedBreakpoints);\n    const separatorAlignment = separators === true ? \"center\" : separators;\n    const flexDirection = resolveResponsiveValue(direction, matchedBreakpoints);\n    const stackLayoutStyles = {\n      ...style,\n      \"--stackLayout-gap\": parseSpacing(flexGap),\n    };\n    return (\n      <FlexLayout\n        as={as as ElementType}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(flexDirection ?? \"\")]: flexDirection,\n            [withBaseName(\"separator\")]: !!separatorAlignment,\n            [separatorAlignment\n              ? withBaseName(`separator-${separatorAlignment}`)\n              : \"\"]: separatorAlignment,\n          },\n          className,\n        )}\n        ref={ref}\n        direction={direction}\n        style={stackLayoutStyles}\n        wrap={false}\n        gap={flexGap}\n        {...rest}\n      >\n        {children}\n      </FlexLayout>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","StackLayout","useWindow","useComponentCssInjection","stackLayoutCss","useBreakpoint","resolveResponsiveValue","jsx","FlexLayout","clsx"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAeA,0BAAa,iBAAiB,CAAA;AAqCnD,SAAS,aAAa,KAAoC,EAAA;AACxD,EAAA,IAAI,KAAU,KAAA,MAAA,IAAa,OAAO,KAAA,KAAU,QAAU,EAAA;AACpD,IAAO,OAAA,KAAA;AAAA;AAGT,EAAA,OAAO,kCAAkC,KAAK,CAAA,CAAA,CAAA;AAChD;AAEO,MAAM,WAAoC,GAAAC,gBAAA;AAAA,EAC/C,SAASC,YACP,CAAA;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAY,GAAA,QAAA;AAAA,IACZ,GAAM,GAAA,CAAA;AAAA,IACN,UAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,kBAAmB,EAAA,GAAIC,gCAAc,EAAA;AAE7C,IAAM,MAAA,OAAA,GAAUC,wCAAuB,CAAA,GAAA,EAAK,kBAAkB,CAAA;AAC9D,IAAM,MAAA,kBAAA,GAAqB,UAAe,KAAA,IAAA,GAAO,QAAW,GAAA,UAAA;AAC5D,IAAM,MAAA,aAAA,GAAgBA,wCAAuB,CAAA,SAAA,EAAW,kBAAkB,CAAA;AAC1E,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,GAAG,KAAA;AAAA,MACH,mBAAA,EAAqB,aAAa,OAAO;AAAA,KAC3C;AACA,IACE,uBAAAC,cAAA;AAAA,MAACC,qBAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,aAAiB,IAAA,EAAE,CAAC,GAAG,aAAA;AAAA,YACrC,CAAC,YAAa,CAAA,WAAW,CAAC,GAAG,CAAC,CAAC,kBAAA;AAAA,YAC/B,CAAC,qBACG,YAAa,CAAA,CAAA,UAAA,EAAa,kBAAkB,CAAE,CAAA,CAAA,GAC9C,EAAE,GAAG;AAAA,WACX;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA;AAAA,QACA,KAAO,EAAA,iBAAA;AAAA,QACP,IAAM,EAAA,KAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

package/dist-cjs/stepper/internal/StepConnector.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltStepConnector {\n  grid-area: connector;\n\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: opacity, min-height;\n}\n\n.saltStepper-horizontal .saltStepConnector {\n  position: absolute;\n  transform: translateY(-100%);\n  top: calc(var(--step-icon-size) / 2);\n  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n  border-top-width: var(--salt-size-border-strong);\n  border-top-style: var(--salt-track-borderStyle-incomplete);\n  border-top-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n  border-top-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStepper-vertical .saltStepConnector {\n  min-height: var(--salt-size-base);\n  align-self: stretch;\n  justify-self: center;\n\n  border-left-width: var(--salt-size-border-strong);\n  border-left-style: var(--salt-track-borderStyle-incomplete);\n  border-left-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector {\n  border-left-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n";
+var css_248z = ".saltStepConnector {\n  grid-area: connector;\n\n  transition-duration: inherit;\n  transition-timing-function: inherit;\n  transition-property: opacity, min-height;\n}\n\n.saltStepper-horizontal .saltStepConnector {\n  position: absolute;\n  transform: translateY(-100%);\n  top: calc(var(--step-icon-size) / 2);\n  left: calc(50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n  right: calc(-50% + calc(var(--step-icon-size) / 2 + var(--salt-spacing-100)));\n\n  border-top-width: var(--salt-size-fixed-200);\n  border-top-style: var(--salt-track-borderStyle-incomplete);\n  border-top-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-horizontal .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-horizontal .saltStep-stage-inprogress > .saltStepConnector {\n  border-top-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStepper-vertical .saltStepConnector {\n  min-height: var(--salt-size-base);\n  align-self: stretch;\n  justify-self: center;\n\n  border-left-width: var(--salt-size-fixed-200);\n  border-left-style: var(--salt-track-borderStyle-incomplete);\n  border-left-color: var(--salt-track-borderColor);\n}\n\n.saltStepper-vertical .saltStep-stage-completed > .saltStepConnector,\n.saltStepper-vertical .saltStep-stage-inprogress > .saltStepConnector {\n  border-left-style: var(--salt-track-borderStyle-complete);\n}\n\n.saltStep-depth-0.saltStep:not(.saltStep-expanded):last-child > .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n\n.saltStep-depth-0.saltStep-expanded:last-child .saltStep:not(.saltStep-expanded):last-child .saltStepConnector {\n  opacity: 0;\n  min-height: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StepConnector.css.js.map

package/dist-cjs/switch/Switch.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-size: 100%;\n  border-radius: var(--salt-palette-corner-weak, 0);\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  box-sizing: border-box;\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n  .saltSwitch:hover .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied when switch is inside a form field with label left or right, ensuring alignment with base / input height */\n.saltFormField-labelRight .saltSwitch,\n.saltFormField-labelLeft .saltSwitch {\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n}\n";
+var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-size: 100%;\n  border-radius: var(--salt-palette-corner-weak, 0);\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  box-sizing: border-box;\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-fixed-100)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n  .saltSwitch:hover .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied when switch is inside a form field with label left or right, ensuring alignment with base / input height */\n.saltFormField-labelRight .saltSwitch,\n.saltFormField-labelLeft .saltSwitch {\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Switch.css.js.map

package/dist-cjs/tag/Tag.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));\n  border: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));\n  border: var(--salt-size-border) var(--salt-container-borderStyle) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-subtle-background);\n  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n  --tag-secondary-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-subtle-background);\n  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n  --tag-secondary-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-subtle-background);\n  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n  --tag-secondary-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-subtle-background);\n  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n  --tag-secondary-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-subtle-background);\n  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n  --tag-secondary-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-subtle-background);\n  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n  --tag-secondary-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-subtle-background);\n  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n  --tag-secondary-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-subtle-background);\n  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n  --tag-secondary-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-subtle-background);\n  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n  --tag-secondary-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-subtle-background);\n  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n  --tag-secondary-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-subtle-background);\n  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n  --tag-secondary-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-subtle-background);\n  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n  --tag-secondary-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-subtle-background);\n  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n  --tag-secondary-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-subtle-background);\n  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n  --tag-secondary-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-subtle-background);\n  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n  --tag-secondary-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-subtle-background);\n  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n  --tag-secondary-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-subtle-background);\n  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n  --tag-secondary-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-subtle-background);\n  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n  --tag-secondary-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-subtle-background);\n  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n  --tag-secondary-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-subtle-background);\n  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n  --tag-secondary-foreground: var(--salt-category-20-bold-foreground);\n}\n";
+var css_248z = ".saltTag {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  display: flex;\n  column-gap: var(--salt-spacing-50);\n  align-items: center;\n  padding: var(--salt-spacing-25) var(--salt-spacing-100);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  overflow: hidden;\n  border-radius: var(--saltTag-borderRadius, var(--salt-palette-corner-strongest, 9999px));\n  width: fit-content;\n  min-width: max-content;\n  box-sizing: border-box;\n}\n.saltTag-primary {\n  background: var(--tag-primary-background, var(--salt-category-1-subtle-background));\n  color: var(--tag-primary-foreground, var(--salt-category-1-subtle-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) transparent;\n}\n.saltTag-bordered {\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) var(--tag-primary-borderColor, var(--salt-category-1-subtle-borderColor));\n}\n.saltTag-secondary {\n  background: var(--tag-secondary-background, var(--salt-category-1-bold-background));\n  color: var(--tag-secondary-foreground, var(--salt-category-1-bold-foreground));\n  border: var(--salt-size-fixed-100) var(--salt-container-borderStyle) transparent;\n}\n\n.saltTag-category-1 {\n  --tag-primary-background: var(--salt-category-1-subtle-background);\n  --tag-primary-foreground: var(--salt-category-1-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-1-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-1-bold-background);\n  --tag-secondary-foreground: var(--salt-category-1-bold-foreground);\n}\n.saltTag-category-2 {\n  --tag-primary-background: var(--salt-category-2-subtle-background);\n  --tag-primary-foreground: var(--salt-category-2-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-2-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-2-bold-background);\n  --tag-secondary-foreground: var(--salt-category-2-bold-foreground);\n}\n\n.saltTag-category-3 {\n  --tag-primary-background: var(--salt-category-3-subtle-background);\n  --tag-primary-foreground: var(--salt-category-3-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-3-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-3-bold-background);\n  --tag-secondary-foreground: var(--salt-category-3-bold-foreground);\n}\n\n.saltTag-category-4 {\n  --tag-primary-background: var(--salt-category-4-subtle-background);\n  --tag-primary-foreground: var(--salt-category-4-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-4-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-4-bold-background);\n  --tag-secondary-foreground: var(--salt-category-4-bold-foreground);\n}\n\n.saltTag-category-5 {\n  --tag-primary-background: var(--salt-category-5-subtle-background);\n  --tag-primary-foreground: var(--salt-category-5-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-5-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-5-bold-background);\n  --tag-secondary-foreground: var(--salt-category-5-bold-foreground);\n}\n\n.saltTag-category-6 {\n  --tag-primary-background: var(--salt-category-6-subtle-background);\n  --tag-primary-foreground: var(--salt-category-6-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-6-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-6-bold-background);\n  --tag-secondary-foreground: var(--salt-category-6-bold-foreground);\n}\n\n.saltTag-category-7 {\n  --tag-primary-background: var(--salt-category-7-subtle-background);\n  --tag-primary-foreground: var(--salt-category-7-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-7-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-7-bold-background);\n  --tag-secondary-foreground: var(--salt-category-7-bold-foreground);\n}\n\n.saltTag-category-8 {\n  --tag-primary-background: var(--salt-category-8-subtle-background);\n  --tag-primary-foreground: var(--salt-category-8-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-8-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-8-bold-background);\n  --tag-secondary-foreground: var(--salt-category-8-bold-foreground);\n}\n\n.saltTag-category-9 {\n  --tag-primary-background: var(--salt-category-9-subtle-background);\n  --tag-primary-foreground: var(--salt-category-9-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-9-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-9-bold-background);\n  --tag-secondary-foreground: var(--salt-category-9-bold-foreground);\n}\n\n.saltTag-category-10 {\n  --tag-primary-background: var(--salt-category-10-subtle-background);\n  --tag-primary-foreground: var(--salt-category-10-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-10-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-10-bold-background);\n  --tag-secondary-foreground: var(--salt-category-10-bold-foreground);\n}\n.saltTag-category-11 {\n  --tag-primary-background: var(--salt-category-11-subtle-background);\n  --tag-primary-foreground: var(--salt-category-11-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-11-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-11-bold-background);\n  --tag-secondary-foreground: var(--salt-category-11-bold-foreground);\n}\n.saltTag-category-12 {\n  --tag-primary-background: var(--salt-category-12-subtle-background);\n  --tag-primary-foreground: var(--salt-category-12-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-12-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-12-bold-background);\n  --tag-secondary-foreground: var(--salt-category-12-bold-foreground);\n}\n.saltTag-category-13 {\n  --tag-primary-background: var(--salt-category-13-subtle-background);\n  --tag-primary-foreground: var(--salt-category-13-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-13-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-13-bold-background);\n  --tag-secondary-foreground: var(--salt-category-13-bold-foreground);\n}\n.saltTag-category-14 {\n  --tag-primary-background: var(--salt-category-14-subtle-background);\n  --tag-primary-foreground: var(--salt-category-14-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-14-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-14-bold-background);\n  --tag-secondary-foreground: var(--salt-category-14-bold-foreground);\n}\n.saltTag-category-15 {\n  --tag-primary-background: var(--salt-category-15-subtle-background);\n  --tag-primary-foreground: var(--salt-category-15-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-15-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-15-bold-background);\n  --tag-secondary-foreground: var(--salt-category-15-bold-foreground);\n}\n.saltTag-category-16 {\n  --tag-primary-background: var(--salt-category-16-subtle-background);\n  --tag-primary-foreground: var(--salt-category-16-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-16-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-16-bold-background);\n  --tag-secondary-foreground: var(--salt-category-16-bold-foreground);\n}\n.saltTag-category-17 {\n  --tag-primary-background: var(--salt-category-17-subtle-background);\n  --tag-primary-foreground: var(--salt-category-17-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-17-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-17-bold-background);\n  --tag-secondary-foreground: var(--salt-category-17-bold-foreground);\n}\n.saltTag-category-18 {\n  --tag-primary-background: var(--salt-category-18-subtle-background);\n  --tag-primary-foreground: var(--salt-category-18-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-18-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-18-bold-background);\n  --tag-secondary-foreground: var(--salt-category-18-bold-foreground);\n}\n.saltTag-category-19 {\n  --tag-primary-background: var(--salt-category-19-subtle-background);\n  --tag-primary-foreground: var(--salt-category-19-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-19-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-19-bold-background);\n  --tag-secondary-foreground: var(--salt-category-19-bold-foreground);\n}\n.saltTag-category-20 {\n  --tag-primary-background: var(--salt-category-20-subtle-background);\n  --tag-primary-foreground: var(--salt-category-20-subtle-foreground);\n  --tag-primary-borderColor: var(--salt-category-20-subtle-borderColor);\n  --tag-secondary-background: var(--salt-category-20-bold-background);\n  --tag-secondary-foreground: var(--salt-category-20-bold-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tag.css.js.map

package/dist-cjs/text/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { type ElementType, type ReactElement, forwardRef } from \"react\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  makePrefixer,\n} from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\"\n      | \"display4\"\n      | \"notation\"\n      | \"action\"\n      | \"code\";\n    /**\n     * Change text color palette\n     * @deprecated Use `color` instead\n     */\n    variant?: \"primary\" | \"secondary\";\n    /*\n     * The color of the text. Defaults to \"primary\".\n     */\n    color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>,\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n  T extends ElementType = \"div\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled = false,\n    maxRows,\n    style,\n    styleAs,\n    variant,\n    color: colorProp,\n    ...restProps\n  }: TextProps<T>,\n  ref?: PolymorphicRef<T>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-text\",\n    css: textCss,\n    window: targetWindow,\n  });\n\n  const Component = as ?? \"div\";\n\n  const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n  const color = variant ?? colorProp ?? \"primary\";\n\n  return (\n    <Component\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"lineClamp\")]: maxRows,\n          [withBaseName(styleAs as string)]: styleAs,\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      {...restProps}\n      ref={ref}\n      style={textStyles}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AAwDA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAE/B,MAAA,IAAA,GAAsBC,gBAAW,CAAA,SAASC,KAGrD,CAAA;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AAExB,EAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA;AAE1D,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AAEtC,EACE,uBAAAC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAiB,CAAC,GAAG,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAU,KAAA;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type ElementType,\n  type ForwardedRef,\n  type FunctionComponent,\n  forwardRef,\n} from \"react\";\nimport {\n  type PolymorphicComponentPropWithRef,\n  type PolymorphicRef,\n  makePrefixer,\n} from \"../utils\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport textCss from \"./Text.css\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\"\n      | \"display4\"\n      | \"notation\"\n      | \"action\"\n      | \"code\";\n    /**\n     * Change text color palette\n     * @deprecated Use `color` instead\n     */\n    variant?: \"primary\" | \"secondary\";\n    /*\n     * The color of the text. Defaults to \"primary\".\n     */\n    color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>,\n) => ReturnType<FunctionComponent>;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n  T extends ElementType = \"div\",\n>(\n  {\n    as,\n    children,\n    className,\n    disabled = false,\n    maxRows,\n    style,\n    styleAs,\n    variant,\n    color: colorProp,\n    ...restProps\n  }: TextProps<T>,\n  ref?: ForwardedRef<unknown>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-text\",\n    css: textCss,\n    window: targetWindow,\n  });\n\n  const Component = as ?? \"div\";\n\n  const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n  const color = variant ?? colorProp ?? \"primary\";\n\n  return (\n    <Component\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"lineClamp\")]: maxRows,\n          [withBaseName(styleAs as string)]: styleAs,\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className,\n      )}\n      {...restProps}\n      ref={ref as PolymorphicRef<T>}\n      style={textStyles}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;AA6DA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAE/B,MAAA,IAAA,GAAsBC,gBAAW,CAAA,SAASC,KAGrD,CAAA;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,YAAY,EAAM,IAAA,KAAA;AAExB,EAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA;AAE1D,EAAM,MAAA,KAAA,GAAQ,WAAW,SAAa,IAAA,SAAA;AAEtC,EACE,uBAAAC,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,WAAW,CAAC,GAAG,OAAA;AAAA,UAC7B,CAAC,YAAA,CAAa,OAAiB,CAAC,GAAG,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAC,GAAG,KAAU,KAAA;AAAA,SACnC;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/theme/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n  | \"accent\"\n  | \"actionable\"\n  | \"container\"\n  | \"draggable\"\n  | \"editable\"\n  | \"focused\"\n  | \"measured\"\n  | \"navigable\"\n  | \"overlayable\"\n  | \"selectable\"\n  | \"separable\"\n  | \"status\"\n  | \"taggable\"\n  | \"target\"\n  | \"text\"\n  | \"differential\" /* **deprecated** */;\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n  themeName: ThemeName,\n  characteristicName: characteristic,\n  variant: string,\n  scopeElement?: HTMLElement,\n): string | null => {\n  const cssVariableName = `--salt-${characteristicName}-${variant}`;\n  const scopeTarget =\n    scopeElement || document.body.querySelector(`.${themeName}`);\n  if (scopeTarget) {\n    const style = getComputedStyle(scopeTarget);\n    const variableValue = style.getPropertyValue(cssVariableName);\n    if (variableValue) {\n      return variableValue;\n    }\n  }\n  return null;\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAA,MAAM,eAAkB,GAAA,CAAA,OAAA,EAAU,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAC/D,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,KAAK,aAAc,CAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA;AAAA;AACT;AAEF,EAAO,OAAA,IAAA;AACT;;;;"}
+{"version":3,"file":"Theme.js","sources":["../src/theme/Theme.ts"],"sourcesContent":["export type characteristic =\n  | \"accent\"\n  | \"actionable\"\n  | \"container\"\n  | \"draggable\" /* **deprecated** */\n  | \"editable\"\n  | \"focused\"\n  | \"measured\"\n  | \"navigable\"\n  | \"overlayable\"\n  | \"selectable\"\n  | \"separable\"\n  | \"status\"\n  | \"taggable\"\n  | \"target\"\n  | \"text\"\n  | \"differential\" /* **deprecated** */;\n\nexport type ThemeName = string;\n\nexport const getCharacteristicValue = (\n  themeName: ThemeName,\n  characteristicName: characteristic,\n  variant: string,\n  scopeElement?: HTMLElement,\n): string | null => {\n  const cssVariableName = `--salt-${characteristicName}-${variant}`;\n  const scopeTarget =\n    scopeElement || document.body.querySelector(`.${themeName}`);\n  if (scopeTarget) {\n    const style = getComputedStyle(scopeTarget);\n    const variableValue = style.getPropertyValue(cssVariableName);\n    if (variableValue) {\n      return variableValue;\n    }\n  }\n  return null;\n};\n"],"names":[],"mappings":";;AAoBO,MAAM,sBAAyB,GAAA,CACpC,SACA,EAAA,kBAAA,EACA,SACA,YACkB,KAAA;AAClB,EAAA,MAAM,eAAkB,GAAA,CAAA,OAAA,EAAU,kBAAkB,CAAA,CAAA,EAAI,OAAO,CAAA,CAAA;AAC/D,EAAA,MAAM,cACJ,YAAgB,IAAA,QAAA,CAAS,KAAK,aAAc,CAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA;AAC7D,EAAA,IAAI,WAAa,EAAA;AACf,IAAM,MAAA,KAAA,GAAQ,iBAAiB,WAAW,CAAA;AAC1C,IAAM,MAAA,aAAA,GAAgB,KAAM,CAAA,gBAAA,CAAiB,eAAe,CAAA;AAC5D,IAAA,IAAI,aAAe,EAAA;AACjB,MAAO,OAAA,aAAA;AAAA;AACT;AAEF,EAAO,OAAA,IAAA;AACT;;;;"}

package/dist-cjs/toast/Toast.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-primary-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n  --toast-borderColor: var(--salt-container-primary-borderColor);\n  --toast-iconColor: var(--salt-content-primary-foreground);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-fixed-100));\n  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n  border-radius: var(--saltToast-borderRadius, var(--salt-palette-corner, 0));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-iconContainer > .saltIcon {\n  margin-top: calc(var(--salt-spacing-75) + calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2));\n  color: var(--toast-iconColor);\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n  --toast-iconColor: var(--salt-status-info-foreground-decorative);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n  --toast-iconColor: var(--salt-status-error-foreground-decorative);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n  --toast-iconColor: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n  --toast-iconColor: var(--salt-status-success-foreground-decorative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Toast.css.js.map

package/dist-cjs/toggle-button/ToggleButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggleButton {\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--salt-size-border, 0);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--salt-size-border, 0));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-actionable-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled);\n  color: var(--toggleButton-text-color-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled-selected);\n  color: var(--toggleButton-text-color-disabled-selected);\n  border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly);\n  color: var(--toggleButton-text-color-readonly);\n  cursor: var(--salt-actionable-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly-selected);\n  color: var(--toggleButton-text-color-readonly-selected);\n  border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-background);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
+var css_248z = ".saltToggleButton {\n  --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n  align-items: center;\n  appearance: none;\n  background: var(--toggleButton-background);\n  border-color: var(--toggleButton-borderColor, transparent);\n  border-style: solid;\n  border-width: var(--toggleButton-borderWidth);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\n  color: var(--toggleButton-text-color);\n  cursor: pointer;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n  margin: 0;\n  min-width: unset;\n  position: relative;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  transition: none;\n  width: auto;\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n  background: var(--toggleButton-background-hover);\n  color: var(--toggleButton-text-color-hover);\n  border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n  background: var(--toggleButton-background-selected);\n  color: var(--toggleButton-text-color-selected);\n  cursor: var(--salt-cursor-active);\n  border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled);\n  color: var(--toggleButton-text-color-disabled);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n  background: var(--toggleButton-background-disabled-selected);\n  color: var(--toggleButton-text-color-disabled-selected);\n  border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly);\n  color: var(--toggleButton-text-color-readonly);\n  cursor: var(--salt-cursor-disabled);\n  border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n  background: var(--toggleButton-background-readonly-selected);\n  color: var(--toggleButton-text-color-readonly-selected);\n  border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n  --toggleButton-background: var(--salt-actionable-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-background);\n  --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n  --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n  --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n  --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-accented-background);\n  --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n  --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n  --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-positive-background);\n  --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n  --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n  --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-negative-background);\n  --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n  --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n  --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n  --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n  --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n  --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --toggleButton-background-selected: var(--salt-actionable-caution-background);\n  --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n  --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n  --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n  --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n  --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n  --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n  --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n  --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButton.css.js.map

package/dist-cjs/toggle-button-group/ToggleButtonGroup.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltToggleButtonGroup {\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
+var css_248z = ".saltToggleButtonGroup {\n  --toggleButtonGroup-borderWidth: var(--salt-size-fixed-100);\n\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--toggleButtonGroup-borderWidth) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--toggleButtonGroup-borderWidth));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-disabled {\n  background: var(--salt-container-primary-background-disabled);\n  border-color: var(--salt-container-primary-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup-readOnly {\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltToggleButtonGroup .saltToggleButton {\n  border-radius: var(--salt-palette-corner-weaker, 0);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-cjs/tooltip/Tooltip.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-primary-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--salt-size-border)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n  --tooltip-status-borderColor: var(--salt-container-primary-borderColor);\n  /* Single line height should be size-base */\n  --tooltip-borderWidth: var(--salt-size-fixed-100);\n  --tooltip-padding: calc(var(--salt-spacing-75) - var(--tooltip-borderWidth)) var(--salt-spacing-100);\n}\n\n.saltTooltip {\n  box-sizing: border-box;\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--tooltip-borderWidth));\n  border-radius: var(--saltTooltip-borderRadius, var(--salt-palette-corner-weak, 0));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-content-primary-foreground));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 60ch);\n  padding: var(--saltTooltip-padding, var(--tooltip-padding));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--salt-spacing-75) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Tooltip.css.js.map

package/dist-cjs/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport {\n  VALIDATION_NAMED_STATUS,\n  type ValidationStatus,\n} from \"../status-indicator\";\nimport {\n  type UseFloatingUIProps,\n  getRefFromChildren,\n  makePrefixer,\n  mergeProps,\n  useFloatingComponent,\n  useForkRef,\n} from \"../utils\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\nimport { type UseTooltipProps, useTooltip } from \"./useTooltip\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   * If no status is provided, icon will also be hidden.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * Optional string to determine the status of the Tooltip.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp = false,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp,\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = disabledProp || formFieldDisabled;\n    const status =\n      statusProp ??\n      (formFieldValidationStatus !== undefined &&\n      VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n        ? formFieldValidationStatus\n        : undefined);\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      disabled,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n      getTooltipPosition,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n    const hasContent = content !== undefined && content !== \"\";\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        <FloatingComponent\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className,\n          )}\n          open={open && !disabled && hasContent}\n          {...getTooltipProps()}\n          ref={floatingRef}\n          {...getTooltipPosition()}\n        >\n          <TooltipBase\n            hideIcon={hideIcon}\n            status={status}\n            content={content}\n            hideArrow={hideArrow}\n            arrowProps={arrowProps}\n          />\n        </FloatingComponent>\n      </>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","VALIDATION_NAMED_STATUS","useFloatingComponent","useTooltip","useForkRef","getRefFromChildren","jsxs","Fragment","isValidElement","cloneElement","mergeProps","jsx","clsx","TooltipBase"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAgDxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACb,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA;AAAA,QAChBC,mCAAkB,EAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA;AACjC,IAAM,MAAA,MAAA,GACJ,eACC,yBAA8B,KAAA,MAAA,IAC/BC,yCAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,MAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,kCAAqB,EAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA,CAAWC,qCAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,IAAM,MAAA,WAAA,GAAcD,qBAA2B,CAAA,QAAA,EAAU,GAAG,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,MAAA,IAAa,OAAY,KAAA,EAAA;AAExD,IAAA,uBAEKE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAeC,oBAAA,CAAA,QAAQ,CACtB,IAAAC,kBAAA,CAAa,QAAU,EAAA;AAAA,QACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,QAC/C,GAAK,EAAA;AAAA,OACN,CAAA;AAAA,sBAEHC,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAAC,SAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,YACvC;AAAA,WACF;AAAA,UACA,IAAA,EAAM,IAAQ,IAAA,CAAC,QAAY,IAAA,UAAA;AAAA,UAC1B,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAA,kBAAAD,cAAA;AAAA,YAACE,uBAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,MAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  type HTMLAttributes,\n  type ReactNode,\n  type Ref,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\n\nimport {\n  VALIDATION_NAMED_STATUS,\n  type ValidationStatus,\n} from \"../status-indicator\";\nimport {\n  type UseFloatingUIProps,\n  getRefFromChildren,\n  makePrefixer,\n  mergeProps,\n  useFloatingComponent,\n  useForkRef,\n} from \"../utils\";\n\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\nimport { type UseTooltipProps, useTooltip } from \"./useTooltip\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   * If no status is provided, icon will also be hidden.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * Optional string to determine the status of the Tooltip.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden. Defaults to 300ms.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp = false,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp,\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = disabledProp || formFieldDisabled;\n    const status =\n      statusProp ??\n      (formFieldValidationStatus !== undefined &&\n      VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n        ? formFieldValidationStatus\n        : undefined);\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      disabled,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n      getTooltipPosition,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n    const hasContent = content !== undefined && content !== \"\";\n\n    return (\n      <>\n        {isValidElement<{ ref?: Ref<unknown> }>(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        <FloatingComponent\n          className={clsx(\n            withBaseName(),\n            { [withBaseName(status ?? \"\")]: status },\n            className,\n          )}\n          open={open && !disabled && hasContent}\n          {...getTooltipProps()}\n          ref={floatingRef}\n          {...getTooltipPosition()}\n        >\n          <TooltipBase\n            hideIcon={hideIcon}\n            status={status}\n            content={content}\n            hideArrow={hideArrow}\n            arrowProps={arrowProps}\n          />\n        </FloatingComponent>\n      </>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useFormFieldProps","VALIDATION_NAMED_STATUS","useFloatingComponent","useTooltip","useForkRef","getRefFromChildren","jsxs","Fragment","isValidElement","cloneElement","mergeProps","jsx","clsx","TooltipBase"],"mappings":";;;;;;;;;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAgDxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACb,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA;AAAA,QAChBC,mCAAkB,EAAA;AAEtB,IAAA,MAAM,WAAW,YAAgB,IAAA,iBAAA;AACjC,IAAM,MAAA,MAAA,GACJ,eACC,yBAA8B,KAAA,MAAA,IAC/BC,yCAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,MAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAIC,kCAAqB,EAAA;AAE9D,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG;AAAA,KACL;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA,CAAWC,qCAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,IAAM,MAAA,WAAA,GAAcD,qBAA2B,CAAA,QAAA,EAAU,GAAG,CAAA;AAC5D,IAAM,MAAA,UAAA,GAAa,OAAY,KAAA,MAAA,IAAa,OAAY,KAAA,EAAA;AAExD,IAAA,uBAEKE,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,MAAuCC,oBAAA,CAAA,QAAQ,CAC9C,IAAAC,kBAAA,CAAa,QAAU,EAAA;AAAA,QACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,QAC/C,GAAK,EAAA;AAAA,OACN,CAAA;AAAA,sBAEHC,cAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAW,EAAAC,SAAA;AAAA,YACT,YAAa,EAAA;AAAA,YACb,EAAE,CAAC,YAAA,CAAa,UAAU,EAAE,CAAC,GAAG,MAAO,EAAA;AAAA,YACvC;AAAA,WACF;AAAA,UACA,IAAA,EAAM,IAAQ,IAAA,CAAC,QAAY,IAAA,UAAA;AAAA,UAC1B,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAA,kBAAAD,cAAA;AAAA,YAACE,uBAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,MAAA;AAAA,cACA,OAAA;AAAA,cACA,SAAA;AAAA,cACA;AAAA;AAAA;AACF;AAAA;AACF,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}

package/dist-es/accordion/Accordion.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltAccordion {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltAccordion-error {\n  border-top-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordion-warning {\n  border-top-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordion-success {\n  border-top-color: var(--salt-status-success-borderColor);\n}\n\n.saltAccordion-disabled {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n";
+var css_248z = ".saltAccordion {\n  border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltAccordion-error {\n  border-top-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordion-warning {\n  border-top-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordion-success {\n  border-top-color: var(--salt-status-success-borderColor);\n}\n\n.saltAccordion-disabled {\n  border-top-color: var(--salt-separable-tertiary-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Accordion.css.js.map

package/dist-es/accordion/AccordionGroup.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltAccordionGroup {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n";
+var css_248z = ".saltAccordionGroup {\n  border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=AccordionGroup.css.js.map

package/dist-es/accordion/AccordionHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: transparent;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: transparent;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n";
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: transparent;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader-content {\n  padding: var(--salt-spacing-75) 0;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.saltAccordionHeader .saltAccordionHeader-icon {\n  height: var(--salt-size-base);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  height: var(--salt-size-base);\n  margin-left: auto;\n}\n\n.saltAccordionHeader:disabled {\n  background: transparent;\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=AccordionHeader.css.js.map