@salt-ds/core 1.46.1 → 1.47.1

package/dist-es/menu/MenuBase.js

@@ -46,7 +46,7 @@ function MenuBase(props) {
     strategy: !getVirtualElement ? "absolute" : "fixed",
     placement: placement ?? (isNested || getVirtualElement ? "right-start" : "bottom-start"),
     middleware: [
-      // Align the nested menu by shifting it by var(--salt-size-border)
+      // Align the nested menu by shifting it by var(--salt-spacing-fixed-100)
       offset(
         isNested ? { crossAxis: -1, mainAxis: 2 } : !getVirtualElement ? 1 : 0
       ),

package/dist-es/menu/MenuBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import {\n  FloatingNode,\n  type ReferenceType,\n  flip,\n  limitShift,\n  offset,\n  safePolygon,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useFloatingTree,\n  useHover,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type UseFloatingUIProps,\n  useControlled,\n  useFloatingUI,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { MenuContext } from \"./MenuContext\";\n\nexport interface MenuBaseProps {\n  children?: ReactNode;\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * If true, the menu will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n   */\n  placement?: UseFloatingUIProps[\"placement\"];\n  /**\n   * Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.\n   */\n  getVirtualElement?: () => ReferenceType | null;\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n  const {\n    children,\n    defaultOpen,\n    open,\n    onOpenChange,\n    placement,\n    getVirtualElement,\n  } = props;\n  const parentId = useFloatingParentNodeId();\n  const nodeId = useFloatingNodeId();\n  const tree = useFloatingTree();\n  const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  const [openState, setOpenState] = useControlled({\n    controlled: open,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange],\n  );\n\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [focusInside, setFocusInside] = useState(false);\n\n  const isNested = parentId != null;\n\n  const { x, y, strategy, elements, refs, context } = useFloatingUI({\n    nodeId,\n    open: openState,\n    onOpenChange: setOpen,\n    strategy: !getVirtualElement ? \"absolute\" : \"fixed\",\n    placement:\n      placement ??\n      (isNested || getVirtualElement ? \"right-start\" : \"bottom-start\"),\n    middleware: [\n      // Align the nested menu by shifting it by var(--salt-size-border)\n      offset(\n        isNested ? { crossAxis: -1, mainAxis: 2 } : !getVirtualElement ? 1 : 0,\n      ),\n      flip({}),\n      shift({ limiter: limitShift() }),\n      size({\n        apply({ elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            maxHeight: `${availableHeight}px`,\n          });\n        },\n      }),\n    ],\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (getVirtualElement) {\n      refs.setPositionReference(getVirtualElement());\n    }\n  }, [getVirtualElement, refs]);\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [\n      useHover(context, {\n        enabled: isNested && !focusInside,\n        handleClose: safePolygon({ blockPointerEvents: true }),\n      }),\n      useClick(context, {\n        event: \"mousedown\",\n        toggle: !isNested,\n        ignoreMouse: isNested,\n      }),\n      useRole(context, { role: \"menu\" }),\n      useDismiss(context, { bubbles: true }),\n      useListNavigation(context, {\n        listRef: elementsRef,\n        activeIndex,\n        nested: isNested,\n        onNavigate: setActiveIndex,\n      }),\n    ],\n  );\n\n  const getPanelPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.offsetWidth,\n    height: elements.floating?.offsetHeight,\n  });\n\n  useEffect(() => {\n    if (!tree) return;\n\n    function handleItemClick() {\n      setOpen(false);\n    }\n\n    tree.events.on(\"click\", handleItemClick);\n\n    return () => {\n      tree.events.off(\"click\", handleItemClick);\n    };\n  }, [tree, setOpen]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <MenuContext.Provider\n        value={{\n          openState,\n          getReferenceProps,\n          getFloatingProps,\n          refs,\n          getPanelPosition,\n          getItemProps,\n          activeIndex,\n          context,\n          elementsRef,\n          focusInside,\n          setFocusInside,\n          isNested,\n        }}\n      >\n        {children}\n      </MenuContext.Provider>\n    </FloatingNode>\n  );\n}\n"],"names":["elements"],"mappings":"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"}
+{"version":3,"file":"MenuBase.js","sources":["../src/menu/MenuBase.tsx"],"sourcesContent":["import {\n  FloatingNode,\n  type ReferenceType,\n  flip,\n  limitShift,\n  offset,\n  safePolygon,\n  shift,\n  size,\n  useClick,\n  useDismiss,\n  useFloatingNodeId,\n  useFloatingParentNodeId,\n  useFloatingTree,\n  useHover,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport {\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  type UseFloatingUIProps,\n  useControlled,\n  useFloatingUI,\n  useIsomorphicLayoutEffect,\n} from \"../utils\";\nimport { MenuContext } from \"./MenuContext\";\n\nexport interface MenuBaseProps {\n  children?: ReactNode;\n  /**\n   * Display or hide the component.\n   */\n  open?: boolean;\n  /**\n   * If true, the menu will be open by default.\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback function triggered when open state changes.\n   */\n  onOpenChange?: (newOpen: boolean) => void;\n  /**\n   * Set the placement of the Menu component relative to the trigger element. Defaults to `bottom-start` if it's the root menu or `right-start` if it's nested.\n   */\n  placement?: UseFloatingUIProps[\"placement\"];\n  /**\n   * Function that returns a [virtual element](https://floating-ui.com/docs/virtual-elements). If this is provided, it will override MenuTrigger.\n   */\n  getVirtualElement?: () => ReferenceType | null;\n}\n\nexport function MenuBase(props: MenuBaseProps) {\n  const {\n    children,\n    defaultOpen,\n    open,\n    onOpenChange,\n    placement,\n    getVirtualElement,\n  } = props;\n  const parentId = useFloatingParentNodeId();\n  const nodeId = useFloatingNodeId();\n  const tree = useFloatingTree();\n  const elementsRef = useRef<(HTMLDivElement | null)[]>([]);\n\n  const [openState, setOpenState] = useControlled({\n    controlled: open,\n    default: Boolean(defaultOpen),\n    name: \"ListControl\",\n    state: \"open\",\n  });\n\n  const setOpen = useCallback(\n    (newOpen: boolean) => {\n      setOpenState(newOpen);\n      onOpenChange?.(newOpen);\n    },\n    [onOpenChange],\n  );\n\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const [focusInside, setFocusInside] = useState(false);\n\n  const isNested = parentId != null;\n\n  const { x, y, strategy, elements, refs, context } = useFloatingUI({\n    nodeId,\n    open: openState,\n    onOpenChange: setOpen,\n    strategy: !getVirtualElement ? \"absolute\" : \"fixed\",\n    placement:\n      placement ??\n      (isNested || getVirtualElement ? \"right-start\" : \"bottom-start\"),\n    middleware: [\n      // Align the nested menu by shifting it by var(--salt-spacing-fixed-100)\n      offset(\n        isNested ? { crossAxis: -1, mainAxis: 2 } : !getVirtualElement ? 1 : 0,\n      ),\n      flip({}),\n      shift({ limiter: limitShift() }),\n      size({\n        apply({ elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            maxHeight: `${availableHeight}px`,\n          });\n        },\n      }),\n    ],\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    if (getVirtualElement) {\n      refs.setPositionReference(getVirtualElement());\n    }\n  }, [getVirtualElement, refs]);\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n    [\n      useHover(context, {\n        enabled: isNested && !focusInside,\n        handleClose: safePolygon({ blockPointerEvents: true }),\n      }),\n      useClick(context, {\n        event: \"mousedown\",\n        toggle: !isNested,\n        ignoreMouse: isNested,\n      }),\n      useRole(context, { role: \"menu\" }),\n      useDismiss(context, { bubbles: true }),\n      useListNavigation(context, {\n        listRef: elementsRef,\n        activeIndex,\n        nested: isNested,\n        onNavigate: setActiveIndex,\n      }),\n    ],\n  );\n\n  const getPanelPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.offsetWidth,\n    height: elements.floating?.offsetHeight,\n  });\n\n  useEffect(() => {\n    if (!tree) return;\n\n    function handleItemClick() {\n      setOpen(false);\n    }\n\n    tree.events.on(\"click\", handleItemClick);\n\n    return () => {\n      tree.events.off(\"click\", handleItemClick);\n    };\n  }, [tree, setOpen]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <MenuContext.Provider\n        value={{\n          openState,\n          getReferenceProps,\n          getFloatingProps,\n          refs,\n          getPanelPosition,\n          getItemProps,\n          activeIndex,\n          context,\n          elementsRef,\n          focusInside,\n          setFocusInside,\n          isNested,\n        }}\n      >\n        {children}\n      </MenuContext.Provider>\n    </FloatingNode>\n  );\n}\n"],"names":["elements"],"mappings":"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"}

package/dist-es/menu/MenuGroup.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMenuGroup-label {\n  background: var(--salt-container-primary-background);\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  font-family: var(--salt-text-label-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltMenuGroup {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n  border-top: 0;\n}\n";
+var css_248z = ".saltMenuGroup-label {\n  background: var(--salt-container-primary-background);\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  font-family: var(--salt-text-label-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltMenuGroup {\n  border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltMenuGroup:first-of-type {\n  border-top: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MenuGroup.css.js.map

package/dist-es/menu/MenuItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMenuItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltMenuItem:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltMenuItem:hover {\n  outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n  background: var(--salt-selectable-background-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n  box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n  box-shadow: 0 calc(var(--salt-size-border) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-border) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* TODO: Find a better way of doing this */\n.saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {\n  min-height: var(--salt-text-lineHeight);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n  margin-left: auto;\n}\n";
+var css_248z = ".saltMenuItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltMenuItem:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltMenuItem:hover {\n  outline: none;\n}\n\n.saltMenuItem:hover,\n.saltMenuItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltMenuItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltMenuItem[aria-disabled=\"true\"],\n.saltMenuItem[aria-disabled=\"true\"]:active {\n  background: var(--salt-selectable-background-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n  box-shadow: none;\n}\n\n.saltMenuItem-blurActive {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* TODO: Find a better way of doing this */\n.saltMenuItem .saltIcon:not(.saltCheckboxIcon-icon) {\n  min-height: var(--salt-text-lineHeight);\n}\n\n.saltMenuItem-expandIcon.saltIcon {\n  margin-left: auto;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MenuItem.css.js.map

package/dist-es/menu/MenuPanel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMenuPanel {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  min-width: 10em;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltMenuPanel-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-border);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltMenuPanel:focus-visible {\n  outline: none;\n}\n";
+var css_248z = ".saltMenuPanel {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  min-width: 10em;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltMenuPanel-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltMenuPanel:focus-visible {\n  outline: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MenuPanel.css.js.map

package/dist-es/menu/MenuTrigger.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { mergeProps } from '../utils/mergeProps.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
@@ -11,36 +11,39 @@ import { useMenuContext } from './MenuContext.js';
 import { useMenuPanelContext } from './MenuPanelContext.js';
 import { MenuTriggerContext } from './MenuTriggerContext.js';
 
-function MenuTrigger(props) {
-  const { children } = props;
-  const { getReferenceProps, refs, setFocusInside, focusInside, openState } = useMenuContext();
-  const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();
-  const handleRef = useForkRef(
-    getRefFromChildren(children),
-    refs == null ? void 0 : refs.setReference
-  );
-  if (!children || !isValidElement(children)) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(
-    MenuTriggerContext.Provider,
-    {
-      value: { triggersSubmenu: true, blurActive: focusInside && openState },
-      children: cloneElement(children, {
-        ...mergeProps(
-          getReferenceProps({
-            onFocus() {
-              setFocusInsideParent(true);
-              setFocusInside(false);
-            }
-          }),
-          children.props
-        ),
-        ref: handleRef
-      })
+const MenuTrigger = forwardRef(
+  function MenuTrigger2(props, ref) {
+    const { children } = props;
+    const { getReferenceProps, refs, setFocusInside, focusInside, openState } = useMenuContext();
+    const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();
+    const handleFloatingRef = useForkRef(
+      getRefFromChildren(children),
+      refs == null ? void 0 : refs.setReference
+    );
+    const handleRef = useForkRef(handleFloatingRef, ref);
+    if (!children || !isValidElement(children)) {
+      return /* @__PURE__ */ jsx(Fragment, { children });
     }
-  );
-}
+    return /* @__PURE__ */ jsx(
+      MenuTriggerContext.Provider,
+      {
+        value: { triggersSubmenu: true, blurActive: focusInside && openState },
+        children: cloneElement(children, {
+          ...mergeProps(
+            getReferenceProps({
+              onFocus() {
+                setFocusInsideParent(true);
+                setFocusInside(false);
+              }
+            }),
+            children.props
+          ),
+          ref: handleRef
+        })
+      }
+    );
+  }
+);
 
 export { MenuTrigger };
 //# sourceMappingURL=MenuTrigger.js.map

package/dist-es/menu/MenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import { type ReactNode, cloneElement, isValidElement } from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\n\nexport interface MenuTriggerProps {\n  /**\n   * The trigger element for the menu. This should be a single child element and accept a ref.\n   */\n  children?: ReactNode;\n}\n\nexport function MenuTrigger(props: MenuTriggerProps) {\n  const { children } = props;\n\n  const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n    useMenuContext();\n  const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n  const handleRef = useForkRef(\n    getRefFromChildren(children),\n    refs?.setReference,\n  );\n\n  if (!children || !isValidElement(children)) {\n    // Should we log or throw error?\n    return <>{children}</>;\n  }\n\n  return (\n    <MenuTriggerContext.Provider\n      value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n    >\n      {cloneElement(children, {\n        ...mergeProps(\n          getReferenceProps({\n            onFocus() {\n              setFocusInsideParent(true);\n              setFocusInside(false);\n            },\n          }),\n          children.props,\n        ),\n        ref: handleRef,\n      })}\n    </MenuTriggerContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaO,SAAS,YAAY,KAAyB,EAAA;AACnD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,EAAE,iBAAmB,EAAA,IAAA,EAAM,gBAAgB,WAAa,EAAA,SAAA,KAC5D,cAAe,EAAA;AACjB,EAAA,MAAM,EAAE,cAAA,EAAgB,oBAAqB,EAAA,GAAI,mBAAoB,EAAA;AAErE,EAAA,MAAM,SAAY,GAAA,UAAA;AAAA,IAChB,mBAAmB,QAAQ,CAAA;AAAA,IAC3B,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA;AAAA,GACR;AAEA,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAE1C,IAAA,uCAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EACE,uBAAA,GAAA;AAAA,IAAC,kBAAmB,CAAA,QAAA;AAAA,IAAnB;AAAA,MACC,OAAO,EAAE,eAAA,EAAiB,IAAM,EAAA,UAAA,EAAY,eAAe,SAAU,EAAA;AAAA,MAEpE,uBAAa,QAAU,EAAA;AAAA,QACtB,GAAG,UAAA;AAAA,UACD,iBAAkB,CAAA;AAAA,YAChB,OAAU,GAAA;AACR,cAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,cAAA,cAAA,CAAe,KAAK,CAAA;AAAA;AACtB,WACD,CAAA;AAAA,UACD,QAAS,CAAA;AAAA,SACX;AAAA,QACA,GAAK,EAAA;AAAA,OACN;AAAA;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"MenuTrigger.js","sources":["../src/menu/MenuTrigger.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  type Ref,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { MenuTriggerContext } from \"./MenuTriggerContext\";\n\nexport interface MenuTriggerProps {\n  /**\n   * The trigger element for the menu. This should be a single child element and accept a ref.\n   */\n  children?: ReactNode;\n}\n\nexport const MenuTrigger = forwardRef<HTMLElement, MenuTriggerProps>(\n  function MenuTrigger(props, ref) {\n    const { children } = props;\n\n    const { getReferenceProps, refs, setFocusInside, focusInside, openState } =\n      useMenuContext();\n    const { setFocusInside: setFocusInsideParent } = useMenuPanelContext();\n\n    const handleFloatingRef = useForkRef(\n      getRefFromChildren(children),\n      refs?.setReference,\n    );\n    const handleRef = useForkRef(handleFloatingRef, ref);\n\n    if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n      // Should we log or throw error?\n      return <>{children}</>;\n    }\n\n    return (\n      <MenuTriggerContext.Provider\n        value={{ triggersSubmenu: true, blurActive: focusInside && openState }}\n      >\n        {cloneElement(children, {\n          ...mergeProps(\n            getReferenceProps({\n              onFocus() {\n                setFocusInsideParent(true);\n                setFocusInside(false);\n              },\n            }),\n            children.props,\n          ),\n          ref: handleRef,\n        })}\n      </MenuTriggerContext.Provider>\n    );\n  },\n);\n"],"names":["MenuTrigger"],"mappings":";;;;;;;;;;;;;AAmBO,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,IAAA,MAAM,EAAE,iBAAmB,EAAA,IAAA,EAAM,gBAAgB,WAAa,EAAA,SAAA,KAC5D,cAAe,EAAA;AACjB,IAAA,MAAM,EAAE,cAAA,EAAgB,oBAAqB,EAAA,GAAI,mBAAoB,EAAA;AAErE,IAAA,MAAM,iBAAoB,GAAA,UAAA;AAAA,MACxB,mBAAmB,QAAQ,CAAA;AAAA,MAC3B,IAAM,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAA;AAAA,KACR;AACA,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,iBAAA,EAAmB,GAAG,CAAA;AAEnD,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAG,EAAA;AAElE,MAAA,uCAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,IACE,uBAAA,GAAA;AAAA,MAAC,kBAAmB,CAAA,QAAA;AAAA,MAAnB;AAAA,QACC,OAAO,EAAE,eAAA,EAAiB,IAAM,EAAA,UAAA,EAAY,eAAe,SAAU,EAAA;AAAA,QAEpE,uBAAa,QAAU,EAAA;AAAA,UACtB,GAAG,UAAA;AAAA,YACD,iBAAkB,CAAA;AAAA,cAChB,OAAU,GAAA;AACR,gBAAA,oBAAA,CAAqB,IAAI,CAAA;AACzB,gBAAA,cAAA,CAAe,KAAK,CAAA;AAAA;AACtB,aACD,CAAA;AAAA,YACD,QAAS,CAAA;AAAA,WACX;AAAA,UACA,GAAK,EAAA;AAAA,SACN;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

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

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

package/dist-es/navigation-item/NavigationItem.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltNavigationItem {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  position: relative;\n  background: none;\n  border: none;\n  font: inherit;\n  color: inherit;\n  text-decoration: none;\n  cursor: var(--salt-selectable-cursor-hover);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n  top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  --saltButton-margin: var(--salt-spacing-50) 0;\n\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-25);\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--salt-size-indicator);\n  left: var(--salt-spacing-25);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n  background: var(--salt-navigable-indicator-active);\n  /* Hover on animation */\n  transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n";
+var css_248z = ".saltNavigationItem {\n  color: var(--salt-content-primary-foreground);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n/* Vars applied to root NavigationItem component */\n.saltNavigationItem-wrapper {\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: center;\n  position: relative;\n  background: none;\n  border: none;\n  font: inherit;\n  color: inherit;\n  text-decoration: none;\n  cursor: var(--salt-cursor-hover);\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n  box-sizing: border-box;\n}\n\n/* Vars applied to NavigationItem component when root */\n.saltNavigationItem-rootItem {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-label .saltIcon {\n  top: var(--salt-spacing-25);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-top: 0;\n  padding-bottom: 0;\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-vertical {\n  --saltButton-margin: var(--salt-spacing-50) 0;\n\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);\n  padding-right: var(--salt-spacing-100);\n  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));\n  width: 100%;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-label {\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--salt-spacing-100);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n  outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n  content: \"\";\n  position: absolute;\n  top: var(--salt-spacing-25);\n  left: 0;\n  display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n  width: 100%;\n  height: var(--salt-size-indicator);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--salt-size-indicator);\n  left: var(--salt-spacing-25);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover  */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-active::after,\n.saltNavigationItem-active:hover::after,\n.saltNavigationItem-active:focus::after {\n  background: var(--salt-navigable-indicator-active);\n  /* Hover on animation */\n  transition: background var(--salt-duration-perceptible) ease-in-out;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=NavigationItem.css.js.map

package/dist-es/option/Option.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-selectable-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-border) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n  min-height: var(--salt-text-lineHeight);\n}\n";
+var css_248z = ".saltOption {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n}\n\n.saltOption-active {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption-focusVisible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltOption:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow: calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100)\n    var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltOption[aria-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n\n/* TODO: Find a better way of doing this */\n.saltOption .saltIcon:not(.saltCheckboxIcon-icon) {\n  min-height: var(--salt-text-lineHeight);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Option.css.js.map

package/dist-es/option/Option.js

@@ -92,6 +92,7 @@ const Option = forwardRef(
         id,
         onClick: handleClick,
         onMouseOver: handleMouseOver,
+        tabIndex: -1,
         ...rest,
         children: [
           multiselect && /* @__PURE__ */ jsx(CheckboxIcon, { checked: selected, disabled }),

package/dist-es/option/Option.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport {\n  type OptionValue,\n  useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the option.\n   */\n  value: unknown;\n  /**\n   * The content of the option.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      className,\n      children,\n      disabled: disabledProp,\n      onClick,\n      id: idProp,\n      value,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-option\",\n      css: optionCss,\n      window: targetWindow,\n    });\n\n    const optionRef = useRef(null);\n    const id = useId(idProp);\n\n    const {\n      setActive,\n      activeState,\n      multiselect,\n      select,\n      register,\n      selectedState,\n      focusVisibleState,\n      valueToString,\n      disabled: listDisabled,\n    } = useListControlContext();\n\n    const disabled = disabledProp || listDisabled;\n\n    const selected = selectedState.includes(value);\n    const active = activeState?.id === id;\n\n    const optionValue: OptionValue<unknown> = useMemo(\n      () => ({\n        id: String(id),\n        disabled: Boolean(disabled),\n        value,\n      }),\n      [id, disabled, value],\n    );\n\n    const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (disabled || id === undefined) {\n        return;\n      }\n\n      // set active descendent\n      setActive(optionValue);\n\n      // handle selection\n      select(event, optionValue);\n\n      onClick?.(event);\n    };\n\n    const handleMouseOver = () => {\n      setActive(optionValue);\n    };\n\n    useEffect(() => {\n      if (id && optionRef.current) {\n        return register(optionValue, optionRef.current);\n      }\n    }, [optionValue, id, register]);\n\n    const handleRef = useForkRef(optionRef, ref);\n\n    return (\n      <div\n        aria-disabled={disabled ? \"true\" : undefined}\n        aria-selected={selected}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"active\")]: active,\n            [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n          },\n          className,\n        )}\n        ref={handleRef}\n        role=\"option\"\n        id={id}\n        onClick={handleClick}\n        onMouseOver={handleMouseOver}\n        {...rest}\n      >\n        {multiselect && <CheckboxIcon checked={selected} disabled={disabled} />}\n        {children ?? valueToString(value)}\n      </div>\n    );\n  },\n);\n"],"names":["Option","optionCss"],"mappings":"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"}
+{"version":3,"file":"Option.js","sources":["../src/option/Option.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type MouseEvent,\n  type ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport {\n  type OptionValue,\n  useListControlContext,\n} from \"../list-control/ListControlContext\";\nimport { makePrefixer, useForkRef, useId } from \"../utils\";\nimport optionCss from \"./Option.css\";\n\nexport interface OptionProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the option will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the option.\n   */\n  value: unknown;\n  /**\n   * The content of the option.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltOption\");\n\nexport const Option = forwardRef<HTMLDivElement, OptionProps>(\n  function Option(props, ref) {\n    const {\n      className,\n      children,\n      disabled: disabledProp,\n      onClick,\n      id: idProp,\n      value,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-option\",\n      css: optionCss,\n      window: targetWindow,\n    });\n\n    const optionRef = useRef(null);\n    const id = useId(idProp);\n\n    const {\n      setActive,\n      activeState,\n      multiselect,\n      select,\n      register,\n      selectedState,\n      focusVisibleState,\n      valueToString,\n      disabled: listDisabled,\n    } = useListControlContext();\n\n    const disabled = disabledProp || listDisabled;\n\n    const selected = selectedState.includes(value);\n    const active = activeState?.id === id;\n\n    const optionValue: OptionValue<unknown> = useMemo(\n      () => ({\n        id: String(id),\n        disabled: Boolean(disabled),\n        value,\n      }),\n      [id, disabled, value],\n    );\n\n    const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (disabled || id === undefined) {\n        return;\n      }\n\n      // set active descendent\n      setActive(optionValue);\n\n      // handle selection\n      select(event, optionValue);\n\n      onClick?.(event);\n    };\n\n    const handleMouseOver = () => {\n      setActive(optionValue);\n    };\n\n    useEffect(() => {\n      if (id && optionRef.current) {\n        return register(optionValue, optionRef.current);\n      }\n    }, [optionValue, id, register]);\n\n    const handleRef = useForkRef(optionRef, ref);\n\n    return (\n      <div\n        aria-disabled={disabled ? \"true\" : undefined}\n        aria-selected={selected}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"active\")]: active,\n            [withBaseName(\"focusVisible\")]: focusVisibleState && active,\n          },\n          className,\n        )}\n        ref={handleRef}\n        role=\"option\"\n        id={id}\n        onClick={handleClick}\n        onMouseOver={handleMouseOver}\n        tabIndex={-1}\n        {...rest}\n      >\n        {multiselect && <CheckboxIcon checked={selected} disabled={disabled} />}\n        {children ?? valueToString(value)}\n      </div>\n    );\n  },\n);\n"],"names":["Option","optionCss"],"mappings":"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"}

package/dist-es/option/OptionGroup.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOptionGroup-label {\n  background: var(--salt-container-primary-background);\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  font-family: var(--salt-text-label-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltOptionGroup {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltOptionGroup:first-of-type {\n  border-top: 0;\n}\n";
+var css_248z = ".saltOptionGroup-label {\n  background: var(--salt-container-primary-background);\n  color: var(--salt-content-secondary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-label-fontWeight-strong);\n  font-family: var(--salt-text-label-fontFamily);\n  line-height: var(--salt-text-label-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  box-sizing: border-box;\n}\n\n.saltOptionGroup {\n  border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n\n.saltOptionGroup:first-of-type {\n  border-top: 0;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=OptionGroup.css.js.map

package/dist-es/option/OptionList.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOptionList {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  border-radius: var(--salt-palette-corner, 0);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n}\n\n.saltOptionList-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-size-border);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltOptionList-collapsed {\n  display: none;\n}\n";
+var css_248z = ".saltOptionList {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);\n  border-radius: var(--salt-palette-corner, 0);\n  overflow: hidden;\n  overflow-y: auto;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n}\n\n.saltOptionList-container {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-fixed-100);\n  max-height: inherit;\n  min-height: inherit;\n}\n\n.saltOptionList-collapsed {\n  display: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=OptionList.css.js.map

package/dist-es/overlay/OverlayPanel.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOverlayPanel {\n  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));\n  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));\n\n  border-color: var(--overlay-borderColor);\n  border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));\n  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\n\n  background: var(--overlay-background);\n  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));\n\n  color: var(--saltOverlay-text-color, var(--salt-content-primary-foreground));\n  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));\n  width: max-content;\n}\n";
+var css_248z = ".saltOverlayPanel {\n  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));\n  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));\n  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));\n  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));\n\n  border-color: var(--overlay-borderColor);\n  border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));\n  border-width: var(--saltOverlay-borderWidth, var(--salt-size-fixed-100));\n  border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));\n\n  background: var(--overlay-background);\n  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));\n\n  color: var(--saltOverlay-text-color, var(--salt-content-primary-foreground));\n  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));\n  width: max-content;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=OverlayPanel.css.js.map

package/dist-es/overlay/OverlayPanelContent.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltOverlayPanelContent {\n  animation: var(--salt-animation-fade-in-center);\n  position: relative;\n  overflow: hidden;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n}\n\n.saltOverlayPanelContent-overflow {\n  padding-right: var(--salt-spacing-100);\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) transparent;\n  overflow-y: auto;\n}\n.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {\n  border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n";
+var css_248z = ".saltOverlayPanelContent {\n  animation: var(--salt-animation-fade-in-center);\n  position: relative;\n  overflow: hidden;\n  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));\n}\n\n.saltOverlayPanelContent-overflow {\n  padding-right: var(--salt-spacing-100);\n  border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) transparent;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) transparent;\n  overflow-y: auto;\n}\n.saltOverlayPanelContent-overflow.saltOverlayPanelContent-scroll-top {\n  border-top: var(--salt-size-fixed-100) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=OverlayPanelContent.css.js.map

package/dist-es/overlay/OverlayPanelContent.js

@@ -40,7 +40,7 @@ const OverlayPanelContent = forwardRef(function OverlayPanelContent2(props, ref)
     if (!divRef.current) return;
     setIsOverflowing(
       divRef.current.scrollHeight > divRef.current.offsetHeight + 1
-      // var(--salt-size-border)
+      // var(--salt-size-thickness-100)
     );
   }, []);
   useResizeObserver({ ref: divRef, onResize: checkOverflow });

package/dist-es/overlay/OverlayPanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  debounce,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel Content\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n  HTMLDivElement,\n  OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-content\",\n    css: overlayPanelContentCss,\n    window: targetWindow,\n  });\n\n  const { children, className, ...rest } = props;\n  const [scrollBarTop, setScrollBarTop] = useState(false);\n  const [scrollBarBottom, setScrollBarBottom] = useState(true);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const divRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(divRef, ref);\n  const handleScroll = debounce(() => {\n    const container = divRef.current;\n    if (!container) return;\n    setScrollBarTop(container.scrollTop > 0);\n    setScrollBarBottom(\n      container.scrollHeight - container.scrollTop - container.clientHeight !==\n        0,\n    );\n  });\n\n  const checkOverflow = useCallback(() => {\n    if (!divRef.current) return;\n    setIsOverflowing(\n      divRef.current.scrollHeight > divRef.current.offsetHeight + 1, // var(--salt-size-border)\n    );\n  }, []);\n\n  useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n  useIsomorphicLayoutEffect(() => {\n    checkOverflow();\n  }, [checkOverflow]);\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <div\n        className={clsx(withBaseName(\"container\"), {\n          [withBaseName(\"overflow\")]: isOverflowing,\n          [withBaseName(\"scroll-top\")]: isOverflowing && scrollBarTop,\n          [withBaseName(\"scroll-bottom\")]: isOverflowing && scrollBarBottom,\n        })}\n        onScrollCapture={handleScroll}\n        {...rest}\n        ref={containerRef}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["OverlayPanelContent","overlayPanelContentCss"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAUpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAM,MAAA,YAAA,GAAe,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3C,EAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,IAAA,MAAM,YAAY,MAAO,CAAA,OAAA;AACzB,IAAA,IAAI,CAAC,SAAW,EAAA;AAChB,IAAgB,eAAA,CAAA,SAAA,CAAU,YAAY,CAAC,CAAA;AACvC,IAAA,kBAAA;AAAA,MACE,SAAU,CAAA,YAAA,GAAe,SAAU,CAAA,SAAA,GAAY,UAAU,YACvD,KAAA;AAAA,KACJ;AAAA,GACD,CAAA;AAED,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,IAAA,gBAAA;AAAA,MACE,MAAO,CAAA,OAAA,CAAQ,YAAe,GAAA,MAAA,CAAO,QAAQ,YAAe,GAAA;AAAA;AAAA,KAC9D;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,MAAQ,EAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAc,aAAA,EAAA;AAAA,GAChB,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAG,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,aAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,aAAiB,IAAA,YAAA;AAAA,QAC/C,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAiB,IAAA;AAAA,OACnD,CAAA;AAAA,MACD,eAAiB,EAAA,YAAA;AAAA,MAChB,GAAG,IAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"OverlayPanelContent.js","sources":["../src/overlay/OverlayPanelContent.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport clsx from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  debounce,\n  makePrefixer,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n  useResizeObserver,\n} from \"../utils\";\nimport overlayPanelContentCss from \"./OverlayPanelContent.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelContent\");\n\nexport interface OverlayPanelContentProps\n  extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of Overlay Panel Content\n   */\n  children?: ReactNode;\n}\n\nexport const OverlayPanelContent = forwardRef<\n  HTMLDivElement,\n  OverlayPanelContentProps\n>(function OverlayPanelContent(props, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-content\",\n    css: overlayPanelContentCss,\n    window: targetWindow,\n  });\n\n  const { children, className, ...rest } = props;\n  const [scrollBarTop, setScrollBarTop] = useState(false);\n  const [scrollBarBottom, setScrollBarBottom] = useState(true);\n  const [isOverflowing, setIsOverflowing] = useState(false);\n  const divRef = useRef<HTMLDivElement>(null);\n  const containerRef = useForkRef(divRef, ref);\n  const handleScroll = debounce(() => {\n    const container = divRef.current;\n    if (!container) return;\n    setScrollBarTop(container.scrollTop > 0);\n    setScrollBarBottom(\n      container.scrollHeight - container.scrollTop - container.clientHeight !==\n        0,\n    );\n  });\n\n  const checkOverflow = useCallback(() => {\n    if (!divRef.current) return;\n    setIsOverflowing(\n      divRef.current.scrollHeight > divRef.current.offsetHeight + 1, // var(--salt-size-thickness-100)\n    );\n  }, []);\n\n  useResizeObserver({ ref: divRef, onResize: checkOverflow });\n\n  useIsomorphicLayoutEffect(() => {\n    checkOverflow();\n  }, [checkOverflow]);\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <div\n        className={clsx(withBaseName(\"container\"), {\n          [withBaseName(\"overflow\")]: isOverflowing,\n          [withBaseName(\"scroll-top\")]: isOverflowing && scrollBarTop,\n          [withBaseName(\"scroll-bottom\")]: isOverflowing && scrollBarBottom,\n        })}\n        onScrollCapture={handleScroll}\n        {...rest}\n        ref={containerRef}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n"],"names":["OverlayPanelContent","overlayPanelContentCss"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA;AAUpD,MAAM,mBAAsB,GAAA,UAAA,CAGjC,SAASA,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,4BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AACzC,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AACxD,EAAM,MAAA,MAAA,GAAS,OAAuB,IAAI,CAAA;AAC1C,EAAM,MAAA,YAAA,GAAe,UAAW,CAAA,MAAA,EAAQ,GAAG,CAAA;AAC3C,EAAM,MAAA,YAAA,GAAe,SAAS,MAAM;AAClC,IAAA,MAAM,YAAY,MAAO,CAAA,OAAA;AACzB,IAAA,IAAI,CAAC,SAAW,EAAA;AAChB,IAAgB,eAAA,CAAA,SAAA,CAAU,YAAY,CAAC,CAAA;AACvC,IAAA,kBAAA;AAAA,MACE,SAAU,CAAA,YAAA,GAAe,SAAU,CAAA,SAAA,GAAY,UAAU,YACvD,KAAA;AAAA,KACJ;AAAA,GACD,CAAA;AAED,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAI,IAAA,CAAC,OAAO,OAAS,EAAA;AACrB,IAAA,gBAAA;AAAA,MACE,MAAO,CAAA,OAAA,CAAQ,YAAe,GAAA,MAAA,CAAO,QAAQ,YAAe,GAAA;AAAA;AAAA,KAC9D;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,iBAAA,CAAkB,EAAE,GAAA,EAAK,MAAQ,EAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAc,aAAA,EAAA;AAAA,GAChB,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAA,2BACG,KAAI,EAAA,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAC5C,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,WAAW,CAAG,EAAA;AAAA,QACzC,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,aAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,aAAiB,IAAA,YAAA;AAAA,QAC/C,CAAC,YAAA,CAAa,eAAe,CAAC,GAAG,aAAiB,IAAA;AAAA,OACnD,CAAA;AAAA,MACD,eAAiB,EAAA,YAAA;AAAA,MAChB,GAAG,IAAA;AAAA,MACJ,GAAK,EAAA,YAAA;AAAA,MAEJ;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/overlay/OverlayTrigger.js

@@ -1,5 +1,5 @@
 import { jsx, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { forwardRef, isValidElement, cloneElement } from 'react';
 import { mergeProps } from '../utils/mergeProps.js';
 import '../utils/useFloatingUI/useFloatingUI.js';
 import { useForkRef } from '../utils/useForkRef.js';
@@ -9,18 +9,24 @@ import '../viewport/ViewportProvider.js';
 import { getRefFromChildren } from '../utils/getRefFromChildren.js';
 import { useOverlayContext } from './OverlayContext.js';
 
-function OverlayTrigger(props) {
-  const { children } = props;
-  const { reference, getReferenceProps } = useOverlayContext();
-  const triggerRef = useForkRef(getRefFromChildren(children), reference);
-  if (!children || !isValidElement(children)) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
+const OverlayTrigger = forwardRef(
+  function OverlayTrigger2(props, ref) {
+    const { children } = props;
+    const { reference, getReferenceProps } = useOverlayContext();
+    const handleFloatingRef = useForkRef(
+      getRefFromChildren(children),
+      reference
+    );
+    const handleRef = useForkRef(handleFloatingRef, ref);
+    if (!children || !isValidElement(children)) {
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: cloneElement(children, {
+      ...mergeProps(getReferenceProps(), children.props),
+      ref: handleRef
+    }) });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: cloneElement(children, {
-    ...mergeProps(getReferenceProps(), children.props),
-    ref: triggerRef
-  }) });
-}
+);
 
 export { OverlayTrigger };
 //# sourceMappingURL=OverlayTrigger.js.map

package/dist-es/overlay/OverlayTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import { type ReactNode, cloneElement, isValidElement } from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport function OverlayTrigger(props: OverlayTriggerProps) {\n  const { children } = props;\n\n  const { reference, getReferenceProps } = useOverlayContext();\n\n  const triggerRef = useForkRef(getRefFromChildren(children), reference);\n\n  if (!children || !isValidElement(children)) {\n    return <>{children}</>;\n  }\n\n  return (\n    <>\n      {cloneElement(children, {\n        ...mergeProps(getReferenceProps(), children.props),\n        ref: triggerRef,\n      })}\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAQO,SAAS,eAAe,KAA4B,EAAA;AACzD,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,iBAAkB,EAAA;AAE3D,EAAA,MAAM,UAAa,GAAA,UAAA,CAAW,kBAAmB,CAAA,QAAQ,GAAG,SAAS,CAAA;AAErE,EAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAe,QAAQ,CAAG,EAAA;AAC1C,IAAA,uCAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EACE,uBAAA,GAAA,CAAA,QAAA,EAAA,EACG,uBAAa,QAAU,EAAA;AAAA,IACtB,GAAG,UAAA,CAAW,iBAAkB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,IACjD,GAAK,EAAA;AAAA,GACN,CACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"OverlayTrigger.js","sources":["../src/overlay/OverlayTrigger.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  type Ref,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n} from \"react\";\nimport { getRefFromChildren, mergeProps, useForkRef } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\n\nexport interface OverlayTriggerProps {\n  children?: ReactNode;\n}\n\nexport const OverlayTrigger = forwardRef<HTMLElement, OverlayTriggerProps>(\n  function OverlayTrigger(props, ref) {\n    const { children } = props;\n\n    const { reference, getReferenceProps } = useOverlayContext();\n\n    const handleFloatingRef = useForkRef(\n      getRefFromChildren(children),\n      reference,\n    );\n    const handleRef = useForkRef(handleFloatingRef, ref);\n\n    if (!children || !isValidElement<{ ref?: Ref<unknown> }>(children)) {\n      return <>{children}</>;\n    }\n\n    return (\n      <>\n        {cloneElement(children, {\n          ...mergeProps(getReferenceProps(), children.props),\n          ref: handleRef,\n        })}\n      </>\n    );\n  },\n);\n"],"names":["OverlayTrigger"],"mappings":";;;;;;;;;;;AAcO,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAkB,EAAA,GAAI,iBAAkB,EAAA;AAE3D,IAAA,MAAM,iBAAoB,GAAA,UAAA;AAAA,MACxB,mBAAmB,QAAQ,CAAA;AAAA,MAC3B;AAAA,KACF;AACA,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,iBAAA,EAAmB,GAAG,CAAA;AAEnD,IAAA,IAAI,CAAC,QAAA,IAAY,CAAC,cAAA,CAAuC,QAAQ,CAAG,EAAA;AAClE,MAAA,uCAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,IACE,uBAAA,GAAA,CAAA,QAAA,EAAA,EACG,uBAAa,QAAU,EAAA;AAAA,MACtB,GAAG,UAAA,CAAW,iBAAkB,EAAA,EAAG,SAAS,KAAK,CAAA;AAAA,MACjD,GAAK,EAAA;AAAA,KACN,CACH,EAAA,CAAA;AAAA;AAGN;;;;"}

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

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

package/dist-es/pill/Pill.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to the root element */\n.saltPill {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--saltPill-background, var(--pill-background));\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  border-style: solid;\n  border-width: var(--salt-size-border, 0);\n  border-color: var(--pill-borderColor);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding: 0 calc(var(--salt-spacing-50) - var(--salt-size-border, 0));\n  color: var(--saltPill-color, var(--pill-color));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable  */\n.saltPill-clickable {\n  --pill-background: var(--salt-actionable-bold-background);\n  --pill-color: var(--salt-actionable-bold-foreground);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor);\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n  --pill-color: var(--salt-actionable-bold-foreground-hover);\n  --pill-background: var(--salt-actionable-bold-background-hover);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n  --pill-color: var(--salt-actionable-bold-foreground-active);\n  --pill-background: var(--salt-actionable-bold-background-active);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n  --pill-color: var(--salt-actionable-bold-foreground-active);\n  --pill-background: var(--salt-actionable-bold-background-active);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n  --pill-color: var(--salt-actionable-bold-foreground-disabled);\n  --pill-background: var(--salt-actionable-bold-background-disabled);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n}\n";
+var css_248z = "/* Styles applied to the root element */\n.saltPill {\n  --pill-borderWidth: var(--salt-size-fixed-100);\n\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  background: var(--saltPill-background, var(--pill-background));\n  border-radius: var(--salt-palette-corner-weaker, 0);\n  border-style: solid;\n  border-width: var(--pill-borderWidth);\n  border-color: var(--pill-borderColor);\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  min-height: var(--salt-text-minHeight);\n  position: relative;\n  gap: var(--salt-spacing-50);\n  padding: 0 calc(var(--salt-spacing-50) - var(--pill-borderWidth));\n  color: var(--saltPill-color, var(--pill-color));\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill if pill is clickable  */\n.saltPill-clickable {\n  --pill-background: var(--salt-actionable-bold-background);\n  --pill-color: var(--salt-actionable-bold-foreground);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor);\n  cursor: var(--salt-cursor-hover);\n}\n\n.saltPill-clickable:hover,\n.saltPill-clickable:focus-visible {\n  --pill-color: var(--salt-actionable-bold-foreground-hover);\n  --pill-background: var(--salt-actionable-bold-background-hover);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor-hover);\n}\n\n.saltPill-clickable.saltPill-active,\n.saltPill-clickable:active {\n  --pill-color: var(--salt-actionable-bold-foreground-active);\n  --pill-background: var(--salt-actionable-bold-background-active);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus-visible {\n  outline: var(--salt-focused-outline);\n}\n\n/* Styles applied when the pill triggers a menu */\n.saltPill[aria-expanded=\"true\"][aria-haspopup=\"menu\"] {\n  --pill-color: var(--salt-actionable-bold-foreground-active);\n  --pill-background: var(--salt-actionable-bold-background-active);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor-active);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill:disabled,\n.saltPill:disabled:hover {\n  --pill-color: var(--salt-actionable-bold-foreground-disabled);\n  --pill-background: var(--salt-actionable-bold-background-disabled);\n  --pill-borderColor: var(--salt-actionable-bold-borderColor-disabled);\n  cursor: var(--salt-cursor-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Pill.css.js.map

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

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

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

@@ -151,9 +151,11 @@ const PillInput = forwardRef(function PillInput2({
   };
   const handlePillClick = (event) => {
     var _a;
-    const target = event.currentTarget;
-    const index = Number(target.dataset.index);
-    onPillRemove == null ? void 0 : onPillRemove(event, index);
+    if (!hidePillClose) {
+      const target = event.currentTarget;
+      const index = Number(target.dataset.index);
+      onPillRemove == null ? void 0 : onPillRemove(event, index);
+    }
     (_a = inputRef.current) == null ? void 0 : _a.focus();
   };
   const handleBlur = (event) => {