@salt-ds/core 1.27.1 → 1.28.1

package/dist-cjs/multiline-input/MultilineInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  color: inherit;\n  cursor: inherit;\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  line-height: var(--salt-text-lineHeight);\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  min-height: 0;\n  resize: vertical;\n  padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: border-box;\n  color: inherit;\n  cursor: inherit;\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  line-height: var(--salt-text-lineHeight);\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  min-height: 0;\n  resize: vertical;\n  padding: 0;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput-readOnly,\n.saltMultilineInput-readOnly:active,\n.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput.saltMultilineInput-bordered {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltMultilineInput-bordered:active,\n.saltMultilineInput-bordered.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=MultilineInput.css.js.map

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  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\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  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltPillInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error,\n.saltPillInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning,\n.saltPillInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success,\n.saltPillInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\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(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltPillInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\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\n/* Styling when focused */\n.saltPillInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-focused.saltPillInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltPillInput-focused.saltPillInput-readOnly {\n  --input-borderWidth: var(--salt-size-border);\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 input if `disabled={true}` */\n.saltPillInput.saltPillInput-disabled,\n.saltPillInput.saltPillInput-disabled:hover,\n.saltPillInput.saltPillInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied 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-100);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\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.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.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: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\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-pillList {\n  display: contents;\n}\n\n.saltPillInput .saltPill:focus-visible {\n  background: var(--salt-selectable-background-hover);\n  outline: none;\n}\n\n.saltPillInput .saltPill:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPillInput .saltPill:active {\n  background: var(--salt-actionable-primary-background-active);\n  --saltPill-color: var(--salt-actionable-primary-foreground-active);\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n\ndiv[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";
+var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n}\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  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltPillInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error,\n.saltPillInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning,\n.saltPillInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success,\n.saltPillInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\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(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltPillInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\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\n/* Styling when focused */\n.saltPillInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-focused.saltPillInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltPillInput-focused.saltPillInput-readOnly {\n  --input-borderWidth: var(--salt-size-border);\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 input if `disabled={true}` */\n.saltPillInput.saltPillInput-disabled,\n.saltPillInput.saltPillInput-disabled:hover,\n.saltPillInput.saltPillInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied 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-100);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\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.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.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(--salt-size-border));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\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-pillList {\n  display: contents;\n}\n\n.saltPillInput .saltPill:focus-visible {\n  background: var(--salt-selectable-background-hover);\n  outline: none;\n}\n\n.saltPillInput .saltPill:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPillInput .saltPill:active {\n  background: var(--salt-actionable-primary-background-active);\n  --saltPill-color: var(--salt-actionable-primary-foreground-active);\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n\ndiv[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";
 
 module.exports = css_248z;
 //# sourceMappingURL=PillInput.css.js.map

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  gap: var(--salt-spacing-100);\n  cursor: var(--salt-selectable-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-marginTop: 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-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\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-selectable-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  margin: var(--radioButton-icon-marginTop) 0 0 0;\n  padding: 0;\n  width: var(--salt-size-selectable);\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n}\n\n.saltRadioButtonIcon {\n  margin-top: var(--radioButton-icon-marginTop);\n  box-sizing: border-box;\n}\n\n.saltRadioButtonIcon > svg {\n  /* ensures svg is centered in all browsers */\n  transform: translate(0px, 0px);\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-focused-outlineOffset);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\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);\n  border-color: var(--salt-status-error-foreground);\n  color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-foreground);\n  color: var(--salt-status-warning-foreground);\n}\n";
+var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: inline-flex;\n  gap: var(--salt-spacing-100);\n  cursor: var(--salt-selectable-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-marginTop: 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-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\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-selectable-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  margin: var(--radioButton-icon-marginTop) 0 0 0;\n  padding: 0;\n  width: var(--salt-size-selectable);\n  z-index: var(--salt-zIndex-default);\n  box-sizing: border-box;\n}\n\n.saltRadioButtonIcon {\n  margin-top: var(--radioButton-icon-marginTop);\n  box-sizing: border-box;\n}\n\n.saltRadioButtonIcon > svg {\n  /* ensures svg is centered in all browsers */\n  transform: translate(0px, 0px);\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-focused-outlineOffset);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\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\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) 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}\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  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\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\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) 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}\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  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\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  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=RadioButtonIcon.css.js.map

package/dist-cjs/salt-provider/SaltProvider.js

@@ -117,12 +117,16 @@ const DEFAULT_THEME_NAME = "salt-theme";
 const UNSTABLE_ADDITIONAL_THEME_NAME = "salt-theme-next";
 const DEFAULT_MODE = "light";
 const DEFAULT_CORNER = "sharp";
+const DEFAULT_HEADING_FONT = "Open Sans";
+const DEFAULT_ACCENT = "blue";
 const DensityContext = React.createContext(DEFAULT_DENSITY);
 const ThemeContext = React.createContext({
   theme: "",
   mode: DEFAULT_MODE,
   themeNext: false,
-  UNSTABLE_corner: DEFAULT_CORNER
+  UNSTABLE_corner: DEFAULT_CORNER,
+  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,
+  UNSTABLE_accent: DEFAULT_ACCENT
 });
 const BreakpointContext = React.createContext(Breakpoints.DEFAULT_BREAKPOINTS);
 const getThemeNames = (themeName, themeNext) => {
@@ -141,12 +145,16 @@ const createThemedChildren = ({
   mode,
   applyClassesTo,
   themeNext,
-  corner
+  corner,
+  headingFont,
+  accent
 }) => {
   var _a;
   const themeNames = getThemeNames(themeName, themeNext);
   const themeNextProps = {
-    "data-corner": corner
+    "data-corner": corner,
+    "data-heading-font": headingFont,
+    "data-accent": accent
   };
   if (applyClassesTo === "root") {
     return children;
@@ -191,15 +199,19 @@ function InternalSaltProvider({
   mode: modeProp,
   breakpoints: breakpointsProp,
   themeNext,
-  corner: cornerProp
+  corner: cornerProp,
+  headingFont: headingFontProp,
+  accent: accentProp
 }) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const inheritedDensity = React.useContext(DensityContext);
   const {
     theme: inheritedTheme,
     mode: inheritedMode,
     window: inheritedWindow,
-    UNSTABLE_corner: inheritedCorner
+    UNSTABLE_corner: inheritedCorner,
+    UNSTABLE_headingFont: inheritedHeadingFont,
+    UNSTABLE_accent: inheritedAccent
   } = React.useContext(ThemeContext);
   const isRootProvider = inheritedTheme === void 0 || inheritedTheme === "";
   const density = (_a = densityProp != null ? densityProp : inheritedDensity) != null ? _a : DEFAULT_DENSITY;
@@ -207,6 +219,8 @@ function InternalSaltProvider({
   const mode = modeProp != null ? modeProp : inheritedMode;
   const breakpoints = breakpointsProp != null ? breakpointsProp : Breakpoints.DEFAULT_BREAKPOINTS;
   const corner = (_b = cornerProp != null ? cornerProp : inheritedCorner) != null ? _b : DEFAULT_CORNER;
+  const headingFont = (_c = headingFontProp != null ? headingFontProp : inheritedHeadingFont) != null ? _c : DEFAULT_HEADING_FONT;
+  const accent = (_d = accentProp != null ? accentProp : inheritedAccent) != null ? _d : DEFAULT_ACCENT;
   const applyClassesTo = applyClassesToProp != null ? applyClassesToProp : isRootProvider ? "root" : "scope";
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -220,9 +234,11 @@ function InternalSaltProvider({
       mode,
       window: targetWindow,
       themeNext: Boolean(themeNext),
-      UNSTABLE_corner: corner
+      UNSTABLE_corner: corner,
+      UNSTABLE_headingFont: headingFont,
+      UNSTABLE_accent: accent
     }),
-    [themeName, mode, targetWindow, themeNext, corner]
+    [themeName, mode, targetWindow, themeNext, corner, headingFont, accent]
   );
   const themedChildren = createThemedChildren({
     children,
@@ -231,7 +247,9 @@ function InternalSaltProvider({
     mode,
     applyClassesTo,
     themeNext,
-    corner
+    corner,
+    headingFont,
+    accent
   });
   useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
     const themeNames = getThemeNames(themeName, themeNext);
@@ -244,6 +262,8 @@ function InternalSaltProvider({
         targetWindow.document.documentElement.dataset.mode = mode;
         if (themeNext) {
           targetWindow.document.documentElement.dataset.corner = corner;
+          targetWindow.document.documentElement.dataset.headingFont = headingFont;
+          targetWindow.document.documentElement.dataset.accent = accent;
         }
       } else {
         console.warn(
@@ -260,6 +280,8 @@ function InternalSaltProvider({
         targetWindow.document.documentElement.dataset.mode = void 0;
         if (themeNext) {
           delete targetWindow.document.documentElement.dataset.corner;
+          delete targetWindow.document.documentElement.dataset.headingFont;
+          delete targetWindow.document.documentElement.dataset.accent;
         }
       }
     };
@@ -271,7 +293,9 @@ function InternalSaltProvider({
     targetWindow,
     inheritedWindow,
     themeNext,
-    corner
+    corner,
+    headingFont,
+    accent
   ]);
   const matchedBreakpoints = BreakpointProvider.useMatchedBreakpoints(breakpoints);
   const saltProvider = /* @__PURE__ */ jsxRuntime.jsx(DensityContext.Provider, {

package/dist-cjs/salt-provider/SaltProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  createContext,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n  Breakpoints,\n  DEFAULT_BREAKPOINTS,\n  BreakpointProvider,\n  useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow, WindowContextType } from \"@salt-ds/window\";\nimport {\n  useComponentCssInjection,\n  StyleInjectionProvider,\n} from \"@salt-ds/styles\";\nimport { UNSTABLE_Corner } from \"../theme/Corner\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst UNSTABLE_ADDITIONAL_THEME_NAME = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: UNSTABLE_Corner = \"sharp\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  UNSTABLE_corner: UNSTABLE_Corner;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  UNSTABLE_corner: DEFAULT_CORNER,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (themeName: ThemeName, themeNext?: boolean) => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME]\n      : [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName];\n  } else {\n    {\n      return themeName === DEFAULT_THEME_NAME\n        ? [DEFAULT_THEME_NAME]\n        : [DEFAULT_THEME_NAME, themeName];\n    }\n  }\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  UNSTABLE_SaltProviderNextAdditionalProps) => {\n  const themeNames = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  } else if (applyClassesTo === \"child\") {\n    if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return React.cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          ...themeNames,\n          `salt-density-${density}`\n        ),\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        \"data-mode\": mode,\n        ...(themeNext ? themeNextProps : {}),\n      });\n    } else {\n      console.warn(\n        `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`\n      );\n      return children;\n    }\n  } else {\n    return (\n      <div\n        className={clsx(\n          `salt-provider`,\n          ...themeNames,\n          `salt-density-${density}`\n        )}\n        data-mode={mode}\n        {...(themeNext ? themeNextProps : {})}\n      >\n        {children}\n      </div>\n    );\n  }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n  applyClassesTo?: TargetElement;\n  density?: Density;\n  theme?: ThemeName;\n  mode?: Mode;\n  breakpoints?: Breakpoints;\n  enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n  themeNext,\n  corner: cornerProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    UNSTABLE_corner: inheritedCorner,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      UNSTABLE_corner: corner,\n    }),\n    [themeName, mode, targetWindow, themeNext, corner]\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNames = getThemeNames(themeName, themeNext);\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow != targetWindow) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n  ]);\n\n  const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n          <BreakpointContext.Provider value={breakpoints}>\n            <ViewportProvider>{themedChildren}</ViewportProvider>\n          </BreakpointContext.Provider>\n        </BreakpointProvider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  } else {\n    return saltProvider;\n  }\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface UNSTABLE_SaltProviderNextAdditionalProps {\n  corner?: UNSTABLE_Corner;\n}\n\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderProps &\n  UNSTABLE_SaltProviderNextAdditionalProps;\n\nexport function UNSTABLE_SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: UNSTABLE_SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","React","clsx","jsx","useContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useIsomorphicLayoutEffect","useMatchedBreakpoints","BreakpointProvider","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}
+{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  createContext,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n  Breakpoints,\n  DEFAULT_BREAKPOINTS,\n  BreakpointProvider,\n  useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow, WindowContextType } from \"@salt-ds/window\";\nimport {\n  useComponentCssInjection,\n  StyleInjectionProvider,\n} from \"@salt-ds/styles\";\nimport { UNSTABLE_Corner } from \"../theme/Corner\";\nimport { UNSTABLE_HeadingFont } from \"../theme/HeadingFont\";\nimport { UNSTABLE_Accent } from \"../theme/Accent\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst UNSTABLE_ADDITIONAL_THEME_NAME = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: UNSTABLE_Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: UNSTABLE_HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: UNSTABLE_Accent = \"blue\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  UNSTABLE_corner: UNSTABLE_Corner;\n  UNSTABLE_headingFont: UNSTABLE_HeadingFont;\n  UNSTABLE_accent: UNSTABLE_Accent;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  UNSTABLE_corner: DEFAULT_CORNER,\n  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n  UNSTABLE_accent: DEFAULT_ACCENT,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (themeName: ThemeName, themeNext?: boolean) => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME]\n      : [DEFAULT_THEME_NAME, UNSTABLE_ADDITIONAL_THEME_NAME, themeName];\n  } else {\n    {\n      return themeName === DEFAULT_THEME_NAME\n        ? [DEFAULT_THEME_NAME]\n        : [DEFAULT_THEME_NAME, themeName];\n    }\n  }\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n  headingFont,\n  accent,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  UNSTABLE_SaltProviderNextAdditionalProps) => {\n  const themeNames = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  } else if (applyClassesTo === \"child\") {\n    if (React.isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return React.cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          ...themeNames,\n          `salt-density-${density}`\n        ),\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        // @ts-ignore\n        \"data-mode\": mode,\n        ...(themeNext ? themeNextProps : {}),\n      });\n    } else {\n      console.warn(\n        `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`\n      );\n      return children;\n    }\n  } else {\n    return (\n      <div\n        className={clsx(\n          `salt-provider`,\n          ...themeNames,\n          `salt-density-${density}`\n        )}\n        data-mode={mode}\n        {...(themeNext ? themeNextProps : {})}\n      >\n        {children}\n      </div>\n    );\n  }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\n  applyClassesTo?: TargetElement;\n  density?: Density;\n  theme?: ThemeName;\n  mode?: Mode;\n  breakpoints?: Breakpoints;\n  enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n  themeNext,\n  corner: cornerProp,\n  headingFont: headingFontProp,\n  accent: accentProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    UNSTABLE_corner: inheritedCorner,\n    UNSTABLE_headingFont: inheritedHeadingFont,\n    UNSTABLE_accent: inheritedAccent,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n  const headingFont =\n    headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      UNSTABLE_corner: corner,\n      UNSTABLE_headingFont: headingFont,\n      UNSTABLE_accent: accent,\n    }),\n    [themeName, mode, targetWindow, themeNext, corner, headingFont, accent]\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n    headingFont,\n    accent,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNames = getThemeNames(themeName, themeNext);\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow != targetWindow) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n          targetWindow.document.documentElement.dataset.headingFont =\n            headingFont;\n          targetWindow.document.documentElement.dataset.accent = accent;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\"\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n          delete targetWindow.document.documentElement.dataset.headingFont;\n          delete targetWindow.document.documentElement.dataset.accent;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n    headingFont,\n    accent,\n  ]);\n\n  const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n          <BreakpointContext.Provider value={breakpoints}>\n            <ViewportProvider>{themedChildren}</ViewportProvider>\n          </BreakpointContext.Provider>\n        </BreakpointProvider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  } else {\n    return saltProvider;\n  }\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface UNSTABLE_SaltProviderNextAdditionalProps {\n  corner?: UNSTABLE_Corner;\n  headingFont?: UNSTABLE_HeadingFont;\n  accent?: UNSTABLE_Accent;\n}\n\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderProps &\n  UNSTABLE_SaltProviderNextAdditionalProps;\n\nexport function UNSTABLE_SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: UNSTABLE_SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","React","clsx","jsx","useContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useIsomorphicLayoutEffect","useMatchedBreakpoints","BreakpointProvider","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}

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

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

package/dist-cjs/status-adornment/StatusAdornment.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltStatusAdornment {\n  align-self: center;\n  display: inline-block;\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  height: var(--salt-size-adornment);\n  min-height: var(--salt-size-adornment);\n  padding-left: var(--salt-spacing-100);\n  position: relative;\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground);\n}\n\n.saltStatusAdornment-success {\n  --statusAdornment-color: var(--salt-status-success-foreground);\n}\n";
+var css_248z = ".saltStatusAdornment {\n  align-self: center;\n  display: inline-block;\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  height: var(--salt-size-adornment);\n  min-height: var(--salt-size-adornment);\n  padding-left: var(--salt-spacing-100);\n  position: relative;\n}\n\n.saltStatusAdornment-error {\n  --statusAdornment-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltStatusAdornment-warning {\n  --statusAdornment-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltStatusAdornment-success {\n  --statusAdornment-color: var(--salt-status-success-foreground-decorative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StatusAdornment.css.js.map

package/dist-cjs/status-indicator/StatusIndicator.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltStatusIndicator {\n  --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n  --statusIndicator-info-color: var(--salt-status-info-foreground);\n  --statusIndicator-success-color: var(--salt-status-success-foreground);\n  --statusIndicator-error-color: var(--salt-status-error-foreground);\n  color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));\n}\n\n.saltStatusIndicator-error {\n  --statusIndicator-Color: var(--statusIndicator-error-color);\n}\n\n.saltStatusIndicator-warning {\n  --statusIndicator-Color: var(--statusIndicator-warning-color);\n}\n\n.saltStatusIndicator-success {\n  --statusIndicator-Color: var(--statusIndicator-success-color);\n}\n\n.saltStatusIndicator-info {\n  --statusIndicator-Color: var(--statusIndicator-info-color);\n}\n";
+var css_248z = ".saltStatusIndicator {\n  --statusIndicator-warning-color: var(--salt-status-warning-foreground-decorative);\n  --statusIndicator-info-color: var(--salt-status-info-foreground-decorative);\n  --statusIndicator-success-color: var(--salt-status-success-foreground-decorative);\n  --statusIndicator-error-color: var(--salt-status-error-foreground-decorative);\n  color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));\n}\n\n.saltStatusIndicator-error {\n  --statusIndicator-Color: var(--statusIndicator-error-color);\n}\n\n.saltStatusIndicator-warning {\n  --statusIndicator-Color: var(--statusIndicator-warning-color);\n}\n\n.saltStatusIndicator-success {\n  --statusIndicator-Color: var(--statusIndicator-success-color);\n}\n\n.saltStatusIndicator-info {\n  --statusIndicator-Color: var(--statusIndicator-info-color);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StatusIndicator.css.js.map

package/dist-cjs/text/Code.js

@@ -7,7 +7,7 @@ var React = require('react');
 var Text = require('./Text.js');
 
 const Code = React.forwardRef(
-  function TextAction({ children, className, ...rest }, ref) {
+  function TextAction({ children, ...rest }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
       as: "code",
       ref,

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

@@ -1 +1 @@
-{"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n  function TextAction({ children, className, ...rest }, ref) {\n    return (\n      <Text as=\"code\" ref={ref} {...rest}>\n        {children}\n      </Text>\n    );\n  }\n);\n"],"names":["forwardRef","jsx","Text"],"mappings":";;;;;;;;AAGO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,SAAS,UAAW,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACzD,IAAA,uBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,MAAK,EAAG,EAAA,MAAA;AAAA,MAAO,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC3B,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Code.js","sources":["../src/text/Code.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Code = forwardRef<HTMLSpanElement, Omit<TextProps<\"code\">, \"as\">>(\n  function TextAction({ children, ...rest }, ref) {\n    return (\n      <Text as=\"code\" ref={ref} {...rest}>\n        {children}\n      </Text>\n    );\n  }\n);\n"],"names":["forwardRef","jsx","Text"],"mappings":";;;;;;;;AAGO,MAAM,IAAO,GAAAA,gBAAA;AAAA,EAClB,SAAS,UAAW,CAAA,EAAE,QAAa,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AAC9C,IAAA,uBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,MAAK,EAAG,EAAA,MAAA;AAAA,MAAO,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC3B,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/text/Display.js

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Text = require('./Text.js');
 
-const Display1 = React.forwardRef(function Display12({ children, className, styleAs = "display1", ...rest }, ref) {
+const Display1 = React.forwardRef(function Display12({ children, styleAs = "display1", ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
     as: "span",
     styleAs,
@@ -15,7 +15,7 @@ const Display1 = React.forwardRef(function Display12({ children, className, styl
     children
   });
 });
-const Display2 = React.forwardRef(function Display22({ children, className, styleAs = "display2", ...rest }, ref) {
+const Display2 = React.forwardRef(function Display22({ children, styleAs = "display2", ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
     as: "span",
     styleAs,
@@ -24,7 +24,7 @@ const Display2 = React.forwardRef(function Display22({ children, className, styl
     children
   });
 });
-const Display3 = React.forwardRef(function Display32({ children, className, styleAs = "display3", ...rest }, ref) {
+const Display3 = React.forwardRef(function Display32({ children, styleAs = "display3", ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
     as: "span",
     styleAs,

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

@@ -1 +1 @@
-{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Display1 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display1(\n  { children, className, styleAs = \"display1\", ...rest },\n  ref\n) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Display2 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display2(\n  { children, className, styleAs = \"display2\", ...rest },\n  ref\n) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Display3 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display3(\n  { children, className, styleAs = \"display3\", ...rest },\n  ref\n) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n"],"names":["forwardRef","Display1","jsx","Text","Display2","Display3"],"mappings":";;;;;;;;AAGa,MAAA,QAAA,GAAWA,gBAGtB,CAAA,SAASC,SACT,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EACrD,GACA,EAAA;AACA,EAAA,uBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAWH,gBAGtB,CAAA,SAASI,SACT,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EACrD,GACA,EAAA;AACA,EAAA,uBACGF,cAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAWH,gBAGtB,CAAA,SAASK,SACT,CAAA,EAAE,QAAU,EAAA,SAAA,EAAW,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EACrD,GACA,EAAA;AACA,EAAA,uBACGH,cAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;;;"}
+{"version":3,"file":"Display.js","sources":["../src/text/Display.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Text, TextProps } from \"./Text\";\n\nexport const Display1 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display1({ children, styleAs = \"display1\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Display2 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display2({ children, styleAs = \"display2\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n\nexport const Display3 = forwardRef<\n  HTMLSpanElement,\n  Omit<TextProps<\"span\">, \"as\">\n>(function Display3({ children, styleAs = \"display3\", ...rest }, ref) {\n  return (\n    <Text as=\"span\" styleAs={styleAs} ref={ref} {...rest}>\n      {children}\n    </Text>\n  );\n});\n"],"names":["forwardRef","Display1","jsx","Text","Display2","Display3"],"mappings":";;;;;;;;AAGa,MAAA,QAAA,GAAWA,gBAGtB,CAAA,SAASC,SAAS,CAAA,EAAE,UAAU,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EAAG,GAAK,EAAA;AACpE,EAAA,uBACGC,cAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAWH,gBAGtB,CAAA,SAASI,SAAS,CAAA,EAAE,UAAU,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EAAG,GAAK,EAAA;AACpE,EAAA,uBACGF,cAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC,EAAA;AAEY,MAAA,QAAA,GAAWH,gBAGtB,CAAA,SAASK,SAAS,CAAA,EAAE,UAAU,OAAU,GAAA,UAAA,EAAA,GAAe,IAAK,EAAA,EAAG,GAAK,EAAA;AACpE,EAAA,uBACGH,cAAA,CAAAC,SAAA,EAAA;AAAA,IAAK,EAAG,EAAA,MAAA;AAAA,IAAO,OAAA;AAAA,IAAkB,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,IAC7C,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;;;"}

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}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\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/* 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  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\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 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 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/* 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}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-content-foreground-highlight));\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  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\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 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 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/* 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";
 
 module.exports = css_248z;
 //# sourceMappingURL=Text.css.js.map

package/dist-cjs/text/Text.js

@@ -107,47 +107,45 @@ require('../tooltip/Tooltip.js');
 var Text$1 = require('./Text.css.js');
 
 const withBaseName = makePrefixer.makePrefixer("saltText");
-const Text = React.forwardRef(
-  ({
-    as,
-    children,
-    className,
-    disabled = false,
-    maxRows,
-    style,
-    styleAs,
-    variant,
-    color: colorProp,
-    ...restProps
-  }, ref) => {
-    var _a;
-    const targetWindow = window.useWindow();
-    styles.useComponentCssInjection({
-      testId: "salt-text",
-      css: Text$1,
-      window: targetWindow
-    });
-    const Component = as != null ? as : "div";
-    const textStyles = { "--text-max-rows": maxRows, ...style };
-    const color = (_a = variant != null ? variant : colorProp) != null ? _a : "primary";
-    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
-      className: clsx.clsx(
-        withBaseName(),
-        {
-          [withBaseName("disabled")]: disabled,
-          [withBaseName("lineClamp")]: maxRows,
-          [withBaseName(styleAs)]: styleAs,
-          [withBaseName(color)]: color !== "inherit"
-        },
-        className
-      ),
-      ...restProps,
-      ref,
-      style: textStyles,
-      children
-    });
-  }
-);
+const Text = React.forwardRef(function Text2({
+  as,
+  children,
+  className,
+  disabled = false,
+  maxRows,
+  style,
+  styleAs,
+  variant,
+  color: colorProp,
+  ...restProps
+}, ref) {
+  var _a;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-text",
+    css: Text$1,
+    window: targetWindow
+  });
+  const Component = as != null ? as : "div";
+  const textStyles = { "--text-max-rows": maxRows, ...style };
+  const color = (_a = variant != null ? variant : colorProp) != null ? _a : "primary";
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, {
+    className: clsx.clsx(
+      withBaseName(),
+      {
+        [withBaseName("disabled")]: disabled,
+        [withBaseName("lineClamp")]: maxRows,
+        [withBaseName(styleAs)]: styleAs,
+        [withBaseName(color)]: color !== "inherit"
+      },
+      className
+    ),
+    ...restProps,
+    ref,
+    style: textStyles,
+    children
+  });
+});
 
 exports.Text = Text;
 //# sourceMappingURL=Text.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\"\n      | \"notation\"\n      | \"action\"\n      | \"code\";\n    /**\n     * Change text color palette\n     * @deprecated Use `color` instead\n     */\n    variant?: \"primary\" | \"secondary\";\n    /*\n     * The color of the text. Defaults to \"primary\".\n     */\n    color?: \"inherit\" | \"primary\" | \"secondary\";\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(\n  <T extends ElementType = \"div\">(\n    {\n      as,\n      children,\n      className,\n      disabled = false,\n      maxRows,\n      style,\n      styleAs,\n      variant,\n      color: colorProp,\n      ...restProps\n    }: TextProps<T>,\n    ref?: PolymorphicRef<T>\n  ) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-text\",\n      css: textCss,\n      window: targetWindow,\n    });\n\n    const Component = as ?? \"div\";\n\n    const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n    const color = variant ?? colorProp ?? \"primary\";\n\n    return (\n      <Component\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"lineClamp\")]: maxRows,\n            [withBaseName(styleAs as string)]: styleAs,\n            [withBaseName(color)]: color !== \"inherit\",\n          },\n          className\n        )}\n        {...restProps}\n        ref={ref}\n        style={textStyles}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAsB,GAAAC,gBAAA;AAAA,EACjC,CACE;AAAA,IACE,EAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAO,EAAA,SAAA;AAAA,IACJ,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AAvEP,IAAA,IAAA,EAAA,CAAA;AAwEI,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,WAAA;AAAA,MACR,GAAK,EAAAC,MAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,YAAY,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,KAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,IAAM,MAAA,KAAA,GAAA,CAAQ,EAAW,GAAA,OAAA,IAAA,IAAA,GAAA,OAAA,GAAA,SAAA,KAAX,IAAwB,GAAA,EAAA,GAAA,SAAA,CAAA;AAEtC,IAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,UAC7B,CAAC,YAAa,CAAA,OAAiB,CAAI,GAAA,OAAA;AAAA,UACnC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,SAAA;AAAA,SACnC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,GAAA;AAAA,MACA,KAAO,EAAA,UAAA;AAAA,MAEN,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"Text.js","sources":["../src/text/Text.tsx"],"sourcesContent":["import {\n  makePrefixer,\n  PolymorphicComponentPropWithRef,\n  PolymorphicRef,\n} from \"../utils\";\nimport { clsx } from \"clsx\";\nimport { ElementType, forwardRef, ReactElement } from \"react\";\n\nimport textCss from \"./Text.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { ValidationStatus } from \"../status-indicator\";\n\nexport type TextProps<T extends ElementType> = PolymorphicComponentPropWithRef<\n  T,\n  {\n    /**\n     * Applies disabled styling when true\n     */\n    disabled?: boolean;\n    /**\n     * Apply text truncation by mentioning number of rows to be displayed\n     */\n    maxRows?: number;\n    /**\n     * Match styling to another text component's style\n     */\n    styleAs?:\n      | \"h1\"\n      | \"h2\"\n      | \"h3\"\n      | \"h4\"\n      | \"label\"\n      | \"display1\"\n      | \"display2\"\n      | \"display3\"\n      | \"notation\"\n      | \"action\"\n      | \"code\";\n    /**\n     * Change text color palette\n     * @deprecated Use `color` instead\n     */\n    variant?: \"primary\" | \"secondary\";\n    /*\n     * The color of the text. Defaults to \"primary\".\n     */\n    color?: \"inherit\" | \"primary\" | \"secondary\" | ValidationStatus;\n  }\n>;\n\ntype TextComponent = <T extends ElementType = \"div\">(\n  props: TextProps<T>\n) => ReactElement | null;\n\nconst withBaseName = makePrefixer(\"saltText\");\n\nexport const Text: TextComponent = forwardRef(function Text<\n  T extends ElementType = \"div\"\n>(\n  {\n    as,\n    children,\n    className,\n    disabled = false,\n    maxRows,\n    style,\n    styleAs,\n    variant,\n    color: colorProp,\n    ...restProps\n  }: TextProps<T>,\n  ref?: PolymorphicRef<T>\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-text\",\n    css: textCss,\n    window: targetWindow,\n  });\n\n  const Component = as ?? \"div\";\n\n  const textStyles = { \"--text-max-rows\": maxRows, ...style };\n\n  const color = variant ?? colorProp ?? \"primary\";\n\n  return (\n    <Component\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"lineClamp\")]: maxRows,\n          [withBaseName(styleAs as string)]: styleAs,\n          [withBaseName(color)]: color !== \"inherit\",\n        },\n        className\n      )}\n      {...restProps}\n      ref={ref}\n      style={textStyles}\n    >\n      {children}\n    </Component>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Text","useWindow","useComponentCssInjection","textCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuDA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA,CAAA;AAE/B,MAAA,IAAA,GAAsBC,gBAAW,CAAA,SAASC,KAGrD,CAAA;AAAA,EACE,EAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACJ,GAAA,SAAA;AACL,CAAA,EACA,GACA,EAAA;AAzEF,EAAA,IAAA,EAAA,CAAA;AA0EE,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,YAAY,EAAM,IAAA,IAAA,GAAA,EAAA,GAAA,KAAA,CAAA;AAExB,EAAA,MAAM,UAAa,GAAA,EAAE,iBAAmB,EAAA,OAAA,EAAS,GAAG,KAAM,EAAA,CAAA;AAE1D,EAAM,MAAA,KAAA,GAAA,CAAQ,EAAW,GAAA,OAAA,IAAA,IAAA,GAAA,OAAA,GAAA,SAAA,KAAX,IAAwB,GAAA,EAAA,GAAA,SAAA,CAAA;AAEtC,EAAA,uBACGC,cAAA,CAAA,SAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAa,CAAA,WAAW,CAAI,GAAA,OAAA;AAAA,QAC7B,CAAC,YAAa,CAAA,OAAiB,CAAI,GAAA,OAAA;AAAA,QACnC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,KAAU,KAAA,SAAA;AAAA,OACnC;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,SAAA;AAAA,IACJ,GAAA;AAAA,IACA,KAAO,EAAA,UAAA;AAAA,IAEN,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/text/TextAction.js

@@ -6,7 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var Text = require('./Text.js');
 
-const TextAction = React.forwardRef(function TextAction2({ children, className, ...rest }, ref) {
+const TextAction = React.forwardRef(function TextAction2({ children, ...rest }, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text.Text, {
     as: "span",
     styleAs: "action",