@salt-ds/core 1.72.0 → 1.74.0

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

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import { useFloatingTree, useListItem } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  useEffect,\n} from \"react\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport menuItemCss from \"./MenuItem.css\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the item will be disabled.\n   */\n  disabled?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n  function MenuItem(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      onClick,\n      onFocus,\n      onKeyDown,\n      ...rest\n    } = props;\n\n    const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n    const { setTriggerDisabled } = useMenuContext();\n    const { ExpandGroupIcon } = useIcon();\n    const { activeIndex, getItemProps, setFocusInside } = useMenuPanelContext();\n    const item = useListItem();\n    const tree = useFloatingTree();\n    const active = item.index === activeIndex;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-item\",\n      css: menuItemCss,\n      window: targetWindow,\n    });\n    const handleRef = useForkRef<HTMLDivElement>(ref, item.ref);\n\n    useEffect(() => {\n      setTriggerDisabled(!!disabled);\n    }, [disabled, setTriggerDisabled]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"blurActive\")]: blurActive,\n          },\n          className,\n        )}\n        role=\"menuitem\"\n        aria-disabled={disabled || undefined}\n        {...getItemProps({\n          tabIndex: disabled ? undefined : active ? 0 : -1,\n          onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n            const element = event.currentTarget;\n            onKeyDown?.(event);\n            if (\n              (event.key === \" \" || event.key === \"Enter\") &&\n              !triggersSubmenu &&\n              !disabled\n            ) {\n              event.preventDefault();\n              const { view, ...eventInit } = event;\n              queueMicrotask(() => {\n                element.dispatchEvent(\n                  new window.MouseEvent(\"click\", eventInit),\n                );\n              });\n            }\n          },\n          onClick(event: MouseEvent<HTMLDivElement>) {\n            if (!disabled) {\n              onClick?.(event);\n              if (!triggersSubmenu) {\n                tree?.events.emit(\"click\");\n              }\n            }\n          },\n          onFocus(event: FocusEvent<HTMLDivElement>) {\n            onFocus?.(event);\n            setFocusInside(true);\n          },\n          ...rest,\n        })}\n        ref={handleRef}\n      >\n        {children}\n        {triggersSubmenu && (\n          <ExpandGroupIcon className={withBaseName(\"expandIcon\")} aria-hidden />\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["MenuItem","menuItemCss"],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sources":["../src/menu/MenuItem.tsx"],"sourcesContent":["import { useFloatingTree, useListItem } from \"@floating-ui/react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport { RadioButtonIcon } from \"../radio-button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer, useForkRef, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useMenuAlignment } from \"./MenuAlignmentContext\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { useMenuGroup } from \"./MenuGroupContext\";\nimport menuItemCss from \"./MenuItem.css\";\nimport { useMenuPanelContext } from \"./MenuPanelContext\";\nimport { useIsMenuTrigger } from \"./MenuTriggerContext\";\nexport interface MenuItemProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * If `true`, the item will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value of the item. Identifies the item inside a `MenuGroup` whose `selectionVariant` is \"single\" or \"multiple\".\n   */\n  value?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nconst leadingSlotClassNames = [\n  withBaseName(\"selectionIcon\"),\n  withBaseName(\"selectionIconPlaceholder\"),\n  withBaseName(\"iconPlaceholder\"),\n];\n\nfunction hasLeadingIcon(item: HTMLElement | null) {\n  for (const node of Array.from(item?.childNodes ?? [])) {\n    if (node.nodeType === node.TEXT_NODE) {\n      if (node.textContent?.trim()) {\n        return false;\n      }\n    } else if (node.nodeType === node.ELEMENT_NODE) {\n      const { classList } = node as Element;\n      if (\n        !leadingSlotClassNames.some((className) =>\n          classList.contains(className),\n        )\n      ) {\n        return classList.contains(\"saltIcon\");\n      }\n    }\n  }\n  return false;\n}\n\nlet missingValueWarningShown = false;\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n  function MenuItem(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      onClick,\n      onFocus,\n      onKeyDown,\n      value,\n      ...rest\n    } = props;\n\n    const { triggersSubmenu, blurActive } = useIsMenuTrigger();\n    const { setTriggerDisabled } = useMenuContext();\n    const { ExpandGroupIcon } = useIcon();\n    const {\n      activeIndex,\n      getItemProps,\n      setFocusInside,\n      hasSelectionIcon,\n      registerPanelSelectionIcon,\n    } = useMenuPanelContext();\n    const {\n      reserveIconSpace,\n      reserveSelectionIconSpace,\n      registerIcon,\n      registerSelectionIcon,\n    } = useMenuAlignment();\n    const { isSelected, select, selectionVariant } = useMenuGroup();\n    const item = useListItem();\n    const tree = useFloatingTree();\n    const active = item.index === activeIndex;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-item\",\n      css: menuItemCss,\n      window: targetWindow,\n    });\n    const itemRef = useRef<HTMLDivElement>(null);\n    const listItemRef = useForkRef<HTMLDivElement>(item.ref, itemRef);\n    const handleRef = useForkRef<HTMLDivElement>(ref, listItemRef);\n    const activationKeyRef = useRef<string | null>(null);\n    const [hasIcon, setHasIcon] = useState(false);\n\n    const insideSelectableGroup =\n      selectionVariant !== undefined && !triggersSubmenu;\n    const selectable = insideSelectableGroup && value !== undefined;\n    const selected = selectable && isSelected(value);\n    // When icons lead this item and another group in the panel leads with a radio\n    // or checkbox, widen the icon column to match so the labels still line up.\n    const alignIconWithSelectionIcon =\n      hasSelectionIcon &&\n      !selectable &&\n      !reserveSelectionIconSpace &&\n      (hasIcon || reserveIconSpace);\n\n    useIsomorphicLayoutEffect(() => {\n      setHasIcon(hasLeadingIcon(itemRef.current));\n    });\n\n    useIsomorphicLayoutEffect(\n      () => (hasIcon ? registerIcon() : undefined),\n      [hasIcon, registerIcon],\n    );\n\n    useIsomorphicLayoutEffect(() => {\n      if (!selectable) {\n        return undefined;\n      }\n      const unregisterFromGroup = registerSelectionIcon();\n      const unregisterFromPanel = registerPanelSelectionIcon();\n      return () => {\n        unregisterFromGroup();\n        unregisterFromPanel();\n      };\n    }, [selectable, registerSelectionIcon, registerPanelSelectionIcon]);\n\n    useEffect(() => {\n      if (triggersSubmenu) {\n        setTriggerDisabled(!!disabled);\n      }\n    }, [disabled, setTriggerDisabled, triggersSubmenu]);\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (\n          insideSelectableGroup &&\n          value === undefined &&\n          !missingValueWarningShown\n        ) {\n          missingValueWarningShown = true;\n          console.warn(\n            \"Salt: MenuItem requires a `value` to be selectable inside a MenuGroup with `selectionVariant` set. It will behave as a regular menu item.\",\n          );\n        }\n      }\n    }, [insideSelectableGroup, value]);\n\n    const shouldCloseMenu = () =>\n      !selectable || activationKeyRef.current === \"Enter\";\n\n    let role = \"menuitem\";\n    if (selectable) {\n      role =\n        selectionVariant === \"single\" ? \"menuitemradio\" : \"menuitemcheckbox\";\n    }\n\n    return (\n      // biome-ignore lint/a11y/useAriaPropsSupportedByRole: Biome can't detect the role provided by the role variable. aria-checked is only used when the role is appropriate.\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"blurActive\")]: blurActive,\n            [withBaseName(\"selectionAlignedIcon\")]: alignIconWithSelectionIcon,\n          },\n          className,\n        )}\n        role={role}\n        aria-checked={selectable ? selected : undefined}\n        aria-disabled={disabled || undefined}\n        {...getItemProps({\n          tabIndex: active ? 0 : -1,\n          onKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n            const element = event.currentTarget;\n            const { key } = event;\n            onKeyDown?.(event);\n            if ((key === \" \" || key === \"Enter\") && !triggersSubmenu) {\n              event.preventDefault();\n              if (disabled || event.repeat) {\n                return;\n              }\n              const { view, ...eventInit } = event;\n              queueMicrotask(() => {\n                activationKeyRef.current = key;\n                element.dispatchEvent(\n                  new window.MouseEvent(\"click\", eventInit),\n                );\n                activationKeyRef.current = null;\n              });\n            }\n          },\n          onClick(event: MouseEvent<HTMLDivElement>) {\n            if (!disabled) {\n              onClick?.(event);\n              if (selectable) {\n                select(event, value);\n              }\n              if (!triggersSubmenu && shouldCloseMenu()) {\n                tree?.events.emit(\"click\");\n              }\n            }\n          },\n          onFocus(event: FocusEvent<HTMLDivElement>) {\n            onFocus?.(event);\n            setFocusInside(true);\n          },\n          ...rest,\n        })}\n        ref={handleRef}\n      >\n        {selectable && selectionVariant === \"single\" && (\n          <RadioButtonIcon\n            checked={selected}\n            className={withBaseName(\"selectionIcon\")}\n          />\n        )}\n        {selectable && selectionVariant === \"multiple\" && (\n          <CheckboxIcon\n            checked={selected}\n            className={withBaseName(\"selectionIcon\")}\n          />\n        )}\n        {reserveSelectionIconSpace && !selectable && (\n          <span\n            aria-hidden\n            className={withBaseName(\"selectionIconPlaceholder\")}\n          />\n        )}\n        {reserveIconSpace && !hasIcon && (\n          <span aria-hidden className={withBaseName(\"iconPlaceholder\")} />\n        )}\n        {children}\n        {triggersSubmenu && (\n          <ExpandGroupIcon className={withBaseName(\"expandIcon\")} aria-hidden />\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["MenuItem","menuItemCss"],"mappings":"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"}

package/dist-es/menu/MenuPanel.js

@@ -8,6 +8,7 @@ import { useForkRef } from '../utils/useForkRef.js';
 import '../utils/useId.js';
 import '../salt-provider/SaltProvider.js';
 import '../viewport/ViewportProvider.js';
+import { useSlotRegistry, useMenuAlignmentScope, MenuAlignmentContext } from './MenuAlignmentContext.js';
 import { useMenuContext } from './MenuContext.js';
 import { MenuPanelBase } from './MenuPanelBase.js';
 import { MenuPanelContext } from './MenuPanelContext.js';
@@ -30,11 +31,19 @@ const MenuPanel = forwardRef(
       isNested
     } = useMenuContext();
     const handleRef = useForkRef(ref, refs == null ? void 0 : refs.setFloating);
+    const [hasSelectionIcon, registerPanelSelectionIcon] = useSlotRegistry();
+    const alignment = useMenuAlignmentScope();
     return /* @__PURE__ */ jsx(
       MenuPanelContext.Provider,
       {
-        value: { activeIndex, getItemProps, setFocusInside },
-        children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
+        value: {
+          activeIndex,
+          getItemProps,
+          setFocusInside,
+          hasSelectionIcon,
+          registerPanelSelectionIcon
+        },
+        children: /* @__PURE__ */ jsx(MenuAlignmentContext.Provider, { value: alignment, children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(
           FloatingComponent,
           {
             open: openState,
@@ -53,7 +62,7 @@ const MenuPanel = forwardRef(
             ...rest,
             children: /* @__PURE__ */ jsx(MenuPanelBase, { children })
           }
-        ) })
+        ) }) })
       }
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPanel.js","sources":["../src/menu/MenuPanel.tsx"],"sourcesContent":["import { FloatingList } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuPanelBase } from \"./MenuPanelBase\";\nimport { MenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the menu panel.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuPanel\");\n\nexport const MenuPanel = forwardRef<HTMLDivElement, MenuPanelProps>(\n  function MenuPanel(props, ref) {\n    const { children, className, ...rest } = props;\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      getItemProps,\n      openState,\n      getFloatingProps,\n      refs,\n      getPanelPosition,\n      context,\n      elementsRef,\n      activeIndex,\n      setFocusInside,\n      isNested,\n    } = useMenuContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(ref, refs?.setFloating);\n\n    return (\n      <MenuPanelContext.Provider\n        value={{ activeIndex, getItemProps, setFocusInside }}\n      >\n        <FloatingList elementsRef={elementsRef}>\n          <FloatingComponent\n            open={openState}\n            role=\"menu\"\n            {...getFloatingProps()}\n            {...getPanelPosition()}\n            className={clsx(withBaseName(), className)}\n            focusManagerProps={\n              context\n                ? {\n                    context,\n                    initialFocus: isNested ? -1 : 0,\n                    returnFocus: !isNested,\n                    modal: false,\n                  }\n                : undefined\n            }\n            tabIndex={-1}\n            ref={handleRef}\n            {...rest}\n          >\n            <MenuPanelBase>{children}</MenuPanelBase>\n          </FloatingComponent>\n        </FloatingList>\n      </MenuPanelContext.Provider>\n    );\n  },\n);\n"],"names":["MenuPanel"],"mappings":";;;;;;;;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,oBAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,cAAA,EAAe;AAEnB,IAAA,MAAM,SAAA,GAAY,UAAA,CAA2B,GAAA,EAAK,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,WAAW,CAAA;AAEnE,IAAA,uBACE,GAAA;AAAA,MAAC,gBAAA,CAAiB,QAAA;AAAA,MAAjB;AAAA,QACC,KAAA,EAAO,EAAE,WAAA,EAAa,YAAA,EAAc,cAAA,EAAe;AAAA,QAEnD,QAAA,kBAAA,GAAA,CAAC,gBAAa,WAAA,EACZ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,SAAA;AAAA,YACN,IAAA,EAAK,MAAA;AAAA,YACJ,GAAG,gBAAA,EAAiB;AAAA,YACpB,GAAG,gBAAA,EAAiB;AAAA,YACrB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,YACzC,mBACE,OAAA,GACI;AAAA,cACE,OAAA;AAAA,cACA,YAAA,EAAc,WAAW,EAAA,GAAK,CAAA;AAAA,cAC9B,aAAa,CAAC,QAAA;AAAA,cACd,KAAA,EAAO;AAAA,aACT,GACA,MAAA;AAAA,YAEN,QAAA,EAAU,EAAA;AAAA,YACV,GAAA,EAAK,SAAA;AAAA,YACJ,GAAG,IAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA,CAAC,iBAAe,QAAA,EAAS;AAAA;AAAA,SAC3B,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"MenuPanel.js","sources":["../src/menu/MenuPanel.tsx"],"sourcesContent":["import { FloatingList } from \"@floating-ui/react\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { makePrefixer, useFloatingComponent, useForkRef } from \"../utils\";\nimport {\n  MenuAlignmentContext,\n  useMenuAlignmentScope,\n  useSlotRegistry,\n} from \"./MenuAlignmentContext\";\nimport { useMenuContext } from \"./MenuContext\";\nimport { MenuPanelBase } from \"./MenuPanelBase\";\nimport { MenuPanelContext } from \"./MenuPanelContext\";\n\nexport interface MenuPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * The content of the menu panel.\n   */\n  children?: ReactNode;\n}\n\nconst withBaseName = makePrefixer(\"saltMenuPanel\");\n\nexport const MenuPanel = forwardRef<HTMLDivElement, MenuPanelProps>(\n  function MenuPanel(props, ref) {\n    const { children, className, ...rest } = props;\n    const { Component: FloatingComponent } = useFloatingComponent();\n\n    const {\n      getItemProps,\n      openState,\n      getFloatingProps,\n      refs,\n      getPanelPosition,\n      context,\n      elementsRef,\n      activeIndex,\n      setFocusInside,\n      isNested,\n    } = useMenuContext();\n\n    const handleRef = useForkRef<HTMLDivElement>(ref, refs?.setFloating);\n\n    const [hasSelectionIcon, registerPanelSelectionIcon] = useSlotRegistry();\n    // Items outside a MenuGroup align with each other.\n    const alignment = useMenuAlignmentScope();\n\n    return (\n      <MenuPanelContext.Provider\n        value={{\n          activeIndex,\n          getItemProps,\n          setFocusInside,\n          hasSelectionIcon,\n          registerPanelSelectionIcon,\n        }}\n      >\n        <MenuAlignmentContext.Provider value={alignment}>\n          <FloatingList elementsRef={elementsRef}>\n            <FloatingComponent\n              open={openState}\n              role=\"menu\"\n              {...getFloatingProps()}\n              {...getPanelPosition()}\n              className={clsx(withBaseName(), className)}\n              focusManagerProps={\n                context\n                  ? {\n                      context,\n                      initialFocus: isNested ? -1 : 0,\n                      returnFocus: !isNested,\n                      modal: false,\n                    }\n                  : undefined\n              }\n              tabIndex={-1}\n              ref={handleRef}\n              {...rest}\n            >\n              <MenuPanelBase>{children}</MenuPanelBase>\n            </FloatingComponent>\n          </FloatingList>\n        </MenuAlignmentContext.Provider>\n      </MenuPanelContext.Provider>\n    );\n  },\n);\n"],"names":["MenuPanel"],"mappings":";;;;;;;;;;;;;;;AAwBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AACzC,IAAA,MAAM,EAAE,SAAA,EAAW,iBAAA,EAAkB,GAAI,oBAAA,EAAqB;AAE9D,IAAA,MAAM;AAAA,MACJ,YAAA;AAAA,MACA,SAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,gBAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,QACE,cAAA,EAAe;AAEnB,IAAA,MAAM,SAAA,GAAY,UAAA,CAA2B,GAAA,EAAK,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,WAAW,CAAA;AAEnE,IAAA,MAAM,CAAC,gBAAA,EAAkB,0BAA0B,CAAA,GAAI,eAAA,EAAgB;AAEvE,IAAA,MAAM,YAAY,qBAAA,EAAsB;AAExC,IAAA,uBACE,GAAA;AAAA,MAAC,gBAAA,CAAiB,QAAA;AAAA,MAAjB;AAAA,QACC,KAAA,EAAO;AAAA,UACL,WAAA;AAAA,UACA,YAAA;AAAA,UACA,cAAA;AAAA,UACA,gBAAA;AAAA,UACA;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,qBAAqB,QAAA,EAArB,EAA8B,OAAO,SAAA,EACpC,QAAA,kBAAA,GAAA,CAAC,gBAAa,WAAA,EACZ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,SAAA;AAAA,YACN,IAAA,EAAK,MAAA;AAAA,YACJ,GAAG,gBAAA,EAAiB;AAAA,YACpB,GAAG,gBAAA,EAAiB;AAAA,YACrB,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,YACzC,mBACE,OAAA,GACI;AAAA,cACE,OAAA;AAAA,cACA,YAAA,EAAc,WAAW,EAAA,GAAK,CAAA;AAAA,cAC9B,aAAa,CAAC,QAAA;AAAA,cACd,KAAA,EAAO;AAAA,aACT,GACA,MAAA;AAAA,YAEN,QAAA,EAAU,EAAA;AAAA,YACV,GAAA,EAAK,SAAA;AAAA,YACJ,GAAG,IAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA,CAAC,iBAAe,QAAA,EAAS;AAAA;AAAA,WAE7B,CAAA,EACF;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/menu/MenuPanelContext.js

@@ -12,7 +12,9 @@ const MenuPanelContext = createContext(
   {
     activeIndex: null,
     getItemProps: () => ({}),
-    setFocusInside: () => void 0
+    setFocusInside: () => void 0,
+    hasSelectionIcon: false,
+    registerPanelSelectionIcon: () => () => void 0
   }
 );
 function useMenuPanelContext() {

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

@@ -1 +1 @@
-{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n  extends Pick<\n    MenuContextValue,\n    \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n  > {}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n  \"MenuPanelContext\",\n  {\n    activeIndex: null,\n    getItemProps: () => ({}),\n    setFocusInside: () => undefined,\n  },\n);\n\nexport function useMenuPanelContext() {\n  return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAA,EAAa,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM;AAAA;AAE1B;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}
+{"version":3,"file":"MenuPanelContext.js","sources":["../src/menu/MenuPanelContext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport { createContext } from \"../utils\";\nimport type { MenuContextValue } from \"./MenuContext\";\n\nexport interface MenuPanelContextValue\n  extends Pick<\n    MenuContextValue,\n    \"getItemProps\" | \"activeIndex\" | \"setFocusInside\"\n  > {\n  hasSelectionIcon: boolean;\n  registerPanelSelectionIcon: () => () => void;\n}\n\nexport const MenuPanelContext = createContext<MenuPanelContextValue>(\n  \"MenuPanelContext\",\n  {\n    activeIndex: null,\n    getItemProps: () => ({}),\n    setFocusInside: () => undefined,\n    hasSelectionIcon: false,\n    registerPanelSelectionIcon: () => () => undefined,\n  },\n);\n\nexport function useMenuPanelContext() {\n  return useContext(MenuPanelContext);\n}\n"],"names":[],"mappings":";;;;;;;;;AAaO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,WAAA,EAAa,IAAA;AAAA,IACb,YAAA,EAAc,OAAO,EAAC,CAAA;AAAA,IACtB,gBAAgB,MAAM,MAAA;AAAA,IACtB,gBAAA,EAAkB,KAAA;AAAA,IAClB,0BAAA,EAA4B,MAAM,MAAM;AAAA;AAE5C;AAEO,SAAS,mBAAA,GAAsB;AACpC,EAAA,OAAO,WAAW,gBAAgB,CAAA;AACpC;;;;"}

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

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\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  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n  --numberInput-background: var(--salt-editable-tertiary-background);\n  --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-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  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-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.saltNumberInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-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.saltNumberInput-inputTextAlignLeft {\n  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
+var css_248z = "/* Styles applied to number container */\n.saltNumberInput {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderColor: var(--salt-editable-borderColor);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-outlineColor: var(--salt-focused-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  --numberInput-outline: none;\n\n  align-items: center;\n  background: var(--numberInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  box-sizing: border-box;\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  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  overflow: hidden;\n  outline: var(--numberInput-outline);\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-50);\n  padding-top: var(--salt-spacing-50);\n  padding-bottom: var(--salt-spacing-50);\n  position: relative;\n  width: 100%;\n}\n\n.saltNumberInput:hover {\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-cursor-text);\n}\n\n.saltNumberInput:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  background: var(--numberInput-background-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltNumberInput-primary {\n  --numberInput-background: var(--salt-editable-primary-background);\n  --numberInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltNumberInput-secondary {\n  --numberInput-background: var(--salt-editable-secondary-background);\n  --numberInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Class applied if `variant=\"tertiary\"` */\n.saltNumberInput-tertiary {\n  --numberInput-background: var(--salt-editable-tertiary-background);\n  --numberInput-background-disabled: var(--salt-editable-tertiary-background-disabled);\n  --numberInput-background-readonly: var(--salt-editable-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltNumberInput-error,\n.saltNumberInput-error:hover {\n  --numberInput-background: var(--salt-status-error-background);\n  --numberInput-borderColor: var(--salt-status-error-borderColor);\n  --numberInput-outlineColor: var(--salt-status-error-borderColor);\n  --numberInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltNumberInput-warning,\n.saltNumberInput-warning:hover {\n  --numberInput-background: var(--salt-status-warning-background);\n  --numberInput-borderColor: var(--salt-status-warning-borderColor);\n  --numberInput-outlineColor: var(--salt-status-warning-borderColor);\n  --numberInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltNumberInput-success,\n.saltNumberInput-success:hover {\n  --numberInput-background: var(--salt-status-success-background);\n  --numberInput-borderColor: var(--salt-status-success-borderColor);\n  --numberInput-outlineColor: var(--salt-status-success-borderColor);\n  --numberInput-background-readonly: var(--salt-status-success-background);\n}\n\n/* Style applied to inner input component */\n.saltNumberInput-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  letter-spacing: var(--salt-text-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  text-align: var(--numberInput-textAlign);\n  width: 100%;\n}\n\n.saltNumberInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to placeholder text */\n.saltNumberInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-lighter);\n}\n\n/* Styling when focused */\n.saltNumberInput-focused {\n  --numberInput-borderColor: var(--numberInput-outlineColor);\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n\n  outline: var(--saltNumberInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--numberInput-outlineColor));\n}\n\n/* Style applied if `bordered={true}` */\n.saltNumberInput-bordered {\n  --numberInput-border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n  --numberInput-borderWidth: 0;\n\n  border: var(--numberInput-border);\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused,\n.saltNumberInput-bordered:active {\n  --numberInput-borderWidth: var(--salt-size-fixed-200);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-disabled:hover {\n  --numberInput-borderWidth: 0;\n}\n\n/* Styling when focused and hovered when `bordered={true}` */\n.saltNumberInput-bordered.saltNumberInput-focused:hover {\n  --numberInput-borderColor: var(--salt-editable-borderColor-active);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltNumberInput-readOnly,\n.saltNumberInput-bordered.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-readonly);\n  cursor: var(--salt-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltNumberInput-focused.saltNumberInput-disabled {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltNumberInput-focused.saltNumberInput-readOnly {\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput:hover.saltNumberInput-readOnly {\n  --numberInput-borderColor: var(--salt-editable-borderColor-readonly);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltNumberInput-disabled .saltNumberInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltNumberInput-disabled,\n.saltNumberInput-disabled:hover,\n.saltNumberInput-disabled:active {\n  --numberInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --numberInput-borderStyle: var(--salt-borderStyle-solid);\n  --numberInput-borderWidth: var(--salt-size-fixed-100);\n\n  background: var(--numberInput-background-disabled);\n  cursor: var(--salt-cursor-disabled);\n  color: var(--saltNumberInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n/* Style applied to start adornments */\n.saltNumberInput-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.saltNumberInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltNumberInput-startAdornmentContainer {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltNumberInput-startAdornmentContainer > .saltButton,\n.saltNumberInput-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.saltNumberInput-inputTextAlignLeft {\n  --numberInput-textAlign: left;\n}\n\n.saltNumberInput-inputTextAlignCenter {\n  --numberInput-textAlign: center;\n}\n\n.saltNumberInput-inputTextAlignRight {\n  --numberInput-textAlign: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to number buttons container */\n.saltNumberInput-buttonContainer {\n  --numberInput-buttonGap: var(--salt-spacing-fixed-200);\n  display: flex;\n  flex-direction: column;\n  gap: var(--numberInput-buttonGap);\n  justify-content: center;\n}\n\n.saltNumberInput-hiddenButtons .saltNumberInput-buttonContainer {\n  display: none;\n}\n\n.saltNumberInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--numberInput-borderColor);\n}\n\n.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom: var(--salt-size-fixed-200) var(--salt-borderStyle-solid) var(--salt-editable-borderColor-active);\n}\n\n.saltNumberInput-bordered.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  /* Activation indicator width minus the border from the number input. */\n  border-bottom-width: var(--salt-size-fixed-100);\n}\n\n.saltNumberInput-bordered .saltNumberInput-activationIndicator,\n.saltNumberInput-readOnly.saltNumberInput-focused .saltNumberInput-activationIndicator {\n  border-bottom-width: 0;\n}\n\n.saltNumberInput-increment {\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0) 0 0;\n}\n\n.saltNumberInput-decrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weaker, 0) var(--salt-palette-corner-weaker, 0);\n}\n\n/* Styles applied to number buttons */\n.saltNumberInput-increment,\n.saltNumberInput-decrement {\n  --saltButton-height: calc((var(--salt-size-base) - (var(--salt-spacing-50) * 2) - var(--salt-size-fixed-200)) / 2);\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--button-borderWidth));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=NumberInput.css.js.map

package/dist-es/on-solid-button/OnSolidButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOnSolidButton {\n  --onSolidButton-borderWidth: var(--salt-size-fixed-100);\n  align-items: center;\n  appearance: none;\n  -webkit-appearance: none;\n  background: var(--salt-actionable-onSolid-subtle-background);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  border-style: solid;\n  border-width: var(--onSolidButton-borderWidth);\n  color: var(--salt-actionable-onSolid-subtle-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-action-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-action-fontWeight);\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  justify-content: center;\n  letter-spacing: var(--salt-text-action-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  margin: 0;\n  padding: 0 calc(var(--salt-spacing-100) - var(--onSolidButton-borderWidth));\n  position: relative;\n  -webkit-tap-highlight-color: transparent;\n  text-align: var(--salt-text-action-textAlign);\n  text-decoration: none;\n  text-transform: var(--salt-text-action-textTransform);\n  transition: none;\n}\n\n.saltOnSolidButton:focus-visible {\n  background: var(--salt-actionable-onSolid-subtle-background-hover);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n  color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n  outline-color: var(--salt-focused-onSolid-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n@media (hover: hover) {\n  .saltOnSolidButton:hover {\n    background: var(--salt-actionable-onSolid-subtle-background-hover);\n    border-color: var(--salt-actionable-onSolid-subtle-borderColor-hover);\n    color: var(--salt-actionable-onSolid-subtle-foreground-hover);\n    cursor: var(--salt-cursor-hover);\n  }\n}\n\n.saltOnSolidButton.saltOnSolidButton-active:focus-visible,\n.saltOnSolidButton:focus-visible:active,\n.saltOnSolidButton:active,\n.saltOnSolidButton.saltOnSolidButton-active {\n  background: var(--salt-actionable-onSolid-subtle-background-active);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor-active);\n  color: var(--salt-actionable-onSolid-subtle-foreground-active);\n  cursor: var(--salt-cursor-active);\n}\n\n.saltOnSolidButton:disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled,\n.saltOnSolidButton.saltOnSolidButton-disabled:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible,\n.saltOnSolidButton.saltOnSolidButton-disabled:focus-visible:active,\n.saltOnSolidButton.saltOnSolidButton-disabled:hover {\n  background: var(--salt-actionable-onSolid-subtle-background);\n  border-color: var(--salt-actionable-onSolid-subtle-borderColor);\n  color: var(--salt-actionable-onSolid-subtle-foreground);\n  cursor: var(--salt-cursor-disabled);\n  opacity: 0.4;\n}\n\n/* Lets a nested Text with styleAs=\"inherit\" use the action weights */\n.saltOnSolidButton {\n  --text-fontWeight-bolder: var(--salt-text-action-fontWeight-bolder);\n  --text-fontWeight-lighter: var(--salt-text-action-fontWeight-lighter);\n}\n\n.saltOnSolidButton strong,\n.saltOnSolidButton b {\n  font-weight: var(--salt-text-action-fontWeight-bolder);\n}\n\n/* Deprecated, use a nested Text with styleAs=\"inherit\" and fontWeight=\"lighter\" instead */\n.saltOnSolidButton small {\n  font-size: inherit;\n  font-weight: var(--salt-text-action-fontWeight-lighter);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OnSolidButton.css.js.map

package/dist-es/on-solid-button/OnSolidButton.css.js.map

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

package/dist-es/on-solid-button/OnSolidButton.js

@@ -0,0 +1,66 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import '../button/Button.js';
+import { useButton } from '../button/useButton.js';
+import { makePrefixer } from '../utils/makePrefixer.js';
+import '../utils/useFloatingUI/useFloatingUI.js';
+import '../utils/useId.js';
+import '../salt-provider/SaltProvider.js';
+import '../viewport/ViewportProvider.js';
+import css_248z from './OnSolidButton.css.js';
+
+const withBaseName = makePrefixer("saltOnSolidButton");
+const OnSolidButton = forwardRef(
+  function OnSolidButton2({
+    children,
+    className,
+    disabled,
+    focusableWhenDisabled,
+    onBlur,
+    onClick,
+    onKeyDown,
+    onKeyUp,
+    type = "button",
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-on-solid-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { active, buttonProps } = useButton({
+      disabled,
+      focusableWhenDisabled,
+      onBlur,
+      onClick,
+      onKeyDown,
+      onKeyUp
+    });
+    const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...restButtonProps,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("active")]: active,
+            [withBaseName("disabled")]: disabled
+          },
+          className
+        ),
+        ...rest,
+        ref,
+        type,
+        children
+      }
+    );
+  }
+);
+
+export { OnSolidButton };
+//# sourceMappingURL=OnSolidButton.js.map

package/dist-es/on-solid-button/OnSolidButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OnSolidButton.js","sources":["../src/on-solid-button/OnSolidButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { useButton } from \"../button\";\nimport { makePrefixer } from \"../utils\";\n\nimport onSolidButtonCss from \"./OnSolidButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOnSolidButton\");\n\nexport interface OnSolidButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n  /**\n   * If `true`, the button will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true`, the button will be focusable when disabled.\n   */\n  focusableWhenDisabled?: boolean;\n}\n\nexport const OnSolidButton = forwardRef<HTMLButtonElement, OnSolidButtonProps>(\n  function OnSolidButton(\n    {\n      children,\n      className,\n      disabled,\n      focusableWhenDisabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n      type = \"button\",\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-on-solid-button\",\n      css: onSolidButtonCss,\n      window: targetWindow,\n    });\n\n    const { active, buttonProps } = useButton<HTMLButtonElement>({\n      disabled,\n      focusableWhenDisabled,\n      onBlur,\n      onClick,\n      onKeyDown,\n      onKeyUp,\n    });\n\n    const { tabIndex: _tabIndex, ...restButtonProps } = buttonProps;\n\n    return (\n      <button\n        {...restButtonProps}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"active\")]: active,\n            [withBaseName(\"disabled\")]: disabled,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n        type={type}\n      >\n        {children}\n      </button>\n    );\n  },\n);\n"],"names":["OnSolidButton","onSolidButtonCss"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAa9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,qBAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,sBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,MAAA,EAAQ,WAAA,EAAY,GAAI,SAAA,CAA6B;AAAA,MAC3D,QAAA;AAAA,MACA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,GAAG,iBAAgB,GAAI,WAAA;AAEpD,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACE,GAAG,eAAA;AAAA,QACJ,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,MAAA;AAAA,YAC1B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,WAC9B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,IAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

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-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-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  opacity: 0.4;\n\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),\n    calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),\n    0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\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-disabled=\"true\"] {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  opacity: 0.4;\n\n  cursor: var(--salt-cursor-disabled);\n}\n\n.saltOption[aria-selected=\"true\"] {\n  z-index: var(--salt-zIndex-default);\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    calc(var(--salt-size-fixed-100) * -2) 0 0 0 var(--salt-selectable-background-hover),\n    calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-size-fixed-100) var(--salt-selectable-borderColor-selected),\n    0 calc(var(--salt-size-fixed-100) * -1) 0 var(--salt-selectable-borderColor-selected);\n}\n\n/* Align the checkbox with the first line of text */\n.saltOption-checkbox {\n  margin: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2) 0;\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

@@ -115,7 +115,13 @@ const OptionComponent = forwardRef(
           tabIndex: -1,
           ...rest,
           children: [
-            multiselect && /* @__PURE__ */ jsx(CheckboxIcon, { checked: selected }),
+            multiselect && /* @__PURE__ */ jsx(
+              CheckboxIcon,
+              {
+                checked: selected,
+                className: withBaseName("checkbox")
+              }
+            ),
             children ?? valueToString(value)
           ]
         }

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  forwardRef,\n  type MouseEvent,\n  memo,\n  type ReactNode,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport type { OptionValue } from \"../list-control/ListControlContext\";\nimport { useListControlOptionContext } from \"../list-control/ListControlOptionContext\";\nimport {\n  hasOptionState,\n  OPTION_STATE_ACTIVE,\n  OPTION_STATE_FOCUS_VISIBLE,\n  OPTION_STATE_SELECTED,\n} from \"../list-control/ListControlOptionStore\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} 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\nconst OptionComponent = 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      multiselect,\n      select,\n      register,\n      optionStateStore,\n      valueToString,\n      disabled: listDisabled,\n      listRef,\n    } = useListControlOptionContext();\n\n    const disabled = disabledProp || listDisabled;\n\n    const optionId = String(id);\n    const { getSnapshot, optionValue, subscribe } = useMemo(() => {\n      const nextOptionValue: OptionValue<unknown> = {\n        id: optionId,\n        disabled: Boolean(disabled),\n        value,\n      };\n      return {\n        getSnapshot: () =>\n          optionStateStore.getSnapshot(optionId, nextOptionValue),\n        optionValue: nextOptionValue,\n        subscribe: (listener: () => void) =>\n          optionStateStore.subscribe(optionId, listener),\n      };\n    }, [optionId, disabled, value, optionStateStore]);\n    const optionState = useSyncExternalStore(\n      subscribe,\n      getSnapshot,\n      getSnapshot,\n    );\n    const selected = hasOptionState(optionState, OPTION_STATE_SELECTED);\n    const active = hasOptionState(optionState, OPTION_STATE_ACTIVE);\n    const focusVisible = hasOptionState(\n      optionState,\n      OPTION_STATE_FOCUS_VISIBLE,\n    );\n\n    const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (disabled || id === undefined) {\n        return;\n      }\n\n      listRef?.current?.focus({ preventScroll: true });\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    useIsomorphicLayoutEffect(() => {\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      // biome-ignore lint/a11y/useKeyWithClickEvents: The click event is handled by the parent list control, which manages keyboard interactions.\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\")]: focusVisible,\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} />}\n        {children ?? valueToString(value)}\n      </div>\n    );\n  },\n);\n\n// Context isolation makes this bailout effective for unchanged option props.\nexport const Option = memo(OptionComponent) as typeof OptionComponent;\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  forwardRef,\n  type MouseEvent,\n  memo,\n  type ReactNode,\n  useMemo,\n  useRef,\n} from \"react\";\nimport { useSyncExternalStore } from \"use-sync-external-store/shim\";\nimport { CheckboxIcon } from \"../checkbox\";\nimport type { OptionValue } from \"../list-control/ListControlContext\";\nimport { useListControlOptionContext } from \"../list-control/ListControlOptionContext\";\nimport {\n  hasOptionState,\n  OPTION_STATE_ACTIVE,\n  OPTION_STATE_FOCUS_VISIBLE,\n  OPTION_STATE_SELECTED,\n} from \"../list-control/ListControlOptionStore\";\nimport {\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} 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\n// biome-ignore lint/plugin/named-component-functions: exported as memo(OptionComponent) under the name Option.\nconst OptionComponent = 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      multiselect,\n      select,\n      register,\n      optionStateStore,\n      valueToString,\n      disabled: listDisabled,\n      listRef,\n    } = useListControlOptionContext();\n\n    const disabled = disabledProp || listDisabled;\n\n    const optionId = String(id);\n    const { getSnapshot, optionValue, subscribe } = useMemo(() => {\n      const nextOptionValue: OptionValue<unknown> = {\n        id: optionId,\n        disabled: Boolean(disabled),\n        value,\n      };\n      return {\n        getSnapshot: () =>\n          optionStateStore.getSnapshot(optionId, nextOptionValue),\n        optionValue: nextOptionValue,\n        subscribe: (listener: () => void) =>\n          optionStateStore.subscribe(optionId, listener),\n      };\n    }, [optionId, disabled, value, optionStateStore]);\n    const optionState = useSyncExternalStore(\n      subscribe,\n      getSnapshot,\n      getSnapshot,\n    );\n    const selected = hasOptionState(optionState, OPTION_STATE_SELECTED);\n    const active = hasOptionState(optionState, OPTION_STATE_ACTIVE);\n    const focusVisible = hasOptionState(\n      optionState,\n      OPTION_STATE_FOCUS_VISIBLE,\n    );\n\n    const handleClick = (event: MouseEvent<HTMLDivElement>) => {\n      if (disabled || id === undefined) {\n        return;\n      }\n\n      listRef?.current?.focus({ preventScroll: true });\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    useIsomorphicLayoutEffect(() => {\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      // biome-ignore lint/a11y/useKeyWithClickEvents: The click event is handled by the parent list control, which manages keyboard interactions.\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\")]: focusVisible,\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 && (\n          <CheckboxIcon\n            checked={selected}\n            className={withBaseName(\"checkbox\")}\n          />\n        )}\n        {children ?? valueToString(value)}\n      </div>\n    );\n  },\n);\n\n// Context isolation makes this bailout effective for unchanged option props.\nexport const Option = memo(OptionComponent) as typeof OptionComponent;\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-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-borderStyle-solid) 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-bolder);\n  font-family: var(--salt-text-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-borderStyle-solid) 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/overlay/OverlayHeader.js

@@ -5,6 +5,8 @@ import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import { H2 } from '../text/Headings.js';
 import '../text/Label.js';
 import { Text } from '../text/Text.js';

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n  /**\n   * Header text\n   */\n  header?: ReactNode;\n  /**\n   * Preheader text is displayed just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n  function OverlayHeader(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-header\",\n      css: overlayHeaderCss,\n      window: targetWindow,\n    });\n\n    const { className, description, header, actions, preheader, ...rest } =\n      props;\n\n    const { setHeaderId, setDescriptionId } = useOverlayContext();\n\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n    const hasActions = Boolean(actions);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"withActions\")]: hasActions },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} styleAs=\"h4\" className={withBaseName(\"header\")}>\n              {preheader && <Text color=\"primary\">{preheader}</Text>}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {hasActions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["OverlayHeader","overlayHeaderCss"],"mappings":"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"}
+{"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport { H2, Text } from \"../text\";\nimport { makePrefixer, useId, useIsomorphicLayoutEffect } from \"../utils\";\nimport { useOverlayContext } from \"./OverlayContext\";\nimport overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n  /**\n   * Header text\n   */\n  header?: ReactNode;\n  /**\n   * Preheader text is displayed just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n  function OverlayHeader(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-header\",\n      css: overlayHeaderCss,\n      window: targetWindow,\n    });\n\n    const { className, description, header, actions, preheader, ...rest } =\n      props;\n\n    const { setHeaderId, setDescriptionId } = useOverlayContext();\n\n    const headingId = useId();\n    const descriptionId = useId();\n    const hasHeading = Boolean(header || preheader);\n    const hasDescription = Boolean(description);\n    const hasActions = Boolean(actions);\n\n    useIsomorphicLayoutEffect(() => {\n      setHeaderId?.(hasHeading ? headingId : undefined);\n\n      return () => {\n        setHeaderId?.(undefined);\n      };\n    }, [hasHeading, headingId, setHeaderId]);\n\n    useIsomorphicLayoutEffect(() => {\n      setDescriptionId?.(hasDescription ? descriptionId : undefined);\n\n      return () => {\n        setDescriptionId?.(undefined);\n      };\n    }, [hasDescription, descriptionId, setDescriptionId]);\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          { [withBaseName(\"withActions\")]: hasActions },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        <div className={withBaseName(\"container\")}>\n          {hasHeading && (\n            <H2 id={headingId} styleAs=\"h4\" className={withBaseName(\"header\")}>\n              {preheader && <Text color=\"primary\">{preheader}</Text>}\n              {header}\n            </H2>\n          )}\n          {description && (\n            <Text\n              id={descriptionId}\n              color=\"secondary\"\n              className={withBaseName(\"description\")}\n            >\n              {description}\n            </Text>\n          )}\n        </div>\n        {hasActions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["OverlayHeader","overlayHeaderCss"],"mappings":"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"}

package/dist-es/overlay/OverlayPanelCloseButton.js

@@ -13,7 +13,7 @@ import '../viewport/ViewportProvider.js';
 import css_248z from './OverlayPanelCloseButton.css.js';
 
 const withBaseName = makePrefixer("saltOverlayPanelCloseButton");
-const OverlayPanelCloseButton = forwardRef(function OverlayPanelButton({ className, ...rest }, ref) {
+const OverlayPanelCloseButton = forwardRef(function OverlayPanelCloseButton2({ className, ...rest }, ref) {
   const targetWindow = useWindow();
   useComponentCssInjection({
     testId: "salt-overlay-panel-close-button",

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

@@ -1 +1 @@
-{"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(function OverlayPanelButton({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-close-button\",\n    css: overlayPanelCloseButtonCss,\n    window: targetWindow,\n  });\n  const { CloseIcon } = useIcon();\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <Button\n        ref={ref}\n        aria-label=\"Close overlay\"\n        appearance=\"transparent\"\n        className={withBaseName(\"button\")}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["overlayPanelCloseButtonCss"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA;AAExD,MAAM,uBAAA,GAA0B,WAGrC,SAAS,kBAAA,CAAmB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AACzD,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iCAAA;AAAA,IACR,GAAA,EAAKA,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,EAAQ;AAE9B,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,KAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAC5C,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAA,EAAW,eAAA;AAAA,MACX,UAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GACzB,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"OverlayPanelCloseButton.js","sources":["../src/overlay/OverlayPanelCloseButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { Button, type ButtonProps } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { makePrefixer } from \"../utils\";\nimport overlayPanelCloseButtonCss from \"./OverlayPanelCloseButton.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayPanelCloseButton\");\n\nexport const OverlayPanelCloseButton = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(function OverlayPanelCloseButton({ className, ...rest }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overlay-panel-close-button\",\n    css: overlayPanelCloseButtonCss,\n    window: targetWindow,\n  });\n  const { CloseIcon } = useIcon();\n\n  return (\n    <div className={clsx(withBaseName(), className)}>\n      <Button\n        ref={ref}\n        aria-label=\"Close overlay\"\n        appearance=\"transparent\"\n        className={withBaseName(\"button\")}\n        {...rest}\n      >\n        <CloseIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["OverlayPanelCloseButton","overlayPanelCloseButtonCss"],"mappings":";;;;;;;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA;AAExD,MAAM,uBAAA,GAA0B,WAGrC,SAASA,wBAAAA,CAAwB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC9D,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,iCAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,OAAA,EAAQ;AAE9B,EAAA,2BACG,KAAA,EAAA,EAAI,SAAA,EAAW,KAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAC5C,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,YAAA,EAAW,eAAA;AAAA,MACX,UAAA,EAAW,aAAA;AAAA,MACX,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,MAC/B,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,GACzB,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/pagination/CompactPaginator.js

@@ -7,6 +7,8 @@ import { Button } from '../button/Button.js';
 import { useIcon } from '../semantic-icon-provider/SemanticIconProvider.js';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import '../text/Headings.js';
 import '../text/Label.js';
 import { Text } from '../text/Text.js';

package/dist-es/pagination/CompactPaginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEventHandler,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport compactPaginatorCss from \"./CompactPaginator.css\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-compact-paginator\",\n    css: compactPaginatorCss,\n    window: targetWindow,\n  });\n\n  const { NextIcon, PreviousIcon } = useIcon();\n\n  const { count, page, onPageChange } = usePaginationContext();\n\n  const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.max(1, page - 1));\n  };\n\n  const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.min(page + 1, count));\n  };\n\n  const isOnFirstPage = page === 1;\n  const isOnLastPage = page === count;\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      <Button\n        appearance=\"transparent\"\n        aria-label=\"Previous Page\"\n        onClick={onPreviousPage}\n        disabled={isOnFirstPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <PreviousIcon aria-hidden />\n      </Button>\n      {children ? children : <PageButton page={page} disabled />}\n      <Text as=\"span\" variant=\"secondary\">\n        of\n      </Text>\n      <PageButton page={count} disabled={isOnLastPage} />\n      <Button\n        appearance=\"transparent\"\n        aria-label=\"Next Page\"\n        onClick={onNextPage}\n        disabled={isOnLastPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <NextIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["CompactPaginator","compactPaginatorCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AACtE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,YAAA,EAAa,GAAI,OAAA,EAAQ;AAE3C,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,YAAA,KAAiB,oBAAA,EAAqB;AAE3D,EAAA,MAAM,cAAA,GAAuD,CAAC,KAAA,KAAU;AACtE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,GAAO,CAAC,CAAC,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,UAAA,GAAmD,CAAC,KAAA,KAAU;AAClE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,IAAA,GAAO,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAA,KAAS,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAA,KAAS,KAAA;AAE9B,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC9D,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,eAAA;AAAA,QACX,OAAA,EAAS,cAAA;AAAA,QACT,QAAA,EAAU,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,IACC,WAAW,QAAA,mBAAW,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,UAAQ,IAAA,EAAC,CAAA;AAAA,wBACvD,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,aAAY,QAAA,EAAA,IAAA,EAEpC,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,KAAA,EAAO,UAAU,YAAA,EAAc,CAAA;AAAA,oBACjD,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,WAAA;AAAA,QACX,OAAA,EAAS,UAAA;AAAA,QACT,QAAA,EAAU,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AACxB,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEventHandler,\n} from \"react\";\nimport { Button } from \"../button\";\nimport { useIcon } from \"../semantic-icon-provider\";\nimport { Text } from \"../text\";\nimport { makePrefixer } from \"../utils\";\nimport compactPaginatorCss from \"./CompactPaginator.css\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n  HTMLDivElement,\n  ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-compact-paginator\",\n    css: compactPaginatorCss,\n    window: targetWindow,\n  });\n\n  const { NextIcon, PreviousIcon } = useIcon();\n\n  const { count, page, onPageChange } = usePaginationContext();\n\n  const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.max(1, page - 1));\n  };\n\n  const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n    onPageChange(event, Math.min(page + 1, count));\n  };\n\n  const isOnFirstPage = page === 1;\n  const isOnLastPage = page === count;\n\n  return (\n    <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n      <Button\n        appearance=\"transparent\"\n        aria-label=\"Previous Page\"\n        onClick={onPreviousPage}\n        disabled={isOnFirstPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <PreviousIcon aria-hidden />\n      </Button>\n      {children ? children : <PageButton page={page} disabled />}\n      <Text as=\"span\" variant=\"secondary\">\n        of\n      </Text>\n      <PageButton page={count} disabled={isOnLastPage} />\n      <Button\n        appearance=\"transparent\"\n        aria-label=\"Next Page\"\n        onClick={onNextPage}\n        disabled={isOnLastPage}\n        className={withBaseName(\"arrowButton\")}\n      >\n        <NextIcon aria-hidden />\n      </Button>\n    </div>\n  );\n});\n"],"names":["CompactPaginator","compactPaginatorCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAEjD,MAAM,gBAAA,GAAmB,UAAA,CAG9B,SAASA,iBAAAA,CAAiB,EAAE,UAAU,SAAA,EAAW,GAAG,SAAA,EAAU,EAAG,GAAA,EAAK;AACtE,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,wBAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,QAAA,EAAU,YAAA,EAAa,GAAI,OAAA,EAAQ;AAE3C,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,YAAA,KAAiB,oBAAA,EAAqB;AAE3D,EAAA,MAAM,cAAA,GAAuD,CAAC,KAAA,KAAU;AACtE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,GAAO,CAAC,CAAC,CAAA;AAAA,EAC3C,CAAA;AAEA,EAAA,MAAM,UAAA,GAAmD,CAAC,KAAA,KAAU;AAClE,IAAA,YAAA,CAAa,OAAO,IAAA,CAAK,GAAA,CAAI,IAAA,GAAO,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAA,KAAS,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAA,KAAS,KAAA;AAE9B,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,SAAA,EAAW,GAAA,EAC9D,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,eAAA;AAAA,QACX,OAAA,EAAS,cAAA;AAAA,QACT,QAAA,EAAU,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA,KAC5B;AAAA,IACC,WAAW,QAAA,mBAAW,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAY,UAAQ,IAAA,EAAC,CAAA;AAAA,wBACvD,IAAA,EAAA,EAAK,EAAA,EAAG,MAAA,EAAO,OAAA,EAAQ,aAAY,QAAA,EAAA,IAAA,EAEpC,CAAA;AAAA,oBACA,GAAA,CAAC,UAAA,EAAA,EAAW,IAAA,EAAM,KAAA,EAAO,UAAU,YAAA,EAAc,CAAA;AAAA,oBACjD,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,UAAA,EAAW,aAAA;AAAA,QACX,YAAA,EAAW,WAAA;AAAA,QACX,OAAA,EAAS,UAAA;AAAA,QACT,QAAA,EAAU,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAA,kBAAA,GAAA,CAAC,QAAA,EAAA,EAAS,aAAA,EAAW,IAAA,EAAC;AAAA;AAAA;AACxB,GAAA,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/pagination/GoToInput.js

@@ -8,6 +8,8 @@ import '../form-field-context/FormFieldContext.js';
 import '../status-indicator/StatusIndicator.js';
 import '../text/Code.js';
 import '../text/Display.js';
+import '../text/Editorial.js';
+import '../text/Eyebrow.js';
 import '../text/Headings.js';
 import '../text/Label.js';
 import '../text/Text.js';

package/dist-es/pagination/GoToInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type Ref,\n  useState,\n} from \"react\";\nimport { FormField, FormFieldLabel } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport goToInputCss from \"./GoToInput.css\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Input label.\n   */\n  label?: string;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Change input variant.\n   */\n  inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n  function GoToInput(\n    {\n      className,\n      inputRef,\n      inputVariant = \"primary\",\n      label = \"Go to\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-go-to-input\",\n      css: goToInputCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      setInputValue(event.target.value);\n    };\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !Number.isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(event, pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = () => {\n      setInputValue(\"\");\n    };\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <FormField\n        labelPlacement=\"left\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...restProps}\n      >\n        <FormFieldLabel>{label}</FormFieldLabel>\n        <Input\n          className={clsx(withBaseName(\"input\"), {\n            [withBaseName(\"inputDefaultSize\")]: count < 100,\n          })}\n          ref={inputRef}\n          inputProps={{\n            style: { width: widthCh },\n          }}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          value={inputValue}\n          textAlign={\"center\"}\n          variant={inputVariant}\n        />\n      </FormField>\n    );\n  },\n);\n"],"names":["GoToInput","goToInputCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAgB1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CACP;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA,GAAe,SAAA;AAAA,IACf,KAAA,GAAQ,OAAA;AAAA,IACR,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAA,EAAa,GAAI,oBAAA,EAAqB;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA;AAE/C,IAAA,MAAM,QAAA,GAAiD,CAAC,KAAA,KAAU;AAChE,MAAA,aAAA,CAAc,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,IAClC,CAAA;AAEA,IAAA,MAAM,SAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,MAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,QAAA,MAAM,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAA,CAAW,GAAG,CAAA,IAC1B,CAAC,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,IACvB,SAAA,GAAY,CAAA,IACZ,aAAa,KAAA,EACb;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA;AAAA,QAC/B;AACA,QAAA,aAAA,CAAc,EAAE,CAAA;AAAA,MAClB;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,IAClB,CAAA;AAEA,IAAA,MAAM,OAAA,GAAU,CAAA,EAAG,CAAA,EAAG,KAAK,GAAG,MAAM,CAAA,EAAA,CAAA;AAEpC,IAAA,uBACE,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAe,MAAA;AAAA,QACf,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACvB,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,gBACrC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,KAAA,GAAQ;AAAA,eAC7C,CAAA;AAAA,cACD,GAAA,EAAK,QAAA;AAAA,cACL,UAAA,EAAY;AAAA,gBACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAA;AAAQ,eAC1B;AAAA,cACA,MAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,KAAA,EAAO,UAAA;AAAA,cACP,SAAA,EAAW,QAAA;AAAA,cACX,OAAA,EAAS;AAAA;AAAA;AACX;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEventHandler,\n  forwardRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type Ref,\n  useState,\n} from \"react\";\nimport { FormField, FormFieldLabel } from \"../form-field\";\nimport { Input } from \"../input\";\nimport { makePrefixer } from \"../utils\";\nimport goToInputCss from \"./GoToInput.css\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Input label.\n   */\n  label?: string;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * Change input variant.\n   */\n  inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n  function GoToInput(\n    {\n      className,\n      inputRef,\n      inputVariant = \"primary\",\n      label = \"Go to\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-go-to-input\",\n      css: goToInputCss,\n      window: targetWindow,\n    });\n\n    const { count, onPageChange } = usePaginationContext();\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n      setInputValue(event.target.value);\n    };\n\n    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n      if (event.key === \"Enter\") {\n        const pageValue = Number(inputValue);\n        if (\n          !inputValue.startsWith(\"0\") &&\n          !Number.isNaN(pageValue) &&\n          pageValue > 0 &&\n          pageValue <= count\n        ) {\n          onPageChange(event, pageValue);\n        }\n        setInputValue(\"\");\n      }\n    };\n\n    const onBlur = () => {\n      setInputValue(\"\");\n    };\n\n    const widthCh = `${`${count}`.length}ch`;\n\n    return (\n      <FormField\n        labelPlacement=\"left\"\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n        {...restProps}\n      >\n        <FormFieldLabel>{label}</FormFieldLabel>\n        <Input\n          className={clsx(withBaseName(\"input\"), {\n            [withBaseName(\"inputDefaultSize\")]: count < 100,\n          })}\n          ref={inputRef}\n          inputProps={{\n            style: { width: widthCh },\n          }}\n          onBlur={onBlur}\n          onChange={onChange}\n          onKeyDown={onKeyDown}\n          value={inputValue}\n          textAlign={\"center\"}\n          variant={inputVariant}\n        />\n      </FormField>\n    );\n  },\n);\n"],"names":["GoToInput","goToInputCss"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAgB1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CACP;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAA,GAAe,SAAA;AAAA,IACf,KAAA,GAAQ,OAAA;AAAA,IACR,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAA,EAAa,GAAI,oBAAA,EAAqB;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA;AAE/C,IAAA,MAAM,QAAA,GAAiD,CAAC,KAAA,KAAU;AAChE,MAAA,aAAA,CAAc,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,IAClC,CAAA;AAEA,IAAA,MAAM,SAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,MAAA,IAAI,KAAA,CAAM,QAAQ,OAAA,EAAS;AACzB,QAAA,MAAM,SAAA,GAAY,OAAO,UAAU,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAA,CAAW,GAAG,CAAA,IAC1B,CAAC,MAAA,CAAO,KAAA,CAAM,SAAS,CAAA,IACvB,SAAA,GAAY,CAAA,IACZ,aAAa,KAAA,EACb;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA;AAAA,QAC/B;AACA,QAAA,aAAA,CAAc,EAAE,CAAA;AAAA,MAClB;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA;AAAA,IAClB,CAAA;AAEA,IAAA,MAAM,OAAA,GAAU,CAAA,EAAG,CAAA,EAAG,KAAK,GAAG,MAAM,CAAA,EAAA,CAAA;AAEpC,IAAA,uBACE,IAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,cAAA,EAAe,MAAA;AAAA,QACf,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,kBAAgB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACvB,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA,CAAK,YAAA,CAAa,OAAO,CAAA,EAAG;AAAA,gBACrC,CAAC,YAAA,CAAa,kBAAkB,CAAC,GAAG,KAAA,GAAQ;AAAA,eAC7C,CAAA;AAAA,cACD,GAAA,EAAK,QAAA;AAAA,cACL,UAAA,EAAY;AAAA,gBACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAA;AAAQ,eAC1B;AAAA,cACA,MAAA;AAAA,cACA,QAAA;AAAA,cACA,SAAA;AAAA,cACA,KAAA,EAAO,UAAA;AAAA,cACP,SAAA,EAAW,QAAA;AAAA,cACX,OAAA,EAAS;AAAA;AAAA;AACX;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}