@salt-ds/lab 1.0.0-alpha.32 → 1.0.0-alpha.34

package/dist-es/tokenized-input/TokenizedInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton.saltButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n  --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n  --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
+var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n  box-sizing: border-box;\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton.saltButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n  --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n  --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TokenizedInput.css.js.map

package/dist-es/tokenized-input-next/TokenizedInputNext.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltTokenizedInputNext-container {\n  width: 100%;\n}\n.saltTokenizedInputNext {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);\n  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);\n  --tokenizedInput-border: none;\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--tokenizedInput-background);\n  border: var(--tokenizedInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: 100%;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  padding: 0 var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Style applied on hover */\n.saltTokenizedInputNext:hover {\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--tokenizedInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltTokenizedInputNext:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--tokenizedInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltTokenizedInputNext-primary {\n  --tokenizedInput-background: var(--salt-editable-primary-background);\n  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);\n  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltTokenizedInputNext-secondary {\n  --tokenizedInput-background: var(--salt-editable-secondary-background);\n  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltTokenizedInputNext-error,\n.saltTokenizedInputNext-error:hover {\n  --tokenizedInput-background: var(--salt-status-error-background);\n  --tokenizedInput-background-active: var(--salt-status-error-background);\n  --tokenizedInput-background-hover: var(--salt-status-error-background);\n  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltTokenizedInputNext-warning,\n.saltTokenizedInputNext-warning:hover {\n  --tokenizedInput-background: var(--salt-status-warning-background);\n  --tokenizedInput-background-active: var(--salt-status-warning-background);\n  --tokenizedInput-background-hover: var(--salt-status-warning-background);\n  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltTokenizedInputNext-success,\n.saltTokenizedInputNext-success:hover {\n  --tokenizedInput-background: var(--salt-status-success-background);\n  --tokenizedInput-background-active: var(--salt-status-success-background);\n  --tokenizedInput-background-hover: var(--salt-status-success-background);\n  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner textarea element */\n.saltTokenizedInputNext-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  flex-basis: 0;\n  height: var(--salt-text-lineHeight);\n  font: inherit;\n  letter-spacing: 0;\n  overflow: hidden;\n  resize: none;\n  padding: 0;\n  min-width: 1px; /* requires a min width to be visible */\n}\n.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {\n  flex-grow: 1;\n  min-width: 4em; /* on expanded, use the same min-width as input*/\n}\n\n/* Style applied to placeholder */\n.saltTokenizedInputNext-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltTokenizedInputNext-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltTokenizedInputNext-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltTokenizedInputNext-focused {\n  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltTokenizedInputNext-readOnly,\n.saltTokenizedInputNext-readOnly:active,\n.saltTokenizedInputNext-readOnly:hover {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltTokenizedInputNext-disabled,\n.saltTokenizedInputNext-disabled:hover,\n.saltTokenizedInputNext-disabled:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltTokenizedInputNext-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltTokenizedInputNext.saltTokenizedInputNext-bordered {\n  --tokenizedInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltTokenizedInputNext-bordered:active,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n.saltTokenizedInputNext-statusAdornment {\n  margin-left: auto;\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: auto;\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: 0;\n}\n\n.saltTokenizedInputNext .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {\n  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;\n}\n.saltTokenizedInputNext-hidden {\n  display: none;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltTokenizedInputNext-container {\n  width: 100%;\n}\n.saltTokenizedInputNext {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle);\n  --tokenizedInput-outlineColor: var(--salt-focused-outlineColor);\n  --tokenizedInput-border: none;\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--tokenizedInput-background);\n  border: var(--tokenizedInput-border);\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  flex-wrap: wrap;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: 100%;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  padding: 0 var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  box-sizing: border-box;\n}\n\n/* Style applied on hover */\n.saltTokenizedInputNext:hover {\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--tokenizedInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltTokenizedInputNext:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-active);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--tokenizedInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltTokenizedInputNext-primary {\n  --tokenizedInput-background: var(--salt-editable-primary-background);\n  --tokenizedInput-background-active: var(--salt-editable-primary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-primary-background-hover);\n  --tokenizedInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltTokenizedInputNext-secondary {\n  --tokenizedInput-background: var(--salt-editable-secondary-background);\n  --tokenizedInput-background-active: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-hover: var(--salt-editable-secondary-background-active);\n  --tokenizedInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --tokenizedInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltTokenizedInputNext-error,\n.saltTokenizedInputNext-error:hover {\n  --tokenizedInput-background: var(--salt-status-error-background);\n  --tokenizedInput-background-active: var(--salt-status-error-background);\n  --tokenizedInput-background-hover: var(--salt-status-error-background);\n  --tokenizedInput-borderColor: var(--salt-status-error-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltTokenizedInputNext-warning,\n.saltTokenizedInputNext-warning:hover {\n  --tokenizedInput-background: var(--salt-status-warning-background);\n  --tokenizedInput-background-active: var(--salt-status-warning-background);\n  --tokenizedInput-background-hover: var(--salt-status-warning-background);\n  --tokenizedInput-borderColor: var(--salt-status-warning-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltTokenizedInputNext-success,\n.saltTokenizedInputNext-success:hover {\n  --tokenizedInput-background: var(--salt-status-success-background);\n  --tokenizedInput-background-active: var(--salt-status-success-background);\n  --tokenizedInput-background-hover: var(--salt-status-success-background);\n  --tokenizedInput-borderColor: var(--salt-status-success-borderColor);\n  --tokenizedInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner textarea element */\n.saltTokenizedInputNext-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: inline-flex;\n  flex-basis: 0;\n  height: var(--salt-text-lineHeight);\n  font: inherit;\n  letter-spacing: 0;\n  overflow: hidden;\n  resize: none;\n  padding: 0;\n  min-width: 1px; /* requires a min width to be visible */\n}\n.saltTokenizedInputNext-expanded .saltTokenizedInputNext-textarea {\n  flex-grow: 1;\n  min-width: 4em; /* on expanded, use the same min-width as input*/\n}\n\n/* Style applied to placeholder */\n.saltTokenizedInputNext-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltTokenizedInputNext-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltTokenizedInputNext-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Styling when focused */\n.saltTokenizedInputNext-focused {\n  --tokenizedInput-borderColor: var(--tokenizedInput-outlineColor);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--tokenizedInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltTokenizedInputNext-readOnly,\n.saltTokenizedInputNext-readOnly:active,\n.saltTokenizedInputNext-readOnly:hover {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltTokenizedInputNext-disabled .saltTokenizedInputNext-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltTokenizedInputNext-disabled,\n.saltTokenizedInputNext-disabled:hover,\n.saltTokenizedInputNext-disabled:active {\n  --tokenizedInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --tokenizedInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--tokenizedInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltTokenizedInputNext-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--tokenizedInput-activationIndicator-borderWidth) var(--tokenizedInput-borderStyle) var(--tokenizedInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltTokenizedInputNext.saltTokenizedInputNext-bordered {\n  --tokenizedInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--tokenizedInput-borderColor);\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `bordered={true}` */\n.saltTokenizedInputNext-bordered:active,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-focused {\n  --tokenizedInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-readOnly:hover,\n.saltTokenizedInputNext-bordered.saltTokenizedInputNext-disabled:hover {\n  --tokenizedInput-activationIndicator-borderWidth: 0;\n}\n\n.saltTokenizedInputNext-statusAdornment {\n  margin-left: auto;\n  margin-right: var(--salt-spacing-100);\n}\n\n.saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: auto;\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n.saltTokenizedInputNext-statusAdornment ~ .saltTokenizedInputNext-endAdornmentContainer {\n  margin-left: 0;\n}\n\n.saltTokenizedInputNext .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltTokenizedInputNext .saltButton.saltTokenizedInputNext-endAdornment {\n  --saltButton-margin: auto calc(var(--salt-spacing-50) * -1) auto auto;\n}\n.saltTokenizedInputNext-hidden {\n  display: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TokenizedInputNext.css.js.map

package/dist-types/calendar/internal/CalendarContext.d.ts

@@ -1,8 +1,8 @@
 import { useCalendar } from "../useCalendar";
-declare type CalendarState = {
+interface CalendarState {
     state: ReturnType<typeof useCalendar>["state"];
     helpers: ReturnType<typeof useCalendar>["helpers"];
-};
+}
 declare const CalendarContext: import("react").Context<CalendarState | null>;
 declare function useCalendarContext(): CalendarState;
 export { CalendarContext, useCalendarContext };

package/dist-types/calendar/internal/CalendarNavigation.d.ts

@@ -1,12 +1,8 @@
-import { ButtonProps } from "@salt-ds/core";
 import { ComponentPropsWithRef } from "react";
-import { DropdownProps } from "../../dropdown";
+import { ButtonProps } from "@salt-ds/core";
+import { DropdownNextProps } from "../../dropdown-next";
 import { DateValue } from "@internationalized/date";
-declare type DropdownItem = {
-    value: DateValue;
-    disabled?: boolean;
-};
-declare type dateDropdownProps = DropdownProps<DropdownItem>;
+declare type dateDropdownProps = DropdownNextProps<DateValue>;
 export interface CalendarNavigationProps extends ComponentPropsWithRef<"div"> {
     MonthDropdownProps?: dateDropdownProps;
     YearDropdownProps?: dateDropdownProps;

package/dist-types/calendar/useCalendarDay.d.ts

@@ -1,13 +1,15 @@
 import { DateValue } from "@internationalized/date";
 import { RefObject } from "react";
-export declare type DayStatus = {
+export interface DayStatus {
     outOfRange?: boolean;
     selected?: boolean;
     today?: boolean;
-    unselectable?: "medium" | "low" | false;
+    unselectable?: string | false;
+    highlighted?: string | false;
     focused?: boolean;
+    disabled?: boolean;
     hidden?: boolean;
-};
+}
 export interface useCalendarDayProps {
     date: DateValue;
     month: DateValue;
@@ -15,5 +17,6 @@ export interface useCalendarDayProps {
 export declare function useCalendarDay({ date, month }: useCalendarDayProps, ref: RefObject<HTMLElement>): {
     status: DayStatus;
     dayProps: Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">;
-    unselectableReason: string | undefined;
+    unselectableReason: string | false | void;
+    highlightedReason: string | false | void;
 };

package/dist-types/calendar/useSelection.d.ts

@@ -10,14 +10,14 @@ interface BaseUseSelectionCalendarProps<SelectionVariantType> {
 }
 declare type SingleSelectionValueType = DateValue;
 declare type MultiSelectionValueType = DateValue[];
-declare type RangeSelectionValueType = {
+interface RangeSelectionValueType {
     startDate?: DateValue;
     endDate?: DateValue;
-};
-declare type OffsetSelectionValueType = {
+}
+interface OffsetSelectionValueType {
     startDate?: DateValue;
     endDate?: DateValue;
-};
+}
 export interface UseOffsetSelectionCalendarProps extends Omit<BaseUseSelectionCalendarProps<OffsetSelectionValueType>, "startDateOffset" | "endDateOffset"> {
     selectionVariant: "offset";
     startDateOffset?: (date: DateValue) => DateValue;

package/dist-types/combo-box-next/ComboBoxNext.d.ts

@@ -1,20 +1,17 @@
 import { ReactNode, Ref } from "react";
 import { InputProps } from "@salt-ds/core";
-import { ListControlProps } from "../list-control/ListControlState";
-export interface ComboBoxNextProps<Item = string> extends InputProps, Omit<ListControlProps<Item>, "value" | "defaultValue"> {
+import { UseComboBoxNextProps } from "./useComboBoxNext";
+export declare type ComboBoxNextProps<Item = string> = {
     /**
      * The options to display in the combo box.
      */
     children?: ReactNode;
+} & UseComboBoxNextProps<Item> & InputProps;
+export declare const ComboBoxNext: <Item = string>(props: {
     /**
-     * The default value of the input.
-     */
-    defaultValue?: string | readonly string[] | number | undefined;
-    /**
-     * The value of the input. The component will be controlled if this prop is provided.
+     * The options to display in the combo box.
      */
-    value?: string | readonly string[] | number | undefined;
-}
-export declare const ComboBoxNext: <Item = string>(props: ComboBoxNextProps<Item> & {
+    children?: ReactNode;
+} & import("../list-control/ListControlState").ListControlProps<Item> & Pick<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "defaultValue" | "value"> & InputProps & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => JSX.Element;

package/dist-types/combo-box-next/useComboBoxNext.d.ts

@@ -1,8 +1,11 @@
 import { ListControlProps } from "../list-control/ListControlState";
-import { SyntheticEvent } from "react";
+import { ComponentPropsWithoutRef, SyntheticEvent } from "react";
 import { OptionValue } from "../list-control/ListControlContext";
-export declare function useComboBoxNext<Item>(props: ListControlProps<Item>): {
+export declare type UseComboBoxNextProps<Item> = ListControlProps<Item> & Pick<ComponentPropsWithoutRef<"input">, "value" | "defaultValue">;
+export declare function useComboBoxNext<Item>(props: UseComboBoxNextProps<Item>): {
     select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
+    valueState: string | number | readonly string[] | undefined;
+    setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
     multiselect: boolean;
     openState: boolean;
     setOpen: (newOpen: boolean, reason?: import("../list-control/ListControlState").OpenChangeReason | undefined, key?: string | undefined) => void;
@@ -12,8 +15,6 @@ export declare function useComboBoxNext<Item>(props: ListControlProps<Item>): {
     selectedState: Item[];
     setSelectedState: import("react").Dispatch<import("react").SetStateAction<Item[]>>;
     clear: (event: SyntheticEvent<Element, Event>) => void;
-    valueState: string | number | readonly string[] | undefined;
-    setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
     focusVisibleState: boolean;
     setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     focusedState: boolean;
@@ -25,4 +26,5 @@ export declare function useComboBoxNext<Item>(props: ListControlProps<Item>): {
     getIndexOfOption: (option: OptionValue<Item>) => number;
     getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => OptionValue<Item>[];
     getOptionFromSearch: (search: string, startFrom?: OptionValue<Item> | undefined) => OptionValue<Item> | undefined;
+    valueToString: (item: Item) => string;
 };

package/dist-types/dialog/DialogHeader.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, ComponentPropsWithoutRef } from "react";
+import { ValidationStatus } from "@salt-ds/core";
+interface DialogTitleProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The status of the Dialog
+     */
+    status?: ValidationStatus | undefined;
+    /**
+     * Displays the accent bar in the Dialog Title */
+    disableAccent?: boolean;
+    /**
+     * Displays the header at the top of the Dialog
+     */
+    header: ReactNode;
+    /**
+     * Displays the preheader just above the header
+     **/
+    preheader?: ReactNode;
+    className?: string;
+}
+export declare const DialogHeader: ({ className, header, preheader, disableAccent, status: statusProp, ...rest }: DialogTitleProps) => JSX.Element;
+export {};

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

@@ -1,5 +1,5 @@
 export * from "./Dialog";
-export * from "./DialogTitle";
+export * from "./DialogHeader";
 export * from "./DialogActions";
 export * from "./DialogContent";
 export * from "./DialogContext";

package/dist-types/dropdown-next/DropdownNext.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { ListControlProps } from "../list-control/ListControlState";
 import { ValidationStatus } from "@salt-ds/core";
-export interface DropdownNextProps<Item = string> extends Omit<ComponentPropsWithoutRef<"button">, "value" | "defaultValue">, ListControlProps<Item> {
+export declare type DropdownNextProps<Item = string> = {
     /**
      * If `true`, the dropdown will be disabled.
      */
@@ -40,18 +40,60 @@ export interface DropdownNextProps<Item = string> extends Omit<ComponentPropsWit
      */
     variant?: "primary" | "secondary";
     /**
-     * The default content of the dropdown shown in the button.
+     * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.
+     */
+    value?: string;
+    /**
+     * Validation status, one of "error" | "warning" | "success".
+     */
+    validationStatus?: Exclude<ValidationStatus, "info">;
+} & Omit<ComponentPropsWithoutRef<"button">, "value" | "defaultValue"> & ListControlProps<Item>;
+export declare const DropdownNext: <Item = string>(props: {
+    /**
+     * If `true`, the dropdown will be disabled.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * If `true`, the dropdown will be read-only.
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * The options to display in the dropdown.
+     */
+    children?: ReactNode;
+    /**
+     * The marker to use in an empty read only dropdown.
+     * Use `''` to disable this feature. Defaults to '—'.
+     */
+    emptyReadOnlyMarker?: string | undefined;
+    /**
+     * If `true`, the dropdown will be multiselect.
+     */
+    multiselect?: boolean | undefined;
+    /**
+     * The text shown when the dropdown has no value.
+     */
+    placeholder?: string | undefined;
+    /**
+     * If `true`, the dropdown will be required.
      */
-    defaultValue?: string | readonly string[] | number | undefined;
+    required?: boolean | undefined;
+    /**
+     * Start adornment component
+     */
+    startAdornment?: ReactNode;
+    /**
+     * Styling variant. Defaults to "primary".
+     */
+    variant?: "primary" | "secondary" | undefined;
     /**
      * The content of the dropdown shown in the button. The component will be controlled if this prop is provided.
      */
-    value?: string | readonly string[] | number | undefined;
+    value?: string | undefined;
     /**
      * Validation status, one of "error" | "warning" | "success".
      */
-    validationStatus?: Exclude<ValidationStatus, "info">;
-}
-export declare const DropdownNext: <Item = string>(props: DropdownNextProps<Item> & {
+    validationStatus?: "error" | "warning" | "success" | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "defaultValue" | "value"> & ListControlProps<Item> & {
     ref?: Ref<HTMLButtonElement> | undefined;
 }) => JSX.Element;

package/dist-types/index.d.ts

@@ -16,7 +16,6 @@ export * from "./content-status";
 export * from "./deck-item";
 export * from "./deck-layout";
 export * from "./dialog";
-export * from "./drawer";
 export * from "./dropdown";
 export * from "./dropdown-next";
 export * from "./editable-label";

package/dist-types/list-control/ListControlContext.d.ts

@@ -3,7 +3,6 @@ export interface OptionValue<Item> {
     id: string;
     disabled: boolean;
     value: Item;
-    text: string;
 }
 export declare type OpenChangeReason = "input" | "manual";
 export interface ListControlContextValue<Item> {
@@ -16,6 +15,7 @@ export interface ListControlContextValue<Item> {
     setActive: (option: OptionValue<Item>) => void;
     multiselect: boolean;
     focusVisibleState: boolean;
+    valueToString: (item: Item) => string;
 }
 export declare const ListControlContext: import("react").Context<ListControlContextValue<any>>;
 export declare function useListControlContext<Item>(): ListControlContextValue<Item>;

package/dist-types/list-control/ListControlState.d.ts

@@ -1,8 +1,14 @@
 import { SyntheticEvent } from "react";
 import { OptionValue } from "./ListControlContext";
 export declare type OpenChangeReason = "input" | "manual";
-export interface ListControlProps<Item> {
+export declare type ListControlProps<Item> = {
+    /**
+     * If true, the control will be disabled.
+     */
     disabled?: boolean;
+    /**
+     * If true, the control will be read-only.
+     */
     readOnly?: boolean;
     /**
      * If true, the list will be open by default.
@@ -28,19 +34,16 @@ export interface ListControlProps<Item> {
      * Callback fired when the selected options change.
      */
     onSelectionChange?: (event: SyntheticEvent, newSelected: Item[]) => void;
-    /**
-     * The default value.
-     */
-    defaultValue?: string | readonly string[] | number | undefined;
-    /**
-     * The value. The component will be controlled if this prop is provided.
-     */
-    value?: string | readonly string[] | number | undefined;
     /**
      * If true, multiple options can be selected.
      */
     multiselect?: boolean;
-}
+    /**
+     * Callback used to convert an option's `value` to a string. This is needed when the value is different to the display value or the value is not a string.
+     */
+    valueToString?: (item: Item) => string;
+};
+export declare function defaultValueToString<Item>(item: Item): string;
 export declare function useListControl<Item>(props: ListControlProps<Item>): {
     multiselect: boolean;
     openState: boolean;
@@ -52,8 +55,6 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
     setSelectedState: import("react").Dispatch<import("react").SetStateAction<Item[]>>;
     select: (event: SyntheticEvent, option: OptionValue<Item>) => void;
     clear: (event: SyntheticEvent) => void;
-    valueState: string | number | readonly string[] | undefined;
-    setValueState: import("react").Dispatch<import("react").SetStateAction<string | number | readonly string[] | undefined>>;
     focusVisibleState: boolean;
     setFocusVisibleState: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     focusedState: boolean;
@@ -65,4 +66,5 @@ export declare function useListControl<Item>(props: ListControlProps<Item>): {
     getIndexOfOption: (option: OptionValue<Item>) => number;
     getOptionsMatching: (predicate: (option: OptionValue<Item>) => boolean) => OptionValue<Item>[];
     getOptionFromSearch: (search: string, startFrom?: OptionValue<Item> | undefined) => OptionValue<Item> | undefined;
+    valueToString: (item: Item) => string;
 };

package/dist-types/option/Option.d.ts

@@ -8,10 +8,6 @@ export interface OptionProps extends ComponentPropsWithoutRef<"div"> {
      * The value of the option.
      */
     value: unknown;
-    /**
-     * The text value of the option. If not provided, the text value will be inferred from the children.
-     */
-    textValue?: string;
     /**
      * The content of the option.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.32",
+  "version": "1.0.0-alpha.34",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.18.0",
+    "@salt-ds/core": "^1.19.0",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/styles": "^0.2.1",
     "@salt-ds/icons": "^1.9.1"

package/dist-cjs/dialog/DialogTitle.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = "/* Styles applied to the root element */\n.saltDialogTitle {\n  padding-bottom: var(--salt-spacing-100);\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n}\n\n.saltDialogTitle-title {\n  margin: 0;\n}\n\n/* Styles applied to the status indicator icon overriding its default size */\n.saltDialogTitle .saltStatusIndicator.saltIcon {\n  --icon-size: var(--salt-text-h2-lineHeight);\n}\n\n/* Styles applied to DialogTitle when accent={true} */\n.saltDialogTitle-withAccent {\n  position: relative;\n}\n\n.saltDialogTitle-withAccent::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: var(--salt-spacing-100);\n  width: var(--salt-size-accent);\n  background: var(--salt-accent-background);\n}\n\n.saltDialogTitle-error::before {\n  background: var(--salt-status-error-borderColor);\n}\n\n.saltDialogTitle-info::before {\n  background: var(--salt-status-info-borderColor);\n}\n\n.saltDialogTitle-success::before {\n  background: var(--salt-status-success-borderColor);\n}\n\n.saltDialogTitle-warning::before {\n  background: var(--salt-status-warning-borderColor);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=DialogTitle.css.js.map

package/dist-cjs/dialog/DialogTitle.css.js.map

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

package/dist-cjs/dialog/DialogTitle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DialogTitle.js","sources":["../src/dialog/DialogTitle.tsx"],"sourcesContent":["import { ReactNode, ComponentPropsWithoutRef } from \"react\";\nimport clsx from \"clsx\";\nimport {\n  H2,\n  StatusIndicator,\n  ValidationStatus,\n  makePrefixer,\n  Text,\n} from \"@salt-ds/core\";\nimport { useDialogContext } from \"./DialogContext\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport dialogTitleCss from \"./DialogTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogTitle\");\n\ninterface DialogTitleProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\"> {\n  /**\n   * The status of the Dialog\n   */\n  status?: ValidationStatus | undefined;\n  /**\n   * Displays the accent bar in the Dialog Title */\n  disableAccent?: boolean;\n  /**\n   * Displays the Dialog Title in a H2 component\n   */\n  title: ReactNode;\n  /**\n   * Displays the Dialog Subtitle in a Label component\n   **/\n  subtitle?: ReactNode;\n\n  className?: string;\n}\n\nexport const DialogTitle = ({\n  className,\n  title,\n  subtitle,\n  disableAccent,\n  status: statusProp,\n  ...rest\n}: DialogTitleProps) => {\n  const { status: statusContext, id } = useDialogContext();\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-dialog-title\",\n    css: dialogTitleCss,\n    window: targetWindow,\n  });\n\n  const status = statusProp ?? (statusContext as ValidationStatus);\n\n  return (\n    <div\n      id={id as string}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"withAccent\")]: !disableAccent && !status,\n          [withBaseName(status)]: !!status,\n        },\n        className\n      )}\n      {...rest}\n    >\n      {status && <StatusIndicator status={status} />}\n      <div>\n        {subtitle && (\n          <Text as={\"label\"} variant=\"secondary\">\n            {subtitle}\n          </Text>\n        )}\n        <H2 className={clsx(withBaseName(\"title\"))}>{title}</H2>\n      </div>\n    </div>\n  );\n};\n"],"names":["makePrefixer","useDialogContext","useWindow","useComponentCssInjection","dialogTitleCss","jsxs","clsx","jsx","StatusIndicator","Text","H2"],"mappings":";;;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAuB5C,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACL,GAAA,IAAA;AACL,CAAwB,KAAA;AACtB,EAAA,MAAM,EAAE,MAAA,EAAQ,aAAe,EAAA,EAAA,KAAOC,8BAAiB,EAAA,CAAA;AACvD,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,aAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAS,UAAe,IAAA,IAAA,GAAA,UAAA,GAAA,aAAA,CAAA;AAE9B,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAA;AAAA,IACA,SAAW,EAAAC,wBAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb;AAAA,QACE,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,CAAC,iBAAiB,CAAC,MAAA;AAAA,QACjD,CAAC,YAAA,CAAa,MAAM,CAAA,GAAI,CAAC,CAAC,MAAA;AAAA,OAC5B;AAAA,MACA,SAAA;AAAA,KACF;AAAA,IACC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,MAAA,oBAAWC,cAAA,CAAAC,oBAAA,EAAA;AAAA,QAAgB,MAAA;AAAA,OAAgB,CAAA;AAAA,sBAC3CH,eAAA,CAAA,KAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,UAAA,QAAA,oBACEE,cAAA,CAAAE,SAAA,EAAA;AAAA,YAAK,EAAI,EAAA,OAAA;AAAA,YAAS,OAAQ,EAAA,WAAA;AAAA,YACxB,QAAA,EAAA,QAAA;AAAA,WACH,CAAA;AAAA,0BAEDF,cAAA,CAAAG,OAAA,EAAA;AAAA,YAAG,SAAW,EAAAJ,wBAAA,CAAK,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,YAAI,QAAA,EAAA,KAAA;AAAA,WAAM,CAAA;AAAA,SAAA;AAAA,OACrD,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/drawer/Drawer.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = "/* Styles applied to Drawer component */\n.saltDrawer {\n  background: var(--drawer-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--salt-spacing-300);\n  box-shadow: var(--salt-overlayable-shadow-modal);\n  z-index: var(--salt-zIndex-drawer);\n  position: fixed;\n  top: 0;\n}\n\n/* Styles applied when variant = \"primary\" */\n.saltDrawer-primary {\n  --drawer-background: var(--salt-container-primary-background);\n}\n\n/* Styles applied when variant = \"secondary\" */\n.saltDrawer-secondary {\n  --drawer-background: var(--salt-container-secondary-background);\n}\n\n/* Styles applied when position = \"top\" */\n.saltDrawer-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n/* Styles applied when position = \"top\" and the component mounts */\n.saltDrawer-top.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n/* Styles applied when position = \"top\" and the component unmounts */\n.saltDrawer-top.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n/* Styles applied when position = \"right\" */\n.saltDrawer-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n/* Styles applied when position = \"right\" and the component mounts */\n.saltDrawer-right.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n/* Styles applied when position = \"right\" and the component unmounts */\n.saltDrawer-right.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n/* Styles applied when position = \"left\" */\n.saltDrawer-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n/* Styles applied when position = \"left\" and the component mounts */\n.saltDrawer-left.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n/* Styles applied when position = \"left\" and the component unmounts */\n.saltDrawer-left.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n/* Styles applied when position = \"bottom\" */\n.saltDrawer-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n/* Styles applied when position = \"bottom\" and the component mounts */\n.saltDrawer-bottom.saltDrawer-enterAnimation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n/* Styles applied when position = \"bottom\" and the component unmounts */\n.saltDrawer-bottom.saltDrawer-exitAnimation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=Drawer.css.js.map

package/dist-cjs/drawer/Drawer.css.js.map

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

package/dist-cjs/drawer/Drawer.js

@@ -1,104 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
-var react = require('@floating-ui/react');
-var core = require('@salt-ds/core');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-var Drawer$1 = require('./Drawer.css.js');
-
-const ConditionalScrimWrapper = ({
-  condition,
-  children
-}) => {
-  return condition ? /* @__PURE__ */ jsxRuntime.jsxs(core.Scrim, {
-    fixed: true,
-    children: [
-      " ",
-      children,
-      " "
-    ]
-  }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [
-      children,
-      " "
-    ]
-  });
-};
-const withBaseName = core.makePrefixer("saltDrawer");
-const Drawer = React.forwardRef(function Drawer2(props, ref) {
-  var _a, _b;
-  const {
-    children,
-    className,
-    position = "left",
-    open = false,
-    onOpenChange,
-    variant = "primary",
-    disableDismiss,
-    disableScrim,
-    ...rest
-  } = props;
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-drawer",
-    css: Drawer$1,
-    window: targetWindow
-  });
-  const [showComponent, setShowComponent] = React.useState(false);
-  const { Component: FloatingComponent } = core.useFloatingComponent();
-  const { context, floating, elements } = core.useFloatingUI({
-    open,
-    onOpenChange
-  });
-  const { getFloatingProps } = react.useInteractions([
-    react.useClick(context),
-    react.useDismiss(context, { enabled: !disableDismiss })
-  ]);
-  const handleRef = core.useForkRef(floating, ref);
-  React.useEffect(() => {
-    if (open && !showComponent) {
-      setShowComponent(true);
-    }
-    if (!open && showComponent) {
-      const animate = setTimeout(() => {
-        setShowComponent(false);
-      }, 300);
-      return () => clearTimeout(animate);
-    }
-  }, [open, showComponent, setShowComponent]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ConditionalScrimWrapper, {
-    condition: open && !disableScrim,
-    children: /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
-      open: showComponent,
-      ref: handleRef,
-      role: "dialog",
-      width: (_a = elements.floating) == null ? void 0 : _a.offsetWidth,
-      height: (_b = elements.floating) == null ? void 0 : _b.offsetHeight,
-      "aria-modal": "true",
-      focusManagerProps: {
-        context
-      },
-      className: clsx.clsx(
-        withBaseName(),
-        withBaseName(position),
-        {
-          [withBaseName("enterAnimation")]: open,
-          [withBaseName("exitAnimation")]: !open,
-          [withBaseName(variant)]: variant
-        },
-        className
-      ),
-      ...getFloatingProps(),
-      ...rest,
-      children
-    })
-  });
-});
-
-exports.Drawer = Drawer;
-//# sourceMappingURL=Drawer.js.map

package/dist-cjs/drawer/Drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useState,\n  PropsWithChildren,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useClick, useDismiss, useInteractions } from \"@floating-ui/react\";\nimport {\n  makePrefixer,\n  Scrim,\n  useFloatingComponent,\n  useFloatingUI,\n  useForkRef,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport drawerCss from \"./Drawer.css\";\n\ninterface ConditionalScrimWrapperProps extends PropsWithChildren {\n  condition: boolean;\n}\n\nconst ConditionalScrimWrapper = ({\n  condition,\n  children,\n}: ConditionalScrimWrapperProps) => {\n  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;\n};\n\nexport interface DrawerProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Defines the drawer position within the screen. Defaults to `left`.\n   */\n  position?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Change background color palette\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Prevent the dialog closing on click away\n   * */\n  disableDismiss?: boolean;\n  /**\n   * Prevent Scrim from rendering\n   * */\n  disableScrim?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n  props,\n  ref\n) {\n  const {\n    children,\n    className,\n    position = \"left\",\n    open = false,\n    onOpenChange,\n    variant = \"primary\",\n    disableDismiss,\n    disableScrim,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-drawer\",\n    css: drawerCss,\n    window: targetWindow,\n  });\n\n  const [showComponent, setShowComponent] = useState(false);\n  const { Component: FloatingComponent } = useFloatingComponent();\n\n  const { context, floating, elements } = useFloatingUI({\n    open,\n    onOpenChange,\n  });\n\n  const { getFloatingProps } = useInteractions([\n    useClick(context),\n    useDismiss(context, { enabled: !disableDismiss }),\n  ]);\n\n  const handleRef = useForkRef<HTMLDivElement>(floating, ref);\n\n  useEffect(() => {\n    if (open && !showComponent) {\n      setShowComponent(true);\n    }\n\n    if (!open && showComponent) {\n      const animate = setTimeout(() => {\n        setShowComponent(false);\n      }, 300); // var(--salt-duration-perceptible)\n      return () => clearTimeout(animate);\n    }\n  }, [open, showComponent, setShowComponent]);\n\n  return (\n    <ConditionalScrimWrapper condition={open && !disableScrim}>\n      <FloatingComponent\n        open={showComponent}\n        ref={handleRef}\n        role={\"dialog\"}\n        width={elements.floating?.offsetWidth}\n        height={elements.floating?.offsetHeight}\n        aria-modal=\"true\"\n        focusManagerProps={{\n          context: context,\n        }}\n        className={clsx(\n          withBaseName(),\n          withBaseName(position),\n          {\n            [withBaseName(\"enterAnimation\")]: open,\n            [withBaseName(\"exitAnimation\")]: !open,\n            [withBaseName(variant)]: variant,\n          },\n          className\n        )}\n        {...getFloatingProps()}\n        {...rest}\n      >\n        {children}\n      </FloatingComponent>\n    </ConditionalScrimWrapper>\n  );\n});\n"],"names":["jsxs","Scrim","Fragment","makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useFloatingComponent","useFloatingUI","useInteractions","useClick","useDismiss","useForkRef","useEffect","jsx","clsx"],"mappings":"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"}

package/dist-cjs/drawer/DrawerCloseButton.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var css_248z = ".saltDrawerCloseButton-container {\n  position: relative;\n  display: flex;\n  justify-content: flex-end;\n}\n\n.saltButton-secondary.saltDrawerCloseButton {\n  position: fixed;\n  margin-top: calc(var(--salt-spacing-300) * -1);\n  margin-right: calc(var(--salt-spacing-300) * -1);\n}\n";
-
-module.exports = css_248z;
-//# sourceMappingURL=DrawerCloseButton.css.js.map

package/dist-cjs/drawer/DrawerCloseButton.css.js.map

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