@salt-ds/core 1.47.4 → 1.48.0

package/dist-cjs/interactable-card/InteractableCardGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"InteractableCardGroup.js","sources":["../src/interactable-card/InteractableCardGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\nimport interactableCardGroupCss from \"./InteractableCardGroup.css\";\nimport {\n  InteractableCardGroupContext,\n  type InteractableCardValue,\n} from \"./InteractableCardGroupContext\";\n\nexport interface InteractableCardGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled. Should be an array when `multiSelect` is true.\n   */\n  defaultValue?: InteractableCardValue;\n  /**\n   * If `true`, the Interactable Card Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled. Should be an array when `multiSelect` is true.\n   */\n  value?: InteractableCardValue;\n  /**\n   * If `true` the Interactable Card Group will allow multiple selection functionality, with keyboard interactions matching those of a checkbox.\n   * By default the group allows mutually exclusive selection with keyboard interactions matching radio buttons.\n   */\n  multiSelect?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (\n    event: SyntheticEvent<HTMLDivElement>,\n    value: InteractableCardValue,\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltInteractableCardGroup\");\n\nexport const InteractableCardGroup = forwardRef<\n  HTMLDivElement,\n  InteractableCardGroupProps\n>(function InteractableCardGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    multiSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card-group\",\n    css: interactableCardGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"InteractableCardGroup\",\n    state: \"value\",\n  });\n\n  const [elements, setElements] = useState<HTMLElement[]>([]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: queries the dom when children changes.\n  useEffect(() => {\n    const childElements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\n        \".saltInteractableCard:not([disabled])\",\n      ) ?? [],\n    );\n    setElements(childElements);\n  }, [children]);\n\n  const select = useCallback(\n    (\n      event: SyntheticEvent<HTMLDivElement>,\n      newValue: InteractableCardValue,\n    ) => {\n      if (multiSelect) {\n        const currentValues = Array.isArray(value) ? value : [];\n        const isSelected = currentValues.includes(newValue);\n\n        const nextValues = isSelected\n          ? currentValues.filter((val) => val !== newValue)\n          : [...currentValues, newValue];\n        setValue(nextValues);\n        onChange?.(event, nextValues);\n      } else {\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, newValue);\n        }\n      }\n    },\n    [onChange, value, multiSelect],\n  );\n\n  const isSelected = useCallback(\n    (cardValue: InteractableCardValue) =>\n      multiSelect\n        ? Array.isArray(value) && value.includes(cardValue)\n        : cardValue !== undefined && value === cardValue,\n    [value, multiSelect],\n  );\n\n  const isFirstChild = useCallback(\n    (cardValue: InteractableCardValue) => {\n      return (\n        elements.findIndex(\n          (element) => element.getAttribute(\"data-value\") === cardValue,\n        ) === 0\n      );\n    },\n    [elements],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      isFirstChild,\n      disabled,\n      multiSelect,\n      value,\n    }),\n    [select, isSelected, disabled, multiSelect, isFirstChild, value],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement,\n    );\n    const nextIndex = (currentIndex + 1) % elements.length;\n    const prevIndex = (currentIndex - 1 + elements.length) % elements.length;\n\n    if (event.key === \" \") {\n      event.preventDefault();\n      select(\n        event,\n        elements[currentIndex].getAttribute(\n          \"data-value\",\n        ) as InteractableCardValue,\n      );\n    }\n\n    if (!multiSelect) {\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          select(\n            event,\n            elements[nextIndex].getAttribute(\n              \"data-value\",\n            ) as InteractableCardValue,\n          );\n          elements[nextIndex]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          select(\n            event,\n            elements[prevIndex].getAttribute(\n              \"data-value\",\n            ) as InteractableCardValue,\n          );\n          elements[prevIndex]?.focus();\n          break;\n      }\n    }\n    onKeyDown?.(event);\n  };\n\n  return (\n    <InteractableCardGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), className)}\n        role={multiSelect ? \"group\" : \"radiogroup\"}\n        onKeyDown={handleKeyDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </InteractableCardGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCardGroup","useWindow","useComponentCssInjection","interactableCardGroupCss","useRef","useForkRef","useControlled","useState","useEffect","useCallback","isSelected","useMemo","jsx","InteractableCardGroupContext","clsx"],"mappings":"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"}
+{"version":3,"file":"InteractableCardGroup.js","sources":["../src/interactable-card/InteractableCardGroup.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type KeyboardEvent,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport {\n  makePrefixer,\n  ownerDocument,\n  useControlled,\n  useForkRef,\n} from \"../utils\";\nimport interactableCardGroupCss from \"./InteractableCardGroup.css\";\nimport {\n  InteractableCardGroupContext,\n  type InteractableCardValue,\n} from \"./InteractableCardGroupContext\";\n\nexport interface InteractableCardGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled. Should be an array when `multiSelect` is true.\n   */\n  defaultValue?: InteractableCardValue;\n  /**\n   * If `true`, the Interactable Card Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled. Should be an array when `multiSelect` is true.\n   */\n  value?: InteractableCardValue;\n  /**\n   * If `true` the Interactable Card Group will allow multiple selection functionality, with keyboard interactions matching those of a checkbox.\n   * By default the group allows mutually exclusive selection with keyboard interactions matching radio buttons.\n   */\n  multiSelect?: boolean;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (\n    event: SyntheticEvent<HTMLDivElement>,\n    value: InteractableCardValue,\n  ) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltInteractableCardGroup\");\n\nexport const InteractableCardGroup = forwardRef<\n  HTMLDivElement,\n  InteractableCardGroupProps\n>(function InteractableCardGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    multiSelect,\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-interactable-card-group\",\n    css: interactableCardGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"InteractableCardGroup\",\n    state: \"value\",\n  });\n\n  const [elements, setElements] = useState<HTMLElement[]>([]);\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: queries the dom when children changes.\n  useEffect(() => {\n    const childElements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\n        \".saltInteractableCard:not([disabled])\",\n      ) ?? [],\n    );\n    setElements(childElements);\n  }, [children]);\n\n  const select = useCallback(\n    (\n      event: SyntheticEvent<HTMLDivElement>,\n      newValue: InteractableCardValue,\n    ) => {\n      if (multiSelect) {\n        const currentValues = Array.isArray(value) ? value : [];\n        const isSelected = currentValues.includes(newValue);\n\n        const nextValues = isSelected\n          ? currentValues.filter((val) => val !== newValue)\n          : [...currentValues, newValue];\n        setValue(nextValues);\n        onChange?.(event, nextValues);\n      } else {\n        setValue(newValue);\n        if (value !== newValue) {\n          onChange?.(event, newValue);\n        }\n      }\n    },\n    [onChange, value, multiSelect],\n  );\n\n  const isSelected = useCallback(\n    (cardValue: InteractableCardValue) =>\n      multiSelect\n        ? Array.isArray(value) && value.includes(cardValue)\n        : cardValue !== undefined && value === cardValue,\n    [value, multiSelect],\n  );\n\n  const isFirstChild = useCallback(\n    (cardValue: InteractableCardValue) => {\n      return (\n        elements.findIndex(\n          (element) => element.getAttribute(\"data-value\") === cardValue,\n        ) === 0\n      );\n    },\n    [elements],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      isFirstChild,\n      disabled,\n      multiSelect,\n      value,\n    }),\n    [select, isSelected, disabled, multiSelect, isFirstChild, value],\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const doc = ownerDocument(groupRef.current);\n\n    const currentIndex = elements.indexOf(doc.activeElement as HTMLElement);\n    const nextIndex = (currentIndex + 1) % elements.length;\n    const prevIndex = (currentIndex - 1 + elements.length) % elements.length;\n\n    if (event.key === \" \") {\n      event.preventDefault();\n      select(\n        event,\n        elements[currentIndex].getAttribute(\n          \"data-value\",\n        ) as InteractableCardValue,\n      );\n    }\n\n    if (!multiSelect) {\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          select(\n            event,\n            elements[nextIndex].getAttribute(\n              \"data-value\",\n            ) as InteractableCardValue,\n          );\n          elements[nextIndex]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          select(\n            event,\n            elements[prevIndex].getAttribute(\n              \"data-value\",\n            ) as InteractableCardValue,\n          );\n          elements[prevIndex]?.focus();\n          break;\n      }\n    }\n    onKeyDown?.(event);\n  };\n\n  return (\n    <InteractableCardGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), className)}\n        role={multiSelect ? \"group\" : \"radiogroup\"}\n        onKeyDown={handleKeyDown}\n        ref={handleRef}\n        {...rest}\n      >\n        {children}\n      </div>\n    </InteractableCardGroupContext.Provider>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InteractableCardGroup","useWindow","useComponentCssInjection","interactableCardGroupCss","useRef","useForkRef","useControlled","useState","useEffect","useCallback","isSelected","useMemo","ownerDocument","jsx","InteractableCardGroupContext","clsx"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  display: inline-grid;\n  grid-template-areas: \"start-adornment textarea end-adornment\";\n  grid-template-columns: min-content 1fr min-content;\n  grid-template-rows: 1fr;\n  background: var(--multilineInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 0 var(--salt-spacing-100);\n}\n\n.saltMultilineInput-wrapper {\n  grid-area: textarea;\n  overflow: hidden;\n  margin: var(--salt-spacing-75) 0;\n  display: flex;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--multilineInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-focused,\n.saltMultilineInput-bordered.saltMultilineInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--multilineInput-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-disabled,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--multilineInput-borderColor-hover);\n}\n\n.saltMultilineInput-focused .saltMultilineInput-activationIndicator,\n.saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--multilineInput-borderColor-active);\n}\n\n.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-activationIndicator,\n.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltMultilineInput-bordered .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-background-readonly: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-error-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-background-readonly: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-background-readonly: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-success-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused,\n.saltMultilineInput-focused:hover {\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-cursor-text);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput.saltMultilineInput-readOnly {\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltMultilineInput.saltMultilineInput-disabled,\n.saltMultilineInput.saltMultilineInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  grid-template-areas: \"start-adornment textarea\" \"end-adornment end-adornment\";\n  grid-template-columns: min-content 1fr;\n  grid-template-rows: 1fr auto;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n  grid-area: start-adornment;\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n  grid-area: end-adornment;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-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/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  appearance: none;\n  background: none;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  resize: vertical;\n  width: 100%;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 0;\n  min-width: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  display: inline-grid;\n  grid-template-areas: \"start-adornment textarea end-adornment\";\n  grid-template-columns: min-content 1fr min-content;\n  grid-template-rows: 1fr;\n  background: var(--multilineInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  color: var(--salt-content-primary-foreground);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 0 var(--salt-spacing-100);\n}\n\n.saltMultilineInput-wrapper {\n  grid-area: textarea;\n  overflow: hidden;\n  margin: var(--salt-spacing-75) 0;\n  display: flex;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-cursor-text);\n}\n\n/* Style applied if `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--multilineInput-borderColor-hover);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-focused,\n.saltMultilineInput-bordered.saltMultilineInput-focused:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--multilineInput-borderColor-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltMultilineInput-bordered.saltMultilineInput-readOnly,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-disabled,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover {\n  border-style: var(--salt-borderStyle-solid);\n  border-color: var(--salt-editable-borderColor-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--multilineInput-borderColor);\n}\n\n.saltMultilineInput:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--multilineInput-borderColor-hover);\n}\n\n.saltMultilineInput-focused .saltMultilineInput-activationIndicator,\n.saltMultilineInput-focused:hover .saltMultilineInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--multilineInput-borderColor-active);\n}\n\n.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-readOnly:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-readonly);\n}\n\n.saltMultilineInput-disabled .saltMultilineInput-activationIndicator,\n.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n  border-bottom-style: var(--salt-borderStyle-solid);\n  border-bottom-color: var(--salt-editable-borderColor-disabled);\n}\n\n.saltMultilineInput-bordered .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-readOnly .saltMultilineInput-activationIndicator,\n.saltMultilineInput-bordered.saltMultilineInput-disabled:hover .saltMultilineInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltMultilineInput-bordered.saltMultilineInput-focused .saltMultilineInput-activationIndicator {\n  /* Activation indicator width minus the border from the input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderColor-active: var(--salt-editable-borderColor-active);\n  --multilineInput-borderColor-hover: var(--salt-editable-borderColor-hover);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-background-readonly: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-error-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-background-readonly: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-warning-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-background-readonly: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-borderColor-active: var(--salt-status-success-borderColor);\n  --multilineInput-borderColor-hover: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused,\n.saltMultilineInput-focused:hover {\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-cursor-text);\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput.saltMultilineInput-readOnly {\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltMultilineInput.saltMultilineInput-disabled,\n.saltMultilineInput.saltMultilineInput-disabled:hover {\n  background: var(--input-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltMultilineInput.saltMultilineInput-withAdornmentRow {\n  grid-template-areas: \"start-adornment textarea\" \"end-adornment end-adornment\";\n  grid-template-columns: min-content 1fr;\n  grid-template-rows: 1fr auto;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n  grid-area: start-adornment;\n}\n\n/* Style applied to suffix adornment container */\n.saltMultilineInput-suffixAdornments {\n  align-self: self-end;\n  grid-area: end-adornment;\n}\n\n/* Style applied to suffix adornment container when end adornments are provided */\n.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments {\n  display: inline-flex;\n  flex-basis: 100%;\n  justify-content: flex-end;\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: var(--salt-size-base);\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: 0;\n}\n\n/* Styles for button adornment */\n.saltMultilineInput-startAdornmentContainer > .saltButton,\n.saltMultilineInput-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/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  appearance: none;\n  background: none;\n  border: 0;\n  color: inherit;\n  font: inherit;\n  resize: vertical;\n  width: 100%;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 0;\n  min-width: 0;\n  max-height: 100%;\n  overflow: auto;\n}\n\n/* Style applied to placeholder */\n.saltMultilineInput-textarea::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=MultilineInput.css.js.map

package/dist-cjs/multiline-input/MultilineInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.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 FocusEvent,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type TextareaHTMLAttributes,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"textarea\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The default minimum number of rows. Defaults to 3\n   */\n  rows?: number;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n   */\n  textAreaProps?: Partial<TextareaHTMLAttributes<HTMLTextAreaElement>> &\n    DataAttributes;\n  /**\n   * Optional ref for the textarea component\n   */\n  textAreaRef?: Ref<HTMLTextAreaElement>;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n  function MultilineInput(\n    {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n      bordered = false,\n      className: classNameProp,\n      disabled,\n      endAdornment,\n      id,\n      placeholder,\n      readOnly,\n      role,\n      rows = 3,\n      startAdornment,\n      style,\n      textAreaProps = {},\n      textAreaRef,\n      value: valueProp,\n      defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n      validationStatus: validationStatusProp,\n      variant = \"primary\",\n      ...other\n    },\n    ref,\n  ) {\n    const [inputElement, setInputElement] =\n      useState<HTMLTextAreaElement | null>(null);\n    const handleInputElement = useCallback(\n      (element: HTMLTextAreaElement | null) => {\n        setInputElement(element);\n      },\n      [],\n    );\n    const handleRef = useForkRef(handleInputElement, textAreaRef);\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-multiline-input\",\n      css: multilineInputCss,\n      window: targetWindow,\n    });\n\n    const restA11yProps = {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n    };\n\n    const [focused, setFocused] = useState(false);\n\n    const {\n      \"aria-describedby\": textAreaDescribedBy,\n      \"aria-labelledby\": textAreaLabelledBy,\n      onBlur,\n      onChange,\n      onFocus,\n      required: textAreaRequired,\n      ...restTextAreaProps\n    } = textAreaProps;\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isDisabled = disabled || formFieldDisabled;\n    const isReadOnly = readOnly || formFieldReadOnly;\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : textAreaRequired;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValueProp,\n      name: \"MultilineInput\",\n      state: \"value\",\n    });\n\n    const previousHeight = useRef<string | undefined>(undefined);\n\n    const changeHeight = useCallback(() => {\n      const input = inputElement;\n\n      if (!input) return;\n\n      const hasBeenManuallyResized =\n        previousHeight.current !== undefined &&\n        input.style.height !== previousHeight.current;\n      if (!hasBeenManuallyResized) {\n        const previousOverflow = input.style.overflow;\n        input.style.overflow = \"hidden\";\n        input.style.height = \"auto\";\n        input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n        const newHeight = `${\n          input.scrollHeight + (input.offsetHeight - input.clientHeight)\n        }px`;\n        input.style.height = newHeight;\n        previousHeight.current = newHeight;\n        input.style.overflow = previousOverflow;\n      }\n    }, [inputElement]);\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      onChange?.(event);\n      changeHeight();\n    };\n\n    useLayoutEffect(() => {\n      changeHeight();\n    }, [value, changeHeight]);\n\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onFocus?.(event);\n      setFocused(true);\n    };\n\n    const multilineInputStyles = {\n      \"--saltMultilineInput-rows\": rows,\n      ...style,\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"withAdornmentRow\")]: endAdornment,\n            [withBaseName(\"bordered\")]: bordered,\n            [withBaseName(\"focused\")]: !isDisabled && focused,\n            [withBaseName(\"disabled\")]: isDisabled,\n            [withBaseName(\"readOnly\")]: isReadOnly,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          },\n          classNameProp,\n        )}\n        ref={ref}\n        style={multilineInputStyles}\n        {...other}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"startAdornmentContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <div className={withBaseName(\"wrapper\")}>\n          <textarea\n            aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n            aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n            className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n            disabled={isDisabled}\n            id={id}\n            readOnly={isReadOnly}\n            ref={handleRef}\n            required={isRequired}\n            role={role}\n            rows={rows}\n            tabIndex={isDisabled ? -1 : 0}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            onFocus={!isDisabled ? handleFocus : undefined}\n            placeholder={placeholder}\n            value={value}\n            {...restA11yProps}\n            {...restTextAreaProps}\n          />\n        </div>\n        <div className={withBaseName(\"suffixAdornments\")}>\n          {!isDisabled && validationStatus && (\n            <div className={withBaseName(\"statusAdornmentContainer\")}>\n              <StatusAdornment status={validationStatus} />\n            </div>\n          )}\n          {endAdornment && (\n            <div className={withBaseName(\"endAdornmentContainer\")}>\n              {endAdornment}\n            </div>\n          )}\n        </div>\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useState","useCallback","useForkRef","useWindow","useComponentCssInjection","multilineInputCss","useFormFieldProps","useControlled","useRef","value","useLayoutEffect","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}
+{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.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 FocusEvent,\n  forwardRef,\n  type ReactNode,\n  type Ref,\n  type TextareaHTMLAttributes,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { StatusAdornment } from \"../status-adornment\";\nimport type { DataAttributes } from \"../types\";\nimport { makePrefixer, useControlled, useForkRef } from \"../utils\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"textarea\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * Styling variant with full border. Defaults to false\n   */\n  bordered?: boolean;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * The default minimum number of rows. Defaults to 3\n   */\n  rows?: number;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n   */\n  textAreaProps?: Partial<TextareaHTMLAttributes<HTMLTextAreaElement>> &\n    DataAttributes;\n  /**\n   * Optional ref for the textarea component\n   */\n  textAreaRef?: Ref<HTMLTextAreaElement>;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n  function MultilineInput(\n    {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n      bordered = false,\n      className: classNameProp,\n      disabled,\n      endAdornment,\n      id,\n      placeholder,\n      readOnly,\n      role,\n      rows = 3,\n      startAdornment,\n      style,\n      textAreaProps = {},\n      textAreaRef,\n      value: valueProp,\n      defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n      validationStatus: validationStatusProp,\n      variant = \"primary\",\n      ...other\n    },\n    ref,\n  ) {\n    const [inputElement, setInputElement] =\n      useState<HTMLTextAreaElement | null>(null);\n    const handleInputElement = useCallback(\n      (element: HTMLTextAreaElement | null) => {\n        setInputElement(element);\n      },\n      [],\n    );\n    const handleRef = useForkRef(handleInputElement, textAreaRef);\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-multiline-input\",\n      css: multilineInputCss,\n      window: targetWindow,\n    });\n\n    const restA11yProps = {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n    };\n\n    const [focused, setFocused] = useState(false);\n\n    const {\n      \"aria-describedby\": textAreaDescribedBy,\n      \"aria-labelledby\": textAreaLabelledBy,\n      onBlur,\n      onChange,\n      onFocus,\n      required: textAreaRequired,\n      ...restTextAreaProps\n    } = textAreaProps;\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isDisabled = disabled || formFieldDisabled;\n    const isReadOnly = readOnly || formFieldReadOnly;\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : textAreaRequired;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValueProp,\n      name: \"MultilineInput\",\n      state: \"value\",\n    });\n\n    const previousHeight = useRef<string | undefined>(undefined);\n\n    const changeHeight = useCallback(() => {\n      const input = inputElement;\n\n      if (!input) return;\n\n      const hasBeenManuallyResized =\n        previousHeight.current !== undefined &&\n        input.style.height !== previousHeight.current;\n      if (!hasBeenManuallyResized) {\n        const previousOverflow = input.style.overflow;\n        input.style.overflow = \"hidden\";\n        input.style.height = \"auto\";\n        input.scrollHeight; // Needed to work around Firefox bug. https://bugzilla.mozilla.org/show_bug.cgi?id=1787062\n        const newHeight = `${\n          input.scrollHeight + (input.offsetHeight - input.clientHeight)\n        }px`;\n        input.style.height = newHeight;\n        previousHeight.current = newHeight;\n        input.style.overflow = previousOverflow;\n      }\n    }, [inputElement]);\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      onChange?.(event);\n      changeHeight();\n    };\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to run this effect when value changes in a controlled component.\n    useLayoutEffect(() => {\n      changeHeight();\n    }, [value, changeHeight]);\n\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onFocus?.(event);\n      setFocused(true);\n    };\n\n    const multilineInputStyles = {\n      \"--saltMultilineInput-rows\": rows,\n      ...style,\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"withAdornmentRow\")]: endAdornment,\n            [withBaseName(\"bordered\")]: bordered,\n            [withBaseName(\"focused\")]: !isDisabled && focused,\n            [withBaseName(\"disabled\")]: isDisabled,\n            [withBaseName(\"readOnly\")]: isReadOnly,\n            [withBaseName(validationStatus ?? \"\")]: validationStatus,\n          },\n          classNameProp,\n        )}\n        ref={ref}\n        style={multilineInputStyles}\n        {...other}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"startAdornmentContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <div className={withBaseName(\"wrapper\")}>\n          <textarea\n            aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n            aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n            className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n            disabled={isDisabled}\n            id={id}\n            readOnly={isReadOnly}\n            ref={handleRef}\n            required={isRequired}\n            role={role}\n            rows={rows}\n            tabIndex={isDisabled ? -1 : 0}\n            onBlur={handleBlur}\n            onChange={handleChange}\n            onFocus={!isDisabled ? handleFocus : undefined}\n            placeholder={placeholder}\n            value={value}\n            {...restA11yProps}\n            {...restTextAreaProps}\n          />\n        </div>\n        <div className={withBaseName(\"suffixAdornments\")}>\n          {!isDisabled && validationStatus && (\n            <div className={withBaseName(\"statusAdornmentContainer\")}>\n              <StatusAdornment status={validationStatus} />\n            </div>\n          )}\n          {endAdornment && (\n            <div className={withBaseName(\"endAdornmentContainer\")}>\n              {endAdornment}\n            </div>\n          )}\n        </div>\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useState","useCallback","useForkRef","useWindow","useComponentCssInjection","multilineInputCss","useFormFieldProps","useControlled","useRef","value","useLayoutEffect","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}

package/dist-cjs/navigation-item/ExpansionIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { useIcon } from \"../semantic-icon-provider\";\n\ninterface ExpansionIconProps {\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ExpansionIcon = ({\n  expanded = false,\n  orientation = \"horizontal\",\n}: ExpansionIconProps) => {\n  const { ExpandGroupIcon, ExpandIcon, CollapseGroupIcon } = useIcon();\n  const iconExpansionMap = {\n    vertical: {\n      expanded: CollapseGroupIcon,\n      collapsed: ExpandGroupIcon,\n    },\n    horizontal: {\n      expanded: CollapseGroupIcon,\n      collapsed: CollapseGroupIcon,\n    },\n  };\n\n  const Icon =\n    iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n  return <Icon aria-hidden=\"true\" />;\n};\n"],"names":["useIcon","jsx"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA;AAChB,CAA0B,KAAA;AACxB,EAAA,MAAM,EAAE,eAAA,EAA6B,iBAAA,KAAsBA,4BAAQ,EAAA;AACnE,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,QAAU,EAAA;AAAA,MACR,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,UAAY,EAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA;AAAA;AACb,GACF;AAEA,EAAA,MAAM,OACJ,gBAAiB,CAAA,WAAW,CAAE,CAAA,QAAA,GAAW,aAAa,WAAW,CAAA;AACnE,EAAO,uBAAAC,cAAA,CAAC,IAAK,EAAA,EAAA,aAAA,EAAY,MAAO,EAAA,CAAA;AAClC;;;;"}
+{"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { useIcon } from \"../semantic-icon-provider\";\n\ninterface ExpansionIconProps {\n  /**\n   * Whether the navigation item is expanded.\n   */\n  expanded?: boolean;\n  /**\n   * The orientation of the navigation item.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ExpansionIcon = ({\n  expanded = false,\n  orientation = \"horizontal\",\n}: ExpansionIconProps) => {\n  const { ExpandGroupIcon, CollapseGroupIcon } = useIcon();\n  const iconExpansionMap = {\n    vertical: {\n      expanded: CollapseGroupIcon,\n      collapsed: ExpandGroupIcon,\n    },\n    horizontal: {\n      expanded: CollapseGroupIcon,\n      collapsed: CollapseGroupIcon,\n    },\n  };\n\n  const Icon =\n    iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n  return <Icon aria-hidden=\"true\" />;\n};\n"],"names":["useIcon","jsx"],"mappings":";;;;;AAaO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA;AAChB,CAA0B,KAAA;AACxB,EAAA,MAAM,EAAE,eAAA,EAAiB,iBAAkB,EAAA,GAAIA,4BAAQ,EAAA;AACvD,EAAA,MAAM,gBAAmB,GAAA;AAAA,IACvB,QAAU,EAAA;AAAA,MACR,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA;AAAA,KACb;AAAA,IACA,UAAY,EAAA;AAAA,MACV,QAAU,EAAA,iBAAA;AAAA,MACV,SAAW,EAAA;AAAA;AACb,GACF;AAEA,EAAA,MAAM,OACJ,gBAAiB,CAAA,WAAW,CAAE,CAAA,QAAA,GAAW,aAAa,WAAW,CAAA;AACnE,EAAO,uBAAAC,cAAA,CAAC,IAAK,EAAA,EAAA,aAAA,EAAY,MAAO,EAAA,CAAA;AAClC;;;;"}

package/dist-cjs/pagination/PageButton.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak, 0);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltPageButton[aria-current=\"page\"] {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
+var css_248z = ".saltPageButton {\n  min-width: var(--salt-size-base);\n  font-weight: var(--salt-text-fontWeight);\n  height: var(--salt-size-base);\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  appearance: none;\n  box-sizing: border-box;\n  padding: 0 var(--salt-spacing-100);\n  border: none;\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  cursor: var(--salt-cursor-hover);\n  border-radius: var(--salt-palette-corner-weak);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:active {\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n.saltPageButton:disabled {\n  color: var(--salt-content-secondary-foreground);\n  background: var(--salt-selectable-background);\n  cursor: var(--salt-cursor-readonly);\n}\n\n.saltPageButton[aria-current=\"page\"] {\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  background: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n  padding: 0;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=PageButton.css.js.map

package/dist-cjs/pill/Pill.js

@@ -38,7 +38,7 @@ const Pill = React.forwardRef(function Pill2({
     onClick,
     onBlur
   });
-  const { tabIndex, ...restButtonProps } = buttonProps;
+  const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {

package/dist-cjs/pill/Pill.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.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 { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport pillCss from \"./Pill.css\";\n\nconst withBaseName = makePrefixer(\"saltPill\");\n\nexport interface PillProps extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const Pill = forwardRef<HTMLButtonElement, PillProps>(function Pill(\n  {\n    children,\n    className,\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n    onBlur,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill\",\n    css: pillCss,\n    window: targetWindow,\n  });\n  const { buttonProps, active } = useButton<HTMLButtonElement>({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n    onBlur,\n  });\n  // we do not want to spread tab index in this case because the button element\n  // does not require tabindex=\"0\" attribute\n  const { tabIndex, ...restButtonProps } = buttonProps;\n  return (\n    <button\n      data-testid=\"pill\"\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(\"clickable\"),\n        { [withBaseName(\"active\")]: active },\n        className,\n      )}\n      type=\"button\"\n      {...restButtonProps}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Pill","useWindow","useComponentCssInjection","pillCss","useButton","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAI/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAIC,mBAA6B,CAAA;AAAA,IAC3D,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGD,EAAA,MAAM,EAAE,QAAA,EAAU,GAAG,eAAA,EAAoB,GAAA,WAAA;AACzC,EACE,uBAAAC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,MAAA;AAAA,MACZ,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAO,EAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,eAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Pill.js","sources":["../src/pill/Pill.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 { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\nimport pillCss from \"./Pill.css\";\n\nconst withBaseName = makePrefixer(\"saltPill\");\n\nexport interface PillProps extends ComponentPropsWithoutRef<\"button\"> {}\n\nexport const Pill = forwardRef<HTMLButtonElement, PillProps>(function Pill(\n  {\n    children,\n    className,\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n    onBlur,\n    ...rest\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-pill\",\n    css: pillCss,\n    window: targetWindow,\n  });\n  const { buttonProps, active } = useButton<HTMLButtonElement>({\n    disabled,\n    onKeyUp,\n    onKeyDown,\n    onClick,\n    onBlur,\n  });\n  // we do not want to spread tab index in this case because the button element\n  // does not require tabindex=\"0\" attribute\n  const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;\n  return (\n    <button\n      data-testid=\"pill\"\n      ref={ref}\n      className={clsx(\n        withBaseName(),\n        withBaseName(\"clickable\"),\n        { [withBaseName(\"active\")]: active },\n        className,\n      )}\n      type=\"button\"\n      {...restButtonProps}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Pill","useWindow","useComponentCssInjection","pillCss","useButton","jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,0BAAa,UAAU,CAAA;AAI/B,MAAA,IAAA,GAAOC,gBAAyC,CAAA,SAASC,KACpE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,WAAA,EAAa,MAAO,EAAA,GAAIC,mBAA6B,CAAA;AAAA,IAC3D,QAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA;AAAA,GACD,CAAA;AAGD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,iBAAoB,GAAA,WAAA;AACpD,EACE,uBAAAC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,aAAY,EAAA,MAAA;AAAA,MACZ,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,aAAa,WAAW,CAAA;AAAA,QACxB,EAAE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAO,EAAA;AAAA,QACnC;AAAA,OACF;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MACJ,GAAG,eAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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  background: var(--saltPillInput-background-hover, var(--pillInput-background-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-active: var(--salt-editable-primary-background-active);\n  --pillInput-background-hover: var(--salt-editable-primary-background-hover);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-primary-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-active: var(--salt-editable-secondary-background-active);\n  --pillInput-background-hover: var(--salt-editable-secondary-background-active);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-secondary-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-active: var(--salt-status-error-background);\n  --pillInput-background-hover: 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-borderColor-disabled: var(--salt-editable-borderColor-disabled);\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-active: var(--salt-status-warning-background);\n  --pillInput-background-hover: 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-borderColor-disabled: var(--salt-editable-borderColor-disabled);\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-active: var(--salt-status-success-background);\n  --pillInput-background-hover: 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  background: var(--saltPillInput-background-active, var(--pillInput-background-active));\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 .saltPill:focus-visible {\n  background: var(--salt-content-foreground-highlight);\n  color: var(--salt-content-primary-foreground);\n  --saltIcon-color: var(--salt-content-primary-foreground);\n  border-color: transparent;\n  outline: none;\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, 0);\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 */\n.saltPillInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\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  background: var(--saltPillInput-background-hover, var(--pillInput-background-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-active: var(--salt-editable-primary-background-active);\n  --pillInput-background-hover: var(--salt-editable-primary-background-hover);\n  --pillInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-primary-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-active: var(--salt-editable-secondary-background-active);\n  --pillInput-background-hover: var(--salt-editable-secondary-background-active);\n  --pillInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --pillInput-background-readonly: var(--salt-editable-secondary-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-active: var(--salt-status-error-background);\n  --pillInput-background-hover: 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-borderColor-disabled: var(--salt-editable-borderColor-disabled);\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-active: var(--salt-status-warning-background);\n  --pillInput-background-hover: 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-borderColor-disabled: var(--salt-editable-borderColor-disabled);\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-active: var(--salt-status-success-background);\n  --pillInput-background-hover: 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  background: var(--saltPillInput-background-active, var(--pillInput-background-active));\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 .saltPill:focus-visible {\n  background: var(--salt-content-foreground-highlight);\n  color: var(--salt-content-primary-foreground);\n  --saltIcon-color: var(--salt-content-primary-foreground);\n  border-color: transparent;\n  outline: none;\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, 0);\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";
 
 module.exports = css_248z;
 //# sourceMappingURL=PillInput.css.js.map

package/dist-cjs/pill-input/useTruncatePills.js

@@ -31,7 +31,8 @@ function useTruncatePills({
         );
         const maxWidth = pillList.getBoundingClientRect().width;
         const listGap = Number.parseInt(
-          targetWindow.getComputedStyle(pillList).gap
+          targetWindow.getComputedStyle(pillList).gap,
+          10
         );
         const isShowingOverflow = pillList.querySelector(
           "[data-overflowindicator]"

package/dist-cjs/pill-input/useTruncatePills.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTruncatePills.js","sources":["../src/pill-input/useTruncatePills.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useRef } from \"react\";\nimport {\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n  useValueEffect,\n} from \"../utils\";\n\nexport function useTruncatePills({\n  pills,\n  enable,\n}: {\n  pills: string[];\n  enable?: boolean;\n}) {\n  const pillListRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleItems] = useValueEffect(pills.length);\n  const targetWindow = useWindow();\n\n  const updateOverflow = useCallback(() => {\n    if (!enable) {\n      return;\n    }\n\n    const computeVisible = (visibleCount: number) => {\n      const pillList = pillListRef.current;\n\n      if (pillList && targetWindow) {\n        const pillElements = Array.from(\n          pillList.querySelectorAll('[role=\"listitem\"]'),\n        );\n        const maxWidth = pillList.getBoundingClientRect().width;\n        const listGap = Number.parseInt(\n          targetWindow.getComputedStyle(pillList).gap,\n        );\n        const isShowingOverflow = pillList.querySelector(\n          \"[data-overflowindicator]\",\n        );\n\n        let currentSize = 0;\n        let newVisibleCount = 0;\n\n        if (isShowingOverflow) {\n          const pill = pillElements.pop();\n          if (pill) {\n            const pillWidth = pill.getBoundingClientRect().width;\n            currentSize += pillWidth + listGap;\n          }\n        }\n\n        for (const pill of pillElements) {\n          const pillWidth = pill.getBoundingClientRect().width;\n          currentSize += pillWidth + listGap;\n\n          if (Math.round(currentSize) <= Math.round(maxWidth)) {\n            newVisibleCount++;\n          } else {\n            break;\n          }\n        }\n        return newVisibleCount;\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield pills.length;\n\n      // Measure the visible count\n      const newVisibleCount = computeVisible(pills.length);\n      const isMeasuring = newVisibleCount < pills.length && newVisibleCount > 0;\n      yield newVisibleCount;\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        yield computeVisible(newVisibleCount);\n      }\n    });\n  }, [pills, setVisibleItems, enable, targetWindow]);\n\n  useIsomorphicLayoutEffect(() => {\n    updateOverflow();\n  }, [updateOverflow]);\n\n  useResizeObserver({\n    ref: pillListRef,\n    onResize: updateOverflow,\n  });\n\n  return {\n    pillListRef,\n    visibleCount,\n    visiblePills: enable ? pills.slice(0, visibleCount) : pills,\n  };\n}\n"],"names":["useRef","useValueEffect","useWindow","useCallback","visibleCount","useIsomorphicLayoutEffect","useResizeObserver"],"mappings":";;;;;;;;;;;;;;AAQO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,KAAA;AAAA,EACA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,WAAA,GAAcA,aAAuB,IAAI,CAAA;AAC/C,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAAC,6BAAA,CAAe,MAAM,MAAM,CAAA;AACnE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA;AAAA;AAGF,IAAM,MAAA,cAAA,GAAiB,CAACC,aAAyB,KAAA;AAC/C,MAAA,MAAM,WAAW,WAAY,CAAA,OAAA;AAE7B,MAAA,IAAI,YAAY,YAAc,EAAA;AAC5B,QAAA,MAAM,eAAe,KAAM,CAAA,IAAA;AAAA,UACzB,QAAA,CAAS,iBAAiB,mBAAmB;AAAA,SAC/C;AACA,QAAM,MAAA,QAAA,GAAW,QAAS,CAAA,qBAAA,EAAwB,CAAA,KAAA;AAClD,QAAA,MAAM,UAAU,MAAO,CAAA,QAAA;AAAA,UACrB,YAAA,CAAa,gBAAiB,CAAA,QAAQ,CAAE,CAAA;AAAA,SAC1C;AACA,QAAA,MAAM,oBAAoB,QAAS,CAAA,aAAA;AAAA,UACjC;AAAA,SACF;AAEA,QAAA,IAAI,WAAc,GAAA,CAAA;AAClB,QAAA,IAAI,eAAkB,GAAA,CAAA;AAEtB,QAAA,IAAI,iBAAmB,EAAA;AACrB,UAAM,MAAA,IAAA,GAAO,aAAa,GAAI,EAAA;AAC9B,UAAA,IAAI,IAAM,EAAA;AACR,YAAM,MAAA,SAAA,GAAY,IAAK,CAAA,qBAAA,EAAwB,CAAA,KAAA;AAC/C,YAAA,WAAA,IAAe,SAAY,GAAA,OAAA;AAAA;AAC7B;AAGF,QAAA,KAAA,MAAW,QAAQ,YAAc,EAAA;AAC/B,UAAM,MAAA,SAAA,GAAY,IAAK,CAAA,qBAAA,EAAwB,CAAA,KAAA;AAC/C,UAAA,WAAA,IAAe,SAAY,GAAA,OAAA;AAE3B,UAAA,IAAI,KAAK,KAAM,CAAA,WAAW,KAAK,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAG,EAAA;AACnD,YAAA,eAAA,EAAA;AAAA,WACK,MAAA;AACL,YAAA;AAAA;AACF;AAEF,QAAO,OAAA,eAAA;AAAA;AAET,MAAOA,OAAAA,aAAAA;AAAA,KACT;AAEA,IAAA,eAAA,CAAgB,aAAa;AAE3B,MAAA,MAAM,KAAM,CAAA,MAAA;AAGZ,MAAM,MAAA,eAAA,GAAkB,cAAe,CAAA,KAAA,CAAM,MAAM,CAAA;AACnD,MAAA,MAAM,WAAc,GAAA,eAAA,GAAkB,KAAM,CAAA,MAAA,IAAU,eAAkB,GAAA,CAAA;AACxE,MAAM,MAAA,eAAA;AAGN,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,MAAM,eAAe,eAAe,CAAA;AAAA;AACtC,KACD,CAAA;AAAA,KACA,CAAC,KAAA,EAAO,eAAiB,EAAA,MAAA,EAAQ,YAAY,CAAC,CAAA;AAEjD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAe,cAAA,EAAA;AAAA,GACjB,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAkBC,mCAAA,CAAA;AAAA,IAChB,GAAK,EAAA,WAAA;AAAA,IACL,QAAU,EAAA;AAAA,GACX,CAAA;AAED,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAc,MAAS,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,YAAY,CAAI,GAAA;AAAA,GACxD;AACF;;;;"}
+{"version":3,"file":"useTruncatePills.js","sources":["../src/pill-input/useTruncatePills.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { useCallback, useRef } from \"react\";\nimport {\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n  useValueEffect,\n} from \"../utils\";\n\nexport function useTruncatePills({\n  pills,\n  enable,\n}: {\n  pills: string[];\n  enable?: boolean;\n}) {\n  const pillListRef = useRef<HTMLDivElement>(null);\n  const [visibleCount, setVisibleItems] = useValueEffect(pills.length);\n  const targetWindow = useWindow();\n\n  const updateOverflow = useCallback(() => {\n    if (!enable) {\n      return;\n    }\n\n    const computeVisible = (visibleCount: number) => {\n      const pillList = pillListRef.current;\n\n      if (pillList && targetWindow) {\n        const pillElements = Array.from(\n          pillList.querySelectorAll('[role=\"listitem\"]'),\n        );\n        const maxWidth = pillList.getBoundingClientRect().width;\n        const listGap = Number.parseInt(\n          targetWindow.getComputedStyle(pillList).gap,\n          10,\n        );\n        const isShowingOverflow = pillList.querySelector(\n          \"[data-overflowindicator]\",\n        );\n\n        let currentSize = 0;\n        let newVisibleCount = 0;\n\n        if (isShowingOverflow) {\n          const pill = pillElements.pop();\n          if (pill) {\n            const pillWidth = pill.getBoundingClientRect().width;\n            currentSize += pillWidth + listGap;\n          }\n        }\n\n        for (const pill of pillElements) {\n          const pillWidth = pill.getBoundingClientRect().width;\n          currentSize += pillWidth + listGap;\n\n          if (Math.round(currentSize) <= Math.round(maxWidth)) {\n            newVisibleCount++;\n          } else {\n            break;\n          }\n        }\n        return newVisibleCount;\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield pills.length;\n\n      // Measure the visible count\n      const newVisibleCount = computeVisible(pills.length);\n      const isMeasuring = newVisibleCount < pills.length && newVisibleCount > 0;\n      yield newVisibleCount;\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        yield computeVisible(newVisibleCount);\n      }\n    });\n  }, [pills, setVisibleItems, enable, targetWindow]);\n\n  useIsomorphicLayoutEffect(() => {\n    updateOverflow();\n  }, [updateOverflow]);\n\n  useResizeObserver({\n    ref: pillListRef,\n    onResize: updateOverflow,\n  });\n\n  return {\n    pillListRef,\n    visibleCount,\n    visiblePills: enable ? pills.slice(0, visibleCount) : pills,\n  };\n}\n"],"names":["useRef","useValueEffect","useWindow","useCallback","visibleCount","useIsomorphicLayoutEffect","useResizeObserver"],"mappings":";;;;;;;;;;;;;;AAQO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,KAAA;AAAA,EACA;AACF,CAGG,EAAA;AACD,EAAM,MAAA,WAAA,GAAcA,aAAuB,IAAI,CAAA;AAC/C,EAAA,MAAM,CAAC,YAAc,EAAA,eAAe,CAAI,GAAAC,6BAAA,CAAe,MAAM,MAAM,CAAA;AACnE,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAE/B,EAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA;AAAA;AAGF,IAAM,MAAA,cAAA,GAAiB,CAACC,aAAyB,KAAA;AAC/C,MAAA,MAAM,WAAW,WAAY,CAAA,OAAA;AAE7B,MAAA,IAAI,YAAY,YAAc,EAAA;AAC5B,QAAA,MAAM,eAAe,KAAM,CAAA,IAAA;AAAA,UACzB,QAAA,CAAS,iBAAiB,mBAAmB;AAAA,SAC/C;AACA,QAAM,MAAA,QAAA,GAAW,QAAS,CAAA,qBAAA,EAAwB,CAAA,KAAA;AAClD,QAAA,MAAM,UAAU,MAAO,CAAA,QAAA;AAAA,UACrB,YAAA,CAAa,gBAAiB,CAAA,QAAQ,CAAE,CAAA,GAAA;AAAA,UACxC;AAAA,SACF;AACA,QAAA,MAAM,oBAAoB,QAAS,CAAA,aAAA;AAAA,UACjC;AAAA,SACF;AAEA,QAAA,IAAI,WAAc,GAAA,CAAA;AAClB,QAAA,IAAI,eAAkB,GAAA,CAAA;AAEtB,QAAA,IAAI,iBAAmB,EAAA;AACrB,UAAM,MAAA,IAAA,GAAO,aAAa,GAAI,EAAA;AAC9B,UAAA,IAAI,IAAM,EAAA;AACR,YAAM,MAAA,SAAA,GAAY,IAAK,CAAA,qBAAA,EAAwB,CAAA,KAAA;AAC/C,YAAA,WAAA,IAAe,SAAY,GAAA,OAAA;AAAA;AAC7B;AAGF,QAAA,KAAA,MAAW,QAAQ,YAAc,EAAA;AAC/B,UAAM,MAAA,SAAA,GAAY,IAAK,CAAA,qBAAA,EAAwB,CAAA,KAAA;AAC/C,UAAA,WAAA,IAAe,SAAY,GAAA,OAAA;AAE3B,UAAA,IAAI,KAAK,KAAM,CAAA,WAAW,KAAK,IAAK,CAAA,KAAA,CAAM,QAAQ,CAAG,EAAA;AACnD,YAAA,eAAA,EAAA;AAAA,WACK,MAAA;AACL,YAAA;AAAA;AACF;AAEF,QAAO,OAAA,eAAA;AAAA;AAET,MAAOA,OAAAA,aAAAA;AAAA,KACT;AAEA,IAAA,eAAA,CAAgB,aAAa;AAE3B,MAAA,MAAM,KAAM,CAAA,MAAA;AAGZ,MAAM,MAAA,eAAA,GAAkB,cAAe,CAAA,KAAA,CAAM,MAAM,CAAA;AACnD,MAAA,MAAM,WAAc,GAAA,eAAA,GAAkB,KAAM,CAAA,MAAA,IAAU,eAAkB,GAAA,CAAA;AACxE,MAAM,MAAA,eAAA;AAGN,MAAA,IAAI,WAAa,EAAA;AACf,QAAA,MAAM,eAAe,eAAe,CAAA;AAAA;AACtC,KACD,CAAA;AAAA,KACA,CAAC,KAAA,EAAO,eAAiB,EAAA,MAAA,EAAQ,YAAY,CAAC,CAAA;AAEjD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAe,cAAA,EAAA;AAAA,GACjB,EAAG,CAAC,cAAc,CAAC,CAAA;AAEnB,EAAkBC,mCAAA,CAAA;AAAA,IAChB,GAAK,EAAA,WAAA;AAAA,IACL,QAAU,EAAA;AAAA,GACX,CAAA;AAED,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAc,MAAS,GAAA,KAAA,CAAM,KAAM,CAAA,CAAA,EAAG,YAAY,CAAI,GAAA;AAAA,GACxD;AACF;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: inline-flex;\n  gap: var(--salt-spacing-100);\n  cursor: var(--salt-cursor-hover);\n  position: relative;\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n\n  --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  height: var(--salt-size-selectable);\n  opacity: 0;\n  padding: 0;\n  width: var(--salt-size-selectable);\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltRadioButton-input,\n.saltRadioButtonIcon {\n  margin: var(--radioButton-icon-margin) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n  outline-offset: var(--salt-focused-outlineOffset);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n";
+var css_248z = "/* Styles applied to RadioButton container */\n.saltRadioButton {\n  display: inline-flex;\n  gap: var(--salt-spacing-100);\n  cursor: var(--salt-cursor-hover);\n  position: relative;\n\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n\n  --radioButton-icon-margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2);\n}\n\n/* Styles applied when RadioButton is disabled */\n.saltRadioButton-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* Styles applied to root component if `readOnly={true}` */\n.saltRadioButton-readOnly {\n  color: var(--salt-content-primary-foreground);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styles applied to input component */\n.saltRadioButton-input {\n  cursor: inherit;\n  position: absolute;\n  height: var(--salt-size-selectable);\n  opacity: 0;\n  padding: 0;\n  width: var(--salt-size-selectable);\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltRadioButton-input,\n.saltRadioButtonIcon {\n  margin: var(--radioButton-icon-margin) 0;\n  box-sizing: border-box;\n}\n\n/* Styles applied to icon when :focus-visible */\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline: var(--saltRadioButton-outline, var(--salt-focused-outline));\n  outline-offset: var(--salt-spacing-fixed-100);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n  clip-path: unset;\n}\n\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon {\n  outline-color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  color: var(--salt-status-warning-foreground-decorative);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=RadioButton.css.js.map

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  --radioButton-size: var(--salt-size-selectable);\n  width: var(--radioButton-size);\n  height: var(--radioButton-size);\n  min-width: var(--radioButton-size);\n  min-height: var(--radioButton-size);\n  border-radius: 50%;\n  position: relative;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButtonIcon-checked,\n.saltRadioButton:hover .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltRadioButtonIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
+var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  --radioButton-size: var(--salt-size-selectable);\n  width: var(--radioButton-size);\n  height: var(--radioButton-size);\n  min-width: var(--radioButton-size);\n  min-height: var(--radioButton-size);\n  border-radius: 50%;\n  position: relative;\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  --saltIcon-size: 100%;\n  display: flex;\n  /* Using overflow:hidden here causes a thin white line */\n  clip-path: border-box;\n  box-sizing: border-box;\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltRadioButtonIcon-checked,\n.saltRadioButton:hover .saltRadioButtonIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  background: var(--salt-container-primary-background-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n}\n\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltRadioButtonIcon-error,\n.saltRadioButton:hover .saltRadioButtonIcon-error {\n  color: var(--salt-status-error-foreground-decorative);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground-decorative);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n  color: var(--salt-status-warning-foreground-decorative);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground-decorative);\n}\n\n.saltRadioButtonIcon-readOnly,\n.saltRadioButton:hover .saltRadioButtonIcon-readOnly,\n.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  border-style: var(--salt-borderStyle-dashed);\n  color: var(--salt-content-primary-foreground);\n}\n\n.saltRadioButtonIcon > svg {\n  position: absolute;\n  /* Ensure a gap doesn't appear when device scaling is used */\n  transform: scale(1.01);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=RadioButtonIcon.css.js.map

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

@@ -73,7 +73,7 @@ const createThemedChildren = ({
           themeNamesString,
           `salt-density-${density}`
         ),
-        // @ts-ignore
+        // @ts-expect-error
         "data-mode": mode,
         ...themeNext ? themeNextProps : {}
       });
@@ -249,7 +249,7 @@ function SaltProviderNext({
 }
 const UNSTABLE_SaltProviderNext = SaltProviderNext;
 const useTheme = () => {
-  const { window, ...contextWithoutWindow } = React.useContext(ThemeContext);
+  const { window: _window, ...contextWithoutWindow } = React.useContext(ThemeContext);
   return contextWithoutWindow;
 };
 function useDensity(density) {

package/dist-cjs/salt-provider/SaltProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import {\n  StyleInjectionProvider,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow, type WindowContextType } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n  BreakpointProvider,\n  type Breakpoints,\n  DEFAULT_BREAKPOINTS,\n  useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport { ViewportProvider } from \"../viewport\";\nimport saltProviderCss from \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: ActionFont = \"Open Sans\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  corner: Corner;\n  /** @deprecated use `corner`*/\n  UNSTABLE_corner: Corner;\n  headingFont: HeadingFont;\n  /** @deprecated use `headingFont` */\n  UNSTABLE_headingFont: HeadingFont;\n  accent: Accent;\n  /** @deprecated use `accent` */\n  UNSTABLE_accent: Accent;\n  actionFont: ActionFont;\n  /** @deprecated use `actionFont` */\n  UNSTABLE_actionFont: ActionFont;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  corner: DEFAULT_CORNER,\n  UNSTABLE_corner: DEFAULT_CORNER,\n  headingFont: DEFAULT_HEADING_FONT,\n  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n  accent: DEFAULT_ACCENT,\n  UNSTABLE_accent: DEFAULT_ACCENT,\n  actionFont: DEFAULT_ACTION_FONT,\n  UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (\n  themeName: ThemeName,\n  themeNext?: boolean,\n): ThemeName => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT)\n      : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);\n  }\n  return themeName === DEFAULT_THEME_NAME\n    ? themeName\n    : clsx(DEFAULT_THEME_NAME, themeName);\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  SaltProviderNextAdditionalProps) => {\n  const themeNamesString = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  }\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          themeNamesString,\n          `salt-density-${density}`,\n        ),\n        // @ts-ignore\n        \"data-mode\": mode,\n        ...(themeNext ? 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  return (\n    <div\n      className={clsx(\n        \"salt-provider\",\n        themeNamesString,\n        `salt-density-${density}`,\n      )}\n      data-mode={mode}\n      {...(themeNext ? themeNextProps : {})}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\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?: TargetElement;\n  /**\n   * Either \"high\", \"medium\", \"low\" or \"touch\".\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   * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.\n   * Determines breakpoints used in responsive calculation for layout components.\n   */\n  breakpoints?: Breakpoints;\n  /**\n   * A boolean. Enables dynamic style injection for each component.\n   *\n   * If `false`, you'll need to include component CSS yourself.\n   *\n   * @default true\n   */\n  enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n  themeNext,\n  corner: cornerProp,\n  headingFont: headingFontProp,\n  accent: accentProp,\n  actionFont: actionFontProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    corner: inheritedCorner,\n    headingFont: inheritedHeadingFont,\n    accent: inheritedAccent,\n    actionFont: inheritedActionFont,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n  const headingFont =\n    headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n  const actionFont =\n    actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      corner: corner,\n      headingFont: headingFont,\n      accent: accent,\n      actionFont: actionFont,\n      // Backward compatibility\n      UNSTABLE_corner: corner,\n      UNSTABLE_headingFont: headingFont,\n      UNSTABLE_accent: accent,\n      UNSTABLE_actionFont: actionFont,\n    }),\n    [\n      themeName,\n      mode,\n      targetWindow,\n      themeNext,\n      corner,\n      headingFont,\n      accent,\n      actionFont,\n    ],\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n    headingFont,\n    accent,\n    actionFont,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNamesString = getThemeNames(themeName, themeNext);\n    const themeNames = themeNamesString.split(\" \");\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow !== targetWindow) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`,\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n          targetWindow.document.documentElement.dataset.headingFont =\n            headingFont;\n          targetWindow.document.documentElement.dataset.accent = accent;\n          targetWindow.document.documentElement.dataset.actionFont = actionFont;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\",\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`,\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n          delete targetWindow.document.documentElement.dataset.headingFont;\n          delete targetWindow.document.documentElement.dataset.accent;\n          delete targetWindow.document.documentElement.dataset.actionFont;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n          <BreakpointContext.Provider value={breakpoints}>\n            <ViewportProvider>{themedChildren}</ViewportProvider>\n          </BreakpointContext.Provider>\n        </BreakpointProvider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  }\n  return saltProvider;\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface SaltProviderNextAdditionalProps {\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}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n  SaltProviderNextAdditionalProps;\n/** @deprecated use `SaltProviderNextProps` */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\nexport function SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n/** @deprecated use `SaltProviderNext` */\nexport const UNSTABLE_SaltProviderNext = SaltProviderNext;\n\nexport const useTheme = (): ThemeContextProps => {\n  const { window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","clsx","isValidElement","cloneElement","jsx","useContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useIsomorphicLayoutEffect","useMatchedBreakpoints","BreakpointProvider","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":";;;;;;;;;;;;;;;AAoCO,MAAM,eAAkB,GAAA;AAE/B,MAAM,kBAAqB,GAAA,YAAA;AAC3B,MAAM,uBAA0B,GAAA,iBAAA;AAEhC,MAAM,YAAe,GAAA,OAAA;AACrB,MAAM,cAAyB,GAAA,OAAA;AAC/B,MAAM,oBAAoC,GAAA,WAAA;AAC1C,MAAM,cAAyB,GAAA,MAAA;AAC/B,MAAM,mBAAkC,GAAA,WAAA;AAqB3B,MAAA,cAAA,GAAiBA,oBAAuB,eAAe;AAE7D,MAAM,eAAeA,mBAAiC,CAAA;AAAA,EAC3D,KAAO,EAAA,EAAA;AAAA,EACP,IAAM,EAAA,YAAA;AAAA,EACN,SAAW,EAAA,KAAA;AAAA,EACX,MAAQ,EAAA,cAAA;AAAA,EACR,eAAiB,EAAA,cAAA;AAAA,EACjB,WAAa,EAAA,oBAAA;AAAA,EACb,oBAAsB,EAAA,oBAAA;AAAA,EACtB,MAAQ,EAAA,cAAA;AAAA,EACR,eAAiB,EAAA,cAAA;AAAA,EACjB,UAAY,EAAA,mBAAA;AAAA,EACZ,mBAAqB,EAAA;AACvB,CAAC;AAEY,MAAA,iBAAA,GACXA,oBAA2BC,+BAAmB;AAKhD,MAAM,aAAA,GAAgB,CACpB,SAAA,EACA,SACc,KAAA;AACd,EAAA,IAAI,SAAW,EAAA;AACb,IAAO,OAAA,SAAA,KAAc,qBACjBC,SAAK,CAAA,kBAAA,EAAoB,uBAAuB,CAChD,GAAAA,SAAA,CAAK,kBAAoB,EAAA,uBAAA,EAAyB,SAAS,CAAA;AAAA;AAEjE,EAAA,OAAO,SAAc,KAAA,kBAAA,GACjB,SACA,GAAAA,SAAA,CAAK,oBAAoB,SAAS,CAAA;AACxC,CAAA;AAMA,MAAM,uBAAuB,CAAC;AAAA,EAC5B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAOsC,KAAA;AA5HtC,EAAA,IAAA,EAAA;AA6HE,EAAM,MAAA,gBAAA,GAAmB,aAAc,CAAA,SAAA,EAAW,SAAS,CAAA;AAC3D,EAAA,MAAM,cAAiB,GAAA;AAAA,IACrB,aAAe,EAAA,MAAA;AAAA,IACf,mBAAqB,EAAA,WAAA;AAAA,IACrB,aAAe,EAAA,MAAA;AAAA,IACf,kBAAoB,EAAA;AAAA,GACtB;AACA,EAAA,IAAI,mBAAmB,MAAQ,EAAA;AAC7B,IAAO,OAAA,QAAA;AAAA;AAET,EAAA,IAAI,mBAAmB,OAAS,EAAA;AAC9B,IAAI,IAAAC,oBAAA,CAA4C,QAAQ,CAAG,EAAA;AACzD,MAAA,OAAOC,mBAAa,QAAU,EAAA;AAAA,QAC5B,SAAW,EAAAF,SAAA;AAAA,UACT,CAAA,EAAA,GAAA,QAAA,CAAS,UAAT,IAAgB,GAAA,MAAA,GAAA,EAAA,CAAA,SAAA;AAAA,UAChB,gBAAA;AAAA,UACA,gBAAgB,OAAO,CAAA;AAAA,SACzB;AAAA;AAAA,QAEA,WAAa,EAAA,IAAA;AAAA,QACb,GAAI,SAAY,GAAA,cAAA,GAAiB;AAAC,OACnC,CAAA;AAAA;AAEH,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA;AAAA;AAAA,iDAAA;AAAA,KAGF;AACA,IAAO,OAAA,QAAA;AAAA;AAET,EACE,uBAAAG,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAH,SAAA;AAAA,QACT,eAAA;AAAA,QACA,gBAAA;AAAA,QACA,gBAAgB,OAAO,CAAA;AAAA,OACzB;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACV,GAAI,SAAY,GAAA,cAAA,GAAiB,EAAC;AAAA,MAElC;AAAA;AAAA,GACH;AAEJ,CAAA;AAiEA,SAAS,oBAAqB,CAAA;AAAA,EAC5B,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,OAAS,EAAA,WAAA;AAAA,EACT,KAAO,EAAA,SAAA;AAAA,EACP,IAAM,EAAA,QAAA;AAAA,EACN,WAAa,EAAA,eAAA;AAAA,EACb,SAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,WAAa,EAAA,eAAA;AAAA,EACb,MAAQ,EAAA,UAAA;AAAA,EACR,UAAY,EAAA;AACd,CAGG,EAAA;AACD,EAAM,MAAA,gBAAA,GAAmBI,iBAAW,cAAc,CAAA;AAClD,EAAM,MAAA;AAAA,IACJ,KAAO,EAAA,cAAA;AAAA,IACP,IAAM,EAAA,aAAA;AAAA,IACN,MAAQ,EAAA,eAAA;AAAA,IACR,MAAQ,EAAA,eAAA;AAAA,IACR,WAAa,EAAA,oBAAA;AAAA,IACb,MAAQ,EAAA,eAAA;AAAA,IACR,UAAY,EAAA;AAAA,GACd,GAAIA,iBAAW,YAAY,CAAA;AAE3B,EAAM,MAAA,cAAA,GAAiB,cAAmB,KAAA,MAAA,IAAa,cAAmB,KAAA,EAAA;AAC1E,EAAM,MAAA,OAAA,GAAU,eAAe,gBAAoB,IAAA,eAAA;AACnD,EAAA,MAAM,SACJ,GAAA,SAAA,KAAc,cAAmB,KAAA,EAAA,GAAK,kBAAqB,GAAA,cAAA,CAAA;AAC7D,EAAA,MAAM,OAAO,QAAY,IAAA,aAAA;AACzB,EAAA,MAAM,cAAc,eAAmB,IAAAL,+BAAA;AACvC,EAAM,MAAA,MAAA,GAAS,cAAc,eAAmB,IAAA,cAAA;AAChD,EAAM,MAAA,WAAA,GACJ,mBAAmB,oBAAwB,IAAA,oBAAA;AAC7C,EAAM,MAAA,MAAA,GAAS,cAAc,eAAmB,IAAA,cAAA;AAChD,EAAM,MAAA,UAAA,GACJ,kBAAkB,mBAAuB,IAAA,mBAAA;AAE3C,EAAM,MAAA,cAAA,GACJ,kBAAuB,KAAA,cAAA,GAAiB,MAAS,GAAA,OAAA,CAAA;AAEnD,EAAA,MAAM,eAAeM,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,eAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,iBAAoB,GAAAC,aAAA;AAAA,IACxB,OAAO;AAAA,MACL,KAAO,EAAA,SAAA;AAAA,MACP,IAAA;AAAA,MACA,MAAQ,EAAA,YAAA;AAAA,MACR,SAAA,EAAW,QAAQ,SAAS,CAAA;AAAA,MAC5B,MAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA;AAAA,MAEA,eAAiB,EAAA,MAAA;AAAA,MACjB,oBAAsB,EAAA,WAAA;AAAA,MACtB,eAAiB,EAAA,MAAA;AAAA,MACjB,mBAAqB,EAAA;AAAA,KACvB,CAAA;AAAA,IACA;AAAA,MACE,SAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,MAAM,iBAAiB,oBAAqB,CAAA;AAAA,IAC1C,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAM,MAAA,gBAAA,GAAmB,aAAc,CAAA,SAAA,EAAW,SAAS,CAAA;AAC3D,IAAM,MAAA,UAAA,GAAa,gBAAiB,CAAA,KAAA,CAAM,GAAG,CAAA;AAE7C,IAAI,IAAA,cAAA,KAAmB,UAAU,YAAc,EAAA;AAC7C,MAAA,IAAI,oBAAoB,YAAc,EAAA;AAEpC,QAAa,YAAA,CAAA,QAAA,CAAS,gBAAgB,SAAU,CAAA,GAAA;AAAA,UAC9C,GAAG,UAAA;AAAA,UACH,gBAAgB,OAAO,CAAA;AAAA,SACzB;AACA,QAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,IAAO,GAAA,IAAA;AACrD,QAAA,IAAI,SAAW,EAAA;AACb,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,MAAS,GAAA,MAAA;AACvD,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,WAC5C,GAAA,WAAA;AACF,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,MAAS,GAAA,MAAA;AACvD,UAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,UAAa,GAAA,UAAA;AAAA;AAC7D,OACK,MAAA;AACL,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF;AAEF,IAAA,OAAO,MAAM;AACX,MAAI,IAAA,cAAA,KAAmB,UAAU,YAAc,EAAA;AAE7C,QAAa,YAAA,CAAA,QAAA,CAAS,gBAAgB,SAAU,CAAA,MAAA;AAAA,UAC9C,GAAG,UAAA;AAAA,UACH,gBAAgB,OAAO,CAAA;AAAA,SACzB;AACA,QAAa,YAAA,CAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,CAAQ,IAAO,GAAA,MAAA;AACrD,QAAA,IAAI,SAAW,EAAA;AACb,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,MAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,WAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,MAAA;AACrD,UAAO,OAAA,YAAA,CAAa,QAAS,CAAA,eAAA,CAAgB,OAAQ,CAAA,UAAA;AAAA;AACvD;AACF,KACF;AAAA,GACC,EAAA;AAAA,IACD,cAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,kBAAA,GAAqBC,yCAAsB,WAAW,CAAA;AAE5D,EAAA,MAAM,YACJ,mBAAAP,cAAA,CAAC,cAAe,CAAA,QAAA,EAAf,EAAwB,KAAA,EAAO,OAC9B,EAAA,QAAA,kBAAAA,cAAA,CAAC,YAAa,CAAA,QAAA,EAAb,EAAsB,KAAA,EAAO,iBAC5B,EAAA,QAAA,kBAAAA,cAAA,CAACQ,qCAAmB,EAAA,EAAA,kBAAA,EAClB,QAAC,kBAAAR,cAAA,CAAA,iBAAA,CAAkB,QAAlB,EAAA,EAA2B,KAAO,EAAA,WAAA,EACjC,QAAC,kBAAAA,cAAA,CAAAS,iCAAA,EAAA,EAAkB,QAAe,EAAA,cAAA,EAAA,CAAA,EACpC,CACF,EAAA,CAAA,EACF,CACF,EAAA,CAAA;AAGF,EAAA,IAAI,cAAgB,EAAA;AAClB,IAAO,uBAAAT,cAAA,CAACU,+CAAuB,QAAa,EAAA,YAAA,EAAA,CAAA;AAAA;AAE9C,EAAO,OAAA,YAAA;AACT;AAEO,SAAS,YAAa,CAAA;AAAA,EAC3B,oBAAA;AAAA,EACA,GAAG;AACL,CAAsB,EAAA;AACpB,EACE,uBAAAV,cAAA,CAACW,iCAAuB,KAAO,EAAA,oBAAA,EAC7B,yCAAC,oBAAsB,EAAA,EAAA,GAAG,WAAW,CACvC,EAAA,CAAA;AAEJ;AAkCO,SAAS,gBAAiB,CAAA;AAAA,EAC/B,oBAAA;AAAA,EACA,GAAG;AACL,CAA0B,EAAA;AACxB,EACE,uBAAAX,cAAA,CAACW,6BAAuB,EAAA,EAAA,KAAA,EAAO,oBAE7B,EAAA,QAAA,kBAAAX,cAAA,CAAC,wBAAsB,GAAG,SAAA,EAAW,SAAW,EAAA,IAAA,EAAM,CACxD,EAAA,CAAA;AAEJ;AAEO,MAAM,yBAA4B,GAAA;AAElC,MAAM,WAAW,MAAyB;AAC/C,EAAA,MAAM,EAAE,MAAQ,EAAA,GAAG,oBAAqB,EAAA,GAAIC,iBAAW,YAAY,CAAA;AAEnE,EAAO,OAAA,oBAAA;AACT;AAKO,SAAS,WAAW,OAA4B,EAAA;AACrD,EAAM,MAAA,kBAAA,GAAqBA,iBAAW,cAAc,CAAA;AACpD,EAAA,OAAO,WAAW,kBAAsB,IAAA,eAAA;AAC1C;AAEO,MAAM,iBAAiB,MAAmB;AAC/C,EAAA,OAAOA,iBAAW,iBAAiB,CAAA;AACrC;;;;;;;;;;;;;"}
+{"version":3,"file":"SaltProvider.js","sources":["../src/salt-provider/SaltProvider.tsx"],"sourcesContent":["import {\n  StyleInjectionProvider,\n  useComponentCssInjection,\n} from \"@salt-ds/styles\";\nimport { useWindow, type WindowContextType } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useMemo,\n} from \"react\";\nimport { AriaAnnouncerProvider } from \"../aria-announcer\";\nimport {\n  BreakpointProvider,\n  type Breakpoints,\n  DEFAULT_BREAKPOINTS,\n  useMatchedBreakpoints,\n} from \"../breakpoints\";\nimport type {\n  Accent,\n  ActionFont,\n  Corner,\n  Density,\n  HeadingFont,\n  Mode,\n  ThemeName,\n} from \"../theme\";\nimport { useIsomorphicLayoutEffect } from \"../utils/useIsomorphicLayoutEffect\";\nimport { ViewportProvider } from \"../viewport\";\nimport saltProviderCss from \"./SaltProvider.css\";\n\nexport const DEFAULT_DENSITY = \"medium\";\n\nconst DEFAULT_THEME_NAME = \"salt-theme\";\nconst DEFAULT_THEME_NAME_NEXT = \"salt-theme-next\";\n\nconst DEFAULT_MODE = \"light\";\nconst DEFAULT_CORNER: Corner = \"sharp\";\nconst DEFAULT_HEADING_FONT: HeadingFont = \"Open Sans\";\nconst DEFAULT_ACCENT: Accent = \"blue\";\nconst DEFAULT_ACTION_FONT: ActionFont = \"Open Sans\";\nexport interface ThemeContextProps {\n  theme: ThemeName;\n  mode: Mode;\n  window?: WindowContextType;\n  /** Only available when using SaltProviderNext. */\n  themeNext: boolean;\n  corner: Corner;\n  /** @deprecated use `corner`*/\n  UNSTABLE_corner: Corner;\n  headingFont: HeadingFont;\n  /** @deprecated use `headingFont` */\n  UNSTABLE_headingFont: HeadingFont;\n  accent: Accent;\n  /** @deprecated use `accent` */\n  UNSTABLE_accent: Accent;\n  actionFont: ActionFont;\n  /** @deprecated use `actionFont` */\n  UNSTABLE_actionFont: ActionFont;\n}\n\nexport const DensityContext = createContext<Density>(DEFAULT_DENSITY);\n\nexport const ThemeContext = createContext<ThemeContextProps>({\n  theme: \"\",\n  mode: DEFAULT_MODE,\n  themeNext: false,\n  corner: DEFAULT_CORNER,\n  UNSTABLE_corner: DEFAULT_CORNER,\n  headingFont: DEFAULT_HEADING_FONT,\n  UNSTABLE_headingFont: DEFAULT_HEADING_FONT,\n  accent: DEFAULT_ACCENT,\n  UNSTABLE_accent: DEFAULT_ACCENT,\n  actionFont: DEFAULT_ACTION_FONT,\n  UNSTABLE_actionFont: DEFAULT_ACTION_FONT,\n});\n\nexport const BreakpointContext =\n  createContext<Breakpoints>(DEFAULT_BREAKPOINTS);\n\n/**\n * We're relying `DEFAULT_THEME_NAME` to determine whether the provider is a root.\n */\nconst getThemeNames = (\n  themeName: ThemeName,\n  themeNext?: boolean,\n): ThemeName => {\n  if (themeNext) {\n    return themeName === DEFAULT_THEME_NAME\n      ? clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT)\n      : clsx(DEFAULT_THEME_NAME, DEFAULT_THEME_NAME_NEXT, themeName);\n  }\n  return themeName === DEFAULT_THEME_NAME\n    ? themeName\n    : clsx(DEFAULT_THEME_NAME, themeName);\n};\n\ninterface ThemeNextProps {\n  themeNext?: boolean;\n}\n\nconst createThemedChildren = ({\n  children,\n  themeName,\n  density,\n  mode,\n  applyClassesTo,\n  themeNext,\n  corner,\n  headingFont,\n  accent,\n  actionFont,\n}: {\n  children: ReactNode;\n  themeName: ThemeName;\n  density: Density;\n  mode: Mode;\n  applyClassesTo?: TargetElement;\n} & ThemeNextProps &\n  SaltProviderNextAdditionalProps) => {\n  const themeNamesString = getThemeNames(themeName, themeNext);\n  const themeNextProps = {\n    \"data-corner\": corner,\n    \"data-heading-font\": headingFont,\n    \"data-accent\": accent,\n    \"data-action-font\": actionFont,\n  };\n  if (applyClassesTo === \"root\") {\n    return children;\n  }\n  if (applyClassesTo === \"child\") {\n    if (isValidElement<HTMLAttributes<HTMLElement>>(children)) {\n      return cloneElement(children, {\n        className: clsx(\n          children.props?.className,\n          themeNamesString,\n          `salt-density-${density}`,\n        ),\n        // @ts-expect-error\n        \"data-mode\": mode,\n        ...(themeNext ? 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  return (\n    <div\n      className={clsx(\n        \"salt-provider\",\n        themeNamesString,\n        `salt-density-${density}`,\n      )}\n      data-mode={mode}\n      {...(themeNext ? themeNextProps : {})}\n    >\n      {children}\n    </div>\n  );\n};\n\ntype TargetElement = \"root\" | \"scope\" | \"child\";\n\ninterface SaltProviderBaseProps {\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?: TargetElement;\n  /**\n   * Either \"high\", \"medium\", \"low\" or \"touch\".\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   * Shape of `{ xs: number; sm: number; md: number; lg: number; xl: number; }`.\n   * Determines breakpoints used in responsive calculation for layout components.\n   */\n  breakpoints?: Breakpoints;\n  /**\n   * A boolean. Enables dynamic style injection for each component.\n   *\n   * If `false`, you'll need to include component CSS yourself.\n   *\n   * @default true\n   */\n  enableStyleInjection?: boolean;\n}\n\ninterface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps {\n  children: ReactElement;\n  applyClassesTo: \"child\";\n}\n\ninterface SaltProviderThatInjectsThemeElement extends SaltProviderBaseProps {\n  children: ReactNode;\n}\n\ninterface SaltProviderThatClassesToRoot\n  extends SaltProviderThatInjectsThemeElement {\n  applyClassesTo: \"root\";\n}\n\ntype SaltProviderProps =\n  | SaltProviderThatAppliesClassesToChild\n  | SaltProviderThatInjectsThemeElement\n  | SaltProviderThatClassesToRoot;\n\nfunction InternalSaltProvider({\n  applyClassesTo: applyClassesToProp,\n  children,\n  density: densityProp,\n  theme: themeProp,\n  mode: modeProp,\n  breakpoints: breakpointsProp,\n  themeNext,\n  corner: cornerProp,\n  headingFont: headingFontProp,\n  accent: accentProp,\n  actionFont: actionFontProp,\n}: Omit<\n  SaltProviderProps & ThemeNextProps & SaltProviderNextProps,\n  \"enableStyleInjection\"\n>) {\n  const inheritedDensity = useContext(DensityContext);\n  const {\n    theme: inheritedTheme,\n    mode: inheritedMode,\n    window: inheritedWindow,\n    corner: inheritedCorner,\n    headingFont: inheritedHeadingFont,\n    accent: inheritedAccent,\n    actionFont: inheritedActionFont,\n  } = useContext(ThemeContext);\n\n  const isRootProvider = inheritedTheme === undefined || inheritedTheme === \"\";\n  const density = densityProp ?? inheritedDensity ?? DEFAULT_DENSITY;\n  const themeName =\n    themeProp ?? (inheritedTheme === \"\" ? DEFAULT_THEME_NAME : inheritedTheme);\n  const mode = modeProp ?? inheritedMode;\n  const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;\n  const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;\n  const headingFont =\n    headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;\n  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;\n  const actionFont =\n    actionFontProp ?? inheritedActionFont ?? DEFAULT_ACTION_FONT;\n\n  const applyClassesTo =\n    applyClassesToProp ?? (isRootProvider ? \"root\" : \"scope\");\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-provider\",\n    css: saltProviderCss,\n    window: targetWindow,\n  });\n\n  const themeContextValue = useMemo(\n    () => ({\n      theme: themeName,\n      mode,\n      window: targetWindow,\n      themeNext: Boolean(themeNext),\n      corner: corner,\n      headingFont: headingFont,\n      accent: accent,\n      actionFont: actionFont,\n      // Backward compatibility\n      UNSTABLE_corner: corner,\n      UNSTABLE_headingFont: headingFont,\n      UNSTABLE_accent: accent,\n      UNSTABLE_actionFont: actionFont,\n    }),\n    [\n      themeName,\n      mode,\n      targetWindow,\n      themeNext,\n      corner,\n      headingFont,\n      accent,\n      actionFont,\n    ],\n  );\n\n  const themedChildren = createThemedChildren({\n    children,\n    themeName,\n    density,\n    mode,\n    applyClassesTo,\n    themeNext,\n    corner: corner,\n    headingFont,\n    accent,\n    actionFont,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    const themeNamesString = getThemeNames(themeName, themeNext);\n    const themeNames = themeNamesString.split(\" \");\n\n    if (applyClassesTo === \"root\" && targetWindow) {\n      if (inheritedWindow !== targetWindow) {\n        // add the styles we want to apply\n        targetWindow.document.documentElement.classList.add(\n          ...themeNames,\n          `salt-density-${density}`,\n        );\n        targetWindow.document.documentElement.dataset.mode = mode;\n        if (themeNext) {\n          targetWindow.document.documentElement.dataset.corner = corner;\n          targetWindow.document.documentElement.dataset.headingFont =\n            headingFont;\n          targetWindow.document.documentElement.dataset.accent = accent;\n          targetWindow.document.documentElement.dataset.actionFont = actionFont;\n        }\n      } else {\n        console.warn(\n          \"SaltProvider can only apply CSS classes to the root if it is the root level SaltProvider.\",\n        );\n      }\n    }\n    return () => {\n      if (applyClassesTo === \"root\" && targetWindow) {\n        // When unmounting/remounting, remove the applied styles from the root\n        targetWindow.document.documentElement.classList.remove(\n          ...themeNames,\n          `salt-density-${density}`,\n        );\n        targetWindow.document.documentElement.dataset.mode = undefined;\n        if (themeNext) {\n          delete targetWindow.document.documentElement.dataset.corner;\n          delete targetWindow.document.documentElement.dataset.headingFont;\n          delete targetWindow.document.documentElement.dataset.accent;\n          delete targetWindow.document.documentElement.dataset.actionFont;\n        }\n      }\n    };\n  }, [\n    applyClassesTo,\n    density,\n    mode,\n    themeName,\n    targetWindow,\n    inheritedWindow,\n    themeNext,\n    corner,\n    headingFont,\n    accent,\n    actionFont,\n  ]);\n\n  const matchedBreakpoints = useMatchedBreakpoints(breakpoints);\n\n  const saltProvider = (\n    <DensityContext.Provider value={density}>\n      <ThemeContext.Provider value={themeContextValue}>\n        <BreakpointProvider matchedBreakpoints={matchedBreakpoints}>\n          <BreakpointContext.Provider value={breakpoints}>\n            <ViewportProvider>{themedChildren}</ViewportProvider>\n          </BreakpointContext.Provider>\n        </BreakpointProvider>\n      </ThemeContext.Provider>\n    </DensityContext.Provider>\n  );\n\n  if (isRootProvider) {\n    return <AriaAnnouncerProvider>{saltProvider}</AriaAnnouncerProvider>;\n  }\n  return saltProvider;\n}\n\nexport function SaltProvider({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      <InternalSaltProvider {...restProps} />\n    </StyleInjectionProvider>\n  );\n}\n\ninterface SaltProviderNextAdditionalProps {\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}\n\nexport type SaltProviderNextProps = SaltProviderProps &\n  SaltProviderNextAdditionalProps;\n/** @deprecated use `SaltProviderNextProps` */\nexport type UNSTABLE_SaltProviderNextProps = SaltProviderNextProps;\n\nexport function SaltProviderNext({\n  enableStyleInjection,\n  ...restProps\n}: SaltProviderNextProps) {\n  return (\n    <StyleInjectionProvider value={enableStyleInjection}>\n      {/* Leveraging InternalSaltProvider being not exported, so we can pass more props than previously supported */}\n      <InternalSaltProvider {...restProps} themeNext={true} />\n    </StyleInjectionProvider>\n  );\n}\n/** @deprecated use `SaltProviderNext` */\nexport const UNSTABLE_SaltProviderNext = SaltProviderNext;\n\nexport const useTheme = (): ThemeContextProps => {\n  const { window: _window, ...contextWithoutWindow } = useContext(ThemeContext);\n\n  return contextWithoutWindow;\n};\n\n/**\n * `useDensity` merges density value from `DensityContext` with the one from component's props.\n */\nexport function useDensity(density?: Density): Density {\n  const densityFromContext = useContext(DensityContext);\n  return density ?? densityFromContext ?? DEFAULT_DENSITY;\n}\n\nexport const useBreakpoints = (): Breakpoints => {\n  return useContext(BreakpointContext);\n};\n"],"names":["createContext","DEFAULT_BREAKPOINTS","clsx","isValidElement","cloneElement","jsx","useContext","useWindow","useComponentCssInjection","saltProviderCss","useMemo","useIsomorphicLayoutEffect","useMatchedBreakpoints","BreakpointProvider","ViewportProvider","AriaAnnouncerProvider","StyleInjectionProvider"],"mappings":"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"}

package/dist-cjs/spinner/Spinner.js

@@ -30,7 +30,6 @@ const Spinner = React.forwardRef(
     announcerTimeout = 2e4,
     completionAnnouncement = `finished ${ariaLabel}`,
     disableAnnouncer,
-    role = "img",
     className,
     size = "medium",
     id: idProp,
@@ -49,9 +48,9 @@ const Spinner = React.forwardRef(
     React.useEffect(() => {
       if (disableAnnouncer) return;
       announce(ariaLabel);
-      const startTime = (/* @__PURE__ */ new Date()).getTime();
+      const startTime = Date.now();
       const interval = announcerInterval > 0 && setInterval(() => {
-        if ((/* @__PURE__ */ new Date()).getTime() - startTime > announcerTimeout) {
+        if (Date.now() - startTime > announcerTimeout) {
           announce(
             `${ariaLabel} is still in progress, but will no longer announce.`
           );
@@ -81,7 +80,7 @@ const Spinner = React.forwardRef(
         "aria-label": ariaLabel,
         className: clsx.clsx(withBaseName(), withBaseName(size), className),
         ref,
-        role,
+        role: "img",
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(SpinnerSVG.SpinnerSVG, { size, density, id })
       }

package/dist-cjs/spinner/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useDensity } from \"../salt-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      role = \"img\",\n      className,\n      size = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const density = useDensity();\n    size = handleSize(size);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = new Date().getTime();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (new Date().getTime() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role={role}\n        {...rest}\n      >\n        <SpinnerSVG size={size} density={density} id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useWindow","useComponentCssInjection","spinnerCss","useAriaAnnouncer","useDensity","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;AAiBO,MAAM,iBAAoB,GAAA;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAa,GAAA,CAAC,IAClB,KAAA,IAAA,KAAS,YAAY,QAAW,GAAA,IAAA;AAElC,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAqCxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,IAAO,GAAA,KAAA;AAAA,IACP,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA;AAEtC,IAAA,MAAM,UAAUC,uBAAW,EAAA;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAkB,EAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAA,MAAM,SAAY,GAAA,iBAAA,IAAI,IAAK,EAAA,EAAE,OAAQ,EAAA;AAErC,MAAA,MAAM,QACJ,GAAA,iBAAA,GAAoB,CACpB,IAAA,WAAA,CAAY,MAAM;AAChB,QAAA,IAAA,qBAAQ,IAAK,EAAA,EAAE,OAAQ,EAAA,GAAI,YAAY,gBAAkB,EAAA;AAEvD,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA;AAEF,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,SACjB,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAkB,EAAA;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA;AACjC,OACF;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA,EAAW,IAAY,EAAA,OAAA,EAAkB,EAAQ,EAAA;AAAA;AAAA,KACpD;AAAA;AAGN;;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../src/spinner/Spinner.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useDensity } from \"../salt-provider\";\nimport { makePrefixer, useId } from \"../utils\";\nimport spinnerCss from \"./Spinner.css\";\nimport { SpinnerSVG } from \"./svgSpinners/SpinnerSVG\";\n\n/**\n * Spinner component, provides an indeterminate loading indicator\n *\n * @example\n * <Spinner size=\"small\" | \"medium\" | \"large\" />\n */\n\nexport const SpinnerSizeValues = [\n  \"default\",\n  \"large\",\n  \"small\",\n  \"medium\",\n] as const;\n\ntype SpinnerSize = (typeof SpinnerSizeValues)[number];\n\nexport type SpinnerSVGSize = Exclude<SpinnerSize, \"default\">;\n\nconst handleSize = (size: SpinnerSize): SpinnerSVGSize =>\n  size === \"default\" ? \"medium\" : size;\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\nexport interface SpinnerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Determines the interval on which the component will continue to announce the aria-label. Defaults to 5000ms (5s)\n   */\n  announcerInterval?: number;\n  /**\n   *  * Determines the interval after which the component will stop announcing the aria-label. Defaults to 20000ms (20s)\n   */\n  announcerTimeout?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * Determines the message to be announced by the component when it unmounts. Set to null if not needed.\n   */\n  completionAnnouncement?: string | null;\n  /**\n   * If true, built in aria announcer will be inactive\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * The prop for the role attribute of the component\n   */\n  role?: string;\n  /**\n   * Determines the size of the spinner. Must be one of: 'default', 'large', 'small', 'medium'.\n   */\n  size?: SpinnerSize;\n  /**\n   * The ids of the SvgSpinner components\n   */\n  id?: string;\n}\n\nexport const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(\n  function Spinner(\n    {\n      \"aria-label\": ariaLabel = \"loading\",\n      announcerInterval = 5000,\n      announcerTimeout = 20000,\n      completionAnnouncement = `finished ${ariaLabel}`,\n      disableAnnouncer,\n      className,\n      size = \"medium\",\n      id: idProp,\n      ...rest\n    },\n    ref,\n  ) {\n    const id = useId(idProp);\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-spinner\",\n      css: spinnerCss,\n      window: targetWindow,\n    });\n\n    const { announce } = useAriaAnnouncer();\n\n    const density = useDensity();\n    size = handleSize(size);\n\n    useEffect(() => {\n      if (disableAnnouncer) return;\n\n      announce(ariaLabel);\n\n      const startTime = Date.now();\n\n      const interval =\n        announcerInterval > 0 &&\n        setInterval(() => {\n          if (Date.now() - startTime > announcerTimeout) {\n            // The announcer will stop after `announcerTimeout` time\n            announce(\n              `${ariaLabel} is still in progress, but will no longer announce.`,\n            );\n            interval && clearInterval(interval);\n            return;\n          }\n          announce(ariaLabel);\n        }, announcerInterval);\n\n      return () => {\n        if (disableAnnouncer) return;\n\n        interval && clearInterval(interval);\n        if (completionAnnouncement) {\n          announce(completionAnnouncement);\n        }\n      };\n    }, [\n      announce,\n      announcerInterval,\n      announcerTimeout,\n      ariaLabel,\n      completionAnnouncement,\n      disableAnnouncer,\n    ]);\n\n    return (\n      <div\n        aria-label={ariaLabel}\n        className={clsx(withBaseName(), withBaseName(size), className)}\n        ref={ref}\n        role=\"img\"\n        {...rest}\n      >\n        <SpinnerSVG size={size} density={density} id={id} />\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","Spinner","useId","useWindow","useComponentCssInjection","spinnerCss","useAriaAnnouncer","useDensity","useEffect","jsx","clsx","SpinnerSVG"],"mappings":";;;;;;;;;;;;;;;;;AAiBO,MAAM,iBAAoB,GAAA;AAAA,EAC/B,SAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF;AAMA,MAAM,UAAa,GAAA,CAAC,IAClB,KAAA,IAAA,KAAS,YAAY,QAAW,GAAA,IAAA;AAElC,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA;AAqCxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QACP,CAAA;AAAA,IACE,cAAc,SAAY,GAAA,SAAA;AAAA,IAC1B,iBAAoB,GAAA,GAAA;AAAA,IACpB,gBAAmB,GAAA,GAAA;AAAA,IACnB,sBAAA,GAAyB,YAAY,SAAS,CAAA,CAAA;AAAA,IAC9C,gBAAA;AAAA,IACA,SAAA;AAAA,IACA,IAAO,GAAA,QAAA;AAAA,IACP,EAAI,EAAA,MAAA;AAAA,IACJ,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAKC,YAAM,MAAM,CAAA;AACvB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,iCAAiB,EAAA;AAEtC,IAAA,MAAM,UAAUC,uBAAW,EAAA;AAC3B,IAAA,IAAA,GAAO,WAAW,IAAI,CAAA;AAEtB,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,gBAAkB,EAAA;AAEtB,MAAA,QAAA,CAAS,SAAS,CAAA;AAElB,MAAM,MAAA,SAAA,GAAY,KAAK,GAAI,EAAA;AAE3B,MAAA,MAAM,QACJ,GAAA,iBAAA,GAAoB,CACpB,IAAA,WAAA,CAAY,MAAM;AAChB,QAAA,IAAI,IAAK,CAAA,GAAA,EAAQ,GAAA,SAAA,GAAY,gBAAkB,EAAA;AAE7C,UAAA,QAAA;AAAA,YACE,GAAG,SAAS,CAAA,mDAAA;AAAA,WACd;AACA,UAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,UAAA;AAAA;AAEF,QAAA,QAAA,CAAS,SAAS,CAAA;AAAA,SACjB,iBAAiB,CAAA;AAEtB,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,gBAAkB,EAAA;AAEtB,QAAA,QAAA,IAAY,cAAc,QAAQ,CAAA;AAClC,QAAA,IAAI,sBAAwB,EAAA;AAC1B,UAAA,QAAA,CAAS,sBAAsB,CAAA;AAAA;AACjC,OACF;AAAA,KACC,EAAA;AAAA,MACD,QAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,SAAA;AAAA,MACA,sBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,WAAWC,SAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,IAAI,GAAG,SAAS,CAAA;AAAA,QAC7D,GAAA;AAAA,QACA,IAAK,EAAA,KAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QAEJ,QAAC,kBAAAD,cAAA,CAAAE,qBAAA,EAAA,EAAW,IAAY,EAAA,OAAA,EAAkB,EAAQ,EAAA;AAAA;AAAA,KACpD;AAAA;AAGN;;;;;"}

package/dist-cjs/stepper/Step.js

@@ -65,7 +65,7 @@ const Step = React.forwardRef(function Step2({
         );
       }
     }
-  }, [depth, orientation]);
+  }, [depth, orientation, hasNestedSteps]);
   const ariaCurrent = stage === "active" ? "step" : void 0;
   const iconSizeMultiplier = depth === 0 ? 1.5 : 1;
   const stageText = stage === "inprogress" ? "in progress" : stage;