@salt-ds/core 1.72.0 → 1.74.0

package/dist-es/pill/PillCheckIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"PillCheckIcon.js","sources":["../src/pill/PillCheckIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"../utils\";\nimport pillCheckIcon from \"./PillCheckIcon.css\";\n\nexport interface PillCheckIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltPillCheckIcon\");\n\nexport const PillCheckIcon = ({\n  className,\n  checked = false,\n  disabled = false,\n  active = false,\n}: PillCheckIconProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill-check-icon\",\n    css: pillCheckIcon,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        },\n        className,\n      )}\n    >\n      {checked &&\n        (active ? (\n          <CheckmarkIcon className={withBaseName(\"icon\")} />\n        ) : (\n          <CheckmarkSolidIcon className={withBaseName(\"solidIcon\")} />\n        ))}\n    </div>\n  );\n};\n"],"names":["pillCheckIcon"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS;AACX,CAAA,KAAuC;AACrC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,sBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,OAAA,KACE,MAAA,mBACC,GAAA,CAAC,aAAA,EAAA,EAAc,WAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA,mBAEhD,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EAAG,CAAA;AAAA;AAAA,GAEhE;AAEJ;;;;"}
+{"version":3,"file":"PillCheckIcon.js","sources":["../src/pill/PillCheckIcon.tsx"],"sourcesContent":["import { CheckmarkIcon, CheckmarkSolidIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { ReactElement } from \"react\";\nimport { makePrefixer } from \"../utils\";\nimport pillCheckIcon from \"./PillCheckIcon.css\";\n\nexport interface PillCheckIconProps {\n  checked?: boolean;\n  className?: string;\n  disabled?: boolean;\n  active?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltPillCheckIcon\");\n\nexport const PillCheckIcon = ({\n  className,\n  checked = false,\n  disabled = false,\n  active = false,\n}: PillCheckIconProps): ReactElement => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill-check-icon\",\n    css: pillCheckIcon,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"checked\")]: checked,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"active\")]: active,\n        },\n        className,\n      )}\n    >\n      {checked &&\n        (active ? (\n          <CheckmarkIcon className={withBaseName(\"icon\")} />\n        ) : (\n          <CheckmarkSolidIcon className={withBaseName(\"solidIcon\")} />\n        ))}\n    </div>\n  );\n};\n"],"names":["pillCheckIcon"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,OAAA,GAAU,KAAA;AAAA,EACV,QAAA,GAAW,KAAA;AAAA,EACX,MAAA,GAAS;AACX,CAAA,KAAwC;AACtC,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,sBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAY,MAAA;AAAA,MACZ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,OAAA,KACE,MAAA,mBACC,GAAA,CAAC,aAAA,EAAA,EAAc,WAAW,YAAA,CAAa,MAAM,CAAA,EAAG,CAAA,mBAEhD,GAAA,CAAC,kBAAA,EAAA,EAAmB,SAAA,EAAW,YAAA,CAAa,WAAW,CAAA,EAAG,CAAA;AAAA;AAAA,GAEhE;AAEJ;;;;"}

package/dist-es/pill-input/PillInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltPillInput-tertiary {\n  --pillInput-background: var(--salt-editable-tertiary-background);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltPillInput-letterSpacing, var(--salt-text-letterSpacing));\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltPillInput {\n  align-items: center;\n  background: var(--saltPillInput-background, var(--pillInput-background));\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--saltPillInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltPillInput-fontSize, var(--salt-text-fontSize));\n  line-height: var(--saltPillInput-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--saltPillInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltPillInput-minWidth, 4em);\n  padding-left: var(--saltPillInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltPillInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n}\n\n.saltPillInput-truncate {\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-truncate .saltPillInput-inputWrapper {\n  flex-wrap: nowrap;\n}\n\n.saltPillInput:hover {\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltPillInput-bordered.saltPillInput {\n  --pillInput-borderWidth: var(--salt-size-fixed-100);\n  border: var(--pillInput-borderWidth) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput-bordered.saltPillInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltPillInput-bordered.saltPillInput-focused,\n.saltPillInput-bordered.saltPillInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-bordered.saltPillInput-readOnly,\n.saltPillInput-bordered.saltPillInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-bordered.saltPillInput-disabled,\n.saltPillInput-bordered.saltPillInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--pillInput-borderColor);\n}\n\n.saltPillInput:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--pillInput-borderColor-hover);\n}\n\n.saltPillInput-focused .saltPillInput-activationIndicator,\n.saltPillInput-focused:hover .saltPillInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--pillInput-borderColor-active);\n}\n\n.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-readOnly:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltPillInput-disabled .saltPillInput-activationIndicator,\n.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltPillInput-bordered .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-readOnly .saltPillInput-activationIndicator,\n.saltPillInput-bordered.saltPillInput-disabled:hover .saltPillInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltPillInput-bordered.saltPillInput-focused .saltPillInput-activationIndicator {\n  border-bottom-width: calc(var(--salt-size-fixed-200) - var(--pillInput-borderWidth));\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltPillInput-primary {\n  --pillInput-background: var(--salt-editable-primary-background);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltPillInput-secondary {\n  --pillInput-background: var(--salt-editable-secondary-background);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltPillInput-tertiary {\n  --pillInput-background: var(--salt-editable-tertiary-background);\n  --pillInput-background-readonly: var(--salt-editable-background-readonly);\n  --pillInput-borderColor: var(--salt-editable-borderColor);\n  --pillInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --pillInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --pillInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltPillInput-error {\n  --pillInput-background: var(--salt-status-error-background);\n  --pillInput-background-readonly: var(--salt-status-error-background);\n  --pillInput-borderColor: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-error-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --pillInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltPillInput-warning {\n  --pillInput-background: var(--salt-status-warning-background);\n  --pillInput-background-readonly: var(--salt-status-warning-background);\n  --pillInput-borderColor: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --pillInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltPillInput-success {\n  --pillInput-background: var(--salt-status-success-background);\n  --pillInput-background-readonly: var(--salt-status-success-background);\n  --pillInput-borderColor: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-active: var(--salt-status-success-borderColor);\n  --pillInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --pillInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltPillInput-focused,\n.saltPillInput-focused:hover {\n  cursor: var(--salt-cursor-text);\n  outline: var(--saltPillInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--pillInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltPillInput.saltPillInput-readOnly {\n  background: var(--pillInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltPillInput-disabled,\n.saltPillInput-disabled:hover {\n  background: var(--pillInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltPillInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltPillInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltPillInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  column-gap: var(--salt-spacing-100);\n  align-self: flex-start;\n}\n\n.saltPillInput-statusAdornmentContainer {\n  align-self: flex-start;\n  display: inline-flex;\n  align-items: center;\n  height: var(--salt-size-base);\n}\n\n.saltPillInput-readOnly .saltPillInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltPillInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltPillInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltPillInput-startAdornmentContainer > .saltButton,\n.saltPillInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltPillInput-inputWrapper {\n  display: flex;\n  gap: var(--salt-spacing-50);\n  align-items: center;\n  flex: 1;\n  padding: var(--salt-spacing-50) 0;\n  flex-wrap: wrap;\n  max-height: inherit;\n  height: inherit;\n  overflow-y: auto;\n  box-sizing: border-box;\n}\n\n.saltPillInput-bordered > .saltPillInput-endAdornmentContainer {\n  padding-top: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth));\n}\n\n.saltPillInput-bordered > .saltPillInput-inputWrapper {\n  padding: calc(var(--salt-spacing-50) - var(--pillInput-borderWidth)) 0;\n}\n\n.saltPillInput-pillList {\n  display: contents;\n}\n\n.saltPillInput-pillList div[role=\"listitem\"] {\n  display: inline;\n}\n\n.saltPillInput-overflowIndicator {\n  width: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* Style applied to inner input component */\n.saltPillInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltPillInput-letterSpacing, var(--salt-text-letterSpacing));\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--pillInput-textAlign, left);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltPillInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltPillInput-disabled .saltPillInput-input::selection {\n  background: none;\n}\n\n/* Style applied to placeholder text */\n.saltPillInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-lighter);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=PillInput.css.js.map

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

@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../../text/Code.js';
 import '../../text/Display.js';
+import '../../text/Editorial.js';
+import '../../text/Eyebrow.js';
 import '../../text/Headings.js';
 import '../../text/Label.js';
 import { Text } from '../../text/Text.js';

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

@@ -1 +1 @@
-{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n} from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nconst getRotationAngle = (bar: number, shift = 0) => {\n  return -180 + ((bar - shift) / 50) * 180;\n};\n\nexport interface CircularProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the buffer indicator.\n   * Value between 0 and max.\n   */\n  bufferValue?: number;\n  /**\n   * Whether to hide the text label within the progress. Defaults to `false`.\n   */\n  hideLabel?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * The value of the min progress indicator.\n   * Default value is 0.\n   */\n  min?: number;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\nexport const CircularProgress = forwardRef<\n  HTMLDivElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    className,\n    hideLabel = false,\n    max = 100,\n    min = 0,\n    value = 0,\n    bufferValue = 0,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-circular-progress\",\n    css: circularProgressCSS,\n    window: targetWindow,\n  });\n\n  const bufferSubOverlayRightStyle: CSSProperties = {};\n  const bufferSubOverlayLeftStyle: CSSProperties = {};\n  const barSubOverlayRightStyle: CSSProperties = {};\n  const barSubOverlayLeftStyle: CSSProperties = {};\n\n  const buffer = ((bufferValue - min) / (max - min)) * 100;\n  const progress = ((value - min) / (max - min)) * 100;\n\n  if (progress <= 50) {\n    const rotationAngle = getRotationAngle(progress);\n    barSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n    barSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n  } else {\n    const rotationAngle = getRotationAngle(progress, 50);\n    barSubOverlayRightStyle.transform = \"rotate(0deg)\";\n    barSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n  }\n  if (buffer <= 50) {\n    const rotationAngle = getRotationAngle(buffer);\n    bufferSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n    bufferSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n  } else {\n    const rotationAngle = getRotationAngle(buffer, 50);\n    bufferSubOverlayRightStyle.transform = \"rotate(0deg)\";\n    bufferSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      role=\"progressbar\"\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={Math.round(value)}\n      {...rest}\n    >\n      <div className={withBaseName(\"track\")} />\n      <div className={withBaseName(\"bars\")}>\n        {buffer > 0 && (\n          <div className={withBaseName(\"bufferOverlayRight\")}>\n            <div\n              className={clsx(withBaseName(\"bufferSubOverlayRight\"), {\n                [withBaseName(\"bufferSubOverlay\")]: buffer <= 50,\n              })}\n              style={bufferSubOverlayRightStyle}\n            >\n              <div className={withBaseName(\"bufferBackground\")} />\n              <div className={withBaseName(\"bufferBorder\")} />\n            </div>\n          </div>\n        )}\n        <div className={withBaseName(\"barOverlayRight\")}>\n          <div\n            className={withBaseName(\"barSubOverlayRight\")}\n            style={barSubOverlayRightStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n        {buffer > 0 && (\n          <div className={withBaseName(\"bufferOverlayLeft\")}>\n            <div\n              className={clsx(\n                withBaseName(\"bufferSubOverlay\"),\n                withBaseName(\"bufferSubOverlayLeft\"),\n              )}\n              style={bufferSubOverlayLeftStyle}\n            >\n              <div className={withBaseName(\"bufferBorder\")} />\n              <div className={withBaseName(\"bufferBackground\")} />\n            </div>\n          </div>\n        )}\n        <div className={withBaseName(\"barOverlayLeft\")}>\n          <div\n            className={withBaseName(\"barSubOverlayLeft\")}\n            style={barSubOverlayLeftStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n      </div>\n      {!hideLabel && (\n        <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n          {`${Math.round(progress)} %`}\n        </Text>\n      )}\n    </div>\n  );\n});\n"],"names":["CircularProgress","circularProgressCSS"],"mappings":"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"}
+{"version":3,"file":"CircularProgress.js","sources":["../src/progress/CircularProgress/CircularProgress.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  forwardRef,\n} from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\n\nimport circularProgressCSS from \"./CircularProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltCircularProgress\");\n\nconst getRotationAngle = (bar: number, shift = 0) => {\n  return -180 + ((bar - shift) / 50) * 180;\n};\n\nexport interface CircularProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the buffer indicator.\n   * Value between 0 and max.\n   */\n  bufferValue?: number;\n  /**\n   * Whether to hide the text label within the progress. Defaults to `false`.\n   */\n  hideLabel?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * The value of the min progress indicator.\n   * Default value is 0.\n   */\n  min?: number;\n  /**\n   * The value of the progress indicator.\n   * Value between 0 and max.\n   */\n  value?: number;\n}\n\nexport const CircularProgress = forwardRef<\n  HTMLDivElement,\n  CircularProgressProps\n>(function CircularProgress(\n  {\n    className,\n    hideLabel = false,\n    max = 100,\n    min = 0,\n    value = 0,\n    bufferValue = 0,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-circular-progress\",\n    css: circularProgressCSS,\n    window: targetWindow,\n  });\n\n  const bufferSubOverlayRightStyle: CSSProperties = {};\n  const bufferSubOverlayLeftStyle: CSSProperties = {};\n  const barSubOverlayRightStyle: CSSProperties = {};\n  const barSubOverlayLeftStyle: CSSProperties = {};\n\n  const buffer = ((bufferValue - min) / (max - min)) * 100;\n  const progress = ((value - min) / (max - min)) * 100;\n\n  if (progress <= 50) {\n    const rotationAngle = getRotationAngle(progress);\n    barSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n    barSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n  } else {\n    const rotationAngle = getRotationAngle(progress, 50);\n    barSubOverlayRightStyle.transform = \"rotate(0deg)\";\n    barSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n  }\n  if (buffer <= 50) {\n    const rotationAngle = getRotationAngle(buffer);\n    bufferSubOverlayRightStyle.transform = `rotate(${rotationAngle}deg)`;\n    bufferSubOverlayLeftStyle.transform = \"rotate(-180deg)\";\n  } else {\n    const rotationAngle = getRotationAngle(buffer, 50);\n    bufferSubOverlayRightStyle.transform = \"rotate(0deg)\";\n    bufferSubOverlayLeftStyle.transform = `rotate(${rotationAngle}deg)`;\n  }\n\n  return (\n    <div\n      className={clsx(withBaseName(), className)}\n      ref={ref}\n      role=\"progressbar\"\n      aria-valuemax={max}\n      aria-valuemin={min}\n      aria-valuenow={Math.round(value)}\n      {...rest}\n    >\n      <div className={withBaseName(\"track\")} />\n      <div className={withBaseName(\"bars\")}>\n        {buffer > 0 && (\n          <div className={withBaseName(\"bufferOverlayRight\")}>\n            <div\n              className={clsx(withBaseName(\"bufferSubOverlayRight\"), {\n                [withBaseName(\"bufferSubOverlay\")]: buffer <= 50,\n              })}\n              style={bufferSubOverlayRightStyle}\n            >\n              <div className={withBaseName(\"bufferBackground\")} />\n              <div className={withBaseName(\"bufferBorder\")} />\n            </div>\n          </div>\n        )}\n        <div className={withBaseName(\"barOverlayRight\")}>\n          <div\n            className={withBaseName(\"barSubOverlayRight\")}\n            style={barSubOverlayRightStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n        {buffer > 0 && (\n          <div className={withBaseName(\"bufferOverlayLeft\")}>\n            <div\n              className={clsx(\n                withBaseName(\"bufferSubOverlay\"),\n                withBaseName(\"bufferSubOverlayLeft\"),\n              )}\n              style={bufferSubOverlayLeftStyle}\n            >\n              <div className={withBaseName(\"bufferBorder\")} />\n              <div className={withBaseName(\"bufferBackground\")} />\n            </div>\n          </div>\n        )}\n        <div className={withBaseName(\"barOverlayLeft\")}>\n          <div\n            className={withBaseName(\"barSubOverlayLeft\")}\n            style={barSubOverlayLeftStyle}\n          >\n            <div className={withBaseName(\"bar\")} />\n          </div>\n        </div>\n      </div>\n      {!hideLabel && (\n        <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n          {`${Math.round(progress)} %`}\n        </Text>\n      )}\n    </div>\n  );\n});\n"],"names":["CircularProgress","circularProgressCSS"],"mappings":"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"}

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

@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../../text/Code.js';
 import '../../text/Display.js';
+import '../../text/Editorial.js';
+import '../../text/Eyebrow.js';
 import '../../text/Headings.js';
 import '../../text/Label.js';
 import { Text } from '../../text/Text.js';

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

@@ -1 +1 @@
-{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the buffer indicator.\n   * Value between `min` and `max`.\n   * When no `value` and `bufferValue` is passed in, show as indeterminate state.\n   */\n  bufferValue?: number;\n  /**\n   * Whether to hide the text label within the progress. Defaults to `false`.\n   */\n  hideLabel?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * The value of the min progress indicator.\n   * Default value is 0.\n   */\n  min?: number;\n  /**\n   * The value of the progress indicator.\n   * Value between `min` and `max`.\n   * When no `value` and `bufferValue` is passed in, show as indeterminate state.\n   */\n  value?: number;\n}\n\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    {\n      className,\n      hideLabel = false,\n      max = 100,\n      min = 0,\n      value,\n      bufferValue,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-linear-progress\",\n      css: linearProgressCss,\n      window: targetWindow,\n    });\n\n    const isIndeterminate = value === undefined && bufferValue === undefined;\n    const progress =\n      value === undefined ? 0 : ((value - min) / (max - min)) * 100;\n    const buffer =\n      bufferValue === undefined ? 0 : ((bufferValue - min) / (max - min)) * 100;\n    const barStyle = {\n      width: isIndeterminate ? undefined : `${progress}%`,\n    };\n    const bufferStyle = {\n      width: `${buffer}%`,\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuenow={value === undefined ? undefined : Math.round(value)}\n        {...rest}\n      >\n        <div className={withBaseName(\"barContainer\")}>\n          <div\n            className={clsx(withBaseName(\"bar\"), {\n              [withBaseName(\"indeterminate\")]: isIndeterminate,\n            })}\n            style={barStyle}\n          />\n          {bufferValue && bufferValue > 0 ? (\n            <div className={withBaseName(\"buffer\")} style={bufferStyle} />\n          ) : null}\n          <div className={withBaseName(\"track\")} />\n        </div>\n        {!hideLabel && (\n          <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n            {isIndeterminate ? \"— %\" : `${Math.round(progress)} %`}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["LinearProgress","linearProgressCss"],"mappings":";;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AA+B/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CACP;AAAA,IACE,SAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,GAAA,GAAM,GAAA;AAAA,IACN,GAAA,GAAM,CAAA;AAAA,IACN,KAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,eAAA,GAAkB,KAAA,KAAU,MAAA,IAAa,WAAA,KAAgB,MAAA;AAC/D,IAAA,MAAM,WACJ,KAAA,KAAU,MAAA,GAAY,KAAM,KAAA,GAAQ,GAAA,KAAQ,MAAM,GAAA,CAAA,GAAQ,GAAA;AAC5D,IAAA,MAAM,SACJ,WAAA,KAAgB,MAAA,GAAY,KAAM,WAAA,GAAc,GAAA,KAAQ,MAAM,GAAA,CAAA,GAAQ,GAAA;AACxE,IAAA,MAAM,QAAA,GAAW;AAAA,MACf,KAAA,EAAO,eAAA,GAAkB,MAAA,GAAY,CAAA,EAAG,QAAQ,CAAA,CAAA;AAAA,KAClD;AACA,IAAA,MAAM,WAAA,GAAc;AAAA,MAClB,KAAA,EAAO,GAAG,MAAM,CAAA,CAAA;AAAA,KAClB;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,eAAA,EAAe,GAAA;AAAA,QACf,eAAA,EAAe,GAAA;AAAA,QACf,iBAAe,KAAA,KAAU,MAAA,GAAY,MAAA,GAAY,IAAA,CAAK,MAAM,KAAK,CAAA;AAAA,QAChE,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,cAAc,CAAA,EACzC,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,KAAK,CAAA,EAAG;AAAA,kBACnC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG;AAAA,iBAClC,CAAA;AAAA,gBACD,KAAA,EAAO;AAAA;AAAA,aACT;AAAA,YACC,WAAA,IAAe,WAAA,GAAc,CAAA,mBAC5B,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAAG,KAAA,EAAO,WAAA,EAAa,CAAA,GAC1D,IAAA;AAAA,4BACJ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,WAAA,EACzC,CAAA;AAAA,UACC,CAAC,SAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,MAAK,SAAA,EAAW,YAAA,CAAa,eAAe,CAAA,EACvD,4BAAkB,UAAA,GAAQ,CAAA,EAAG,KAAK,KAAA,CAAM,QAAQ,CAAC,CAAA,EAAA,CAAA,EACpD;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"LinearProgress.js","sources":["../src/progress/LinearProgress/LinearProgress.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\n\nimport linearProgressCss from \"./LinearProgress.css\";\n\nconst withBaseName = makePrefixer(\"saltLinearProgress\");\n\nexport interface LinearProgressProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The value of the buffer indicator.\n   * Value between `min` and `max`.\n   * When no `value` and `bufferValue` is passed in, show as indeterminate state.\n   */\n  bufferValue?: number;\n  /**\n   * Whether to hide the text label within the progress. Defaults to `false`.\n   */\n  hideLabel?: boolean;\n  /**\n   * The value of the max progress indicator.\n   * Default value is 100.\n   */\n  max?: number;\n  /**\n   * The value of the min progress indicator.\n   * Default value is 0.\n   */\n  min?: number;\n  /**\n   * The value of the progress indicator.\n   * Value between `min` and `max`.\n   * When no `value` and `bufferValue` is passed in, show as indeterminate state.\n   */\n  value?: number;\n}\n\nexport const LinearProgress = forwardRef<HTMLDivElement, LinearProgressProps>(\n  function LinearProgress(\n    {\n      className,\n      hideLabel = false,\n      max = 100,\n      min = 0,\n      value,\n      bufferValue,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-linear-progress\",\n      css: linearProgressCss,\n      window: targetWindow,\n    });\n\n    const isIndeterminate = value === undefined && bufferValue === undefined;\n    const progress =\n      value === undefined ? 0 : ((value - min) / (max - min)) * 100;\n    const buffer =\n      bufferValue === undefined ? 0 : ((bufferValue - min) / (max - min)) * 100;\n    const barStyle = {\n      width: isIndeterminate ? undefined : `${progress}%`,\n    };\n    const bufferStyle = {\n      width: `${buffer}%`,\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-valuenow={value === undefined ? undefined : Math.round(value)}\n        {...rest}\n      >\n        <div className={withBaseName(\"barContainer\")}>\n          <div\n            className={clsx(withBaseName(\"bar\"), {\n              [withBaseName(\"indeterminate\")]: isIndeterminate,\n            })}\n            style={barStyle}\n          />\n          {bufferValue && bufferValue > 0 ? (\n            <div className={withBaseName(\"buffer\")} style={bufferStyle} />\n          ) : null}\n          <div className={withBaseName(\"track\")} />\n        </div>\n        {!hideLabel && (\n          <Text styleAs=\"h2\" className={withBaseName(\"progressLabel\")}>\n            {isIndeterminate ? \"— %\" : `${Math.round(progress)} %`}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["LinearProgress","linearProgressCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AA+B/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CACP;AAAA,IACE,SAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,GAAA,GAAM,GAAA;AAAA,IACN,GAAA,GAAM,CAAA;AAAA,IACN,KAAA;AAAA,IACA,WAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,eAAA,GAAkB,KAAA,KAAU,MAAA,IAAa,WAAA,KAAgB,MAAA;AAC/D,IAAA,MAAM,WACJ,KAAA,KAAU,MAAA,GAAY,KAAM,KAAA,GAAQ,GAAA,KAAQ,MAAM,GAAA,CAAA,GAAQ,GAAA;AAC5D,IAAA,MAAM,SACJ,WAAA,KAAgB,MAAA,GAAY,KAAM,WAAA,GAAc,GAAA,KAAQ,MAAM,GAAA,CAAA,GAAQ,GAAA;AACxE,IAAA,MAAM,QAAA,GAAW;AAAA,MACf,KAAA,EAAO,eAAA,GAAkB,MAAA,GAAY,CAAA,EAAG,QAAQ,CAAA,CAAA;AAAA,KAClD;AACA,IAAA,MAAM,WAAA,GAAc;AAAA,MAClB,KAAA,EAAO,GAAG,MAAM,CAAA,CAAA;AAAA,KAClB;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACA,IAAA,EAAK,aAAA;AAAA,QACL,eAAA,EAAe,GAAA;AAAA,QACf,eAAA,EAAe,GAAA;AAAA,QACf,iBAAe,KAAA,KAAU,MAAA,GAAY,MAAA,GAAY,IAAA,CAAK,MAAM,KAAK,CAAA;AAAA,QAChE,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,cAAc,CAAA,EACzC,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,KAAK,CAAA,EAAG;AAAA,kBACnC,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG;AAAA,iBAClC,CAAA;AAAA,gBACD,KAAA,EAAO;AAAA;AAAA,aACT;AAAA,YACC,WAAA,IAAe,WAAA,GAAc,CAAA,mBAC5B,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,QAAQ,CAAA,EAAG,KAAA,EAAO,WAAA,EAAa,CAAA,GAC1D,IAAA;AAAA,4BACJ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,WAAA,EACzC,CAAA;AAAA,UACC,CAAC,SAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,MAAK,SAAA,EAAW,YAAA,CAAa,eAAe,CAAA,EACvD,4BAAkB,UAAA,GAAQ,CAAA,EAAG,KAAK,KAAA,CAAM,QAAQ,CAAC,CAAA,EAAA,CAAA,EACpD;AAAA;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

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

@@ -27,9 +27,11 @@ function ThemeApplicator({
       targetDocument[providerSymbol] = providerId;
     }
     if (providerId !== targetDocument[providerSymbol]) {
-      console.warn(
-        "Multiple providers targeting the same window. There can be only one level root level SaltProvider per window."
-      );
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          "Multiple providers targeting the same window. There can be only one level root level SaltProvider per window."
+        );
+      }
       return;
     }
     const themeNames = theme.split(" ");
@@ -87,12 +89,14 @@ function ThemeApplicator({
         ...themeNextProps
       });
     }
-    console.warn(
-      `
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(
+        `
 SaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.
         Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a
         div element will wrap your child elements`
-    );
+      );
+    }
     return children;
   }
   if (applyClassesTo === "scope") {

package/dist-es/salt-provider/ThemeApplicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeApplicator.js","sources":["../src/salt-provider/ThemeApplicator.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n} from \"react\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme/index\";\nimport { useId } from \"../utils/useId\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nexport interface ThemeApplicatorProps {\n  /**\n   * Either \"root\", \"scope\" or \"child\".\n   * Specifies the location of salt theme class and attributes should be applied to.\n   *\n   * Defaults to \"root\" for a root provider, otherwise \"scope\".\n   */\n  applyClassesTo: \"root\" | \"scope\" | \"child\";\n  /**\n   * Either \"high\", \"medium\", \"low\", \"touch\" or \"mobile\".\n   * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n   * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n   *\n   * @default \"medium\"\n   */\n  density: Density;\n  /**\n   * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n   */\n  theme: ThemeName;\n  /**\n   * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n   * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n   *\n   * @default \"light\"\n   */\n  mode: Mode;\n  /**\n   * Either \"sharp\" or \"rounded\".\n   * Determines selected components corner radius.\n   * @default \"sharp\"\n   */\n  corner?: Corner;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of display and heading text.\n   * @default \"Open Sans\"\n   */\n  headingFont?: HeadingFont;\n  /**\n   * Either \"blue\" or \"teal\".\n   * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n   * @default \"blue\"\n   */\n  accent?: Accent;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of action components, mostly Buttons.\n   * @default \"Open Sans\"\n   */\n  actionFont?: ActionFont;\n  children?: ReactNode;\n}\n\nconst providerSymbol = Symbol.for(\"salt-provider\");\n\nexport function ThemeApplicator({\n  applyClassesTo,\n  children,\n  density,\n  mode,\n  theme,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: ThemeApplicatorProps) {\n  const targetWindow = useWindow();\n\n  const providerId = useId();\n\n  useIsomorphicLayoutEffect(() => {\n    if (applyClassesTo !== \"root\" || !targetWindow || !providerId) return;\n\n    const targetDocument: Document & { [providerSymbol]?: string } =\n      targetWindow.document;\n\n    // Claim the document if no other provider has already. The symbol is used so the lock isn't enumerable and guarantees it won't clash with anything else.\n    if (!targetDocument[providerSymbol]) {\n      targetDocument[providerSymbol] = providerId;\n    }\n\n    if (providerId !== targetDocument[providerSymbol]) {\n      console.warn(\n        \"Multiple providers targeting the same window. There can be only one level root level SaltProvider per window.\",\n      );\n      return;\n    }\n\n    const themeNames = theme.split(\" \");\n\n    // add the styles we want to apply\n    targetDocument.documentElement.classList.add(\n      ...themeNames,\n      `salt-density-${density}`,\n    );\n    targetDocument.documentElement.dataset.mode = mode;\n\n    // Theme Next\n    if (corner) targetDocument.documentElement.dataset.corner = corner;\n    if (headingFont)\n      targetDocument.documentElement.dataset.headingFont = headingFont;\n    if (accent) targetDocument.documentElement.dataset.accent = accent;\n    if (actionFont)\n      targetDocument.documentElement.dataset.actionFont = actionFont;\n\n    return () => {\n      // Delete lock\n      delete targetDocument[providerSymbol];\n\n      // When unmounting/remounting, remove the applied styles from the root\n      targetDocument.documentElement.classList.remove(\n        ...themeNames,\n        `salt-density-${density}`,\n      );\n      targetDocument.documentElement.dataset.mode = undefined;\n\n      // Theme Next\n      delete targetDocument.documentElement.dataset.corner;\n      delete targetDocument.documentElement.dataset.headingFont;\n      delete targetDocument.documentElement.dataset.accent;\n      delete targetDocument.documentElement.dataset.actionFont;\n    };\n  }, [\n    providerId,\n    applyClassesTo,\n    density,\n    mode,\n    theme,\n    targetWindow,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          theme,\n          `salt-density-${density}`,\n        ),\n        // @ts-expect-error\n        \"data-mode\": mode,\n        ...themeNextProps,\n      });\n    }\n    console.warn(\n      `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`,\n    );\n    return children;\n  }\n\n  if (applyClassesTo === \"scope\") {\n    return (\n      <div\n        className={clsx(\"salt-provider\", theme, `salt-density-${density}`)}\n        data-mode={mode}\n        {...themeNextProps}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return children;\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ThemeApplicator.js","sources":["../src/salt-provider/ThemeApplicator.tsx"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n} from \"react\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme/index\";\nimport { useId } from \"../utils/useId\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\n\nexport interface ThemeApplicatorProps {\n  /**\n   * Either \"root\", \"scope\" or \"child\".\n   * Specifies the location of salt theme class and attributes should be applied to.\n   *\n   * Defaults to \"root\" for a root provider, otherwise \"scope\".\n   */\n  applyClassesTo: \"root\" | \"scope\" | \"child\";\n  /**\n   * Either \"high\", \"medium\", \"low\", \"touch\" or \"mobile\".\n   * Determines the amount of content that can fit on a screen based on the size and spacing of components.\n   * Refer to [density](https://www.saltdesignsystem.com/salt/foundations/density) doc for more detail.\n   *\n   * @default \"medium\"\n   */\n  density: Density;\n  /**\n   * A string. Specifies custom theme name(s) you want to apply, similar to `className`.\n   */\n  theme: ThemeName;\n  /**\n   * Either \"light\" or \"dark\". Enable the color palette to change from light to dark.\n   * Refer to [modes](https://www.saltdesignsystem.com/salt/foundations/modes) doc for more detail.\n   *\n   * @default \"light\"\n   */\n  mode: Mode;\n  /**\n   * Either \"sharp\" or \"rounded\".\n   * Determines selected components corner radius.\n   * @default \"sharp\"\n   */\n  corner?: Corner;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of display and heading text.\n   * @default \"Open Sans\"\n   */\n  headingFont?: HeadingFont;\n  /**\n   * Either \"blue\" or \"teal\".\n   * Determines accent color used across components, e.g. Accent Button, List, Calendar.\n   * @default \"blue\"\n   */\n  accent?: Accent;\n  /**\n   * Either \"Open Sans\" or \"Amplitude\".\n   * Determines font family of action components, mostly Buttons.\n   * @default \"Open Sans\"\n   */\n  actionFont?: ActionFont;\n  children?: ReactNode;\n}\n\nconst providerSymbol = Symbol.for(\"salt-provider\");\n\nexport function ThemeApplicator({\n  applyClassesTo,\n  children,\n  density,\n  mode,\n  theme,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: ThemeApplicatorProps) {\n  const targetWindow = useWindow();\n\n  const providerId = useId();\n\n  useIsomorphicLayoutEffect(() => {\n    if (applyClassesTo !== \"root\" || !targetWindow || !providerId) return;\n\n    const targetDocument: Document & { [providerSymbol]?: string } =\n      targetWindow.document;\n\n    // Claim the document if no other provider has already. The symbol is used so the lock isn't enumerable and guarantees it won't clash with anything else.\n    if (!targetDocument[providerSymbol]) {\n      targetDocument[providerSymbol] = providerId;\n    }\n\n    if (providerId !== targetDocument[providerSymbol]) {\n      if (process.env.NODE_ENV !== \"production\") {\n        console.warn(\n          \"Multiple providers targeting the same window. There can be only one level root level SaltProvider per window.\",\n        );\n      }\n      return;\n    }\n\n    const themeNames = theme.split(\" \");\n\n    // add the styles we want to apply\n    targetDocument.documentElement.classList.add(\n      ...themeNames,\n      `salt-density-${density}`,\n    );\n    targetDocument.documentElement.dataset.mode = mode;\n\n    // Theme Next\n    if (corner) targetDocument.documentElement.dataset.corner = corner;\n    if (headingFont)\n      targetDocument.documentElement.dataset.headingFont = headingFont;\n    if (accent) targetDocument.documentElement.dataset.accent = accent;\n    if (actionFont)\n      targetDocument.documentElement.dataset.actionFont = actionFont;\n\n    return () => {\n      // Delete lock\n      delete targetDocument[providerSymbol];\n\n      // When unmounting/remounting, remove the applied styles from the root\n      targetDocument.documentElement.classList.remove(\n        ...themeNames,\n        `salt-density-${density}`,\n      );\n      targetDocument.documentElement.dataset.mode = undefined;\n\n      // Theme Next\n      delete targetDocument.documentElement.dataset.corner;\n      delete targetDocument.documentElement.dataset.headingFont;\n      delete targetDocument.documentElement.dataset.accent;\n      delete targetDocument.documentElement.dataset.actionFont;\n    };\n  }, [\n    providerId,\n    applyClassesTo,\n    density,\n    mode,\n    theme,\n    targetWindow,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          theme,\n          `salt-density-${density}`,\n        ),\n        // @ts-expect-error\n        \"data-mode\": mode,\n        ...themeNextProps,\n      });\n    }\n    if (process.env.NODE_ENV !== \"production\") {\n      console.warn(\n        `\\nSaltProvider can only apply CSS classes for theming to a single nested child element of the SaltProvider.\n        Either wrap elements with a single container or consider removing the applyClassesToChild prop, in which case a\n        div element will wrap your child elements`,\n      );\n    }\n    return children;\n  }\n\n  if (applyClassesTo === \"scope\") {\n    return (\n      <div\n        className={clsx(\"salt-provider\", theme, `salt-density-${density}`)}\n        data-mode={mode}\n        {...themeNextProps}\n      >\n        {children}\n      </div>\n    );\n  }\n\n  return children;\n}\n"],"names":[],"mappings":"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"}

package/dist-es/side-panel/SidePanelTitle.js

@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import '../text/Headings.js';
 import '../text/Label.js';
 import { Text } from '../text/Text.js';

package/dist-es/side-panel/SidePanelTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelTitle.js","sources":["../src/side-panel/SidePanelTitle.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelTitleCss from \"./SidePanelTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelTitle\");\n\nexport type SidePanelTitleProps = TextProps<\"div\">;\n\nexport const SidePanelTitle = forwardRef<HTMLDivElement, SidePanelTitleProps>(\n  function SidePanelTitle(props, ref) {\n    const { children, className, id, styleAs = \"h2\", ...rest } = props;\n\n    const { setTitleId } = useSidePanelContext();\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-side-panel-title\",\n      css: sidePanelTitleCss,\n      window: targetWindow,\n    });\n\n    const titleId = useId(id);\n\n    useIsomorphicLayoutEffect(() => {\n      if (titleId) {\n        setTitleId(titleId);\n      }\n\n      return () => {\n        setTitleId(undefined);\n      };\n    }, [titleId, setTitleId]);\n\n    return (\n      <Text\n        ref={ref}\n        id={titleId}\n        styleAs={styleAs}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n"],"names":["SidePanelTitle","sidePanelTitleCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,KAAA;AAE7D,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,mBAAA,EAAoB;AAC3C,IAAA,MAAM,eAAe,SAAA,EAAU;AAE/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAU,MAAM,EAAE,CAAA;AAExB,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,UAAA,CAAW,OAAO,CAAA;AAAA,MACpB;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,UAAA,CAAW,MAAS,CAAA;AAAA,MACtB,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"SidePanelTitle.js","sources":["../src/side-panel/SidePanelTitle.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Text, type TextProps } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useSidePanelContext } from \"./internal\";\nimport sidePanelTitleCss from \"./SidePanelTitle.css\";\n\nconst withBaseName = makePrefixer(\"saltSidePanelTitle\");\n\nexport type SidePanelTitleProps = TextProps<\"div\">;\n\nexport const SidePanelTitle = forwardRef<HTMLDivElement, SidePanelTitleProps>(\n  function SidePanelTitle(props, ref) {\n    const { children, className, id, styleAs = \"h2\", ...rest } = props;\n\n    const { setTitleId } = useSidePanelContext();\n    const targetWindow = useWindow();\n\n    useComponentCssInjection({\n      testId: \"salt-side-panel-title\",\n      css: sidePanelTitleCss,\n      window: targetWindow,\n    });\n\n    const titleId = useId(id);\n\n    useIsomorphicLayoutEffect(() => {\n      if (titleId) {\n        setTitleId(titleId);\n      }\n\n      return () => {\n        setTitleId(undefined);\n      };\n    }, [titleId, setTitleId]);\n\n    return (\n      <Text\n        ref={ref}\n        id={titleId}\n        styleAs={styleAs}\n        className={clsx(withBaseName(), className)}\n        {...rest}\n      >\n        {children}\n      </Text>\n    );\n  },\n);\n"],"names":["SidePanelTitle","sidePanelTitleCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAI/C,MAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,SAASA,eAAAA,CAAe,KAAA,EAAO,GAAA,EAAK;AAClC,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,EAAA,EAAI,UAAU,IAAA,EAAM,GAAG,MAAK,GAAI,KAAA;AAE7D,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,mBAAA,EAAoB;AAC3C,IAAA,MAAM,eAAe,SAAA,EAAU;AAE/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,uBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,OAAA,GAAU,MAAM,EAAE,CAAA;AAExB,IAAA,yBAAA,CAA0B,MAAM;AAC9B,MAAA,IAAI,OAAA,EAAS;AACX,QAAA,UAAA,CAAW,OAAO,CAAA;AAAA,MACpB;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,UAAA,CAAW,MAAS,CAAA;AAAA,MACtB,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,OAAA,EAAS,UAAU,CAAC,CAAA;AAExB,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACxC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-es/side-panel/SidePanelTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelTrigger.js","sources":["../src/side-panel/SidePanelTrigger.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport type SidePanelTriggerProps = ComponentPropsWithoutRef<\"button\">;\n\nexport const SidePanelTrigger = forwardRef<\n  HTMLButtonElement,\n  SidePanelTriggerProps\n>(function SidePanelTrigger(props, ref) {\n  const { children, onClick, ...rest } = props;\n  const { setReference, openState, setOpen, panelId } = useSidePanelContext();\n\n  const combinedRef = useForkRef(setReference, ref);\n  const handleRef = useForkRef(combinedRef, getRefFromChildren(children));\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    setOpen(!openState);\n  };\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n\n  const mergedProps = mergeProps(\n    {\n      \"aria-expanded\": openState,\n      \"aria-controls\": openState ? panelId : undefined,\n      onClick: handleClick,\n      ...rest,\n    },\n    children.props,\n  );\n\n  return cloneElement(children, {\n    ...mergedProps,\n    ref: handleRef,\n  });\n});\n"],"names":["SidePanelTrigger"],"mappings":";;;;;;;;;;;;AAYO,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AACvC,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAW,OAAA,EAAS,OAAA,KAAY,mBAAA,EAAoB;AAE1E,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,YAAA,EAAc,GAAG,CAAA;AAChD,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,WAAA,EAAa,kBAAA,CAAmB,QAAQ,CAAC,CAAA;AAEtE,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAA,EAAG;AAC1C,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,WAAA,GAAc,UAAA;AAAA,IAClB;AAAA,MACE,eAAA,EAAiB,SAAA;AAAA,MACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,MACvC,OAAA,EAAS,WAAA;AAAA,MACT,GAAG;AAAA,KACL;AAAA,IACA,QAAA,CAAS;AAAA,GACX;AAEA,EAAA,OAAO,aAAa,QAAA,EAAU;AAAA,IAC5B,GAAG,WAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACN,CAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"SidePanelTrigger.js","sources":["../src/side-panel/SidePanelTrigger.tsx"],"sourcesContent":["import {\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  type Ref,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport type SidePanelTriggerProps = ComponentPropsWithoutRef<\"button\">;\n\nexport const SidePanelTrigger = forwardRef<\n  HTMLButtonElement,\n  SidePanelTriggerProps\n>(function SidePanelTrigger(props, ref) {\n  const { children, onClick, ...rest } = props;\n  const { setReference, openState, setOpen, panelId } = useSidePanelContext();\n\n  const combinedRef = useForkRef(setReference, ref);\n  const handleRef = useForkRef(combinedRef, getRefFromChildren(children));\n\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    setOpen(!openState);\n  };\n\n  if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n    return <>{children}</>;\n  }\n\n  const mergedProps = mergeProps(\n    {\n      \"aria-expanded\": openState,\n      \"aria-controls\": openState ? panelId : undefined,\n      onClick: handleClick,\n      ...rest,\n    },\n    children.props,\n  );\n\n  return cloneElement(children, {\n    ...mergedProps,\n    ref: handleRef,\n  });\n});\n"],"names":["SidePanelTrigger"],"mappings":";;;;;;;;;;;;AAaO,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,OAAO,GAAA,EAAK;AACtC,EAAA,MAAM,EAAE,QAAA,EAAU,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AACvC,EAAA,MAAM,EAAE,YAAA,EAAc,SAAA,EAAW,OAAA,EAAS,OAAA,KAAY,mBAAA,EAAoB;AAE1E,EAAA,MAAM,WAAA,GAAc,UAAA,CAAW,YAAA,EAAc,GAAG,CAAA;AAChD,EAAA,MAAM,SAAA,GAAY,UAAA,CAAW,WAAA,EAAa,kBAAA,CAAmB,QAAQ,CAAC,CAAA;AAEtE,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAyC;AAC5D,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AACV,IAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,EACpB,CAAA;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAA,EAAG;AAClE,IAAA,uCAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,MAAM,WAAA,GAAc,UAAA;AAAA,IAClB;AAAA,MACE,eAAA,EAAiB,SAAA;AAAA,MACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,MACvC,OAAA,EAAS,WAAA;AAAA,MACT,GAAG;AAAA,KACL;AAAA,IACA,QAAA,CAAS;AAAA,GACX;AAEA,EAAA,OAAO,aAAa,QAAA,EAAU;AAAA,IAC5B,GAAG,WAAA;AAAA,IACH,GAAA,EAAK;AAAA,GACN,CAAA;AACH,CAAC;;;;"}

package/dist-es/side-panel/internal/useIsScrollable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsScrollable.js","sources":["../src/side-panel/internal/useIsScrollable.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nconst observedAttributes = [\"class\", \"hidden\", \"style\"];\n\nexport function useIsScrollable(ref: RefObject<HTMLElement>) {\n  const [isScrollable, setIsScrollable] = useState(false);\n\n  useEffect(() => {\n    const element = ref.current;\n    const win = element?.ownerDocument.defaultView;\n    if (!element || !win) {\n      return;\n    }\n\n    let animationFrame: number | undefined;\n\n    const checkScrollable = () => {\n      animationFrame = undefined;\n      const nextIsScrollable =\n        element.scrollHeight > element.clientHeight ||\n        element.scrollWidth > element.clientWidth;\n\n      setIsScrollable((currentIsScrollable) =>\n        currentIsScrollable === nextIsScrollable\n          ? currentIsScrollable\n          : nextIsScrollable,\n      );\n    };\n\n    const scheduleCheck = () => {\n      if (animationFrame === undefined) {\n        animationFrame = win.requestAnimationFrame(checkScrollable);\n      }\n    };\n\n    scheduleCheck();\n\n    const resizeObserver = win.ResizeObserver\n      ? new win.ResizeObserver(scheduleCheck)\n      : undefined;\n    resizeObserver?.observe(element);\n\n    const mutationObserver = win.MutationObserver\n      ? new win.MutationObserver(scheduleCheck)\n      : undefined;\n    mutationObserver?.observe(element, {\n      attributeFilter: observedAttributes,\n      attributes: true,\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      if (animationFrame !== undefined) {\n        win.cancelAnimationFrame(animationFrame);\n      }\n      resizeObserver?.disconnect();\n      mutationObserver?.disconnect();\n    };\n  }, [ref]);\n\n  return isScrollable;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAA,GAAqB,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO,CAAA;AAE/C,SAAS,gBAAgB,GAAA,EAA6B;AAC3D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,MAAM,GAAA,GAAM,mCAAS,aAAA,CAAc,WAAA;AACnC,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,GAAA,EAAK;AACpB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,cAAA;AAEJ,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,cAAA,GAAiB,MAAA;AACjB,MAAA,MAAM,mBACJ,OAAA,CAAQ,YAAA,GAAe,QAAQ,YAAA,IAC/B,OAAA,CAAQ,cAAc,OAAA,CAAQ,WAAA;AAEhC,MAAA,eAAA;AAAA,QAAgB,CAAC,mBAAA,KACf,mBAAA,KAAwB,gBAAA,GACpB,mBAAA,GACA;AAAA,OACN;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,QAAA,cAAA,GAAiB,GAAA,CAAI,sBAAsB,eAAe,CAAA;AAAA,MAC5D;AAAA,IACF,CAAA;AAEA,IAAA,aAAA,EAAc;AAEd,IAAA,MAAM,iBAAiB,GAAA,CAAI,cAAA,GACvB,IAAI,GAAA,CAAI,cAAA,CAAe,aAAa,CAAA,GACpC,MAAA;AACJ,IAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,OAAA,CAAQ,OAAA,CAAA;AAExB,IAAA,MAAM,mBAAmB,GAAA,CAAI,gBAAA,GACzB,IAAI,GAAA,CAAI,gBAAA,CAAiB,aAAa,CAAA,GACtC,MAAA;AACJ,IAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,QAAQ,OAAA,EAAS;AAAA,MACjC,eAAA,EAAiB,kBAAA;AAAA,MACjB,UAAA,EAAY,IAAA;AAAA,MACZ,aAAA,EAAe,IAAA;AAAA,MACf,SAAA,EAAW,IAAA;AAAA,MACX,OAAA,EAAS;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,QAAA,GAAA,CAAI,qBAAqB,cAAc,CAAA;AAAA,MACzC;AACA,MAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,UAAA,EAAA;AAChB,MAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,UAAA,EAAA;AAAA,IACpB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,OAAO,YAAA;AACT;;;;"}
+{"version":3,"file":"useIsScrollable.js","sources":["../src/side-panel/internal/useIsScrollable.ts"],"sourcesContent":["import { type RefObject, useEffect, useState } from \"react\";\n\nconst observedAttributes = [\"class\", \"hidden\", \"style\"];\n\nexport function useIsScrollable(ref: RefObject<HTMLElement | null>) {\n  const [isScrollable, setIsScrollable] = useState(false);\n\n  useEffect(() => {\n    const element = ref.current;\n    const win = element?.ownerDocument.defaultView;\n    if (!element || !win) {\n      return;\n    }\n\n    let animationFrame: number | undefined;\n\n    const checkScrollable = () => {\n      animationFrame = undefined;\n      const nextIsScrollable =\n        element.scrollHeight > element.clientHeight ||\n        element.scrollWidth > element.clientWidth;\n\n      setIsScrollable((currentIsScrollable) =>\n        currentIsScrollable === nextIsScrollable\n          ? currentIsScrollable\n          : nextIsScrollable,\n      );\n    };\n\n    const scheduleCheck = () => {\n      if (animationFrame === undefined) {\n        animationFrame = win.requestAnimationFrame(checkScrollable);\n      }\n    };\n\n    scheduleCheck();\n\n    const resizeObserver = win.ResizeObserver\n      ? new win.ResizeObserver(scheduleCheck)\n      : undefined;\n    resizeObserver?.observe(element);\n\n    const mutationObserver = win.MutationObserver\n      ? new win.MutationObserver(scheduleCheck)\n      : undefined;\n    mutationObserver?.observe(element, {\n      attributeFilter: observedAttributes,\n      attributes: true,\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      if (animationFrame !== undefined) {\n        win.cancelAnimationFrame(animationFrame);\n      }\n      resizeObserver?.disconnect();\n      mutationObserver?.disconnect();\n    };\n  }, [ref]);\n\n  return isScrollable;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAA,GAAqB,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO,CAAA;AAE/C,SAAS,gBAAgB,GAAA,EAAoC;AAClE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,GAAA,CAAI,OAAA;AACpB,IAAA,MAAM,GAAA,GAAM,mCAAS,aAAA,CAAc,WAAA;AACnC,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,GAAA,EAAK;AACpB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,cAAA;AAEJ,IAAA,MAAM,kBAAkB,MAAM;AAC5B,MAAA,cAAA,GAAiB,MAAA;AACjB,MAAA,MAAM,mBACJ,OAAA,CAAQ,YAAA,GAAe,QAAQ,YAAA,IAC/B,OAAA,CAAQ,cAAc,OAAA,CAAQ,WAAA;AAEhC,MAAA,eAAA;AAAA,QAAgB,CAAC,mBAAA,KACf,mBAAA,KAAwB,gBAAA,GACpB,mBAAA,GACA;AAAA,OACN;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,gBAAgB,MAAM;AAC1B,MAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,QAAA,cAAA,GAAiB,GAAA,CAAI,sBAAsB,eAAe,CAAA;AAAA,MAC5D;AAAA,IACF,CAAA;AAEA,IAAA,aAAA,EAAc;AAEd,IAAA,MAAM,iBAAiB,GAAA,CAAI,cAAA,GACvB,IAAI,GAAA,CAAI,cAAA,CAAe,aAAa,CAAA,GACpC,MAAA;AACJ,IAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,OAAA,CAAQ,OAAA,CAAA;AAExB,IAAA,MAAM,mBAAmB,GAAA,CAAI,gBAAA,GACzB,IAAI,GAAA,CAAI,gBAAA,CAAiB,aAAa,CAAA,GACtC,MAAA;AACJ,IAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,QAAQ,OAAA,EAAS;AAAA,MACjC,eAAA,EAAiB,kBAAA;AAAA,MACjB,UAAA,EAAY,IAAA;AAAA,MACZ,aAAA,EAAe,IAAA;AAAA,MACf,SAAA,EAAW,IAAA;AAAA,MACX,OAAA,EAAS;AAAA,KACX,CAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,mBAAmB,MAAA,EAAW;AAChC,QAAA,GAAA,CAAI,qBAAqB,cAAc,CAAA;AAAA,MACzC;AACA,MAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAgB,UAAA,EAAA;AAChB,MAAA,gBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,gBAAA,CAAkB,UAAA,EAAA;AAAA,IACpB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,OAAO,YAAA;AACT;;;;"}

package/dist-es/side-panel/useSidePanel.js

@@ -3,6 +3,7 @@ import 'clsx';
 import 'react/jsx-runtime';
 import { useEventCallback } from '../utils/useEventCallback.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
+import { forkRef } from '../utils/forkRef.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
@@ -14,7 +15,6 @@ function useSidePanel() {
   const getTriggerProps = useEventCallback(
     (userProps) => {
       const userOnClick = userProps == null ? void 0 : userProps.onClick;
-      const userRef = userProps == null ? void 0 : userProps.ref;
       return {
         "aria-expanded": openState,
         "aria-controls": openState ? panelId : void 0,
@@ -23,14 +23,9 @@ function useSidePanel() {
           userOnClick == null ? void 0 : userOnClick(event);
           setOpen(!openState);
         },
-        ref: (node) => {
-          setReference(node);
-          if (typeof userRef === "function") {
-            userRef(node);
-          } else if (userRef && typeof userRef === "object" && "current" in userRef) {
-            userRef.current = node;
-          }
-        }
+        // Props getters can't call hooks, so this uses the `forkRef` that
+        // `useForkRef` is built on.
+        ref: forkRef(setReference, userProps == null ? void 0 : userProps.ref)
       };
     }
   );

package/dist-es/side-panel/useSidePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import type {\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  MutableRefObject,\n  RefCallback,\n} from \"react\";\nimport { useEventCallback } from \"../utils\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelTriggerExtraProps {\n  /**\n   * Optional ref to forward alongside the focus-return registration.\n   */\n  ref?:\n    | RefCallback<HTMLElement | null>\n    | MutableRefObject<HTMLElement | null>\n    | null;\n  /**\n   * Click handler. Runs before the built-in toggle so consumers can\n   * preventDefault to skip the toggle.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport type SidePanelTriggerPropsResult = ComponentPropsWithoutRef<\"button\"> & {\n  \"aria-expanded\": boolean;\n  \"aria-controls\": string | undefined;\n  ref: RefCallback<HTMLElement | null>;\n};\n\nexport interface SidePanelValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * Sets the open state of the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Props getter for a trigger element outside of `SidePanelTrigger`.\n   * Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),\n   * and an `onClick` that toggles the panel.\n   *\n   * Spread the result onto a Button to get full trigger behavior:\n   * ```tsx\n   * <Button {...getTriggerProps()}>Toggle panel</Button>\n   * ```\n   *\n   * You can pass additional props which are merged in. If you provide your\n   * own `onClick`, it runs before the built-in toggle. If you provide your\n   * own `ref`, it is forwarded alongside the internal focus-return ref.\n   *\n   * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n   * manage ARIA attributes yourself instead.\n   */\n  getTriggerProps: (\n    userProps?: SidePanelTriggerExtraProps,\n  ) => SidePanelTriggerPropsResult;\n  /**\n   * Registers the element that should receive focus when the panel closes.\n   * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n   * needs explicit control over which element is the reference. Pass `null`\n   * to clear the previously-registered trigger.\n   */\n  setTriggerRef: (element: HTMLElement | null) => void;\n  /**\n   * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n   * scenarios where you manage ARIA attributes yourself.\n   */\n  panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n  const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n  // useEventCallback gives a stable identity so consumers can memoise\n  // around getTriggerProps without it churning on open/close.\n  const getTriggerProps = useEventCallback(\n    (userProps?: SidePanelTriggerExtraProps): SidePanelTriggerPropsResult => {\n      const userOnClick = userProps?.onClick;\n      const userRef = userProps?.ref;\n\n      return {\n        \"aria-expanded\": openState,\n        \"aria-controls\": openState ? panelId : undefined,\n        ...userProps,\n        onClick: (event: MouseEvent<HTMLButtonElement>) => {\n          userOnClick?.(event);\n          setOpen(!openState);\n        },\n        ref: (node: HTMLElement | null) => {\n          setReference(node);\n          if (typeof userRef === \"function\") {\n            userRef(node);\n          } else if (\n            userRef &&\n            typeof userRef === \"object\" &&\n            \"current\" in userRef\n          ) {\n            userRef.current = node;\n          }\n        },\n      };\n    },\n  );\n\n  return {\n    openState,\n    setOpen,\n    getTriggerProps,\n    setTriggerRef: setReference,\n    panelId,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAyEO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAY,mBAAA,EAAoB;AAI1E,EAAA,MAAM,eAAA,GAAkB,gBAAA;AAAA,IACtB,CAAC,SAAA,KAAwE;AACvE,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAC/B,MAAA,MAAM,UAAU,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAA;AAE3B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,KAAA,KAAyC;AACjD,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,KAAA,CAAA;AACd,UAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,QACpB,CAAA;AAAA,QACA,GAAA,EAAK,CAAC,IAAA,KAA6B;AACjC,UAAA,YAAA,CAAa,IAAI,CAAA;AACjB,UAAA,IAAI,OAAO,YAAY,UAAA,EAAY;AACjC,YAAA,OAAA,CAAQ,IAAI,CAAA;AAAA,UACd,WACE,OAAA,IACA,OAAO,OAAA,KAAY,QAAA,IACnB,aAAa,OAAA,EACb;AACA,YAAA,OAAA,CAAQ,OAAA,GAAU,IAAA;AAAA,UACpB;AAAA,QACF;AAAA,OACF;AAAA,IACF;AAAA,GACF;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useSidePanel.js","sources":["../src/side-panel/useSidePanel.ts"],"sourcesContent":["import type {\n  ComponentPropsWithoutRef,\n  MouseEvent,\n  MutableRefObject,\n  RefCallback,\n} from \"react\";\nimport { useEventCallback } from \"../utils\";\nimport { forkRef } from \"../utils/forkRef\";\nimport { useSidePanelContext } from \"./internal\";\n\nexport interface SidePanelTriggerExtraProps {\n  /**\n   * Optional ref to forward alongside the focus-return registration.\n   */\n  ref?:\n    | RefCallback<HTMLElement | null>\n    | MutableRefObject<HTMLElement | null>\n    | null;\n  /**\n   * Click handler. Runs before the built-in toggle so consumers can\n   * preventDefault to skip the toggle.\n   */\n  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n}\n\nexport type SidePanelTriggerPropsResult = ComponentPropsWithoutRef<\"button\"> & {\n  \"aria-expanded\": boolean;\n  \"aria-controls\": string | undefined;\n  ref: RefCallback<HTMLElement | null>;\n};\n\nexport interface SidePanelValue {\n  /**\n   * Whether the side panel is currently open.\n   */\n  openState: boolean;\n  /**\n   * Sets the open state of the panel.\n   */\n  setOpen: (open: boolean) => void;\n  /**\n   * Props getter for a trigger element outside of `SidePanelTrigger`.\n   * Returns `aria-expanded`, `aria-controls`, a `ref` (for focus-return),\n   * and an `onClick` that toggles the panel.\n   *\n   * Spread the result onto a Button to get full trigger behavior:\n   * ```tsx\n   * <Button {...getTriggerProps()}>Toggle panel</Button>\n   * ```\n   *\n   * You can pass additional props which are merged in. If you provide your\n   * own `onClick`, it runs before the built-in toggle. If you provide your\n   * own `ref`, it is forwarded alongside the internal focus-return ref.\n   *\n   * For multi-trigger scenarios (e.g. table rows), use `setTriggerRef` and\n   * manage ARIA attributes yourself instead.\n   */\n  getTriggerProps: (\n    userProps?: SidePanelTriggerExtraProps,\n  ) => SidePanelTriggerPropsResult;\n  /**\n   * Registers the element that should receive focus when the panel closes.\n   * Use this in multi-trigger scenarios (e.g. table rows) where each trigger\n   * needs explicit control over which element is the reference. Pass `null`\n   * to clear the previously-registered trigger.\n   */\n  setTriggerRef: (element: HTMLElement | null) => void;\n  /**\n   * The panel's DOM id. Use this for `aria-controls` in multi-trigger\n   * scenarios where you manage ARIA attributes yourself.\n   */\n  panelId: string | undefined;\n}\n\nexport function useSidePanel(): SidePanelValue {\n  const { openState, setOpen, setReference, panelId } = useSidePanelContext();\n\n  // useEventCallback gives a stable identity so consumers can memoise\n  // around getTriggerProps without it churning on open/close.\n  const getTriggerProps = useEventCallback(\n    (userProps?: SidePanelTriggerExtraProps): SidePanelTriggerPropsResult => {\n      const userOnClick = userProps?.onClick;\n\n      return {\n        \"aria-expanded\": openState,\n        \"aria-controls\": openState ? panelId : undefined,\n        ...userProps,\n        onClick: (event: MouseEvent<HTMLButtonElement>) => {\n          userOnClick?.(event);\n          setOpen(!openState);\n        },\n        // Props getters can't call hooks, so this uses the `forkRef` that\n        // `useForkRef` is built on.\n        ref: forkRef<HTMLElement>(setReference, userProps?.ref),\n      };\n    },\n  );\n\n  return {\n    openState,\n    setOpen,\n    getTriggerProps,\n    setTriggerRef: setReference,\n    panelId,\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA0EO,SAAS,YAAA,GAA+B;AAC7C,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,YAAA,EAAc,OAAA,KAAY,mBAAA,EAAoB;AAI1E,EAAA,MAAM,eAAA,GAAkB,gBAAA;AAAA,IACtB,CAAC,SAAA,KAAwE;AACvE,MAAA,MAAM,cAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,OAAA;AAE/B,MAAA,OAAO;AAAA,QACL,eAAA,EAAiB,SAAA;AAAA,QACjB,eAAA,EAAiB,YAAY,OAAA,GAAU,MAAA;AAAA,QACvC,GAAG,SAAA;AAAA,QACH,OAAA,EAAS,CAAC,KAAA,KAAyC;AACjD,UAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,KAAA,CAAA;AACd,UAAA,OAAA,CAAQ,CAAC,SAAS,CAAA;AAAA,QACpB,CAAA;AAAA;AAAA;AAAA,QAGA,GAAA,EAAK,OAAA,CAAqB,YAAA,EAAc,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,GAAG;AAAA,OACxD;AAAA,IACF;AAAA,GACF;AAEA,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,aAAA,EAAe,YAAA;AAAA,IACf;AAAA,GACF;AACF;;;;"}

package/dist-es/skip-link/internal/useManageFocusOnTarget.js

@@ -9,8 +9,8 @@ const useManageFocusOnTarget = ({
   targetClass
 }) => {
   const [target, setTarget] = useState();
-  const hasTabIndex = useRef();
-  const shouldRemoveTabIndex = useRef();
+  const hasTabIndex = useRef(void 0);
+  const shouldRemoveTabIndex = useRef(void 0);
   useEffect(() => {
     if (targetRef == null ? void 0 : targetRef.current) {
       setTarget(targetRef.current);

package/dist-es/skip-link/internal/useManageFocusOnTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n  onBlur?: FocusEventHandler;\n  onClick?: MouseEventHandler;\n  onKeyUp?: KeyboardEventHandler;\n  targetRef: RefObject<HTMLElement> | undefined;\n  targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n  onBlur?: FocusEventHandler<HTMLAnchorElement>;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n  onKeyUp,\n  onBlur,\n  onClick,\n  targetRef,\n  targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n  const [target, setTarget] = useState<HTMLElement>();\n\n  const hasTabIndex = useRef<boolean | string>();\n  const shouldRemoveTabIndex = useRef<boolean>();\n\n  useEffect(() => {\n    if (targetRef?.current) {\n      setTarget(targetRef.current);\n    }\n  }, [targetRef]);\n\n  if (!target) {\n    return {};\n  }\n\n  const addTabIndex = () => {\n    const tabIndex = target.getAttribute(\"tabIndex\");\n    hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n    if (!hasTabIndex.current) {\n      shouldRemoveTabIndex.current = true;\n      target.setAttribute(\"tabIndex\", \"-1\");\n    }\n  };\n\n  const removeTabIndex = () => {\n    if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n      target.removeAttribute(\"tabIndex\");\n    }\n  };\n\n  const handleFocusOnTarget = () => {\n    shouldRemoveTabIndex.current = false;\n    target.classList.add(targetClass);\n  };\n\n  const handleBlurFromTarget = () => {\n    shouldRemoveTabIndex.current = true;\n    removeTabIndex();\n    target.classList.remove(targetClass);\n  };\n\n  function moveToTarget() {\n    addTabIndex();\n    setTimeout(() => {\n      target?.focus();\n    }, FOCUS_TIMEOUT);\n\n    target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n    target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n  }\n\n  const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      moveToTarget();\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    moveToTarget();\n    onClick?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n    setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n    onBlur?.(event);\n  };\n\n  return {\n    onBlur: handleBlur,\n    onClick: handleClick,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import {\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type MouseEventHandler,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\n// Props interface\ninterface ManageFocusOnTargetProps {\n  onBlur?: FocusEventHandler;\n  onClick?: MouseEventHandler;\n  onKeyUp?: KeyboardEventHandler;\n  targetRef: RefObject<HTMLElement | null> | undefined;\n  targetClass: string;\n}\n\n// Result interface\ninterface ManageFocusOnTargetResult {\n  onBlur?: FocusEventHandler<HTMLAnchorElement>;\n  onClick?: MouseEventHandler<HTMLAnchorElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLAnchorElement>;\n}\nexport const useManageFocusOnTarget = ({\n  onKeyUp,\n  onBlur,\n  onClick,\n  targetRef,\n  targetClass,\n}: ManageFocusOnTargetProps): ManageFocusOnTargetResult => {\n  const [target, setTarget] = useState<HTMLElement>();\n\n  const hasTabIndex = useRef<boolean | string | undefined>(undefined);\n  const shouldRemoveTabIndex = useRef<boolean | undefined>(undefined);\n\n  useEffect(() => {\n    if (targetRef?.current) {\n      setTarget(targetRef.current);\n    }\n  }, [targetRef]);\n\n  if (!target) {\n    return {};\n  }\n\n  const addTabIndex = () => {\n    const tabIndex = target.getAttribute(\"tabIndex\");\n    hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n    if (!hasTabIndex.current) {\n      shouldRemoveTabIndex.current = true;\n      target.setAttribute(\"tabIndex\", \"-1\");\n    }\n  };\n\n  const removeTabIndex = () => {\n    if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n      target.removeAttribute(\"tabIndex\");\n    }\n  };\n\n  const handleFocusOnTarget = () => {\n    shouldRemoveTabIndex.current = false;\n    target.classList.add(targetClass);\n  };\n\n  const handleBlurFromTarget = () => {\n    shouldRemoveTabIndex.current = true;\n    removeTabIndex();\n    target.classList.remove(targetClass);\n  };\n\n  function moveToTarget() {\n    addTabIndex();\n    setTimeout(() => {\n      target?.focus();\n    }, FOCUS_TIMEOUT);\n\n    target?.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n    target?.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n  }\n\n  const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      moveToTarget();\n    }\n    onKeyUp?.(event);\n  };\n\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    moveToTarget();\n    onClick?.(event);\n  };\n\n  const handleBlur: FocusEventHandler<HTMLAnchorElement> = (event) => {\n    setTimeout(removeTabIndex, FOCUS_TIMEOUT);\n    onBlur?.(event);\n  };\n\n  return {\n    onBlur: handleBlur,\n    onClick: handleClick,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/slider/internal/SliderThumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type RefObject,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { makePrefixer, useId } from \"../../utils\";\nimport sliderThumbCss from \"./SliderThumb.css\";\nimport { SliderTooltip } from \"./SliderTooltip\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\ninterface SliderThumbProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"onChange\" | \"defaultValue\" | \"min\" | \"max\"\n  > {\n  accessibleMaxText?: string;\n  accessibleMinText?: string;\n  disabled: boolean;\n  format?: (value: number) => number | string;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  handleKeydownOnThumb: (event: React.KeyboardEvent) => void;\n  handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n  index?: number;\n  inputRef?: RefObject<HTMLInputElement>;\n  isFocusVisible: boolean;\n  max: number;\n  maxLabel?: string;\n  min: number;\n  minLabel?: string;\n  offsetPercentage?: string;\n  restrictToMarks?: boolean;\n  showTooltip?: boolean;\n  sliderValue: [number, number] | number;\n  step: number;\n  stepMultiplier: number;\n  trackDragging: boolean;\n}\n\nexport const SliderThumb = ({\n  \"aria-label\": ariaLabel,\n  \"aria-valuetext\": ariaValueText,\n  \"aria-labelledby\": ariaLabelledBy,\n  accessibleMaxText,\n  accessibleMinText,\n  disabled,\n  format,\n  handleInputChange,\n  handleKeydownOnThumb,\n  handlePointerDown,\n  index = 0,\n  inputRef,\n  isFocusVisible,\n  max,\n  maxLabel,\n  min,\n  minLabel,\n  offsetPercentage,\n  restrictToMarks,\n  showTooltip,\n  sliderValue,\n  step,\n  stepMultiplier,\n  trackDragging,\n  ...rest\n}: SliderThumbProps) => {\n  {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-slider-thumb\",\n      css: sliderThumbCss,\n      window: targetWindow,\n    });\n\n    const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n    const id = useId();\n    const accessibleTextId = `saltSlider-${id}-${index}`;\n    const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;\n    const formattedValue = format ? format(value) : value;\n\n    const handleKeyDown = useCallback((event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setIsTooltipVisible(false);\n      }\n    }, []);\n\n    useEffect(() => {\n      if (showTooltip && isTooltipVisible) {\n        targetWindow?.addEventListener(\"keydown\", handleKeyDown);\n      }\n      return () => targetWindow?.removeEventListener(\"keydown\", handleKeyDown);\n    }, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);\n\n    const handlePointerEnter = () => setIsTooltipVisible(true);\n\n    const handlePointerLeave = () => {\n      // Delay hiding the tooltip to enable tooltip\n      // visibility on hover\n      setTimeout(() => {\n        setIsTooltipVisible(false);\n      }, 300);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), {\n          [withBaseName(\"focusVisible\")]: isFocusVisible,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"dragging\")]: trackDragging,\n          [withBaseName(\"secondThumb\")]: index === 1,\n        })}\n        data-testid=\"sliderThumb\"\n        onPointerDown={handlePointerDown}\n        style={{ left: offsetPercentage }}\n        {...(showTooltip && {\n          onPointerEnter: handlePointerEnter,\n          onPointerLeave: handlePointerLeave,\n        })}\n      >\n        {showTooltip && (\n          <SliderTooltip\n            value={formattedValue}\n            open={\n              (isTooltipVisible || trackDragging || isFocusVisible) && !disabled\n            }\n          />\n        )}\n        <input\n          disabled={disabled}\n          type=\"range\"\n          ref={inputRef}\n          className={withBaseName(\"input\")}\n          value={value}\n          onChange={handleInputChange}\n          onKeyDown={handleKeydownOnThumb}\n          aria-labelledby={ariaLabelledBy}\n          aria-valuenow={value}\n          aria-valuetext={ariaValueText || format?.(value).toString()}\n          aria-label={ariaLabel}\n          aria-describedby={accessibleTextId}\n          min={min}\n          max={max}\n          step={step}\n          {...rest}\n        />\n        {/* Accessible text */}\n        <span\n          aria-hidden=\"true\"\n          id={accessibleTextId}\n          className={withBaseName(\"accessibleText\")}\n        >\n          {Array.isArray(sliderValue) &&\n            `${index === 0 ? \"leading\" : \"trailing\"}, ${format?.(sliderValue[0]) || sliderValue[0]} to ${format?.(sliderValue[1]) || sliderValue[1]}, `}\n          range{\" \"}\n          {accessibleMinText\n            ? `${accessibleMinText} ${min}, `\n            : `minimum ${format?.(min) || min}, `}\n          {accessibleMaxText\n            ? `${accessibleMaxText} ${max} `\n            : `maximum ${format?.(max) || max}`}\n          {restrictToMarks\n            ? \", custom increments\"\n            : step !== 1 && `, increments of ${step}`}\n        </span>\n      </div>\n    );\n  }\n};\n"],"names":["sliderThumbCss"],"mappings":";;;;;;;;;;;;;AAeA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AA8B5C,MAAM,cAAc,CAAC;AAAA,EAC1B,YAAA,EAAc,SAAA;AAAA,EACd,gBAAA,EAAkB,aAAA;AAAA,EAClB,iBAAA,EAAmB,cAAA;AAAA,EACnB,iBAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,iBAAA;AAAA,EACA,oBAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA,GAAQ,CAAA;AAAA,EACR,QAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA;AACE,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,mBAAA;AAAA,MACR,GAAA,EAAKA,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,KAAK,CAAA;AAC9D,IAAA,MAAM,KAAK,KAAA,EAAM;AACjB,IAAA,MAAM,gBAAA,GAAmB,CAAA,WAAA,EAAc,EAAE,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAClD,IAAA,MAAM,QAAQ,KAAA,CAAM,OAAA,CAAQ,WAAW,CAAA,GAAI,WAAA,CAAY,KAAK,CAAA,GAAI,WAAA;AAChE,IAAA,MAAM,cAAA,GAAiB,MAAA,GAAS,MAAA,CAAO,KAAK,CAAA,GAAI,KAAA;AAEhD,IAAA,MAAM,aAAA,GAAgB,WAAA,CAAY,CAAC,KAAA,KAAyB;AAC1D,MAAA,IAAI,KAAA,CAAM,QAAQ,QAAA,EAAU;AAC1B,QAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA,MAC3B;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,eAAe,gBAAA,EAAkB;AACnC,QAAA,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,iBAAiB,SAAA,EAAW,aAAA,CAAA;AAAA,MAC5C;AACA,MAAA,OAAO,MAAM,YAAA,IAAA,IAAA,GAAA,MAAA,GAAA,YAAA,CAAc,mBAAA,CAAoB,SAAA,EAAW,aAAA,CAAA;AAAA,IAC5D,GAAG,CAAC,aAAA,EAAe,gBAAA,EAAkB,WAAA,EAAa,YAAY,CAAC,CAAA;AAE/D,IAAA,MAAM,kBAAA,GAAqB,MAAM,mBAAA,CAAoB,IAAI,CAAA;AAEzD,IAAA,MAAM,qBAAqB,MAAM;AAG/B,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,mBAAA,CAAoB,KAAK,CAAA;AAAA,MAC3B,GAAG,GAAG,CAAA;AAAA,IACR,CAAA;AAEA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG;AAAA,UAC9B,CAAC,YAAA,CAAa,cAAc,CAAC,GAAG,cAAA;AAAA,UAChC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,aAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,KAAA,KAAU;AAAA,SAC1C,CAAA;AAAA,QACD,aAAA,EAAY,aAAA;AAAA,QACZ,aAAA,EAAe,iBAAA;AAAA,QACf,KAAA,EAAO,EAAE,IAAA,EAAM,gBAAA,EAAiB;AAAA,QAC/B,GAAI,WAAA,IAAe;AAAA,UAClB,cAAA,EAAgB,kBAAA;AAAA,UAChB,cAAA,EAAgB;AAAA,SAClB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,WAAA,oBACC,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,cAAA;AAAA,cACP,IAAA,EAAA,CACG,gBAAA,IAAoB,aAAA,IAAiB,cAAA,KAAmB,CAAC;AAAA;AAAA,WAE9D;AAAA,0BAEF,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,QAAA;AAAA,cACA,IAAA,EAAK,OAAA;AAAA,cACL,GAAA,EAAK,QAAA;AAAA,cACL,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,cAC/B,KAAA;AAAA,cACA,QAAA,EAAU,iBAAA;AAAA,cACV,SAAA,EAAW,oBAAA;AAAA,cACX,iBAAA,EAAiB,cAAA;AAAA,cACjB,eAAA,EAAe,KAAA;AAAA,cACf,gBAAA,EAAgB,aAAA,KAAiB,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,KAAA,CAAA,CAAO,QAAA,EAAA,CAAA;AAAA,cACjD,YAAA,EAAY,SAAA;AAAA,cACZ,kBAAA,EAAkB,gBAAA;AAAA,cAClB,GAAA;AAAA,cACA,GAAA;AAAA,cACA,IAAA;AAAA,cACC,GAAG;AAAA;AAAA,WACN;AAAA,0BAEA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,aAAA,EAAY,MAAA;AAAA,cACZ,EAAA,EAAI,gBAAA;AAAA,cACJ,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,cAEvC,QAAA,EAAA;AAAA,gBAAA,KAAA,CAAM,OAAA,CAAQ,WAAW,CAAA,IACxB,CAAA,EAAG,UAAU,CAAA,GAAI,SAAA,GAAY,UAAU,CAAA,EAAA,EAAA,CAAK,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,WAAA,CAAY,CAAC,CAAA,CAAA,KAAM,WAAA,CAAY,CAAC,CAAC,CAAA,IAAA,EAAA,CAAO,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,YAAY,CAAC,CAAA,CAAA,KAAM,WAAA,CAAY,CAAC,CAAC,CAAA,EAAA,CAAA;AAAA,gBAAK,OAAA;AAAA,gBACxI,GAAA;AAAA,gBACL,iBAAA,GACG,GAAG,iBAAiB,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAA,GAC3B,CAAA,QAAA,EAAA,CAAW,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,GAAA,CAAA,KAAQ,GAAG,CAAA,EAAA,CAAA;AAAA,gBAClC,iBAAA,GACG,GAAG,iBAAiB,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,CAAA,GAC3B,CAAA,QAAA,EAAA,CAAW,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,CAAS,GAAA,CAAA,KAAQ,GAAG,CAAA,CAAA;AAAA,gBAClC,eAAA,GACG,qBAAA,GACA,IAAA,KAAS,CAAA,IAAK,mBAAmB,IAAI,CAAA;AAAA;AAAA;AAAA;AAC3C;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"SliderThumb.js","sources":["../src/slider/internal/SliderThumb.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type Ref,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { makePrefixer, useId } from \"../../utils\";\nimport sliderThumbCss from \"./SliderThumb.css\";\nimport { SliderTooltip } from \"./SliderTooltip\";\n\nconst withBaseName = makePrefixer(\"saltSliderThumb\");\n\ninterface SliderThumbProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"onChange\" | \"defaultValue\" | \"min\" | \"max\"\n  > {\n  accessibleMaxText?: string;\n  accessibleMinText?: string;\n  disabled: boolean;\n  format?: (value: number) => number | string;\n  handleInputChange: (event: ChangeEvent<HTMLInputElement>) => void;\n  handleKeydownOnThumb: (event: React.KeyboardEvent) => void;\n  handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n  index?: number;\n  inputRef?: Ref<HTMLInputElement>;\n  isFocusVisible: boolean;\n  max: number;\n  maxLabel?: string;\n  min: number;\n  minLabel?: string;\n  offsetPercentage?: string;\n  restrictToMarks?: boolean;\n  showTooltip?: boolean;\n  sliderValue: [number, number] | number;\n  step: number;\n  stepMultiplier: number;\n  trackDragging: boolean;\n}\n\nexport const SliderThumb = ({\n  \"aria-label\": ariaLabel,\n  \"aria-valuetext\": ariaValueText,\n  \"aria-labelledby\": ariaLabelledBy,\n  accessibleMaxText,\n  accessibleMinText,\n  disabled,\n  format,\n  handleInputChange,\n  handleKeydownOnThumb,\n  handlePointerDown,\n  index = 0,\n  inputRef,\n  isFocusVisible,\n  max,\n  maxLabel,\n  min,\n  minLabel,\n  offsetPercentage,\n  restrictToMarks,\n  showTooltip,\n  sliderValue,\n  step,\n  stepMultiplier,\n  trackDragging,\n  ...rest\n}: SliderThumbProps) => {\n  {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-slider-thumb\",\n      css: sliderThumbCss,\n      window: targetWindow,\n    });\n\n    const [isTooltipVisible, setIsTooltipVisible] = useState(false);\n    const id = useId();\n    const accessibleTextId = `saltSlider-${id}-${index}`;\n    const value = Array.isArray(sliderValue) ? sliderValue[index] : sliderValue;\n    const formattedValue = format ? format(value) : value;\n\n    const handleKeyDown = useCallback((event: KeyboardEvent) => {\n      if (event.key === \"Escape\") {\n        setIsTooltipVisible(false);\n      }\n    }, []);\n\n    useEffect(() => {\n      if (showTooltip && isTooltipVisible) {\n        targetWindow?.addEventListener(\"keydown\", handleKeyDown);\n      }\n      return () => targetWindow?.removeEventListener(\"keydown\", handleKeyDown);\n    }, [handleKeyDown, isTooltipVisible, showTooltip, targetWindow]);\n\n    const handlePointerEnter = () => setIsTooltipVisible(true);\n\n    const handlePointerLeave = () => {\n      // Delay hiding the tooltip to enable tooltip\n      // visibility on hover\n      setTimeout(() => {\n        setIsTooltipVisible(false);\n      }, 300);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), {\n          [withBaseName(\"focusVisible\")]: isFocusVisible,\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"dragging\")]: trackDragging,\n          [withBaseName(\"secondThumb\")]: index === 1,\n        })}\n        data-testid=\"sliderThumb\"\n        onPointerDown={handlePointerDown}\n        style={{ left: offsetPercentage }}\n        {...(showTooltip && {\n          onPointerEnter: handlePointerEnter,\n          onPointerLeave: handlePointerLeave,\n        })}\n      >\n        {showTooltip && (\n          <SliderTooltip\n            value={formattedValue}\n            open={\n              (isTooltipVisible || trackDragging || isFocusVisible) && !disabled\n            }\n          />\n        )}\n        <input\n          disabled={disabled}\n          type=\"range\"\n          ref={inputRef}\n          className={withBaseName(\"input\")}\n          value={value}\n          onChange={handleInputChange}\n          onKeyDown={handleKeydownOnThumb}\n          aria-labelledby={ariaLabelledBy}\n          aria-valuenow={value}\n          aria-valuetext={ariaValueText || format?.(value).toString()}\n          aria-label={ariaLabel}\n          aria-describedby={accessibleTextId}\n          min={min}\n          max={max}\n          step={step}\n          {...rest}\n        />\n        {/* Accessible text */}\n        <span\n          aria-hidden=\"true\"\n          id={accessibleTextId}\n          className={withBaseName(\"accessibleText\")}\n        >\n          {Array.isArray(sliderValue) &&\n            `${index === 0 ? \"leading\" : \"trailing\"}, ${format?.(sliderValue[0]) || sliderValue[0]} to ${format?.(sliderValue[1]) || sliderValue[1]}, `}\n          range{\" \"}\n          {accessibleMinText\n            ? `${accessibleMinText} ${min}, `\n            : `minimum ${format?.(min) || min}, `}\n          {accessibleMaxText\n            ? `${accessibleMaxText} ${max} `\n            : `maximum ${format?.(max) || max}`}\n          {restrictToMarks\n            ? \", custom increments\"\n            : step !== 1 && `, increments of ${step}`}\n        </span>\n      </div>\n    );\n  }\n};\n"],"names":["sliderThumbCss"],"mappings":"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"}

package/dist-es/slider/internal/SliderTooltip.js

@@ -4,6 +4,8 @@ import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import '../../text/Code.js';
 import '../../text/Display.js';
+import '../../text/Editorial.js';
+import '../../text/Eyebrow.js';
 import '../../text/Headings.js';
 import '../../text/Label.js';
 import { Text } from '../../text/Text.js';

package/dist-es/slider/internal/SliderTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\" var(--salt-container-primary-background)\"\n        />\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\"var(--salt-container-bold-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["sliderTooltipCss"],"mappings":";;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,4BACC,IAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}
+{"version":3,"file":"SliderTooltip.js","sources":["../src/slider/internal/SliderTooltip.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTooltipCss from \"./SliderTooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltSliderTooltip\");\n\ninterface SliderTooltipProps {\n  value: number | string;\n  open?: boolean;\n}\n\nexport const SliderTooltip = ({ value, open }: SliderTooltipProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-slider-tooltip\",\n    css: sliderTooltipCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      aria-hidden\n      className={clsx(withBaseName(), {\n        [withBaseName(\"visible\")]: open,\n      })}\n      data-testid=\"sliderTooltip\"\n    >\n      <svg\n        className={withBaseName(\"arrow\")}\n        aria-hidden=\"true\"\n        viewBox=\"0 1 14 14\"\n      >\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\" var(--salt-container-primary-background)\"\n        />\n        <path\n          d=\"M0,0 H14 L7,7 Q7,7 7,7 Z\"\n          stroke=\"var(--salt-container-bold-borderColor)\"\n        />\n      </svg>\n      <Text className={withBaseName(\"text\")}>{value}</Text>\n    </div>\n  );\n};\n"],"names":["sliderTooltipCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAO9C,MAAM,aAAA,GAAgB,CAAC,EAAE,KAAA,EAAO,MAAK,KAA0B;AACpE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,qBAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG;AAAA,QAC9B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,aAAA,EAAY,eAAA;AAAA,MAEZ,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAC/B,aAAA,EAAY,MAAA;AAAA,YACZ,OAAA,EAAQ,WAAA;AAAA,YAER,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA,eACT;AAAA,8BACA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,CAAA,EAAE,0BAAA;AAAA,kBACF,MAAA,EAAO;AAAA;AAAA;AACT;AAAA;AAAA,SACF;AAAA,4BACC,IAAA,EAAA,EAAK,SAAA,EAAW,YAAA,CAAa,MAAM,GAAI,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAChD;AAEJ;;;;"}

package/dist-es/slider/internal/SliderTrack.js

@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../../text/Code.js';
 import '../../text/Display.js';
+import '../../text/Editorial.js';
+import '../../text/Eyebrow.js';
 import '../../text/Headings.js';
 import '../../text/Label.js';
 import { Text } from '../../text/Text.js';

package/dist-es/slider/internal/SliderTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type RefObject } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTrackCss from \"./SliderTrack.css\";\nimport { calculateMarkPosition, calculatePercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\ninterface SliderTrackProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  children: React.ReactNode;\n  constrainLabelPosition?: boolean;\n  disabled: boolean;\n  showTicks?: boolean;\n  format?: (value: number) => string | number;\n  handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n  isDragging: boolean;\n  isRange?: boolean;\n  marks?: { label: string; value: number }[];\n  max: number;\n  maxLabel?: number | string;\n  min: number;\n  minLabel?: number | string;\n  progressPercentage?: number;\n  progressPercentageRange?: [number, number];\n  sliderRef: RefObject<HTMLDivElement>;\n}\n\nexport const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(\n  function SliderTrack(\n    {\n      children,\n      className,\n      constrainLabelPosition = false,\n      disabled,\n      showTicks,\n      format,\n      handlePointerDown,\n      isDragging,\n      isRange = false,\n      marks,\n      max,\n      maxLabel,\n      min,\n      minLabel,\n      progressPercentage = 0,\n      progressPercentageRange = [0, 0],\n      sliderRef,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-slider-track\",\n      css: sliderTrackCss,\n      window: targetWindow,\n    });\n\n    const checkIsMarkSelected = (value: number) => {\n      const markPercentage = calculatePercentage(value, max, min);\n      if (isRange) {\n        return (\n          markPercentage > progressPercentageRange[0] &&\n          markPercentage < progressPercentageRange[1]\n        );\n      }\n      return markPercentage < progressPercentage;\n    };\n\n    const checkIsMarkOverlapped = (value: number) => {\n      const markPercentage = calculatePercentage(value, max, min);\n      if (isRange) {\n        return (\n          markPercentage === progressPercentageRange[0] ||\n          markPercentage === progressPercentageRange[1]\n        );\n      }\n      return markPercentage === progressPercentage;\n    };\n\n    const hasMinTick = () => {\n      return marks?.some((mark) => mark.value === min) || false;\n    };\n\n    const hasMaxTick = () => {\n      return marks?.some((mark) => mark.value === max) || false;\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"dragging\")]: isDragging,\n          [withBaseName(\"range\")]: isRange,\n          [withBaseName(\"withMarks\")]: marks,\n          [withBaseName(\"constrainLabelPosition\")]: constrainLabelPosition,\n          [withBaseName(\"withTicks\")]: showTicks,\n        })}\n        data-testid=\"sliderTrack\"\n        ref={ref}\n        {...rest}\n      >\n        <div className={clsx(withBaseName(\"container\"))}>\n          {minLabel && (\n            <Text\n              aria-hidden\n              className={withBaseName(\"minLabel\")}\n              color=\"secondary\"\n              styleAs=\"label\"\n            >\n              {minLabel || format?.(min)}\n            </Text>\n          )}\n          {/* Slider Track */}\n          <div\n            onPointerDown={handlePointerDown}\n            className={withBaseName(\"wrapper\")}\n          >\n            <div\n              className={clsx(withBaseName(\"rail\"), {\n                [withBaseName(\"hasMinTick\")]: hasMinTick() && showTicks,\n                [withBaseName(\"hasMaxTick\")]: hasMaxTick() && showTicks,\n              })}\n              ref={sliderRef}\n              style={\n                {\n                  ...(progressPercentage !== undefined && {\n                    \"--slider-progressPercentage\": `${progressPercentage}%`,\n                  }),\n                  ...(progressPercentageRange?.[0] !== undefined && {\n                    \"--slider-progressPercentageStart\": `${progressPercentageRange[0]}%`,\n                  }),\n                  ...(progressPercentageRange?.[1] !== undefined && {\n                    \"--slider-progressPercentageEnd\": `${progressPercentageRange[1]}%`,\n                  }),\n                } as React.CSSProperties\n              }\n            >\n              {isRange && <div className={clsx(withBaseName(\"fill\"))} />}\n              {children}\n            </div>\n            {/* Ticks */}\n            {marks && showTicks && (\n              <div className={withBaseName(\"ticks\")}>\n                {marks.map(({ value }) => (\n                  <span\n                    key={`${value}-tick`}\n                    style={{\n                      left: `${calculateMarkPosition(value, max, min)}%`,\n                    }}\n                    className={clsx(\n                      withBaseName(\"tick\"),\n                      {\n                        [withBaseName(\"tickSelected\")]:\n                          checkIsMarkSelected(value),\n                      },\n                      {\n                        [withBaseName(\"tickHidden\")]:\n                          checkIsMarkOverlapped(value),\n                      },\n                    )}\n                  />\n                ))}\n              </div>\n            )}\n            {/* Marks */}\n            {marks && (\n              <div className={withBaseName(\"marks\")}>\n                {marks.map(({ label, value }) => (\n                  <span\n                    data-testid=\"mark\"\n                    key={`${value}-mark`}\n                    className={withBaseName(\"markLabel\")}\n                    style={{\n                      left: `${calculateMarkPosition(value, max, min)}%`,\n                    }}\n                  >\n                    {label}\n                  </span>\n                ))}\n              </div>\n            )}\n          </div>\n          {maxLabel && (\n            <Text\n              aria-hidden\n              className={withBaseName(\"maxLabel\")}\n              color=\"secondary\"\n              styleAs=\"label\"\n            >\n              {maxLabel || format?.(max)}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["SliderTrack","sliderTrackCss"],"mappings":"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"}
+{"version":3,"file":"SliderTrack.js","sources":["../src/slider/internal/SliderTrack.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type Ref } from \"react\";\nimport { Text } from \"../../text\";\nimport { makePrefixer } from \"../../utils\";\nimport sliderTrackCss from \"./SliderTrack.css\";\nimport { calculateMarkPosition, calculatePercentage } from \"./utils\";\n\nconst withBaseName = makePrefixer(\"saltSliderTrack\");\n\ninterface SliderTrackProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n  children: React.ReactNode;\n  constrainLabelPosition?: boolean;\n  disabled: boolean;\n  showTicks?: boolean;\n  format?: (value: number) => string | number;\n  handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;\n  isDragging: boolean;\n  isRange?: boolean;\n  marks?: { label: string; value: number }[];\n  max: number;\n  maxLabel?: number | string;\n  min: number;\n  minLabel?: number | string;\n  progressPercentage?: number;\n  progressPercentageRange?: [number, number];\n  sliderRef: Ref<HTMLDivElement>;\n}\n\nexport const SliderTrack = forwardRef<HTMLDivElement, SliderTrackProps>(\n  function SliderTrack(\n    {\n      children,\n      className,\n      constrainLabelPosition = false,\n      disabled,\n      showTicks,\n      format,\n      handlePointerDown,\n      isDragging,\n      isRange = false,\n      marks,\n      max,\n      maxLabel,\n      min,\n      minLabel,\n      progressPercentage = 0,\n      progressPercentageRange = [0, 0],\n      sliderRef,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-slider-track\",\n      css: sliderTrackCss,\n      window: targetWindow,\n    });\n\n    const checkIsMarkSelected = (value: number) => {\n      const markPercentage = calculatePercentage(value, max, min);\n      if (isRange) {\n        return (\n          markPercentage > progressPercentageRange[0] &&\n          markPercentage < progressPercentageRange[1]\n        );\n      }\n      return markPercentage < progressPercentage;\n    };\n\n    const checkIsMarkOverlapped = (value: number) => {\n      const markPercentage = calculatePercentage(value, max, min);\n      if (isRange) {\n        return (\n          markPercentage === progressPercentageRange[0] ||\n          markPercentage === progressPercentageRange[1]\n        );\n      }\n      return markPercentage === progressPercentage;\n    };\n\n    const hasMinTick = () => {\n      return marks?.some((mark) => mark.value === min) || false;\n    };\n\n    const hasMaxTick = () => {\n      return marks?.some((mark) => mark.value === max) || false;\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"disabled\")]: disabled,\n          [withBaseName(\"dragging\")]: isDragging,\n          [withBaseName(\"range\")]: isRange,\n          [withBaseName(\"withMarks\")]: marks,\n          [withBaseName(\"constrainLabelPosition\")]: constrainLabelPosition,\n          [withBaseName(\"withTicks\")]: showTicks,\n        })}\n        data-testid=\"sliderTrack\"\n        ref={ref}\n        {...rest}\n      >\n        <div className={clsx(withBaseName(\"container\"))}>\n          {minLabel && (\n            <Text\n              aria-hidden\n              className={withBaseName(\"minLabel\")}\n              color=\"secondary\"\n              styleAs=\"label\"\n            >\n              {minLabel || format?.(min)}\n            </Text>\n          )}\n          {/* Slider Track */}\n          <div\n            onPointerDown={handlePointerDown}\n            className={withBaseName(\"wrapper\")}\n          >\n            <div\n              className={clsx(withBaseName(\"rail\"), {\n                [withBaseName(\"hasMinTick\")]: hasMinTick() && showTicks,\n                [withBaseName(\"hasMaxTick\")]: hasMaxTick() && showTicks,\n              })}\n              ref={sliderRef}\n              style={\n                {\n                  ...(progressPercentage !== undefined && {\n                    \"--slider-progressPercentage\": `${progressPercentage}%`,\n                  }),\n                  ...(progressPercentageRange?.[0] !== undefined && {\n                    \"--slider-progressPercentageStart\": `${progressPercentageRange[0]}%`,\n                  }),\n                  ...(progressPercentageRange?.[1] !== undefined && {\n                    \"--slider-progressPercentageEnd\": `${progressPercentageRange[1]}%`,\n                  }),\n                } as React.CSSProperties\n              }\n            >\n              {isRange && <div className={clsx(withBaseName(\"fill\"))} />}\n              {children}\n            </div>\n            {/* Ticks */}\n            {marks && showTicks && (\n              <div className={withBaseName(\"ticks\")}>\n                {marks.map(({ value }) => (\n                  <span\n                    key={`${value}-tick`}\n                    style={{\n                      left: `${calculateMarkPosition(value, max, min)}%`,\n                    }}\n                    className={clsx(\n                      withBaseName(\"tick\"),\n                      {\n                        [withBaseName(\"tickSelected\")]:\n                          checkIsMarkSelected(value),\n                      },\n                      {\n                        [withBaseName(\"tickHidden\")]:\n                          checkIsMarkOverlapped(value),\n                      },\n                    )}\n                  />\n                ))}\n              </div>\n            )}\n            {/* Marks */}\n            {marks && (\n              <div className={withBaseName(\"marks\")}>\n                {marks.map(({ label, value }) => (\n                  <span\n                    data-testid=\"mark\"\n                    key={`${value}-mark`}\n                    className={withBaseName(\"markLabel\")}\n                    style={{\n                      left: `${calculateMarkPosition(value, max, min)}%`,\n                    }}\n                  >\n                    {label}\n                  </span>\n                ))}\n              </div>\n            )}\n          </div>\n          {maxLabel && (\n            <Text\n              aria-hidden\n              className={withBaseName(\"maxLabel\")}\n              color=\"secondary\"\n              styleAs=\"label\"\n            >\n              {maxLabel || format?.(max)}\n            </Text>\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["SliderTrack","sliderTrackCss"],"mappings":"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"}