@salt-ds/core 1.6.0 → 1.7.1

package/dist-cjs/packages/core/src/card/InteractableCard.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, 0);\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-text-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-accent-borderColor-disabled));\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n  color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-text-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, 0);\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-text-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\na:link .saltInteractableCard * {\n  text-decoration: none;\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-accent-borderColor-disabled));\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n  color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-text-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/core/src/checkbox/CheckboxIcon.css.js

@@ -2,7 +2,7 @@
 
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* Styles applied to root component */\n\n.saltCheckboxIcon {\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n\n  --checkbox-borderWidth: var(--salt-size-border);\n  --checkbox-size: var(--salt-size-selectable);\n  --checkbox-box-offset: calc(var(--checkbox-borderWidth) / 2);\n  /* 14px is used to match the svg's viewbox */\n  --checkbox-box-size: calc(100% - var(--checkbox-borderWidth));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-tick-color, var(--salt-selectable-primary-foreground-selected));\n\n  fill: var(--saltCheckbox-icon-fill, var(--salt-selectable-background));\n  height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth, var(--checkbox-borderWidth));\n  width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to root component on hover */\n.saltCheckbox:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n  background: var(--salt-selectable-background-hover);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCheckbox-disabled:hover .saltCheckboxIcon,\n.saltCheckboxIcon-disabled {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `error={true}` */\n.saltCheckbox-error .saltCheckboxIcon,\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `error={true}` on hover */\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  background: var(--salt-status-error-background);\n}\n\n/* Styles applied if `error={true}` and `disabled={true}` */\n.saltCheckbox-error.saltCheckbox-disabled .saltCheckboxIcon,\n.saltCheckbox-error.saltCheckbox-disabled:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `checked={true}` */\n.saltCheckboxIcon-checked {\n  fill: var(--saltCheckbox-icon-fill-checked, var(--salt-selectable-foreground-selected));\n  --checkbox-borderWidth: var(--saltCheckbox-icon-borderWidth-checked, 0px);\n}\n\n/* Styles applied if `checked={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `checked={true}` and `error={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error {\n  fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `checked={true}`,`error={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to box */\n.saltCheckboxIcon-box {\n  stroke-width: var(--checkbox-borderWidth);\n  width: var(--checkbox-box-size);\n  height: var(--checkbox-box-size);\n  x: var(--checkbox-box-offset);\n  y: var(--checkbox-box-offset);\n}\n\n/* Styles applied to icon if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-selected));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to icon if `indeterminate={true}` on hover */\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied if `indeterminate={true}` and `disabled={true}` */\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `indeterminate={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-error.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `indeterminate={true}`,`disabled={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to tick */\n.saltCheckboxIcon-tick {\n  fill: var(--saltCheckbox-icon-tick-fill, var(--checkbox-icon-tick-fill));\n  stroke-width: 0;\n}\n\n/* Styles applied to tick if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate .saltCheckboxIcon-tick {\n  height: var(--saltCheckbox-icon-indeterminate-bar-height, var(--checkbox-density-bar-height));\n  y: var(--saltCheckbox-icon-indeterminate-bar-y, var(--checkbox-density-bar-y));\n}\n";
+var css_248z = "/* Styles applied to root component */\n\n.saltCheckboxIcon {\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n\n  --checkbox-borderWidth: var(--salt-size-border);\n  --checkbox-size: var(--salt-size-selectable);\n  --checkbox-box-offset: calc(var(--checkbox-borderWidth) / 2);\n  /* 14px is used to match the svg's viewbox */\n  --checkbox-box-size: calc(100% - var(--checkbox-borderWidth));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-tick-color, var(--salt-selectable-primary-foreground-selected));\n\n  fill: var(--saltCheckbox-icon-fill, var(--salt-selectable-background));\n  height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth, var(--checkbox-borderWidth));\n  width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to root component on hover */\n.saltCheckbox:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n  background: var(--salt-selectable-background-hover);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCheckbox-disabled:hover .saltCheckboxIcon,\n.saltCheckboxIcon-disabled {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `error={true}` */\n.saltCheckbox-error .saltCheckboxIcon,\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `error={true}` on hover */\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  background: var(--salt-status-error-background);\n}\n\n/* Styles applied if `error={true}` and `disabled={true}` */\n.saltCheckbox-error.saltCheckbox-disabled .saltCheckboxIcon,\n.saltCheckbox-error.saltCheckbox-disabled:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `checked={true}` */\n.saltCheckboxIcon-checked {\n  fill: var(--saltCheckbox-icon-fill-checked, var(--salt-selectable-foreground-selected));\n  --checkbox-borderWidth: var(--saltCheckbox-icon-borderWidth-checked, 0px);\n}\n\n/* Styles applied if `checked={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `checked={true}` and `error={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error {\n  fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `checked={true}`,`error={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to box */\n.saltCheckboxIcon-box {\n  stroke-width: var(--checkbox-borderWidth);\n  width: var(--checkbox-box-size);\n  height: var(--checkbox-box-size);\n  x: var(--checkbox-box-offset);\n  y: var(--checkbox-box-offset);\n}\n\n/* Styles applied to icon if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-selected));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to icon if `indeterminate={true}` on hover */\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied if `indeterminate={true}` and `disabled={true}` */\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `indeterminate={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-error.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `indeterminate={true}`,`disabled={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-error.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to tick */\n.saltCheckboxIcon-tick {\n  fill: var(--saltCheckbox-icon-tick-fill, var(--checkbox-icon-tick-fill));\n  stroke-width: 0;\n}\n\n/* Styles applied to tick if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate .saltCheckboxIcon-tick {\n  height: var(--saltCheckbox-icon-indeterminate-bar-height, var(--checkbox-density-bar-height));\n  y: var(--saltCheckbox-icon-indeterminate-bar-y, var(--checkbox-density-bar-y));\n}\n";
 styleInject_es(css_248z);
 
 module.exports = css_248z;

package/dist-cjs/packages/core/src/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  isValidElement,\n  Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n  UseFloatingUIProps,\n  makePrefixer,\n  mergeProps,\n  useForkRef,\n} from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\nimport { SaltProvider } from \"../salt-provider\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <FloatingPortal>\n            {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n            <SaltProvider>\n              <div\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(status),\n                  className\n                )}\n                ref={floatingRef}\n                {...getTooltipProps()}\n              >\n                <div className={withBaseName(\"container\")}>\n                  {!hideIcon && (\n                    <StatusIndicator\n                      status={status}\n                      size={1}\n                      className={withBaseName(\"icon\")}\n                    />\n                  )}\n                  <span className={withBaseName(\"content\")}>{content}</span>\n                </div>\n                {!hideArrow && (\n                  <FloatingArrow\n                    {...arrowProps}\n                    className={withBaseName(\"arrow\")}\n                    strokeWidth={1}\n                    fill=\"var(--salt-container-primary-background)\"\n                    stroke=\"var(--tooltip-status-borderColor)\"\n                    height={5}\n                    width={10}\n                  />\n                )}\n              </div>\n            </SaltProvider>\n          </FloatingPortal>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useTooltip","useForkRef","isValidElement","jsxs","Fragment","cloneElement","mergeProps","jsx","FloatingPortal","SaltProvider","clsx","StatusIndicator","FloatingArrow"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n} from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\nimport { SaltProvider } from \"../salt-provider\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <FloatingPortal>\n            {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n            <SaltProvider>\n              <div\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(status),\n                  className\n                )}\n                ref={floatingRef}\n                {...getTooltipProps()}\n              >\n                <div className={withBaseName(\"container\")}>\n                  {!hideIcon && (\n                    <StatusIndicator\n                      status={status}\n                      size={1}\n                      className={withBaseName(\"icon\")}\n                    />\n                  )}\n                  <span className={withBaseName(\"content\")}>{content}</span>\n                </div>\n                {!hideArrow && (\n                  <FloatingArrow\n                    {...arrowProps}\n                    className={withBaseName(\"arrow\")}\n                    strokeWidth={1}\n                    fill=\"var(--salt-container-primary-background)\"\n                    stroke=\"var(--tooltip-status-borderColor)\"\n                    height={5}\n                    width={10}\n                  />\n                )}\n              </div>\n            </SaltProvider>\n          </FloatingPortal>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useTooltip","useForkRef","isValidElement","jsxs","Fragment","cloneElement","mergeProps","jsx","FloatingPortal","SaltProvider","clsx","StatusIndicator","FloatingArrow"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA;AAAA,MAEjBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAcD,qBAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5C,IACE,uBAAAE,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAeF,oBAAA,CAAA,QAAQ,CACtB,IAAAG,kBAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAGC,qBAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,QAEF,IAAA,IAAQ,CAAC,QAAA,oBACPC,cAAA,CAAAC,oBAAA,EAAA;AAAA,UAEC,QAAC,kBAAAD,cAAA,CAAAE,yBAAA,EAAA;AAAA,YACC,QAAC,kBAAAN,eAAA,CAAA,KAAA,EAAA;AAAA,cACC,SAAW,EAAAO,SAAA;AAAA,gBACT,YAAa,EAAA;AAAA,gBACb,aAAa,MAAM,CAAA;AAAA,gBACnB,SAAA;AAAA,eACF;AAAA,cACA,GAAK,EAAA,WAAA;AAAA,cACJ,GAAG,eAAgB,EAAA;AAAA,cAEpB,QAAA,EAAA;AAAA,gCAACP,eAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,kBACrC,QAAA,EAAA;AAAA,oBAAA,CAAC,4BACCI,cAAA,CAAAI,+BAAA,EAAA;AAAA,sBACC,MAAA;AAAA,sBACA,IAAM,EAAA,CAAA;AAAA,sBACN,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,qBAChC,CAAA;AAAA,oCAEDJ,cAAA,CAAA,MAAA,EAAA;AAAA,sBAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,sBAAI,QAAA,EAAA,OAAA;AAAA,qBAAQ,CAAA;AAAA,mBAAA;AAAA,iBACrD,CAAA;AAAA,gBACC,CAAC,6BACCA,cAAA,CAAAK,mBAAA,EAAA;AAAA,kBACE,GAAG,UAAA;AAAA,kBACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,kBAC/B,WAAa,EAAA,CAAA;AAAA,kBACb,IAAK,EAAA,0CAAA;AAAA,kBACL,MAAO,EAAA,mCAAA;AAAA,kBACP,MAAQ,EAAA,CAAA;AAAA,kBACR,KAAO,EAAA,EAAA;AAAA,iBACT,CAAA;AAAA,eAAA;AAAA,aAEJ,CAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/core/src/utils/mergeProps.js

@@ -15,7 +15,7 @@ function mergeProps(propsA, propsB) {
     } else if (typeof a === "string" && typeof b === "string" && key === "className") {
       props[key] = clsx.clsx(a, b);
     } else {
-      props[key] = b != null ? b : a;
+      props[key] = b !== void 0 ? b : a;
     }
   });
   return props;

package/dist-cjs/packages/core/src/utils/mergeProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"mergeProps.js","sources":["../src/utils/mergeProps.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { createChainedFunction } from \"./createChainedFunction\";\n\ninterface Props {\n  [key: string]: unknown;\n}\n\n/**\n * This utility merges two prop objects according to the following rules:\n *\n * - If the prop is a function and begins with \"on\" then chain the functions together\n * - If the prop key is \"className\" then merge them using `clsx`\n * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter\n */\nexport function mergeProps(\n  propsA: Props,\n  propsB: Props\n): Record<string, unknown> {\n  const props = { ...propsA };\n\n  Object.keys(propsB).forEach((key) => {\n    const a: any = props[key];\n    const b: any = propsB[key];\n\n    if (\n      typeof a === \"function\" &&\n      typeof b === \"function\" &&\n      key.indexOf(\"on\") === 0\n    ) {\n      props[key] = createChainedFunction(a, b);\n    } else if (\n      typeof a === \"string\" &&\n      typeof b === \"string\" &&\n      key === \"className\"\n    ) {\n      props[key] = clsx(a, b);\n    } else {\n      props[key] = b ?? a;\n    }\n  });\n\n  return props;\n}\n"],"names":["createChainedFunction","clsx"],"mappings":";;;;;;;AAcgB,SAAA,UAAA,CACd,QACA,MACyB,EAAA;AACzB,EAAM,MAAA,KAAA,GAAQ,EAAE,GAAG,MAAO,EAAA,CAAA;AAE1B,EAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACnC,IAAA,MAAM,IAAS,KAAM,CAAA,GAAA,CAAA,CAAA;AACrB,IAAA,MAAM,IAAS,MAAO,CAAA,GAAA,CAAA,CAAA;AAEtB,IACE,IAAA,OAAO,CAAM,KAAA,UAAA,IACb,OAAO,CAAA,KAAM,cACb,GAAI,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CACtB,EAAA;AACA,MAAM,KAAA,CAAA,GAAA,CAAA,GAAOA,2CAAsB,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,KACzC,MAAA,IACE,OAAO,CAAM,KAAA,QAAA,IACb,OAAO,CAAM,KAAA,QAAA,IACb,QAAQ,WACR,EAAA;AACA,MAAM,KAAA,CAAA,GAAA,CAAA,GAAOC,SAAK,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,KAAA,CAAM,OAAO,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA,CAAA;AAAA,KACpB;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"mergeProps.js","sources":["../src/utils/mergeProps.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { createChainedFunction } from \"./createChainedFunction\";\n\ninterface Props {\n  [key: string]: unknown;\n}\n\n/**\n * This utility merges two prop objects according to the following rules:\n *\n * - If the prop is a function and begins with \"on\" then chain the functions together\n * - If the prop key is \"className\" then merge them using `clsx`\n * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter\n */\nexport function mergeProps(\n  propsA: Props,\n  propsB: Props\n): Record<string, unknown> {\n  const props = { ...propsA };\n\n  Object.keys(propsB).forEach((key) => {\n    const a: any = props[key];\n    const b: any = propsB[key];\n\n    if (\n      typeof a === \"function\" &&\n      typeof b === \"function\" &&\n      key.indexOf(\"on\") === 0\n    ) {\n      props[key] = createChainedFunction(a, b);\n    } else if (\n      typeof a === \"string\" &&\n      typeof b === \"string\" &&\n      key === \"className\"\n    ) {\n      props[key] = clsx(a, b);\n    } else {\n      props[key] = b !== undefined ? b : a;\n    }\n  });\n\n  return props;\n}\n"],"names":["createChainedFunction","clsx"],"mappings":";;;;;;;AAcgB,SAAA,UAAA,CACd,QACA,MACyB,EAAA;AACzB,EAAM,MAAA,KAAA,GAAQ,EAAE,GAAG,MAAO,EAAA,CAAA;AAE1B,EAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACnC,IAAA,MAAM,IAAS,KAAM,CAAA,GAAA,CAAA,CAAA;AACrB,IAAA,MAAM,IAAS,MAAO,CAAA,GAAA,CAAA,CAAA;AAEtB,IACE,IAAA,OAAO,CAAM,KAAA,UAAA,IACb,OAAO,CAAA,KAAM,cACb,GAAI,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CACtB,EAAA;AACA,MAAM,KAAA,CAAA,GAAA,CAAA,GAAOA,2CAAsB,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,KACzC,MAAA,IACE,OAAO,CAAM,KAAA,QAAA,IACb,OAAO,CAAM,KAAA,QAAA,IACb,QAAQ,WACR,EAAA;AACA,MAAM,KAAA,CAAA,GAAA,CAAA,GAAOC,SAAK,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,KACjB,MAAA;AACL,MAAM,KAAA,CAAA,GAAA,CAAA,GAAO,CAAM,KAAA,KAAA,CAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAAA,KACrC;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}

package/dist-es/packages/core/src/card/InteractableCard.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, 0);\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-text-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-accent-borderColor-disabled));\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n  color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-text-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
+var css_248z = "/* Styles applied to InteractableCard */\n.saltInteractableCard {\n  border-width: var(--saltCard-borderWidth, var(--card-borderWidth));\n  border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle));\n  border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor));\n  border-radius: var(--saltCard-borderRadius, 0);\n  display: block;\n  transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"bottom\"` (default) */\n.saltInteractableCard-accentBottom {\n  --card-borderWidth: 0 0 var(--salt-size-accent) 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"left\"` */\n.saltInteractableCard-accentLeft {\n  --card-borderWidth: 0 0 0 var(--salt-size-accent);\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"top\"` */\n.saltInteractableCard-accentTop {\n  --card-borderWidth: var(--salt-size-accent) 0 0 0;\n}\n\n/* Styles applied to InteractableCard if `accentPlacement=\"right\"` */\n.saltInteractableCard-accentRight {\n  --card-borderWidth: 0 var(--salt-size-accent) 0 0;\n}\n\n/* Styles applied to InteractableCard on focus */\na:focus-visible .saltInteractableCard,\n.saltInteractableCard:focus-visible {\n  cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover));\n  color: var(--saltCard-color-focus, var(--salt-text-primary-foreground));\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\na:link .saltInteractableCard * {\n  text-decoration: none;\n}\n\n/* Styles applied on active state to InteractableCard */\n.saltInteractableCard:active {\n  cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active));\n  box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied on hover state to InteractableCard */\n.saltInteractableCard:hover {\n  cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover));\n  box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover));\n}\n\n/* Styles applied to InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled,\n.saltInteractableCard-disabled:focus,\n.saltInteractableCard-disabled:hover,\n.saltInteractableCard-disabled:active {\n  border-color: var(--saltCard-borderColor-disabled, var(--salt-accent-borderColor-disabled));\n  box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow));\n  background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled));\n  color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled));\n  cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled));\n  outline: none;\n}\n\n/* Styles applied to nested divs in InteractableCard if `disabled={true}` */\n.saltInteractableCard-disabled div {\n  pointer-events: none;\n}\n\n/* Class that can be used for anchor tags wrapping InteractableCard */\n.saltInteractableCard-link {\n  color: var(--saltCard-link-color, var(--salt-text-primary-foreground));\n  inset: var(--salt-focused-outlineInset);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/core/src/checkbox/CheckboxIcon.css.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* Styles applied to root component */\n\n.saltCheckboxIcon {\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n\n  --checkbox-borderWidth: var(--salt-size-border);\n  --checkbox-size: var(--salt-size-selectable);\n  --checkbox-box-offset: calc(var(--checkbox-borderWidth) / 2);\n  /* 14px is used to match the svg's viewbox */\n  --checkbox-box-size: calc(100% - var(--checkbox-borderWidth));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-tick-color, var(--salt-selectable-primary-foreground-selected));\n\n  fill: var(--saltCheckbox-icon-fill, var(--salt-selectable-background));\n  height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth, var(--checkbox-borderWidth));\n  width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to root component on hover */\n.saltCheckbox:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n  background: var(--salt-selectable-background-hover);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCheckbox-disabled:hover .saltCheckboxIcon,\n.saltCheckboxIcon-disabled {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `error={true}` */\n.saltCheckbox-error .saltCheckboxIcon,\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `error={true}` on hover */\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  background: var(--salt-status-error-background);\n}\n\n/* Styles applied if `error={true}` and `disabled={true}` */\n.saltCheckbox-error.saltCheckbox-disabled .saltCheckboxIcon,\n.saltCheckbox-error.saltCheckbox-disabled:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `checked={true}` */\n.saltCheckboxIcon-checked {\n  fill: var(--saltCheckbox-icon-fill-checked, var(--salt-selectable-foreground-selected));\n  --checkbox-borderWidth: var(--saltCheckbox-icon-borderWidth-checked, 0px);\n}\n\n/* Styles applied if `checked={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `checked={true}` and `error={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error {\n  fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `checked={true}`,`error={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to box */\n.saltCheckboxIcon-box {\n  stroke-width: var(--checkbox-borderWidth);\n  width: var(--checkbox-box-size);\n  height: var(--checkbox-box-size);\n  x: var(--checkbox-box-offset);\n  y: var(--checkbox-box-offset);\n}\n\n/* Styles applied to icon if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-selected));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to icon if `indeterminate={true}` on hover */\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied if `indeterminate={true}` and `disabled={true}` */\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `indeterminate={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-error.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `indeterminate={true}`,`disabled={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to tick */\n.saltCheckboxIcon-tick {\n  fill: var(--saltCheckbox-icon-tick-fill, var(--checkbox-icon-tick-fill));\n  stroke-width: 0;\n}\n\n/* Styles applied to tick if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate .saltCheckboxIcon-tick {\n  height: var(--saltCheckbox-icon-indeterminate-bar-height, var(--checkbox-density-bar-height));\n  y: var(--saltCheckbox-icon-indeterminate-bar-y, var(--checkbox-density-bar-y));\n}\n";
+var css_248z = "/* Styles applied to root component */\n\n.saltCheckboxIcon {\n  --checkbox-density-bar-y: 6px;\n  --checkbox-density-bar-height: 2px;\n\n  --checkbox-borderWidth: var(--salt-size-border);\n  --checkbox-size: var(--salt-size-selectable);\n  --checkbox-box-offset: calc(var(--checkbox-borderWidth) / 2);\n  /* 14px is used to match the svg's viewbox */\n  --checkbox-box-size: calc(100% - var(--checkbox-borderWidth));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-tick-color, var(--salt-selectable-primary-foreground-selected));\n\n  fill: var(--saltCheckbox-icon-fill, var(--salt-selectable-background));\n  height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-height: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--saltCheckbox-icon-strokeWidth, var(--checkbox-borderWidth));\n  width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  min-width: var(--saltCheckbox-icon-size, var(--checkbox-size));\n  background: var(--salt-container-primary-background);\n}\n\n/* Styles applied to root component on hover */\n.saltCheckbox:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n  background: var(--salt-selectable-background-hover);\n}\n\n/* Styles applied if `disabled={true}` */\n.saltCheckbox-disabled:hover .saltCheckboxIcon,\n.saltCheckboxIcon-disabled {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `error={true}` */\n.saltCheckbox-error .saltCheckboxIcon,\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `error={true}` on hover */\n.saltCheckbox-error:hover .saltCheckboxIcon {\n  background: var(--salt-status-error-background);\n}\n\n/* Styles applied if `error={true}` and `disabled={true}` */\n.saltCheckbox-error.saltCheckbox-disabled .saltCheckboxIcon,\n.saltCheckbox-error.saltCheckbox-disabled:hover .saltCheckboxIcon {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n  background: var(--salt-selectable-background);\n}\n\n/* Styles applied if `checked={true}` */\n.saltCheckboxIcon-checked {\n  fill: var(--saltCheckbox-icon-fill-checked, var(--salt-selectable-foreground-selected));\n  --checkbox-borderWidth: var(--saltCheckbox-icon-borderWidth-checked, 0px);\n}\n\n/* Styles applied if `checked={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `checked={true}` and `error={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error {\n  fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `checked={true}`,`error={true}` and `disabled={true}` */\n.saltCheckboxIcon-checked.saltCheckboxIcon-error.saltCheckboxIcon-disabled {\n  fill: var(--saltCheckbox-icon-fill-disabled, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to box */\n.saltCheckboxIcon-box {\n  stroke-width: var(--checkbox-borderWidth);\n  width: var(--checkbox-box-size);\n  height: var(--checkbox-box-size);\n  x: var(--checkbox-box-offset);\n  y: var(--checkbox-box-offset);\n}\n\n/* Styles applied to icon if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-selected));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to icon if `indeterminate={true}` on hover */\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied if `indeterminate={true}` and `disabled={true}` */\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke-disabled, var(--salt-selectable-foreground-disabled));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-indeterminate-bar-color-disabled, var(--salt-selectable-foreground-selectedDisabled));\n}\n\n/* Styles applied if `indeterminate={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-error.saltCheckboxIcon-indeterminate {\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground));\n}\n\n/* Styles applied if `indeterminate={true}`,`disabled={true}` and `error={true}` */\n.saltCheckboxIcon-error.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-error.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\n  stroke: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n  --checkbox-icon-tick-fill: var(--saltCheckbox-icon-stroke-error, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to tick */\n.saltCheckboxIcon-tick {\n  fill: var(--saltCheckbox-icon-tick-fill, var(--checkbox-icon-tick-fill));\n  stroke-width: 0;\n}\n\n/* Styles applied to tick if `indeterminate={true}` */\n.saltCheckboxIcon-indeterminate .saltCheckboxIcon-tick {\n  height: var(--saltCheckbox-icon-indeterminate-bar-height, var(--checkbox-density-bar-height));\n  y: var(--saltCheckbox-icon-indeterminate-bar-y, var(--checkbox-density-bar-y));\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist-es/packages/core/src/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  isValidElement,\n  Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n  UseFloatingUIProps,\n  makePrefixer,\n  mergeProps,\n  useForkRef,\n} from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\nimport { SaltProvider } from \"../salt-provider\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <FloatingPortal>\n            {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n            <SaltProvider>\n              <div\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(status),\n                  className\n                )}\n                ref={floatingRef}\n                {...getTooltipProps()}\n              >\n                <div className={withBaseName(\"container\")}>\n                  {!hideIcon && (\n                    <StatusIndicator\n                      status={status}\n                      size={1}\n                      className={withBaseName(\"icon\")}\n                    />\n                  )}\n                  <span className={withBaseName(\"content\")}>{content}</span>\n                </div>\n                {!hideArrow && (\n                  <FloatingArrow\n                    {...arrowProps}\n                    className={withBaseName(\"arrow\")}\n                    strokeWidth={1}\n                    fill=\"var(--salt-container-primary-background)\"\n                    stroke=\"var(--tooltip-status-borderColor)\"\n                    height={5}\n                    width={10}\n                  />\n                )}\n              </div>\n            </SaltProvider>\n          </FloatingPortal>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n} from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\nimport { SaltProvider } from \"../salt-provider\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n  extends Pick<UseFloatingUIProps, \"open\" | \"onOpenChange\" | \"placement\">,\n    Omit<HTMLAttributes<HTMLDivElement>, \"content\"> {\n  /**\n   * The children will be the Tooltip's trigger.\n   */\n  children: ReactNode;\n  /**\n   * Whether to hide the Tooltip arrow. Defaults to `false`.\n   */\n  hideArrow?: boolean;\n  /**\n   * Whether to hide the status icon within the Tooltip. Defaults to `false`.\n   */\n  hideIcon?: boolean;\n  /**\n   * Content displayed inside the Tooltip. Can be a string or a React component.\n   */\n  content: ReactNode;\n  /**\n   * A string to determine the status of the Tooltip. Defaults to `info`.\n   */\n  status?: ValidationStatus;\n  /**\n   * Delay in milliseconds before the Tooltip is shown.\n   */\n  enterDelay?: number;\n  /**\n   * Delay in milliseconds before the Tooltip is hidden.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n   */\n  disabled?: boolean;\n  /**\n   * Option to remove the hover listener.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * Option to remove the focus listener.\n   */\n  disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  function Tooltip(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const hookProps: UseTooltipProps = {\n      open: openProp,\n      placement,\n      enterDelay,\n      leaveDelay,\n      ...rest,\n    };\n\n    const {\n      arrowProps,\n      open,\n      floating,\n      reference,\n      getTriggerProps,\n      getTooltipProps,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-ignore\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        {open && !disabled && (\n          <FloatingPortal>\n            {/* The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n            <SaltProvider>\n              <div\n                className={clsx(\n                  withBaseName(),\n                  withBaseName(status),\n                  className\n                )}\n                ref={floatingRef}\n                {...getTooltipProps()}\n              >\n                <div className={withBaseName(\"container\")}>\n                  {!hideIcon && (\n                    <StatusIndicator\n                      status={status}\n                      size={1}\n                      className={withBaseName(\"icon\")}\n                    />\n                  )}\n                  <span className={withBaseName(\"content\")}>{content}</span>\n                </div>\n                {!hideArrow && (\n                  <FloatingArrow\n                    {...arrowProps}\n                    className={withBaseName(\"arrow\")}\n                    strokeWidth={1}\n                    fill=\"var(--salt-container-primary-background)\"\n                    stroke=\"var(--tooltip-status-borderColor)\"\n                    height={5}\n                    width={10}\n                  />\n                )}\n              </div>\n            </SaltProvider>\n          </FloatingPortal>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["Tooltip"],"mappings":"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"}

package/dist-es/packages/core/src/utils/mergeProps.js

@@ -11,7 +11,7 @@ function mergeProps(propsA, propsB) {
     } else if (typeof a === "string" && typeof b === "string" && key === "className") {
       props[key] = clsx(a, b);
     } else {
-      props[key] = b != null ? b : a;
+      props[key] = b !== void 0 ? b : a;
     }
   });
   return props;

package/dist-es/packages/core/src/utils/mergeProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"mergeProps.js","sources":["../src/utils/mergeProps.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { createChainedFunction } from \"./createChainedFunction\";\n\ninterface Props {\n  [key: string]: unknown;\n}\n\n/**\n * This utility merges two prop objects according to the following rules:\n *\n * - If the prop is a function and begins with \"on\" then chain the functions together\n * - If the prop key is \"className\" then merge them using `clsx`\n * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter\n */\nexport function mergeProps(\n  propsA: Props,\n  propsB: Props\n): Record<string, unknown> {\n  const props = { ...propsA };\n\n  Object.keys(propsB).forEach((key) => {\n    const a: any = props[key];\n    const b: any = propsB[key];\n\n    if (\n      typeof a === \"function\" &&\n      typeof b === \"function\" &&\n      key.indexOf(\"on\") === 0\n    ) {\n      props[key] = createChainedFunction(a, b);\n    } else if (\n      typeof a === \"string\" &&\n      typeof b === \"string\" &&\n      key === \"className\"\n    ) {\n      props[key] = clsx(a, b);\n    } else {\n      props[key] = b ?? a;\n    }\n  });\n\n  return props;\n}\n"],"names":[],"mappings":";;;AAcgB,SAAA,UAAA,CACd,QACA,MACyB,EAAA;AACzB,EAAM,MAAA,KAAA,GAAQ,EAAE,GAAG,MAAO,EAAA,CAAA;AAE1B,EAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACnC,IAAA,MAAM,IAAS,KAAM,CAAA,GAAA,CAAA,CAAA;AACrB,IAAA,MAAM,IAAS,MAAO,CAAA,GAAA,CAAA,CAAA;AAEtB,IACE,IAAA,OAAO,CAAM,KAAA,UAAA,IACb,OAAO,CAAA,KAAM,cACb,GAAI,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CACtB,EAAA;AACA,MAAM,KAAA,CAAA,GAAA,CAAA,GAAO,qBAAsB,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,KACzC,MAAA,IACE,OAAO,CAAM,KAAA,QAAA,IACb,OAAO,CAAM,KAAA,QAAA,IACb,QAAQ,WACR,EAAA;AACA,MAAM,KAAA,CAAA,GAAA,CAAA,GAAO,IAAK,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,KAAA,CAAM,OAAO,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA,CAAA;AAAA,KACpB;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"mergeProps.js","sources":["../src/utils/mergeProps.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { createChainedFunction } from \"./createChainedFunction\";\n\ninterface Props {\n  [key: string]: unknown;\n}\n\n/**\n * This utility merges two prop objects according to the following rules:\n *\n * - If the prop is a function and begins with \"on\" then chain the functions together\n * - If the prop key is \"className\" then merge them using `clsx`\n * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter\n */\nexport function mergeProps(\n  propsA: Props,\n  propsB: Props\n): Record<string, unknown> {\n  const props = { ...propsA };\n\n  Object.keys(propsB).forEach((key) => {\n    const a: any = props[key];\n    const b: any = propsB[key];\n\n    if (\n      typeof a === \"function\" &&\n      typeof b === \"function\" &&\n      key.indexOf(\"on\") === 0\n    ) {\n      props[key] = createChainedFunction(a, b);\n    } else if (\n      typeof a === \"string\" &&\n      typeof b === \"string\" &&\n      key === \"className\"\n    ) {\n      props[key] = clsx(a, b);\n    } else {\n      props[key] = b !== undefined ? b : a;\n    }\n  });\n\n  return props;\n}\n"],"names":[],"mappings":";;;AAcgB,SAAA,UAAA,CACd,QACA,MACyB,EAAA;AACzB,EAAM,MAAA,KAAA,GAAQ,EAAE,GAAG,MAAO,EAAA,CAAA;AAE1B,EAAA,MAAA,CAAO,IAAK,CAAA,MAAM,CAAE,CAAA,OAAA,CAAQ,CAAC,GAAQ,KAAA;AACnC,IAAA,MAAM,IAAS,KAAM,CAAA,GAAA,CAAA,CAAA;AACrB,IAAA,MAAM,IAAS,MAAO,CAAA,GAAA,CAAA,CAAA;AAEtB,IACE,IAAA,OAAO,CAAM,KAAA,UAAA,IACb,OAAO,CAAA,KAAM,cACb,GAAI,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CACtB,EAAA;AACA,MAAM,KAAA,CAAA,GAAA,CAAA,GAAO,qBAAsB,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,KACzC,MAAA,IACE,OAAO,CAAM,KAAA,QAAA,IACb,OAAO,CAAM,KAAA,QAAA,IACb,QAAQ,WACR,EAAA;AACA,MAAM,KAAA,CAAA,GAAA,CAAA,GAAO,IAAK,CAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAAA,KACjB,MAAA;AACL,MAAM,KAAA,CAAA,GAAA,CAAA,GAAO,CAAM,KAAA,KAAA,CAAA,GAAY,CAAI,GAAA,CAAA,CAAA;AAAA,KACrC;AAAA,GACD,CAAA,CAAA;AAED,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}

package/dist-types/tooltip/Tooltip.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes, ReactNode } from "react";
 import { ValidationStatus } from "../status-indicator";
 import { UseFloatingUIProps } from "../utils";
 import "./Tooltip.css";
-export interface TooltipProps extends HTMLAttributes<HTMLDivElement>, Pick<UseFloatingUIProps, "open" | "onOpenChange" | "placement"> {
+export interface TooltipProps extends Pick<UseFloatingUIProps, "open" | "onOpenChange" | "placement">, Omit<HTMLAttributes<HTMLDivElement>, "content"> {
     /**
      * The children will be the Tooltip's trigger.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "license": "Apache-2.0",
   "main": "dist-cjs/packages/core/src/index.js",
   "sideEffects": [
@@ -25,7 +25,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.23.0",
     "clsx": "^1.2.1",
-    "@salt-ds/icons": "1.3.0"
+    "@salt-ds/icons": "^1.3.1"
   },
   "files": [
     "dist-cjs",