@salt-ds/core 1.35.0 → 1.36.0

package/dist-cjs/button/Button.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n  --button-borderColor: var(--salt-actionable-cta-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-cta-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-cta-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-cta-borderColor-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n  --button-borderColor: var(--salt-actionable-primary-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-primary-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-primary-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-primary-borderColor-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n  --button-borderColor: var(--salt-actionable-secondary-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-secondary-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-secondary-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-secondary-borderColor-disabled);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0));\n  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton: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(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n";
+var css_248z = ".saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0));\n  border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0))));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton: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(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n  border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n  border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n\n.saltButton-accented.saltButton-solid {\n  --button-text-color: var(--salt-actionable-accented-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-bold-background);\n  --button-background-active: var(--salt-actionable-accented-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n  --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n  --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-accented-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-background);\n  --button-background-hover: var(--salt-actionable-accented-background-hover);\n  --button-background-active: var(--salt-actionable-accented-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n  --button-borderColor: var(--salt-actionable-accented-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-accented-subtle-background);\n  --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-solid {\n  --button-text-color: var(--salt-actionable-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-bold-background);\n  --button-background-hover: var(--salt-actionable-bold-background-hover);\n  --button-background-active: var(--salt-actionable-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-foreground);\n  --button-text-color-hover: var(--salt-actionable-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n  --button-background: var(--salt-actionable-background);\n  --button-background-hover: var(--salt-actionable-background-hover);\n  --button-background-active: var(--salt-actionable-background-active);\n  --button-background-disabled: var(--salt-actionable-background-disabled);\n  --button-borderColor: var(--salt-actionable-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-subtle-background);\n  --button-background-hover: var(--salt-actionable-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-solid {\n  --button-text-color: var(--salt-actionable-negative-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-bold-background);\n  --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n  --button-background-active: var(--salt-actionable-negative-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-negative-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-background);\n  --button-background-hover: var(--salt-actionable-negative-background-hover);\n  --button-background-active: var(--salt-actionable-negative-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-negative-subtle-background);\n  --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-solid {\n  --button-text-color: var(--salt-actionable-positive-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-bold-background);\n  --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n  --button-background-active: var(--salt-actionable-positive-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-positive-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-background);\n  --button-background-hover: var(--salt-actionable-positive-background-hover);\n  --button-background-active: var(--salt-actionable-positive-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-positive-subtle-background);\n  --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-solid {\n  --button-text-color: var(--salt-actionable-caution-bold-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-bold-background);\n  --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n  --button-background-active: var(--salt-actionable-caution-bold-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n  --button-text-color: var(--salt-actionable-caution-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-background);\n  --button-background-hover: var(--salt-actionable-caution-background-hover);\n  --button-background-active: var(--salt-actionable-caution-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n  --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n  --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n  --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n  --button-background: var(--salt-actionable-caution-subtle-background);\n  --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n  --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n  --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n  --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n  --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n  --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n  --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Button.css.js.map

package/dist-cjs/button/Button.js

@@ -112,6 +112,28 @@ var Button$1 = require('./Button.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltButton");
 const ButtonVariantValues = ["primary", "secondary", "cta"];
+const ButtonAppearanceValues = [
+  "solid",
+  "bordered",
+  "transparent"
+];
+const ButtonSentimentValues = [
+  "accented",
+  "neutral",
+  "positive",
+  "negative",
+  "caution"
+];
+function variantToAppearanceAndColor(variant) {
+  switch (variant) {
+    case "primary":
+      return { appearance: "solid", sentiment: "neutral" };
+    case "secondary":
+      return { appearance: "transparent", sentiment: "neutral" };
+    case "cta":
+      return { appearance: "solid", sentiment: "accented" };
+  }
+}
 const Button = React.forwardRef(
   function Button2({
     children,
@@ -122,10 +144,13 @@ const Button = React.forwardRef(
     onKeyDown,
     onBlur,
     onClick,
+    appearance: appearanceProp,
+    sentiment: sentimentProp,
     type = "button",
     variant = "primary",
     ...restProps
   }, ref) {
+    var _a, _b;
     const { active, buttonProps } = useButton.useButton({
       disabled,
       focusableWhenDisabled,
@@ -140,6 +165,9 @@ const Button = React.forwardRef(
       css: Button$1,
       window: targetWindow
     });
+    const mapped = variantToAppearanceAndColor(variant);
+    const appearance = (_a = appearanceProp != null ? appearanceProp : mapped.appearance) != null ? _a : "solid";
+    const sentiment = (_b = sentimentProp != null ? sentimentProp : mapped.sentiment) != null ? _b : "neutral";
     const { tabIndex, ...restButtonProps } = buttonProps;
     return /* @__PURE__ */ jsxRuntime.jsx("button", {
       ...restButtonProps,
@@ -148,7 +176,9 @@ const Button = React.forwardRef(
         withBaseName(variant),
         {
           [withBaseName("disabled")]: disabled,
-          [withBaseName("active")]: active
+          [withBaseName("active")]: active,
+          [withBaseName(appearance)]: appearance,
+          [withBaseName(sentiment)]: sentiment
         },
         className
       ),
@@ -161,5 +191,7 @@ const Button = React.forwardRef(
 );
 
 exports.Button = Button;
+exports.ButtonAppearanceValues = ButtonAppearanceValues;
+exports.ButtonSentimentValues = ButtonSentimentValues;
 exports.ButtonVariantValues = ButtonVariantValues;
 //# sourceMappingURL=Button.js.map

package/dist-cjs/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n  /**\n   * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n   * 'primary' is the default value.\n   */\n  variant?: ButtonVariant;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n      type = \"button\",\n      variant = \"primary\",\n      ...restProps\n    },\n    ref?,\n  ): ReactElement<ButtonProps> {\n    const { active, buttonProps } = useButton({\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n    });\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-button\",\n      css: buttonCss,\n      window: targetWindow,\n    });\n\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    const { tabIndex, ...restButtonProps } = buttonProps;\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"active\")]: active,\n          },\n          className,\n        )}\n        {...restProps}\n        ref={ref}\n        type={type}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,MAAM,YAAA,GAAeA,0BAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,mBAAsB,GAAA,CAAC,SAAW,EAAA,WAAA,EAAa,KAAK,EAAA;AAmB1D,MAAM,MAAS,GAAAC,gBAAA;AAAA,EACpB,SAASC,OACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,SAAA;AAAA,KAEL,GAC2B,EAAA;AAC3B,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAY,EAAA,GAAIC,mBAAU,CAAA;AAAA,MACxC,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,KACD,CAAA,CAAA;AAED,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,aAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAID,IAAM,MAAA,EAAE,QAAa,EAAA,GAAA,eAAA,EAAoB,GAAA,WAAA,CAAA;AACzC,IAAA,uBACGC,cAAA,CAAA,QAAA,EAAA;AAAA,MACE,GAAG,eAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,OAAO,CAAA;AAAA,QACpB;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,SAC5B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,IAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;;"}
+{"version":3,"file":"Button.js","sources":["../src/button/Button.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  forwardRef,\n} from \"react\";\nimport { makePrefixer } from \"../utils\";\n\nimport buttonCss from \"./Button.css\";\nimport { useButton } from \"./useButton\";\n\nconst withBaseName = makePrefixer(\"saltButton\");\n\nexport const ButtonVariantValues = [\"primary\", \"secondary\", \"cta\"] as const;\nexport const ButtonAppearanceValues = [\n  \"solid\",\n  \"bordered\",\n  \"transparent\",\n] as const;\nexport const ButtonSentimentValues = [\n  \"accented\",\n  \"neutral\",\n  \"positive\",\n  \"negative\",\n  \"caution\",\n] as const;\nexport type ButtonVariant = (typeof ButtonVariantValues)[number];\nexport type ButtonAppearance = (typeof ButtonAppearanceValues)[number];\nexport type ButtonSentiment = (typeof ButtonSentimentValues)[number];\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n  /**\n   * The variant to use. Options are 'primary', 'secondary' and 'cta'.\n   * 'primary' is the default value.\n   *\n   * @deprecated Use `appearance` and `sentiment` instead.\n   *\n   * | variant     | appearance    | sentiment   |\n   * | ----------- | ------------- | ----------- |\n   * | `cta`       | `solid`       | `accented`  |\n   * | `primary`   | `solid`       | `neutral`   |\n   * | `secondary` | `transparent` | `neutral`   |\n   */\n  variant?: ButtonVariant;\n  /**\n   * The appearance of the button. Options are 'solid', 'bordered', and 'transparent'.\n   * 'solid' is the default value.\n   *\n   * @since 1.36.0.\n   */\n  appearance?: ButtonAppearance;\n  /**\n   * The sentiment of the button. Options are 'accented', 'neutral', 'positive', 'negative' and 'caution'.\n   * 'neutral' is the default value.\n   *\n   * @since 1.36.0.\n   */\n  sentiment?: ButtonSentiment;\n}\n\nfunction variantToAppearanceAndColor(\n  variant: ButtonVariant,\n): Pick<ButtonProps, \"appearance\" | \"sentiment\"> {\n  switch (variant) {\n    case \"primary\":\n      return { appearance: \"solid\", sentiment: \"neutral\" };\n    case \"secondary\":\n      return { appearance: \"transparent\", sentiment: \"neutral\" };\n    case \"cta\":\n      return { appearance: \"solid\", sentiment: \"accented\" };\n  }\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  function Button(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n      appearance: appearanceProp,\n      sentiment: sentimentProp,\n      type = \"button\",\n      variant = \"primary\",\n      ...restProps\n    },\n    ref?,\n  ): ReactElement<ButtonProps> {\n    const { active, buttonProps } = useButton({\n      disabled,\n      focusableWhenDisabled,\n      onKeyUp,\n      onKeyDown,\n      onBlur,\n      onClick,\n    });\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-button\",\n      css: buttonCss,\n      window: targetWindow,\n    });\n\n    const mapped = variantToAppearanceAndColor(variant);\n    const appearance: ButtonAppearance =\n      appearanceProp ?? mapped.appearance ?? \"solid\";\n    const sentiment: ButtonSentiment =\n      sentimentProp ?? mapped.sentiment ?? \"neutral\";\n\n    // we do not want to spread tab index in this case because the button element\n    // does not require tabindex=\"0\" attribute\n    const { tabIndex, ...restButtonProps } = buttonProps;\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"active\")]: active,\n            [withBaseName(appearance)]: appearance,\n            [withBaseName(sentiment)]: sentiment,\n          },\n          className,\n        )}\n        {...restProps}\n        ref={ref}\n        type={type}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Button","useButton","useWindow","useComponentCssInjection","buttonCss","jsx","clsx"],"mappings":"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"}

package/dist-cjs/checkbox/Checkbox.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: inline-flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n  box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltCheckbox {\n  display: inline-flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltCheckbox-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltCheckbox-input,\n.saltCheckboxIcon {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to the icon component if focused */\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--saltCheckbox-outline, var(--salt-focused-outline));\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n\n/* Styles applied to input element */\n.saltCheckbox-input {\n  cursor: inherit;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Checkbox.css.js.map

package/dist-cjs/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  type InputHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport {\n  makePrefixer,\n  useControlled,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * If `true`, the checkbox will be in the error state.\n   */\n  error?: boolean;\n  /**\n   * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n   */\n  indeterminate?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>>;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * Checkbox has styling variants for \"error\" and \"warning\".\n   * No visual styling will be applied on \"success\" variant.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled: disabledProp,\n      error,\n      indeterminate,\n      inputProps = {},\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      validationStatus: validationStatusProp,\n      readOnly: readOnlyProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-checkbox\",\n      css: checkboxCss,\n      window: targetWindow,\n    });\n    const checkboxGroup = useCheckboxGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const checkboxGroupChecked =\n      checkedProp ??\n      (checkboxGroup?.checkedValues && value\n        ? checkboxGroup.checkedValues.includes(value)\n        : checkedProp);\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkboxGroupChecked,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled =\n      checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n    const readOnly =\n      checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n    const validationStatus = !disabled\n      ? checkboxGroup?.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp\n      : undefined;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented || readOnly) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      inputOnChange?.(event);\n      checkboxGroup?.onChange?.(event);\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (inputRef.current != null) {\n        inputRef.current.indeterminate = indeterminate ?? false;\n      }\n    }, [indeterminate]);\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(\"error\")]: error /* **Deprecated** */,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-readonly={readOnly || undefined}\n          aria-describedby={clsx(\n            checkboxGroup === undefined\n              ? formFieldA11yProps?.[\"aria-describedby\"]\n              : undefined,\n            inputDescribedBy,\n          )}\n          aria-labelledby={clsx(\n            checkboxGroup === undefined\n              ? formFieldA11yProps?.[\"aria-labelledby\"]\n              : undefined,\n            inputLabelledBy,\n          )}\n          name={name}\n          value={value}\n          checked={checked}\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          readOnly={readOnly}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n          ref={inputRef}\n          {...restInputProps}\n        />\n        <CheckboxIcon\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          indeterminate={indeterminate}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","useRef","_a","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  type InputHTMLAttributes,\n  type ReactNode,\n  forwardRef,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport type { AdornmentValidationStatus } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport {\n  makePrefixer,\n  useControlled,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { CheckboxIcon } from \"./CheckboxIcon\";\nimport { useCheckboxGroup } from \"./internal/useCheckboxGroup\";\n\nimport checkboxCss from \"./Checkbox.css\";\n\nconst withBaseName = makePrefixer(\"saltCheckbox\");\nexport interface CheckboxProps\n  extends Omit<\n    InputHTMLAttributes<HTMLLabelElement>,\n    \"onChange\" | \"onBlur\" | \"onFocus\"\n  > {\n  /**\n   * If `true`, the checkbox will be checked.\n   */\n  checked?: boolean;\n  /**\n   * Whether the checkbox component is checked by default\n   * This will be disregarded if checked is already set.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true`, the checkbox will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * **Deprecated**: Use validationStatus instead\n   * If `true`, the checkbox will be in the error state.\n   */\n  error?: boolean;\n  /**\n   * If true, the checkbox appears indeterminate. A data-indeterminate attribute is set on the input.\n   */\n  indeterminate?: boolean;\n  /**\n   * Properties applied to the input element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * The label to be shown next to the checkbox.\n   */\n  label?: ReactNode;\n  /**\n   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * Callback when checkbox loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checked state is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /**\n   * Callback when checkbox gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The value of the checkbox.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"warning\" | \"error\" | \"success\"\n   *\n   * Checkbox has styling variants for \"error\" and \"warning\".\n   * No visual styling will be applied on \"success\" variant.\n   */\n  validationStatus?: AdornmentValidationStatus;\n}\n\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  function Checkbox(\n    {\n      checked: checkedProp,\n      className,\n      defaultChecked,\n      disabled: disabledProp,\n      error,\n      indeterminate,\n      inputProps = {},\n      label,\n      name,\n      onBlur,\n      onChange,\n      onFocus,\n      value,\n      validationStatus: validationStatusProp,\n      readOnly: readOnlyProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-checkbox\",\n      css: checkboxCss,\n      window: targetWindow,\n    });\n    const checkboxGroup = useCheckboxGroup();\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onChange: inputOnChange,\n      ...restInputProps\n    } = inputProps;\n\n    const checkboxGroupChecked =\n      checkedProp ??\n      (checkboxGroup?.checkedValues && value\n        ? checkboxGroup.checkedValues.includes(value)\n        : checkedProp);\n\n    const [checked, setChecked] = useControlled({\n      controlled: checkboxGroupChecked,\n      default: Boolean(defaultChecked),\n      name: \"Checkbox\",\n      state: \"checked\",\n    });\n\n    const {\n      a11yProps: formFieldA11yProps,\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled =\n      checkboxGroup?.disabled || formFieldDisabled || disabledProp;\n    const readOnly =\n      checkboxGroup?.readOnly || formFieldReadOnly || readOnlyProp;\n    const validationStatus = !disabled\n      ? (checkboxGroup?.validationStatus ??\n        formFieldValidationStatus ??\n        validationStatusProp)\n      : undefined;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      // Workaround for https://github.com/facebook/react/issues/9023\n      if (event.nativeEvent.defaultPrevented || readOnly) {\n        return;\n      }\n\n      const value = event.target.checked;\n      setChecked(value);\n      onChange?.(event);\n      inputOnChange?.(event);\n      checkboxGroup?.onChange?.(event);\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (inputRef.current != null) {\n        inputRef.current.indeterminate = indeterminate ?? false;\n      }\n    }, [indeterminate]);\n\n    return (\n      <label\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"readOnly\")]: readOnly,\n            [withBaseName(\"error\")]: error /* **Deprecated** */,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          },\n          className,\n        )}\n        ref={ref}\n        {...rest}\n      >\n        <input\n          aria-readonly={readOnly || undefined}\n          aria-describedby={clsx(\n            checkboxGroup === undefined\n              ? formFieldA11yProps?.[\"aria-describedby\"]\n              : undefined,\n            inputDescribedBy,\n          )}\n          aria-labelledby={clsx(\n            checkboxGroup === undefined\n              ? formFieldA11yProps?.[\"aria-labelledby\"]\n              : undefined,\n            inputLabelledBy,\n          )}\n          name={name}\n          value={value}\n          checked={checked}\n          className={clsx(withBaseName(\"input\"), inputClassName)}\n          data-indeterminate={indeterminate}\n          defaultChecked={defaultChecked}\n          disabled={disabled}\n          readOnly={readOnly}\n          onBlur={onBlur}\n          onChange={handleChange}\n          onFocus={onFocus}\n          type=\"checkbox\"\n          ref={inputRef}\n          {...restInputProps}\n        />\n        <CheckboxIcon\n          checked={checked}\n          disabled={disabled}\n          readOnly={readOnly}\n          indeterminate={indeterminate}\n          validationStatus={validationStatus}\n          error={error}\n        />\n        {label}\n      </label>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Checkbox","useWindow","useComponentCssInjection","checkboxCss","useCheckboxGroup","useControlled","useFormFieldProps","useRef","_a","value","useIsomorphicLayoutEffect","jsxs","clsx","jsx","CheckboxIcon"],"mappings":"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"}

package/dist-cjs/checkbox/CheckboxIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltCheckboxIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-cjs/dialog/DialogContent.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n  background: var(--salt-container-primary-background);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  box-shadow: none;\n  flex: 1;\n}\n\n.saltDialogContent-scroll {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
+var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n  background: var(--salt-container-primary-background);\n\n  margin-left: var(--salt-spacing-200);\n  margin-right: var(--salt-spacing-300);\n  padding-left: var(--salt-spacing-100);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  box-shadow: none;\n  /* auto is needed for support on Safari, due to webkit bugs with flex */\n  flex: 1 1 auto;\n}\n\n.saltDialogContent-scroll {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-scroll);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=DialogContent.css.js.map

package/dist-cjs/dropdown/Dropdown.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltDropdown {\n  --dropdown-border: none;\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-cursor: var(--salt-selectable-cursor-hover);\n  --dropdown-borderStyle: var(--salt-editable-borderStyle);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n  --dropdown-borderWidth: var(--salt-size-border);\n}\n\n.saltDropdown {\n  all: unset;\n  box-sizing: border-box;\n  min-width: 4em;\n  width: 100%;\n  background: var(--dropdown-background);\n  cursor: var(--dropdown-cursor);\n  min-height: var(--salt-size-base);\n  border: var(--dropdown-border);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  gap: var(--salt-spacing-100);\n  color: var(--dropdown-color);\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  letter-spacing: var(--salt-text-letterSpacing);\n  position: relative;\n  overflow: hidden;\n}\n\n.saltDropdown:hover {\n  --dropdown-borderColor: var(--salt-editable-borderColor-hover);\n  --dropdown-borderStyle: var(--salt-editable-borderStyle-hover);\n  --dropdown-background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));\n}\n\n.saltDropdown:active {\n  --dropdown-background: var(--saltDropdown-background-active, var(--dropdown-background-active));\n  --dropdown-borderColor: var(--salt-editable-borderColor-active);\n  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);\n  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);\n}\n\n.saltDropdown:focus {\n  outline: var(--salt-focused-outline);\n  --dropdown-borderColor: var(--salt-editable-borderColor-active);\n  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);\n  --dropdown-borderStyle: var(--salt-editable-borderStyle-active);\n}\n\n.saltDropdown-content {\n  flex: 1;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-wrap: nowrap;\n}\n\n.saltDropdown-placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n.saltDropdown-primary {\n  --dropdown-background: var(--salt-editable-primary-background);\n  --dropdown-background-active: var(--salt-editable-primary-background-active);\n  --dropdown-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n.saltDropdown-secondary {\n  --dropdown-background: var(--salt-editable-secondary-background);\n  --dropdown-background-active: var(--salt-editable-secondary-background-active);\n  --dropdown-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n.saltDropdown:disabled,\n.saltDropdown:disabled:active,\n.saltDropdown:disabled:hover,\n.saltDropdown:disabled:focus {\n  --dropdown-background: var(--dropdown-background-disabled);\n  --dropdown-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdown-color: var(--salt-content-primary-foreground-disabled);\n  --dropdown-cursor: var(--salt-selectable-cursor-disabled);\n  --dropdown-borderWidth: var(--salt-size-border);\n}\n\n.saltDropdown[aria-readonly=\"true\"] {\n  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdown-color: var(--salt-content-primary-foreground);\n  --dropdown-cursor: var(--salt-selectable-cursor-readonly);\n  --dropdown-background: var(--dropdown-background-readonly);\n  --dropdown-borderWidth: var(--salt-size-border);\n}\n\n.saltDropdown[aria-readonly=\"true\"]:hover,\n.saltDropdown[aria-readonly=\"true\"]:focus {\n  --dropdown-background: var(--dropdown-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-error,\n.saltDropdown-error:hover,\n.saltDropdown-error:focus {\n  --dropdown-background: var(--salt-status-error-background);\n  --dropdown-borderColor: var(--salt-status-error-borderColor);\n  --dropdown-background-active: var(--salt-status-error-background);\n  --dropdown-background-hover: var(--salt-status-error-background);\n  --dropdown-background-readonly: var(--salt-status-error-background);\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltDropdown-warning,\n.saltDropdown-warning:hover,\n.saltDropdown-warning:focus {\n  --dropdown-background: var(--salt-status-warning-background);\n  --dropdown-borderColor: var(--salt-status-warning-borderColor);\n  --dropdown-background-active: var(--salt-status-warning-background);\n  --dropdown-background-hover: var(--salt-status-warning-background);\n  --dropdown-background-readonly: var(--salt-status-warning-background);\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdown-success,\n.saltDropdown-success:hover,\n.saltDropdown-success:focus {\n  --dropdown-background: var(--salt-status-success-background);\n  --dropdown-borderColor: var(--salt-status-success-borderColor);\n  --dropdown-background-active: var(--salt-status-success-background);\n  --dropdown-background-hover: var(--salt-status-success-background);\n  --dropdown-background-readonly: var(--salt-status-success-background);\n  outline-color: var(--salt-status-success-borderColor);\n}\n\n.saltDropdown-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--dropdown-borderWidth) var(--dropdown-borderStyle) var(--dropdown-borderColor);\n}\n\n.saltDropdown-bordered {\n  --dropdown-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--dropdown-borderColor);\n  --dropdown-borderWidth: 0;\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown:focus,\n.saltDropdown-bordered:active {\n  --dropdown-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDropdown-bordered[aria-readonly=\"true\"],\n.saltDropdown-bordered[aria-readonly=\"true\"]:hover,\n.saltDropdown[aria-readonly=\"true\"]:focus,\n.saltDropdown-bordered.saltDropdown:disabled,\n.saltDropdown-bordered.saltDropdown:disabled:hover {\n  --dropdown-borderWidth: 0;\n}\n";
+var css_248z = ".saltDropdown {\n  all: unset;\n  box-sizing: border-box;\n  min-width: 4em;\n  width: 100%;\n  background: var(--dropdown-background);\n  cursor: var(--dropdown-cursor);\n  min-height: var(--salt-size-base);\n  border: var(--dropdown-border);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  display: inline-flex;\n  align-items: center;\n  padding: 0 var(--salt-spacing-100);\n  gap: var(--salt-spacing-100);\n  color: var(--dropdown-color);\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  letter-spacing: var(--salt-text-letterSpacing);\n  position: relative;\n  overflow: hidden;\n}\n\n.saltDropdown:hover {\n  background: var(--saltDropdown-background-hover, var(--dropdown-background-hover));\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdown-bordered.saltDropdown {\n  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);\n}\n\n.saltDropdown-bordered.saltDropdown:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\n  border-color: var(--dropdown-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown:focus,\n.saltDropdown-bordered.saltDropdown:focus:hover {\n  border-style: var(--salt-editable-borderStyle-active);\n  border-color: var(--dropdown-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"],\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"]:hover {\n  border-style: var(--salt-editable-borderStyle-readonly);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-bordered.saltDropdown-disabled,\n.saltDropdown-bordered.saltDropdown-disabled:hover {\n  border-style: var(--salt-editable-borderStyle-disabled);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--dropdown-borderColor);\n}\n\n.saltDropdown:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\n  border-bottom-color: var(--dropdown-borderColor-hover);\n}\n\n.saltDropdown:focus .saltDropdown-activationIndicator,\n.saltDropdown:focus:hover .saltDropdown-activationIndicator {\n  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--dropdown-borderColor-active);\n}\n\n.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown[aria-readonly=\"true\"]:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltDropdown-disabled .saltDropdown-activationIndicator,\n.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-disabled);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltDropdown-bordered .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown[aria-readonly=\"true\"] .saltDropdown-activationIndicator,\n.saltDropdown-bordered.saltDropdown-disabled:hover .saltDropdown-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltDropdown-bordered.saltDropdown:focus .saltDropdown-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));\n}\n\n.saltDropdown-primary {\n  --dropdown-background: var(--salt-editable-primary-background);\n  --dropdown-background-active: var(--salt-editable-primary-background-active);\n  --dropdown-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdown-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-primary-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-secondary {\n  --dropdown-background: var(--salt-editable-secondary-background);\n  --dropdown-background-active: var(--salt-editable-secondary-background-active);\n  --dropdown-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdown-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdown-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --dropdown-borderColor: var(--salt-editable-borderColor);\n  --dropdown-borderColor-active: var(--salt-editable-borderColor-active);\n  --dropdown-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --dropdown-outlineColor: var(--salt-focused-outlineColor);\n}\n\n.saltDropdown-error {\n  --dropdown-background: var(--salt-status-error-background);\n  --dropdown-background-active: var(--salt-status-error-background);\n  --dropdown-background-hover: var(--salt-status-error-background);\n  --dropdown-background-readonly: var(--salt-status-error-background);\n  --dropdown-borderColor: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-error-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-error-borderColor);\n  --dropdown-outlineColor: var(--salt-status-error-borderColor);\n}\n\n.saltDropdown-warning {\n  --dropdown-background: var(--salt-status-warning-background);\n  --dropdown-background-active: var(--salt-status-warning-background);\n  --dropdown-background-hover: var(--salt-status-warning-background);\n  --dropdown-background-readonly: var(--salt-status-warning-background);\n  --dropdown-borderColor: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-warning-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-warning-borderColor);\n  --dropdown-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n.saltDropdown-success {\n  --dropdown-background: var(--salt-status-success-background);\n  --dropdown-background-active: var(--salt-status-success-background);\n  --dropdown-background-hover: var(--salt-status-success-background);\n  --dropdown-background-readonly: var(--salt-status-success-background);\n  --dropdown-borderColor: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-active: var(--salt-status-success-borderColor);\n  --dropdown-borderColor-hover: var(--salt-status-success-borderColor);\n  --dropdown-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltDropdown:focus,\n.saltDropdown:focus:hover {\n  background: var(--dropdown-background-active);\n  cursor: var(--salt-selectable-cursor-hover);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--dropdown-outlineColor);\n}\n\n.saltDropdown.saltDropdown[aria-readonly=\"true\"] {\n  background: var(--dropdown-background-readonly);\n  cursor: var(--salt-selectable-cursor-readonly);\n}\n\n.saltDropdown.saltDropdown:disabled,\n.saltDropdown.saltDropdown:disabled:hover {\n  background: var(--dropdown-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltDropdown-content {\n  flex: 1;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  text-wrap: nowrap;\n}\n\n.saltDropdown-placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Dropdown.css.js.map

package/dist-cjs/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n  type ListControlProps,\n  defaultValueToString,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  type UseFloatingUIProps,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport type DropdownProps<Item = string> = {\n  /**\n   * If `true`, the dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the dropdown will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The options to display in the dropdown.\n   */\n  children?: ReactNode;\n  /**\n   * The marker to use in an empty read only dropdown.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * If `true`, the dropdown will be multiselect.\n   */\n  multiselect?: boolean;\n  /**\n   * The text shown when the dropdown has no value.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the dropdown will be required.\n   */\n  required?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"error\" | \"warning\" | \"success\".\n   */\n  validationStatus?: Exclude<ValidationStatus, \"info\">;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n  ListControlProps<Item>;\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n  return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n  props: DropdownProps<Item>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    children,\n    className,\n    disabled: disabledProp,\n    emptyReadOnlyMarker = \"—\",\n    readOnly: readOnlyProp,\n    multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    value,\n    onOpenChange,\n    open,\n    placeholder,\n    startAdornment,\n    required: requiredProp,\n    variant = \"primary\",\n    validationStatus: validationStatusProp,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    valueToString = defaultValueToString,\n    bordered = false,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown\",\n    css: dropdownCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n  const required = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : undefined ?? requiredProp;\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n  } = listControl;\n\n  const selectedValue = selectedState\n    .map((item) => valueToString(item))\n    .join(\", \");\n  const isEmptyReadOnly = readOnly && selectedValue === \"\";\n  const valueText = isEmptyReadOnly\n    ? emptyReadOnlyMarker\n    : value ?? selectedValue;\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n  };\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && Children.count(children) > 0,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context),\n  ]);\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n  const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>();\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (!newOption) {\n      newOption = getOptionFromSearch(typeaheadString.current);\n    }\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    const activeOption = activeState ?? getFirstOption().data;\n\n    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n      null;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n      case \" \":\n        if (\n          (openState && Boolean(activeState?.disabled)) ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        break;\n      case \"Tab\":\n        if (!multiselect && activeState) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(false);\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n    }\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleFocusButton = () => {\n    buttonRef.current?.focus();\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > 0) {\n      return;\n    }\n\n    // If the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getFirstOption();\n    }\n\n    setActive(newActive?.data);\n  }, [openState, children]);\n\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <button\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n            [withBaseName(\"bordered\")]: bordered,\n          },\n          className,\n        )}\n        ref={handleButtonRef}\n        role=\"combobox\"\n        type=\"button\"\n        disabled={disabled}\n        aria-readonly={readOnly ? \"true\" : undefined}\n        aria-required={required ? \"true\" : undefined}\n        aria-expanded={openState}\n        aria-activedescendant={activeState?.id}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        aria-multiselectable={multiselect}\n        aria-controls={openState ? listId : undefined}\n        {...getReferenceProps({\n          onKeyDown: handleKeyDown,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          ...rest,\n        })}\n      >\n        {startAdornment}\n        <span\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"placeholder\")]: !valueText,\n          })}\n        >\n          {!valueText ? placeholder : valueText}\n        </span>\n        {validationStatus && <StatusAdornment status={validationStatus} />}\n        {!readOnly && <ExpandIcon open={openState} />}\n        <div className={withBaseName(\"activationIndicator\")} />\n      </button>\n      <OptionList\n        open={\n          (openState || focusedState) &&\n          !readOnly &&\n          Children.count(children) > 0\n        }\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusButton,\n          onClick: handleFocusButton,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        ref={handleListRef}\n        id={listId}\n        collapsed={!openState}\n      >\n        {children}\n      </OptionList>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["jsx","ChevronUpIcon","ChevronDownIcon","makePrefixer","forwardRef","Dropdown","defaultValueToString","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingUI","Children","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useRef","useForkRef","_a","_b","useEffect","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../src/dropdown/Dropdown.tsx"],"sourcesContent":["import {\n  flip,\n  offset,\n  size,\n  useClick,\n  useDismiss,\n  useFocus,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type ForwardedRef,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport {\n  ListControlContext,\n  type OptionValue,\n} from \"../list-control/ListControlContext\";\nimport {\n  type ListControlProps,\n  defaultValueToString,\n  useListControl,\n} from \"../list-control/ListControlState\";\nimport { OptionList } from \"../option/OptionList\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { ValidationStatus } from \"../status-indicator\";\nimport {\n  type UseFloatingUIProps,\n  makePrefixer,\n  useFloatingUI,\n  useForkRef,\n  useId,\n} from \"../utils\";\nimport dropdownCss from \"./Dropdown.css\";\n\nexport type DropdownProps<Item = string> = {\n  /**\n   * If `true`, the dropdown will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the dropdown will be read-only.\n   */\n  readOnly?: boolean;\n  /**\n   * The options to display in the dropdown.\n   */\n  children?: ReactNode;\n  /**\n   * The marker to use in an empty read only dropdown.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * If `true`, the dropdown will be multiselect.\n   */\n  multiselect?: boolean;\n  /**\n   * The text shown when the dropdown has no value.\n   */\n  placeholder?: string;\n  /**\n   * If `true`, the dropdown will be required.\n   */\n  required?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.\n   */\n  value?: string;\n  /**\n   * Validation status, one of \"error\" | \"warning\" | \"success\".\n   */\n  validationStatus?: Exclude<ValidationStatus, \"info\">;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n} & Omit<ComponentPropsWithoutRef<\"button\">, \"value\" | \"defaultValue\"> &\n  ListControlProps<Item>;\n\nfunction ExpandIcon({ open }: { open: boolean }) {\n  return open ? <ChevronUpIcon aria-hidden /> : <ChevronDownIcon aria-hidden />;\n}\n\nconst withBaseName = makePrefixer(\"saltDropdown\");\n\nexport const Dropdown = forwardRef(function Dropdown<Item>(\n  props: DropdownProps<Item>,\n  ref: ForwardedRef<HTMLButtonElement>,\n) {\n  const {\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    children,\n    className,\n    disabled: disabledProp,\n    emptyReadOnlyMarker = \"—\",\n    readOnly: readOnlyProp,\n    multiselect,\n    onSelectionChange,\n    selected,\n    defaultSelected,\n    defaultOpen,\n    value,\n    onOpenChange,\n    open,\n    placeholder,\n    startAdornment,\n    required: requiredProp,\n    variant = \"primary\",\n    validationStatus: validationStatusProp,\n    onKeyDown,\n    onFocus,\n    onBlur,\n    valueToString = defaultValueToString,\n    bordered = false,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dropdown\",\n    css: dropdownCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const disabled = Boolean(disabledProp) || formFieldDisabled;\n  const readOnly = Boolean(readOnlyProp) || formFieldReadOnly;\n  const validationStatus = validationStatusProp ?? formFieldValidationStatus;\n  const required = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : (undefined ?? requiredProp);\n  const listControl = useListControl<Item>({\n    open,\n    defaultOpen,\n    onOpenChange,\n    multiselect,\n    defaultSelected,\n    selected,\n    onSelectionChange,\n    valueToString,\n  });\n\n  const {\n    activeState,\n    setActive,\n    openState,\n    setOpen,\n    openKey,\n    getIndexOfOption,\n    getOptionsMatching,\n    getOptionFromSearch,\n    getFirstOption,\n    getLastOption,\n    getOptionAfter,\n    getOptionBefore,\n    getOptionPageAbove,\n    getOptionPageBelow,\n    selectedState,\n    select,\n    setFocusVisibleState,\n    focusedState,\n    setFocusedState,\n    listRef,\n  } = listControl;\n\n  const selectedValue = selectedState\n    .map((item) => valueToString(item))\n    .join(\", \");\n  const isEmptyReadOnly = readOnly && selectedValue === \"\";\n  const valueText = isEmptyReadOnly\n    ? emptyReadOnlyMarker\n    : (value ?? selectedValue);\n\n  const handleOpenChange: UseFloatingUIProps[\"onOpenChange\"] = (\n    newOpen,\n    _event,\n    reason,\n  ) => {\n    const focusNotBlur = reason === \"focus\" && newOpen;\n    if (readOnly || focusNotBlur) return;\n    setOpen(newOpen);\n  };\n\n  const { x, y, strategy, elements, floating, reference, context } =\n    useFloatingUI({\n      open: openState && !readOnly && Children.count(children) > 0,\n      onOpenChange: handleOpenChange,\n      placement: \"bottom-start\",\n      middleware: [\n        offset(1),\n        size({\n          apply({ rects, elements, availableHeight }) {\n            Object.assign(elements.floating.style, {\n              minWidth: `${rects.reference.width}px`,\n              maxHeight: `max(calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5), calc(${availableHeight}px - var(--salt-spacing-100)))`,\n            });\n          },\n        }),\n        flip({ fallbackStrategy: \"initialPlacement\" }),\n      ],\n    });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useFocus(context),\n    useClick(context),\n  ]);\n\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const handleTriggerRef = useForkRef<HTMLButtonElement>(reference, buttonRef);\n  const handleButtonRef = useForkRef(handleTriggerRef, ref);\n\n  const typeaheadString = useRef(\"\");\n  const typeaheadTimeout = useRef<number | undefined>();\n\n  const handleTypeahead = (event: KeyboardEvent<HTMLButtonElement>) => {\n    if (typeaheadTimeout.current) {\n      clearTimeout(typeaheadTimeout.current);\n    }\n    typeaheadString.current += event.key;\n    typeaheadTimeout.current = window.setTimeout(() => {\n      typeaheadString.current = \"\";\n    }, 500);\n\n    if (!openState) {\n      setOpen(true, \"input\");\n    }\n\n    let newOption = getOptionFromSearch(typeaheadString.current, activeState);\n\n    if (!newOption) {\n      newOption = getOptionFromSearch(typeaheadString.current);\n    }\n\n    if (newOption) {\n      setActive(newOption);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    onKeyDown?.(event);\n\n    if (readOnly) {\n      return;\n    }\n\n    if (!openState) {\n      if (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") {\n        setOpen(true, undefined, event.key);\n        return;\n      }\n    }\n\n    if (\n      event.key.length === 1 &&\n      !event.ctrlKey &&\n      !event.metaKey &&\n      !event.altKey\n    ) {\n      event.preventDefault();\n      event.stopPropagation();\n      handleTypeahead(event);\n    }\n\n    const activeOption = activeState ?? getFirstOption().data;\n\n    let newActive: { data: OptionValue<Item>; element: HTMLElement } | null =\n      null;\n    switch (event.key) {\n      case \"ArrowDown\":\n        newActive = getOptionAfter(activeOption) ?? getLastOption();\n        break;\n      case \"ArrowUp\":\n        newActive = getOptionBefore(activeOption) ?? getFirstOption();\n        break;\n      case \"Home\":\n        newActive = getFirstOption();\n        break;\n      case \"End\":\n        newActive = getLastOption();\n        break;\n      case \"PageUp\":\n        newActive = getOptionPageAbove(activeOption);\n        break;\n      case \"PageDown\":\n        newActive = getOptionPageBelow(activeOption);\n        break;\n      case \"Enter\":\n      case \" \":\n        if (\n          (openState && Boolean(activeState?.disabled)) ||\n          (typeaheadString.current.trim().length > 0 && event.key === \" \")\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if (!openState || !activeState) {\n          return;\n        }\n\n        event.preventDefault();\n        select(event, activeState);\n\n        break;\n      case \"Tab\":\n        if (!multiselect && activeState) {\n          select(event, activeState);\n        }\n        break;\n    }\n\n    if (newActive && newActive.data.id !== activeState?.id) {\n      event.preventDefault();\n      setActive(newActive.data);\n      setFocusVisibleState(true);\n    }\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(true);\n    onFocus?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLButtonElement>) => {\n    setFocusedState(false);\n    if (!listRef.current || !listRef.current.contains(event.relatedTarget)) {\n      onBlur?.(event);\n    }\n  };\n\n  const handleListMouseOver = () => {\n    setFocusVisibleState(false);\n  };\n\n  const handleFocusButton = () => {\n    buttonRef.current?.focus();\n  };\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when the list's openState or the displayed options change.\n  useEffect(() => {\n    // We check the active index because the active item may have been removed\n    const activeIndex = activeState ? getIndexOfOption(activeState) : -1;\n    let newActive = undefined;\n\n    // If the active item is still in the list, we don't need to do anything\n    if (activeIndex > 0) {\n      return;\n    }\n\n    // If the list is closed we should clear the active item\n    if (!openState) {\n      setActive(undefined);\n      return;\n    }\n\n    // If we have selected an item, we should make that the active item\n    if (selectedState.length > 0) {\n      newActive = getOptionsMatching(\n        (option) => option.value === selectedState[0],\n      ).pop();\n    }\n\n    // If we still don't have an active item, we should check if the list has been opened with the keyboard\n    if (!newActive) {\n      if (openKey.current === \"ArrowDown\") {\n        newActive = getFirstOption();\n      } else if (openKey.current === \"ArrowUp\") {\n        newActive = getLastOption();\n      }\n    }\n\n    // If we still don't have an active item, we should just select the first item\n    if (!newActive) {\n      newActive = getFirstOption();\n    }\n\n    setActive(newActive?.data);\n  }, [openState, children]);\n\n  const listId = useId();\n\n  const handleListRef = useForkRef<HTMLDivElement>(listRef, floating);\n\n  return (\n    <ListControlContext.Provider value={listControl}>\n      <button\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n            [withBaseName(\"bordered\")]: bordered,\n          },\n          className,\n        )}\n        ref={handleButtonRef}\n        role=\"combobox\"\n        type=\"button\"\n        disabled={disabled}\n        aria-readonly={readOnly ? \"true\" : undefined}\n        aria-required={required ? \"true\" : undefined}\n        aria-expanded={openState}\n        aria-activedescendant={activeState?.id}\n        aria-labelledby={clsx(formFieldLabelledBy, ariaLabelledBy) || undefined}\n        aria-describedby={\n          clsx(formFieldDescribedBy, ariaDescribedBy) || undefined\n        }\n        aria-multiselectable={multiselect}\n        aria-controls={openState ? listId : undefined}\n        {...getReferenceProps({\n          onKeyDown: handleKeyDown,\n          onFocus: handleFocus,\n          onBlur: handleBlur,\n          ...rest,\n        })}\n      >\n        {startAdornment}\n        <span\n          className={clsx(withBaseName(\"content\"), {\n            [withBaseName(\"placeholder\")]: !valueText,\n          })}\n        >\n          {!valueText ? placeholder : valueText}\n        </span>\n        {validationStatus && <StatusAdornment status={validationStatus} />}\n        {!readOnly && <ExpandIcon open={openState} />}\n        <div className={withBaseName(\"activationIndicator\")} />\n      </button>\n      <OptionList\n        open={\n          (openState || focusedState) &&\n          !readOnly &&\n          Children.count(children) > 0\n        }\n        {...getFloatingProps({\n          onMouseOver: handleListMouseOver,\n          onFocus: handleFocusButton,\n          onClick: handleFocusButton,\n        })}\n        left={x ?? 0}\n        top={y ?? 0}\n        position={strategy}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        ref={handleListRef}\n        id={listId}\n        collapsed={!openState}\n      >\n        {children}\n      </OptionList>\n    </ListControlContext.Provider>\n  );\n}) as <Item = string>(\n  props: DropdownProps<Item> & { ref?: Ref<HTMLButtonElement> },\n) => JSX.Element;\n"],"names":["jsx","ChevronUpIcon","ChevronDownIcon","makePrefixer","forwardRef","Dropdown","defaultValueToString","useWindow","useComponentCssInjection","dropdownCss","useFormFieldProps","useListControl","useFloatingUI","Children","offset","size","elements","flip","useInteractions","useDismiss","useFocus","useClick","useRef","useForkRef","_a","_b","useEffect","useId","jsxs","ListControlContext","clsx","StatusAdornment","OptionList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,SAAS,UAAA,CAAW,EAAE,IAAA,EAA2B,EAAA;AAC/C,EAAA,OAAO,uBAAQA,cAAA,CAAAC,mBAAA,EAAA;AAAA,IAAc,aAAW,EAAA,IAAA;AAAA,GAAC,oBAAMD,cAAA,CAAAE,qBAAA,EAAA;AAAA,IAAgB,aAAW,EAAA,IAAA;AAAA,GAAC,CAAA,CAAA;AAC7E,CAAA;AAEA,MAAM,YAAA,GAAeC,0BAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA,CAAW,SAASC,SAAAA,CAC1C,OACA,GACA,EAAA;AA5GF,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA6GE,EAAM,MAAA;AAAA,IACJ,iBAAmB,EAAA,cAAA;AAAA,IACnB,kBAAoB,EAAA,eAAA;AAAA,IACpB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,mBAAsB,GAAA,QAAA;AAAA,IACtB,QAAU,EAAA,YAAA;AAAA,IACV,WAAA;AAAA,IACA,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,eAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,YAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAU,GAAA,SAAA;AAAA,IACV,gBAAkB,EAAA,oBAAA;AAAA,IAClB,SAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAgB,GAAAC,qCAAA;AAAA,IAChB,QAAW,GAAA,KAAA;AAAA,IACR,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,kBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,UAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,SAAW,EAAA;AAAA,MACT,kBAAoB,EAAA,oBAAA;AAAA,MACpB,iBAAmB,EAAA,mBAAA;AAAA,QACjB,EAAC;AAAA,IACL,QAAU,EAAA,iBAAA;AAAA,IACV,QAAU,EAAA,iBAAA;AAAA,IACV,SAAW,EAAA,iBAAA;AAAA,IACX,gBAAkB,EAAA,yBAAA;AAAA,MAChBC,mCAAkB,EAAA,CAAA;AAEtB,EAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,YAAY,CAAK,IAAA,iBAAA,CAAA;AAC1C,EAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,YAAY,CAAK,IAAA,iBAAA,CAAA;AAC1C,EAAA,MAAM,mBAAmB,oBAAwB,IAAA,IAAA,GAAA,oBAAA,GAAA,yBAAA,CAAA;AACjD,EAAM,MAAA,QAAA,GAAW,oBACb,CAAC,UAAA,EAAY,UAAU,CAAE,CAAA,QAAA,CAAS,iBAAiB,CACrC,GAAA,YAAA,CAAA;AAClB,EAAA,MAAM,cAAcC,+BAAqB,CAAA;AAAA,IACvC,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,QAAA;AAAA,IACA,iBAAA;AAAA,IACA,aAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,WAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,kBAAA;AAAA,IACA,mBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,IACA,kBAAA;AAAA,IACA,kBAAA;AAAA,IACA,aAAA;AAAA,IACA,MAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,OAAA;AAAA,GACE,GAAA,WAAA,CAAA;AAEJ,EAAM,MAAA,aAAA,GAAgB,aACnB,CAAA,GAAA,CAAI,CAAC,IAAA,KAAS,cAAc,IAAI,CAAC,CACjC,CAAA,IAAA,CAAK,IAAI,CAAA,CAAA;AACZ,EAAM,MAAA,eAAA,GAAkB,YAAY,aAAkB,KAAA,EAAA,CAAA;AACtD,EAAM,MAAA,SAAA,GAAY,eACd,GAAA,mBAAA,GACC,KAAS,IAAA,IAAA,GAAA,KAAA,GAAA,aAAA,CAAA;AAEd,EAAA,MAAM,gBAAuD,GAAA,CAC3D,OACA,EAAA,MAAA,EACA,MACG,KAAA;AACH,IAAM,MAAA,YAAA,GAAe,WAAW,OAAW,IAAA,OAAA,CAAA;AAC3C,IAAA,IAAI,QAAY,IAAA,YAAA;AAAc,MAAA,OAAA;AAC9B,IAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,EAAE,GAAG,CAAG,EAAA,QAAA,EAAU,UAAU,QAAU,EAAA,SAAA,EAAW,OAAQ,EAAA,GAC7DC,2BAAc,CAAA;AAAA,IACZ,MAAM,SAAa,IAAA,CAAC,YAAYC,cAAS,CAAA,KAAA,CAAM,QAAQ,CAAI,GAAA,CAAA;AAAA,IAC3D,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,cAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,aAAO,CAAC,CAAA;AAAA,MACRC,UAAK,CAAA;AAAA,QACH,MAAM,EAAE,KAAA,EAAO,QAAAC,EAAAA,SAAAA,EAAU,iBAAmB,EAAA;AAC1C,UAAO,MAAA,CAAA,MAAA,CAAOA,SAAS,CAAA,QAAA,CAAS,KAAO,EAAA;AAAA,YACrC,QAAA,EAAU,CAAG,EAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,YAC7B,WAAW,CAAyE,sEAAA,EAAA,eAAA,CAAA,8BAAA,CAAA;AAAA,WACrF,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA;AAAA,MACDC,UAAK,CAAA,EAAE,gBAAkB,EAAA,kBAAA,EAAoB,CAAA;AAAA,KAC/C;AAAA,GACD,CAAA,CAAA;AAEH,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9DC,iBAAW,OAAO,CAAA;AAAA,IAClBC,eAAS,OAAO,CAAA;AAAA,IAChBC,eAAS,OAAO,CAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAM,MAAA,SAAA,GAAYC,aAA0B,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,gBAAA,GAAmBC,qBAA8B,CAAA,SAAA,EAAW,SAAS,CAAA,CAAA;AAC3E,EAAM,MAAA,eAAA,GAAkBA,qBAAW,CAAA,gBAAA,EAAkB,GAAG,CAAA,CAAA;AAExD,EAAM,MAAA,eAAA,GAAkBD,aAAO,EAAE,CAAA,CAAA;AACjC,EAAA,MAAM,mBAAmBA,YAA2B,EAAA,CAAA;AAEpD,EAAM,MAAA,eAAA,GAAkB,CAAC,KAA4C,KAAA;AACnE,IAAA,IAAI,iBAAiB,OAAS,EAAA;AAC5B,MAAA,YAAA,CAAa,iBAAiB,OAAO,CAAA,CAAA;AAAA,KACvC;AACA,IAAA,eAAA,CAAgB,WAAW,KAAM,CAAA,GAAA,CAAA;AACjC,IAAiB,gBAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AACjD,MAAA,eAAA,CAAgB,OAAU,GAAA,EAAA,CAAA;AAAA,OACzB,GAAG,CAAA,CAAA;AAEN,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,OAAA,CAAQ,MAAM,OAAO,CAAA,CAAA;AAAA,KACvB;AAEA,IAAA,IAAI,SAAY,GAAA,mBAAA,CAAoB,eAAgB,CAAA,OAAA,EAAS,WAAW,CAAA,CAAA;AAExE,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAY,SAAA,GAAA,mBAAA,CAAoB,gBAAgB,OAAO,CAAA,CAAA;AAAA,KACzD;AAEA,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,SAAA,CAAU,SAAS,CAAA,CAAA;AACnB,MAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AAAA,KAC3B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,KAA4C,KAAA;AA/QrE,IAAA,IAAAE,GAAAC,EAAAA,GAAAA,CAAAA;AAgRI,IAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA,CAAA;AAEZ,IAAA,IAAI,QAAU,EAAA;AACZ,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,WAAe,IAAA,KAAA,CAAM,QAAQ,SAAW,EAAA;AACxD,QAAQ,OAAA,CAAA,IAAA,EAAM,KAAW,CAAA,EAAA,KAAA,CAAM,GAAG,CAAA,CAAA;AAClC,QAAA,OAAA;AAAA,OACF;AAAA,KACF;AAEA,IAAA,IACE,KAAM,CAAA,GAAA,CAAI,MAAW,KAAA,CAAA,IACrB,CAAC,KAAA,CAAM,OACP,IAAA,CAAC,KAAM,CAAA,OAAA,IACP,CAAC,KAAA,CAAM,MACP,EAAA;AACA,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAAA,KACvB;AAEA,IAAM,MAAA,YAAA,GAAe,WAAe,IAAA,IAAA,GAAA,WAAA,GAAA,cAAA,EAAiB,CAAA,IAAA,CAAA;AAErD,IAAA,IAAI,SACF,GAAA,IAAA,CAAA;AACF,IAAA,QAAQ,KAAM,CAAA,GAAA;AAAA,MACP,KAAA,WAAA;AACH,QAAA,SAAA,GAAA,CAAYD,MAAA,cAAe,CAAA,YAAY,CAA3B,KAAA,IAAA,GAAAA,MAAgC,aAAc,EAAA,CAAA;AAC1D,QAAA,MAAA;AAAA,MACG,KAAA,SAAA;AACH,QAAA,SAAA,GAAA,CAAYC,MAAA,eAAgB,CAAA,YAAY,CAA5B,KAAA,IAAA,GAAAA,MAAiC,cAAe,EAAA,CAAA;AAC5D,QAAA,MAAA;AAAA,MACG,KAAA,MAAA;AACH,QAAA,SAAA,GAAY,cAAe,EAAA,CAAA;AAC3B,QAAA,MAAA;AAAA,MACG,KAAA,KAAA;AACH,QAAA,SAAA,GAAY,aAAc,EAAA,CAAA;AAC1B,QAAA,MAAA;AAAA,MACG,KAAA,QAAA;AACH,QAAA,SAAA,GAAY,mBAAmB,YAAY,CAAA,CAAA;AAC3C,QAAA,MAAA;AAAA,MACG,KAAA,UAAA;AACH,QAAA,SAAA,GAAY,mBAAmB,YAAY,CAAA,CAAA;AAC3C,QAAA,MAAA;AAAA,MACG,KAAA,OAAA,CAAA;AAAA,MACA,KAAA,GAAA;AACH,QAAA,IACG,SAAa,IAAA,OAAA,CAAQ,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,QAAQ,CAC1C,IAAA,eAAA,CAAgB,OAAQ,CAAA,IAAA,EAAO,CAAA,MAAA,GAAS,CAAK,IAAA,KAAA,CAAM,QAAQ,GAC5D,EAAA;AACA,UAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,UAAA,OAAA;AAAA,SACF;AAEA,QAAI,IAAA,CAAC,SAAa,IAAA,CAAC,WAAa,EAAA;AAC9B,UAAA,OAAA;AAAA,SACF;AAEA,QAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,QAAA,MAAA,CAAO,OAAO,WAAW,CAAA,CAAA;AAEzB,QAAA,MAAA;AAAA,MACG,KAAA,KAAA;AACH,QAAI,IAAA,CAAC,eAAe,WAAa,EAAA;AAC/B,UAAA,MAAA,CAAO,OAAO,WAAW,CAAA,CAAA;AAAA,SAC3B;AACA,QAAA,MAAA;AAAA,KAAA;AAGJ,IAAA,IAAI,SAAa,IAAA,SAAA,CAAU,IAAK,CAAA,EAAA,MAAO,2CAAa,EAAI,CAAA,EAAA;AACtD,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,SAAA,CAAU,UAAU,IAAI,CAAA,CAAA;AACxB,MAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AAAA,KAC3B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,WAAA,GAAc,CAAC,KAAyC,KAAA;AAC5D,IAAA,eAAA,CAAgB,IAAI,CAAA,CAAA;AACpB,IAAU,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACZ,CAAA;AAEA,EAAM,MAAA,UAAA,GAAa,CAAC,KAAyC,KAAA;AAC3D,IAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AACrB,IAAI,IAAA,CAAC,QAAQ,OAAW,IAAA,CAAC,QAAQ,OAAQ,CAAA,QAAA,CAAS,KAAM,CAAA,aAAa,CAAG,EAAA;AACtE,MAAS,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACX;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,oBAAA,CAAqB,KAAK,CAAA,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AA/WlC,IAAAD,IAAAA,GAAAA,CAAAA;AAgXI,IAAA,CAAAA,GAAA,GAAA,SAAA,CAAU,OAAV,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAmB,CAAA,KAAA,EAAA,CAAA;AAAA,GACrB,CAAA;AAGA,EAAAE,eAAA,CAAU,MAAM;AAEd,IAAA,MAAM,WAAc,GAAA,WAAA,GAAc,gBAAiB,CAAA,WAAW,CAAI,GAAA,CAAA,CAAA,CAAA;AAClE,IAAA,IAAI,SAAY,GAAA,KAAA,CAAA,CAAA;AAGhB,IAAA,IAAI,cAAc,CAAG,EAAA;AACnB,MAAA,OAAA;AAAA,KACF;AAGA,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,SAAA,CAAU,KAAS,CAAA,CAAA,CAAA;AACnB,MAAA,OAAA;AAAA,KACF;AAGA,IAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,MAAY,SAAA,GAAA,kBAAA;AAAA,QACV,CAAC,MAAA,KAAW,MAAO,CAAA,KAAA,KAAU,aAAc,CAAA,CAAA,CAAA;AAAA,QAC3C,GAAI,EAAA,CAAA;AAAA,KACR;AAGA,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAI,IAAA,OAAA,CAAQ,YAAY,WAAa,EAAA;AACnC,QAAA,SAAA,GAAY,cAAe,EAAA,CAAA;AAAA,OAC7B,MAAA,IAAW,OAAQ,CAAA,OAAA,KAAY,SAAW,EAAA;AACxC,QAAA,SAAA,GAAY,aAAc,EAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAGA,IAAA,IAAI,CAAC,SAAW,EAAA;AACd,MAAA,SAAA,GAAY,cAAe,EAAA,CAAA;AAAA,KAC7B;AAEA,IAAA,SAAA,CAAU,uCAAW,IAAI,CAAA,CAAA;AAAA,GACxB,EAAA,CAAC,SAAW,EAAA,QAAQ,CAAC,CAAA,CAAA;AAExB,EAAA,MAAM,SAASC,WAAM,EAAA,CAAA;AAErB,EAAM,MAAA,aAAA,GAAgBJ,qBAA2B,CAAA,OAAA,EAAS,QAAQ,CAAA,CAAA;AAElE,EACE,uBAAAK,eAAA,CAACC,sCAAmB,QAAnB,EAAA;AAAA,IAA4B,KAAO,EAAA,WAAA;AAAA,IAClC,QAAA,EAAA;AAAA,sBAACD,eAAA,CAAA,QAAA,EAAA;AAAA,QACC,SAAW,EAAAE,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,OAAO,CAAA;AAAA,UACpB;AAAA,YACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,gBAAoB,IAAA,IAAA,GAAA,gBAAA,GAAA,EAAE,CAAI,GAAA,gBAAA;AAAA,YACxC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC9B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACA,GAAK,EAAA,eAAA;AAAA,QACL,IAAK,EAAA,UAAA;AAAA,QACL,IAAK,EAAA,QAAA;AAAA,QACL,QAAA;AAAA,QACA,eAAA,EAAe,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,QACnC,eAAA,EAAe,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,QACnC,eAAe,EAAA,SAAA;AAAA,QACf,yBAAuB,WAAa,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,EAAA;AAAA,QACpC,iBAAiB,EAAAA,SAAA,CAAK,mBAAqB,EAAA,cAAc,CAAK,IAAA,KAAA,CAAA;AAAA,QAC9D,kBACE,EAAAA,SAAA,CAAK,oBAAsB,EAAA,eAAe,CAAK,IAAA,KAAA,CAAA;AAAA,QAEjD,sBAAsB,EAAA,WAAA;AAAA,QACtB,eAAA,EAAe,YAAY,MAAS,GAAA,KAAA,CAAA;AAAA,QACnC,GAAG,iBAAkB,CAAA;AAAA,UACpB,SAAW,EAAA,aAAA;AAAA,UACX,OAAS,EAAA,WAAA;AAAA,UACT,MAAQ,EAAA,UAAA;AAAA,UACR,GAAG,IAAA;AAAA,SACJ,CAAA;AAAA,QAEA,QAAA,EAAA;AAAA,UAAA,cAAA;AAAA,0BACA9B,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,SAAW,EAAA8B,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,cACvC,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,CAAC,SAAA;AAAA,aACjC,CAAA;AAAA,YAEA,QAAA,EAAA,CAAC,YAAY,WAAc,GAAA,SAAA;AAAA,WAC9B,CAAA;AAAA,UACC,oCAAqB9B,cAAA,CAAA+B,+BAAA,EAAA;AAAA,YAAgB,MAAQ,EAAA,gBAAA;AAAA,WAAkB,CAAA;AAAA,UAC/D,CAAC,4BAAa/B,cAAA,CAAA,UAAA,EAAA;AAAA,YAAW,IAAM,EAAA,SAAA;AAAA,WAAW,CAAA;AAAA,0BAC1CA,cAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,qBAAqB,CAAA;AAAA,WAAG,CAAA;AAAA,SAAA;AAAA,OACvD,CAAA;AAAA,sBACCA,cAAA,CAAAgC,qBAAA,EAAA;AAAA,QACC,IAAA,EAAA,CACG,aAAa,YACd,KAAA,CAAC,YACDnB,cAAS,CAAA,KAAA,CAAM,QAAQ,CAAI,GAAA,CAAA;AAAA,QAE5B,GAAG,gBAAiB,CAAA;AAAA,UACnB,WAAa,EAAA,mBAAA;AAAA,UACb,OAAS,EAAA,iBAAA;AAAA,UACT,OAAS,EAAA,iBAAA;AAAA,SACV,CAAA;AAAA,QACD,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,QACX,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,QACV,QAAU,EAAA,QAAA;AAAA,QACV,KAAA,EAAA,CAAO,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA;AAAA,QAC1B,MAAA,EAAA,CAAQ,EAAS,GAAA,QAAA,CAAA,QAAA,KAAT,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAA;AAAA,QAC3B,GAAK,EAAA,aAAA;AAAA,QACL,EAAI,EAAA,MAAA;AAAA,QACJ,WAAW,CAAC,SAAA;AAAA,QAEX,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/index.js

@@ -165,6 +165,8 @@ exports.BorderLayout = BorderLayout.BorderLayout;
 exports.DEFAULT_BREAKPOINTS = Breakpoints.DEFAULT_BREAKPOINTS;
 exports.useBreakpoint = BreakpointProvider.useBreakpoint;
 exports.Button = Button.Button;
+exports.ButtonAppearanceValues = Button.ButtonAppearanceValues;
+exports.ButtonSentimentValues = Button.ButtonSentimentValues;
 exports.ButtonVariantValues = Button.ButtonVariantValues;
 exports.useButton = useButton.useButton;
 exports.Card = Card.Card;

package/dist-cjs/index.js.map

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

package/dist-cjs/input/Input.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltInput {\n  --input-border: none;\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  border: var(--input-border);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInput-height, var(--salt-size-base));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n  --input-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n  --input-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n  --input-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n  --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltInput.saltInput-bordered {\n  --input-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--input-borderColor);\n  --input-borderWidth: 0;\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltInput-bordered.saltInput-focused,\n.saltInput-bordered:active {\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltInput-bordered.saltInput-readOnly,\n.saltInput-bordered.saltInput-disabled:hover {\n  --input-borderWidth: 0;\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltInput {\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: var(--saltInput-height, var(--salt-size-base));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltInput:hover {\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied if `bordered={true}` */\n.saltInput-bordered.saltInput {\n  border: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);\n}\n\n.saltInput-bordered.saltInput:hover {\n  border-style: var(--salt-editable-borderStyle-hover);\n  border-color: var(--input-borderColor-hover);\n}\n\n.saltInput-bordered.saltInput-focused,\n.saltInput-bordered.saltInput-focused:hover {\n  border-style: var(--salt-editable-borderStyle-active);\n  border-color: var(--input-borderColor-active);\n}\n\n.saltInput-bordered.saltInput-readOnly,\n.saltInput-bordered.saltInput-readOnly:hover {\n  border-style: var(--salt-editable-borderStyle-readonly);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-bordered.saltInput-disabled,\n.saltInput-bordered.saltInput-disabled:hover {\n  border-style: var(--salt-editable-borderStyle-disabled);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--input-borderColor);\n}\n\n.saltInput:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-hover);\n  border-bottom-color: var(--input-borderColor-hover);\n}\n\n.saltInput-focused .saltInput-activationIndicator,\n.saltInput-focused:hover .saltInput-activationIndicator {\n  border-bottom: var(--salt-size-border-strong) var(--salt-editable-borderStyle-active) var(--input-borderColor-active);\n}\n\n.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-readOnly:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-readonly);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltInput-disabled .saltInput-activationIndicator,\n.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-style: var(--salt-editable-borderStyle-disabled);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltInput-bordered .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-readOnly .saltInput-activationIndicator,\n.saltInput-bordered.saltInput-disabled:hover .saltInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltInput-bordered.saltInput-focused .saltInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-border-strong) - var(--salt-size-border));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderColor-active: var(--salt-editable-borderColor-active);\n  --input-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-background-readonly: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-borderColor-active: var(--salt-status-error-borderColor);\n  --input-borderColor-hover: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-background-readonly: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-borderColor-active: var(--salt-status-warning-borderColor);\n  --input-borderColor-hover: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-background-readonly: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-borderColor-active: var(--salt-status-success-borderColor);\n  --input-borderColor-hover: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltInput-focused,\n.saltInput-focused:hover {\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n/* Style applied to inner input component */\n.saltInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Input.css.js.map

package/dist-cjs/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    id,\n    inputProps = {},\n    inputRef,\n    placeholder,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    bordered = false,\n    ...other\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-input\",\n    css: inputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onChange,\n    onFocus,\n    required: inputPropsRequired,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        classNameProp,\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <input\n        aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n        aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n        className={clsx(withBaseName(\"input\"), inputProps?.className)}\n        disabled={isDisabled}\n        id={id}\n        readOnly={isReadOnly}\n        ref={inputRef}\n        role={role}\n        tabIndex={isDisabled ? -1 : 0}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={!isDisabled ? handleFocus : undefined}\n        placeholder={placeholder}\n        value={value}\n        {...restA11yProps}\n        {...restInputProps}\n        required={isRequired}\n      />\n      {!isDisabled && validationStatus && (\n        <StatusAdornment status={validationStatus} />\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Input","useWindow","useComponentCssInjection","inputCss","useFormFieldProps","useState","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n  forwardRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled } from \"../utils\";\n\nimport inputCss from \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\nexport interface InputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: Partial<InputHTMLAttributes<HTMLInputElement>> & DataAttributes;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Alignment of text within container. Defaults to \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nexport const Input = forwardRef<HTMLDivElement, InputProps>(function Input(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    id,\n    inputProps = {},\n    inputRef,\n    placeholder,\n    readOnly: readOnlyProp,\n    role,\n    startAdornment,\n    style,\n    textAlign = \"left\",\n    value: valueProp,\n    defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n    validationStatus: validationStatusProp,\n    variant = \"primary\",\n    bordered = false,\n    ...other\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-input\",\n    css: inputCss,\n    window: targetWindow,\n  });\n\n  const {\n    a11yProps: {\n      \"aria-describedby\": formFieldDescribedBy,\n      \"aria-labelledby\": formFieldLabelledBy,\n    } = {},\n    disabled: formFieldDisabled,\n    readOnly: formFieldReadOnly,\n    necessity: formFieldRequired,\n    validationStatus: formFieldValidationStatus,\n  } = useFormFieldProps();\n\n  const restA11yProps = {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n  };\n\n  const isDisabled = disabled || formFieldDisabled;\n  const isReadOnly = readOnlyProp || formFieldReadOnly;\n  const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n  const [focused, setFocused] = useState(false);\n\n  const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n  const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onChange,\n    onFocus,\n    required: inputPropsRequired,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    onBlur?.(event);\n    setFocused(false);\n  };\n\n  const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n    onFocus?.(event);\n    setFocused(true);\n  };\n\n  const inputStyle = {\n    \"--input-textAlign\": textAlign,\n    ...style,\n  };\n\n  return (\n    <div\n      className={clsx(\n        withBaseName(),\n        withBaseName(variant),\n        {\n          [withBaseName(\"focused\")]: !isDisabled && focused,\n          [withBaseName(\"disabled\")]: isDisabled,\n          [withBaseName(\"readOnly\")]: isReadOnly,\n          [withBaseName(validationStatus || \"\")]: validationStatus,\n          [withBaseName(\"bordered\")]: bordered,\n        },\n        classNameProp,\n      )}\n      ref={ref}\n      style={inputStyle}\n      {...other}\n    >\n      {startAdornment && (\n        <div className={withBaseName(\"startAdornmentContainer\")}>\n          {startAdornment}\n        </div>\n      )}\n      <input\n        aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n        aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n        className={clsx(withBaseName(\"input\"), inputProps?.className)}\n        disabled={isDisabled}\n        id={id}\n        readOnly={isReadOnly}\n        ref={inputRef}\n        role={role}\n        tabIndex={isDisabled ? -1 : 0}\n        onBlur={handleBlur}\n        onChange={handleChange}\n        onFocus={!isDisabled ? handleFocus : undefined}\n        placeholder={placeholder}\n        value={value}\n        {...restA11yProps}\n        {...restInputProps}\n        required={isRequired}\n      />\n      {!isDisabled && validationStatus && (\n        <StatusAdornment status={validationStatus} />\n      )}\n      {endAdornment && (\n        <div className={withBaseName(\"endAdornmentContainer\")}>\n          {endAdornment}\n        </div>\n      )}\n      <div className={withBaseName(\"activationIndicator\")} />\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Input","useWindow","useComponentCssInjection","inputCss","useFormFieldProps","useState","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}