npm - @salt-ds/core - Versions diffs - 1.5.0 → 1.6.0 - Mend

@salt-ds/core 1.5.0 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (54) hide show

package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js CHANGED Viewed

@@ -8,6 +8,7 @@ require('../utils/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
+require('clsx');
 var AriaAnnouncerContext = require('./AriaAnnouncerContext.js');
 let warnedOnce = false;

package/dist-cjs/packages/core/src/aria-announcer/useAriaAnnouncer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":["useContext","AriaAnnouncerContext","useRef","useCallback","useMemo","debounce","useEffect"],"mappings":"~~;;;;;;;;;;;;~~AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAaC,aAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAAC,aAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACfC,iBAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAD,aAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
1	+ {"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":["useContext","AriaAnnouncerContext","useRef","useCallback","useMemo","debounce","useEffect"],"mappings":";;;;;;;;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAUA,iBAAWC,yCAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAaC,aAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAAC,aAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACfC,iBAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAAD,aAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}

package/dist-cjs/packages/core/src/avatar/Avatar.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-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-accent-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-base: 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-accent-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  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-accent-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-icon-size-base: 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-accent-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  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";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/core/src/avatar/useAvatarImage.js CHANGED Viewed

@@ -8,6 +8,7 @@ require('../utils/useId.js');
 var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
+require('clsx');
 function useAvatarImage({ src }) {
   const [status, setStatus] = React.useState("loading");

package/dist-cjs/packages/core/src/avatar/useAvatarImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nexport function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [status, setStatus] = useState<\n \"pending\" \| \"loading\" \| \"loaded\" \| \"error\"\n >(\"loading\");\n\n useEffect(() => {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!src) {\n return;\n }\n\n let active = true;\n const image = new Image();\n image.src = src;\n const onLoad = () => active && setStatus(\"loaded\");\n const onError = () => active && setStatus(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return status;\n}\n"],"names":["useState","useEffect","useIsomorphicLayoutEffect"],"mappings":"~~;;;;;;;;;;;~~AAGgB,SAAA,cAAA,CAAe,EAAE,GAAA,EAA4C,EAAA;AAC3E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAE1B,SAAS,CAAA,CAAA;AAEX,EAAAC,eAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,GAAA,GAAM,YAAY,SAAS,CAAA,CAAA;AAAA,GACvC,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
1	+ {"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nexport function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [status, setStatus] = useState<\n \"pending\" \| \"loading\" \| \"loaded\" \| \"error\"\n >(\"loading\");\n\n useEffect(() => {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!src) {\n return;\n }\n\n let active = true;\n const image = new Image();\n image.src = src;\n const onLoad = () => active && setStatus(\"loaded\");\n const onError = () => active && setStatus(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return status;\n}\n"],"names":["useState","useEffect","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;;;AAGgB,SAAA,cAAA,CAAe,EAAE,GAAA,EAA4C,EAAA;AAC3E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,eAE1B,SAAS,CAAA,CAAA;AAEX,EAAAC,eAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,GAAA,GAAM,YAAY,SAAS,CAAA,CAAA;AAAA,GACvC,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

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

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

package/dist-cjs/packages/core/src/flex-item/FlexItem.js CHANGED Viewed

@@ -8,8 +8,8 @@ var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI.js');
 require('../utils/useId.js');
 var useResponsiveProp = require('../utils/useResponsiveProp.js');
-require('./FlexItem.css.js');
 var clsx = require('clsx');
+require('./FlexItem.css.js');
 const withBaseName = makePrefixer.makePrefixer("saltFlexItem");
 const FLEX_ITEM_ALIGNMENTS = [

package/dist-cjs/packages/core/src/index.js CHANGED Viewed

@@ -60,6 +60,7 @@ var useIsFocusVisible = require('./utils/useIsFocusVisible.js');
 var useIsomorphicLayoutEffect = require('./utils/useIsomorphicLayoutEffect.js');
 var usePrevious = require('./utils/usePrevious.js');
 var useResponsiveProp = require('./utils/useResponsiveProp.js');
+var mergeProps = require('./utils/mergeProps.js');
 var ViewportProvider = require('./viewport/ViewportProvider.js');
@@ -148,6 +149,7 @@ exports.getCurrentBreakpoint = useResponsiveProp.getCurrentBreakpoint;
 exports.useCurrentBreakpoint = useResponsiveProp.useCurrentBreakpoint;
 exports.useOrderedBreakpoints = useResponsiveProp.useOrderedBreakpoints;
 exports.useResponsiveProp = useResponsiveProp.useResponsiveProp;
+exports.mergeProps = mergeProps.mergeProps;
 exports.ViewportContext = ViewportProvider.ViewportContext;
 exports.ViewportProvider = ViewportProvider.ViewportProvider;
 exports.useViewport = ViewportProvider.useViewport;

package/dist-cjs/packages/core/src/index.js.map CHANGED Viewed

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

package/dist-cjs/packages/core/src/radio-button/RadioButtonIcon.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon circle */\n.saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-fill, var(--salt-container-primary-background));\n  stroke: var(--saltRadioButton-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-hover-fill, var(--salt-selectable-background-hover));\n  stroke: var(--saltRadioButton-icon-stroke-hover, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied to radio button icon if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-fill, var(--salt-selectable-foreground-selected));\n  stroke: var(--saltRadioButton-icon-checked-stroke, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to radio button icon if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-disabled-stroke, var(--salt-selectable-foreground-disabled));\n}\n\n/* Styles applied to radio button icon if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-checked-disabled-stroke, var(--salt-selectable-foreground-selectedDisabled));\n  stroke-width: calc(var(--salt-size-border) * 6.5);\n}\n\n/* Styles applied to radio button icon with error */\n.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-hover-fill, var(--salt-status-error-background-emphasize));\n}\n\n/* Styles applied to radio button icon with error and disabled */\n.saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to radio button icon when checked and with error */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-fill, var(--salt-status-error-foreground));\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n/* Styles applied to radio button icon when checked and with error and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to checked inner circle */\n.saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-container-primary-background));\n}\n\n/* Styles applied to checked inner circle when disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-disabled-fill, var(--salt-container-primary-background-disabled));\n}\n";
+var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon circle */\n.saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-fill, var(--salt-container-primary-background));\n  stroke: var(--saltRadioButton-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-hover-fill, var(--salt-selectable-background-hover));\n  stroke: var(--saltRadioButton-icon-stroke-hover, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied to radio button icon if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-fill, var(--salt-selectable-foreground-selected));\n  stroke: var(--saltRadioButton-icon-checked-stroke, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to radio button icon if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-disabled-stroke, var(--salt-selectable-foreground-disabled));\n}\n\n/* Styles applied to radio button icon if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-checked-disabled-stroke, var(--salt-selectable-foreground-selectedDisabled));\n  stroke-width: calc(var(--salt-size-border) * 6.5);\n}\n\n/* Styles applied to radio button icon with error */\n.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-hover-fill, var(--salt-status-error-background));\n}\n\n/* Styles applied to radio button icon with error and disabled */\n.saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to radio button icon when checked and with error */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-fill, var(--salt-status-error-foreground));\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n/* Styles applied to radio button icon when checked and with error and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to checked inner circle */\n.saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-container-primary-background));\n}\n\n/* Styles applied to checked inner circle when disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-disabled-fill, var(--salt-container-primary-background-disabled));\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

package/dist-cjs/packages/core/src/radio-button/internal/RadioGroupContext.js CHANGED Viewed

@@ -8,6 +8,7 @@ require('../../utils/useFloatingUI.js');
 require('../../utils/useId.js');
 require('../../salt-provider/SaltProvider.js');
 require('../../viewport/ViewportProvider.js');
+require('clsx');
 const RadioGroupContext = createContext.createContext(
   "RadioGroupContext",

package/dist-cjs/packages/core/src/radio-button/internal/RadioGroupContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n \"RadioGroupContext\",\n {}\n);\n"],"names":["createContext"],"mappings":"~~;;;;;;;;;;;~~AASO,MAAM,iBAAoB,GAAAA,2BAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}
1	+ {"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n \"RadioGroupContext\",\n {}\n);\n"],"names":["createContext"],"mappings":";;;;;;;;;;;;AASO,MAAM,iBAAoB,GAAAA,2BAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js CHANGED Viewed

@@ -9,6 +9,7 @@ require('../../utils/useFloatingUI.js');
 require('../../utils/useId.js');
 require('../../salt-provider/SaltProvider.js');
 require('../../viewport/ViewportProvider.js');
+require('clsx');
 const withBaseName = makePrefixer.makePrefixer("saltSpinner");
 const SpinnerSVG = (props) => {

package/dist-cjs/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\n/* SVG based on MD, do not change viewbox attribute */\nexport const SpinnerSVG = (props: {\n id?: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n}) => {\n const { id: idProp, rest } = props;\n const id = idProp \|\| \"svg-spinner\";\n\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox=\"0 0 28 28\"\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"100%\" x2=\"0%\" y1=\"78%\" y2=\"78%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop className={withBaseName(\"gradientStop\")} offset=\"100%\" />\n </linearGradient>\n <linearGradient id={`${id}-2`} x1=\"13%\" x2=\"100%\" y1=\"0%\" y2=\"87%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M28 14H24C24 8.47715 19.5228 4 14 4C8.47715 4 4 8.47715 4 14 H 0 C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14Z\"\n fill={`url(#${id}-1)`}\n />\n <path\n d=\"M4 14 C4 19.5228 8.47715 24 14 24V28C6.26801 28 0 21.732 0 14 Z\"\n fill={`url(#${id}-2)`}\n />\n </g>\n </svg>\n );\n};\n"],"names":["makePrefixer","jsxs","jsx"],"mappings":"~~;;;;;;;;;;;;~~AAGA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAGlC,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,MAAQ,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC7B,EAAA,MAAM,KAAK,MAAU,IAAA,aAAA,CAAA;AAErB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,IACjC,OAAQ,EAAA,WAAA;AAAA,IACR,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,MAAA,EAAA;AAAA,QACC,QAAA,EAAA;AAAA,0BAACA,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,MAAA;AAAA,eAAO,CAAA;AAAA,aAAA;AAAA,WAC/D,CAAA;AAAA,0BACCD,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBACtC,MAAO,EAAA,MAAA;AAAA,gBACP,WAAY,EAAA,GAAA;AAAA,eACd,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACCD,eAAA,CAAA,GAAA,EAAA;AAAA,QAAE,IAAK,EAAA,MAAA;AAAA,QAAO,QAAS,EAAA,SAAA;AAAA,QACtB,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,uHAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,0BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,iEAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\n/* SVG based on MD, do not change viewbox attribute */\nexport const SpinnerSVG = (props: {\n id?: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n}) => {\n const { id: idProp, rest } = props;\n const id = idProp \|\| \"svg-spinner\";\n\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox=\"0 0 28 28\"\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"100%\" x2=\"0%\" y1=\"78%\" y2=\"78%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop className={withBaseName(\"gradientStop\")} offset=\"100%\" />\n </linearGradient>\n <linearGradient id={`${id}-2`} x1=\"13%\" x2=\"100%\" y1=\"0%\" y2=\"87%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M28 14H24C24 8.47715 19.5228 4 14 4C8.47715 4 4 8.47715 4 14 H 0 C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14Z\"\n fill={`url(#${id}-1)`}\n />\n <path\n d=\"M4 14 C4 19.5228 8.47715 24 14 24V28C6.26801 28 0 21.732 0 14 Z\"\n fill={`url(#${id}-2)`}\n />\n </g>\n </svg>\n );\n};\n"],"names":["makePrefixer","jsxs","jsx"],"mappings":";;;;;;;;;;;;;AAGA,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AAGlC,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,MAAQ,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC7B,EAAA,MAAM,KAAK,MAAU,IAAA,aAAA,CAAA;AAErB,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,IACjC,OAAQ,EAAA,WAAA;AAAA,IACR,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAACA,eAAA,CAAA,MAAA,EAAA;AAAA,QACC,QAAA,EAAA;AAAA,0BAACA,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,MAAA;AAAA,eAAO,CAAA;AAAA,aAAA;AAAA,WAC/D,CAAA;AAAA,0BACCD,eAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1DA,cAAA,CAAA,MAAA,EAAA;AAAA,gBACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBACtC,MAAO,EAAA,MAAA;AAAA,gBACP,WAAY,EAAA,GAAA;AAAA,eACd,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACCD,eAAA,CAAA,GAAA,EAAA;AAAA,QAAE,IAAK,EAAA,MAAA;AAAA,QAAO,QAAS,EAAA,SAAA;AAAA,QACtB,QAAA,EAAA;AAAA,0BAACC,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,uHAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,0BACCA,cAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,iEAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-cjs/packages/core/src/tooltip/Tooltip.css.js CHANGED Viewed

@@ -2,7 +2,7 @@
 var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
-var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - 12px) / 2);\n}\n\n.saltTooltip {\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--saltTooltip-icon-marginRight, 6px) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - 12px) / 2);\n}\n\n.saltTooltip {\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--saltTooltip-icon-marginRight, 6px) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
 styleInject_es(css_248z);
 module.exports = css_248z;

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

@@ -11,8 +11,9 @@ var makePrefixer = require('../utils/makePrefixer.js');
 require('../utils/useFloatingUI.js');
 var useForkRef = require('../utils/useForkRef.js');
 require('../utils/useId.js');
-require('../salt-provider/SaltProvider.js');
+var SaltProvider = require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
+var mergeProps = require('../utils/mergeProps.js');
 var useTooltip = require('./useTooltip.js');
 require('./Tooltip.css.js');
@@ -52,41 +53,50 @@ const Tooltip = React.forwardRef(
       React.isValidElement(children) ? children.ref : null,
       reference
     );
+    const floatingRef = useForkRef.useForkRef(floating, ref);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [
         React.isValidElement(children) && React.cloneElement(children, {
-          ...getTriggerProps(),
+          ...mergeProps.mergeProps(getTriggerProps(), children.props),
           ref: triggerRef
         }),
-        open && !disabled && /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          className: clsx.clsx(withBaseName(), withBaseName(status), className),
-          ref: floating,
-          ...getTooltipProps(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", {
-              className: withBaseName("container"),
+        open && !disabled && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
+          children: /* @__PURE__ */ jsxRuntime.jsx(SaltProvider.SaltProvider, {
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
+              className: clsx.clsx(
+                withBaseName(),
+                withBaseName(status),
+                className
+              ),
+              ref: floatingRef,
+              ...getTooltipProps(),
               children: [
-                !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
-                  status,
-                  size: 1,
-                  className: withBaseName("icon")
+                /* @__PURE__ */ jsxRuntime.jsxs("div", {
+                  className: withBaseName("container"),
+                  children: [
+                    !hideIcon && /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator.StatusIndicator, {
+                      status,
+                      size: 1,
+                      className: withBaseName("icon")
+                    }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", {
+                      className: withBaseName("content"),
+                      children: content
+                    })
+                  ]
                 }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", {
-                  className: withBaseName("content"),
-                  children: content
+                !hideArrow && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, {
+                  ...arrowProps,
+                  className: withBaseName("arrow"),
+                  strokeWidth: 1,
+                  fill: "var(--salt-container-primary-background)",
+                  stroke: "var(--tooltip-status-borderColor)",
+                  height: 5,
+                  width: 10
                 })
               ]
-            }),
-            !hideArrow && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingArrow, {
-              ...arrowProps,
-              className: withBaseName("arrow"),
-              strokeWidth: 1,
-              fill: "var(--salt-container-primary-background)",
-              stroke: "var(--tooltip-status-borderColor)",
-              height: 5,
-              width: 10
             })
-          ]
+          })
         })
       ]
     });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n isValidElement,\n} from \"react\";\nimport { FloatingArrow } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { UseFloatingUIProps, makePrefixer, useForkRef } from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<UseFloatingUIProps, \"open\" \| \"onOpenChange\" \| \"placement\"> {\n /*\n The children will be the Tooltip's trigger.\n /\n children: ReactNode;\n /\n Whether to hide the Tooltip arrow. Defaults to `false`.\n /\n hideArrow?: boolean;\n /\n Whether to hide the status icon within the Tooltip. Defaults to `false`.\n /\n hideIcon?: boolean;\n /\n Content displayed inside the Tooltip. Can be a string or a React component.\n /\n content: ReactNode;\n /\n A string to determine the status of the Tooltip. Defaults to `info`.\n /\n status?: ValidationStatus;\n /\n Delay in milliseconds before the Tooltip is shown.\n /\n enterDelay?: number;\n /\n Delay in milliseconds before the Tooltip is hidden.\n /\n leaveDelay?: number;\n /\n Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n /\n disabled?: boolean;\n /\n Option to remove the hover listener.\n /\n disableHoverListener?: boolean;\n /\n Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...getTriggerProps(),\n ref: triggerRef,\n })}\n\n {open && !disabled && (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n ref={~~floating~~}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span className={withBaseName(\"content\")}>{content}</span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </div>\n )}\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useTooltip","useForkRef","isValidElement","jsxs","Fragment","cloneElement","~~clsx~~","jsx","StatusIndicator","FloatingArrow"],"mappings":"~~;;;;;;;;;;;;;;;;;;AAcA~~,MAAM,YAAA,GAAeA,0BAAa,aAAa,CAAA,CAAA;AA+CxC,MAAM,OAAU,GAAAC,gBAAA;AAAA,EACrB,SAASC,QAAQ,CAAA,KAAA,EAAO,GAAK,EAAA;AAC3B,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,GAAIC,sBAAW,SAAS,CAAA,CAAA;AAExB,IAAA,MAAM,UAAa,GAAAC,qBAAA;AAAA,MAEjBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,MAC1C,SAAA;AAAA,KACF,CAAA;AAEA,IACE,~~uBAAAC~~,eAAA,CAAAC,mBAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAeF,oBAAA,CAAA,QAAQ,CACtB,IAAAG,kBAAA,CAAa,QAAU,EAAA;AAAA,UACrB,~~GAAG~~,eAAgB,EAAA;AAAA,~~UACnB~~,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,QAEF,IAAA,IAAQ,CAAC,QAAA,~~oBACPF~~,eAAA,CAAA,KAAA,EAAA;AAAA,~~UACC~~,~~WAAWG~~,~~SAAK~~,~~CAAA~~,~~YAAA~~,~~IAAgB,~~YAAa,~~CAAA~~,~~MAAM~~,~~GAAG~~,~~SAAS~~,CAAA;AAAA,~~UAC/D~~,GAAK,EAAA,~~QAAA~~;AAAA,~~UACJ~~,GAAG,eAAgB,EAAA;AAAA,~~UAEpB~~,QAAA,EAAA;AAAA,~~4BAACH~~,eAAA,CAAA,KAAA,EAAA;AAAA,~~cAAI~~,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,~~cACrC~~,QAAA,EAAA;AAAA,~~gBAAA~~,CAAC,4BACCI,cAAA,~~CAAAC~~,+BAAA,EAAA;AAAA,~~kBACC~~,MAAA;AAAA,~~kBACA~~,IAAM,EAAA,CAAA;AAAA,~~kBACN~~,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,~~iBAChC~~,CAAA;AAAA,~~gCAEDD~~,cAAA,CAAA,MAAA,EAAA;AAAA,~~kBAAK~~,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,~~kBAAI~~,QAAA,EAAA,OAAA;AAAA,~~iBAAQ~~,CAAA;AAAA,~~eAAA~~;AAAA,~~aACrD~~,CAAA;AAAA,~~YACC~~,CAAC,6BACCA,cAAA,~~CAAAE~~,mBAAA,EAAA;AAAA,~~cACE~~,GAAG,UAAA;AAAA,~~cACJ~~,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,~~cAC~~/B,WAAa,EAAA,CAAA;AAAA,~~cACb~~,IAAK,EAAA,0CAAA;AAAA,~~cACL~~,MAAO,EAAA,mCAAA;AAAA,~~cACP~~,MAAQ,EAAA,CAAA;AAAA,~~cACR~~,KAAO,EAAA,EAAA;AAAA,~~aACT~~,CAAA;AAAA,~~WAAA~~;AAAA,~~SAEJ~~,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n isValidElement,\n Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n UseFloatingUIProps,\n makePrefixer,\n mergeProps,\n useForkRef,\n} from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\nimport { SaltProvider } from \"../salt-provider\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<UseFloatingUIProps, \"open\" \| \"onOpenChange\" \| \"placement\"> {\n /*\n The children will be the Tooltip's trigger.\n /\n children: ReactNode;\n /\n Whether to hide the Tooltip arrow. Defaults to `false`.\n /\n hideArrow?: boolean;\n /\n Whether to hide the status icon within the Tooltip. Defaults to `false`.\n /\n hideIcon?: boolean;\n /\n Content displayed inside the Tooltip. Can be a string or a React component.\n /\n content: ReactNode;\n /\n A string to determine the status of the Tooltip. Defaults to `info`.\n /\n status?: ValidationStatus;\n /\n Delay in milliseconds before the Tooltip is shown.\n /\n enterDelay?: number;\n /\n Delay in milliseconds before the Tooltip is hidden.\n /\n leaveDelay?: number;\n /\n Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n /\n disabled?: boolean;\n /\n Option to remove the hover listener.\n /\n disableHoverListener?: boolean;\n /\n Option to remove the focus listener.\n /\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n {open && !disabled && (\n <FloatingPortal>\n {/ The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n className\n )}\n ref={floatingRef}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span className={withBaseName(\"content\")}>{content}</span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","Tooltip","useTooltip","useForkRef","isValidElement","jsxs","Fragment","cloneElement","mergeProps","jsx","FloatingPortal","SaltProvider","clsx","StatusIndicator","FloatingArrow"],"mappings":"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"}

package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js CHANGED Viewed

@@ -11,6 +11,7 @@ require('../utils/useId.js');
 var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
+require('clsx');
 function getDocument(floating) {
   var _a;

package/dist-cjs/packages/core/src/tooltip/useAriaAnnounce.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement \| null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" \| \"close\",\n pointerType?: PointerEvent[\"pointerType\"]\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number \| Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(() => {\n announceFloating();\n }, getDelay(delay, \"open\", pointerTypeRef.current));\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":["useRef","useAriaAnnouncer","useIsomorphicLayoutEffect","useEffect"],"mappings":"~~;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement \| null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" \| \"close\",\n pointerType?: PointerEvent[\"pointerType\"]\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number \| Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(() => {\n announceFloating();\n }, getDelay(delay, \"open\", pointerTypeRef.current));\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":["useRef","useAriaAnnouncer","useIsomorphicLayoutEffect","useEffect"],"mappings":"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"}

package/dist-cjs/packages/core/src/tooltip/useTooltip.js CHANGED Viewed

@@ -9,6 +9,7 @@ var useFloatingUI = require('../utils/useFloatingUI.js');
 require('../utils/useId.js');
 require('../salt-provider/SaltProvider.js');
 require('../viewport/ViewportProvider.js');
+require('clsx');
 var useAriaAnnounce = require('./useAriaAnnounce.js');
 function useTooltip(props) {
@@ -75,8 +76,9 @@ function useTooltip(props) {
     ref: arrowRef,
     context,
     style: {
-      left: arrowX ? `${arrowX}px` : "",
-      top: arrowY ? `${arrowY}px` : ""
+      position: strategy,
+      left: arrowX != null ? arrowX : 0,
+      top: arrowY != null ? arrowY : 0
     }
   };
   const getTooltipProps = () => {
@@ -84,8 +86,8 @@ function useTooltip(props) {
       "data-placement": placement,
       ref: floating,
       style: {
-        top: y != null ? y : "",
-        left: x != null ? x : "",
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
         position: strategy
       }
     });

package/dist-cjs/packages/core/src/tooltip/useTooltip.js.map CHANGED Viewed

	@@ -1 +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 } = 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 left: arrowX ? ~~`${arrowX}px` : \"\"~~,\n top: arrowY ? ~~`${arrowY}px` : \"\"~~,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? ~~\"\"~~,\n left: x ?? ~~\"\"~~,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"~~;;;;;;;;;;;;;~~AAyCO,SAAS,WAAW,KAAyB,EAAA;AAClD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,oBAAA;AAAA,IACA,oBAAA;AAAA,GACF,GAAI,SAAS,EAAC,CAAA;AAEd,EAAM,MAAA,QAAA,GAAWA,aAA6B,IAAI,CAAA,CAAA;AAElD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,2BAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAACC,KAAkB,KAAA;AAC1C,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAeA,YAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA,EAAgB,EAAE,KAAA,EAAO,EAAE,CAAA,EAAG,QAAQ,CAAG,EAAA,MAAA,EAAW,GAAA,EAAG,EAAA;AAAA,IACvD,SAAA;AAAA,IACA,OAAA;AAAA,MACEC,2BAAc,CAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,aAAO,CAAC,CAAA;AAAA,MACRC,UAAK,EAAA;AAAA,MACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AAAA,MAC/BC,WAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,KAC7B;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9DC,eAAS,OAAS,EAAA;AAAA,MAChB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,MACA,SAAS,CAAC,oBAAA;AAAA,MACV,aAAaC,iBAAY,EAAA;AAAA,KAC1B,CAAA;AAAA,IACDC,eAAS,OAAS,EAAA,EAAE,OAAS,EAAA,CAAC,sBAAsB,CAAA;AAAA,IACpDC,aAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,IACpCC,iBAAW,OAAO,CAAA;AAAA,IAClBC,gCAAgB,OAAS,EAAA;AAAA,MACvB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,KACD,CAAA;AAAA,GACF,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL,OAAA;AAAA,IACA,KAAO,EAAA;AAAA,MACL,~~IAAA~~,~~EAAM~~,~~MAAS~~,~~GAAA~~,~~CAAA~~,~~EAAG~~,~~MAAa~~,~~CAAA~~,~~EAAA~~,~~CAAA~~,GAAA,~~EAAA~~;AAAA,~~MAC/B~~,~~GAAA~~,~~EAAK~~,~~MAAS~~,GAAA,~~CAAA~~,~~EAAG~~,~~MAAa,~~CAAA~~,EAAA,CAAA,GAAA,EAAA~~;AAAA,~~KAChC~~;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,MAAiC;AACvD,IAAA,OAAO,gBAAiB,CAAA;AAAA,MAEtB,gBAAkB,EAAA,SAAA;AAAA,MAClB,GAAK,EAAA,QAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,~~EAAA~~;AAAA,QACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,~~EAAA~~;AAAA,QACX,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,GACN,CAAA,CAAA;AAEH,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
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 } = 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 style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["useRef","useControlled","open","useFloatingUI","offset","flip","shift","limitShift","arrow","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useAriaAnnounce"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var clsx = require('clsx');
+var createChainedFunction = require('./createChainedFunction.js');
+function mergeProps(propsA, propsB) {
+  const props = { ...propsA };
+  Object.keys(propsB).forEach((key) => {
+    const a = props[key];
+    const b = propsB[key];
+    if (typeof a === "function" && typeof b === "function" && key.indexOf("on") === 0) {
+      props[key] = createChainedFunction.createChainedFunction(a, b);
+    } else if (typeof a === "string" && typeof b === "string" && key === "className") {
+      props[key] = clsx.clsx(a, b);
+    } else {
+      props[key] = b != null ? b : a;
+    }
+  });
+  return props;
+}
+exports.mergeProps = mergeProps;
+//# sourceMappingURL=mergeProps.js.map

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

@@ -0,0 +1 @@

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

package/dist-cjs/packages/core/src/viewport/ViewportProvider.js CHANGED Viewed

@@ -8,6 +8,7 @@ require('../utils/useFloatingUI.js');
 require('../utils/useId.js');
 var useIsomorphicLayoutEffect = require('../utils/useIsomorphicLayoutEffect.js');
 require('../salt-provider/SaltProvider.js');
+require('clsx');
 const ViewportContext = React.createContext(null);
 const ViewportProvider = ({ children }) => {

package/dist-cjs/packages/core/src/viewport/ViewportProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number \| null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport \|\| viewport \|\| 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver \| null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect","jsx"],"mappings":"~~;;;;;;;;;;;~~AAGM,MAAA,eAAA,GAAkBA,oBAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmBC,iBAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQH,iBAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;;;"}
1	+ {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number \| null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport \|\| viewport \|\| 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver \| null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":["createContext","useContext","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;;;;;;;AAGM,MAAA,eAAA,GAAkBA,oBAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmBC,iBAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIC,eAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAAC,mDAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAAC,cAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQH,iBAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;;;"}

package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js CHANGED Viewed

@@ -4,6 +4,7 @@ import '../utils/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import 'clsx';
 import { AriaAnnouncerContext } from './AriaAnnouncerContext.js';
 let warnedOnce = false;

package/dist-es/packages/core/src/aria-announcer/useAriaAnnouncer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":"~~;;;;;;;;~~AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}
1	+ {"version":3,"file":"useAriaAnnouncer.js","sources":["../src/aria-announcer/useAriaAnnouncer.ts"],"sourcesContent":["import { useCallback, useContext, useEffect, useMemo, useRef } from \"react\";\nimport { debounce } from \"../utils\";\nimport { AriaAnnouncer, AriaAnnouncerContext } from \"./AriaAnnouncerContext\";\n\nexport type useAnnouncerOptions = {\n debounce?: number;\n};\nexport type useAriaAnnouncerHook = (\n options?: useAnnouncerOptions\n) => AriaAnnouncer;\n\nlet warnedOnce = false;\n\nexport const useAriaAnnouncer: useAriaAnnouncerHook = ({\n debounce: debounceInterval = 0,\n} = {}) => {\n const context = useContext(AriaAnnouncerContext);\n const mountedRef = useRef(true);\n const baseAnnounce = useCallback(\n (announcement: string, delay?: number) => {\n const isReactAnnouncerInstalled = context && context.announce;\n\n if (process.env.NODE_ENV !== \"production\") {\n if (isReactAnnouncerInstalled && warnedOnce) {\n console.warn(\n \"useAriaAnnouncer is being used without an AriaAnnouncerProvider. Your application should be wrapped in an AriaAnnouncerProvider\"\n );\n warnedOnce = true;\n }\n }\n\n function makeAnnouncement() {\n if (mountedRef.current) {\n if (isReactAnnouncerInstalled) {\n context.announce(announcement);\n }\n }\n }\n\n if (delay) {\n setTimeout(makeAnnouncement, delay);\n } else {\n makeAnnouncement();\n }\n },\n [context]\n );\n\n const announce = useMemo(\n () =>\n debounceInterval > 0\n ? debounce(baseAnnounce, debounceInterval)\n : baseAnnounce,\n [baseAnnounce, debounceInterval]\n );\n\n const ariaAnnouncer = useMemo(\n () => ({\n ...context,\n announce,\n }),\n [context, announce]\n );\n\n useEffect(() => {\n mountedRef.current = true;\n return () => {\n mountedRef.current = false;\n };\n }, []);\n\n return ariaAnnouncer;\n};\n"],"names":[],"mappings":";;;;;;;;;AAWA,IAAI,UAAa,GAAA,KAAA,CAAA;AAEV,MAAM,mBAAyC,CAAC;AAAA,EACrD,UAAU,gBAAmB,GAAA,CAAA;AAC/B,CAAA,GAAI,EAAO,KAAA;AACT,EAAM,MAAA,OAAA,GAAU,WAAW,oBAAoB,CAAA,CAAA;AAC/C,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA,CAAA;AAC9B,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,cAAsB,KAAmB,KAAA;AACxC,MAAM,MAAA,yBAAA,GAA4B,WAAW,OAAQ,CAAA,QAAA,CAAA;AAErD,MAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,QAAA,IAAI,6BAA6B,UAAY,EAAA;AAC3C,UAAQ,OAAA,CAAA,IAAA;AAAA,YACN,iIAAA;AAAA,WACF,CAAA;AACA,UAAa,UAAA,GAAA,IAAA,CAAA;AAAA,SACf;AAAA,OACF;AAEA,MAAA,SAAS,gBAAmB,GAAA;AAC1B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAA,IAAI,yBAA2B,EAAA;AAC7B,YAAA,OAAA,CAAQ,SAAS,YAAY,CAAA,CAAA;AAAA,WAC/B;AAAA,SACF;AAAA,OACF;AAEA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,UAAA,CAAW,kBAAkB,KAAK,CAAA,CAAA;AAAA,OAC7B,MAAA;AACL,QAAiB,gBAAA,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,IACA,CAAC,OAAO,CAAA;AAAA,GACV,CAAA;AAEA,EAAA,MAAM,QAAW,GAAA,OAAA;AAAA,IACf,MACE,gBAAmB,GAAA,CAAA,GACf,QAAS,CAAA,YAAA,EAAc,gBAAgB,CACvC,GAAA,YAAA;AAAA,IACN,CAAC,cAAc,gBAAgB,CAAA;AAAA,GACjC,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,OAAO;AAAA,MACL,GAAG,OAAA;AAAA,MACH,QAAA;AAAA,KACF,CAAA;AAAA,IACA,CAAC,SAAS,QAAQ,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,aAAA,CAAA;AACT;;;;"}

package/dist-es/packages/core/src/avatar/Avatar.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-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-accent-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-base: 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-accent-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  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-accent-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-icon-size-base: 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-accent-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  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";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/core/src/avatar/useAvatarImage.js CHANGED Viewed

@@ -4,6 +4,7 @@ import '../utils/useId.js';
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import 'clsx';
 function useAvatarImage({ src }) {
   const [status, setStatus] = useState("loading");

package/dist-es/packages/core/src/avatar/useAvatarImage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nexport function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [status, setStatus] = useState<\n \"pending\" \| \"loading\" \| \"loaded\" \| \"error\"\n >(\"loading\");\n\n useEffect(() => {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!src) {\n return;\n }\n\n let active = true;\n const image = new Image();\n image.src = src;\n const onLoad = () => active && setStatus(\"loaded\");\n const onError = () => active && setStatus(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return status;\n}\n"],"names":[],"mappings":"~~;;;;;;;~~AAGgB,SAAA,cAAA,CAAe,EAAE,GAAA,EAA4C,EAAA;AAC3E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAE1B,SAAS,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,GAAA,GAAM,YAAY,SAAS,CAAA,CAAA;AAAA,GACvC,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}
1	+ {"version":3,"file":"useAvatarImage.js","sources":["../src/avatar/useAvatarImage.ts"],"sourcesContent":["import { ImgHTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nexport function useAvatarImage({ src }: ImgHTMLAttributes<HTMLImageElement>) {\n const [status, setStatus] = useState<\n \"pending\" \| \"loading\" \| \"loaded\" \| \"error\"\n >(\"loading\");\n\n useEffect(() => {\n setStatus(src ? \"loading\" : \"pending\");\n }, [src]);\n\n useIsomorphicLayoutEffect(() => {\n if (!src) {\n return;\n }\n\n let active = true;\n const image = new Image();\n image.src = src;\n const onLoad = () => active && setStatus(\"loaded\");\n const onError = () => active && setStatus(\"error\");\n\n image.addEventListener(\"load\", onLoad, { once: true });\n image.addEventListener(\"error\", onError, { once: true });\n\n return () => {\n image.removeEventListener(\"load\", onLoad);\n image.removeEventListener(\"load\", onError);\n active = false;\n };\n }, [src]);\n\n return status;\n}\n"],"names":[],"mappings":";;;;;;;;AAGgB,SAAA,cAAA,CAAe,EAAE,GAAA,EAA4C,EAAA;AAC3E,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAI,SAE1B,SAAS,CAAA,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAU,SAAA,CAAA,GAAA,GAAM,YAAY,SAAS,CAAA,CAAA;AAAA,GACvC,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,CAAC,GAAK,EAAA;AACR,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,MAAS,GAAA,IAAA,CAAA;AACb,IAAM,MAAA,KAAA,GAAQ,IAAI,KAAM,EAAA,CAAA;AACxB,IAAA,KAAA,CAAM,GAAM,GAAA,GAAA,CAAA;AACZ,IAAA,MAAM,MAAS,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,QAAQ,CAAA,CAAA;AACjD,IAAA,MAAM,OAAU,GAAA,MAAM,MAAU,IAAA,SAAA,CAAU,OAAO,CAAA,CAAA;AAEjD,IAAA,KAAA,CAAM,iBAAiB,MAAQ,EAAA,MAAA,EAAQ,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACrD,IAAA,KAAA,CAAM,iBAAiB,OAAS,EAAA,OAAA,EAAS,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAEvD,IAAA,OAAO,MAAM;AACX,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,MAAM,CAAA,CAAA;AACxC,MAAM,KAAA,CAAA,mBAAA,CAAoB,QAAQ,OAAO,CAAA,CAAA;AACzC,MAAS,MAAA,GAAA,KAAA,CAAA;AAAA,KACX,CAAA;AAAA,GACF,EAAG,CAAC,GAAG,CAAC,CAAA,CAAA;AAER,EAAO,OAAA,MAAA,CAAA;AACT;;;;"}

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

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

package/dist-es/packages/core/src/flex-item/FlexItem.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI.js';
 import '../utils/useId.js';
 import { useResponsiveProp } from '../utils/useResponsiveProp.js';
-import './FlexItem.css.js';
 import { clsx } from 'clsx';
+import './FlexItem.css.js';
 const withBaseName = makePrefixer("saltFlexItem");
 const FLEX_ITEM_ALIGNMENTS = [

package/dist-es/packages/core/src/index.js CHANGED Viewed

@@ -56,5 +56,6 @@ export { teardown, useIsFocusVisible } from './utils/useIsFocusVisible.js';
 export { useIsomorphicLayoutEffect } from './utils/useIsomorphicLayoutEffect.js';
 export { usePrevious } from './utils/usePrevious.js';
 export { getCurrentBreakpoint, useCurrentBreakpoint, useOrderedBreakpoints, useResponsiveProp } from './utils/useResponsiveProp.js';
+export { mergeProps } from './utils/mergeProps.js';
 export { ViewportContext, ViewportProvider, useViewport } from './viewport/ViewportProvider.js';
 //# sourceMappingURL=index.js.map

package/dist-es/packages/core/src/index.js.map CHANGED Viewed

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

package/dist-es/packages/core/src/radio-button/RadioButtonIcon.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon circle */\n.saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-fill, var(--salt-container-primary-background));\n  stroke: var(--saltRadioButton-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-hover-fill, var(--salt-selectable-background-hover));\n  stroke: var(--saltRadioButton-icon-stroke-hover, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied to radio button icon if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-fill, var(--salt-selectable-foreground-selected));\n  stroke: var(--saltRadioButton-icon-checked-stroke, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to radio button icon if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-disabled-stroke, var(--salt-selectable-foreground-disabled));\n}\n\n/* Styles applied to radio button icon if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-checked-disabled-stroke, var(--salt-selectable-foreground-selectedDisabled));\n  stroke-width: calc(var(--salt-size-border) * 6.5);\n}\n\n/* Styles applied to radio button icon with error */\n.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-hover-fill, var(--salt-status-error-background-emphasize));\n}\n\n/* Styles applied to radio button icon with error and disabled */\n.saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to radio button icon when checked and with error */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-fill, var(--salt-status-error-foreground));\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n/* Styles applied to radio button icon when checked and with error and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to checked inner circle */\n.saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-container-primary-background));\n}\n\n/* Styles applied to checked inner circle when disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-disabled-fill, var(--salt-container-primary-background-disabled));\n}\n";
+var css_248z = "/* Styles applied to radio button icon */\n.saltRadioButtonIcon {\n  width: var(--salt-size-selectable);\n  height: var(--salt-size-selectable);\n  border-radius: 50%;\n  flex: none;\n  margin-top: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon circle */\n.saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-fill, var(--salt-container-primary-background));\n  stroke: var(--saltRadioButton-icon-stroke, var(--salt-selectable-foreground));\n  stroke-width: var(--salt-size-border);\n}\n\n/* Styles applied to radio button icon on hover */\n.saltRadioButton:hover .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-hover-fill, var(--salt-selectable-background-hover));\n  stroke: var(--saltRadioButton-icon-stroke-hover, var(--salt-selectable-foreground-hover));\n}\n\n/* Styles applied to radio button icon if checked */\n.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-fill, var(--salt-selectable-foreground-selected));\n  stroke: var(--saltRadioButton-icon-checked-stroke, var(--salt-selectable-foreground-selected));\n}\n\n/* Styles applied to radio button icon if disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-disabled-stroke, var(--salt-selectable-foreground-disabled));\n}\n\n/* Styles applied to radio button icon if checked and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-checked-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-checked-disabled-stroke, var(--salt-selectable-foreground-selectedDisabled));\n  stroke-width: calc(var(--salt-size-border) * 6.5);\n}\n\n/* Styles applied to radio button icon with error */\n.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n.saltRadioButton:hover .saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-hover-fill, var(--salt-status-error-background));\n}\n\n/* Styles applied to radio button icon with error and disabled */\n.saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-error.saltRadioButtonIcon-disabled .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-selectable-background));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to radio button icon when checked and with error */\n.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-fill, var(--salt-status-error-foreground));\n  stroke: var(--saltRadioButton-icon-error-stroke, var(--salt-status-error-foreground));\n}\n\n/* Styles applied to radio button icon when checked and with error and disabled */\n.saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle,\n.saltRadioButton:hover .saltRadioButtonIcon-disabled.saltRadioButtonIcon-checked.saltRadioButtonIcon-error .saltRadioButtonIcon-circle {\n  fill: var(--saltRadioButton-icon-error-disabled-fill, var(--salt-container-primary-background-disabled));\n  stroke: var(--saltRadioButton-icon-error-disabled-stroke, var(--salt-status-error-foreground-disabled));\n}\n\n/* Styles applied to checked inner circle */\n.saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-fill, var(--salt-container-primary-background));\n}\n\n/* Styles applied to checked inner circle when disabled */\n.saltRadioButtonIcon-disabled .saltRadioButtonIcon-checked-circle {\n  fill: var(--saltRadioButton-icon-inner-disabled-fill, var(--salt-container-primary-background-disabled));\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

package/dist-es/packages/core/src/radio-button/internal/RadioGroupContext.js CHANGED Viewed

@@ -4,6 +4,7 @@ import '../../utils/useFloatingUI.js';
 import '../../utils/useId.js';
 import '../../salt-provider/SaltProvider.js';
 import '../../viewport/ViewportProvider.js';
+import 'clsx';
 const RadioGroupContext = createContext(
   "RadioGroupContext",

package/dist-es/packages/core/src/radio-button/internal/RadioGroupContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n \"RadioGroupContext\",\n {}\n);\n"],"names":[],"mappings":"~~;;;;;;;~~AASO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}
1	+ {"version":3,"file":"RadioGroupContext.js","sources":["../src/radio-button/internal/RadioGroupContext.tsx"],"sourcesContent":["import { ChangeEventHandler } from \"react\";\nimport { createContext } from \"../../utils\";\n\nexport interface RadioGroupContextValue {\n name?: string;\n value?: string;\n onChange?: ChangeEventHandler<HTMLElement>;\n}\n\nexport const RadioGroupContext = createContext<RadioGroupContextValue>(\n \"RadioGroupContext\",\n {}\n);\n"],"names":[],"mappings":";;;;;;;;AASO,MAAM,iBAAoB,GAAA,aAAA;AAAA,EAC/B,mBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js CHANGED Viewed

@@ -5,6 +5,7 @@ import '../../utils/useFloatingUI.js';
 import '../../utils/useId.js';
 import '../../salt-provider/SaltProvider.js';
 import '../../viewport/ViewportProvider.js';
+import 'clsx';
 const withBaseName = makePrefixer("saltSpinner");
 const SpinnerSVG = (props) => {

package/dist-es/packages/core/src/spinner/svgSpinners/SpinnerSVG.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\n/* SVG based on MD, do not change viewbox attribute */\nexport const SpinnerSVG = (props: {\n id?: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n}) => {\n const { id: idProp, rest } = props;\n const id = idProp \|\| \"svg-spinner\";\n\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox=\"0 0 28 28\"\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"100%\" x2=\"0%\" y1=\"78%\" y2=\"78%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop className={withBaseName(\"gradientStop\")} offset=\"100%\" />\n </linearGradient>\n <linearGradient id={`${id}-2`} x1=\"13%\" x2=\"100%\" y1=\"0%\" y2=\"87%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M28 14H24C24 8.47715 19.5228 4 14 4C8.47715 4 4 8.47715 4 14 H 0 C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14Z\"\n fill={`url(#${id}-1)`}\n />\n <path\n d=\"M4 14 C4 19.5228 8.47715 24 14 24V28C6.26801 28 0 21.732 0 14 Z\"\n fill={`url(#${id}-2)`}\n />\n </g>\n </svg>\n );\n};\n"],"names":[],"mappings":"~~;;;;;;;;~~AAGA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAGlC,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,MAAQ,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC7B,EAAA,MAAM,KAAK,MAAU,IAAA,aAAA,CAAA;AAErB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,IACjC,OAAQ,EAAA,WAAA;AAAA,IACR,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,MAAA,EAAA;AAAA,QACC,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,MAAA;AAAA,eAAO,CAAA;AAAA,aAAA;AAAA,WAC/D,CAAA;AAAA,0BACC,IAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,gBACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBACtC,MAAO,EAAA,MAAA;AAAA,gBACP,WAAY,EAAA,GAAA;AAAA,eACd,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACC,IAAA,CAAA,GAAA,EAAA;AAAA,QAAE,IAAK,EAAA,MAAA;AAAA,QAAO,QAAS,EAAA,SAAA;AAAA,QACtB,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,uHAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,0BACC,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,iEAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"SpinnerSVG.js","sources":["../src/spinner/svgSpinners/SpinnerSVG.tsx"],"sourcesContent":["import { SVGAttributes } from \"react\";\nimport { makePrefixer } from \"../../utils\";\n\nconst withBaseName = makePrefixer(\"saltSpinner\");\n\n/* SVG based on MD, do not change viewbox attribute */\nexport const SpinnerSVG = (props: {\n id?: string;\n rest?: Omit<SVGAttributes<SVGSVGElement>, \"id\">;\n}) => {\n const { id: idProp, rest } = props;\n const id = idProp \|\| \"svg-spinner\";\n\n return (\n <svg\n className={withBaseName(\"spinner\")}\n viewBox=\"0 0 28 28\"\n id={id}\n {...rest}\n >\n <defs>\n <linearGradient id={`${id}-1`} x1=\"100%\" x2=\"0%\" y1=\"78%\" y2=\"78%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop className={withBaseName(\"gradientStop\")} offset=\"100%\" />\n </linearGradient>\n <linearGradient id={`${id}-2`} x1=\"13%\" x2=\"100%\" y1=\"0%\" y2=\"87%\">\n <stop className={withBaseName(\"gradientStop\")} offset=\"0%\" />\n <stop\n className={withBaseName(\"gradientStop\")}\n offset=\"100%\"\n stopOpacity=\"0\"\n />\n </linearGradient>\n </defs>\n <g fill=\"none\" fillRule=\"evenodd\">\n <path\n d=\"M28 14H24C24 8.47715 19.5228 4 14 4C8.47715 4 4 8.47715 4 14 H 0 C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14Z\"\n fill={`url(#${id}-1)`}\n />\n <path\n d=\"M4 14 C4 19.5228 8.47715 24 14 24V28C6.26801 28 0 21.732 0 14 Z\"\n fill={`url(#${id}-2)`}\n />\n </g>\n </svg>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAGA,MAAM,YAAA,GAAe,aAAa,aAAa,CAAA,CAAA;AAGlC,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAA,MAAM,EAAE,EAAA,EAAI,MAAQ,EAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC7B,EAAA,MAAM,KAAK,MAAU,IAAA,aAAA,CAAA;AAErB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,IACjC,OAAQ,EAAA,WAAA;AAAA,IACR,EAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,MAAA,EAAA;AAAA,QACC,QAAA,EAAA;AAAA,0BAAC,IAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,MAAA;AAAA,eAAO,CAAA;AAAA,aAAA;AAAA,WAC/D,CAAA;AAAA,0BACC,IAAA,CAAA,gBAAA,EAAA;AAAA,YAAe,IAAI,CAAG,EAAA,EAAA,CAAA,EAAA,CAAA;AAAA,YAAQ,EAAG,EAAA,KAAA;AAAA,YAAM,EAAG,EAAA,MAAA;AAAA,YAAO,EAAG,EAAA,IAAA;AAAA,YAAK,EAAG,EAAA,KAAA;AAAA,YAC3D,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,gBAAK,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBAAG,MAAO,EAAA,IAAA;AAAA,eAAK,CAAA;AAAA,8BAC1D,GAAA,CAAA,MAAA,EAAA;AAAA,gBACC,SAAA,EAAW,aAAa,cAAc,CAAA;AAAA,gBACtC,MAAO,EAAA,MAAA;AAAA,gBACP,WAAY,EAAA,GAAA;AAAA,eACd,CAAA;AAAA,aAAA;AAAA,WACF,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,sBACC,IAAA,CAAA,GAAA,EAAA;AAAA,QAAE,IAAK,EAAA,MAAA;AAAA,QAAO,QAAS,EAAA,SAAA;AAAA,QACtB,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,uHAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,0BACC,GAAA,CAAA,MAAA,EAAA;AAAA,YACC,CAAE,EAAA,iEAAA;AAAA,YACF,MAAM,CAAQ,KAAA,EAAA,EAAA,CAAA,GAAA,CAAA;AAAA,WAChB,CAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/core/src/tooltip/Tooltip.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - 12px) / 2);\n}\n\n.saltTooltip {\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--saltTooltip-icon-marginRight, 6px) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
+var css_248z = "/* Styles applied to root component */\n.saltTooltip {\n  --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background));\n  --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover));\n  /* apply icon margin based on the text line height so it's aligned on all densities */\n  --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - 12px) / 2);\n}\n\n.saltTooltip {\n  background: var(--tooltip-background);\n  border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor));\n  border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltTooltip-borderWidth, var(--salt-size-border));\n  box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout));\n  color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground));\n  font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight));\n  max-width: var(--saltTooltip-maxWidth, 230px);\n  padding: var(--saltTooltip-padding, var(--salt-size-unit));\n  position: relative;\n  text-align: var(--saltTooltip-textAlign, left);\n  z-index: var(--tooltip-zIndex);\n}\n\n/* Styles applied to container */\n.saltTooltip-container {\n  display: flex;\n  align-items: baseline;\n  position: relative;\n}\n\n/* Styles applied to content */\n.saltTooltip-content {\n  overflow: hidden;\n}\n\n/* Styles applied to status indicator */\n.saltTooltip-icon {\n  --saltIcon-margin: var(--tooltip-icon-marginTop) var(--saltTooltip-icon-marginRight, 6px) 0 0;\n  vertical-align: top;\n  align-self: flex-start;\n}\n\n/* Styles applied when status = \"info\" */\n.saltTooltip-info {\n  --tooltip-status-borderColor: var(--salt-status-info-borderColor);\n}\n\n/* Styles applied when status = \"error\" */\n.saltTooltip-error {\n  --tooltip-status-borderColor: var(--salt-status-error-borderColor);\n}\n\n/* Styles applied when status = \"warning\" */\n.saltTooltip-warning {\n  --tooltip-status-borderColor: var(--salt-status-warning-borderColor);\n}\n\n/* Styles applied when status = \"success\" */\n.saltTooltip-success {\n  --tooltip-status-borderColor: var(--salt-status-success-borderColor);\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

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

@@ -1,14 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
 import { forwardRef, isValidElement, cloneElement } from 'react';
-import { FloatingArrow } from '@floating-ui/react';
+import { FloatingPortal, FloatingArrow } from '@floating-ui/react';
 import { StatusIndicator } from '../status-indicator/StatusIndicator.js';
 import { makePrefixer } from '../utils/makePrefixer.js';
 import '../utils/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
-import '../salt-provider/SaltProvider.js';
+import { SaltProvider } from '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import { mergeProps } from '../utils/mergeProps.js';
 import { useTooltip } from './useTooltip.js';
 import './Tooltip.css.js';
@@ -48,41 +49,50 @@ const Tooltip = forwardRef(
       isValidElement(children) ? children.ref : null,
       reference
     );
+    const floatingRef = useForkRef(floating, ref);
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [
         isValidElement(children) && cloneElement(children, {
-          ...getTriggerProps(),
+          ...mergeProps(getTriggerProps(), children.props),
           ref: triggerRef
         }),
-        open && !disabled && /* @__PURE__ */ jsxs("div", {
-          className: clsx(withBaseName(), withBaseName(status), className),
-          ref: floating,
-          ...getTooltipProps(),
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              className: withBaseName("container"),
+        open && !disabled && /* @__PURE__ */ jsx(FloatingPortal, {
+          children: /* @__PURE__ */ jsx(SaltProvider, {
+            children: /* @__PURE__ */ jsxs("div", {
+              className: clsx(
+                withBaseName(),
+                withBaseName(status),
+                className
+              ),
+              ref: floatingRef,
+              ...getTooltipProps(),
               children: [
-                !hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
-                  status,
-                  size: 1,
-                  className: withBaseName("icon")
+                /* @__PURE__ */ jsxs("div", {
+                  className: withBaseName("container"),
+                  children: [
+                    !hideIcon && /* @__PURE__ */ jsx(StatusIndicator, {
+                      status,
+                      size: 1,
+                      className: withBaseName("icon")
+                    }),
+                    /* @__PURE__ */ jsx("span", {
+                      className: withBaseName("content"),
+                      children: content
+                    })
+                  ]
                 }),
-                /* @__PURE__ */ jsx("span", {
-                  className: withBaseName("content"),
-                  children: content
+                !hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
+                  ...arrowProps,
+                  className: withBaseName("arrow"),
+                  strokeWidth: 1,
+                  fill: "var(--salt-container-primary-background)",
+                  stroke: "var(--tooltip-status-borderColor)",
+                  height: 5,
+                  width: 10
                 })
               ]
-            }),
-            !hideArrow && /* @__PURE__ */ jsx(FloatingArrow, {
-              ...arrowProps,
-              className: withBaseName("arrow"),
-              strokeWidth: 1,
-              fill: "var(--salt-container-primary-background)",
-              stroke: "var(--tooltip-status-borderColor)",
-              height: 5,
-              width: 10
             })
-          ]
+          })
         })
       ]
     });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n isValidElement,\n} from \"react\";\nimport { FloatingArrow } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport { UseFloatingUIProps, makePrefixer, useForkRef } from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<UseFloatingUIProps, \"open\" \| \"onOpenChange\" \| \"placement\"> {\n /*\n The children will be the Tooltip's trigger.\n /\n children: ReactNode;\n /\n Whether to hide the Tooltip arrow. Defaults to `false`.\n /\n hideArrow?: boolean;\n /\n Whether to hide the status icon within the Tooltip. Defaults to `false`.\n /\n hideIcon?: boolean;\n /\n Content displayed inside the Tooltip. Can be a string or a React component.\n /\n content: ReactNode;\n /\n A string to determine the status of the Tooltip. Defaults to `info`.\n /\n status?: ValidationStatus;\n /\n Delay in milliseconds before the Tooltip is shown.\n /\n enterDelay?: number;\n /\n Delay in milliseconds before the Tooltip is hidden.\n /\n leaveDelay?: number;\n /\n Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n /\n disabled?: boolean;\n /\n Option to remove the hover listener.\n /\n disableHoverListener?: boolean;\n /\n Option to remove the focus listener.\n */\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...getTriggerProps(),\n ref: triggerRef,\n })}\n\n {open && !disabled && (\n <div\n className={clsx(withBaseName(), withBaseName(status), className)}\n ref={~~floating~~}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span className={withBaseName(\"content\")}>{content}</span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </div>\n )}\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":"~~;;;;;;;;;;;;;;AAcA~~,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,QAAA;AAAA,MACA,SAAY,GAAA,KAAA;AAAA,MACZ,QAAW,GAAA,KAAA;AAAA,MACX,IAAM,EAAA,QAAA;AAAA,MACN,OAAA;AAAA,MACA,MAAS,GAAA,MAAA;AAAA,MACT,SAAY,GAAA,OAAA;AAAA,MACZ,UAAa,GAAA,GAAA;AAAA,MACb,UAAa,GAAA,CAAA;AAAA,MACV,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,SAA6B,GAAA;AAAA,MACjC,IAAM,EAAA,QAAA;AAAA,MACN,SAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAG,IAAA;AAAA,KACL,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,UAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,eAAA;AAAA,MACA,eAAA;AAAA,KACF,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,IACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,MACG,QAAA,EAAA;AAAA,QAAe,cAAA,CAAA,QAAQ,CACtB,IAAA,YAAA,CAAa,QAAU,EAAA;AAAA,UACrB,GAAG,eAAgB,EAAA;AAAA,~~UACnB~~,GAAK,EAAA,UAAA;AAAA,SACN,CAAA;AAAA,QAEF,IAAA,IAAQ,CAAC,QAAA,oBACP,~~IAAA~~,CAAA,~~KAAA~~,EAAA;AAAA,~~UACC~~,~~WAAW~~,~~IAAK~~,CAAA,YAAA,~~IAAgB~~,~~YAAa~~,CAAA,~~MAAM~~,~~GAAG~~,~~SAAS~~,CAAA;AAAA,~~UAC/D~~,GAAK,EAAA,~~QAAA~~;AAAA,~~UACJ~~,GAAG,eAAgB,EAAA;AAAA,~~UAEpB~~,QAAA,EAAA;AAAA,~~4BAAC~~,IAAA,CAAA,KAAA,EAAA;AAAA,~~cAAI~~,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,~~cACrC~~,QAAA,EAAA;AAAA,~~gBAAA~~,CAAC,4BACC,GAAA,CAAA,eAAA,EAAA;AAAA,~~kBACC~~,MAAA;AAAA,~~kBACA~~,IAAM,EAAA,CAAA;AAAA,~~kBACN~~,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,~~iBAChC~~,CAAA;AAAA,~~gCAED~~,GAAA,CAAA,MAAA,EAAA;AAAA,~~kBAAK~~,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,~~kBAAI~~,QAAA,EAAA,OAAA;AAAA,~~iBAAQ~~,CAAA;AAAA,~~eAAA~~;AAAA,~~aACrD~~,CAAA;AAAA,~~YACC~~,CAAC,6BACC,GAAA,CAAA,aAAA,EAAA;AAAA,~~cACE~~,GAAG,UAAA;AAAA,~~cACJ~~,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,~~cAC~~/B,WAAa,EAAA,CAAA;AAAA,~~cACb~~,IAAK,EAAA,0CAAA;AAAA,~~cACL~~,MAAO,EAAA,mCAAA;AAAA,~~cACP~~,MAAQ,EAAA,CAAA;AAAA,~~cACR~~,KAAO,EAAA,EAAA;AAAA,~~aACT~~,CAAA;AAAA,~~WAAA~~;AAAA,~~SAEJ~~,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"Tooltip.js","sources":["../src/tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n cloneElement,\n forwardRef,\n HTMLAttributes,\n ReactNode,\n isValidElement,\n Ref,\n} from \"react\";\nimport { FloatingArrow, FloatingPortal } from \"@floating-ui/react\";\nimport { StatusIndicator, ValidationStatus } from \"../status-indicator\";\nimport {\n UseFloatingUIProps,\n makePrefixer,\n mergeProps,\n useForkRef,\n} from \"../utils\";\nimport { useTooltip, UseTooltipProps } from \"./useTooltip\";\nimport \"./Tooltip.css\";\nimport { SaltProvider } from \"../salt-provider\";\n\nconst withBaseName = makePrefixer(\"saltTooltip\");\n\nexport interface TooltipProps\n extends HTMLAttributes<HTMLDivElement>,\n Pick<UseFloatingUIProps, \"open\" \| \"onOpenChange\" \| \"placement\"> {\n /*\n The children will be the Tooltip's trigger.\n /\n children: ReactNode;\n /\n Whether to hide the Tooltip arrow. Defaults to `false`.\n /\n hideArrow?: boolean;\n /\n Whether to hide the status icon within the Tooltip. Defaults to `false`.\n /\n hideIcon?: boolean;\n /\n Content displayed inside the Tooltip. Can be a string or a React component.\n /\n content: ReactNode;\n /\n A string to determine the status of the Tooltip. Defaults to `info`.\n /\n status?: ValidationStatus;\n /\n Delay in milliseconds before the Tooltip is shown.\n /\n enterDelay?: number;\n /\n Delay in milliseconds before the Tooltip is hidden.\n /\n leaveDelay?: number;\n /\n Option to not display the Tooltip. Can be used in conditional situations like text truncation.\n /\n disabled?: boolean;\n /\n Option to remove the hover listener.\n /\n disableHoverListener?: boolean;\n /\n Option to remove the focus listener.\n /\n disableFocusListener?: boolean;\n}\n\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n function Tooltip(props, ref) {\n const {\n children,\n className,\n disabled,\n hideArrow = false,\n hideIcon = false,\n open: openProp,\n content,\n status = \"info\",\n placement = \"right\",\n enterDelay = 300,\n leaveDelay = 0,\n ...rest\n } = props;\n\n const hookProps: UseTooltipProps = {\n open: openProp,\n placement,\n enterDelay,\n leaveDelay,\n ...rest,\n };\n\n const {\n arrowProps,\n open,\n floating,\n reference,\n getTriggerProps,\n getTooltipProps,\n } = useTooltip(hookProps);\n\n const triggerRef = useForkRef(\n // @ts-ignore\n isValidElement(children) ? children.ref : null,\n reference\n );\n\n const floatingRef = useForkRef(floating, ref) as Ref<HTMLDivElement>;\n\n return (\n <>\n {isValidElement(children) &&\n cloneElement(children, {\n ...mergeProps(getTriggerProps(), children.props),\n ref: triggerRef,\n })}\n\n {open && !disabled && (\n <FloatingPortal>\n {/ The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n <div\n className={clsx(\n withBaseName(),\n withBaseName(status),\n className\n )}\n ref={floatingRef}\n {...getTooltipProps()}\n >\n <div className={withBaseName(\"container\")}>\n {!hideIcon && (\n <StatusIndicator\n status={status}\n size={1}\n className={withBaseName(\"icon\")}\n />\n )}\n <span className={withBaseName(\"content\")}>{content}</span>\n </div>\n {!hideArrow && (\n <FloatingArrow\n {...arrowProps}\n className={withBaseName(\"arrow\")}\n strokeWidth={1}\n fill=\"var(--salt-container-primary-background)\"\n stroke=\"var(--tooltip-status-borderColor)\"\n height={5}\n width={10}\n />\n )}\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </>\n );\n }\n);\n"],"names":["Tooltip"],"mappings":"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"}

package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js CHANGED Viewed

@@ -7,6 +7,7 @@ import '../utils/useId.js';
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import 'clsx';
 function getDocument(floating) {
   var _a;

package/dist-es/packages/core/src/tooltip/useAriaAnnounce.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement \| null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" \| \"close\",\n pointerType?: PointerEvent[\"pointerType\"]\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number \| Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(() => {\n announceFloating();\n }, getDelay(delay, \"open\", pointerTypeRef.current));\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":[],"mappings":"~~;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"useAriaAnnounce.js","sources":["../src/tooltip/useAriaAnnounce.ts"],"sourcesContent":["import type { ElementProps, FloatingContext } from \"@floating-ui/react\";\nimport { PointerEvent, useEffect, useRef } from \"react\";\nimport { useAriaAnnouncer } from \"../aria-announcer\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nfunction getDocument(floating: HTMLElement \| null) {\n return floating?.ownerDocument ?? document;\n}\n\n// TODO: Check whether can be anything more restrictive than `any`\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nfunction getWindow(value: any) {\n return getDocument(value).defaultView ?? window;\n}\n\nfunction isElement(value: unknown): value is HTMLElement {\n return value ? value instanceof getWindow(value).Element : false;\n}\n\nfunction getDelay(\n value: Props[\"delay\"],\n prop: \"open\" \| \"close\",\n pointerType?: PointerEvent[\"pointerType\"]\n) {\n if (pointerType && pointerType !== \"mouse\") {\n return 0;\n }\n\n if (typeof value === \"number\") {\n return value;\n }\n\n return value?.[prop];\n}\n\ntype Props = {\n delay?: number \| Partial<{ open: number; close: number }>;\n};\n\nexport const useAriaAnnounce = (\n context: FloatingContext,\n { delay = 0 }: Props\n): ElementProps => {\n const { open, dataRef, refs } = context;\n\n const pointerTypeRef = useRef<PointerEvent[\"pointerType\"]>();\n const timeoutRef = useRef<number>();\n const blockMouseMoveRef = useRef(true);\n const { announce } = useAriaAnnouncer();\n\n useIsomorphicLayoutEffect(() => {\n if (!open) {\n pointerTypeRef.current = undefined;\n }\n });\n\n useEffect(() => {\n const reference = refs.reference.current;\n function announceFloating() {\n const tooltipContent = refs.floating.current?.innerText;\n\n if (tooltipContent) {\n announce(tooltipContent);\n }\n }\n\n function onMouseEnter(event: MouseEvent) {\n clearTimeout(timeoutRef.current);\n\n if (open) {\n return;\n }\n\n blockMouseMoveRef.current = false;\n dataRef.current.openEvent = event;\n\n if (delay) {\n timeoutRef.current = window.setTimeout(() => {\n announceFloating();\n }, getDelay(delay, \"open\", pointerTypeRef.current));\n } else {\n announceFloating();\n }\n }\n\n if (isElement(reference)) {\n reference.addEventListener(\"mouseenter\", onMouseEnter);\n return () => {\n reference.removeEventListener(\"mouseenter\", onMouseEnter);\n };\n }\n }, [dataRef, delay, open, refs.reference, refs.floating, announce]);\n\n function setPointerRef(event: PointerEvent) {\n pointerTypeRef.current = event.pointerType;\n }\n\n return {\n reference: {\n onPointerDown: setPointerRef,\n onPointerEnter: setPointerRef,\n },\n floating: {\n onMouseEnter() {\n clearTimeout(timeoutRef.current);\n },\n },\n };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/packages/core/src/tooltip/useTooltip.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { useFloatingUI } from '../utils/useFloatingUI.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import 'clsx';
 import { useAriaAnnounce } from './useAriaAnnounce.js';
 function useTooltip(props) {
@@ -71,8 +72,9 @@ function useTooltip(props) {
     ref: arrowRef,
     context,
     style: {
-      left: arrowX ? `${arrowX}px` : "",
-      top: arrowY ? `${arrowY}px` : ""
+      position: strategy,
+      left: arrowX != null ? arrowX : 0,
+      top: arrowY != null ? arrowY : 0
     }
   };
   const getTooltipProps = () => {
@@ -80,8 +82,8 @@ function useTooltip(props) {
       "data-placement": placement,
       ref: floating,
       style: {
-        top: y != null ? y : "",
-        left: x != null ? x : "",
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
         position: strategy
       }
     });

package/dist-es/packages/core/src/tooltip/useTooltip.js.map CHANGED Viewed

	@@ -1 +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 } = 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 left: arrowX ? ~~`${arrowX}px` : \"\"~~,\n top: arrowY ? ~~`${arrowY}px` : \"\"~~,\n },\n };\n\n const getTooltipProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n style: {\n top: y ?? ~~\"\"~~,\n left: x ?? ~~\"\"~~,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["open"],"mappings":"~~;;;;;;;;;~~AAyCO,SAAS,WAAW,KAAyB,EAAA;AAClD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAM,EAAA,QAAA;AAAA,IACN,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,oBAAA;AAAA,IACA,oBAAA;AAAA,GACF,GAAI,SAAS,EAAC,CAAA;AAEd,EAAM,MAAA,QAAA,GAAW,OAA6B,IAAI,CAAA,CAAA;AAElD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,aAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAACA,KAAkB,KAAA;AAC1C,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAeA,YAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,YAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,QAAA;AAAA,IACA,cAAA,EAAgB,EAAE,KAAA,EAAO,EAAE,CAAA,EAAG,QAAQ,CAAG,EAAA,MAAA,EAAW,GAAA,EAAG,EAAA;AAAA,IACvD,SAAA;AAAA,IACA,OAAA;AAAA,MACE,aAAc,CAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACV,OAAO,CAAC,CAAA;AAAA,MACR,IAAK,EAAA;AAAA,MACL,KAAM,CAAA,EAAE,OAAS,EAAA,UAAA,IAAc,CAAA;AAAA,MAC/B,KAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,KAC7B;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAI,eAAgB,CAAA;AAAA,IAC9D,SAAS,OAAS,EAAA;AAAA,MAChB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,MACA,SAAS,CAAC,oBAAA;AAAA,MACV,aAAa,WAAY,EAAA;AAAA,KAC1B,CAAA;AAAA,IACD,SAAS,OAAS,EAAA,EAAE,OAAS,EAAA,CAAC,sBAAsB,CAAA;AAAA,IACpD,OAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,IACpC,WAAW,OAAO,CAAA;AAAA,IAClB,gBAAgB,OAAS,EAAA;AAAA,MACvB,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,UAAA;AAAA,QACN,KAAO,EAAA,UAAA;AAAA,OACT;AAAA,KACD,CAAA;AAAA,GACF,CAAA,CAAA;AAED,EAAA,MAAM,UAAa,GAAA;AAAA,IACjB,GAAK,EAAA,QAAA;AAAA,IACL,OAAA;AAAA,IACA,KAAO,EAAA;AAAA,MACL,~~IAAA~~,~~EAAM~~,~~MAAS~~,~~GAAA~~,~~CAAA~~,~~EAAG~~,~~MAAa~~,~~CAAA~~,~~EAAA~~,~~CAAA~~,GAAA,~~EAAA~~;AAAA,~~MAC/B~~,~~GAAA~~,~~EAAK~~,~~MAAS~~,GAAA,~~CAAA~~,~~EAAG~~,~~MAAa,~~CAAA~~,EAAA,CAAA,GAAA,EAAA~~;AAAA,~~KAChC~~;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,kBAAkB,MAAiC;AACvD,IAAA,OAAO,gBAAiB,CAAA;AAAA,MAEtB,gBAAkB,EAAA,SAAA;AAAA,MAClB,GAAK,EAAA,QAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,~~EAAA~~;AAAA,QACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,~~EAAA~~;AAAA,QACX,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,MACtB,iBAAkB,CAAA;AAAA,IAChB,GAAK,EAAA,SAAA;AAAA,GACN,CAAA,CAAA;AAEH,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
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 } = 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 style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n },\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n return {\n arrowProps,\n open,\n floating,\n reference,\n getTooltipProps,\n getTriggerProps,\n };\n}\n"],"names":["open"],"mappings":"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"}

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

@@ -0,0 +1,21 @@
+import { clsx } from 'clsx';
+import { createChainedFunction } from './createChainedFunction.js';
+function mergeProps(propsA, propsB) {
+  const props = { ...propsA };
+  Object.keys(propsB).forEach((key) => {
+    const a = props[key];
+    const b = propsB[key];
+    if (typeof a === "function" && typeof b === "function" && key.indexOf("on") === 0) {
+      props[key] = createChainedFunction(a, b);
+    } else if (typeof a === "string" && typeof b === "string" && key === "className") {
+      props[key] = clsx(a, b);
+    } else {
+      props[key] = b != null ? b : a;
+    }
+  });
+  return props;
+}
+export { mergeProps };
+//# sourceMappingURL=mergeProps.js.map

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

@@ -0,0 +1 @@

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

package/dist-es/packages/core/src/viewport/ViewportProvider.js CHANGED Viewed

@@ -4,6 +4,7 @@ import '../utils/useFloatingUI.js';
 import '../utils/useId.js';
 import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect.js';
 import '../salt-provider/SaltProvider.js';
+import 'clsx';
 const ViewportContext = createContext(null);
 const ViewportProvider = ({ children }) => {

package/dist-es/packages/core/src/viewport/ViewportProvider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number \| null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport \|\| viewport \|\| 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver \| null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":"~~;;;;;;;~~AAGM,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}
1	+ {"version":3,"file":"ViewportProvider.js","sources":["../src/viewport/ViewportProvider.tsx"],"sourcesContent":["import { createContext, useState, useContext, ReactNode } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../utils\";\n\nconst ViewportContext = createContext<number \| null>(null);\n\ntype ViewportProviderProps = {\n children?: ReactNode;\n};\n\nconst ViewportProvider = ({ children }: ViewportProviderProps) => {\n // Get value directly from the ViewportContext so we can detect if the value is null (no inherited ViewportProvider)\n const existingViewport = useContext(ViewportContext);\n const [viewport, setViewport] = useState(existingViewport);\n\n const noExistingViewport = existingViewport === null;\n const viewportValue = existingViewport \|\| viewport \|\| 0;\n\n useIsomorphicLayoutEffect(() => {\n let observer: ResizeObserver \| null = null;\n\n if (noExistingViewport) {\n observer = new ResizeObserver(\n (observerEntries: ResizeObserverEntry[]) => {\n setViewport(observerEntries[0].contentRect.width);\n }\n );\n\n observer.observe(document.body);\n }\n\n return () => {\n if (observer) {\n observer.disconnect();\n }\n };\n }, [noExistingViewport]);\n\n return (\n <ViewportContext.Provider value={viewportValue}>\n {children}\n </ViewportContext.Provider>\n );\n};\n\nconst useViewport = (): number => {\n const value = useContext(ViewportContext);\n return value === null ? 0 : value;\n};\n\nexport { ViewportProvider, ViewportContext, useViewport };\n"],"names":[],"mappings":";;;;;;;;AAGM,MAAA,eAAA,GAAkB,cAA6B,IAAI,EAAA;AAMzD,MAAM,gBAAmB,GAAA,CAAC,EAAE,QAAA,EAAsC,KAAA;AAEhE,EAAM,MAAA,gBAAA,GAAmB,WAAW,eAAe,CAAA,CAAA;AACnD,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,gBAAgB,CAAA,CAAA;AAEzD,EAAA,MAAM,qBAAqB,gBAAqB,KAAA,IAAA,CAAA;AAChD,EAAM,MAAA,aAAA,GAAgB,oBAAoB,QAAY,IAAA,CAAA,CAAA;AAEtD,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,QAAkC,GAAA,IAAA,CAAA;AAEtC,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAA,QAAA,GAAW,IAAI,cAAA;AAAA,QACb,CAAC,eAA2C,KAAA;AAC1C,UAAY,WAAA,CAAA,eAAA,CAAgB,CAAG,CAAA,CAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,SAClD;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAS,IAAI,CAAA,CAAA;AAAA,KAChC;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,QAAA,CAAS,UAAW,EAAA,CAAA;AAAA,OACtB;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,kBAAkB,CAAC,CAAA,CAAA;AAEvB,EACE,uBAAA,GAAA,CAAC,gBAAgB,QAAhB,EAAA;AAAA,IAAyB,KAAO,EAAA,aAAA;AAAA,IAC9B,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,cAAc,MAAc;AAChC,EAAM,MAAA,KAAA,GAAQ,WAAW,eAAe,CAAA,CAAA;AACxC,EAAO,OAAA,KAAA,KAAU,OAAO,CAAI,GAAA,KAAA,CAAA;AAC9B;;;;"}

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

@@ -38,12 +38,14 @@ export declare function useTooltip(props?: UseTooltipProps): {
             events: import("@floating-ui/react").FloatingEvents;
             dataRef: import("react").MutableRefObject<import("@floating-ui/react").ContextData>;
             nodeId: string | undefined;
+            floatingId: string;
             refs: import("@floating-ui/react").ExtendedRefs<import("@floating-ui/react").ReferenceType>;
             elements: import("@floating-ui/react").ExtendedElements<import("@floating-ui/react").ReferenceType>;
         };
         style: {
-            left: string;
-            top: string;
+            position: import("@floating-ui/react").Strategy;
+            left: number;
+            top: number;
         };
     };
     open: boolean;

package/dist-types/utils/index.d.ts CHANGED Viewed

@@ -17,3 +17,4 @@ export * from "./useIsFocusVisible";
 export * from "./useIsomorphicLayoutEffect";
 export * from "./usePrevious";
 export * from "./useResponsiveProp";
+export * from "./mergeProps";

package/dist-types/utils/mergeProps.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+interface Props {
+    [key: string]: unknown;
+}
+/**
+ * This utility merges two prop objects according to the following rules:
+ *
+ * - If the prop is a function and begins with "on" then chain the functions together
+ * - If the prop key is "className" then merge them using `clsx`
+ * - If the prop is anything else, then use the value from the second parameter unless it's undefined then use the value from the first parameter
+ */
+export declare function mergeProps(propsA: Props, propsB: Props): Record<string, unknown>;
+export {};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/core",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "Apache-2.0",
   "main": "dist-cjs/packages/core/src/index.js",
   "sideEffects": [
@@ -23,9 +23,9 @@
   "module": "dist-es/packages/core/src/index.js",
   "typings": "dist-types/index.d.ts",
   "dependencies": {
-    "@floating-ui/react": "^0.20.0",
+    "@floating-ui/react": "^0.23.0",
     "clsx": "^1.2.1",
-    "@salt-ds/icons": "1.2.0"
+    "@salt-ds/icons": "1.3.0"
   },
   "files": [
     "dist-cjs",