@salt-ds/core 1.13.2 → 1.13.4

package/dist-cjs/utils/useFloatingUI/useFloatingUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  Middleware,\n  Placement,\n  Platform,\n  Strategy,\n  autoUpdate,\n  flip,\n  limitShift,\n  platform,\n  shift,\n  useFloating,\n  FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n  createContext,\n  ReactNode,\n  useContext,\n  useMemo,\n  forwardRef,\n  PropsWithChildren,\n  Ref,\n  ForwardRefExoticComponent,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\ntype CombinedFloatingComponentProps = PropsWithChildren<FloatingComponentProps>;\nexport interface FloatingComponentProps {\n  /**\n   * Whether the floating component is open (used for determinig whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Position props for the floating component\n   */\n  top: number;\n  left: number;\n  width?: number;\n  height?: number;\n  position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLElement,\n  CombinedFloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const { open, top, left, position, ...rest } = props;\n  const style = {\n    top,\n    left,\n    position,\n  };\n  return open ? (\n    <FloatingPortal>\n      <SaltProvider>\n        <div style={style} {...rest} ref={ref as Ref<HTMLDivElement>} />\n      </SaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: ForwardRefExoticComponent<CombinedFloatingComponentProps>;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps {\n  /**\n   * Sets position relative to trigger.\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n  /**\n   * Sets visible state.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame ?? false,\n    }),\n    [platformProp, middleware, animationFrame]\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const handleOpenChange = (open: boolean) => {\n    update();\n    onOpenChange?.(open);\n  };\n\n  const {\n    platform: contextPlaform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlaform,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","jsx","FloatingPortal","SaltProvider","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  Middleware,\n  Placement,\n  Platform,\n  Strategy,\n  autoUpdate,\n  flip,\n  limitShift,\n  platform,\n  shift,\n  useFloating,\n  FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n  createContext,\n  ReactNode,\n  useContext,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the floating component is open (used for determinig whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Position props for the floating component\n   */\n  top: number;\n  left: number;\n  width?: number;\n  height?: number;\n  position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLDivElement,\n  FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const {\n    open,\n    top,\n    left,\n    position,\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    width,\n    height,\n    /* eslint-enable @typescript-eslint/no-unused-vars */\n    ...rest\n  } = props;\n  const style = {\n    top,\n    left,\n    position,\n  };\n  return open ? (\n    <FloatingPortal>\n      <SaltProvider>\n        <div style={style} {...rest} ref={ref} />\n      </SaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps {\n  /**\n   * Sets position relative to trigger.\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n  /**\n   * Sets visible state.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame ?? false,\n    }),\n    [platformProp, middleware, animationFrame]\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n  reference: UseFloatingRefs[\"setReference\"];\n  floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const handleOpenChange = (open: boolean) => {\n    update();\n    onOpenChange?.(open);\n  };\n\n  const {\n    platform: contextPlaform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlaform,\n  });\n\n  return {\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["forwardRef","DefaultFloatingComponent","jsx","FloatingPortal","SaltProvider","createContext","useMemo","useContext","platform","flip","shift","limitShift","open","useFloating","autoUpdate"],"mappings":"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"}

package/dist-es/accordion/AccordionHeader.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  align-items: center;\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: var(--salt-actionable-secondary-background);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  --saltIcon-color: currentcolor;\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n  background: var(--salt-actionable-secondary-background);\n  color: var(--salt-content-primary-foreground-disabled);\n  --saltIcon-fill: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n  transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  margin-left: auto;\n}\n";
+var css_248z = ".saltAccordionHeader {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  padding: var(--salt-spacing-50) var(--salt-spacing-100);\n  align-items: center;\n  border: 0;\n  width: 100%;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  background: var(--salt-actionable-secondary-background);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  color: var(--salt-content-primary-foreground);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-align: left;\n  cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltAccordionHeader:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(-1 * var(--salt-focused-outlineWidth));\n}\n\n.saltAccordionHeader:disabled {\n  background: var(--salt-actionable-secondary-background);\n  color: var(--salt-content-primary-foreground-disabled);\n}\n\n.saltAccordionHeader-icon {\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltAccordionHeader[aria-expanded=\"true\"] > .saltAccordionHeader-icon {\n  transform: rotate(90deg);\n}\n\n.saltAccordionHeader-error {\n  background: var(--salt-status-error-background);\n}\n\n.saltAccordionHeader-error:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader-warning {\n  background: var(--salt-status-warning-background);\n}\n\n.saltAccordionHeader-warning:focus-visible {\n  outline-color: var(--salt-status-warning-borderColor);\n}\n\n.saltAccordionHeader-success {\n  background: var(--salt-status-success-background);\n}\n\n.saltAccordionHeader-success:focus-visible {\n  outline-color: var(--salt-status-error-borderColor);\n}\n\n.saltAccordionHeader .saltAccordionHeader-statusIndicator {\n  margin-left: auto;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=AccordionHeader.css.js.map

package/dist-es/avatar/Avatar.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base, 12px);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-color: var(--avatar-foreground);\n  --salt-size-icon: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--saltAvatar-background, var(--salt-accent-background));\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  overflow: hidden;\n  user-select: none;\n  border-radius: 50%;\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
+var css_248z = "/* Default variables applied to the root element */\n.saltAvatar {\n  --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground));\n  --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1);\n  --avatar-base-size: var(--salt-size-base, 12px);\n  --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-text-notation-fontSize));\n  --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier));\n  --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier));\n  /* Icon styling */\n  --saltIcon-size: calc(var(--avatar-container-size) / 2);\n}\n\n/* Style applied to the root element */\n.saltAvatar {\n  line-height: var(--saltAvatar-lineHeight, var(--salt-text-notation-lineHeight));\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: var(--saltAvatar-background, var(--salt-accent-background));\n  color: var(--avatar-foreground);\n  font-size: var(--avatar-fontSize);\n  font-family: var(--salt-text-fontFamily);\n  font-weight: var(--salt-text-fontWeight);\n  width: var(--avatar-container-size);\n  min-width: var(--avatar-container-size);\n  height: var(--avatar-container-size);\n  min-height: var(--avatar-container-size);\n  overflow: hidden;\n  user-select: none;\n  border-radius: 50%;\n}\n.saltAvatar:has(img),\n.saltAvatar-withImage {\n  background: none;\n}\n/* Style applied to the image/svg element. We specifically allow SVGs as the Avatar image to enable SVGs such as Flags to take up the full Avatar space */\n.saltAvatar > img,\n.saltAvatar > svg:not(.saltIcon) {\n  width: 100%;\n  height: 100%;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Avatar.css.js.map

package/dist-es/badge/Badge.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--salt-text-notation-lineHeight);\n  min-width: var(--salt-text-notation-lineHeight);\n  border-radius: 9999px;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-notification);\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltBadge {\n  display: inline-flex;\n  position: relative;\n  flex-shrink: 0;\n  vertical-align: middle;\n}\n\n.saltBadge-badge {\n  /* Should this vary according to touch size */\n  padding-left: var(--salt-spacing-50);\n  padding-right: var(--salt-spacing-50);\n  height: var(--salt-text-notation-lineHeight);\n  min-width: var(--salt-text-notation-lineHeight);\n  border-radius: 9999px;\n  white-space: nowrap;\n  z-index: var(--salt-zIndex-default);\n\n  align-items: center;\n  justify-content: center;\n  display: inline-flex;\n  margin: auto;\n\n  font-size: var(--salt-text-notation-fontSize);\n  font-weight: var(--salt-text-notation-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-notation-lineHeight);\n  background: var(--salt-accent-background);\n  color: var(--salt-accent-foreground);\n\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n.saltBadge-topRight {\n  position: absolute;\n  right: var(--salt-spacing-100);\n  transform: translateX(100%);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Badge.css.js.map

package/dist-es/button/Button.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Icon API in \"CTA\" variant @ignore */\n.saltButton-cta {\n  --saltIcon-color: var(--salt-actionable-cta-foreground);\n}\n.saltButton-cta:hover {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-hover);\n}\n.saltButton-cta:active,\n.saltButton-cta.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-active);\n}\n.saltButton-cta.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-cta-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Icon API in \"primary\" variant @ignore */\n.saltButton-primary {\n  --saltIcon-color: var(--salt-actionable-primary-foreground);\n}\n.saltButton-primary:hover {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-hover);\n}\n.saltButton-primary:active,\n.saltButton-primary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-active);\n}\n.saltButton-primary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-primary-foreground-disabled);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n/* Icon API in \"secondary\" variant @ignore */\n.saltButton-secondary {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltButton-secondary:hover {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n.saltButton-secondary:active,\n.saltButton-secondary.saltButton-active {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n.saltButton-secondary.saltButton-disabled {\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
+var css_248z = "/* Styles applied to the root element if variant=\"cta\" */\n.saltButton-cta {\n  --button-background: var(--salt-actionable-cta-background);\n  --button-background-active: var(--salt-actionable-cta-background-active);\n  --button-background-disabled: var(--salt-actionable-cta-background-disabled);\n  --button-background-hover: var(--salt-actionable-cta-background-hover);\n  --button-text-color: var(--salt-actionable-cta-foreground);\n  --button-text-color-active: var(--salt-actionable-cta-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-cta-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"primary\" (or no variant specified) */\n.saltButton-primary {\n  --button-background: var(--salt-actionable-primary-background);\n  --button-background-active: var(--salt-actionable-primary-background-active);\n  --button-background-disabled: var(--salt-actionable-primary-background-disabled);\n  --button-background-hover: var(--salt-actionable-primary-background-hover);\n  --button-text-color: var(--salt-actionable-primary-foreground);\n  --button-text-color-active: var(--salt-actionable-primary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-primary-foreground-hover);\n}\n\n/* Styles applied to the root element if variant=\"secondary\" */\n.saltButton-secondary {\n  --button-background: var(--salt-actionable-secondary-background);\n  --button-background-active: var(--salt-actionable-secondary-background-active);\n  --button-background-disabled: var(--salt-actionable-secondary-background-disabled);\n  --button-background-hover: var(--salt-actionable-secondary-background-hover);\n  --button-text-color: var(--salt-actionable-secondary-foreground);\n  --button-text-color-active: var(--salt-actionable-secondary-foreground-active);\n  --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled);\n  --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltButton {\n  align-items: var(--saltButton-alignItems, center);\n  appearance: none;\n  background: var(--saltButton-background, var(--button-background));\n  border-color: var(--saltButton-borderColor, transparent);\n  border-style: var(--saltButton-borderStyle, solid);\n  border-width: var(--saltButton-borderWidth, 0);\n  border-radius: var(--saltButton-borderRadius, 0);\n  color: var(--saltButton-text-color, var(--button-text-color));\n  cursor: var(--saltButton-cursor, pointer);\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  justify-content: var(--saltButton-justifyContent, center);\n  font-size: var(--saltButton-fontSize, var(--salt-text-fontSize));\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight));\n  letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing));\n  text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform));\n  padding: 0 var(--saltButton-padding, var(--salt-size-unit));\n  margin: var(--saltButton-margin, 0);\n  height: var(--saltButton-height, var(--salt-size-base));\n  min-width: var(--saltButton-minWidth, unset);\n  position: relative;\n  text-align: var(--saltButton-textAlign, var(--salt-text-action-textAlign));\n  text-decoration: none;\n  transition: none;\n  width: var(--saltButton-width, auto);\n  -webkit-appearance: none;\n  -webkit-tap-highlight-color: transparent;\n  /* Styles applied to align children*/\n  font-weight: var(--saltButton-fontWeight, var(--salt-text-action-fontWeight));\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltButton:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element on focus when Button is active */\n.saltButton.saltButton-active:focus-visible,\n.saltButton:focus-visible(:active) {\n  background: var(--saltButton-background-active-hover, var(--button-background));\n  color: var(--saltButton-text-color-active-hover, var(--button-text-color));\n}\n\n/* Pseudo-class applied to the root element on hover when Button is not active or disabled */\n.saltButton:hover {\n  background: var(--saltButton-background-hover, var(--button-background-hover));\n  color: var(--saltButton-text-color-hover, var(--button-text-color-hover));\n}\n\n/* Pseudo-class applied to the root element when Button is active and not disabled */\n.saltButton:active,\n.saltButton.saltButton-active {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n}\n\n/* Pseudo-class applied to the root element if disabled={true} */\n.saltButton:disabled,\n.saltButton-disabled,\n  /* Overrides to apply the disabled style when the button is focusable while also disabled */\n.saltButton-disabled:active,\n.saltButton-disabled:focus-visible,\n.saltButton-disabled:hover {\n  background: var(--saltButton-background-disabled, var(--button-background-disabled));\n  color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled));\n  cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled));\n}\n\n.saltButton[href] {\n  display: inline-flex;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Button.css.js.map

package/dist-es/checkbox/CheckboxIcon.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\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.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n";
+var css_248z = ".saltCheckboxIcon {\n  --checkbox-size: var(--salt-size-selectable);\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  position: relative;\n  --saltIcon-size: 100%;\n  display: flex;\n}\n\n.saltCheckbox:hover .saltCheckboxIcon,\n.saltCheckbox:hover .saltCheckboxIcon-indeterminate {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltCheckboxIcon-checked,\n.saltCheckbox:hover .saltCheckboxIcon-checked {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-disabled,\n.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate,\n.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate {\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.saltCheckboxIcon-checked.saltCheckboxIcon-disabled,\n.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltCheckboxIcon-indeterminate::before {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: calc(var(--checkbox-size) - 6px);\n  height: 2px;\n  background: currentColor;\n  transform: translate(-50%, -50%);\n}\n\n.saltCheckboxIcon-error,\n.saltCheckbox:hover .saltCheckboxIcon-error {\n  color: var(--salt-status-error-foreground);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltCheckboxIcon-warning,\n.saltCheckbox:hover .saltCheckboxIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\n}\n\n.saltCheckboxIcon-readOnly,\n.saltCheckbox:hover .saltCheckboxIcon-readOnly {\n  border-color: var(--salt-selectable-borderColor-readonly);\n  color: var(--salt-content-primary-foreground);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=CheckboxIcon.css.js.map

package/dist-es/input/Input.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Style applied to the root element */\n.saltInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInput-height, var(--salt-size-base));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n}\n\n.saltInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-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(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n  --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-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.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
+var css_248z = "/* Style applied to the root element */\n.saltInput {\n  --input-borderColor: var(--salt-editable-borderColor);\n  --input-borderStyle: var(--salt-editable-borderStyle);\n  --input-outlineColor: var(--salt-focused-outlineColor);\n  --input-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltInput-background, var(--input-background));\n  color: var(--saltInput-color, var(--salt-content-primary-foreground));\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltInput-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInput-height, var(--salt-size-base));\n  line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltInput-minHeight, var(--salt-size-base));\n  min-width: var(--saltInput-minWidth, 4em);\n  padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  width: 100%;\n}\n\n.saltInput:hover {\n  --input-borderStyle: var(--salt-editable-borderStyle-hover);\n  --input-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--saltInput-background-hover, var(--input-background-hover));\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltInput:active {\n  --input-borderColor: var(--salt-editable-borderColor-active);\n  --input-borderStyle: var(--salt-editable-borderStyle-active);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--saltInput-background-active, var(--input-background-active));\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInput-primary {\n  --input-background: var(--salt-editable-primary-background);\n  --input-background-active: var(--salt-editable-primary-background-active);\n  --input-background-hover: var(--salt-editable-primary-background-hover);\n  --input-background-disabled: var(--salt-editable-primary-background-disabled);\n  --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInput-secondary {\n  --input-background: var(--salt-editable-secondary-background);\n  --input-background-active: var(--salt-editable-secondary-background-active);\n  --input-background-hover: var(--salt-editable-secondary-background-active);\n  --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltInput-error,\n.saltInput-error:hover {\n  --input-background: var(--salt-status-error-background);\n  --input-background-active: var(--salt-status-error-background);\n  --input-background-hover: var(--salt-status-error-background);\n  --input-borderColor: var(--salt-status-error-borderColor);\n  --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInput-warning,\n.saltInput-warning:hover {\n  --input-background: var(--salt-status-warning-background);\n  --input-background-active: var(--salt-status-warning-background);\n  --input-background-hover: var(--salt-status-warning-background);\n  --input-borderColor: var(--salt-status-warning-borderColor);\n  --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInput-success,\n.saltInput-success:hover {\n  --input-background: var(--salt-status-success-background);\n  --input-background-active: var(--salt-status-success-background);\n  --input-background-hover: var(--salt-status-success-background);\n  --input-borderColor: var(--salt-status-success-borderColor);\n  --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltInput-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(--saltInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--input-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltInput-focused {\n  --input-borderColor: var(--input-outlineColor);\n  --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInput.saltInput-readOnly {\n  --input-borderColor: var(--salt-editable-borderColor-readonly);\n  --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltInput-focused.saltInput-disabled {\n  --input-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltInput-focused.saltInput-readOnly {\n  --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInput-disabled .saltInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInput.saltInput-disabled,\n.saltInput.saltInput-disabled:hover,\n.saltInput.saltInput-disabled:active {\n  --input-borderColor: var(--salt-editable-borderColor-disabled);\n  --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --input-borderWidth: var(--salt-size-border);\n\n  background: var(--input-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltInput-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.saltInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltInput-readOnly .saltInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltInput-startAdornmentContainer > .saltButton,\n.saltInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: var(--salt-spacing-50);\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Input.css.js.map

package/dist-es/link/Link.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-navigable-textDecoration);\n  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: 0px;\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n  margin-left: var(--salt-size-adornmentGap);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  --saltIcon-color: var(--link-color-visited);\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  --saltIcon-color: var(--link-color-hover);\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  --saltIcon-color: var(--link-color-active);\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  --saltIcon-color: var(--link-color-focus);\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
+var css_248z = ".saltLink {\n  --link-color-hover: var(--saltLink-color-hover, var(--salt-content-foreground-hover));\n  --link-color-active: var(--saltLink-color-active, var(--salt-content-foreground-active));\n  --link-color-visited: var(--saltLink-color-visited, var(--salt-content-foreground-visited));\n  /* When focused, we also want hover style */\n  --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover));\n\n  --link-textDecoration: var(--salt-navigable-textDecoration);\n  --link-textDecoration-hover: var(--salt-navigable-textDecoration-hover);\n\n  --link-fontFamily: var(--salt-text-fontFamily);\n  --link-focus-outline: var(--salt-focused-outline);\n}\n\n/* Main css class */\n.saltLink {\n  color: var(--link-color);\n  letter-spacing: 0px;\n  text-decoration: var(--link-textDecoration);\n  font-family: var(--link-fontFamily);\n}\n\n/* Primary variant */\n.saltText-primary {\n  --link-color: var(--salt-content-primary-foreground);\n}\n\n/* Secondary variant */\n.saltText-secondary {\n  --link-color: var(--salt-content-secondary-foreground);\n}\n\n/* External link's icon */\n.saltLink-icon {\n  margin-left: var(--salt-size-adornmentGap);\n  margin-bottom: -2px;\n}\n\n/* Set color for visited link */\n.saltLink:visited {\n  color: var(--link-color-visited);\n}\n\n/* Set color for hovered link */\n.saltLink:hover {\n  color: var(--link-color-hover);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Set color for active link */\n.saltLink:active {\n  color: var(--link-color-active);\n}\n\n/* Set color for focused link */\n.saltLink:focus {\n  outline: var(--link-focus-outline);\n  color: var(--link-color-focus);\n  text-decoration: var(--link-textDecoration-hover);\n}\n\n/* Class for ADA content */\n.saltLink-externalLinkADA {\n  display: block;\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n  top: 0px;\n  left: 0px;\n  opacity: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Link.css.js.map

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

@@ -1,4 +1,4 @@
-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\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\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);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\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";
+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\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) 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}\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);\n  border-color: var(--salt-status-error-borderColor);\n  outline-color: var(--salt-status-error-foreground);\n}\n\n.saltRadioButtonIcon-warning,\n.saltRadioButton:hover .saltRadioButtonIcon-warning {\n  color: var(--salt-status-warning-foreground);\n  border-color: var(--salt-status-warning-borderColor);\n  outline-color: var(--salt-status-warning-foreground);\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";
 
 export { css_248z as default };
 //# sourceMappingURL=RadioButtonIcon.css.js.map

package/dist-es/status-indicator/StatusIndicator.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltStatusIndicator {\n  --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n  --statusIndicator-info-color: var(--salt-status-info-foreground);\n  --statusIndicator-success-color: var(--salt-status-success-foreground);\n  --statusIndicator-error-color: var(--salt-status-error-foreground);\n  --saltIcon-color: var(--statusIndicator-Color);\n  color: var(--statusIndicator-Color);\n}\n\n.saltStatusIndicator-error {\n  --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-error-color));\n}\n\n.saltStatusIndicator-warning {\n  --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-warning-color));\n}\n\n.saltStatusIndicator-success {\n  --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-success-color));\n}\n\n.saltStatusIndicator-info {\n  --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-info-color));\n}\n";
+var css_248z = ".saltStatusIndicator {\n  --statusIndicator-warning-color: var(--salt-status-warning-foreground);\n  --statusIndicator-info-color: var(--salt-status-info-foreground);\n  --statusIndicator-success-color: var(--salt-status-success-foreground);\n  --statusIndicator-error-color: var(--salt-status-error-foreground);\n  color: var(--saltStatusIndicator-color, var(--statusIndicator-Color));\n}\n\n.saltStatusIndicator-error {\n  --statusIndicator-Color: var(--statusIndicator-error-color);\n}\n\n.saltStatusIndicator-warning {\n  --statusIndicator-Color: var(--statusIndicator-warning-color);\n}\n\n.saltStatusIndicator-success {\n  --statusIndicator-Color: var(--statusIndicator-success-color);\n}\n\n.saltStatusIndicator-info {\n  --statusIndicator-Color: var(--statusIndicator-info-color);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=StatusIndicator.css.js.map

package/dist-es/switch/Switch.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-color: currentColor;\n  --saltIcon-size: 100%;\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n  .saltSwitch:hover .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n";
+var css_248z = ".saltSwitch {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  color: var(--salt-content-primary-foreground);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n\n.saltSwitch-disabled {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n.saltSwitch-track {\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n  --saltIcon-size: 100%;\n  display: flex;\n  flex-shrink: 0;\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n  align-items: center;\n  color: var(--salt-selectable-foreground);\n  background: var(--salt-container-primary-background);\n}\n\n.saltSwitch-label {\n  padding-top: var(--salt-spacing-25);\n}\n\n/* Styles applied to the icon component if focused */\n.saltSwitch-input:focus-visible + .saltSwitch-track {\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline: var(--salt-focused-outline);\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-hover);\n  color: var(--salt-selectable-foreground-hover);\n}\n\n.saltSwitch-checked .saltSwitch-track,\n.saltSwitch-checked:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selected);\n  color: var(--salt-selectable-foreground-selected);\n}\n\n.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-disabled);\n  color: var(--salt-selectable-foreground-disabled);\n  background: var(--salt-container-primary-background-disabled);\n}\n\n.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track,\n.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track {\n  border-color: var(--salt-selectable-borderColor-selectedDisabled);\n  color: var(--salt-selectable-foreground-selectedDisabled);\n}\n\n.saltSwitch-thumb {\n  display: flex;\n  aspect-ratio: 1;\n  height: var(--salt-size-selectable);\n  background: currentColor;\n  margin: var(--salt-spacing-25);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor);\n}\n\n.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n.saltSwitch:hover .saltSwitch-thumb {\n  border-color: var(--salt-selectable-borderColor-hover);\n  transition: transform var(--salt-duration-perceptible) ease-in-out;\n}\n\n.saltSwitch-checked .saltSwitch-thumb,\n.saltSwitch-checked:hover .saltSwitch-thumb {\n  background: transparent;\n  border-color: var(--salt-selectable-borderColor-selected);\n  transform: translateX(100%);\n}\n\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb {\n  border: 0;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2);\n}\n\n@media (prefers-reduced-motion) {\n  .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb,\n  .saltSwitch:hover .saltSwitch-thumb {\n    transition: none;\n  }\n}\n\n.salt-density-high .saltSwitch-thumb {\n  border: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Switch.css.js.map

package/dist-es/toggle-button/ToggleButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-text-action-textTransform);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-action-textAlign);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
+var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-text-action-textTransform);\n  font-weight: var(--salt-text-action-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-text-action-textAlign);\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggleButton.css.js.map

package/dist-es/tooltip/Tooltip.js

@@ -69,8 +69,8 @@ const Tooltip = forwardRef(
         /* @__PURE__ */ jsx(FloatingComponent, {
           className: clsx(withBaseName(), withBaseName(status), className),
           open: open && !disabled,
-          ref: floatingRef,
           ...getTooltipProps(),
+          ref: floatingRef,
           ...getTooltipPosition(),
           children: /* @__PURE__ */ jsx(TooltipBase, {
             hideIcon,

package/dist-es/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  isValidElement,\n  ReactNode,\n} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n  useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\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. Defaults to 300ms.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\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: disabledProp = false,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled ?? disabledProp;\n    const status =\n      formFieldValidationStatus !== undefined &&\n      VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n        ? formFieldValidationStatus\n        : statusProp;\n    const { Component: FloatingComponent } = useFloatingComponent();\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      getTooltipPosition,\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);\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        <FloatingComponent\n          className={clsx(withBaseName(), withBaseName(status), className)}\n          open={open && !disabled}\n          ref={floatingRef}\n          {...getTooltipProps()}\n          {...getTooltipPosition()}\n        >\n          <TooltipBase\n            hideIcon={hideIcon}\n            status={status}\n            content={content}\n            hideArrow={hideArrow}\n            arrowProps={arrowProps}\n          />\n        </FloatingComponent>\n      </>\n    );\n  }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SACJ,yBAA8B,KAAA,KAAA,CAAA,IAC9B,wBAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,UAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,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,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,UAAW,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5C,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACf,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,eAAgB,EAAA;AAAA,UACnB,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"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} from \"react\";\n\nimport { ValidationStatus, VALIDATION_NAMED_STATUS } from \"../status-indicator\";\nimport {\n  makePrefixer,\n  mergeProps,\n  UseFloatingUIProps,\n  useForkRef,\n  useFloatingComponent,\n} from \"../utils\";\n\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { TooltipBase } from \"./TooltipBase\";\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. Defaults to 300ms.\n   */\n  leaveDelay?: number;\n  /**\n   * Option to not display the Tooltip. Can be used in conditional situations like text truncation. Defaults to 0.\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: disabledProp = false,\n      hideArrow = false,\n      hideIcon = false,\n      open: openProp,\n      content,\n      status: statusProp = \"info\",\n      placement = \"right\",\n      enterDelay = 300,\n      leaveDelay = 0,\n      ...rest\n    } = props;\n\n    const {\n      disabled: formFieldDisabled,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const disabled = formFieldDisabled ?? disabledProp;\n    const status =\n      formFieldValidationStatus !== undefined &&\n      VALIDATION_NAMED_STATUS.includes(formFieldValidationStatus)\n        ? formFieldValidationStatus\n        : statusProp;\n    const { Component: FloatingComponent } = useFloatingComponent();\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      getTooltipPosition,\n    } = useTooltip(hookProps);\n\n    const triggerRef = useForkRef(\n      // @ts-expect-error children.ref cannot currently be typed.\n      isValidElement(children) ? children.ref : null,\n      reference\n    );\n\n    const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n    return (\n      <>\n        {isValidElement(children) &&\n          cloneElement(children, {\n            ...mergeProps(getTriggerProps(), children.props),\n            ref: triggerRef,\n          })}\n\n        <FloatingComponent\n          className={clsx(withBaseName(), withBaseName(status), className)}\n          open={open && !disabled}\n          {...getTooltipProps()}\n          ref={floatingRef}\n          {...getTooltipPosition()}\n        >\n          <TooltipBase\n            hideIcon={hideIcon}\n            status={status}\n            content={content}\n            hideArrow={hideArrow}\n            arrowProps={arrowProps}\n          />\n        </FloatingComponent>\n      </>\n    );\n  }\n);\n"],"names":["Tooltip"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAA,UAAA;AAAA,EACrB,SAASA,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAU,YAAe,GAAA,KAAA;AAAA,MACzB,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,QAAQ,UAAa,GAAA,MAAA;AAAA,MACrB,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA;AAAA,MACJ,QAAU,EAAA,iBAAA;AAAA,MACV,gBAAkB,EAAA,yBAAA;AAAA,QAChB,iBAAkB,EAAA,CAAA;AAEtB,IAAA,MAAM,WAAW,iBAAqB,IAAA,IAAA,GAAA,iBAAA,GAAA,YAAA,CAAA;AACtC,IAAA,MAAM,SACJ,yBAA8B,KAAA,KAAA,CAAA,IAC9B,wBAAwB,QAAS,CAAA,yBAAyB,IACtD,yBACA,GAAA,UAAA,CAAA;AACN,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE9D,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,MACA,kBAAA;AAAA,KACF,GAAI,WAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAA,UAAA;AAAA,MAEjB,cAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,WAAA,GAAc,UAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,UAAA,CAAW,eAAgB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,UAC/C,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,wBAEF,GAAA,CAAA,iBAAA,EAAA;AAAA,UACC,WAAW,IAAK,CAAA,YAAA,IAAgB,YAAa,CAAA,MAAM,GAAG,SAAS,CAAA;AAAA,UAC/D,IAAA,EAAM,QAAQ,CAAC,QAAA;AAAA,UACd,GAAG,eAAgB,EAAA;AAAA,UACpB,GAAK,EAAA,WAAA;AAAA,UACJ,GAAG,kBAAmB,EAAA;AAAA,UAEvB,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,MAAA;AAAA,YACA,OAAA;AAAA,YACA,SAAA;AAAA,YACA,UAAA;AAAA,WACF,CAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/tooltip/useTooltip.js

@@ -71,12 +71,7 @@ function useTooltip(props) {
   ]);
   const arrowProps = {
     ref: arrowRef,
-    context,
-    style: {
-      position: strategy,
-      left: arrowX != null ? arrowX : 0,
-      top: arrowY != null ? arrowY : 0
-    }
+    context
   };
   const getTooltipProps = () => {
     return getFloatingProps({

package/dist-es/tooltip/useTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props || {};\n\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const {\n    floating,\n    reference,\n    x,\n    y,\n    strategy,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n    placement,\n    context,\n    elements,\n  } = useFloatingUI({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: placementProp,\n    middleware: [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    context,\n    style: {\n      position: strategy,\n      left: arrowX ?? 0,\n      top: arrowY ?? 0,\n    },\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n    });\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  const getTooltipPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.offsetWidth,\n    height: elements.floating?.offsetHeight,\n  });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n    getTooltipPosition,\n  };\n}\n"],"names":["open"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","sources":["../src/tooltip/useTooltip.ts"],"sourcesContent":["import {\n  arrow,\n  flip,\n  offset,\n  safePolygon,\n  shift,\n  useDismiss,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  limitShift,\n} from \"@floating-ui/react\";\nimport { HTMLProps, useRef } from \"react\";\nimport { useControlled, UseFloatingUIProps, useFloatingUI } from \"../utils\";\nimport { useAriaAnnounce } from \"./useAriaAnnounce\";\n\nexport interface UseTooltipProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  /**\n   * Do not respond to focus events.\n   */\n  disableFocusListener?: boolean;\n  /**\n   * Do not respond to hover events.\n   */\n  disableHoverListener?: boolean;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This prop won't impact the enter touch delay (`enterTouchDelay`).\n   */\n  enterDelay?: number;\n  /**\n   * The number of milliseconds to wait before hiding the tooltip.\n   * This prop won't impact the leave touch delay (`leaveTouchDelay`).\n   */\n  leaveDelay?: number;\n}\n\nexport function useTooltip(props?: UseTooltipProps) {\n  const {\n    enterDelay,\n    leaveDelay,\n    open: openProp,\n    onOpenChange,\n    placement: placementProp,\n    disableHoverListener,\n    disableFocusListener,\n  } = props || {};\n\n  const arrowRef = useRef<SVGSVGElement | null>(null);\n\n  const [open, setOpen] = useControlled({\n    controlled: openProp,\n    default: false,\n    name: \"Tooltip\",\n    state: \"open\",\n  });\n  const handleOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const {\n    floating,\n    reference,\n    x,\n    y,\n    strategy,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n    placement,\n    context,\n    elements,\n  } = useFloatingUI({\n    open,\n    onOpenChange: handleOpenChange,\n    placement: placementProp,\n    middleware: [\n      offset(8),\n      flip(),\n      shift({ limiter: limitShift() }),\n      arrow({ element: arrowRef }),\n    ],\n  });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n      enabled: !disableHoverListener,\n      handleClose: safePolygon(),\n    }),\n    useFocus(context, { enabled: !disableFocusListener }),\n    useRole(context, { role: \"tooltip\" }),\n    useDismiss(context),\n    useAriaAnnounce(context, {\n      delay: {\n        open: enterDelay,\n        close: leaveDelay,\n      },\n    }),\n  ]);\n\n  const arrowProps = {\n    ref: arrowRef,\n    context,\n  };\n\n  const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n    });\n  };\n\n  const getTriggerProps = () =>\n    getReferenceProps({\n      ref: reference,\n    });\n\n  const getTooltipPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.offsetWidth,\n    height: elements.floating?.offsetHeight,\n  });\n\n  return {\n    arrowProps,\n    open,\n    floating,\n    reference,\n    getTooltipProps,\n    getTriggerProps,\n    getTooltipPosition,\n  };\n}\n"],"names":["open"],"mappings":"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"}

package/dist-es/utils/marginMiddleware.js

@@ -1,8 +1,8 @@
 const margin = (value = 0) => ({
   name: "margin",
   options: value,
-  fn(middlewareArguments) {
-    const { x, y, elements } = middlewareArguments;
+  fn(middlewareState) {
+    const { x, y, elements } = middlewareState;
     if (elements.floating.children.length > 0) {
       const rootChildElement = elements.floating.children[0];
       rootChildElement.style.setProperty("margin", value.toString());

package/dist-es/utils/marginMiddleware.js.map

@@ -1 +1 @@
-{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\nimport { MiddlewareArguments } from \"@floating-ui/react\";\n\nexport const margin = (value = 0): Middleware => ({\n  name: \"margin\",\n  options: value,\n  fn(middlewareArguments: MiddlewareArguments) {\n    const { x, y, elements } = middlewareArguments;\n\n    if (elements.floating.children.length > 0) {\n      const rootChildElement = elements.floating.children[0] as HTMLElement;\n      rootChildElement.style.setProperty(\"margin\", value.toString());\n    }\n    return {\n      x: x,\n      y: y,\n    };\n  },\n});\n"],"names":[],"mappings":"AAGa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,mBAA0C,EAAA;AAC3C,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,mBAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}
+{"version":3,"file":"marginMiddleware.js","sources":["../src/utils/marginMiddleware.ts"],"sourcesContent":["import { Middleware } from \"@floating-ui/core\";\n\nexport const margin = (value = 0): Middleware => ({\n  name: \"margin\",\n  options: value,\n  fn(middlewareState) {\n    const { x, y, elements } = middlewareState;\n\n    if (elements.floating.children.length > 0) {\n      const rootChildElement = elements.floating.children[0] as HTMLElement;\n      rootChildElement.style.setProperty(\"margin\", value.toString());\n    }\n    return {\n      x: x,\n      y: y,\n    };\n  },\n});\n"],"names":[],"mappings":"AAEa,MAAA,MAAA,GAAS,CAAC,KAAA,GAAQ,CAAmB,MAAA;AAAA,EAChD,IAAM,EAAA,QAAA;AAAA,EACN,OAAS,EAAA,KAAA;AAAA,EACT,GAAG,eAAiB,EAAA;AAClB,IAAA,MAAM,EAAE,CAAA,EAAG,CAAG,EAAA,QAAA,EAAa,GAAA,eAAA,CAAA;AAE3B,IAAA,IAAI,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,MAAA,GAAS,CAAG,EAAA;AACzC,MAAM,MAAA,gBAAA,GAAmB,QAAS,CAAA,QAAA,CAAS,QAAS,CAAA,CAAA,CAAA,CAAA;AACpD,MAAA,gBAAA,CAAiB,KAAM,CAAA,WAAA,CAAY,QAAU,EAAA,KAAA,CAAM,UAAU,CAAA,CAAA;AAAA,KAC/D;AACA,IAAO,OAAA;AAAA,MACL,CAAA;AAAA,MACA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACF,CAAA;;;;"}

package/dist-es/utils/useFloatingUI/useFloatingUI.js

@@ -4,7 +4,15 @@ import { forwardRef, createContext, useMemo, useContext } from 'react';
 import { SaltProvider } from '../../salt-provider/SaltProvider.js';
 
 const DefaultFloatingComponent = forwardRef(function DefaultFloatingComponent2(props, ref) {
-  const { open, top, left, position, ...rest } = props;
+  const {
+    open,
+    top,
+    left,
+    position,
+    width,
+    height,
+    ...rest
+  } = props;
   const style = {
     top,
     left,
@@ -90,7 +98,7 @@ function useFloatingUI(props) {
     middleware: contextMiddleware,
     animationFrame
   } = useFloatingPlatform();
-  const { reference, floating, refs, update, ...rest } = useFloating({
+  const { refs, update, ...rest } = useFloating({
     placement,
     strategy,
     middleware: contextMiddleware(middleware),
@@ -103,8 +111,8 @@ function useFloatingUI(props) {
     platform: contextPlaform
   });
   return {
-    reference,
-    floating,
+    reference: refs.setReference,
+    floating: refs.setFloating,
     refs,
     update,
     ...rest

package/dist-es/utils/useFloatingUI/useFloatingUI.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  Middleware,\n  Placement,\n  Platform,\n  Strategy,\n  autoUpdate,\n  flip,\n  limitShift,\n  platform,\n  shift,\n  useFloating,\n  FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n  createContext,\n  ReactNode,\n  useContext,\n  useMemo,\n  forwardRef,\n  PropsWithChildren,\n  Ref,\n  ForwardRefExoticComponent,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\ntype CombinedFloatingComponentProps = PropsWithChildren<FloatingComponentProps>;\nexport interface FloatingComponentProps {\n  /**\n   * Whether the floating component is open (used for determinig whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Position props for the floating component\n   */\n  top: number;\n  left: number;\n  width?: number;\n  height?: number;\n  position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLElement,\n  CombinedFloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const { open, top, left, position, ...rest } = props;\n  const style = {\n    top,\n    left,\n    position,\n  };\n  return open ? (\n    <FloatingPortal>\n      <SaltProvider>\n        <div style={style} {...rest} ref={ref as Ref<HTMLDivElement>} />\n      </SaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: ForwardRefExoticComponent<CombinedFloatingComponentProps>;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps {\n  /**\n   * Sets position relative to trigger.\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n  /**\n   * Sets visible state.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame ?? false,\n    }),\n    [platformProp, middleware, animationFrame]\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\nexport function useFloatingUI(\n  props: UseFloatingUIProps\n): ReturnType<typeof useFloating> {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const handleOpenChange = (open: boolean) => {\n    update();\n    onOpenChange?.(open);\n  };\n\n  const {\n    platform: contextPlaform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { reference, floating, refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlaform,\n  });\n\n  return {\n    reference,\n    floating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}
+{"version":3,"file":"useFloatingUI.js","sources":["../src/utils/useFloatingUI/useFloatingUI.tsx"],"sourcesContent":["import {\n  Middleware,\n  Placement,\n  Platform,\n  Strategy,\n  autoUpdate,\n  flip,\n  limitShift,\n  platform,\n  shift,\n  useFloating,\n  FloatingPortal,\n} from \"@floating-ui/react\";\n\nimport {\n  createContext,\n  ReactNode,\n  useContext,\n  useMemo,\n  forwardRef,\n  ComponentPropsWithoutRef,\n} from \"react\";\n\nimport { SaltProvider } from \"../../salt-provider\";\n\nexport interface FloatingComponentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Whether the floating component is open (used for determinig whether to show the component)\n   * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.\n   * for caching windows and reusing them, rather than always spawning a new one\n   */\n  open: boolean;\n  /**\n   * Position props for the floating component\n   */\n  top: number;\n  left: number;\n  width?: number;\n  height?: number;\n  position: Strategy;\n}\n\nconst DefaultFloatingComponent = forwardRef<\n  HTMLDivElement,\n  FloatingComponentProps\n>(function DefaultFloatingComponent(props, ref) {\n  const {\n    open,\n    top,\n    left,\n    position,\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    width,\n    height,\n    /* eslint-enable @typescript-eslint/no-unused-vars */\n    ...rest\n  } = props;\n  const style = {\n    top,\n    left,\n    position,\n  };\n  return open ? (\n    <FloatingPortal>\n      <SaltProvider>\n        <div style={style} {...rest} ref={ref} />\n      </SaltProvider>\n    </FloatingPortal>\n  ) : null;\n});\n\nexport interface FloatingComponentContextType {\n  Component: typeof DefaultFloatingComponent;\n}\n\nconst FloatingComponentContext = createContext<FloatingComponentContextType>({\n  Component: DefaultFloatingComponent,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n  FloatingComponentContext.displayName = \"FloatingComponentContext\";\n}\n\nexport interface FloatingComponentProviderProps\n  extends FloatingComponentContextType {\n  children: ReactNode;\n}\n\nexport function FloatingComponentProvider(\n  props: FloatingComponentProviderProps\n) {\n  const { Component, children } = props;\n  const value = useMemo(() => ({ Component }), [Component]);\n\n  return (\n    <FloatingComponentContext.Provider value={value}>\n      {children}\n    </FloatingComponentContext.Provider>\n  );\n}\n\nexport function useFloatingComponent() {\n  return useContext(FloatingComponentContext);\n}\n\nexport interface UseFloatingUIProps {\n  /**\n   * Sets position relative to trigger.\n   */\n  placement?: Placement;\n  strategy?: Strategy;\n  /**\n   * Function to update the default middleware used to extend or replace it\n   */\n  middleware?: Middleware[];\n  /**\n   * Sets visible state.\n   */\n  open?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\ntype GetMiddleware = (middleware: Middleware[]) => Middleware[];\n\nconst defaultGetMiddleware: GetMiddleware = (defaultMiddleware) =>\n  defaultMiddleware;\n\ninterface FloatingPlatformContextType {\n  platform: Platform;\n  middleware: GetMiddleware;\n  animationFrame: boolean;\n}\n\nconst defaultFloatingPlaform: FloatingPlatformContextType = {\n  platform,\n  middleware: defaultGetMiddleware,\n  animationFrame: false,\n};\n\nconst FloatingPlatformContext = createContext<FloatingPlatformContextType>(\n  defaultFloatingPlaform\n);\n\nexport interface FloatingPlatformProviderProps {\n  platform?: Platform;\n  middleware?: GetMiddleware;\n  children: ReactNode;\n  animationFrame?: boolean;\n}\n\nexport function FloatingPlatformProvider(props: FloatingPlatformProviderProps) {\n  const {\n    platform: platformProp,\n    middleware,\n    animationFrame,\n    children,\n  } = props;\n\n  const floatingPlatformContextValue = useMemo<FloatingPlatformContextType>(\n    () => ({\n      platform: platformProp ?? platform,\n      middleware: middleware ?? defaultGetMiddleware,\n      animationFrame: animationFrame ?? false,\n    }),\n    [platformProp, middleware, animationFrame]\n  );\n\n  return (\n    <FloatingPlatformContext.Provider value={floatingPlatformContextValue}>\n      {children}\n    </FloatingPlatformContext.Provider>\n  );\n}\n\nexport function useFloatingPlatform() {\n  return useContext(FloatingPlatformContext);\n}\n\nexport const DEFAULT_FLOATING_UI_MIDDLEWARE = [\n  flip(),\n  shift({ limiter: limitShift() }),\n];\n\ntype UseFloatingRefs = ReturnType<typeof useFloating>[\"refs\"];\n\nexport interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {\n  reference: UseFloatingRefs[\"setReference\"];\n  floating: UseFloatingRefs[\"setFloating\"];\n}\n\nexport function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn {\n  const {\n    placement,\n    strategy,\n    middleware = DEFAULT_FLOATING_UI_MIDDLEWARE,\n    open = false,\n    onOpenChange,\n  } = props;\n\n  const handleOpenChange = (open: boolean) => {\n    update();\n    onOpenChange?.(open);\n  };\n\n  const {\n    platform: contextPlaform,\n    middleware: contextMiddleware,\n    animationFrame,\n  } = useFloatingPlatform();\n\n  const { refs, update, ...rest } = useFloating({\n    placement,\n    strategy,\n    middleware: contextMiddleware(middleware),\n    open,\n    onOpenChange: handleOpenChange,\n    whileElementsMounted: (...args) => {\n      const cleanup = autoUpdate(...args, { animationFrame });\n\n      return cleanup;\n    },\n    platform: contextPlaform,\n  });\n\n  return {\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    refs,\n    update,\n    ...rest,\n  };\n}\n"],"names":["DefaultFloatingComponent","open"],"mappings":"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"}

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

@@ -24,17 +24,16 @@ export declare function useTooltip(props?: UseTooltipProps): {
     arrowProps: {
         ref: import("react").MutableRefObject<SVGSVGElement | null>;
         context: {
-            x: number | null;
-            y: number | null;
+            x: number;
+            y: number;
             placement: import("@floating-ui/utils").Placement;
             strategy: import("@floating-ui/utils").Strategy;
             middlewareData: import("@floating-ui/core").MiddlewareData;
-            reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
-            floating: (node: HTMLElement | null) => void;
-            update: () => void;
             isPositioned: boolean;
+            update: () => void;
+            floatingStyles: import("react").CSSProperties;
             open: boolean;
-            onOpenChange: (open: boolean) => void;
+            onOpenChange: (open: boolean, event?: Event | undefined, reason?: import("@floating-ui/react").OpenChangeReason | undefined) => void;
             events: import("@floating-ui/react").FloatingEvents;
             dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
             nodeId: string | undefined;
@@ -42,15 +41,10 @@ export declare function useTooltip(props?: UseTooltipProps): {
             refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
             elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
         };
-        style: {
-            position: import("@floating-ui/utils").Strategy;
-            left: number;
-            top: number;
-        };
     };
     open: boolean;
-    floating: (node: HTMLElement | null) => void;
-    reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
+    floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
     getTooltipProps: () => HTMLProps<HTMLDivElement>;
     getTriggerProps: () => Record<string, unknown>;
     getTooltipPosition: () => {

package/dist-types/utils/useFloatingUI/useFloatingUI.d.ts

@@ -1,7 +1,6 @@
 import { Middleware, Placement, Platform, Strategy, useFloating } from "@floating-ui/react";
-import { ReactNode, PropsWithChildren, ForwardRefExoticComponent } from "react";
-declare type CombinedFloatingComponentProps = PropsWithChildren<FloatingComponentProps>;
-export interface FloatingComponentProps {
+import { ReactNode, ComponentPropsWithoutRef } from "react";
+export interface FloatingComponentProps extends ComponentPropsWithoutRef<"div"> {
     /**
      * Whether the floating component is open (used for determinig whether to show the component)
      * We pass this as a prop rather than not rendering the component to allow more advanced use-cases e.g.
@@ -17,8 +16,9 @@ export interface FloatingComponentProps {
     height?: number;
     position: Strategy;
 }
+declare const DefaultFloatingComponent: import("react").ForwardRefExoticComponent<FloatingComponentProps & import("react").RefAttributes<HTMLDivElement>>;
 export interface FloatingComponentContextType {
-    Component: ForwardRefExoticComponent<CombinedFloatingComponentProps>;
+    Component: typeof DefaultFloatingComponent;
 }
 export interface FloatingComponentProviderProps extends FloatingComponentContextType {
     children: ReactNode;
@@ -64,14 +64,19 @@ export declare const DEFAULT_FLOATING_UI_MIDDLEWARE: {
     fn: (state: {
         x: number;
         y: number;
+        platform: import("@floating-ui/core").Platform;
         initialPlacement: Placement;
         placement: Placement;
         strategy: Strategy;
         middlewareData: import("@floating-ui/core").MiddlewareData;
         rects: import("@floating-ui/utils").ElementRects;
-        platform: import("@floating-ui/core").Platform;
         elements: import("@floating-ui/dom").Elements;
     }) => import("@floating-ui/core").MiddlewareReturn | Promise<import("@floating-ui/core").MiddlewareReturn>;
 }[];
-export declare function useFloatingUI(props: UseFloatingUIProps): ReturnType<typeof useFloating>;
+declare type UseFloatingRefs = ReturnType<typeof useFloating>["refs"];
+export interface UseFloatingUIReturn extends ReturnType<typeof useFloating> {
+    reference: UseFloatingRefs["setReference"];
+    floating: UseFloatingRefs["setFloating"];
+}
+export declare function useFloatingUI(props: UseFloatingUIProps): UseFloatingUIReturn;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.13.2",
+  "version": "1.13.4",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -11,11 +11,11 @@
   "main": "dist-cjs/index.js",
   "sideEffects": false,
   "dependencies": {
-    "@floating-ui/react": "^0.23.0",
+    "@floating-ui/react": "^0.26.5",
     "clsx": "^2.0.0",
     "@salt-ds/window": "^0.1.1",
-    "@salt-ds/styles": "^0.2.0",
-    "@salt-ds/icons": "^1.9.0"
+    "@salt-ds/styles": "^0.2.1",
+    "@salt-ds/icons": "^1.9.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0",