@salt-ds/core 1.11.1 → 1.12.0

package/dist-es/link/Link.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-text-link-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-text-link-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-text-link-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-text-link-textDecoration);\n  --link-textDecoration-hover: var(--salt-text-link-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: 0px;\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-text-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-text-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n  margin-left: var(--salt-size-adornmentGap);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  --saltIcon-color: var(--link-color-visited);\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  --saltIcon-color: var(--link-color-hover);\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  --saltIcon-color: var(--link-color-active);\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  --saltIcon-color: var(--link-color-focus);\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
+var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-navigable-textDecoration);\n  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: 0px;\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n  margin-left: var(--salt-size-adornmentGap);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  --saltIcon-color: var(--link-color-visited);\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  --saltIcon-color: var(--link-color-hover);\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  --saltIcon-color: var(--link-color-active);\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  --saltIcon-color: var(--link-color-focus);\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Link.css.js.map

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

@@ -1,4 +1,4 @@
-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-text-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}\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: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  overflow: hidden;\n  resize: none;\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-text-background-selected);\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-text-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/* 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 .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-50));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-50));\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}\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: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight));\n  flex-grow: 1;\n  font: inherit;\n  letter-spacing: 0;\n  margin: var(--salt-spacing-75) 0;\n  min-width: 0;\n  overflow: hidden;\n  resize: none;\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/* 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 .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-50));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-50));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MultilineInput.css.js.map

package/dist-es/panel/Panel.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n  --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n  --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--panel-background));\n  color: var(--saltPanel-color, initial);\n  height: var(--saltPanel-height, 100%);\n  overflow: auto;\n  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n  width: var(--saltPanel-width, 100%);\n}\n";
+var css_248z = "/* Styles applied to the root element when variant=\"primary\" */\n.saltPanel-primary.saltPanel {\n  --panel-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to the root element when variant=\"secondary\" */\n.saltPanel-secondary.saltPanel {\n  --panel-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied to the root element */\n.saltPanel {\n  background: var(--saltPanel-background, var(--panel-background));\n  color: var(--saltPanel-color, initial);\n  height: var(--saltPanel-height, 100%);\n  overflow: auto;\n  padding: var(--saltPanel-padding, var(--salt-size-container-spacing));\n  width: var(--saltPanel-width, 100%);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Panel.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: 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\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-text-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-text-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  top: 0;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  width: var(--salt-size-selectable);\n  z-index: var(--salt-zIndex-default);\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: 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}\n\n.saltRadioButtonIcon {\n  margin-top: var(--radioButton-icon-marginTop);\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";
 
 export { css_248z as default };
 //# sourceMappingURL=RadioButton.css.js.map

package/dist-es/radio-button/RadioButtonGroup.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n  display: flex;\n  gap: var(--salt-spacing-200);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n  flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n  white-space: break-spaces;\n}\n";
+var css_248z = "/* Styles applied to root element */\n.saltRadioButtonGroup {\n  border: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Styles applied when direction is vertical */\n.saltRadioButtonGroup-vertical {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  flex-direction: column;\n}\n\n/* Styles applied when direction is horizontal */\n.saltRadioButtonGroup-horizontal {\n  display: flex;\n  gap: var(--salt-spacing-200);\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n\n.saltRadioButtonGroup-noWrap {\n  flex-wrap: nowrap;\n}\n.saltRadioButtonGroup-noWrap .saltRadioButton {\n  white-space: break-spaces;\n}\n\n/* Styles applied when radio button group is inside a form field with label left or right */\n.saltFormField-labelLeft .saltRadioButtonGroup,\n.saltFormField-labelRight .saltRadioButtonGroup {\n  padding-top: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=RadioButtonGroup.css.js.map

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

@@ -1,4 +1,4 @@
-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-color: currentColor;\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-text-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-color: currentColor;\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";
 
 export { css_248z as default };
 //# sourceMappingURL=RadioButtonIcon.css.js.map

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

@@ -10,7 +10,7 @@ import { AriaAnnouncerProvider } from '../aria-announcer/AriaAnnouncerProvider.j
 import { DEFAULT_BREAKPOINTS } from '../breakpoints/Breakpoints.js';
 import css_248z from './SaltProvider.css.js';
 import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
+import { StyleInjectionProvider, useComponentCssInjection } from '@salt-ds/styles';
 
 const DEFAULT_DENSITY = "medium";
 const DEFAULT_THEME_NAME = "salt-theme";
@@ -57,7 +57,7 @@ SaltProvider can only apply CSS classes for theming to a single nested child ele
     });
   }
 };
-function SaltProvider({
+function InternalSaltProvider({
   applyClassesTo: applyClassesToProp,
   children,
   density: densityProp,
@@ -136,6 +136,17 @@ function SaltProvider({
     return saltProvider;
   }
 }
+function SaltProvider({
+  enableStyleInjection = true,
+  ...restProps
+}) {
+  return /* @__PURE__ */ jsx(StyleInjectionProvider, {
+    value: enableStyleInjection,
+    children: /* @__PURE__ */ jsx(InternalSaltProvider, {
+      ...restProps
+    })
+  });
+}
 const useTheme = () => {
   return useContext(ThemeContext);
 };

package/dist-es/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 { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n  children: ReactNode,\n  themeName: ThemeName,\n  density: Density,\n  mode: Mode,\n  applyClassesTo?: TargetElement\n) => {\n  const themeNames =\n    themeName === DEFAULT_THEME_NAME\n      ? [DEFAULT_THEME_NAME]\n      : [DEFAULT_THEME_NAME, themeName];\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        // @ts-ignore\n        \"data-mode\": mode,\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      >\n        {children}\n      </div>\n    );\n  }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype SaltProviderBaseProps = {\n  applyClassesTo?: TargetElement;\n  density?: Density;\n  theme?: ThemeName;\n  mode?: Mode;\n  breakpoints?: Breakpoints;\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\nexport function SaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n}: SaltProviderProps) {\n  const inheritedDensity = useContext(DensityContext);\n  const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n  const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ??\n    (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n  const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n  const themeContextValue = useMemo(\n    () => ({ theme: themeName, mode }),\n    [themeName, mode]\n  );\n\n  const themedChildren = createThemedChildren(\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo\n  );\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNames =\n      themeName === DEFAULT_THEME_NAME\n        ? [DEFAULT_THEME_NAME]\n        : [DEFAULT_THEME_NAME, themeName];\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (isRoot) {\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      } else {\n        console.warn(\n          \"\\nSaltProvider 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      }\n    };\n  }, [applyClassesTo, density, isRoot, mode, themeName, targetWindow]);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointContext.Provider value={breakpoints}>\n          <ViewportProvider>{themedChildren}</ViewportProvider>\n        </BreakpointContext.Provider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRoot) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  } else {\n    return saltProvider;\n  }\n}\n\nexport const useTheme = (): ThemeContextProps => {\n  return useContext(ThemeContext);\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":["React","saltProviderCss"],"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 { Breakpoints, DEFAULT_BREAKPOINTS } from \"../breakpoints\";\nimport { Density, Mode, ThemeName } from \"../theme\";\nimport { ViewportProvider } from \"../viewport\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nimport saltProviderCss from \"./SaltProvider.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  useComponentCssInjection,\n  StyleInjectionProvider,\n} from \"@salt-ds/styles\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\n\nconst DEFAULT_MODE = \"light\";\n\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\nconst createThemedChildren = (\n  children: ReactNode,\n  themeName: ThemeName,\n  density: Density,\n  mode: Mode,\n  applyClassesTo?: TargetElement\n) => {\n  const themeNames =\n    themeName === DEFAULT_THEME_NAME\n      ? [DEFAULT_THEME_NAME]\n      : [DEFAULT_THEME_NAME, themeName];\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        // @ts-ignore\n        \"data-mode\": mode,\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      >\n        {children}\n      </div>\n    );\n  }\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ntype 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}: SaltProviderProps) {\n  const inheritedDensity = useContext(DensityContext);\n  const { theme: inheritedThemes, mode: inheritedMode } = useTheme();\n\n  const isRoot = inheritedThemes === undefined || inheritedThemes === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ??\n    (inheritedThemes === \"\" ? DEFAULT_THEME_NAME : inheritedThemes);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n\n  const applyClassesTo = applyClassesToProp ?? (isRoot ? \"root\" : \"scope\");\n\n  const themeContextValue = useMemo(\n    () => ({ theme: themeName, mode }),\n    [themeName, mode]\n  );\n\n  const themedChildren = createThemedChildren(\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo\n  );\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNames =\n      themeName === DEFAULT_THEME_NAME\n        ? [DEFAULT_THEME_NAME]\n        : [DEFAULT_THEME_NAME, themeName];\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (isRoot) {\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      } else {\n        console.warn(\n          \"\\nSaltProvider 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      }\n    };\n  }, [applyClassesTo, density, isRoot, mode, themeName, targetWindow]);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointContext.Provider value={breakpoints}>\n          <ViewportProvider>{themedChildren}</ViewportProvider>\n        </BreakpointContext.Provider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRoot) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  } else {\n    return saltProvider;\n  }\n}\n\nexport function SaltProvider({\n  enableStyleInjection = true,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\nexport const useTheme = (): ThemeContextProps => {\n  return useContext(ThemeContext);\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":["React","saltProviderCss"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltStatusAdornment {\n  align-self: center;\n  display: inline-block;\n  fill: var(--saltStatusAdornment-color, var(--statusAdornment-color));\n  height: var(--salt-icon-size-status-adornment);\n  min-height: var(--salt-icon-size-status-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);\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";
 
 export { css_248z as default };
 //# sourceMappingURL=StatusAdornment.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-text-primary-foreground);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n";
+var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n  .saltSwitch:hover .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Switch.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = "/* 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}\n\n.saltText::selection {\n  background: var(--saltText-highlight, var(--salt-text-background-selected));\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-text-primary-foreground);\n}\n\n/* Disabled primary variant */\n.saltText-primary.saltText-disabled {\n  --text-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --text-color: var(--salt-text-secondary-foreground);\n}\n\n/* Disabled secondary variant */\n.saltText-secondary.saltText-disabled {\n  --text-color: var(--salt-text-secondary-foreground-disabled);\n}\n\n/* Body emphasis strong */\n.saltText strong {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n/* Body emphasis small */\n.saltText small {\n  font-size: inherit;\n  font-weight: var(--salt-text-fontWeight-small);\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/* 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/* 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/* 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/* 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/* 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 = "/* 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/* 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";
 
 export { css_248z as default };
 //# sourceMappingURL=Text.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to Toast root element */\n.saltToast {\n  --toast-background: var(--salt-container-primary-background);\n\n  background: var(--saltToast-background, var(--toast-background));\n  border-color: var(--saltToast-borderColor, var(--toast-borderColor));\n  border-width: var(--saltToast-borderWidth, var(--salt-size-border));\n  border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle));\n\n  box-sizing: border-box;\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  display: flex;\n  gap: var(--salt-spacing-75);\n  padding: var(--saltToast-padding, var(--salt-spacing-100));\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltToast:last-child {\n  margin-bottom: var(--salt-spacing-200);\n}\n\n/* Styles applied to icon */\n.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0;\n}\n.salt-density-high.saltToast-icon.saltIcon {\n  margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0;\n}\n\n/* Styles applied when state = \"info\" */\n.saltToast-info {\n  --toast-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when state = \"error\" */\n.saltToast-error {\n  --toast-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltToast-warning {\n  --toast-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when state = \"success\" */\n.saltToast-success {\n  --toast-borderColor: var(--salt-status-success-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Toast.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-actionable-textTransform);\n  font-weight: var(--salt-actionable-secondary-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-actionable-textAlign);\n  letter-spacing: var(--salt-actionable-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
+var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-text-action-textTransform);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-action-textAlign);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggleButton.css.js.map

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

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

package/dist-types/badge/Badge.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes, ReactNode } from "react";
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The number to display on the badge
+     */
+    value: number | string;
+    /**
+     * If a child is provided the Badge will render top right. By defualt renders inline.
+     */
+    children?: ReactNode;
+    /**
+     * The max number to display on the badge.
+     */
+    max?: number;
+}
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/badge/index.d.ts

@@ -0,0 +1 @@
+export * from "./Badge";

package/dist-types/card/Card.d.ts

@@ -13,5 +13,9 @@ export interface CardProps extends ComponentPropsWithoutRef<"div"> {
      * on the page.
      */
     interactable?: boolean;
+    /**
+     * Styling variant; defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
 }
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/card/InteractableCard.d.ts

@@ -8,5 +8,9 @@ export interface InteractableCardProps extends ComponentPropsWithoutRef<"div"> {
      * If `true`, the card will be disabled.
      */
     disabled?: boolean;
+    /**
+     * Styling variant; defaults to "primary".
+     */
+    variant?: "primary" | "secondary";
 }
 export declare const InteractableCard: import("react").ForwardRefExoticComponent<InteractableCardProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./accordion";
 export * from "./aria-announcer";
 export * from "./avatar";
+export * from "./badge";
 export * from "./banner";
 export * from "./border-item";
 export * from "./border-layout";

package/dist-types/salt-provider/SaltProvider.d.ts

@@ -16,6 +16,7 @@ declare type SaltProviderBaseProps = {
     theme?: ThemeName;
     mode?: Mode;
     breakpoints?: Breakpoints;
+    enableStyleInjection?: boolean;
 };
 interface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {
     children: ReactElement;
@@ -28,7 +29,7 @@ interface SaltProviderThatClassesToRoot extends SaltProviderThatInjectsThemeElem
     applyClassesTo: "root";
 }
 declare type SaltProviderProps = SaltProviderThatAppliesClassesToChild | SaltProviderThatInjectsThemeElement | SaltProviderThatClassesToRoot;
-export declare function SaltProvider({ applyClassesTo: applyClassesToProp, children, density: densityProp, theme: themeProp, mode: modeProp, breakpoints: breakpointsProp, }: SaltProviderProps): JSX.Element;
+export declare function SaltProvider({ enableStyleInjection, ...restProps }: SaltProviderProps): JSX.Element;
 export declare const useTheme: () => ThemeContextProps;
 /**
  * `useDensity` merges density value from `DensityContext` with the one from component's props.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -31,12 +31,16 @@
     "directory": "../../dist/salt-ds-core",
     "provenance": true
   },
-  "module": "dist-es/index.js",
-  "typings": "dist-types/index.d.ts",
+  "scripts": {
+    "bundle:css": "yarn node ./scripts/build.mjs"
+  },
   "files": [
+    "css",
     "dist-cjs",
     "dist-es",
     "dist-types",
     "README.md"
-  ]
+  ],
+  "module": "dist-es/index.js",
+  "typings": "dist-types/index.d.ts"
 }