@salt-ds/lab 1.0.0-alpha.20 → 1.0.0-alpha.22

package/dist-es/contact-details/ContactDetails.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-touch {\n  --contactDetails-default-primary-fontSize: 30px;\n  --contactDetails-default-secondary-fontSize: 16px;\n  --contactDetails-compact-primary-fontSize: 16px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-icon-size: 18px;\n  --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n  --contactDetails-compact-primary-fontSize: 14px;\n  --contactDetails-default-primary-fontSize: 24px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-default-secondary-fontSize: 14px;\n  --contactDetails-label-width: 70px;\n  --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n  --contactDetails-compact-primary-fontSize: 12px;\n  --contactDetails-default-primary-fontSize: 18px;\n  --contactDetails-compact-secondary-fontSize: 12px;\n  --contactDetails-default-secondary-fontSize: 12px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n  --contactDetails-compact-primary-fontSize: 11px;\n  --contactDetails-default-primary-fontSize: 14px;\n  --contactDetails-compact-secondary-fontSize: 11px;\n  --contactDetails-default-secondary-fontSize: 11px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n  --contactDetails-color: var(--salt-text-primary-foreground);\n  --contactDetails-label-color: var(--salt-text-secondary-foreground);\n  --contactDetails-noAvatar-color: var(--salt-accent-background);\n  --contactDetails-noAvatar-indicator-width: 4px;\n  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n  --contactDetails-favoriteToggle-marginRight: 0px;\n  --contactDetails-favoriteToggle-marginTop: 0px;\n  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n  /* TODO: Check below tokens with design */\n  --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n  display: grid;\n  padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n  padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n  padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n  color: var(--contactDetails-color);\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary secondary\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions metadataExpander\"\n    \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar avatar\"\n    \"noAvatar primary favorite\"\n    \"noAvatar secondary secondary\"\n    \"noAvatar tertiary tertiary\"\n    \". actions metadataExpander\"\n    \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n  grid-template-columns: auto auto auto 1fr auto;\n  grid-template-rows: auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary primary favorite\"\n    \"noAvatar avatar secondary tertiary tertiary\"\n    \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary favorite\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  grid-template-columns: auto minmax(60px, 1fr) auto;\n  grid-template-rows: auto;\n  grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n  grid-area: noAvatar;\n  width: var(--contactDetails-noAvatar-indicator-width);\n  background: var(--contactDetails-noAvatar-color);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n  grid-area: avatar;\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n  grid-area: actions;\n  display: flex;\n  margin-top: var(--salt-size-unit);\n  margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n  grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n  grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n  grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n  margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n  grid-area: metadata;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-size-unit);\n  padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n  grid-area: metadataExpander;\n  margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n  width: 100%;\n  height: 1px;\n  background: var(--contactDetails-separator-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n  margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n  margin-right: calc(var(--salt-size-unit) * 2);\n  padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n  flex-shrink: 0;\n  color: var(--contactDetails-label-color);\n  margin-right: calc(var(--salt-size-unit) * 2);\n  width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n  align-self: start;\n  grid-area: favorite;\n  justify-self: center;\n  line-height: var(--contactDetails-primary-fontSize);\n  margin-right: var(--contactDetails-favoriteToggle-marginRight);\n  margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n  fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n  outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n  outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n  --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n  height: var(--contactDetails-icon-size);\n  width: var(--contactDetails-icon-size);\n}\n";
+var css_248z = ".salt-density-touch {\n  --contactDetails-default-primary-fontSize: 30px;\n  --contactDetails-default-secondary-fontSize: 16px;\n  --contactDetails-compact-primary-fontSize: 16px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-icon-size: 18px;\n  --contactDetails-label-width: 80px;\n}\n\n.salt-density-low {\n  --contactDetails-compact-primary-fontSize: 14px;\n  --contactDetails-default-primary-fontSize: 24px;\n  --contactDetails-compact-secondary-fontSize: 14px;\n  --contactDetails-default-secondary-fontSize: 14px;\n  --contactDetails-label-width: 70px;\n  --contactDetails-icon-size: 16px;\n}\n\n.salt-density-medium {\n  --contactDetails-compact-primary-fontSize: 12px;\n  --contactDetails-default-primary-fontSize: 18px;\n  --contactDetails-compact-secondary-fontSize: 12px;\n  --contactDetails-default-secondary-fontSize: 12px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 14px;\n}\n\n.salt-density-high {\n  --contactDetails-compact-primary-fontSize: 11px;\n  --contactDetails-default-primary-fontSize: 14px;\n  --contactDetails-compact-secondary-fontSize: 11px;\n  --contactDetails-default-secondary-fontSize: 11px;\n  --contactDetails-label-width: 60px;\n  --contactDetails-icon-size: 12px;\n}\n\n.saltContactDetails {\n  --contactDetails-color: var(--salt-content-primary-foreground);\n  --contactDetails-label-color: var(--salt-content-secondary-foreground);\n  --contactDetails-noAvatar-color: var(--salt-accent-background);\n  --contactDetails-noAvatar-indicator-width: 4px;\n  --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color);\n  --contactDetails-favoriteToggle-marginRight: 0px;\n  --contactDetails-favoriteToggle-marginTop: 0px;\n  --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit);\n  --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2);\n  --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit);\n\n  /* TODO: Check below tokens with design */\n  --contactDetails-separator-color: var(--salt-separable-secondary-borderColor);\n}\n\n.saltContactDetails {\n  display: grid;\n  padding: var(--salt-size-unit);\n}\n\n.saltContactDetails.saltContactDetails-noAvatar {\n  padding-left: 0;\n}\n\n.saltContactDetails.saltContactDetails-embedded {\n  padding: 0;\n}\n\n.saltContactDetails-default,\n.saltContactDetails-default-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize);\n}\n\n.saltContactDetails-compact,\n.saltContactDetails-compact-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize);\n  --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize);\n}\n\n.saltContactDetails-default {\n  color: var(--contactDetails-color);\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary secondary\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions metadataExpander\"\n    \". . metadata metadata\";\n}\n\n.saltContactDetails-default-stacked {\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto auto auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar avatar\"\n    \"noAvatar primary favorite\"\n    \"noAvatar secondary secondary\"\n    \"noAvatar tertiary tertiary\"\n    \". actions metadataExpander\"\n    \". metadata metadata\";\n}\n\n.saltContactDetails-compact {\n  grid-template-columns: auto auto auto 1fr auto;\n  grid-template-rows: auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary primary favorite\"\n    \"noAvatar avatar secondary tertiary tertiary\"\n    \". . actions actions actions\";\n}\n\n.saltContactDetails-compact-stacked {\n  grid-template-columns: auto auto 1fr auto;\n  grid-template-rows: auto auto auto auto;\n  grid-template-areas:\n    \"noAvatar avatar primary favorite\"\n    \"noAvatar avatar secondary favorite\"\n    \"noAvatar avatar tertiary tertiary\"\n    \". . actions actions\";\n}\n\n.saltContactDetails-mini,\n.saltContactDetails-mini-stacked {\n  grid-template-columns: auto minmax(60px, 1fr) auto;\n  grid-template-rows: auto;\n  grid-template-areas: \"primary secondary favorite\";\n}\n\n.saltContactDetails-noAvatar-indicator {\n  grid-area: noAvatar;\n  width: var(--contactDetails-noAvatar-indicator-width);\n  background: var(--contactDetails-noAvatar-color);\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar {\n  grid-area: avatar;\n  margin-right: var(--salt-size-unit);\n}\n\n.saltContactAvatar-stacked {\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactActions {\n  grid-area: actions;\n  display: flex;\n  margin-top: var(--salt-size-unit);\n  margin-left: calc(var(--salt-size-unit) * -1);\n}\n\n.saltContactPrimaryInfo {\n  grid-area: primary;\n}\n\n.saltContactDetails-default .saltContactPrimaryInfo {\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactSecondaryInfo {\n  grid-area: secondary;\n}\n\n.saltContactDetails-mini .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft);\n}\n\n/* TODO Mini-stacked does not really look \"stacked\". Is it a bug? */\n.saltContactDetails-mini-stacked .saltContactSecondaryInfo {\n  margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft);\n}\n\n.saltContactSecondaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactTertiaryInfo {\n  grid-area: tertiary;\n}\n\n.saltContactDetails-compact .saltContactTertiaryInfo {\n  margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft);\n}\n\n.saltContactTertiaryInfo-icon {\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadata {\n  grid-area: metadata;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-size-unit);\n  padding-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadata-expander {\n  grid-area: metadataExpander;\n  margin-top: var(--salt-size-unit);\n}\n\n.saltContactMetadata-separator {\n  width: 100%;\n  height: 1px;\n  background: var(--contactDetails-separator-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltContactMetadataItem {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: calc(var(--salt-size-unit) * 0.5);\n}\n\n.saltContactMetadataItem:last-child {\n  margin-bottom: unset;\n}\n\n.saltContactMetadata-stacked .saltContactMetadataItem {\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.saltContactMetadataItem-icon {\n  margin-right: calc(var(--salt-size-unit) * 2);\n  padding-left: 1px;\n}\n\n.saltContactMetadataItem-label {\n  flex-shrink: 0;\n  color: var(--contactDetails-label-color);\n  margin-right: calc(var(--salt-size-unit) * 2);\n  width: var(--contactDetails-label-width);\n}\n\n.saltContactFavoriteToggle {\n  align-self: start;\n  grid-area: favorite;\n  justify-self: center;\n  line-height: var(--contactDetails-primary-fontSize);\n  margin-right: var(--contactDetails-favoriteToggle-marginRight);\n  margin-top: var(--contactDetails-favoriteToggle-marginTop);\n}\n\n.saltContactFavoriteToggle-svg {\n  fill: var(--contactDetails-favoriteToggle-fill);\n}\n\n.saltContactFavoriteToggle-focusVisible {\n  outline: none;\n}\n\n.saltContactFavoriteToggle-focused {\n  outline: var(--salt-focused-outline);\n}\n\n.saltContactFavoriteToggle-deselected {\n  --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor);\n}\n\n.saltContactFavoriteToggle-selecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-selected {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected);\n}\n\n.saltContactFavoriteToggle-deselecting {\n  --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover);\n}\n\n.saltContactFavoriteToggle-svg {\n  height: var(--contactDetails-icon-size);\n  width: var(--contactDetails-icon-size);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ContactDetails.css.js.map

package/dist-es/content-status/ContentStatus.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title {\n  font-weight: var(--salt-text-display1-fontWeight); /* TODO: Use correct token */\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
+var css_248z = "/* Styles applied to root component (ContentStatus) */\n.saltContentStatus {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  text-align: var(--salt-text-textAlign-embedded);\n  gap: var(--salt-size-unit);\n}\n\n/* Styles applied to inner content */\n.saltContentStatus-content {\n  color: var(--saltContentStatus-content-color, var(--salt-content-primary-foreground));\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-unit);\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to status title */\n.saltContentStatus-title.saltText {\n  font-weight: var(--salt-text-display1-fontWeight);\n  /* TODO: Use correct token */\n}\n\n/* Styles applied to status message */\n.saltContentStatus-message {\n}\n\n/* Styles applied to status actions */\n.saltContentStatus-actions {\n  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ContentStatus.css.js.map

package/dist-es/dialog/Dialog.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n  background: var(--salt-container-primary-background);\n  max-height: 100%;\n  max-width: 100%;\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  overflow-y: auto;\n}\n\n.salt-density-high {\n  --saltDialog-minWidth: 240px;\n}\n\n.salt-density-medium {\n  --saltDialog-minWidth: 320px;\n}\n\n.salt-density-low {\n  --saltDialog-minWidth: 400px;\n}\n\n.salt-density-touch {\n  --saltDialog-minWidth: 480px;\n}\n\n/* Styles applied to Dialog background overlay */\n.saltDialog-overlay {\n  background: var(--salt-overlayable-background);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--salt-spacing-100);\n  z-index: var(--salt-zIndex-modal);\n}\n\n/* Styles applied to Dialog when any status prop is applied */\n.saltDialog-withStatus {\n  border-width: var(--salt-size-border);\n  border-style: var(--salt-container-borderStyle);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n  border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n  border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n  border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n  border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n@media screen and (min-width: 480px) {\n  .saltDialog {\n    min-width: var(--saltDialog-minWidth);\n  }\n\n  .saltDialog-overlay {\n    padding: var(--salt-spacing-400);\n  }\n}\n";
+var css_248z = "/* Styles applied to Dialog component */\n.saltDialog {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding-top: var(--salt-spacing-300);\n  padding-bottom: var(--salt-spacing-300);\n  background: var(--salt-container-primary-background);\n  max-height: 100%;\n  max-width: 100%;\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  overflow-y: auto;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.salt-density-high {\n  --saltDialog-minWidth: 240px;\n}\n\n.salt-density-medium {\n  --saltDialog-minWidth: 320px;\n}\n\n.salt-density-low {\n  --saltDialog-minWidth: 400px;\n}\n\n.salt-density-touch {\n  --saltDialog-minWidth: 480px;\n}\n\n/* Styles applied to Dialog background overlay */\n.saltDialog-overlay {\n  background: var(--salt-overlayable-background);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--salt-spacing-100);\n  z-index: var(--salt-zIndex-modal);\n}\n\n/* Styles applied to Dialog when any status prop is applied */\n.saltDialog-withStatus {\n  border-width: var(--salt-size-border);\n  border-style: var(--salt-container-borderStyle);\n}\n\n/* Styles applied to Dialog when a status=\"info\" */\n.saltDialog-info {\n  border-color: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"error\" */\n.saltDialog-error {\n  border-color: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"warning\" */\n.saltDialog-warning {\n  border-color: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied to Dialog when a status=\"success\" */\n.saltDialog-success {\n  border-color: var(--salt-status-success-borderColor);\n}\n\n/* Styles applied when the component mounts */\n.saltDialog.saltDialog-enterAnimation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n/* Styles applied when the component unmounts */\n.saltDialog.saltDialog-exitAnimation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n@media screen and (min-width: 480px) {\n  .saltDialog {\n    min-width: var(--saltDialog-minWidth);\n  }\n\n  .saltDialog-overlay {\n    padding: var(--salt-spacing-400);\n  }\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Dialog.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = ".saltDialogContent {\n  color: var(--salt-text-primary-foreground);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  flex: 1 1 auto;\n  min-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n}\n";
+var css_248z = ".saltDialogContent {\n  color: var(--salt-content-primary-foreground);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  flex: 1 1 auto;\n  min-height: var(--salt-text-lineHeight);\n  overflow-y: auto;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DialogContent.css.js.map

package/dist-es/dropdown-next/DropdownNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltDropdownNext-button {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n  color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground));\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDropdownNext-height, var(--salt-size-base));\n  line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltDropdownNext-minWidth, 160px);\n  padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  border: none;\n  border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n  justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n  --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: var(--salt-spacing-100);\n  user-select: text;\n}\n\n.saltDropdownNext-list.saltListNext {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n  z-index: calc(var(--salt-zIndex-modal) + 1);\n}\n\n/* Styling applied to dropdown button if `disabled={true}` */\n.saltDropdownNext-disabled,\n.saltDropdownNext-disabled:hover,\n.saltDropdownNext-disabled:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-selectable-cursor-disabled);\n  background: var(--dropdownNext-background-disabled);\n  color: var(--saltDropdownNext-color-disabled, var(--salt-text-primary-foreground-disabled));\n  outline: 0;\n}\n\n/* Style applied to dropdown button if `readOnly={true}` */\n.saltDropdownNext-button.saltDropdownNext-readOnly,\n.saltDropdownNext-button.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-button.saltDropdownNext-readOnly:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-editable-cursor-readonly);\n  background: var(--dropdownNext-background-readonly);\n  /* no padding-right when there's no dropdown button icon */\n  padding-right: 0;\n}\n\n/* Styling applied to dropdown button icon if `disabled={true}` or `readOnly={true}` */\n.saltDropdownNext-icon.saltDropdownNext-disabled,\n.saltDropdownNext-icon.saltDropdownNext-disabled:hover,\n.saltDropdownNext-icon.saltDropdownNext-disabled:active,\n.saltDropdownNext-icon.saltDropdownNext-readOnly,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:active {\n  color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDropdownNext-primary {\n  --dropdownNext-background: var(--salt-editable-primary-background);\n  --dropdownNext-background-active: var(--salt-editable-primary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDropdownNext-secondary {\n  --dropdownNext-background: var(--salt-editable-secondary-background);\n  --dropdownNext-background-active: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n";
+var css_248z = ".saltDropdownNext-button {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n  color: var(--saltDropdownNext-color, var(--salt-content-primary-foreground));\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDropdownNext-height, var(--salt-size-base));\n  line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltDropdownNext-minWidth, 160px);\n  padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  border: none;\n  border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n  justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n  --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: var(--salt-spacing-100);\n  user-select: text;\n}\n\n.saltDropdownNext-list.saltListNext {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n  z-index: calc(var(--salt-zIndex-modal) + 1);\n}\n\n/* Styling applied to dropdown button if `disabled={true}` */\n.saltDropdownNext-disabled,\n.saltDropdownNext-disabled:hover,\n.saltDropdownNext-disabled:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-selectable-cursor-disabled);\n  background: var(--dropdownNext-background-disabled);\n  color: var(--saltDropdownNext-color-disabled, var(--salt-content-primary-foreground-disabled));\n  outline: 0;\n}\n\n/* Style applied to dropdown button if `readOnly={true}` */\n.saltDropdownNext-button.saltDropdownNext-readOnly,\n.saltDropdownNext-button.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-button.saltDropdownNext-readOnly:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-editable-cursor-readonly);\n  background: var(--dropdownNext-background-readonly);\n  /* no padding-right when there's no dropdown button icon */\n  padding-right: 0;\n}\n\n/* Styling applied to dropdown button icon if `disabled={true}` or `readOnly={true}` */\n.saltDropdownNext-icon.saltDropdownNext-disabled,\n.saltDropdownNext-icon.saltDropdownNext-disabled:hover,\n.saltDropdownNext-icon.saltDropdownNext-disabled:active,\n.saltDropdownNext-icon.saltDropdownNext-readOnly,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:active {\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDropdownNext-primary {\n  --dropdownNext-background: var(--salt-editable-primary-background);\n  --dropdownNext-background-active: var(--salt-editable-primary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDropdownNext-secondary {\n  --dropdownNext-background: var(--salt-editable-secondary-background);\n  --dropdownNext-background-active: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=DropdownNext.css.js.map

package/dist-es/file-drop-zone/FileDropZone.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n  --fileDropZone-text-color: var(--salt-text-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground);\n  --fileDropZone-padding: var(--salt-size-container-spacing);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-target-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltFileDropZone {\n  --fileDropZone-background: var(--salt-container-secondary-background);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n  --fileDropZone-borderWidth: var(--salt-size-border);\n  --fileDropZone-borderStyle: var(--salt-target-borderStyle);\n  --fileDropZone-text-color: var(--salt-content-primary-foreground);\n  --fileDropZone-icon-color: var(--salt-content-primary-foreground);\n  --fileDropZone-padding: var(--salt-size-container-spacing);\n  --fileDropZone-title-fontSize: var(--salt-text-fontSize);\n  --fileDropZone-title-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltFileDropZone {\n  color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color));\n  display: inline-flex;\n  background: var(--saltFileDropZone-background, var(--fileDropZone-background));\n  text-align: center;\n  align-items: stretch;\n  justify-content: center;\n  border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor));\n  border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle));\n  border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth));\n  flex-direction: column;\n  padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding));\n}\n\n.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) {\n  pointer-events: none;\n}\n\n/* Styles applied to icon */\n.saltFileDropZone-icon {\n  fill: var(--fileDropZone-icon-color);\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltFileDropZone .saltFileDropZone-title:not(:last-child),\n.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isActive={true}` */\n.saltFileDropZone-active:not(.saltFileDropZone-disabled) {\n  --fileDropZone-background: var(--salt-target-background-hover);\n}\n\n/* Styles applied to description if `isRejected={true}`  */\n.saltFileDropZone-error .saltFileDropZone-description {\n  margin-bottom: calc(var(--salt-size-unit) * 2);\n}\n\n/* Styles applied if `isRejected={true}`  */\n.saltFileDropZone-error {\n  --fileDropZone-background: var(--salt-status-error-background);\n  --fileDropZone-borderColor: var(--salt-status-error-borderColor);\n  --fileDropZone-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied on if `isRejected={true}` and `isActive={true}` */\n.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active {\n  --fileDropZone-background: var(--salt-target-background-hover);\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n/* Styles applied to title and description */\n.saltFileDropZone-title,\n.saltFileDropZone-description {\n  font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize));\n  line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight));\n}\n\n/* Styles applied to title */\n.saltFileDropZone-title {\n  font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong));\n}\n\n/* Styles applied to input button */\n.saltFileDropZone-inputButton {\n  display: inline-flex;\n}\n\n/* Styles applied to input root */\n.saltFileDropZone-inputRoot {\n  line-height: 1;\n}\n\n.saltFileDropZone-inputRoot .input-hidden {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  visibility: hidden;\n}\n\n/* Styles applied if `disabled={true}` */\n.saltFileDropZone-disabled {\n  --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled);\n\n  cursor: var(--salt-target-cursor-disabled);\n}\n\n/* Styles applied if `disabled={true}` to icon and title */\n.saltFileDropZone-disabled .saltFileDropZone-icon,\n.saltFileDropZone-disabled .saltFileDropZone-title {\n  --fileDropZone-text-color: var(--salt-content-primary-foreground-disabled);\n  --fileDropZone-icon-color: var(--salt-content-primary-foreground-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FileDropZone.css.js.map

package/dist-es/form-field-legacy/FormFieldLegacy.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-high {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n  --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle);\n  --formFieldLegacy-background: var(--salt-editable-primary-background);\n  --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n  /* Set to 0 until helper text class provided */\n  --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n  border: 0;\n  display: inline-grid;\n  font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n  margin: var(--saltFormFieldLegacy-margin, 0);\n  padding: 0;\n  position: relative;\n  min-width: 0;\n  vertical-align: top;\n  width: var(--saltFormFieldLegacy-width, auto);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-hover);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n  --formFieldLegacy-activationIndicator-size: var(--salt-editable-borderWidth-active);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-active);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(\n    var(--formFieldLegacy-helperText-marginTop-fullWidth) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n  );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n  --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n  --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n  --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n  --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n  --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n  --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n  --formFieldLegacy-label-marginTop: var(--salt-size-unit);\n  --formFieldLegacy-label-paddingLeft: 0px;\n  --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n  align-self: start;\n  grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n  --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n  --formFieldLegacy-label-marginTop: 0;\n  --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);\n  --formFieldLegacy-label-paddingRight: var(--salt-size-unit);\n  /* Uses density invariant value unless helper text provided */\n  --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n  background: linear-gradient(\n    to top,\n    transparent var(--formFieldLegacy-background-offset-height),\n    var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n  );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n  /* Uses density aware value from FormHelperText */\n  --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n  grid-row-start: 4;\n  grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-readonly);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--formFieldLegacy-helperText-height, 0px);\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n  content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n  outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n  outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
+var css_248z = ".salt-density-high {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n  --formFieldLegacy-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormFieldLegacy {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle);\n  --formFieldLegacy-background: var(--salt-editable-primary-background);\n  --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor);\n  /* Set to 0 until helper text class provided */\n  --formFieldLegacy-helperText-height: 0px;\n}\n\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormFieldLegacy {\n  border: 0;\n  display: inline-grid;\n  margin: var(--saltFormFieldLegacy-margin, 0);\n  padding: 0;\n  position: relative;\n  min-width: 0;\n  vertical-align: top;\n  width: var(--saltFormFieldLegacy-width, auto);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n/* Class applied to the root element on hover */\n.saltFormFieldLegacy:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-hover);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormFieldLegacy-focused,\n.saltFormFieldLegacy-lowFocused,\n.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover,\n.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active);\n  --formFieldLegacy-activationIndicator-size: var(--salt-editable-borderWidth-active);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-active);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth);\n  --formFieldLegacy-activationIndicator-offsetBottom: calc(\n    var(--formFieldLegacy-helperText-marginTop-fullWidth) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))\n  );\n}\n\n/* Class applied when helper text is provided */\n.saltFormFieldLegacy-withHelperText {\n  --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize));\n  --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize));\n  --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight));\n  --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormFieldLegacy-disabled {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n  --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormFieldLegacy.saltFormFieldLegacy-error {\n  --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor);\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-error:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error {\n  --formFieldLegacy-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning {\n  --formFieldLegacy-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormFieldLegacy-labelLeft {\n  --formFieldLegacy-label-marginTop: var(--salt-size-unit);\n  --formFieldLegacy-label-paddingLeft: 0px;\n  --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n  align-self: start;\n  grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormFieldLegacy-labelTop {\n  --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom);\n  --formFieldLegacy-label-marginTop: 0;\n  --formFieldLegacy-label-paddingLeft: var(--salt-size-unit);\n  --formFieldLegacy-label-paddingRight: var(--salt-size-unit);\n  /* Uses density invariant value unless helper text provided */\n  --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)));\n\n  background: linear-gradient(\n    to top,\n    transparent var(--formFieldLegacy-background-offset-height),\n    var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)\n  );\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText {\n  /* Uses density aware value from FormHelperText */\n  --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height);\n}\n\n.saltFormFieldLegacy > * {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldLegacy-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldLegacy > .saltFormActivationIndicator {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldLegacy > .saltFormHelperText {\n  grid-row-start: 4;\n  grid-row-end: 5;\n}\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormFieldLegacy-readOnly {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover {\n  --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n  --formFieldLegacy-activationIndicator-size: var(--salt-size-border);\n  --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-readonly);\n\n  --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px));\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--formFieldLegacy-helperText-height, 0px);\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before {\n  content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  outline-color: var(--formFieldLegacy-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  z-index: -1;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused {\n  outline: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * {\n  outline: none;\n}\n\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormFieldLegacy-primary.saltFormFieldLegacy > :not(.saltFormLabel):first-child {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n} */\n\n.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n  background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormFieldLegacy-tertiary.saltFormFieldLegacy {\n  --formFieldLegacy-background: var(--salt-editable-tertiary-background);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormFieldLegacy.css.js.map

package/dist-es/form-field-legacy/FormHelperText.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n  --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n  --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n  --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formFieldLegacy-helperText-marginTop-default: 8px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formFieldLegacy-helperText-marginTop-default: 4px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formFieldLegacy-helperText-opacity: 1;\n\n  color: var(--saltFormFieldLegacy-helperText-color, var(--salt-text-secondary-foreground));\n  font-size: var(--formFieldLegacy-helperText-fontSize);\n  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n  line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n  margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n  opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));\n}\n";
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n\n  --formFieldLegacy-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formFieldLegacy-helperText-marginTop-default: 2px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 3px;\n  --formFieldLegacy-helperText-transform: translate(0, 2px);\n\n  --formFieldLegacy-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formFieldLegacy-helperText-marginTop-default: 8px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, -3px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formFieldLegacy-helperText-marginTop-default: 4px;\n  --formFieldLegacy-helperText-marginTop-fullWidth: 5px;\n  --formFieldLegacy-helperText-transform: translate(0, 1px);\n\n  --formFieldLegacy-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormFieldLegacy-fullWidth {\n  --formFieldLegacy-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formFieldLegacy-helperText-opacity: 1;\n\n  color: var(--saltFormFieldLegacy-helperText-color, var(--salt-content-secondary-foreground));\n  font-size: var(--formFieldLegacy-helperText-fontSize);\n  font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0);\n  line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0);\n  margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop));\n  opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity));\n  padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormHelperText.css.js.map

package/dist-es/form-field-legacy/FormLabel.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formFieldLegacy-label-default-top: 11px;\n  --formFieldLegacy-label-left-top: 16px;\n  --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-default-top: 7px;\n  --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-default-top: 5px;\n  --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n  --formFieldLegacy-label-default-top: 3px;\n  --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n  --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n  --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormFieldLegacy-label-text-color, var(--salt-text-secondary-foreground));\n  display: block;\n  font-size: var(--formFieldLegacy-label-fontSize);\n  margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n  min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n  line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n  padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n  padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n  padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n  transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-text-secondary-foreground-disabled));\n  cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
+var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --formFieldLegacy-label-default-top: 11px;\n  --formFieldLegacy-label-left-top: 16px;\n  --formFieldLegacy-label-minHeight: 16px;\n}\n.salt-density-low {\n  --formFieldLegacy-label-default-top: 7px;\n  --formFieldLegacy-label-left-top: 12px;\n}\n.salt-density-medium {\n  --formFieldLegacy-label-default-top: 5px;\n  --formFieldLegacy-label-left-top: 8px;\n}\n.salt-density-high {\n  --formFieldLegacy-label-default-top: 3px;\n  --formFieldLegacy-label-left-top: 4px;\n}\n\n.saltFormLabel {\n  --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize));\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top);\n  --formFieldLegacy-label-width: 100%;\n}\n\n.saltFormFieldLegacy-labelLeft .saltFormLabel {\n  --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top);\n  --formFieldLegacy-label-width: auto;\n}\n\n.saltFormLabel {\n  align-items: center;\n  color: var(--saltFormFieldLegacy-label-text-color, var(--salt-content-secondary-foreground));\n  display: block;\n  font-size: var(--formFieldLegacy-label-fontSize);\n  margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom));\n  min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight)));\n  margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px);\n  line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight));\n  overflow: hidden;\n  padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft));\n  padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight));\n  padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0);\n  padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0);\n  text-overflow: ellipsis;\n  top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top));\n  transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));\n  white-space: nowrap;\n  width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));\n}\n\n.saltFormLabel ~ * {\n  z-index: 1;\n}\n\n/* Styles applied when `disabled={true}` */\n.saltFormLabel-disabled {\n  color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-content-secondary-foreground-disabled));\n  cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Styles applied when displayedNecessity or necessityText provided */\n.saltFormLabel-necessityIndicator {\n  font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));\n  margin-left: 1ch;\n}\n\n/* Styles applied if `hasStatusIndicator={true}` */\n.saltFormLabel-statusIndicator {\n  margin-left: 6px;\n  vertical-align: top;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormLabel.css.js.map

package/dist-es/formatted-input/FormattedInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* TODO check multiline styles */\n\n.saltFormattedInput {\n  --formattedInput-mask-color: var(--salt-text-secondary-foreground);\n}\n\n.saltFormattedInput-inputWrapper {\n  position: relative;\n  width: 100%;\n  display: inline-flex;\n}\n\n.saltFormattedInput-mask {\n  position: absolute;\n  color: var(--formattedInput-mask-color);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  top: 0;\n  left: 0;\n}\n\n.saltFormattedInput-mask i {\n  color: transparent;\n  opacity: 0;\n  visibility: hidden;\n  font: inherit;\n}\n";
+var css_248z = "/* TODO check multiline styles */\n\n.saltFormattedInput {\n  --formattedInput-mask-color: var(--salt-content-secondary-foreground);\n}\n\n.saltFormattedInput-inputWrapper {\n  position: relative;\n  width: 100%;\n  display: inline-flex;\n}\n\n.saltFormattedInput-mask {\n  position: absolute;\n  color: var(--formattedInput-mask-color);\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  top: 0;\n  left: 0;\n}\n\n.saltFormattedInput-mask i {\n  color: transparent;\n  opacity: 0;\n  visibility: hidden;\n  font: inherit;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=FormattedInput.css.js.map

package/dist-es/index.js

@@ -20,7 +20,6 @@ export { useLayoutEffectSkipFirst } from './utils/useLayoutEffectSkipFirst.js';
 export { useOverflowDetection } from './utils/useOverflowDetection.js';
 export { useSlideSelection } from './utils/useSlideSelection.js';
 export { AppHeader } from './app-header/AppHeader.js';
-export { Badge } from './badge/Badge.js';
 export { Breadcrumb } from './breadcrumbs/Breadcrumb.js';
 export { Breadcrumbs } from './breadcrumbs/Breadcrumbs.js';
 export { ButtonBar, DefaultButtonsOrderByVariant } from './button-bar/ButtonBar.js';

package/dist-es/index.js.map

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

package/dist-es/input-legacy/InputLegacy.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-low {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-medium {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --inputLegacy-button-inset: 2px;\n}\n.salt-density-high {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));\n  --inputLegacy-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInputLegacy {\n  align-items: center;\n  background: var(--saltInputLegacy-background, none);\n  border: var(--saltInputLegacy-border, none);\n  border-radius: var(--saltInputLegacy-borderRadius, 0);\n  color: var(--saltInputLegacy-text-color, var(--salt-text-primary-foreground));\n  cursor: var(--saltInputLegacy-cursor, default);\n  display: inline-flex;\n  font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputLegacy-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputLegacy-minWidth, 8em);\n  padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));\n  position: var(--saltInputLegacy-position, relative);\n  width: 100%;\n}\n\n/* Reset in the next class */\n.saltInputLegacy-input:focus {\n  outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInputLegacy-focused {\n  outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to selected input */\n.saltInputLegacy-input::selection {\n  background-color: var(--saltInputLegacy-highlight-color, var(--salt-text-background-selected));\n}\n\n/* Style applied to inner input component */\n.saltInputLegacy-input {\n  background: var(--saltInputLegacy-background, none);\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--saltInputLegacy-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  height: 100%;\n  width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputLegacy-disabled .saltInputLegacy-input {\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInputLegacy-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInputLegacy-suffixContainer,\n.saltInputLegacy-prefixContainer {\n  display: flex;\n  align-items: center;\n\n  height: var(--inputLegacy-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInputLegacy-inputAdornedStart {\n  padding-left: var(--saltInputLegacy-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInputLegacy-inputAdornedStart .saltInputLegacy-input {\n  padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to root element with end adornment */\n.saltInputLegacy-inputAdornedEnd {\n  padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {\n  padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,\n.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {\n  height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));\n  margin: var(--inputLegacy-button-inset);\n  padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInputLegacy-leftTextAlign .saltInputLegacy-input {\n  text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInputLegacy-centerTextAlign .saltInputLegacy-input {\n  text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInputLegacy-rightTextAlign .saltInputLegacy-input {\n  text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInputLegacy-formField {\n  min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);\n  width: 100%;\n}\n";
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-touch {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-low {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3);\n  --inputLegacy-button-inset: 4px;\n}\n.salt-density-medium {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5);\n  --inputLegacy-button-inset: 2px;\n}\n.salt-density-high {\n  --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit));\n  --inputLegacy-button-inset: 2px;\n}\n\n/* Style applied to the root element */\n.saltInputLegacy {\n  align-items: center;\n  background: var(--saltInputLegacy-background, none);\n  border: var(--saltInputLegacy-border, none);\n  border-radius: var(--saltInputLegacy-borderRadius, 0);\n  color: var(--saltInputLegacy-text-color, var(--salt-content-primary-foreground));\n  cursor: var(--saltInputLegacy-cursor, default);\n  display: inline-flex;\n  font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputLegacy-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputLegacy-minWidth, 8em);\n  padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));\n  position: var(--saltInputLegacy-position, relative);\n  width: 100%;\n}\n\n/* Reset in the next class */\n.saltInputLegacy-input:focus {\n  outline: none;\n}\n\n/* Pseudo-class applied to the root element when focused */\n.saltInputLegacy-focused {\n  outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Style applied to selected input */\n.saltInputLegacy-input::selection {\n  background-color: var(--saltInputLegacy-highlight-color, var(--salt-content-foreground-highlight));\n}\n\n/* Style applied to inner input component */\n.saltInputLegacy-input {\n  background: var(--saltInputLegacy-background, none);\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: var(--saltInputLegacy-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  height: 100%;\n  width: 100%;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputLegacy-disabled .saltInputLegacy-input {\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInputLegacy-text-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to adornment containers */\n.saltInputLegacy-suffixContainer,\n.saltInputLegacy-prefixContainer {\n  display: flex;\n  align-items: center;\n\n  height: var(--inputLegacy-adornment-height);\n}\n\n/* Style applied to root element with start adornment */\n.saltInputLegacy-inputAdornedStart {\n  padding-left: var(--saltInputLegacy-adornedStart-padding, 0);\n}\n\n/* Style applied to inner input element with start adornment */\n.saltInputLegacy-inputAdornedStart .saltInputLegacy-input {\n  padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to root element with end adornment */\n.saltInputLegacy-inputAdornedEnd {\n  padding-right: var(--saltInputLegacy-adornedEnd-padding, 0);\n}\n\n/* Style applied to inner input element with end adornment */\n.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input {\n  padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit));\n}\n\n/* Style applied to salt Button used within Input component adornments */\n.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton,\n.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton {\n  height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2));\n  margin: var(--inputLegacy-button-inset);\n  padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset));\n}\n\n/* Style applied if `textAlign={\"left\"}` */\n.saltInputLegacy-leftTextAlign .saltInputLegacy-input {\n  text-align: left;\n}\n\n/* Style applied if `textAlign={\"center\"}` */\n.saltInputLegacy-centerTextAlign .saltInputLegacy-input {\n  text-align: center;\n}\n\n/* Style applied if `textAlign={\"right\"}` */\n.saltInputLegacy-rightTextAlign .saltInputLegacy-input {\n  text-align: right;\n}\n\n/* Style applied if `inFormField={true}` */\n.saltInputLegacy-formField {\n  min-width: var(--saltFormFieldLegacy-input-minWidth, 0px);\n  width: 100%;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=InputLegacy.css.js.map

package/dist-es/list/List.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--salt-container-borderStyle);\n  --list-borderWidth: var(--salt-size-border);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n\n  background: var(--list-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n}\n\n.saltList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n  --list-item-height: 30px;\n  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n  overflow: auto;\n}\n\n.saltListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
+var css_248z = ".saltList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--salt-container-borderStyle);\n  --list-borderWidth: var(--salt-size-border);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n\n  background: var(--list-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n  --list-item-height: 30px;\n  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n  overflow: auto;\n}\n\n.saltListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=List.css.js.map

package/dist-es/list/ListItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-text-primary-foreground);\n  --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--saltList-item-cursor, pointer);\n  background: var(--saltList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--saltList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-size-unit);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-text-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n  --list-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n  content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n";
+var css_248z = ".saltListItem {\n  /* Color */\n  --list-item-text-color: var(--salt-content-primary-foreground);\n  --list-item-background: var(--saltList-item-background, var(--salt-selectable-background));\n  /* --list-item-selected-focus-outlineColor: var(--salt-color-white);  TODO: Check token with design */\n  --list-item-text-color-active: var(--salt-content-primary-foreground);\n  --list-item-background-active: var(--salt-selectable-background-selected);\n  --list-item-alignItems: center;\n}\n\n.saltListItem.saltHighlighted {\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover);\n  --list-item-background: var(--salt-selectable-background-hover);\n}\n\n.saltListItemHeader {\n  font-weight: var(--salt-text-fontWeight-strong); /*  TODO: Check token with design */\n}\n\n.saltListItemHeader[data-sticky] {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltListItem {\n  color: var(--list-item-text-color);\n  cursor: var(--saltList-item-cursor, pointer);\n  background: var(--saltList-item-background, var(--list-item-background));\n  font-size: var(--salt-text-fontSize);\n  text-align: var(--salt-text-textAlign);\n  line-height: var(--salt-text-lineHeight);\n  height: var(--saltList-item-height, var(--list-item-height, auto));\n  /* Replaced border-bottom with margin. In design spec, the height of the items should not include gap */\n  margin-bottom: var(--list-item-gap);\n  padding: 0 var(--salt-size-unit);\n  left: 0;\n  right: 0;\n  display: flex;\n  position: relative;\n  align-items: var(--list-item-alignItems);\n  white-space: nowrap;\n}\n\n.saltListItem:last-child {\n  margin-bottom: 0px;\n}\n\n.saltListItem-checkbox {\n  --list-item-background-active: var(--salt-selectable-background);\n  --list-item-text-color-active: var(--salt-content-primary-foreground);\n  --list-item-text-padding: 0 0 0 var(--salt-size-unit);\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox) {\n  --list-item-background: var(--list-item-background-active);\n  color: var(--list-item-text-color-active);\n}\n\n.saltListItem.saltDisabled {\n  --list-item-text-color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltListItem.saltFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n  outline-color: var(--salt-focused-outlineColor);\n}\n\n.saltListItem.saltFocusVisible:after {\n  content: none;\n}\n\n.saltListItem[aria-selected=\"true\"]:not(.saltListItem-checkbox).saltFocusVisible {\n  outline-color: var(--list-item-selected-focus-outlineColor);\n}\n\n.saltListItem-textWrapper {\n  flex: 1;\n  overflow: hidden;\n  padding: var(--list-item-text-padding, 0px);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltListItem-proxy {\n  position: absolute !important;\n  visibility: hidden;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ListItem.css.js.map

package/dist-es/list-next/ListItemNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n  --listNext-item-text-color: var(--salt-text-primary-foreground);\n  --listNext-item-background: none;\n}\n\n.saltListItemNext {\n  color: var(--listNext-item-text-color);\n  background: var(--listNext-item-background);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-size-unit);\n  position: relative;\n  align-items: center;\n  white-space: nowrap;\n  margin-top: var(--salt-size-border);\n  margin-bottom: var(--salt-size-border);\n  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n  border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation  */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n  --listNext-item-background: var(--salt-selectable-background-hover);\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);\n  --listNext-item-background: var(--salt-selectable-background-selected);\n  --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n  --listNext-item-text-color: var(--salt-text-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n  color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);\n  --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltListItemNext {\n  --listNext-item-text-color: var(--salt-content-primary-foreground);\n  --listNext-item-background: none;\n}\n\n.saltListItemNext {\n  color: var(--listNext-item-text-color);\n  background: var(--listNext-item-background);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-size-unit);\n  position: relative;\n  align-items: center;\n  white-space: nowrap;\n  margin-top: var(--salt-size-border);\n  margin-bottom: var(--salt-size-border);\n  border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent;\n}\n\n/* Class applied to list item on focus using keyboard navigation only */\n.saltListItemNext-focused {\n  border: var(--salt-focused-outline);\n}\n\n/* Active list item on focus using keyboard navigation  */\n.saltListItemNext-highlighted:not([aria-disabled=\"true\"]) {\n  --listNext-item-background: var(--salt-selectable-background-hover);\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltListItemNext[aria-selected=\"true\"] {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected);\n  --listNext-item-background: var(--salt-selectable-background-selected);\n  --saltIcon-color: var(--salt-selectable-foreground-selected);\n}\n\n/* Style applied to disabled items */\n.saltListItemNext[aria-disabled=\"true\"] {\n  --listNext-item-text-color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n.saltListItemNext[aria-disabled=\"true\"] .saltText {\n  color: var(--listNext-item-text-color);\n}\n\n/* disabled list item when selected */\n.saltListItemNext[aria-disabled=\"true\"][aria-selected=\"true\"] {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled);\n  --listNext-item-background: var(--salt-selectable-background-selectedDisabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ListItemNext.css.js.map

package/dist-es/list-next/ListNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltListNext {\n  margin: 0;\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--salt-container-borderStyle);\n  border-width: var(--salt-size-border);\n  height: 100%;\n  outline: none;\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  padding-inline-start: 0;\n  box-sizing: content-box;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltListNext {\n  margin: 0;\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--salt-container-borderStyle);\n  border-width: var(--salt-size-border);\n  height: 100%;\n  outline: none;\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  padding-inline-start: 0;\n  box-sizing: content-box;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ListNext.css.js.map

package/dist-es/logo/Logo.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles for Logo */\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--salt-size-base);\n  gap: var(--salt-spacing-100);\n}\n\n.saltLogo svg {\n  fill: var(--salt-text-secondary-foreground);\n  stroke: none;\n}\n";
+var css_248z = "/* Styles for Logo */\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--salt-size-base);\n  gap: var(--salt-spacing-100);\n}\n\n.saltLogo svg {\n  fill: var(--salt-content-secondary-foreground);\n  stroke: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Logo.css.js.map

package/dist-es/metric/Metric.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMetric {\n  display: flex;\n  align-items: flex-start;\n  padding: 0px;\n  color: var(--saltMetric-color, var(--salt-text-primary-foreground));\n}\n\n.saltMetric-orientation-horizontal {\n  flex-direction: row;\n  gap: var(--metric-horizontal-gap, 16px);\n  margin-top: var(--metric-horizontal-marginTop, 0px);\n}\n\n.saltMetric-orientation-vertical {\n  flex-direction: column;\n  justify-content: center;\n}\n\n.saltMetric-orientation-vertical.saltMetric-align-center {\n  align-items: center;\n}\n.saltMetric-orientation-vertical.saltMetric-align-right {\n  align-items: flex-end;\n}\n";
+var css_248z = ".saltMetric {\n  display: flex;\n  align-items: flex-start;\n  padding: 0px;\n  color: var(--saltMetric-color, var(--salt-content-primary-foreground));\n}\n\n.saltMetric-orientation-horizontal {\n  flex-direction: row;\n  gap: var(--metric-horizontal-gap, 16px);\n  margin-top: var(--metric-horizontal-marginTop, 0px);\n}\n\n.saltMetric-orientation-vertical {\n  flex-direction: column;\n  justify-content: center;\n}\n\n.saltMetric-orientation-vertical.saltMetric-align-center {\n  align-items: center;\n}\n.saltMetric-orientation-vertical.saltMetric-align-right {\n  align-items: flex-end;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Metric.css.js.map

package/dist-es/metric/MetricHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMetricHeader {\n  --metric-title-color: var(--salt-text-primary-foreground);\n  --metric-subtitle-color: var(--salt-text-secondary-foreground);\n}\n\n.saltMetricHeader {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--salt-size-unit) * 0.25);\n}\n\n.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {\n  padding-top: 4px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {\n  padding-top: 8px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {\n  padding-top: 14px;\n}\n\n.saltMetricHeader-title {\n  color: var(--metric-title-color);\n}\n\n.saltMetricHeader-subtitle {\n  color: var(--metric-subtitle-color);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltMetric-align-center .saltMetricHeader {\n  align-items: center;\n}\n\n.saltMetric-align-right .saltMetricHeader {\n  align-items: flex-end;\n}\n";
+var css_248z = ".saltMetricHeader {\n  --metric-title-color: var(--salt-content-primary-foreground);\n  --metric-subtitle-color: var(--salt-content-secondary-foreground);\n}\n\n.saltMetricHeader {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--salt-size-unit) * 0.25);\n}\n\n.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {\n  padding-top: 4px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {\n  padding-top: 8px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {\n  padding-top: 14px;\n}\n\n.saltMetricHeader-title {\n  color: var(--metric-title-color);\n}\n\n.saltMetricHeader-subtitle {\n  color: var(--metric-subtitle-color);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltMetric-align-center .saltMetricHeader {\n  align-items: center;\n}\n\n.saltMetric-align-right .saltMetricHeader {\n  align-items: flex-end;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MetricHeader.css.js.map

package/dist-es/navigation-item/NavigationItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: var(--salt-size-indicator);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active */\n.saltNavigationItem-active,\n.saltNavigationItem-rootItem {\n  --navigationItem-fontWeight: var(--salt-text-fontWeight-strong);\n}\n\n/* Vars applied to NavigationItem component when  blur active */\n.saltNavigationItem-blurActive,\n.saltNavigationItem-active.saltNavigationItem-nested {\n  --navigationItem-fontWeight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--navigationItem-fontWeight);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n  top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\n\n  top: 0;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
+var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-content-primary-foreground);\n  --navigationItem-fill: var(--salt-content-primary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: var(--salt-size-indicator);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active */\n.saltNavigationItem-active,\n.saltNavigationItem-rootItem {\n  --navigationItem-fontWeight: var(--salt-text-fontWeight-strong);\n}\n\n/* Vars applied to NavigationItem component when  blur active */\n.saltNavigationItem-blurActive,\n.saltNavigationItem-active.saltNavigationItem-nested {\n  --navigationItem-fontWeight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--navigationItem-fontWeight);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n  top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\n\n  top: 0;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=NavigationItem.css.js.map

package/dist-es/overlay/Overlay.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Experimental - Overlay css variable API */\n.saltOverlay {\n  --overlay-text-color: var(--salt-text-primary-foreground);\n  --overlay-spacing: var(--salt-size-unit);\n  --overlay-fontSize: var(--salt-text-fontSize);\n  --overlay-background: var(--salt-container-primary-background);\n  --overlay-borderColor: var(--salt-container-primary-borderColor);\n  /* TODO: z-index audit, provide z index here or rely on popper */\n  --overlay-zindex: var(--salt-zIndex-flyover);\n}\n\n.saltOverlay-secondary.saltOverlay {\n  --overlay-background: var(--salt-container-secondary-background);\n  --overlay-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltOverlay-content {\n  display: flex;\n  padding: calc(var(--overlay-spacing) * 2);\n  font-size: var(--overlay-fontSize);\n\n  border: 1px solid var(--overlay-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  line-height: var(--salt-text-lineHeight);\n  background: var(--overlay-background);\n  color: var(--overlay-text-color);\n  position: relative;\n  opacity: 1;\n  overflow: visible;\n  z-index: var(--overlay-zindex);\n}\n\n.saltOverlay-arrow,\n.saltOverlay-arrow::after {\n  border: 8px solid transparent;\n  position: absolute;\n}\n\n.saltOverlay-arrow::after {\n  content: \"\";\n}\n\n.saltOverlay[data-placement^=\"top\"] .saltOverlay-arrow {\n  border-top-color: var(--overlay-borderColor);\n  bottom: -17px;\n}\n\n.saltOverlay[data-placement^=\"bottom\"] .saltOverlay-arrow {\n  border-bottom-color: var(--overlay-borderColor);\n  top: -17px;\n}\n\n.saltOverlay[data-placement^=\"left\"] .saltOverlay-arrow {\n  border-left-color: var(--overlay-borderColor);\n  right: -17px;\n}\n\n.saltOverlay[data-placement^=\"right\"] .saltOverlay-arrow {\n  border-right-color: var(--overlay-borderColor);\n  left: -17px;\n}\n\n.saltOverlay[data-placement^=\"top\"] .saltOverlay-arrow::after {\n  border-top-color: var(--overlay-background);\n  bottom: -7px;\n  left: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"bottom\"] .saltOverlay-arrow::after {\n  border-bottom-color: var(--overlay-background);\n  top: -7px;\n  left: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"left\"] .saltOverlay-arrow::after {\n  border-left-color: var(--overlay-background);\n  right: -7px;\n  top: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"right\"] .saltOverlay-arrow::after {\n  border-right-color: var(--overlay-background);\n  left: -7px;\n  top: calc(100% - 8px);\n}\n\n/* Close Button */\n.saltOverlay-close {\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
+var css_248z = "/* Experimental - Overlay css variable API */\n.saltOverlay {\n  --overlay-text-color: var(--salt-content-primary-foreground);\n  --overlay-spacing: var(--salt-size-unit);\n  --overlay-fontSize: var(--salt-text-fontSize);\n  --overlay-background: var(--salt-container-primary-background);\n  --overlay-borderColor: var(--salt-container-primary-borderColor);\n  /* TODO: z-index audit, provide z index here or rely on popper */\n  --overlay-zindex: var(--salt-zIndex-flyover);\n}\n\n.saltOverlay-secondary.saltOverlay {\n  --overlay-background: var(--salt-container-secondary-background);\n  --overlay-borderColor: var(--salt-container-secondary-borderColor);\n}\n\n.saltOverlay-content {\n  display: flex;\n  padding: calc(var(--overlay-spacing) * 2);\n  font-size: var(--overlay-fontSize);\n\n  border: 1px solid var(--overlay-borderColor);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  line-height: var(--salt-text-lineHeight);\n  background: var(--overlay-background);\n  color: var(--overlay-text-color);\n  position: relative;\n  opacity: 1;\n  overflow: visible;\n  z-index: var(--overlay-zindex);\n}\n\n.saltOverlay-arrow,\n.saltOverlay-arrow::after {\n  border: 8px solid transparent;\n  position: absolute;\n}\n\n.saltOverlay-arrow::after {\n  content: \"\";\n}\n\n.saltOverlay[data-placement^=\"top\"] .saltOverlay-arrow {\n  border-top-color: var(--overlay-borderColor);\n  bottom: -17px;\n}\n\n.saltOverlay[data-placement^=\"bottom\"] .saltOverlay-arrow {\n  border-bottom-color: var(--overlay-borderColor);\n  top: -17px;\n}\n\n.saltOverlay[data-placement^=\"left\"] .saltOverlay-arrow {\n  border-left-color: var(--overlay-borderColor);\n  right: -17px;\n}\n\n.saltOverlay[data-placement^=\"right\"] .saltOverlay-arrow {\n  border-right-color: var(--overlay-borderColor);\n  left: -17px;\n}\n\n.saltOverlay[data-placement^=\"top\"] .saltOverlay-arrow::after {\n  border-top-color: var(--overlay-background);\n  bottom: -7px;\n  left: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"bottom\"] .saltOverlay-arrow::after {\n  border-bottom-color: var(--overlay-background);\n  top: -7px;\n  left: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"left\"] .saltOverlay-arrow::after {\n  border-left-color: var(--overlay-background);\n  right: -7px;\n  top: calc(100% - 8px);\n}\n\n.saltOverlay[data-placement^=\"right\"] .saltOverlay-arrow::after {\n  border-right-color: var(--overlay-background);\n  left: -7px;\n  top: calc(100% - 8px);\n}\n\n/* Close Button */\n.saltOverlay-close {\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Overlay.css.js.map

package/dist-es/pagination/Pagination.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-medium {\n  --pagination-button-size: 28px;\n  --pagination-fontSize: 12px;\n}\n\n.salt-density-high {\n  --pagination-button-size: 20px;\n  --pagination-fontSize: 11px;\n}\n\n.salt-density-low {\n  --pagination-button-size: 36px;\n  --pagination-fontSize: 14px;\n}\n\n.salt-density-touch {\n  --pagination-button-size: 44px;\n  --pagination-fontSize: 16px;\n}\n\n.saltPagination {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltPagination-arrowButton {\n  width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n}\n\n.saltPagination-previousButton {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-nextButton {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltPagination-pageButton {\n  min-width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n}\n\n.saltPagination-pageButtonSelected {\n  background: var(--salt-selectable-background-selected);\n  color: var(--salt-selectable-cta-foreground-selected);\n}\n\n.saltPagination-pageButtonFixed {\n  padding: 0;\n}\n\n.saltPagination-ellipsis {\n  width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n  text-align: center;\n}\n\n.saltPagination-accessibleText {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  opacity: 0;\n}\n\n.saltPagination-compactInputField {\n}\n\n.saltPagination-compactInput {\n  height: var(--pagination-button-size);\n  min-width: unset;\n}\n\n.saltPagination-compactInputFixed {\n  min-width: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n}\n\n.saltPagination-compactSeparator {\n  height: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n  text-align: center;\n  font-size: var(--pagination-fontSize);\n  line-height: var(--pagination-button-size);\n}\n\n.saltPagination-goToInputWrapper {\n}\n\n.saltPagination-leftGoToInput {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-rightGoToInput {\n  margin-left: var(--salt-size-unit);\n  min-width: unset;\n}\n\n.saltPagination-goToInputField {\n}\n\n.saltPagination-goToInput {\n  height: var(--pagination-button-size);\n  min-width: unset;\n}\n\n.saltPagination-goToInputFixed {\n  min-width: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n}\n";
+var css_248z = ".salt-density-medium {\n  --pagination-button-size: 28px;\n  --pagination-fontSize: 12px;\n}\n\n.salt-density-high {\n  --pagination-button-size: 20px;\n  --pagination-fontSize: 11px;\n}\n\n.salt-density-low {\n  --pagination-button-size: 36px;\n  --pagination-fontSize: 14px;\n}\n\n.salt-density-touch {\n  --pagination-button-size: 44px;\n  --pagination-fontSize: 16px;\n}\n\n.saltPagination {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltPagination-arrowButton {\n  width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n}\n\n.saltPagination-previousButton {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-nextButton {\n  margin-left: var(--salt-size-unit);\n}\n\n.saltPagination-pageButton {\n  min-width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n  --saltButton-fontWeight: var(--salt-text-fontWeight);\n}\n\n.saltPagination-pageButtonSelected {\n  background: var(--salt-selectable-background-selected);\n  color: var(--salt-palette-interact-cta-foreground-active);\n}\n\n.saltPagination-pageButtonFixed {\n  padding: 0;\n}\n\n.saltPagination-ellipsis {\n  width: var(--pagination-button-size);\n  height: var(--pagination-button-size);\n  text-align: center;\n}\n\n.saltPagination-accessibleText {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  opacity: 0;\n}\n\n.saltPagination-compactInputField {\n}\n\n.saltPagination-compactInput {\n  height: var(--pagination-button-size);\n  min-width: unset;\n}\n\n.saltPagination-compactInputFixed {\n  min-width: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n}\n\n.saltPagination-compactSeparator {\n  height: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n  text-align: center;\n  font-size: var(--pagination-fontSize);\n  line-height: var(--pagination-button-size);\n}\n\n.saltPagination-goToInputWrapper {\n}\n\n.saltPagination-leftGoToInput {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltPagination-rightGoToInput {\n  margin-left: var(--salt-size-unit);\n  min-width: unset;\n}\n\n.saltPagination-goToInputField {\n}\n\n.saltPagination-goToInput {\n  height: var(--pagination-button-size);\n  min-width: unset;\n}\n\n.saltPagination-goToInputFixed {\n  min-width: var(--pagination-button-size);\n  width: var(--pagination-button-size);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Pagination.css.js.map

package/dist-es/pill/Pill.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n  --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  --saltButton-background: var(--pill-background);\n  --saltButton-color: var(--pill-text-color);\n  --saltButton-fontSize: var(--pill-fontSize);\n  --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);\n  --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  --saltButton-minWidth: var(--saltPill-minWidth, 40px);\n}\n\n.saltPill {\n  align-items: center;\n  border-radius: var(--saltPill-borderRadius, 0);\n  display: inline-flex;\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
+var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-actionable-primary-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-actionable-primary-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-actionable-primary-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-actionable-primary-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-actionable-primary-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-actionable-primary-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-actionable-primary-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-actionable-primary-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-actionable-primary-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-actionable-primary-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-actionable-primary-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-actionable-primary-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n  --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  --saltButton-background: var(--pill-background);\n  --saltButton-color: var(--pill-text-color);\n  --saltButton-fontSize: var(--pill-fontSize);\n  --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);\n  --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  --saltButton-minWidth: var(--saltPill-minWidth, 40px);\n}\n\n.saltPill {\n  align-items: center;\n  border-radius: var(--saltPill-borderRadius, 0);\n  display: inline-flex;\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Pill.css.js.map

package/dist-es/pill/internal/PillCheckbox.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the Pill checkbox */\n.saltPill-checkbox {\n  height: var(--pill-checkbox-size);\n  margin-left: 1px;\n  padding-right: 0;\n  width: var(--pill-checkbox-size);\n\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor);\n  --saltCheckbox-icon-fill: none;\n  --saltCheckbox-icon-fill-checked: none;\n  --saltCheckbox-icon-borderWidth-checked: var(--salt-size-border);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground);\n}\n";
+var css_248z = "/* Styles applied to the Pill checkbox */\n.saltPill-checkbox {\n  height: var(--pill-checkbox-size);\n  margin-left: 1px;\n  padding-right: 0;\n  width: var(--pill-checkbox-size);\n\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor);\n  --saltCheckbox-icon-fill: none;\n  --saltCheckbox-icon-fill-checked: none;\n  --saltCheckbox-icon-borderWidth-checked: var(--salt-size-border);\n  --saltCheckbox-icon-tick-color: var(--salt-actionable-primary-foreground);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=PillCheckbox.css.js.map

package/dist-es/pill-next/PillNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element */\n\n.saltPillNext {\n  display: flex;\n  max-width: 100%;\n}\n\n.saltPillNext-action {\n  --pillNext-background: var(--salt-actionable-primary-background);\n  --pillNext-background-active: var(--salt-actionable-primary-background-active);\n  --pillNext-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --pillNext-background-hover: var(--salt-actionable-primary-background-hover);\n  --pillNext-text-color: var(--salt-actionable-primary-foreground);\n  --pillNext-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --pillNext-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n  --pillNext-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n}\n\n.saltPillNext-action {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--pillNext-background);\n  border-radius: 0;\n  border: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  outline: 0;\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  color: var(--pillNext-text-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  min-width: 4em;\n}\n\n.saltPillNext-label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.saltPillNext-close-button {\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-padding: var(--salt-spacing-50);\n}\n\n.saltPillNext-action .saltIcon {\n  --saltIcon-color: currentColor;\n}\n\n/* Style applied to Pill if `onClick` prop is provided  */\n.saltPillNext-clickable {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPillNext-clickable:hover,\n.saltPillNext-clickable:focus-visible {\n  color: var(--pillNext-text-color-hover);\n  background: var(--pillNext-background-hover);\n}\n\n.saltPillNext-clickable.saltPillNext-disabled:hover {\n  color: var(--pillNext-text-color);\n  background: var(--pillNext-background);\n}\n\n.saltPillNext-clickable.saltPillNext-active,\n.saltPillNext-clickable:active {\n  background: var(--pillNext-background-active);\n  color: var(--pillNext-text-color-active);\n}\n\n.saltPillNext-clickable.saltPillNext-disabled.saltPillNext-active,\n.saltPillNext-clickable.saltPillNext-disabled:active {\n  background: var(--pillNext-background);\n  color: var(--pillNext-text-color);\n}\n\n/* Style applied to Pill on focus */\n.saltPillNext-action:focus-visible {\n  outline: var(--salt-focused-outline);\n  /* increase index by one so the focus ring sits on top of the sibling button */\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Style applied to Pill when disabled */\n.saltPillNext-action.saltPillNext-disabled,\n.saltPillNext-action.saltPillNext-disabled:hover {\n  color: var(--pillNext-text-color-disabled);\n  background: var(--pillNext-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n\n.saltPillNext {\n  display: flex;\n  max-width: 100%;\n}\n\n.saltPillNext-action {\n  --pillNext-background: var(--salt-actionable-primary-background);\n  --pillNext-background-active: var(--salt-actionable-primary-background-active);\n  --pillNext-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --pillNext-background-hover: var(--salt-actionable-primary-background-hover);\n  --pillNext-text-color: var(--salt-actionable-primary-foreground);\n  --pillNext-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --pillNext-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n  --pillNext-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n}\n\n.saltPillNext-action {\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--pillNext-background);\n  border-radius: 0;\n  border: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  outline: 0;\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  color: var(--pillNext-text-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}\n\n.saltPillNext-label {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.saltPillNext-close-button {\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-padding: var(--salt-spacing-50);\n}\n\n.saltPillNext-action .saltIcon {\n  --saltIcon-color: currentColor;\n}\n\n/* Style applied to Pill if `onClick` prop is provided  */\n.saltPillNext-clickable {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPillNext-clickable:hover,\n.saltPillNext-clickable:focus-visible {\n  color: var(--pillNext-text-color-hover);\n  background: var(--pillNext-background-hover);\n}\n\n.saltPillNext-clickable.saltPillNext-disabled:hover {\n  color: var(--pillNext-text-color);\n  background: var(--pillNext-background);\n}\n\n.saltPillNext-clickable.saltPillNext-active,\n.saltPillNext-clickable:active {\n  background: var(--pillNext-background-active);\n  color: var(--pillNext-text-color-active);\n}\n\n.saltPillNext-clickable.saltPillNext-disabled.saltPillNext-active,\n.saltPillNext-clickable.saltPillNext-disabled:active {\n  background: var(--pillNext-background);\n  color: var(--pillNext-text-color);\n}\n\n/* Style applied to Pill on focus */\n.saltPillNext-action:focus-visible {\n  outline: var(--salt-focused-outline);\n  /* increase index by one so the focus ring sits on top of the sibling button */\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Style applied to Pill when disabled */\n.saltPillNext-action.saltPillNext-disabled,\n.saltPillNext-action.saltPillNext-disabled:hover {\n  color: var(--pillNext-text-color-disabled);\n  background: var(--pillNext-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=PillNext.css.js.map

package/dist-es/progress/CircularProgress/CircularProgress.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCircularProgress {\n  color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-track {\n  inline-size: calc(var(--salt-size-base) * 3);\n  block-size: calc(var(--salt-size-base) * 3);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-size-bar-small);\n  border-radius: calc(var(--salt-size-base) * 3);\n  border-color: var(--salt-palette-neutral-secondary-border);\n}\n\n.saltCircularProgress-bar {\n  inline-size: calc(var(--salt-size-base) * 3);\n  block-size: calc(var(--salt-size-base) * 3);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-size-bar-strong);\n  border-radius: calc(var(--salt-size-base) * 3);\n  border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n  inline-size: 50%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  transform: rotate(180deg);\n  overflow: hidden;\n  position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n  inline-size: 100%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  overflow: hidden;\n  transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n  transform: rotate(0deg);\n}\n";
+var css_248z = ".saltCircularProgress {\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  position: relative;\n}\n\n.saltCircularProgress-progressValue {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  height: 100%;\n  justify-content: center;\n  left: 0;\n  position: absolute;\n  width: 100%;\n}\n\n.saltCircularProgress-track {\n  inline-size: calc(var(--salt-size-base) * 3);\n  block-size: calc(var(--salt-size-base) * 3);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-size-bar-small);\n  border-radius: calc(var(--salt-size-base) * 3);\n  border-color: var(--salt-palette-neutral-secondary-border);\n}\n\n.saltCircularProgress-bar {\n  inline-size: calc(var(--salt-size-base) * 3);\n  block-size: calc(var(--salt-size-base) * 3);\n  border-style: var(--salt-track-borderStyle);\n  border-width: var(--salt-size-bar-strong);\n  border-radius: calc(var(--salt-size-base) * 3);\n  border-color: var(--salt-accent-background);\n}\n\n.saltCircularProgress-bars {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 0;\n  inline-size: 100%;\n  block-size: 100%;\n}\n\n.saltCircularProgress-barOverlayRight,\n.saltCircularProgress-barOverlayLeft {\n  inline-size: 50%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  transform: rotate(180deg);\n  overflow: hidden;\n  position: absolute;\n}\n\n.saltCircularProgress-barSubOverlayRight,\n.saltCircularProgress-barSubOverlayLeft {\n  inline-size: 100%;\n  block-size: 100%;\n  transform-origin: 100% center;\n  overflow: hidden;\n  transform: rotate(-180deg);\n}\n\n.saltCircularProgress-barOverlayLeft {\n  transform: rotate(0deg);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CircularProgress.css.js.map

package/dist-es/progress/LinearProgress/LinearProgress.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-text-primary-foreground); /* TODO: update token to --salt-foreground-primary post theme1.0updates */\n  display: flex;\n  min-width: 400px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-track {\n  background: var(--salt-palette-neutral-secondary-border);\n  width: 100%;\n  height: var(--salt-size-bar-small);\n  position: absolute;\n  top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--salt-spacing-100);\n}\n";
+var css_248z = ".saltLinearProgress {\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: flex;\n  min-width: 400px;\n  font-size: var(--linearProgress-fontSize);\n}\n\n.saltLinearProgress-barContainer {\n  background: none;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  height: var(--salt-size-bar-strong);\n}\n\n.saltLinearProgress-bar {\n  width: 100%;\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  top: 0;\n  transition: transform 0.2s linear;\n  transform-origin: left;\n  background: var(--salt-accent-background);\n  z-index: 2;\n}\n\n.saltLinearProgress-track {\n  background: var(--salt-palette-neutral-secondary-border);\n  width: 100%;\n  height: var(--salt-size-bar-small);\n  position: absolute;\n  top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2);\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n\n.saltLinearProgress-progressValue {\n  color: inherit;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  margin: 0;\n  white-space: nowrap;\n  padding-left: var(--salt-spacing-100);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=LinearProgress.css.js.map