@salt-ds/core 1.50.0 → 1.52.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/CHANGELOG.md +25 -0
  2. package/css/salt-core.css +156 -272
  3. package/dist-cjs/button/Button.css.js +1 -1
  4. package/dist-cjs/form-field/FormFieldHelperText.css.js +1 -1
  5. package/dist-cjs/form-field/FormFieldLabel.css.js +1 -1
  6. package/dist-cjs/pill/Pill.css.js +1 -1
  7. package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js +1 -1
  8. package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
  9. package/dist-cjs/toggle-button/ToggleButton.css.js +1 -1
  10. package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
  11. package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js +1 -1
  12. package/dist-es/button/Button.css.js +1 -1
  13. package/dist-es/form-field/FormFieldHelperText.css.js +1 -1
  14. package/dist-es/form-field/FormFieldLabel.css.js +1 -1
  15. package/dist-es/pill/Pill.css.js +1 -1
  16. package/dist-es/semantic-icon-provider/SemanticIconProvider.js +2 -2
  17. package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map +1 -1
  18. package/dist-es/toggle-button/ToggleButton.css.js +1 -1
  19. package/dist-es/vertical-navigation/VerticalNavigationItemContent.css.js +1 -1
  20. package/dist-es/vertical-navigation/VerticalNavigationItemLabel.css.js +1 -1
  21. package/package.json +2 -2
package/dist-cjs/button/Button.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-active);\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-text-color-disabled: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-background-disabled: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-background-disabled: var(--salt-actionable-background-disabled);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-text-color-disabled: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-background-disabled: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-text-color-disabled: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-background-disabled: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-text-color-disabled: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-background-disabled: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-text-color-disabled: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-background-disabled: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
3
+ var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-active);\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n .saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background));\n color: var(--saltButton-text-color-disabled, var(--button-text-color));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Button.css.js.map
package/dist-cjs/form-field/FormFieldHelperText.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltFormFieldHelperText {\n cursor: default;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n column-gap: var(--salt-spacing-75);\n}\n\n.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {\n margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n}\n";
3
+ var css_248z = ".saltFormFieldHelperText {\n cursor: default;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n}\n\n.saltFormFieldHelperText-withValidation {\n column-gap: var(--salt-spacing-75);\n}\n\n.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {\n margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=FormFieldHelperText.css.js.map
package/dist-cjs/form-field/FormFieldLabel.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-fontSize);\n}\n";
3
+ var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-typography-textDecoration-italic);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-fontSize);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=FormFieldLabel.css.js.map
package/dist-cjs/pill/Pill.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = "/* Styles applied to the root element */\n.saltPill {\n --pill-borderWidth: var(--salt-size-fixed-100);\n\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--pill-background));\n border-radius: var(--salt-palette-corner-weaker, 0);\n border-style: solid;\n border-width: var(--pill-borderWidth);\n border-color: var(--pill-borderColor);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n position: relative;\n gap: var(--salt-spacing-50);\n padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n color: var(--saltPill-color, var(--pill-color));\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n --pill-background: var(--salt-actionable-bold-background);\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n --pill-color: var(--salt-actionable-bold-foreground-hover);\n --pill-background: var(--salt-actionable-bold-background-hover);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n --pill-color: var(--salt-actionable-bold-foreground-disabled);\n --pill-background: var(--salt-actionable-bold-background-disabled);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n";
3
+ var css_248z = "/* Styles applied to the root element */\n.saltPill {\n --pill-borderWidth: var(--salt-size-fixed-100);\n\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--pill-background));\n border-radius: var(--salt-palette-corner-weaker, 0);\n border-style: solid;\n border-width: var(--pill-borderWidth);\n border-color: var(--pill-borderColor);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n position: relative;\n gap: var(--salt-spacing-50);\n padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n color: var(--saltPill-color, var(--pill-color));\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n --pill-background: var(--salt-actionable-bold-background);\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n --pill-color: var(--salt-actionable-bold-foreground-hover);\n --pill-background: var(--salt-actionable-bold-background-hover);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-background: var(--salt-actionable-bold-background);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-disabled);\n\n opacity: 0.4;\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=Pill.css.js.map
package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js CHANGED
@@ -15,7 +15,7 @@ const defaultIconMap = {
15
15
  DecreaseIcon: icons.TriangleDownIcon,
16
16
  UploadIcon: icons.UploadIcon,
17
17
  ErrorIcon: icons.ErrorSolidIcon,
18
- SuccessIcon: icons.SuccessTickIcon,
18
+ SuccessIcon: icons.SuccessCircleSolidIcon,
19
19
  InfoIcon: icons.InfoSolidIcon,
20
20
  WarningIcon: icons.WarningSolidIcon,
21
21
  OverflowIcon: icons.OverflowMenuIcon,
package/dist-cjs/semantic-icon-provider/SemanticIconProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n SuccessTickIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\n\nexport type SemanticIconMap = {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n};\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessTickIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":["ChevronDownIcon","ChevronUpIcon","ChevronRightIcon","ChevronLeftIcon","TriangleUpIcon","TriangleDownIcon","UploadIcon","ErrorSolidIcon","SuccessTickIcon","InfoSolidIcon","WarningSolidIcon","OverflowMenuIcon","UserSolidIcon","CalendarIcon","CloseIcon","TearOutIcon","StepDefaultIcon","StepActiveIcon","SuccessCircleSolidIcon","LockedIcon","ProgressInprogressIcon","createContext","jsx","useContext"],"mappings":";;;;;;AAoEA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAYA,qBAAA;AAAA,EACZ,YAAA,EAAcC,mBAAA;AAAA,EACd,eAAA,EAAiBC,sBAAA;AAAA,EACjB,iBAAA,EAAmBF,qBAAA;AAAA,EACnB,QAAA,EAAUE,sBAAA;AAAA,EACV,YAAA,EAAcC,qBAAA;AAAA,EACd,YAAA,EAAcC,oBAAA;AAAA,EACd,YAAA,EAAcC,sBAAA;AAAA,cACdC,gBAAA;AAAA,EACA,SAAA,EAAWC,oBAAA;AAAA,EACX,WAAA,EAAaC,qBAAA;AAAA,EACb,QAAA,EAAUC,mBAAA;AAAA,EACV,WAAA,EAAaC,sBAAA;AAAA,EACb,YAAA,EAAcC,sBAAA;AAAA,EACd,QAAA,EAAUC,mBAAA;AAAA,gBACVC,kBAAA;AAAA,aACAC,eAAA;AAAA,EACA,YAAA,EAAcC,iBAAA;AAAA,EACd,WAAA,EAAaC,qBAAA;AAAA,EACb,UAAA,EAAYC,oBAAA;AAAA,EACZ,aAAA,EAAeC,4BAAA;AAAA,cACfC,gBAAA;AAAA,EACA,cAAA,EAAgBC;AAClB,CAAA;AAEA,MAAM,mBAAA,GAAsBC,oBAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACEC,cAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;;"}
1
+ {"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\n\nexport type SemanticIconMap = {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n};\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessCircleSolidIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":["ChevronDownIcon","ChevronUpIcon","ChevronRightIcon","ChevronLeftIcon","TriangleUpIcon","TriangleDownIcon","UploadIcon","ErrorSolidIcon","SuccessCircleSolidIcon","InfoSolidIcon","WarningSolidIcon","OverflowMenuIcon","UserSolidIcon","CalendarIcon","CloseIcon","TearOutIcon","StepDefaultIcon","StepActiveIcon","LockedIcon","ProgressInprogressIcon","createContext","jsx","useContext"],"mappings":";;;;;;AAmEA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAYA,qBAAA;AAAA,EACZ,YAAA,EAAcC,mBAAA;AAAA,EACd,eAAA,EAAiBC,sBAAA;AAAA,EACjB,iBAAA,EAAmBF,qBAAA;AAAA,EACnB,QAAA,EAAUE,sBAAA;AAAA,EACV,YAAA,EAAcC,qBAAA;AAAA,EACd,YAAA,EAAcC,oBAAA;AAAA,EACd,YAAA,EAAcC,sBAAA;AAAA,cACdC,gBAAA;AAAA,EACA,SAAA,EAAWC,oBAAA;AAAA,EACX,WAAA,EAAaC,4BAAA;AAAA,EACb,QAAA,EAAUC,mBAAA;AAAA,EACV,WAAA,EAAaC,sBAAA;AAAA,EACb,YAAA,EAAcC,sBAAA;AAAA,EACd,QAAA,EAAUC,mBAAA;AAAA,gBACVC,kBAAA;AAAA,aACAC,eAAA;AAAA,EACA,YAAA,EAAcC,iBAAA;AAAA,EACd,WAAA,EAAaC,qBAAA;AAAA,EACb,UAAA,EAAYC,oBAAA;AAAA,EACZ,aAAA,EAAeT,4BAAA;AAAA,cACfU,gBAAA;AAAA,EACA,cAAA,EAAgBC;AAClB,CAAA;AAEA,MAAM,mBAAA,GAAsBC,oBAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACEC,cAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;;"}
package/dist-cjs/toggle-button/ToggleButton.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltToggleButton {\n --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: center;\n appearance: none;\n background: var(--toggleButton-background);\n border-color: var(--toggleButton-borderColor, transparent);\n border-style: solid;\n border-width: var(--toggleButton-borderWidth);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--toggleButton-text-color);\n cursor: pointer;\n display: inline-flex;\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n margin: 0;\n min-width: unset;\n position: relative;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n transition: none;\n width: auto;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton:hover {\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n cursor: var(--salt-cursor-active);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-disabled);\n color: var(--toggleButton-text-color-disabled);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor-disabled);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-disabled-selected);\n color: var(--toggleButton-text-color-disabled-selected);\n border-color: var(--toggleButton-borderColor-disabled-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n background: var(--toggleButton-background-readonly);\n color: var(--toggleButton-text-color-readonly);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor-readonly);\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n background: var(--toggleButton-background-readonly-selected);\n color: var(--toggleButton-text-color-readonly-selected);\n border-color: var(--toggleButton-borderColor-readonly-selected);\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-accented-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-positive-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-negative-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-bold-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-caution-bold-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-bold-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-foreground);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-background);\n --toggleButton-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-background);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-border);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-borderColor);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-accented-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-accented-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-accented-foreground);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-accented-background);\n --toggleButton-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-accented-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-accented-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-accented-background);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-accented-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-accented-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-accented-borderColor);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-positive-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-positive-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-positive-foreground);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-positive-background);\n --toggleButton-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-positive-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-positive-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-positive-background);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-positive-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-positive-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-positive-borderColor);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-negative-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-negative-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-negative-foreground);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-negative-background);\n --toggleButton-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-negative-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-negative-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-negative-background);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-negative-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-negative-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-negative-borderColor);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-disabled-selected: var(--salt-actionable-caution-foreground-disabled);\n --toggleButton-text-color-readonly: var(--salt-actionable-caution-subtle-foreground-disabled);\n --toggleButton-text-color-readonly-selected: var(--salt-actionable-caution-foreground);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-selected: var(--salt-actionable-caution-background);\n --toggleButton-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-disabled-selected: var(--salt-actionable-caution-background-disabled);\n --toggleButton-background-readonly: var(--salt-actionable-caution-subtle-background-disabled);\n --toggleButton-background-readonly-selected: var(--salt-actionable-caution-background);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-disabled-selected: var(--salt-actionable-caution-borderColor-disabled);\n --toggleButton-borderColor-readonly: var(--salt-actionable-caution-subtle-borderColor-disabled);\n --toggleButton-borderColor-readonly-selected: var(--salt-actionable-caution-borderColor);\n}\n";
3
+ var css_248z = ".saltToggleButton {\n --toggleButton-borderWidth: var(--salt-size-fixed-100);\n\n align-items: center;\n appearance: none;\n background: var(--toggleButton-background);\n border-color: var(--toggleButton-borderColor, transparent);\n border-style: solid;\n border-width: var(--toggleButton-borderWidth);\n border-radius: var(--salt-palette-corner-weak, 0);\n box-sizing: border-box;\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-hover);\n display: inline-flex;\n gap: var(--salt-spacing-50);\n height: var(--salt-size-base);\n justify-content: center;\n line-height: var(--salt-text-lineHeight);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-action-fontWeight);\n font-family: var(--salt-text-action-fontFamily);\n letter-spacing: var(--salt-text-action-letterSpacing);\n text-transform: var(--salt-text-action-textTransform);\n padding: 0 calc(var(--salt-spacing-100) - var(--toggleButton-borderWidth));\n margin: 0;\n min-width: unset;\n position: relative;\n text-align: var(--salt-text-action-textAlign);\n text-decoration: none;\n transition: none;\n width: auto;\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n}\n\n.saltToggleButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n}\n\n@media (hover: hover) {\n .saltToggleButton:hover {\n background: var(--toggleButton-background-hover);\n color: var(--toggleButton-text-color-hover);\n border-color: var(--toggleButton-borderColor-hover);\n }\n}\n\n.saltToggleButton:active {\n background: var(--toggleButton-background-active);\n color: var(--toggleButton-text-color-active);\n border-color: var(--toggleButton-borderColor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n cursor: var(--salt-cursor-active);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:hover {\n cursor: unset;\n}\n\n.saltToggleButton[aria-pressed=\"true\"]:hover {\n border-color: var(--toggleButton-borderColor-selectedHover);\n}\n\n.saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background);\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor);\n\n opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton[aria-disabled=\"true\"],\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton[aria-disabled=\"true\"] {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n border-color: var(--toggleButton-borderColor-selected);\n}\n\n.saltToggleButton.saltToggleButton-readOnly {\n background: var(--toggleButton-background);\n color: var(--toggleButton-text-color);\n cursor: var(--salt-cursor-disabled);\n border-color: var(--toggleButton-borderColor);\n\n opacity: 0.4;\n}\n\n.saltToggleButton[aria-checked=\"true\"].saltToggleButton-readOnly,\n.saltToggleButton[aria-pressed=\"true\"].saltToggleButton-readOnly {\n background: var(--toggleButton-background-selected);\n color: var(--toggleButton-text-color-selected);\n border-color: var(--toggleButton-borderColor-selected);\n\n opacity: unset;\n}\n\n.saltToggleButton-neutral.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n --toggleButton-background: var(--salt-actionable-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-accented-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n --toggleButton-background: var(--salt-actionable-accented-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-accented-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-positive-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n --toggleButton-background: var(--salt-actionable-positive-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-positive-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-negative-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n --toggleButton-background: var(--salt-actionable-negative-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-negative-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-solid {\n --toggleButton-text-color: var(--salt-actionable-caution-subtle-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n --toggleButton-background: var(--salt-actionable-caution-subtle-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --toggleButton-background-active: var(--salt-actionable-caution-subtle-background-active);\n --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --toggleButton-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n}\n\n.saltToggleButton-neutral.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-foreground-selected);\n --toggleButton-background: var(--salt-actionable-background);\n --toggleButton-background-hover: var(--salt-actionable-background-hover);\n --toggleButton-background-active: var(--salt-actionable-background);\n --toggleButton-background-selected: var(--salt-actionable-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltToggleButton-accented.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-accented-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-accented-foreground-selected);\n --toggleButton-background: var(--salt-actionable-accented-background);\n --toggleButton-background-hover: var(--salt-actionable-accented-background-hover);\n --toggleButton-background-active: var(--salt-actionable-accented-background);\n --toggleButton-background-selected: var(--salt-actionable-accented-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-accented-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-accented-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-accented-bold-borderColor-hover);\n}\n\n.saltToggleButton-positive.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-positive-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-positive-foreground-selected);\n --toggleButton-background: var(--salt-actionable-positive-background);\n --toggleButton-background-hover: var(--salt-actionable-positive-background-hover);\n --toggleButton-background-active: var(--salt-actionable-positive-background);\n --toggleButton-background-selected: var(--salt-actionable-positive-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-positive-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-positive-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-positive-bold-borderColor-hover);\n}\n\n.saltToggleButton-negative.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-negative-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-negative-foreground-selected);\n --toggleButton-background: var(--salt-actionable-negative-background);\n --toggleButton-background-hover: var(--salt-actionable-negative-background-hover);\n --toggleButton-background-active: var(--salt-actionable-negative-background);\n --toggleButton-background-selected: var(--salt-actionable-negative-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-negative-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-negative-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-negative-bold-borderColor-hover);\n}\n\n.saltToggleButton-caution.saltToggleButton-bordered {\n --toggleButton-text-color: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --toggleButton-text-color-active: var(--salt-actionable-caution-foreground);\n --toggleButton-text-color-selected: var(--salt-actionable-caution-foreground-selected);\n --toggleButton-background: var(--salt-actionable-caution-background);\n --toggleButton-background-hover: var(--salt-actionable-caution-background-hover);\n --toggleButton-background-active: var(--salt-actionable-caution-background);\n --toggleButton-background-selected: var(--salt-actionable-caution-background-selected);\n --toggleButton-borderColor: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-active: var(--salt-actionable-caution-borderColor);\n --toggleButton-borderColor-selected: var(--salt-actionable-caution-borderColor-selected);\n --toggleButton-borderColor-selectedHover: var(--salt-actionable-caution-bold-borderColor-hover);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=ToggleButton.css.js.map
package/dist-cjs/vertical-navigation/VerticalNavigationItemContent.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-h4-fontWeight);\n font-family: var(--salt-text-h4-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-h4-lineHeight);\n font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n left: var(--salt-spacing-50);\n content: \"\";\n position: absolute;\n height: var(--salt-size-base);\n border-radius: var(--salt-palette-corner-strongest);\n width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n background: var(--salt-overlayable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n font-weight: var(--salt-text-h4-fontWeight);\n}\n\n@supports selector(:has(*)) {\n .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);\n }\n}\n";
3
+ var css_248z = ".saltVerticalNavigationItemContent {\n --verticalNavigationItem-iconPadding: calc(var(--saltVerticalNavigationItem-iconPaddingMultiplier, 0) * (var(--salt-size-icon) + var(--salt-spacing-100)));\n --verticalNavigationItem-depthPadding: calc(var(--salt-spacing-100) * max(0, calc(var(--verticalNavigationItem-depth, 0) - 1)));\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-150) + var(--salt-size-indicator) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: var(--salt-spacing-50);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n --verticalNavigationItem-paddingLeft: calc(var(--salt-spacing-100) + var(--verticalNavigationItem-depthPadding) + var(--verticalNavigationItem-iconPadding));\n --verticalNavigationItem-paddingBlock: calc(var(--salt-spacing-50) - var(--salt-size-fixed-100));\n}\n\n.saltVerticalNavigationItemContent {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n appearance: none;\n -webkit-appearance: none;\n min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n min-width: 4em;\n padding: var(--verticalNavigationItem-paddingBlock) var(--salt-spacing-100) var(--verticalNavigationItem-paddingBlock) var(--verticalNavigationItem-paddingLeft);\n position: relative;\n flex-shrink: 0;\n box-sizing: border-box;\n border-radius: var(--salt-palette-corner-weak, 0);\n overflow: hidden;\n\n cursor: var(--salt-cursor-hover);\n color: var(--salt-content-primary-foreground);\n font-weight: var(--salt-text-h4-fontWeight);\n font-family: var(--salt-text-h4-fontFamily);\n text-align: var(--salt-text-textAlign);\n letter-spacing: var(--salt-text-letterSpacing);\n line-height: var(--salt-text-h4-lineHeight);\n font-size: var(--salt-text-h4-fontSize);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent::before {\n left: var(--salt-spacing-50);\n content: \"\";\n position: absolute;\n top: var(--salt-spacing-50);\n bottom: var(--salt-spacing-50);\n border-radius: var(--salt-palette-corner-strongest);\n width: var(--salt-size-indicator);\n}\n\n.saltVerticalNavigation-indicator .saltVerticalNavigationItemContent-active::before {\n background: var(--salt-navigable-accent-indicator-active);\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent {\n border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) transparent;\n}\n\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation-bordered .saltVerticalNavigationItemContent-active:hover {\n background: var(--salt-navigable-accent-background-active);\n border-color: var(--salt-navigable-accent-borderColor-active);\n}\n\n.saltVerticalNavigationItemContent .saltIcon,\n.saltVerticalNavigationItemContent .saltBadge {\n min-height: var(--salt-text-lineHeight);\n}\n\n.saltVerticalNavigationItemContent-focused {\n outline: var(--salt-focused-outline);\n outline-offset: calc(var(--salt-size-fixed-100) * -2);\n z-index: 1;\n}\n\n.saltVerticalNavigationItemContent:hover {\n background: var(--salt-overlayable-background-hover);\n}\n\n.saltVerticalNavigation .saltVerticalNavigationItemContent-active,\n.saltVerticalNavigation .saltVerticalNavigationSubMenu .saltVerticalNavigationItemContent-active {\n font-weight: var(--salt-text-h4-fontWeight);\n}\n\n@supports selector(:has(*)) {\n .saltVerticalNavigationItemContent-active:hover:has(.saltVerticalNavigationItemTrigger[aria-controls]) {\n background: linear-gradient(var(--salt-overlayable-background-hover), var(--salt-overlayable-background-hover)) var(--salt-navigable-accent-background-active);\n }\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=VerticalNavigationItemContent.css.js.map
package/dist-cjs/vertical-navigation/VerticalNavigationItemLabel.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var css_248z = ".saltVerticalNavigationItemLabel {\n flex: 1;\n}\n";
3
+ var css_248z = ".saltVerticalNavigationItemLabel {\n flex: 1;\n}\n\n.saltVerticalNavigationItemLabel + .saltVerticalNavigationItemExpansionIcon {\n padding: 0 var(--salt-spacing-100);\n}\n";
4
4
 
5
5
  module.exports = css_248z;
6
6
  //# sourceMappingURL=VerticalNavigationItemLabel.css.js.map
package/dist-es/button/Button.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-active);\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background-disabled));\n color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled));\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-bold-foreground-disabled);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-disabled: var(--salt-actionable-accented-bold-background-disabled);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-bold-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-foreground-disabled);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-background-disabled: var(--salt-actionable-accented-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-accented-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-accented-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-accented-subtle-borderColor-disabled);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-text-color-disabled: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-background-disabled: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-bold-foreground-disabled);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-background-disabled: var(--salt-actionable-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-bold-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-foreground-disabled);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-background-disabled: var(--salt-actionable-background-disabled);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-subtle-borderColor-disabled);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-text-color-disabled: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-background-disabled: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-bold-foreground-disabled);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-background-disabled: var(--salt-actionable-negative-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-bold-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-foreground-disabled);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-background-disabled: var(--salt-actionable-negative-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-negative-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-negative-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-negative-subtle-borderColor-disabled);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-text-color-disabled: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-background-disabled: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-bold-foreground-disabled);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-background-disabled: var(--salt-actionable-positive-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-bold-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-foreground-disabled);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-background-disabled: var(--salt-actionable-positive-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-positive-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-positive-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-positive-subtle-borderColor-disabled);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-text-color-disabled: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-background-disabled: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-bold-foreground-disabled);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-background-disabled: var(--salt-actionable-caution-bold-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-bold-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-foreground-disabled);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-background-disabled: var(--salt-actionable-caution-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-text-color-disabled: var(--salt-actionable-caution-subtle-foreground-disabled);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-background-disabled: var(--salt-actionable-caution-subtle-background-disabled);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n --button-borderColor-disabled: var(--salt-actionable-caution-subtle-borderColor-disabled);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-text-color-disabled: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-background-disabled: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n --button-borderColor-disabled: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
1
+ var css_248z = ".saltButton {\n --button-borderWidth: var(--salt-size-fixed-100);\n\n align-items: var(--saltButton-alignItems, center);\n appearance: none;\n background: var(--saltButton-background, var(--button-background));\n border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent));\n border-style: var(--saltButton-borderStyle, solid);\n border-width: var(--saltButton-borderWidth, var(--button-borderWidth));\n border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0));\n color: var(--saltButton-text-color, var(--button-text-color));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n justify-content: var(--saltButton-justifyContent, center);\n font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n font-family: var(--saltButton-fontFamily, var(--salt-text-action-fontFamily));\n line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--button-borderWidth))));\n margin: var(--saltButton-margin, 0);\n height: var(--saltButton-height, var(--salt-size-base));\n min-width: var(--saltButton-minWidth, unset);\n position: relative;\n text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n text-decoration: none;\n transition: none;\n width: var(--saltButton-width, auto);\n -webkit-appearance: none;\n -webkit-tap-highlight-color: transparent;\n /* Styles applied to align children*/\n font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n outline-style: var(--salt-focused-outlineStyle);\n outline-width: var(--salt-focused-outlineWidth);\n outline-color: var(--salt-focused-outlineColor);\n outline-offset: var(--salt-focused-outlineOffset);\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible:active {\n background: var(--saltButton-background-active-hover, var(--button-background));\n color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-active);\n}\n\n@media (hover: hover) {\n /* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n .saltButton:hover {\n background: var(--saltButton-background-hover, var(--button-background-hover));\n color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover));\n cursor: var(--salt-cursor-hover);\n }\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n cursor: var(--salt-cursor-active);\n}\n\n/* Styles applied when the button triggers a dialog or menu */\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"menu\"],\n.saltButton[aria-expanded=\"true\"][aria-haspopup=\"dialog\"] {\n background: var(--saltButton-background-active, var(--button-background-active));\n color: var(--saltButton-text-color-active, var(--button-text-color-active));\n border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:focus-visible:active,\n.saltButton-disabled:hover {\n background: var(--saltButton-background-disabled, var(--button-background));\n color: var(--saltButton-text-color-disabled, var(--button-text-color));\n cursor: var(--saltButton-cursor-disabled, var(--salt-cursor-disabled));\n border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor));\n\n opacity: 0.4;\n}\n\n.saltButton-accented.saltButton-solid {\n --button-text-color: var(--salt-actionable-accented-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-bold-foreground-active);\n --button-background: var(--salt-actionable-accented-bold-background);\n --button-background-active: var(--salt-actionable-accented-bold-background-active);\n --button-background-hover: var(--salt-actionable-accented-bold-background-hover);\n --button-borderColor: var(--salt-actionable-accented-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-bold-borderColor-active);\n}\n\n.saltButton-accented.saltButton-bordered {\n --button-text-color: var(--salt-actionable-accented-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-foreground-active);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background-hover);\n --button-background-active: var(--salt-actionable-accented-background-active);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor-active);\n}\n\n.saltButton-accented.saltButton-transparent {\n --button-text-color: var(--salt-actionable-accented-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-accented-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-accented-subtle-foreground-active);\n --button-background: var(--salt-actionable-accented-subtle-background);\n --button-background-hover: var(--salt-actionable-accented-subtle-background-hover);\n --button-background-active: var(--salt-actionable-accented-subtle-background-active);\n --button-borderColor: var(--salt-actionable-accented-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-accented-subtle-borderColor-active);\n}\n\n.saltButton-accented.saltButton-loading {\n --button-text-color: var(--salt-actionable-accented-background);\n --button-text-color-hover: var(--salt-actionable-accented-background);\n --button-text-color-active: var(--salt-actionable-accented-background);\n --button-background: var(--salt-actionable-accented-background);\n --button-background-hover: var(--salt-actionable-accented-background);\n --button-background-active: var(--salt-actionable-accented-background);\n --button-borderColor: var(--salt-actionable-accented-borderColor);\n --button-borderColor-hover: var(--salt-actionable-accented-borderColor);\n --button-borderColor-active: var(--salt-actionable-accented-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-neutral.saltButton-solid {\n --button-text-color: var(--salt-actionable-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-bold-foreground-active);\n --button-background: var(--salt-actionable-bold-background);\n --button-background-hover: var(--salt-actionable-bold-background-hover);\n --button-background-active: var(--salt-actionable-bold-background-active);\n --button-borderColor: var(--salt-actionable-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-bold-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-bordered {\n --button-text-color: var(--salt-actionable-foreground);\n --button-text-color-hover: var(--salt-actionable-foreground-hover);\n --button-text-color-active: var(--salt-actionable-foreground-active);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background-hover);\n --button-background-active: var(--salt-actionable-background-active);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-transparent {\n --button-text-color: var(--salt-actionable-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-subtle-foreground-active);\n --button-background: var(--salt-actionable-subtle-background);\n --button-background-hover: var(--salt-actionable-subtle-background-hover);\n --button-background-active: var(--salt-actionable-subtle-background-active);\n --button-borderColor: var(--salt-actionable-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-subtle-borderColor-active);\n}\n\n.saltButton-neutral.saltButton-loading {\n --button-text-color: var(--salt-actionable-background);\n --button-text-color-hover: var(--salt-actionable-background);\n --button-text-color-active: var(--salt-actionable-background);\n --button-background: var(--salt-actionable-background);\n --button-background-hover: var(--salt-actionable-background);\n --button-background-active: var(--salt-actionable-background);\n --button-borderColor: var(--salt-actionable-borderColor);\n --button-borderColor-hover: var(--salt-actionable-borderColor);\n --button-borderColor-active: var(--salt-actionable-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-negative.saltButton-solid {\n --button-text-color: var(--salt-actionable-negative-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-bold-foreground-active);\n --button-background: var(--salt-actionable-negative-bold-background);\n --button-background-hover: var(--salt-actionable-negative-bold-background-hover);\n --button-background-active: var(--salt-actionable-negative-bold-background-active);\n --button-borderColor: var(--salt-actionable-negative-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-bold-borderColor-active);\n}\n\n.saltButton-negative.saltButton-bordered {\n --button-text-color: var(--salt-actionable-negative-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-foreground-active);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background-hover);\n --button-background-active: var(--salt-actionable-negative-background-active);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor-active);\n}\n\n.saltButton-negative.saltButton-transparent {\n --button-text-color: var(--salt-actionable-negative-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-negative-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-negative-subtle-foreground-active);\n --button-background: var(--salt-actionable-negative-subtle-background);\n --button-background-hover: var(--salt-actionable-negative-subtle-background-hover);\n --button-background-active: var(--salt-actionable-negative-subtle-background-active);\n --button-borderColor: var(--salt-actionable-negative-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-negative-subtle-borderColor-active);\n}\n\n.saltButton-negative.saltButton-loading {\n --button-text-color: var(--salt-actionable-negative-background);\n --button-text-color-hover: var(--salt-actionable-negative-background);\n --button-text-color-active: var(--salt-actionable-negative-background);\n --button-background: var(--salt-actionable-negative-background);\n --button-background-hover: var(--salt-actionable-negative-background);\n --button-background-active: var(--salt-actionable-negative-background);\n --button-borderColor: var(--salt-actionable-negative-borderColor);\n --button-borderColor-hover: var(--salt-actionable-negative-borderColor);\n --button-borderColor-active: var(--salt-actionable-negative-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-positive.saltButton-solid {\n --button-text-color: var(--salt-actionable-positive-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-bold-foreground-active);\n --button-background: var(--salt-actionable-positive-bold-background);\n --button-background-hover: var(--salt-actionable-positive-bold-background-hover);\n --button-background-active: var(--salt-actionable-positive-bold-background-active);\n --button-borderColor: var(--salt-actionable-positive-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-bold-borderColor-active);\n}\n\n.saltButton-positive.saltButton-bordered {\n --button-text-color: var(--salt-actionable-positive-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-foreground-active);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background-hover);\n --button-background-active: var(--salt-actionable-positive-background-active);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor-active);\n}\n\n.saltButton-positive.saltButton-transparent {\n --button-text-color: var(--salt-actionable-positive-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-positive-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-positive-subtle-foreground-active);\n --button-background: var(--salt-actionable-positive-subtle-background);\n --button-background-hover: var(--salt-actionable-positive-subtle-background-hover);\n --button-background-active: var(--salt-actionable-positive-subtle-background-active);\n --button-borderColor: var(--salt-actionable-positive-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-positive-subtle-borderColor-active);\n}\n\n.saltButton-positive.saltButton-loading {\n --button-text-color: var(--salt-actionable-positive-background);\n --button-text-color-hover: var(--salt-actionable-positive-background);\n --button-text-color-active: var(--salt-actionable-positive-background);\n --button-background: var(--salt-actionable-positive-background);\n --button-background-hover: var(--salt-actionable-positive-background);\n --button-background-active: var(--salt-actionable-positive-background);\n --button-borderColor: var(--salt-actionable-positive-borderColor);\n --button-borderColor-hover: var(--salt-actionable-positive-borderColor);\n --button-borderColor-active: var(--salt-actionable-positive-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton-caution.saltButton-solid {\n --button-text-color: var(--salt-actionable-caution-bold-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-bold-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-bold-foreground-active);\n --button-background: var(--salt-actionable-caution-bold-background);\n --button-background-hover: var(--salt-actionable-caution-bold-background-hover);\n --button-background-active: var(--salt-actionable-caution-bold-background-active);\n --button-borderColor: var(--salt-actionable-caution-bold-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-bold-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-bold-borderColor-active);\n}\n\n.saltButton-caution.saltButton-bordered {\n --button-text-color: var(--salt-actionable-caution-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-foreground-active);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background-hover);\n --button-background-active: var(--salt-actionable-caution-background-active);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor-active);\n}\n\n.saltButton-caution.saltButton-transparent {\n --button-text-color: var(--salt-actionable-caution-subtle-foreground);\n --button-text-color-hover: var(--salt-actionable-caution-subtle-foreground-hover);\n --button-text-color-active: var(--salt-actionable-caution-subtle-foreground-active);\n --button-background: var(--salt-actionable-caution-subtle-background);\n --button-background-hover: var(--salt-actionable-caution-subtle-background-hover);\n --button-background-active: var(--salt-actionable-caution-subtle-background-active);\n --button-borderColor: var(--salt-actionable-caution-subtle-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-subtle-borderColor-hover);\n --button-borderColor-active: var(--salt-actionable-caution-subtle-borderColor-active);\n}\n\n.saltButton-caution.saltButton-loading {\n --button-text-color: var(--salt-actionable-caution-background);\n --button-text-color-hover: var(--salt-actionable-caution-background);\n --button-text-color-active: var(--salt-actionable-caution-background);\n --button-background: var(--salt-actionable-caution-background);\n --button-background-hover: var(--salt-actionable-caution-background);\n --button-background-active: var(--salt-actionable-caution-background);\n --button-borderColor: var(--salt-actionable-caution-borderColor);\n --button-borderColor-hover: var(--salt-actionable-caution-borderColor);\n --button-borderColor-active: var(--salt-actionable-caution-borderColor);\n cursor: var(--salt-cursor-pending);\n}\n\n.saltButton strong {\n font-weight: var(--salt-text-action-fontWeight-strong);\n}\n\n.saltButton small {\n font-size: inherit;\n font-weight: var(--salt-text-action-fontWeight-small);\n}\n\n.saltButton-spinner {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.saltButton-sr-only {\n position: fixed;\n top: 0;\n left: 0;\n transform: translate(-100%, -100%);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Button.css.js.map
package/dist-es/form-field/FormFieldHelperText.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltFormFieldHelperText {\n cursor: default;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n column-gap: var(--salt-spacing-75);\n}\n\n.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {\n margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n}\n";
1
+ var css_248z = ".saltFormFieldHelperText {\n cursor: default;\n display: flex;\n flex-direction: row;\n width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n font-style: var(--saltFormField-helperText-fontStyle, var(--salt-typography-textDecoration-italic));\n}\n\n.saltFormFieldHelperText-withValidation {\n column-gap: var(--salt-spacing-75);\n}\n\n.saltFormFieldHelperText .saltFormFieldHelperText-statusIndicator {\n margin-top: calc((var(--salt-text-label-lineHeight) - max(var(--salt-size-icon), 12px)) / 2);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=FormFieldHelperText.css.js.map
package/dist-es/form-field/FormFieldLabel.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-editable-help-fontStyle);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-fontSize);\n}\n";
1
+ var css_248z = ".saltFormFieldLabel.saltText {\n font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormField-controls * {\n --input-borderColor: var(--input-borderColor-hover);\n}\n\n.saltFormField-labelLeft .saltFormFieldLabel.saltText {\n align-self: baseline;\n padding-top: var(--salt-spacing-100);\n}\n\n.saltFormField-labelTop .saltFormFieldLabel.saltText {\n width: fit-content;\n}\n\n.saltFormFieldLabel-necessityLabel {\n font-weight: var(--salt-text-fontWeight);\n font-style: var(--salt-typography-textDecoration-italic);\n}\n\n.saltFormFieldLabel-sentence.saltText {\n color: var(--salt-content-primary-foreground);\n font-size: var(--salt-text-fontSize);\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=FormFieldLabel.css.js.map
package/dist-es/pill/Pill.css.js CHANGED
@@ -1,4 +1,4 @@
1
- var css_248z = "/* Styles applied to the root element */\n.saltPill {\n --pill-borderWidth: var(--salt-size-fixed-100);\n\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--pill-background));\n border-radius: var(--salt-palette-corner-weaker, 0);\n border-style: solid;\n border-width: var(--pill-borderWidth);\n border-color: var(--pill-borderColor);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n position: relative;\n gap: var(--salt-spacing-50);\n padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n color: var(--saltPill-color, var(--pill-color));\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n --pill-background: var(--salt-actionable-bold-background);\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n --pill-color: var(--salt-actionable-bold-foreground-hover);\n --pill-background: var(--salt-actionable-bold-background-hover);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n --pill-color: var(--salt-actionable-bold-foreground-disabled);\n --pill-background: var(--salt-actionable-bold-background-disabled);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);\n cursor: var(--salt-cursor-disabled);\n}\n";
1
+ var css_248z = "/* Styles applied to the root element */\n.saltPill {\n --pill-borderWidth: var(--salt-size-fixed-100);\n\n appearance: none;\n display: inline-flex;\n align-items: center;\n background: var(--saltPill-background, var(--pill-background));\n border-radius: var(--salt-palette-corner-weaker, 0);\n border-style: solid;\n border-width: var(--pill-borderWidth);\n border-color: var(--pill-borderColor);\n height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n min-height: var(--salt-text-minHeight);\n position: relative;\n gap: var(--salt-spacing-50);\n padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n color: var(--saltPill-color, var(--pill-color));\n font-family: var(--salt-text-fontFamily);\n font-size: var(--salt-text-fontSize);\n font-weight: var(--salt-text-fontWeight);\n line-height: var(--salt-text-lineHeight);\n letter-spacing: var(--salt-text-letterSpacing);\n overflow: hidden;\n white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable */\n.saltPill-clickable {\n --pill-background: var(--salt-actionable-bold-background);\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n --pill-color: var(--salt-actionable-bold-foreground-hover);\n --pill-background: var(--salt-actionable-bold-background-hover);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n --pill-color: var(--salt-actionable-bold-foreground-active);\n --pill-background: var(--salt-actionable-bold-background-active);\n --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n --pill-color: var(--salt-actionable-bold-foreground);\n --pill-background: var(--salt-actionable-bold-background);\n --pill-borderColor: var(--salt-actionable-bold-borderColor);\n cursor: var(--salt-cursor-disabled);\n\n opacity: 0.4;\n}\n";
2
2
 
3
3
  export { css_248z as default };
4
4
  //# sourceMappingURL=Pill.css.js.map
package/dist-es/semantic-icon-provider/SemanticIconProvider.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
- import { ProgressInprogressIcon, LockedIcon, SuccessCircleSolidIcon, StepActiveIcon, StepDefaultIcon, TearOutIcon, CloseIcon, CalendarIcon, UserSolidIcon, OverflowMenuIcon, WarningSolidIcon, InfoSolidIcon, SuccessTickIcon, ErrorSolidIcon, UploadIcon, TriangleDownIcon, TriangleUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from '@salt-ds/icons';
2
+ import { ProgressInprogressIcon, LockedIcon, SuccessCircleSolidIcon, StepActiveIcon, StepDefaultIcon, TearOutIcon, CloseIcon, CalendarIcon, UserSolidIcon, OverflowMenuIcon, WarningSolidIcon, InfoSolidIcon, ErrorSolidIcon, UploadIcon, TriangleDownIcon, TriangleUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, ChevronUpIcon } from '@salt-ds/icons';
3
3
  import { createContext, useContext } from 'react';
4
4
 
5
5
  const defaultIconMap = {
@@ -13,7 +13,7 @@ const defaultIconMap = {
13
13
  DecreaseIcon: TriangleDownIcon,
14
14
  UploadIcon,
15
15
  ErrorIcon: ErrorSolidIcon,
16
- SuccessIcon: SuccessTickIcon,
16
+ SuccessIcon: SuccessCircleSolidIcon,
17
17
  InfoIcon: InfoSolidIcon,
18
18
  WarningIcon: WarningSolidIcon,
19
19
  OverflowIcon: OverflowMenuIcon,
package/dist-es/semantic-icon-provider/SemanticIconProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n SuccessTickIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\n\nexport type SemanticIconMap = {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n};\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessTickIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;AAoEA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,aAAA;AAAA,EACd,eAAA,EAAiB,gBAAA;AAAA,EACjB,iBAAA,EAAmB,eAAA;AAAA,EACnB,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,eAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,YAAA,EAAc,gBAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAA,EAAW,cAAA;AAAA,EACX,WAAA,EAAa,eAAA;AAAA,EACb,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa,gBAAA;AAAA,EACb,YAAA,EAAc,gBAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,WAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,UAAA,EAAY,cAAA;AAAA,EACZ,aAAA,EAAe,sBAAA;AAAA,EACf,UAAA;AAAA,EACA,cAAA,EAAgB;AAClB,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}
1
+ {"version":3,"file":"SemanticIconProvider.js","sources":["../src/semantic-icon-provider/SemanticIconProvider.tsx"],"sourcesContent":["import {\n CalendarIcon,\n ChevronDownIcon,\n ChevronLeftIcon,\n ChevronRightIcon,\n ChevronUpIcon,\n CloseIcon,\n ErrorSolidIcon,\n InfoSolidIcon,\n LockedIcon,\n OverflowMenuIcon,\n ProgressInprogressIcon,\n StepActiveIcon,\n StepDefaultIcon,\n SuccessCircleSolidIcon,\n TearOutIcon,\n TriangleDownIcon,\n TriangleUpIcon,\n UploadIcon,\n UserSolidIcon,\n WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport {\n createContext,\n type ElementType,\n type ReactNode,\n useContext,\n} from \"react\";\n\nexport type SemanticIconMap = {\n ExpandIcon: ElementType;\n CollapseIcon: ElementType;\n ExpandGroupIcon: ElementType;\n CollapseGroupIcon: ElementType;\n NextIcon: ElementType;\n PreviousIcon: ElementType;\n IncreaseIcon: ElementType;\n DecreaseIcon: ElementType;\n UploadIcon: ElementType;\n ErrorIcon: ElementType;\n SuccessIcon: ElementType;\n InfoIcon: ElementType;\n WarningIcon: ElementType;\n OverflowIcon: ElementType;\n UserIcon: ElementType;\n CalendarIcon: ElementType;\n CloseIcon: ElementType;\n ExternalIcon: ElementType;\n PendingIcon: ElementType;\n ActiveIcon: ElementType;\n CompletedIcon: ElementType;\n LockedIcon: ElementType;\n InProgressIcon: ElementType;\n};\n\nexport interface SemanticIconProviderProps {\n /**\n * Custom mapping of icon names to components. Overrides default icons if provided.\n */\n iconMap?: Partial<SemanticIconMap>;\n\n /**\n * Child elements that will use the provided icons.\n */\n children: ReactNode;\n}\n\nconst defaultIconMap: SemanticIconMap = {\n ExpandIcon: ChevronDownIcon,\n CollapseIcon: ChevronUpIcon,\n ExpandGroupIcon: ChevronRightIcon,\n CollapseGroupIcon: ChevronDownIcon,\n NextIcon: ChevronRightIcon,\n PreviousIcon: ChevronLeftIcon,\n IncreaseIcon: TriangleUpIcon,\n DecreaseIcon: TriangleDownIcon,\n UploadIcon,\n ErrorIcon: ErrorSolidIcon,\n SuccessIcon: SuccessCircleSolidIcon,\n InfoIcon: InfoSolidIcon,\n WarningIcon: WarningSolidIcon,\n OverflowIcon: OverflowMenuIcon,\n UserIcon: UserSolidIcon,\n CalendarIcon: CalendarIcon,\n CloseIcon: CloseIcon,\n ExternalIcon: TearOutIcon,\n PendingIcon: StepDefaultIcon,\n ActiveIcon: StepActiveIcon,\n CompletedIcon: SuccessCircleSolidIcon,\n LockedIcon: LockedIcon,\n InProgressIcon: ProgressInprogressIcon,\n};\n\nconst SemanticIconContext = createContext<SemanticIconMap>(defaultIconMap);\n\nexport const SemanticIconProvider = ({\n iconMap = {},\n children,\n}: SemanticIconProviderProps) => (\n <SemanticIconContext.Provider value={{ ...defaultIconMap, ...iconMap }}>\n {children}\n </SemanticIconContext.Provider>\n);\n\nexport const useIcon = () => {\n const context = useContext(SemanticIconContext);\n return context || defaultIconMap;\n};\n"],"names":[],"mappings":";;;;AAmEA,MAAM,cAAA,GAAkC;AAAA,EACtC,UAAA,EAAY,eAAA;AAAA,EACZ,YAAA,EAAc,aAAA;AAAA,EACd,eAAA,EAAiB,gBAAA;AAAA,EACjB,iBAAA,EAAmB,eAAA;AAAA,EACnB,QAAA,EAAU,gBAAA;AAAA,EACV,YAAA,EAAc,eAAA;AAAA,EACd,YAAA,EAAc,cAAA;AAAA,EACd,YAAA,EAAc,gBAAA;AAAA,EACd,UAAA;AAAA,EACA,SAAA,EAAW,cAAA;AAAA,EACX,WAAA,EAAa,sBAAA;AAAA,EACb,QAAA,EAAU,aAAA;AAAA,EACV,WAAA,EAAa,gBAAA;AAAA,EACb,YAAA,EAAc,gBAAA;AAAA,EACd,QAAA,EAAU,aAAA;AAAA,EACV,YAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,WAAA;AAAA,EACd,WAAA,EAAa,eAAA;AAAA,EACb,UAAA,EAAY,cAAA;AAAA,EACZ,aAAA,EAAe,sBAAA;AAAA,EACf,UAAA;AAAA,EACA,cAAA,EAAgB;AAClB,CAAA;AAEA,MAAM,mBAAA,GAAsB,cAA+B,cAAc,CAAA;AAElE,MAAM,uBAAuB,CAAC;AAAA,EACnC,UAAU,EAAC;AAAA,EACX;AACF,CAAA,qBACE,GAAA,CAAC,mBAAA,CAAoB,QAAA,EAApB,EAA6B,KAAA,EAAO,EAAE,GAAG,cAAA,EAAgB,GAAG,OAAA,EAAQ,EAClE,QAAA,EACH;AAGK,MAAM,UAAU,MAAM;AAC3B,EAAA,MAAM,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,OAAO,OAAA,IAAW,cAAA;AACpB;;;;"}