@salt-ds/core 1.70.0 → 1.72.0

package/dist-cjs/pill-input/PillInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltPillInput-tertiary {\n  --pillInput-background: var(--salt-editable-tertiary-background);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-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.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-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(--saltPillInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltPillInput-tertiary {\n  --pillInput-background: var(--salt-editable-tertiary-background);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-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.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-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(--saltPillInput-letterSpacing, var(--salt-text-letterSpacing));\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=PillInput.css.js.map

package/dist-cjs/pill-input/PillInput.js

@@ -214,7 +214,7 @@ const PillInput = React.forwardRef(function PillInput2({
                   Pill.Pill,
                   {
                     "data-index": index,
-                    disabled,
+                    disabled: isDisabled,
                     "aria-label": hidePillClose ? pill : `Remove ${pill}`,
                     ref: (element) => {
                       if (element) {
@@ -228,7 +228,7 @@ const PillInput = React.forwardRef(function PillInput2({
                     onFocus: () => setFocusedPillIndex(index),
                     onKeyDown: handlePillKeyDown,
                     onClick: handlePillClick,
-                    tabIndex: focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1,
+                    tabIndex: index === (focusedPillIndex >= 0 && focusedPillIndex < visiblePills.length ? focusedPillIndex : 0) ? 0 : -1,
                     children: [
                       pill,
                       !hidePillClose && /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "aria-hidden": true })

package/dist-cjs/pill-input/PillInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.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 ForwardedRef,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FormFieldValidationStatus,\n  useFormFieldProps,\n} from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\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   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\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?: FormFieldValidationStatus;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nfunction isEmptyReadOnlyValue(\n  value: PillInputProps[\"value\"] | PillInputProps[\"defaultValue\"],\n) {\n  return (\n    value == null ||\n    value === \"\" ||\n    (Array.isArray(value) && value.length === 0)\n  );\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    name,\n    placeholder,\n    pills = [],\n    onPillRemove,\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    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\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  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n  const isValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(valueProp);\n  const isDefaultValueEmptyReadOnly =\n    isReadOnly && isEmptyReadOnlyValue(defaultValueProp);\n  const controlledValue =\n    valueProp === undefined\n      ? undefined\n      : isValueEmptyReadOnly\n        ? emptyReadOnlyMarker\n        : valueProp;\n  const defaultValue = isDefaultValueEmptyReadOnly\n    ? emptyReadOnlyMarker\n    : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: controlledValue,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!hidePillClose) {\n      const target = event.currentTarget;\n      const index = Number(target.dataset.index);\n      onPillRemove?.(event, index);\n    }\n    inputRef.current?.focus();\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(\"truncate\")]: truncate,\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      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={disabled}\n                aria-label={hidePillClose ? pill : `Remove ${pill}`}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                tabIndex={\n                  focusedPillIndex === -1 || focusedPillIndex === index ? 0 : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-hidden />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={\n            clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n          }\n          aria-labelledby={\n            clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n          }\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          name={name}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\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","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}
+{"version":3,"file":"PillInput.js","sources":["../src/pill-input/PillInput.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 ForwardedRef,\n  forwardRef,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type FormFieldValidationStatus,\n  useFormFieldProps,\n} from \"../form-field-context\";\nimport { Pill } from \"../pill\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef, useId } from \"../utils\";\nimport pillInputCss from \"./PillInput.css\";\nimport { useTruncatePills } from \"./useTruncatePills\";\n\nconst withBaseName = makePrefixer(\"saltPillInput\");\n\nexport interface PillInputProps\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   * The name applied to the input.\n   */\n  name?: string;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The tokens to display in the input.\n   */\n  pills?: string[];\n  onPillRemove?: (event: SyntheticEvent, index: number) => void;\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?: FormFieldValidationStatus;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\" | \"tertiary\";\n  hidePillClose?: boolean;\n  truncate?: boolean;\n  /** Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n}\n\nfunction isEmptyReadOnlyValue(\n  value: PillInputProps[\"value\"] | PillInputProps[\"defaultValue\"],\n) {\n  return (\n    value == null ||\n    value === \"\" ||\n    (Array.isArray(value) && value.length === 0)\n  );\n}\n\nexport const PillInput = forwardRef(function PillInput(\n  {\n    \"aria-activedescendant\": ariaActiveDescendant,\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": ariaOwns,\n    className: classNameProp,\n    disabled,\n    emptyReadOnlyMarker = \"—\",\n    endAdornment,\n    hidePillClose,\n    id: idProp,\n    inputProps = {},\n    inputRef: inputRefProp,\n    name,\n    placeholder,\n    pills = [],\n    onPillRemove,\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    truncate,\n    bordered = false,\n    ...other\n  }: PillInputProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  useComponentCssInjection({\n    testId: \"salt-pill-input\",\n    css: pillInputCss,\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  const [focusedPillIndex, setFocusedPillIndex] = useState(-1);\n\n  const isValueEmptyReadOnly = isReadOnly && isEmptyReadOnlyValue(valueProp);\n  const isDefaultValueEmptyReadOnly =\n    isReadOnly && isEmptyReadOnlyValue(defaultValueProp);\n  const controlledValue =\n    valueProp === undefined\n      ? undefined\n      : isValueEmptyReadOnly\n        ? emptyReadOnlyMarker\n        : valueProp;\n  const defaultValue = isDefaultValueEmptyReadOnly\n    ? emptyReadOnlyMarker\n    : defaultValueProp;\n\n  const {\n    \"aria-describedby\": inputDescribedBy,\n    \"aria-labelledby\": inputLabelledBy,\n    onBlur,\n    onFocus,\n    onChange,\n    required: inputPropsRequired,\n    onKeyDown: inputOnKeyDown,\n    ...restInputProps\n  } = inputProps;\n\n  const isRequired = formFieldRequired\n    ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n    : inputPropsRequired;\n\n  const [value, setValue] = useControlled({\n    controlled: controlledValue,\n    default: defaultValue,\n    name: \"Input\",\n    state: \"value\",\n  });\n\n  const { visiblePills, pillListRef } = useTruncatePills({\n    pills,\n    enable: truncate && pills.length > 0,\n  });\n\n  const id = useId(idProp);\n  const pillListId = `${id}-optionsList`;\n\n  const pillElementsRef = useRef<HTMLElement[]>([]);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleInputRef = useForkRef(inputRef, inputRefProp);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const value = event.target.value;\n    setValue(value);\n    onChange?.(event);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    const target = event.currentTarget;\n    if (target.selectionStart === 0 && target.selectionEnd === 0) {\n      const lastPillIndex = pills.length - 1;\n      const lastPill = pills[lastPillIndex];\n      if (event.key === \"Backspace\" && lastPill) {\n        event.preventDefault();\n        onPillRemove?.(event, lastPillIndex);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        // Move focus to last pill\n        pillElementsRef.current[lastPillIndex]?.focus();\n      }\n    }\n\n    inputOnKeyDown?.(event);\n  };\n\n  const handlePillKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const target = event.currentTarget;\n    const index = Number(target.dataset.index);\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      // Move focus to previous pill\n      pillElementsRef.current[index - 1]?.focus();\n    } else if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      // Move focus to next pill or input\n      if (index === pills.length - 1) {\n        inputRef?.current?.focus();\n      } else {\n        pillElementsRef.current[index + 1]?.focus();\n      }\n    } else if (event.key === \"Delete\" || event.key === \"Backspace\") {\n      event.preventDefault();\n      onPillRemove?.(event, index);\n\n      if (pills.length === 1) {\n        inputRef.current?.focus();\n      } else if (index === pills.length - 1) {\n        pillElementsRef.current[pills.length - 2]?.focus();\n      } else {\n        pillElementsRef.current[index]?.focus();\n      }\n    }\n  };\n\n  const handlePillClick = (event: MouseEvent<HTMLButtonElement>) => {\n    if (!hidePillClose) {\n      const target = event.currentTarget;\n      const index = Number(target.dataset.index);\n      onPillRemove?.(event, index);\n    }\n    inputRef.current?.focus();\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(\"truncate\")]: truncate,\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      <div className={withBaseName(\"inputWrapper\")} ref={pillListRef}>\n        <div\n          role=\"list\"\n          className={withBaseName(\"pillList\")}\n          aria-labelledby={clsx(formFieldLabelledBy, pillListId)}\n          aria-label=\"Selected Options\"\n          id={pillListId}\n        >\n          {visiblePills?.map((pill, index) => (\n            <div role=\"listitem\" key={pill}>\n              <Pill\n                data-index={index}\n                disabled={isDisabled}\n                aria-label={hidePillClose ? pill : `Remove ${pill}`}\n                ref={(element) => {\n                  if (element) {\n                    pillElementsRef.current[index] = element;\n                  } else {\n                    pillElementsRef.current = pillElementsRef.current.filter(\n                      (pillEl) => pillEl !== element,\n                    );\n                  }\n                }}\n                onFocus={() => setFocusedPillIndex(index)}\n                onKeyDown={handlePillKeyDown}\n                onClick={handlePillClick}\n                // The pill list is a single tab stop. It falls back to the\n                // first pill before any pill is focused, and also when the\n                // remembered pill has gone, which happens when the focused\n                // pill is removed with the mouse. Without the fallback the\n                // list would be left with no tab stop at all.\n                tabIndex={\n                  index ===\n                  (focusedPillIndex >= 0 &&\n                  focusedPillIndex < visiblePills.length\n                    ? focusedPillIndex\n                    : 0)\n                    ? 0\n                    : -1\n                }\n              >\n                {pill}\n                {!hidePillClose && <CloseIcon aria-hidden />}\n              </Pill>\n            </div>\n          ))}\n          {visiblePills.length < pills.length && (\n            <div role=\"listitem\">\n              <div\n                data-overflowindicator\n                className={withBaseName(\"overflowIndicator\")}\n              >\n                <OverflowIcon aria-hidden />\n              </div>\n            </div>\n          )}\n        </div>\n        <input\n          aria-describedby={\n            clsx(formFieldDescribedBy, inputDescribedBy) || undefined\n          }\n          aria-labelledby={\n            clsx(formFieldLabelledBy, inputLabelledBy) || undefined\n          }\n          autoComplete=\"off\"\n          className={clsx(withBaseName(\"input\"), inputProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          name={name}\n          readOnly={isReadOnly}\n          ref={handleInputRef}\n          role={role}\n          tabIndex={isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled ? handleFocus : undefined}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restInputProps}\n          required={isRequired}\n        />\n      </div>\n      {!isDisabled && validationStatus && (\n        <div className={withBaseName(\"statusAdornmentContainer\")}>\n          <StatusAdornment status={validationStatus} />\n        </div>\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","PillInput","useWindow","useIcon","useComponentCssInjection","pillInputCss","useFormFieldProps","useState","useControlled","useTruncatePills","useId","useRef","useForkRef","value","jsxs","clsx","jsx","Pill","StatusAdornment"],"mappings":"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"}

package/dist-cjs/radio-button/RadioButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: inline-flex;\n  width: fit-content;\n  gap: var(--salt-spacing-100);\n  cursor: var(--salt-cursor-hover);\n  position: relative;\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  --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-content-primary-foreground);\n\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  height: var(--salt-size-selectable);\n  opacity: 0;\n  padding: 0;\n  width: var(--salt-size-selectable);\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltRadioButton-input,\n.saltRadioButtonIcon {\n  margin: var(--radioButton-icon-margin) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n  outline-offset: var(--salt-spacing-fixed-100);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\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.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\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";
+var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: inline-flex;\n  width: fit-content;\n  gap: var(--salt-spacing-100);\n  cursor: var(--salt-cursor-hover);\n  position: relative;\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  letter-spacing: var(--salt-text-letterSpacing);\n\n  --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-content-primary-foreground);\n\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  height: var(--salt-size-selectable);\n  opacity: 0;\n  padding: 0;\n  width: var(--salt-size-selectable);\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltRadioButton-input,\n.saltRadioButtonIcon {\n  margin: var(--radioButton-icon-margin) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n  outline-offset: var(--salt-spacing-fixed-100);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\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.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\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";
 
 module.exports = css_248z;
 //# sourceMappingURL=RadioButton.css.js.map

package/dist-cjs/radio-button/RadioButtonIcon.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  --radioButton-size: var(--salt-size-selectable);\n  width: var(--radioButton-size);\n  height: var(--radioButton-size);\n  min-width: var(--radioButton-size);\n  min-height: var(--radioButton-size);\n  border-radius: 50%;\n  position: relative;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\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.saltRadioButton:hover .saltRadioButtonIcon {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButtonIcon-checked,\n.saltRadioButton:hover .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\n  opacity: 0.4;\n\n  border-color: var(--salt-selectable-borderColor);\n  background: var(--salt-container-primary-background);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-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.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-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.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly,\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  border-style: var(--salt-borderStyle-dashed);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltRadioButtonIcon > 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 = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  --radioButton-size: var(--salt-size-selectable);\n  width: var(--radioButton-size);\n  height: var(--radioButton-size);\n  min-width: var(--radioButton-size);\n  min-height: var(--radioButton-size);\n  border-radius: 50%;\n  position: relative;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\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.saltRadioButton:hover .saltRadioButtonIcon {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButton-disabled:hover .saltRadioButtonIcon {\n  border-color: var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltRadioButtonIcon-checked,\n.saltRadioButton:hover .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\n  opacity: 0.4;\n\n  border-color: var(--salt-selectable-borderColor);\n  background: var(--salt-container-primary-background);\n  color: var(--salt-selectable-foreground);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-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.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-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.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly,\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  border-style: var(--salt-borderStyle-dashed);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltRadioButtonIcon > 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=RadioButtonIcon.css.js.map

package/dist-cjs/rating/Rating.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltRating {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n.saltFormField .saltRating-container {\n  height: var(--salt-size-base);\n  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));\n}\n\n.saltFormField .saltRating-label {\n  min-height: var(--salt-size-base);\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltRating-labelBottom {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--salt-spacing-75);\n}\n\n.saltRating-labelRight {\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n}\n\n.saltRating-container {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  padding-top: var(--salt-spacing-fixed-100);\n  padding-bottom: var(--salt-spacing-fixed-100);\n  box-sizing: border-box;\n}\n\n.saltRating-label {\n  color: var(--salt-content-primary-foreground);\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  box-sizing: border-box;\n}\n";
+var css_248z = ".saltRating {\n  display: inline-flex;\n  box-sizing: border-box;\n}\n\n.saltFormField .saltRating-container {\n  height: var(--salt-size-base);\n  padding-top: calc(var(--salt-spacing-100) + var(--salt-spacing-fixed-100));\n}\n\n.saltFormField .saltRating-label {\n  min-height: var(--salt-size-base);\n  padding-top: var(--salt-spacing-100);\n}\n\n.saltRating-labelBottom {\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--salt-spacing-75);\n}\n\n.saltRating-labelRight {\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n}\n\n.saltRating-container {\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-150);\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  padding-top: var(--salt-spacing-fixed-100);\n  padding-bottom: var(--salt-spacing-fixed-100);\n  box-sizing: border-box;\n}\n\n.saltRating-label {\n  color: var(--salt-content-primary-foreground);\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  box-sizing: border-box;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Rating.css.js.map

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltStepText-label {\n  grid-area: label;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltStepper-horizontal .saltStepText-label {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltStepText-description {\n  grid-area: description;\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  font-family: var(--salt-text-label-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltStepper-vertical .saltStepText-description {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
+var css_248z = ".saltStepText-label {\n  grid-area: label;\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltStepper-horizontal .saltStepText-label {\n  margin-top: var(--salt-spacing-50);\n}\n\n.saltStepper-vertical .saltStepText-label {\n  padding-top: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-bottom: calc((var(--salt-size-base) - var(--salt-text-label-lineHeight)) / 2);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-depth-0 > .saltText.saltStepText-label {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltStepText-description {\n  grid-area: description;\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n.saltStepper-vertical .saltStepText-description {\n  padding-bottom: var(--salt-spacing-300);\n  padding-left: calc(var(--step-depth) * var(--salt-spacing-100));\n}\n\n.saltStep-status-warning > .saltStepText-description {\n  color: var(--salt-status-warning-foreground-informative);\n}\n\n.saltStep-status-error > .saltStepText-description {\n  color: var(--salt-status-error-foreground-informative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StepText.css.js.map

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

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

package/dist-cjs/table/Table.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Table: Main css class */\n.saltTable {\n  --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n  --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n  --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n}\n\n.saltTable-primary {\n  --table-background: var(--salt-container-primary-background);\n}\n\n.saltTable-secondary {\n  --table-background: var(--salt-container-secondary-background);\n}\n\n.saltTable-tertiary {\n  --table-background: var(--salt-container-tertiary-background);\n}\n\n.saltTable-divider-primary {\n  --table-divider-color: var(--salt-separable-primary-borderColor);\n}\n\n.saltTable-divider-secondary {\n  --table-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltTable-divider-tertiary {\n  --table-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\n/* Zebra styling */\ntable.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable {\n  border-spacing: 0;\n  border-radius: var(--salt-palette-corner, 0);\n  border-collapse: collapse;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  width: 100%;\n}\n\n/* TR */\ntable.saltTable tr {\n  background: var(--table-background);\n}\n\ntable.saltTable tbody tr {\n  height: var(--table-row-height);\n  min-height: var(--table-row-height);\n}\n\ntable.saltTable tbody tr:not(:last-child) {\n  border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable.saltTable-divider-none tbody tr {\n  --table-divider-color: transparent;\n}\n\n/* THead */\ntable.saltTable thead {\n  border-start-start-radius: var(--salt-palette-corner);\n  border-start-end-radius: var(--salt-palette-corner);\n  color: var(--salt-content-secondary-foreground);\n  height: var(--table-header-height);\n  min-height: var(--table-header-height);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\ntable.saltTable thead.saltTable-thead-sticky {\n  position: sticky;\n  top: 0;\n}\n\ntable.saltTable thead.saltTable-thead-primary tr {\n  background: var(--salt-container-primary-background);\n}\n\ntable.saltTable thead.saltTable-thead-secondary tr {\n  background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable thead.saltTable-thead-tertiary tr {\n  background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable thead.saltTable-thead tr {\n  border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable thead.saltTable-thead-divider-primary {\n  --table-header-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-secondary {\n  --table-header-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-tertiary {\n  --table-header-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-none {\n  --table-header-divider-color: transparent;\n}\n\n/* TFoot */\ntable.saltTable tfoot {\n  border-end-start-radius: var(--salt-palette-corner);\n  border-end-end-radius: var(--salt-palette-corner);\n  color: var(--salt-content-primary-foreground);\n  height: var(--table-footer-height);\n  min-height: var(--table-footer-height);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-sticky {\n  position: sticky;\n  bottom: 0;\n}\n\ntable.saltTable tfoot.saltTable-tfoot tr {\n  border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-primary tr {\n  background: var(--salt-container-primary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-secondary tr {\n  background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-tertiary tr {\n  background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-primary tr {\n  --table-footer-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-secondary tr {\n  --table-footer-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {\n  --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-none tr {\n  --table-footer-divider-color: transparent;\n}\n\n/* TH */\ntable.saltTable th {\n  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));\n  position: relative;\n  text-align: start;\n  vertical-align: top;\n  font-weight: inherit;\n}\n\ntable.saltTable th.saltTable-th-align-left {\n  text-align: start;\n}\n\ntable.saltTable th.saltTable-th-align-right {\n  text-align: end;\n}\n\ntable.saltTable tbody th[scope=\"row\"] {\n  font-weight: var(--salt-text-fontWeight-strong);\n  line-height: var(--salt-text-lineHeight);\n}\n\ntable.saltTable th + th::before {\n  background: var(--salt-separable-tertiary-borderColor);\n  content: \"\";\n  position: absolute;\n  z-index: 1;\n  display: block;\n  width: var(--salt-size-fixed-100);\n  height: calc(100% - var(--salt-spacing-200));\n  left: 0;\n  top: var(--salt-spacing-100);\n}\n\n/* TD */\ntable.saltTable td {\n  height: 100%;\n  vertical-align: top;\n  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n}\n\ntable.saltTable td.saltTable-td-align-left {\n  text-align: start;\n}\n\ntable.saltTable td.saltTable-td-align-right {\n  text-align: end;\n}\n\n.saltTable-container {\n  width: 100%;\n  overflow: auto;\n}\n";
+var css_248z = "/* Table: Main css class */\n.saltTable {\n  --table-header-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n  --table-footer-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n  --table-row-height: calc(var(--salt-size-base) + var(--salt-spacing-100) + var(--salt-size-fixed-100));\n}\n\n.saltTable-primary {\n  --table-background: var(--salt-container-primary-background);\n}\n\n.saltTable-secondary {\n  --table-background: var(--salt-container-secondary-background);\n}\n\n.saltTable-tertiary {\n  --table-background: var(--salt-container-tertiary-background);\n}\n\n.saltTable-divider-primary {\n  --table-divider-color: var(--salt-separable-primary-borderColor);\n}\n\n.saltTable-divider-secondary {\n  --table-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltTable-divider-tertiary {\n  --table-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\n/* Zebra styling */\ntable.saltTable-zebra-tertiary tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable-primary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable-secondary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable-tertiary.saltTable-zebra tbody tr:nth-of-type(odd) {\n  --table-background: var(--salt-container-primary-background);\n}\n\ntable.saltTable {\n  border-spacing: 0;\n  border-radius: var(--salt-palette-corner, 0);\n  border-collapse: collapse;\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  width: 100%;\n}\n\n/* TR */\ntable.saltTable tr {\n  background: var(--table-background);\n}\n\ntable.saltTable tbody tr {\n  height: var(--table-row-height);\n  min-height: var(--table-row-height);\n}\n\ntable.saltTable tbody tr:not(:last-child) {\n  border-bottom: var(--salt-borderStyle-solid) var(--table-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable.saltTable-divider-none tbody tr {\n  --table-divider-color: transparent;\n}\n\n/* THead */\ntable.saltTable thead {\n  border-start-start-radius: var(--salt-palette-corner);\n  border-start-end-radius: var(--salt-palette-corner);\n  color: var(--salt-content-secondary-foreground);\n  height: var(--table-header-height);\n  min-height: var(--table-header-height);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\ntable.saltTable thead.saltTable-thead-sticky {\n  position: sticky;\n  top: 0;\n}\n\ntable.saltTable thead.saltTable-thead-primary tr {\n  background: var(--salt-container-primary-background);\n}\n\ntable.saltTable thead.saltTable-thead-secondary tr {\n  background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable thead.saltTable-thead-tertiary tr {\n  background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable thead.saltTable-thead tr {\n  border-bottom: var(--salt-borderStyle-solid) var(--table-header-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable thead.saltTable-thead-divider-primary {\n  --table-header-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-secondary {\n  --table-header-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-tertiary {\n  --table-header-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable thead.saltTable-thead-divider-none {\n  --table-header-divider-color: transparent;\n}\n\n/* TFoot */\ntable.saltTable tfoot {\n  border-end-start-radius: var(--salt-palette-corner);\n  border-end-end-radius: var(--salt-palette-corner);\n  color: var(--salt-content-primary-foreground);\n  height: var(--table-footer-height);\n  min-height: var(--table-footer-height);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-sticky {\n  position: sticky;\n  bottom: 0;\n}\n\ntable.saltTable tfoot.saltTable-tfoot tr {\n  border-top: var(--salt-borderStyle-solid) var(--table-footer-divider-color) var(--salt-size-fixed-100);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-primary tr {\n  background: var(--salt-container-primary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-secondary tr {\n  background: var(--salt-container-secondary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-tertiary tr {\n  background: var(--salt-container-tertiary-background);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-primary tr {\n  --table-footer-divider-color: var(--salt-separable-primary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-secondary tr {\n  --table-footer-divider-color: var(--salt-separable-secondary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-tertiary tr {\n  --table-footer-divider-color: var(--salt-separable-tertiary-borderColor);\n}\n\ntable.saltTable tfoot.saltTable-tfoot-divider-none tr {\n  --table-footer-divider-color: transparent;\n}\n\n/* TH */\ntable.saltTable th {\n  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n  padding-top: calc(var(--salt-spacing-75) + var(--salt-spacing-50) + var(--salt-size-fixed-100));\n  position: relative;\n  text-align: start;\n  vertical-align: top;\n  font-weight: inherit;\n}\n\ntable.saltTable th.saltTable-th-align-left {\n  text-align: start;\n}\n\ntable.saltTable th.saltTable-th-align-right {\n  text-align: end;\n}\n\ntable.saltTable tbody th[scope=\"row\"] {\n  font-weight: var(--salt-text-fontWeight-strong);\n  line-height: var(--salt-text-lineHeight);\n}\n\ntable.saltTable th + th::before {\n  background: var(--salt-separable-tertiary-borderColor);\n  content: \"\";\n  position: absolute;\n  z-index: 1;\n  display: block;\n  width: var(--salt-size-fixed-100);\n  height: calc(100% - var(--salt-spacing-200));\n  left: 0;\n  top: var(--salt-spacing-100);\n}\n\n/* TD */\ntable.saltTable td {\n  height: 100%;\n  vertical-align: top;\n  padding: calc(var(--salt-spacing-75) + var(--salt-spacing-50)) var(--salt-spacing-100);\n}\n\ntable.saltTable td.saltTable-td-align-left {\n  text-align: start;\n}\n\ntable.saltTable td.saltTable-td-align-right {\n  text-align: end;\n}\n\n.saltTable-container {\n  width: 100%;\n  overflow: auto;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Table.css.js.map

package/dist-cjs/tabs/internal/overflow/useOverflowSelectionState.js

@@ -49,6 +49,9 @@ function useOverflowSelectionState({
     commitSelection(pendingSelection.event, pendingSelection.value);
   }, [commitSelection, menuOpen]);
   React.useEffect(() => {
+    if (menuOpen) {
+      return;
+    }
     const selectedFromOverflow = selectionFromOverflowValueRef.current;
     if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {
       return;
@@ -56,8 +59,13 @@ function useOverflowSelectionState({
     if (selected === selectedFromOverflow && selected !== previousSelected) {
       return;
     }
-    selectionFromOverflowValueRef.current = null;
-  }, [previousSelected, selected]);
+    const clearStaleSelection = setTimeout(() => {
+      if (selectionFromOverflowValueRef.current === selectedFromOverflow) {
+        selectionFromOverflowValueRef.current = null;
+      }
+    });
+    return () => clearTimeout(clearStaleSelection);
+  }, [menuOpen, previousSelected, selected]);
   return {
     selectionFromOverflowValueRef,
     setSelected

package/dist-cjs/tabs/internal/overflow/useOverflowSelectionState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowSelectionState.js","sources":["../src/tabs/internal/overflow/useOverflowSelectionState.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useIsomorphicLayoutEffect, usePrevious } from \"../../../utils\";\n\ninterface PendingOverflowSelection {\n  event: SyntheticEvent | null;\n  value: string;\n}\n\ninterface UseOverflowSelectionStateArgs {\n  commitSelection: (event: SyntheticEvent | null, value: string) => void;\n  menuOpen: boolean;\n  selected?: string;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\ninterface UseOverflowSelectionStateResult {\n  selectionFromOverflowValueRef: MutableRefObject<string | null>;\n  setSelected: (\n    event: SyntheticEvent | null,\n    value: string,\n    source?: \"main\" | \"overflow\",\n  ) => void;\n}\n\nexport function useOverflowSelectionState({\n  commitSelection,\n  menuOpen,\n  selected,\n  setMenuOpen,\n}: UseOverflowSelectionStateArgs): UseOverflowSelectionStateResult {\n  const previousSelected = usePrevious(selected, [selected]);\n  const selectionFromOverflowValueRef = useRef<string | null>(null);\n  const pendingOverflowSelectionRef = useRef<PendingOverflowSelection | null>(\n    null,\n  );\n\n  const setSelected = useCallback(\n    (\n      event: SyntheticEvent | null,\n      value: string,\n      source: \"main\" | \"overflow\" = \"main\",\n    ) => {\n      const selectedFromOverflow = source === \"overflow\";\n      selectionFromOverflowValueRef.current = selectedFromOverflow\n        ? value\n        : null;\n\n      if (selectedFromOverflow) {\n        event?.persist();\n        pendingOverflowSelectionRef.current = { event, value };\n        setMenuOpen(false);\n        return;\n      }\n\n      pendingOverflowSelectionRef.current = null;\n      setMenuOpen(false);\n      commitSelection(event, value);\n    },\n    [commitSelection, setMenuOpen],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (menuOpen) {\n      return;\n    }\n\n    const pendingSelection = pendingOverflowSelectionRef.current;\n    if (!pendingSelection) {\n      return;\n    }\n\n    pendingOverflowSelectionRef.current = null;\n    commitSelection(pendingSelection.event, pendingSelection.value);\n  }, [commitSelection, menuOpen]);\n\n  useEffect(() => {\n    const selectedFromOverflow = selectionFromOverflowValueRef.current;\n    if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {\n      return;\n    }\n\n    if (selected === selectedFromOverflow && selected !== previousSelected) {\n      return;\n    }\n\n    selectionFromOverflowValueRef.current = null;\n  }, [previousSelected, selected]);\n\n  return {\n    selectionFromOverflowValueRef,\n    setSelected,\n  };\n}\n"],"names":["usePrevious","useRef","useCallback","useIsomorphicLayoutEffect","useEffect"],"mappings":";;;;;;;;;;;;AAgCO,SAAS,yBAAA,CAA0B;AAAA,EACxC,eAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAmE;AACjE,EAAA,MAAM,gBAAA,GAAmBA,uBAAA,CAAY,QAAA,EAAU,CAAC,QAAQ,CAAC,CAAA;AACzD,EAAA,MAAM,6BAAA,GAAgCC,aAAsB,IAAI,CAAA;AAChE,EAAA,MAAM,2BAAA,GAA8BA,YAAA;AAAA,IAClC;AAAA,GACF;AAEA,EAAA,MAAM,WAAA,GAAcC,iBAAA;AAAA,IAClB,CACE,KAAA,EACA,KAAA,EACA,MAAA,GAA8B,MAAA,KAC3B;AACH,MAAA,MAAM,uBAAuB,MAAA,KAAW,UAAA;AACxC,MAAA,6BAAA,CAA8B,OAAA,GAAU,uBACpC,KAAA,GACA,IAAA;AAEJ,MAAA,IAAI,oBAAA,EAAsB;AACxB,QAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,OAAA,EAAA;AACP,QAAA,2BAAA,CAA4B,OAAA,GAAU,EAAE,KAAA,EAAO,KAAA,EAAM;AACrD,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA;AAAA,MACF;AAEA,MAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAmB,2BAAA,CAA4B,OAAA;AACrD,IAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,MAAA;AAAA,IACF;AAEA,IAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,IAAA,eAAA,CAAgB,gBAAA,CAAiB,KAAA,EAAO,gBAAA,CAAiB,KAAK,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,eAAA,EAAiB,QAAQ,CAAC,CAAA;AAE9B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,uBAAuB,6BAAA,CAA8B,OAAA;AAC3D,IAAA,IAAI,oBAAA,IAAwB,IAAA,IAAQ,2BAAA,CAA4B,OAAA,EAAS;AACvE,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,QAAA,KAAa,oBAAA,IAAwB,QAAA,KAAa,gBAAA,EAAkB;AACtE,MAAA;AAAA,IACF;AAEA,IAAA,6BAAA,CAA8B,OAAA,GAAU,IAAA;AAAA,EAC1C,CAAA,EAAG,CAAC,gBAAA,EAAkB,QAAQ,CAAC,CAAA;AAE/B,EAAA,OAAO;AAAA,IACL,6BAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useOverflowSelectionState.js","sources":["../src/tabs/internal/overflow/useOverflowSelectionState.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { useIsomorphicLayoutEffect, usePrevious } from \"../../../utils\";\n\ninterface PendingOverflowSelection {\n  event: SyntheticEvent | null;\n  value: string;\n}\n\ninterface UseOverflowSelectionStateArgs {\n  commitSelection: (event: SyntheticEvent | null, value: string) => void;\n  menuOpen: boolean;\n  selected?: string;\n  setMenuOpen: Dispatch<SetStateAction<boolean>>;\n}\n\ninterface UseOverflowSelectionStateResult {\n  selectionFromOverflowValueRef: MutableRefObject<string | null>;\n  setSelected: (\n    event: SyntheticEvent | null,\n    value: string,\n    source?: \"main\" | \"overflow\",\n  ) => void;\n}\n\nexport function useOverflowSelectionState({\n  commitSelection,\n  menuOpen,\n  selected,\n  setMenuOpen,\n}: UseOverflowSelectionStateArgs): UseOverflowSelectionStateResult {\n  const previousSelected = usePrevious(selected, [selected]);\n  const selectionFromOverflowValueRef = useRef<string | null>(null);\n  const pendingOverflowSelectionRef = useRef<PendingOverflowSelection | null>(\n    null,\n  );\n\n  const setSelected = useCallback(\n    (\n      event: SyntheticEvent | null,\n      value: string,\n      source: \"main\" | \"overflow\" = \"main\",\n    ) => {\n      const selectedFromOverflow = source === \"overflow\";\n      selectionFromOverflowValueRef.current = selectedFromOverflow\n        ? value\n        : null;\n\n      if (selectedFromOverflow) {\n        event?.persist();\n        pendingOverflowSelectionRef.current = { event, value };\n        setMenuOpen(false);\n        return;\n      }\n\n      pendingOverflowSelectionRef.current = null;\n      setMenuOpen(false);\n      commitSelection(event, value);\n    },\n    [commitSelection, setMenuOpen],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (menuOpen) {\n      return;\n    }\n\n    const pendingSelection = pendingOverflowSelectionRef.current;\n    if (!pendingSelection) {\n      return;\n    }\n\n    pendingOverflowSelectionRef.current = null;\n    commitSelection(pendingSelection.event, pendingSelection.value);\n  }, [commitSelection, menuOpen]);\n\n  useEffect(() => {\n    if (menuOpen) {\n      return;\n    }\n\n    const selectedFromOverflow = selectionFromOverflowValueRef.current;\n    if (selectedFromOverflow == null || pendingOverflowSelectionRef.current) {\n      return;\n    }\n\n    if (selected === selectedFromOverflow && selected !== previousSelected) {\n      return;\n    }\n\n    const clearStaleSelection = setTimeout(() => {\n      if (selectionFromOverflowValueRef.current === selectedFromOverflow) {\n        selectionFromOverflowValueRef.current = null;\n      }\n    });\n\n    return () => clearTimeout(clearStaleSelection);\n  }, [menuOpen, previousSelected, selected]);\n\n  return {\n    selectionFromOverflowValueRef,\n    setSelected,\n  };\n}\n"],"names":["usePrevious","useRef","useCallback","useIsomorphicLayoutEffect","useEffect"],"mappings":";;;;;;;;;;;;AAgCO,SAAS,yBAAA,CAA0B;AAAA,EACxC,eAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EAAmE;AACjE,EAAA,MAAM,gBAAA,GAAmBA,uBAAA,CAAY,QAAA,EAAU,CAAC,QAAQ,CAAC,CAAA;AACzD,EAAA,MAAM,6BAAA,GAAgCC,aAAsB,IAAI,CAAA;AAChE,EAAA,MAAM,2BAAA,GAA8BA,YAAA;AAAA,IAClC;AAAA,GACF;AAEA,EAAA,MAAM,WAAA,GAAcC,iBAAA;AAAA,IAClB,CACE,KAAA,EACA,KAAA,EACA,MAAA,GAA8B,MAAA,KAC3B;AACH,MAAA,MAAM,uBAAuB,MAAA,KAAW,UAAA;AACxC,MAAA,6BAAA,CAA8B,OAAA,GAAU,uBACpC,KAAA,GACA,IAAA;AAEJ,MAAA,IAAI,oBAAA,EAAsB;AACxB,QAAA,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,OAAA,EAAA;AACP,QAAA,2BAAA,CAA4B,OAAA,GAAU,EAAE,KAAA,EAAO,KAAA,EAAM;AACrD,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA;AAAA,MACF;AAEA,MAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,eAAA,CAAgB,OAAO,KAAK,CAAA;AAAA,IAC9B,CAAA;AAAA,IACA,CAAC,iBAAiB,WAAW;AAAA,GAC/B;AAEA,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAmB,2BAAA,CAA4B,OAAA;AACrD,IAAA,IAAI,CAAC,gBAAA,EAAkB;AACrB,MAAA;AAAA,IACF;AAEA,IAAA,2BAAA,CAA4B,OAAA,GAAU,IAAA;AACtC,IAAA,eAAA,CAAgB,gBAAA,CAAiB,KAAA,EAAO,gBAAA,CAAiB,KAAK,CAAA;AAAA,EAChE,CAAA,EAAG,CAAC,eAAA,EAAiB,QAAQ,CAAC,CAAA;AAE9B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,QAAA,EAAU;AACZ,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,uBAAuB,6BAAA,CAA8B,OAAA;AAC3D,IAAA,IAAI,oBAAA,IAAwB,IAAA,IAAQ,2BAAA,CAA4B,OAAA,EAAS;AACvE,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,QAAA,KAAa,oBAAA,IAAwB,QAAA,KAAa,gBAAA,EAAkB;AACtE,MAAA;AAAA,IACF;AAEA,IAAA,MAAM,mBAAA,GAAsB,WAAW,MAAM;AAC3C,MAAA,IAAI,6BAAA,CAA8B,YAAY,oBAAA,EAAsB;AAClE,QAAA,6BAAA,CAA8B,OAAA,GAAU,IAAA;AAAA,MAC1C;AAAA,IACF,CAAC,CAAA;AAED,IAAA,OAAO,MAAM,aAAa,mBAAmB,CAAA;AAAA,EAC/C,CAAA,EAAG,CAAC,QAAA,EAAU,gBAAA,EAAkB,QAAQ,CAAC,CAAA;AAEzC,EAAA,OAAO;AAAA,IACL,6BAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

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

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

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltText {\n  --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n  font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Info color */\n.saltText-info {\n  --text-color: var(--salt-status-info-foreground-informative);\n}\n\n/* Error color */\n.saltText-error {\n  --text-color: var(--salt-status-error-foreground-informative);\n}\n\n/* Warning color */\n.saltText-warning {\n  --text-color: var(--salt-status-warning-foreground-informative);\n}\n\n/* Success color */\n.saltText-success {\n  --text-color: var(--salt-status-success-foreground-informative);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n  font-family: var(--salt-text-notation-fontFamily);\n  font-size: var(--salt-text-notation-fontSize);\n  line-height: var(--salt-text-notation-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n  font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  text-align: var(--salt-text-action-textAlign);\n  font-weight: var(--salt-text-action-fontWeight);\n}\n.saltText-action.saltText strong {\n  font-weight: var(--salt-text-action-fontWeight-strong);\n}\n.saltText-action.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n  font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display1-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-weight: var(--salt-text-display1-fontWeight);\n  line-height: var(--salt-text-display1-lineHeight);\n}\n\n/* Display 1 emphasis strong */\n.saltText-display1.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display1-fontWeight-strong);\n}\n\n/* Display 1 emphasis small */\n.saltText-display1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display1-fontWeight-small);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display2-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-weight: var(--salt-text-display2-fontWeight);\n  line-height: var(--salt-text-display2-lineHeight);\n}\n\n/* Display 2 emphasis strong */\n.saltText-display2.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display2-fontWeight-strong);\n}\n\n/* Display 2 emphasis small */\n.saltText-display2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display2-fontWeight-small);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display3-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-weight: var(--salt-text-display3-fontWeight);\n  line-height: var(--salt-text-display3-lineHeight);\n}\n\n/* Display 3 emphasis strong */\n.saltText-display3.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display3-fontWeight-strong);\n}\n\n/* Display 3 emphasis small */\n.saltText-display3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display3-fontWeight-small);\n}\n\n/* Display 4 */\n.saltText-display4.saltText {\n  font-family: var(--salt-text-display4-fontFamily);\n  font-size: var(--salt-text-display4-fontSize);\n  font-weight: var(--salt-text-display4-fontWeight);\n  line-height: var(--salt-text-display4-lineHeight);\n}\n\n/* Display 4 emphasis strong */\n.saltText-display4.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display4-fontWeight-strong);\n}\n\n/* Display 4 emphasis small */\n.saltText-display4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display4-fontWeight-small);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-h1-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-h1-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-h1-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h1-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-h2-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-h2-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-h2-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h2-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-h3-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-h3-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-h3-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h3-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-h4-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-h4-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-h4-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-h4-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-label-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = ".saltText {\n  --text-color: currentColor;\n}\n\n/* Main css class. Style for body text */\n.saltText {\n  color: var(--saltText-color, var(--text-color));\n  font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltText-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltText-lineHeight, var(--salt-text-lineHeight));\n  font-weight: var(--saltText-fontWeight, var(--salt-text-fontWeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n}\n\n/* Allows truncation */\n.saltText-lineClamp {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: var(--text-max-rows, 0);\n  overflow: hidden;\n  word-break: break-word;\n}\n\n/* Primary variant */\n.saltText-primary {\n  --text-color: var(--salt-content-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-content-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-content-secondary-foreground-disabled);\n}\n\n/* Info color */\n.saltText-info {\n  --text-color: var(--salt-status-info-foreground-informative);\n}\n\n/* Error color */\n.saltText-error {\n  --text-color: var(--salt-status-error-foreground-informative);\n}\n\n/* Warning color */\n.saltText-warning {\n  --text-color: var(--salt-status-warning-foreground-informative);\n}\n\n/* Success color */\n.saltText-success {\n  --text-color: var(--salt-status-success-foreground-informative);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Notation */\n.saltText-notation.saltText {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-notation-fontSize);\n  line-height: var(--salt-text-notation-lineHeight);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Notation emphasis strong */\n.saltText-notation.saltText strong {\n  font-weight: var(--salt-text-notation-fontWeight-strong);\n}\n\n/* Notation emphasis small */\n.saltText-notation.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-notation-fontWeight-small);\n}\n\n/* Action */\n.saltText-action.saltText {\n  font-family: var(--salt-text-action-fontFamily);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  text-transform: var(--salt-text-action-textTransform);\n  text-align: var(--salt-text-action-textAlign);\n  font-weight: var(--salt-text-action-fontWeight);\n}\n.saltText-action.saltText strong {\n  font-weight: var(--salt-text-action-fontWeight-strong);\n}\n.saltText-action.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n/* Code */\ncode.saltText,\n.saltText-code.saltText {\n  font-family: var(--salt-text-code-fontFamily);\n}\n\n/* Display 1 */\n.saltText-display1.saltText {\n  font-family: var(--salt-text-display-fontFamily);\n  font-size: var(--salt-text-display1-fontSize);\n  font-style: var(--salt-text-display-fontStyle, normal);\n  font-weight: var(--salt-text-display-fontWeight);\n  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));\n  line-height: var(--salt-text-display1-lineHeight);\n  text-transform: var(--salt-text-display-textTransform, none);\n}\n\n/* Display 1 emphasis strong */\n.saltText-display1.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display-fontWeight-strong);\n}\n\n/* Display 1 emphasis small */\n.saltText-display1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display-fontWeight-small);\n}\n\n/* Display 2 */\n.saltText-display2.saltText {\n  font-family: var(--salt-text-display-fontFamily);\n  font-size: var(--salt-text-display2-fontSize);\n  font-style: var(--salt-text-display-fontStyle, normal);\n  font-weight: var(--salt-text-display-fontWeight);\n  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));\n  line-height: var(--salt-text-display2-lineHeight);\n  text-transform: var(--salt-text-display-textTransform, none);\n}\n\n/* Display 2 emphasis strong */\n.saltText-display2.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display-fontWeight-strong);\n}\n\n/* Display 2 emphasis small */\n.saltText-display2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display-fontWeight-small);\n}\n\n/* Display 3 */\n.saltText-display3.saltText {\n  font-family: var(--salt-text-display-fontFamily);\n  font-size: var(--salt-text-display3-fontSize);\n  font-style: var(--salt-text-display-fontStyle, normal);\n  font-weight: var(--salt-text-display-fontWeight);\n  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));\n  line-height: var(--salt-text-display3-lineHeight);\n  text-transform: var(--salt-text-display-textTransform, none);\n}\n\n/* Display 3 emphasis strong */\n.saltText-display3.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display-fontWeight-strong);\n}\n\n/* Display 3 emphasis small */\n.saltText-display3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display-fontWeight-small);\n}\n\n/* Display 4 */\n.saltText-display4.saltText {\n  font-family: var(--salt-text-display-fontFamily);\n  font-size: var(--salt-text-display4-fontSize);\n  font-style: var(--salt-text-display-fontStyle, normal);\n  font-weight: var(--salt-text-display-fontWeight);\n  letter-spacing: var(--salt-text-display-letterSpacing, var(--salt-text-letterSpacing));\n  line-height: var(--salt-text-display4-lineHeight);\n  text-transform: var(--salt-text-display-textTransform, none);\n}\n\n/* Display 4 emphasis strong */\n.saltText-display4.saltText strong {\n  font-size: inherit;\n  font-weight: var(--salt-text-display-fontWeight-strong);\n}\n\n/* Display 4 emphasis small */\n.saltText-display4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-display-fontWeight-small);\n}\n\n/* Heading 1 */\nh1.saltText,\n.saltText-h1.saltText {\n  font-family: var(--salt-text-heading-fontFamily);\n  font-size: var(--salt-text-h1-fontSize);\n  font-weight: var(--salt-text-heading-fontWeight);\n  line-height: var(--salt-text-h1-lineHeight);\n}\n\n/* H1 emphasis strong */\nh1.saltText strong,\n.saltText-h1.saltText strong {\n  font-weight: var(--salt-text-heading-fontWeight-strong);\n}\n\n/* H1 emphasis small */\nh1.saltText small,\n.saltText-h1.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-heading-fontWeight-small);\n}\n\n/* Heading 2 */\nh2.saltText,\n.saltText-h2.saltText {\n  font-family: var(--salt-text-heading-fontFamily);\n  font-size: var(--salt-text-h2-fontSize);\n  font-weight: var(--salt-text-heading-fontWeight);\n  line-height: var(--salt-text-h2-lineHeight);\n}\n\n/* H2 emphasis strong */\nh2.saltText strong,\n.saltText-h2.saltText strong {\n  font-weight: var(--salt-text-heading-fontWeight-strong);\n}\n\n/* H2 emphasis small */\nh2.saltText small,\n.saltText-h2.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-heading-fontWeight-small);\n}\n\n/* Heading 3 */\nh3.saltText,\n.saltText-h3.saltText {\n  font-family: var(--salt-text-heading-fontFamily);\n  font-size: var(--salt-text-h3-fontSize);\n  font-weight: var(--salt-text-heading-fontWeight);\n  line-height: var(--salt-text-h3-lineHeight);\n}\n\n/* H3 emphasis strong */\nh3.saltText strong,\n.saltText-h3.saltText strong {\n  font-weight: var(--salt-text-heading-fontWeight-strong);\n}\n\n/* H3 emphasis small */\nh3.saltText small,\n.saltText-h3.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-heading-fontWeight-small);\n}\n\n/* Heading 4 */\nh4.saltText,\n.saltText-h4.saltText {\n  font-family: var(--salt-text-heading-fontFamily);\n  font-size: var(--salt-text-h4-fontSize);\n  font-weight: var(--salt-text-heading-fontWeight);\n  line-height: var(--salt-text-h4-lineHeight);\n}\n\n/* H4 emphasis strong */\nh4.saltText strong,\n.saltText-h4.saltText strong {\n  font-weight: var(--salt-text-heading-fontWeight-strong);\n}\n\n/* H4 emphasis small */\nh4.saltText small,\n.saltText-h4.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-heading-fontWeight-small);\n}\n\n/* Label */\nlabel.saltText,\n.saltText-label.saltText {\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n  font-weight: var(--salt-text-label-fontWeight);\n}\n\n/* Label emphasis strong */\nlabel.saltText strong,\n.saltText-label.saltText strong {\n  font-weight: var(--salt-text-label-fontWeight-strong);\n}\n\n/* Label emphasis small */\nlabel.saltText small,\n.saltText-label.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-label-fontWeight-small);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Text.css.js.map

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

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

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

@@ -9,6 +9,7 @@ require('../toggle-button-group/ToggleButtonGroup.js');
 var ToggleButtonGroupContext = require('../toggle-button-group/ToggleButtonGroupContext.js');
 var makePrefixer = require('../utils/makePrefixer.js');
 var useControlled = require('../utils/useControlled.js');
+var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../utils/useFloatingUI/useFloatingUI.js');
 var useForkRef = require('../utils/useForkRef.js');
 require('../utils/useId.js');
@@ -52,6 +53,12 @@ const ToggleButton = React.forwardRef(
     const appearance = appearanceProp || (toggleButtonGroup == null ? void 0 : toggleButtonGroup.appearance) || "solid";
     const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
     const readOnly = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.readOnly) || readOnlyProp;
+    const registerButton = toggleButtonGroup == null ? void 0 : toggleButtonGroup.registerButton;
+    useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+      if (!disabled && buttonRef.current && registerButton) {
+        return registerButton(value, buttonRef.current);
+      }
+    }, [disabled, registerButton, value]);
     const [selected, setSelected] = useControlled.useControlled({
       controlled: toggleButtonGroupSelected,
       default: Boolean(defaultSelected),
@@ -62,7 +69,7 @@ const ToggleButton = React.forwardRef(
       if (disabled || readOnly) {
         return;
       }
-      toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event, value);
       setSelected(!selected);
       onChange == null ? void 0 : onChange(event);
       onClick == null ? void 0 : onClick(event);
@@ -90,7 +97,6 @@ const ToggleButton = React.forwardRef(
       value,
       type: "button",
       disabled,
-      readOnly: readOnlyProp,
       ...rest
     };
     return /* @__PURE__ */ jsxRuntime.jsx("button", { ref: handleRef, ...toggleButtonProps, children });