@salt-ds/lab 1.0.0-alpha.17 → 1.0.0-alpha.18

package/dist-es/dropdown-next/useDropdownNext.js

@@ -53,15 +53,15 @@ const useDropdownNext = ({
     setOpen(open2);
     onOpenChangeProp == null ? void 0 : onOpenChangeProp(open2);
   };
-  const { floating, reference, x, y, strategy, placement, context } = useFloatingUI({
+  const { floating, reference, x, y, strategy, placement, context, elements } = useFloatingUI({
     open,
     onOpenChange,
     placement: placementProp,
     middleware: [
       offset(0),
       size({
-        apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
+        apply({ rects, elements: elements2 }) {
+          Object.assign(elements2.floating.style, {
             width: `${rects.reference.width}px`
           });
         }
@@ -77,14 +77,19 @@ const useDropdownNext = ({
   const getDropdownNextProps = () => {
     return getFloatingProps({
       "data-placement": placement,
-      ref: floating,
-      style: {
-        top: y != null ? y : 0,
-        left: x != null ? x : 0,
-        position: strategy
-      }
+      ref: floating
     });
   };
+  const getPosition = () => {
+    var _a, _b;
+    return {
+      top: y != null ? y : 0,
+      left: x != null ? x : 0,
+      position: strategy,
+      width: (_a = elements.floating) == null ? void 0 : _a.clientWidth,
+      height: (_b = elements.floating) == null ? void 0 : _b.clientHeight
+    };
+  };
   const blurHandler = () => {
     listBlurHandler();
     setOpen(false);
@@ -156,7 +161,8 @@ const useDropdownNext = ({
       setOpen,
       floating,
       reference,
-      getDropdownNextProps
+      getDropdownNextProps,
+      getPosition
     }
   };
 };

package/dist-es/dropdown-next/useDropdownNext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownNext.js","sources":["../src/dropdown-next/useDropdownNext.tsx"],"sourcesContent":["import {\n  useInteractions,\n  useDismiss,\n  useRole,\n  flip,\n  shift,\n  limitShift,\n  offset,\n  size,\n} from \"@floating-ui/react\";\nimport {\n  useControlled,\n  useFloatingUI,\n  UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport { ListItemNext } from \"../list-next\";\nimport { HTMLProps, KeyboardEvent, FocusEvent } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\n\ninterface UseDropdownNextProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  listProps: UseListProps;\n  // props for controlled dropdown\n  openControlProp?: boolean;\n}\n\nexport const useDropdownNext = ({\n  listProps,\n  openControlProp,\n  onOpenChange: onOpenChangeProp,\n  placement: placementProp,\n}: UseDropdownNextProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: openControlProp,\n    default: false,\n    name: \"DropdownNext\",\n    state: \"open\",\n  });\n\n  // USELIST HOOK\n  const {\n    focusHandler: listFocusHandler,\n    keyDownHandler: listKeyDownHandler,\n    blurHandler: listBlurHandler,\n    mouseOverHandler: listMouseOverHandler,\n    activeDescendant,\n    selectedItem,\n    setSelectedItem,\n    highlightedItem,\n    setHighlightedItem,\n    contextValue: listContextValue,\n    focusVisibleRef,\n  } = useList({\n    ...listProps,\n  });\n\n  const { select, highlight } = listContextValue;\n\n  // LIST SOURCE\n  const getListItems = (source: string[]) => {\n    if (!source) return;\n\n    return source.map((item, index) => {\n      return (\n        <ListItemNext\n          key={index}\n          value={item}\n          onMouseDown={(event) => {\n            select(event);\n          }}\n          onMouseMove={(event) => {\n            highlight(event);\n          }}\n        >\n          {item}\n        </ListItemNext>\n      );\n    });\n  };\n\n  // FLOATING PORTAL\n  const onOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChangeProp?.(open);\n  };\n\n  const { floating, reference, x, y, strategy, placement, context } =\n    useFloatingUI({\n      open,\n      onOpenChange,\n      placement: placementProp,\n      middleware: [\n        offset(0),\n        size({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n        flip(),\n        shift({ limiter: limitShift() }),\n      ],\n    });\n\n  const { getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useRole(context, { role: \"listbox\" }),\n  ]);\n\n  const getDropdownNextProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n      style: {\n        top: y ?? 0,\n        left: x ?? 0,\n        position: strategy,\n      },\n    });\n  };\n\n  // HANDLERS\n  const blurHandler = () => {\n    listBlurHandler();\n    setOpen(false);\n  };\n\n  // handles focus on mouse and keyboard\n  const focusHandler = (event: FocusEvent<HTMLElement>) => {\n    if (selectedItem) {\n      listFocusHandler(event as FocusEvent<HTMLUListElement>);\n    }\n  };\n\n  // handles mouse click on dropdown button\n  const mouseDownHandler = () => {\n    setOpen(!open);\n  };\n\n  // handles mouse hover on dropdown button\n  const mouseOverHandler = () => {\n    listMouseOverHandler();\n  };\n\n  const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {\n    const { key } = event;\n    switch (key) {\n      case \"ArrowUp\":\n        listKeyDownHandler(event);\n        break;\n      case \"ArrowDown\":\n        setOpen(true);\n        listKeyDownHandler(event);\n        break;\n      case \" \":\n      case \"Enter\":\n        if (!open) {\n          setOpen(true);\n          break;\n        }\n        if (open) {\n          listKeyDownHandler(event);\n          setOpen(false);\n          break;\n        }\n        break;\n      case \"Escape\":\n        setOpen(false);\n        break;\n      case \"PageUp\":\n      case \"PageDown\":\n      case \"Home\":\n      case \"End\":\n        if (open) {\n          listKeyDownHandler(event);\n          break;\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return {\n    handlers: {\n      focusHandler,\n      keyDownHandler,\n      blurHandler,\n      mouseOverHandler,\n      mouseDownHandler,\n    },\n    activeDescendant,\n    selectedItem,\n    setSelectedItem,\n    highlightedItem,\n    setHighlightedItem,\n    focusVisibleRef,\n    getListItems,\n    portalProps: {\n      open,\n      setOpen,\n      floating,\n      reference,\n      getDropdownNextProps,\n    },\n  };\n};\n"],"names":["open"],"mappings":"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"}
+{"version":3,"file":"useDropdownNext.js","sources":["../src/dropdown-next/useDropdownNext.tsx"],"sourcesContent":["import {\n  useInteractions,\n  useDismiss,\n  useRole,\n  flip,\n  shift,\n  limitShift,\n  offset,\n  size,\n} from \"@floating-ui/react\";\nimport {\n  useControlled,\n  useFloatingUI,\n  UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport { ListItemNext } from \"../list-next\";\nimport { HTMLProps, KeyboardEvent, FocusEvent } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\n\ninterface UseDropdownNextProps\n  extends Partial<\n    Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n  > {\n  listProps: UseListProps;\n  // props for controlled dropdown\n  openControlProp?: boolean;\n}\n\nexport const useDropdownNext = ({\n  listProps,\n  openControlProp,\n  onOpenChange: onOpenChangeProp,\n  placement: placementProp,\n}: UseDropdownNextProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: openControlProp,\n    default: false,\n    name: \"DropdownNext\",\n    state: \"open\",\n  });\n\n  // USELIST HOOK\n  const {\n    focusHandler: listFocusHandler,\n    keyDownHandler: listKeyDownHandler,\n    blurHandler: listBlurHandler,\n    mouseOverHandler: listMouseOverHandler,\n    activeDescendant,\n    selectedItem,\n    setSelectedItem,\n    highlightedItem,\n    setHighlightedItem,\n    contextValue: listContextValue,\n    focusVisibleRef,\n  } = useList({\n    ...listProps,\n  });\n\n  const { select, highlight } = listContextValue;\n\n  // LIST SOURCE\n  const getListItems = (source: string[]) => {\n    if (!source) return;\n\n    return source.map((item, index) => {\n      return (\n        <ListItemNext\n          key={index}\n          value={item}\n          onMouseDown={(event) => {\n            select(event);\n          }}\n          onMouseMove={(event) => {\n            highlight(event);\n          }}\n        >\n          {item}\n        </ListItemNext>\n      );\n    });\n  };\n\n  // FLOATING PORTAL\n  const onOpenChange = (open: boolean) => {\n    setOpen(open);\n    onOpenChangeProp?.(open);\n  };\n\n  const { floating, reference, x, y, strategy, placement, context, elements } =\n    useFloatingUI({\n      open,\n      onOpenChange,\n      placement: placementProp,\n      middleware: [\n        offset(0),\n        size({\n          apply({ rects, elements }) {\n            Object.assign(elements.floating.style, {\n              width: `${rects.reference.width}px`,\n            });\n          },\n        }),\n        flip(),\n        shift({ limiter: limitShift() }),\n      ],\n    });\n\n  const { getFloatingProps } = useInteractions([\n    useDismiss(context),\n    useRole(context, { role: \"listbox\" }),\n  ]);\n\n  const getDropdownNextProps = (): HTMLProps<HTMLDivElement> => {\n    return getFloatingProps({\n      // @ts-ignore\n      \"data-placement\": placement,\n      ref: floating,\n    });\n  };\n\n  const getPosition = () => ({\n    top: y ?? 0,\n    left: x ?? 0,\n    position: strategy,\n    width: elements.floating?.clientWidth,\n    height: elements.floating?.clientHeight,\n  });\n\n  // HANDLERS\n  const blurHandler = () => {\n    listBlurHandler();\n    setOpen(false);\n  };\n\n  // handles focus on mouse and keyboard\n  const focusHandler = (event: FocusEvent<HTMLElement>) => {\n    if (selectedItem) {\n      listFocusHandler(event as FocusEvent<HTMLUListElement>);\n    }\n  };\n\n  // handles mouse click on dropdown button\n  const mouseDownHandler = () => {\n    setOpen(!open);\n  };\n\n  // handles mouse hover on dropdown button\n  const mouseOverHandler = () => {\n    listMouseOverHandler();\n  };\n\n  const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {\n    const { key } = event;\n    switch (key) {\n      case \"ArrowUp\":\n        listKeyDownHandler(event);\n        break;\n      case \"ArrowDown\":\n        setOpen(true);\n        listKeyDownHandler(event);\n        break;\n      case \" \":\n      case \"Enter\":\n        if (!open) {\n          setOpen(true);\n          break;\n        }\n        if (open) {\n          listKeyDownHandler(event);\n          setOpen(false);\n          break;\n        }\n        break;\n      case \"Escape\":\n        setOpen(false);\n        break;\n      case \"PageUp\":\n      case \"PageDown\":\n      case \"Home\":\n      case \"End\":\n        if (open) {\n          listKeyDownHandler(event);\n          break;\n        }\n        break;\n      default:\n        break;\n    }\n  };\n\n  return {\n    handlers: {\n      focusHandler,\n      keyDownHandler,\n      blurHandler,\n      mouseOverHandler,\n      mouseDownHandler,\n    },\n    activeDescendant,\n    selectedItem,\n    setSelectedItem,\n    highlightedItem,\n    setHighlightedItem,\n    focusVisibleRef,\n    getListItems,\n    portalProps: {\n      open,\n      setOpen,\n      floating,\n      reference,\n      getDropdownNextProps,\n      getPosition,\n    },\n  };\n};\n"],"names":["open","elements"],"mappings":"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"}

package/dist-es/layer-layout/LayerLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n  \"center\",\n  \"left\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n] as const;\n\nexport type LayerPositions = typeof LAYER_POSITIONS[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the scrim.\n   */\n  disableScrim?: boolean;\n  /**\n   * Defines the layer position within the screen.\n   */\n  position?: LayerPositions;\n  /**\n   * Breakpoint at which the layer will become fullscreen.\n   */\n  fullScreenAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Display or hide the component.\n   */\n  isOpen?: boolean;\n  /**\n   * Props to be passed to the Scrim component.\n   */\n  scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n  function LayerLayout(props, ref) {\n    const {\n      children,\n      className,\n      disableScrim = false,\n      position = \"center\",\n      fullScreenAtBreakpoint = \"sm\",\n      disableAnimations = false,\n      scrimProps,\n      isOpen = true,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-layer-layout\",\n      css: layerLayoutCss,\n      window: targetWindow,\n    });\n\n    const previousDisableAnimationsProp = usePrevious(\n      disableAnimations,\n      [disableAnimations],\n      false\n    ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const [isAnimating, setIsAnimating] = useState(false);\n\n    useEffect(() => {\n      if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n        setShowComponent(false);\n      }\n\n      if (isOpen && !showComponent) {\n        setShowComponent(true);\n      }\n    }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n    const fullScreen = useIsViewportLargerThanBreakpoint(\n      fullScreenAtBreakpoint\n    );\n\n    const anchored = position !== \"center\" && !fullScreen;\n\n    const enterAnimation =\n      !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n    const exitAnimation = !disableAnimations && !isOpen;\n\n    const layerLayout = showComponent ? (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"anchor\")]: anchored,\n          [withBaseName(\"fullScreen\")]: fullScreen,\n          [withBaseName(position)]: !fullScreen,\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        onAnimationStart={() => setIsAnimating(true)}\n        onAnimationEnd={() => {\n          if (!isOpen && showComponent) {\n            setShowComponent(false);\n          }\n        }}\n        {...(disableScrim && ariaAttributes)}\n        {...rest}\n      >\n        {children}\n      </div>\n    ) : null;\n\n    return disableScrim ? (\n      layerLayout\n    ) : (\n      <Scrim\n        open={showComponent}\n        className={clsx({\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        {...scrimProps}\n      >\n        {layerLayout}\n      </Scrim>\n    );\n  }\n);\n"],"names":["LayerLayout","layerLayoutCss"],"mappings":"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"}
+{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport { Scrim, ScrimProps } from \"../scrim\";\n\nimport { Breakpoints, makePrefixer, usePrevious } from \"@salt-ds/core\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n  \"center\",\n  \"left\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the scrim.\n   */\n  disableScrim?: boolean;\n  /**\n   * Defines the layer position within the screen.\n   */\n  position?: LayerPositions;\n  /**\n   * Breakpoint at which the layer will become fullscreen.\n   */\n  fullScreenAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Display or hide the component.\n   */\n  isOpen?: boolean;\n  /**\n   * Props to be passed to the Scrim component.\n   */\n  scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n  function LayerLayout(props, ref) {\n    const {\n      children,\n      className,\n      disableScrim = false,\n      position = \"center\",\n      fullScreenAtBreakpoint = \"sm\",\n      disableAnimations = false,\n      scrimProps,\n      isOpen = true,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-layer-layout\",\n      css: layerLayoutCss,\n      window: targetWindow,\n    });\n\n    const previousDisableAnimationsProp = usePrevious(\n      disableAnimations,\n      [disableAnimations],\n      false\n    ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const [isAnimating, setIsAnimating] = useState(false);\n\n    useEffect(() => {\n      if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n        setShowComponent(false);\n      }\n\n      if (isOpen && !showComponent) {\n        setShowComponent(true);\n      }\n    }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n    const fullScreen = useIsViewportLargerThanBreakpoint(\n      fullScreenAtBreakpoint\n    );\n\n    const anchored = position !== \"center\" && !fullScreen;\n\n    const enterAnimation =\n      !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n    const exitAnimation = !disableAnimations && !isOpen;\n\n    const layerLayout = showComponent ? (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"anchor\")]: anchored,\n          [withBaseName(\"fullScreen\")]: fullScreen,\n          [withBaseName(position)]: !fullScreen,\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        onAnimationStart={() => setIsAnimating(true)}\n        onAnimationEnd={() => {\n          if (!isOpen && showComponent) {\n            setShowComponent(false);\n          }\n        }}\n        {...(disableScrim && ariaAttributes)}\n        {...rest}\n      >\n        {children}\n      </div>\n    ) : null;\n\n    return disableScrim ? (\n      layerLayout\n    ) : (\n      <Scrim\n        open={showComponent}\n        className={clsx({\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        {...scrimProps}\n      >\n        {layerLayout}\n      </Scrim>\n    );\n  }\n);\n"],"names":["LayerLayout","layerLayoutCss"],"mappings":"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"}

package/dist-es/metric/MetricHeader.js

@@ -24,6 +24,7 @@ const MetricHeader = forwardRef(
         id: subtitleId,
         className: withBaseName("subtitle"),
         "data-testid": "metric-subtitle",
+        variant: "secondary",
         children: subtitle
       });
       if (SubtitleLinkProps) {

package/dist-es/metric/MetricHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-header\",\n      css: metricHeaderCss,\n      window: targetWindow,\n    });\n\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  }\n);\n"],"names":["MetricHeader","metricHeaderCss"],"mappings":";;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACH,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,QAEX,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-header\",\n      css: metricHeaderCss,\n      window: targetWindow,\n    });\n\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n          variant=\"secondary\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  }\n);\n"],"names":["MetricHeader","metricHeaderCss"],"mappings":";;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACH,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,QACZ,OAAQ,EAAA,WAAA;AAAA,QAEP,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,IAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -1,4 +1,4 @@
-var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-secondary-foreground);\n  --navigationItem-fill: var(--salt-text-secondary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: var(--salt-size-indicator);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active or selected */\n.saltNavigationItem-active,\n.saltNavigationItem-blurActive {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n  top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  font-weight: var(--salt-text-fontWeight);\n  padding-left: calc(var(--salt-spacing-250) + (var(--saltNavigationItem-level, 0) * var(--navigationItem-gap)));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\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 when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\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: 0;\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(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item has active children */\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:focus::after {\n  --navigationItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
+var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n  --navigationItem-color: var(--salt-text-secondary-foreground);\n  --navigationItem-fill: var(--salt-text-secondary-foreground);\n  --navigationItem-bar-inset: var(--salt-spacing-25);\n  --navigationItem-bar-size: var(--salt-size-indicator);\n  --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n  --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active or selected */\n.saltNavigationItem-active,\n.saltNavigationItem-blurActive {\n  --navigationItem-color: var(--salt-text-primary-foreground);\n  --navigationItem-fill: var(--salt-text-primary-foreground);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n  display: flex;\n  align-items: center;\n  position: relative;\n  gap: var(--navigationItem-gap);\n  font-weight: var(--salt-text-fontWeight-strong);\n  text-decoration: none;\n  /* Hover off animation */\n  transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n  --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n  fill: var(--navigationItem-fill);\n  top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n  margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n  margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n  min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n  padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n  width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n  min-height: calc(var(--salt-size-base));\n  padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n  padding-right: var(--navigationItem-gap);\n  margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n  --link-color-visited: var(--navigationItem-color);\n  --link-color-hover: var(--navigationItem-color);\n\n  color: var(--navigationItem-color);\n  line-height: var(--salt-text-lineHeight);\n  font-family: var(--salt-text-fontFamily);\n  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n  flex: 1;\n  text-align: left;\n  display: flex;\n  align-items: baseline;\n  gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n  font-weight: var(--salt-text-fontWeight);\n  padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n  --saltButton-background-hover: none;\n  --saltButton-background-active: none;\n  --saltButton-textTransform: none;\n  --saltButton-width: 100%;\n  --saltButton-letterSpacing: none;\n\n  gap: var(--navigationItem-gap);\n  /* Required to match link's outline offset */\n  outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n  --saltIcon-color: var(--navigationItem-fill);\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 when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n  border-right: var(--navigationItem-gap) solid transparent;\n  border-left: var(--navigationItem-gap) solid transparent;\n  margin: 0 calc(var(--navigationItem-gap) * -1);\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: 0;\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(--navigationItem-bar-size);\n  top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n  width: var(--navigationItem-bar-size);\n  left: var(--navigationItem-bar-inset);\n  top: var(--navigationItem-bar-inset);\n  height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover and on focus */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus::after {\n  background: var(--salt-navigable-indicator-hover);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item has active children */\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-blurActive:focus::after {\n  --navigationItem-indicator-background: none;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n  background: var(--navigationItem-indicator-background);\n  /* Hover on animation */\n  transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=NavigationItem.css.js.map

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

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n}\n\n.saltPill {\n  align-items: center;\n  background: var(--pill-background);\n  border-radius: var(--saltPill-borderRadius, 0);\n  color: var(--pill-text-color);\n  display: inline-flex;\n  font-size: var(--pill-fontSize);\n  height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  letter-spacing: var(--saltPill-letterSpacing, 0);\n  line-height: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-width: var(--saltPill-minWidth, 40px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
+var css_248z = ".salt-density-high {\n  --pill-icon-offset: 1px;\n}\n\n.salt-density-medium {\n  --pill-icon-offset: 2px;\n}\n\n.salt-density-low {\n  --pill-icon-offset: 3px;\n}\n\n.salt-density-touch {\n  --pill-icon-offset: 4px;\n}\n\n/* Styles applied to the root element */\n.saltPill {\n  --pill-background: var(--saltPill-background, var(--salt-taggable-background));\n  --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active));\n  --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled));\n  --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover));\n  --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px));\n  --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize));\n  --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5));\n  --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground));\n  --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active));\n  --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled));\n  --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground));\n  --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active));\n  --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover));\n  --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled));\n\n  /* Button API */\n  --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight));\n  --saltButton-padding: var(--saltPill-button-padding, 0);\n  --saltButton-textTransform: var(--saltPill-button-textTransform, unset);\n  --saltButton-cursor: normal;\n  --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size)); /* TODO: Check with design vs checkbox height */\n  --saltButton-background: var(--pill-background);\n  --saltButton-color: var(--pill-text-color);\n  --saltButton-fontSize: var(--pill-fontSize);\n  --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0);\n  --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight));\n  --saltButton-minWidth: var(--saltPill-minWidth, 40px);\n}\n\n.saltPill {\n  align-items: center;\n  border-radius: var(--saltPill-borderRadius, 0);\n  display: inline-flex;\n  max-width: var(--saltPill-maxWidth, 160px);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  outline: var(--saltPill-outline, 0);\n  position: relative;\n  gap: 0;\n}\n\n.saltPill:hover {\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-background-hover: var(--pill-background-hover);\n\n  --saltIcon-color: var(--pill-icon-color);\n  --saltIcon-color-hover: var(--pill-icon-color-hover);\n\n  background: var(--pill-background-hover);\n}\n\n/* Style applied to Pill when active */\n.saltPill:active,\n.saltPill-active {\n  --saltButton-background-active: var(--pill-background-active);\n}\n\n/* Style applied to Pill on focus */\n.saltPill:focus {\n  outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n/* Style applied to Pill icon if `clickable={true}`  */\n.saltPill-clickable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n\n  cursor: var(--salt-selectable-cursor-hover);\n  user-select: none;\n}\n\n/* Style applied to Pill when `deletable={true}` */\n.saltPill-deletable {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n.saltPill-selectable:hover,\n.saltPill-deletable:hover {\n  --saltButton-background-active: var(--pill-background);\n  --saltButton-background-hover: var(--pill-background);\n}\n\n/* Style applied to Pill when active if `selectable={true}` */\n.saltPill-selectable:active,\n.saltPill-active.saltPill-selectable {\n  --saltButton-background-active: var(--pill-background);\n}\n\n/* Style applied to Pill when disabled */\n.saltPill-disabled,\n.saltPill-disabled:hover,\n.saltPill-disabled:active {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-text-color-active: var(--pill-text-color);\n  --saltButton-text-color-hover: var(--pill-text-color);\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n\n  background: var(--pill-background-disabled);\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Checkbox styles for selectable Pill when `disabled={true}` */\n.saltPill-disabled .saltPill-checkbox {\n  --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled);\n  --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled);\n  --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled);\n}\n\n/* Style applied to Pill label */\n.saltPill-label {\n  color: var(--saltPill-text-color, var(--pill-text-color));\n  display: inline;\n  flex-grow: 1;\n  font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight));\n  overflow: hidden;\n  padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap));\n  padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap));\n  pointer-events: none;\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Style applied to Pill label when `deletable={true}` */\n.saltPill-deletable .saltPill-label {\n  padding-right: 0px;\n}\n\n/* Style applied to Pill label inner text */\n.saltPill-innerLabel {\n  vertical-align: top;\n  line-height: var(--pill-height);\n}\n\n/* Style applied to Pill label and icon when `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled .saltIcon {\n  cursor: var(--salt-selectable-cursor-disabled);\n  opacity: var(--salt-palette-opacity-disabled);\n\n  --saltIcon-color: var(--pill-icon-color-disabled);\n  --saltIcon-color-hover: var(--pill-icon-color-disabled);\n}\n\n/* Style applied to Pill delete button */\n.saltPill-deleteButton {\n  --saltButton-background-hover: var(--pill-background-hover);\n  --saltButton-background-active: var(--pill-background-active);\n  --saltButton-cursor: pointer;\n\n  flex-shrink: 0;\n  height: var(--pill-checkbox-size);\n  margin-left: calc(var(--salt-size-unit) / 2);\n  min-height: var(--saltPill-minHeight, var(--salt-text-minHeight));\n  padding-right: calc(var(--salt-size-unit) / 2);\n}\n\n/* Style applied to Pill delete button if `disabled={true}` */\n.saltPill-deleteButton-disabled {\n  --saltButton-background-hover: var(--pill-background-disabled);\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltButton-background-disabled: initial;\n}\n\n/* Style applied to Pill delete button icon  */\n.saltPill-deleteButton .saltPill-deleteIcon {\n  left: var(--saltPill-deleteButton-left, var(--pill-icon-offset));\n  position: relative;\n}\n\n/* Style applied to Pill delete button icon on active state  */\n.saltPill-deleteButton:active .saltPill-deleteIcon {\n  --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active));\n}\n\n/* Style applied to Pill delete button icon if `disabled={true}` on active state  */\n.saltPill-disabled:active .saltPill-deleteIcon {\n  --saltButton-background-active: var(--pill-background-disabled);\n  --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color));\n}\n\n/* Style applied to Pill icon */\n.saltPill .saltPill-icon {\n  fill: var(--pill-icon-color);\n  height: 12px; /* TODO: Replace with updated size */\n  margin-left: var(--salt-size-adornmentGap);\n  margin-right: calc(var(--salt-size-unit) * 0.5);\n}\n\n/* Style applied to Pill icon on active state */\n.saltPill:active .saltPill-icon,\n.saltPill-active .saltPill-icon {\n  fill: var(--pill-icon-color-active);\n}\n\n.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label {\n  padding-left: 0;\n}\n\n/* Pill label styles on hover */\n.saltPill:hover .saltPill-label {\n  color: var(--pill-text-color-hover);\n}\n\n/* Pill label styles on active state */\n.saltPill:active .saltPill-label {\n  color: var(--pill-text-color-active);\n}\n\n/* Pill label styles when `selectable={true}` or `deletable={true}` */\n.saltPill-selectable .saltPill-label,\n.saltPill-selectable:active .saltPill-label,\n.saltPill-deletable .saltPill-label,\n.saltPill-deletable:active .saltPill-label {\n  background: var(--pill-background);\n  color: var(--pill-text-color);\n}\n\n/* Pill label styles when  `disabled={true}` */\n.saltPill-disabled .saltPill-label,\n.saltPill-disabled:active .saltPill-label {\n  background: initial;\n  color: var(--pill-text-color-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Pill.css.js.map

package/dist-es/stepped-tracker/StepLabel/StepLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport type StepLabelProps = ComponentPropsWithoutRef<\"label\">;\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n  function StepLabel({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-step-label\",\n      css: stepLabelCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <strong>{children}</strong>\n      </Label>\n    );\n  }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAI1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC/D,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAQ,QAAA;AAAA,OAAS,CAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"StepLabel.js","sources":["../src/stepped-tracker/StepLabel/StepLabel.tsx"],"sourcesContent":["import { forwardRef, ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, Label } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport stepLabelCss from \"./StepLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltStepLabel\");\n\nexport interface StepLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  /**\n   * The content of Step Label\n   */\n  children?: ReactNode;\n}\n\nexport const StepLabel = forwardRef<HTMLLabelElement, StepLabelProps>(\n  function StepLabel({ children, className, ...rest }, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-step-label\",\n      css: stepLabelCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Label className={clsx(withBaseName(), className)} ref={ref} {...rest}>\n        <strong>{children}</strong>\n      </Label>\n    );\n  }\n);\n"],"names":["StepLabel","stepLabelCss"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAS1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,UAAU,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MAAM,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAAW,GAAG,IAAA;AAAA,MAC/D,QAAC,kBAAA,GAAA,CAAA,QAAA,EAAA;AAAA,QAAQ,QAAA;AAAA,OAAS,CAAA;AAAA,KACpB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/stepper-input/StepperInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  margin-top: 0;\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
+var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  --saltButton-margin: 0 var(--stepperInput-button-margin) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=StepperInput.css.js.map

package/dist-es/tabs/Tab.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: none;\n}\n\n.salt-density-touch .saltTab-close-icon,\n.salt-density-low .saltTab-close-icon {\n  display: block;\n}\n\n.salt-density-touch .saltTab-close-icon-small,\n.salt-density-low .saltTab-close-icon-small {\n  display: none;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
+var css_248z = "/* Class applied to root Tab element */\n.saltTab {\n  --saltEditableLabel-padding: 0;\n  --saltEditableLabel-height: var(--tabs-tabstrip-height);\n  --saltInputLegacy-minWidth: 4em;\n\n  --tabs-tab-background: var(--salt-navigable-primary-background);\n  --tabs-tab-cursor: pointer;\n  --tabs-tab-spacing: var(--salt-size-unit);\n  --tabs-tab-position: relative;\n}\n\n.saltTab {\n  align-items: center;\n  align-self: stretch;\n  background: var(--saltTabs-tab-background, var(--tabs-tab-background));\n  border: none;\n  border-radius: 0;\n  color: var(--salt-text-primary-foreground);\n  cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor));\n  display: var(--tabs-tabstrip-display);\n  height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height));\n  letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0));\n  min-width: var(--saltTabs-tab-minWidth, 40px);\n  outline: none;\n  position: var(--saltTabs-tab-position, var(--tabs-tab-position));\n  user-select: none;\n}\n\n/* Overrides characteristic used in saltFocusVisible */\n.saltTab.saltFocusVisible:after {\n  inset: 2px 2px 4px 2px;\n}\n\n.saltTab:not(.saltTab-vertical) {\n  margin: 0 var(--tabs-tab-spacing) 0 0;\n}\n\n.saltTab[aria-selected=\"true\"] {\n  color: var(--salt-text-primary-foreground);\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n.saltTab-dragAway {\n  display: none;\n}\n\n/* main content aria of Tab */\n.saltTab-main {\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable));\n  outline: none;\n  padding: 0 var(--tabs-tab-spacing);\n  position: relative;\n}\n\n.saltTab-closeable .saltTab-main {\n  border-right: solid transparent var(--salt-size-unit);\n}\n\n.saltTab .saltTab-closeButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n/* the close Button on a closeable Tab*/\n.saltTab-close-icon {\n  display: block;\n}\n\n.saltTab .saltTab-text {\n  display: inline-block;\n  position: relative;\n  overflow: hidden;\n  text-align: var(--salt-text-textAlign-embedded);\n  text-overflow: ellipsis;\n  top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto));\n  white-space: nowrap;\n  /* ensure content sits above focus ring */\n  z-index: var(--salt-zIndex-default);\n}\n\n.saltTab-vertical .saltTab-text {\n  text-align: var(--salt-text-textAlign);\n}\n\n.saltTab .saltTab-text:before {\n  height: 0;\n  content: attr(data-text);\n  display: block;\n  visibility: hidden;\n  font-weight: var(--salt-navigable-fontWeight-active);\n}\n\n/* FIXME: these are all focusVisible styles, but with a bespoke inset */\n.saltTab-editing:after {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 2px;\n  outline-color: var(--salt-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-offset: -2px;\n}\n\n.saltTab-vertical.saltTab-editing:after {\n  right: 2px;\n  bottom: 0;\n}\n\n.saltTab-vertical .saltFocusVisible:not([aria-selected=\"true\"]):before {\n  left: auto;\n  height: auto;\n  top: 0;\n  width: 2px;\n}\n\n.saltTab.saltFocusVisible {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n\n.saltTab:before {\n  content: var(--tabs-tab-before-content, none);\n  background: var(--tabs-tab-before-background);\n  height: var(--tabs-tab-before-height);\n  inset: var(--tabs-tab-before-inset);\n  position: absolute;\n  width: var(--tabs-tab-before-width);\n  z-index: 1;\n}\n\n.saltTabstrip-draggingTab .saltTab[aria-selected=\"true\"]:before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-color-active);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n/* Hover styling */\n.saltTab:not([aria-selected=\"true\"]).saltFocusVisible:before,\n.saltTab:hover:not([aria-selected=\"true\"]):before {\n  --tabs-tab-before-content: \"\";\n  --tabs-tab-before-background: var(--salt-navigable-indicator-hover);\n  --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height);\n  --tabs-tab-before-inset: var(--tabs-activationIndicator-inset);\n  --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width);\n}\n\n.saltTab:hover:not(.saltTab-closeHover) {\n  background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Tab.css.js.map

package/dist-es/tabs/Tab.js

@@ -1,32 +1,26 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useForkRef, Button } from '@salt-ds/core';
-import { CloseIcon, CloseSmallIcon } from '@salt-ds/icons';
+import { CloseIcon } from '@salt-ds/icons';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useRef, useState, useCallback } from 'react';
 import { EditableLabel } from '../editable-label/EditableLabel.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './Tab.css.js';
 
 const noop = () => void 0;
 const withBaseName = makePrefixer("saltTab");
-const CloseTabButton = (props) => /* @__PURE__ */ jsxs(Button, {
+const CloseTabButton = (props) => /* @__PURE__ */ jsx(Button, {
   ...props,
   "aria-label": "Close Tab (Delete or Backspace)",
   className: withBaseName("closeButton"),
   tabIndex: void 0,
   title: "Close Tab (Delete or Backspace)",
   variant: "secondary",
-  children: [
-    /* @__PURE__ */ jsx(CloseIcon, {
-      "aria-label": "Close Tab (Delete or Backspace)",
-      className: withBaseName("close-icon")
-    }),
-    /* @__PURE__ */ jsx(CloseSmallIcon, {
-      "aria-label": "Close Tab (Delete or Backspace)",
-      className: withBaseName("close-icon-small")
-    })
-  ]
+  children: /* @__PURE__ */ jsx(CloseIcon, {
+    "aria-label": "Close Tab (Delete or Backspace)",
+    className: withBaseName("close-icon")
+  })
 });
 const Tab = forwardRef(function Tab2({
   ariaControls,

package/dist-es/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon, CloseSmallIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { TabProps } from \"./TabsTypes\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\n//TODO not ideal - duplicating the Icon then hiding one in css based on density - is there a nicer way ?\nconst CloseTabButton = (props: ButtonProps) => (\n  // FIXME: use polymorphic button\n  <Button\n    {...props}\n    aria-label=\"Close Tab (Delete or Backspace)\"\n    className={withBaseName(\"closeButton\")}\n    tabIndex={undefined}\n    title=\"Close Tab (Delete or Backspace)\"\n    variant=\"secondary\"\n  >\n    <CloseIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon\")}\n    />\n    <CloseSmallIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon-small\")}\n    />\n  </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable,\n    dragging,\n    editable,\n    editing,\n    focusVisible,\n    index,\n    label,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    orientation,\n    selected,\n    tabChildIndex = 0,\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n    throw Error(\n      \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n    );\n  }\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const root = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, root);\n  const [closeHover, setCloseHover] = useState(false);\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick(e, index);\n      }\n    },\n    [editing, index, onClick]\n  );\n  const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n    onKeyDown(e);\n  };\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    onClose && onClose(index);\n  };\n\n  const handleCloseButtonEnter = () => {\n    setCloseHover(true);\n  };\n\n  const handleCloseButtonLeave = () => {\n    setCloseHover(false);\n  };\n\n  const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n    onMouseDown?.(e);\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".saltEditableLabel-input\"\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-selected={selected}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"closeable\")]: closeable,\n        [withBaseName(\"closeHover\")]: closeHover,\n        [withBaseName(\"dragAway\")]: dragging,\n        [withBaseName(\"editing\")]: editing,\n        [withBaseName(\"vertical\")]: orientation === \"vertical\",\n        [`saltFocusVisible`]: focusVisible,\n      })}\n      data-editable={editable || undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDownMain}\n      onKeyUp={handleKeyUp}\n      onMouseDown={handleMouseDown}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={withBaseName(\"main\")}>\n        <span\n          className={withBaseName(\"text\")}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {closeable ? (\n        <CloseTabButton\n          onClick={handleCloseButtonClick}\n          onMouseEnter={handleCloseButtonEnter}\n          onMouseLeave={handleCloseButtonLeave}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}
+{"version":3,"file":"Tab.js","sources":["../src/tabs/Tab.tsx"],"sourcesContent":["// TODO close button needs to be a button. Hence tab needs to include 2 buttons\nimport { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { CloseIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  FocusEvent,\n  ForwardedRef,\n  KeyboardEvent,\n  MouseEvent,\n  ReactElement,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { EditableLabel, EditableLabelProps } from \"../editable-label\";\nimport { TabProps } from \"./TabsTypes\";\n\nimport tabCss from \"./Tab.css\";\n\nconst noop = () => undefined;\n\nconst withBaseName = makePrefixer(\"saltTab\");\n\nconst CloseTabButton = (props: ButtonProps) => (\n  // FIXME: use polymorphic button\n  <Button\n    {...props}\n    aria-label=\"Close Tab (Delete or Backspace)\"\n    className={withBaseName(\"closeButton\")}\n    tabIndex={undefined}\n    title=\"Close Tab (Delete or Backspace)\"\n    variant=\"secondary\"\n  >\n    <CloseIcon\n      aria-label=\"Close Tab (Delete or Backspace)\"\n      className={withBaseName(\"close-icon\")}\n    />\n  </Button>\n);\n\nexport const Tab = forwardRef(function Tab(\n  {\n    ariaControls,\n    children,\n    className,\n    closeable,\n    dragging,\n    editable,\n    editing,\n    focusVisible,\n    index,\n    label,\n    onClick,\n    onClose,\n    onEnterEditMode = noop,\n    onExitEditMode = noop,\n    onFocus: onFocusProp,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    orientation,\n    selected,\n    tabChildIndex = 0,\n    tabIndex,\n    ...props\n  }: TabProps,\n  ref: ForwardedRef<HTMLDivElement>\n): ReactElement<TabProps> {\n  if (index === undefined || onClick === undefined || onKeyDown === undefined) {\n    throw Error(\n      \"index, onClick, onKeyUp, onKeyDown are required props, they would nornally be injected by Tabstrip, are you creating a Tab outside of a Tabstrip\"\n    );\n  }\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tab\",\n    css: tabCss,\n    window: targetWindow,\n  });\n\n  const root = useRef<HTMLDivElement>(null);\n  const editableRef = useRef<HTMLDivElement>(null);\n  const setForkRef = useForkRef(ref, root);\n  const [closeHover, setCloseHover] = useState(false);\n  const handleClick = useCallback(\n    (e: MouseEvent) => {\n      if (!editing) {\n        e.preventDefault();\n        onClick(e, index);\n      }\n    },\n    [editing, index, onClick]\n  );\n  const handleKeyDownMain = (e: KeyboardEvent<HTMLElement>) => {\n    onKeyDown(e);\n  };\n\n  const handleOnExitEditMode: EditableLabelProps[\"onExitEditMode\"] = (\n    originalValue = \"\",\n    editedValue = \"\",\n    allowDeactivation = true\n  ) => onExitEditMode(originalValue, editedValue, allowDeactivation, index);\n\n  const handleKeyUp = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case \"Backspace\":\n      case \"Delete\":\n        if (closeable) {\n          e.stopPropagation();\n          onClose && onClose(index);\n        }\n        break;\n      default:\n        onKeyUp && onKeyUp(e, index);\n    }\n  };\n\n  const handleCloseButtonClick = (e: MouseEvent<HTMLButtonElement>) => {\n    e.stopPropagation();\n    onClose && onClose(index);\n  };\n\n  const handleCloseButtonEnter = () => {\n    setCloseHover(true);\n  };\n\n  const handleCloseButtonLeave = () => {\n    setCloseHover(false);\n  };\n\n  const handleMouseDown = (e: MouseEvent<HTMLElement>): void => {\n    onMouseDown?.(e);\n  };\n\n  const getLabel = () => {\n    if (editable) {\n      return (\n        <EditableLabel\n          editing={editing}\n          defaultValue={label}\n          // Create a fresh instance after each edit, so it can be uncontrolled ...\n          key={label}\n          onEnterEditMode={onEnterEditMode}\n          onExitEditMode={handleOnExitEditMode}\n          ref={editableRef}\n        />\n      );\n    } else {\n      return label;\n    }\n  };\n\n  const handleFocus = (evt: FocusEvent<HTMLElement>) => {\n    if (editableRef.current) {\n      const editable = editableRef.current as HTMLElement;\n      const input = editable.querySelector(\n        \".saltEditableLabel-input\"\n      ) as HTMLInputElement;\n      input?.focus();\n    }\n    onFocusProp?.(evt);\n  };\n\n  return (\n    <div\n      {...props}\n      aria-controls={ariaControls}\n      aria-selected={selected}\n      className={clsx(withBaseName(), {\n        [withBaseName(\"closeable\")]: closeable,\n        [withBaseName(\"closeHover\")]: closeHover,\n        [withBaseName(\"dragAway\")]: dragging,\n        [withBaseName(\"editing\")]: editing,\n        [withBaseName(\"vertical\")]: orientation === \"vertical\",\n        [`saltFocusVisible`]: focusVisible,\n      })}\n      data-editable={editable || undefined}\n      onClick={handleClick}\n      onFocus={handleFocus}\n      onKeyDown={handleKeyDownMain}\n      onKeyUp={handleKeyUp}\n      onMouseDown={handleMouseDown}\n      ref={setForkRef}\n      role=\"tab\"\n      tabIndex={tabIndex}\n    >\n      <div className={withBaseName(\"main\")}>\n        <span\n          className={withBaseName(\"text\")}\n          // data-text is important, it determines the width of the tab. A pseudo\n          // element assigns data-text as content. This is styled as selected tab\n          // text. That means width of tab always corresponds to its selected state,\n          // so tabs do not change size when selected (ie when the text is bolded).\n          // Do not include if we have editable content, EditableLabel will determine\n          // the width\n          data-text={editable ? undefined : label}\n        >\n          {children ?? getLabel()}\n        </span>\n      </div>\n      {closeable ? (\n        <CloseTabButton\n          onClick={handleCloseButtonClick}\n          onMouseEnter={handleCloseButtonEnter}\n          onMouseLeave={handleCloseButtonLeave}\n        />\n      ) : null}\n    </div>\n  );\n});\n"],"names":["Tab","tabCss","editable"],"mappings":"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"}

package/dist-es/tokenized-input/TokenizedInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltTokenizedInput-expandButton,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
+var css_248z = "/* Styles applied to root component (TokenizedInput) */\n.salt-density-medium {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n.salt-density-touch {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-low {\n  --tokenizedInput-gutter-size: var(--salt-size-basis-unit);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2);\n}\n\n.salt-density-high {\n  --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px);\n  --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px);\n  --tokenizedInput-last-pill-margin: var(--salt-size-unit);\n}\n\n.saltTokenizedInput {\n  --tokenizedInput-spacing: var(--salt-size-unit);\n  --tokenizedInput-height: var(--salt-size-base);\n}\n\n.saltTokenizedInput {\n  display: inline-flex;\n  justify-content: space-between;\n  min-width: 8em; /* same min-width as Input component */\n  width: 100%;\n}\n\n/* Styles applied to root component on hover state  */\n.saltTokenizedInput:hover {\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n/* Styles applied to root component on hover state if `disabled={true}` */\n.saltTokenizedInput.saltTokenizedInput-disabled:hover {\n  cursor: var(--salt-selectable-cursor-disabled);\n}\n\n/* Styles applied to container of pills */\n.saltTokenizedInput-pillGroup {\n  align-content: flex-start;\n  display: flex;\n  flex: 1;\n  flex-wrap: wrap;\n  min-height: var(--tokenizedInput-height);\n  padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltTokenizedInput-disabled {\n  cursor: var(--salt-editable-cursor-disabled);\n  opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled));\n}\n\n/* Styles applied to root component if `focused={true}` */\n.saltTokenizedInput-focused {\n  outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline));\n}\n\n/* Styles applied to root component if `expanded={true}` */\n.saltTokenizedInput-expanded {\n  height: auto;\n\n  /* Pill CSS API */\n  --saltPill-maxWidth: calc(100px - var(--salt-size-unit));\n}\n\n/* Styles applied to Input and Clear Button if `expanded={false}` */\n.saltTokenizedInput-hidden,\n.saltTokenizedInput-input.saltTokenizedInput-hidden,\n.saltButton.saltTokenizedInput-hidden {\n  display: none;\n}\n\n/**\n  Styles applied to inner Input component\n  Used to be .inputRoot\n**/\n.saltInputLegacy.saltTokenizedInput-input {\n  align-items: flex-start;\n  cursor: text;\n  flex-grow: 1;\n  padding: 0;\n  outline: none;\n  width: auto;\n  height: auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n/* Styles applied to Clear Button  */\n.saltTokenizedInput-clearButton {\n  flex: none;\n  align-self: flex-end;\n}\n\n/* Styles applied to Expand Button  */\n.saltTokenizedInput-expandButton.saltButton {\n  padding: 0 calc(var(--tokenizedInput-spacing) / 4);\n  --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n  --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n}\n\n/* Styles applied to root component and pill container if `expanded={true}` */\n.saltTokenizedInput-expanded,\n.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup {\n  height: auto;\n}\n\n/* TODO: Adjust specificity of .InputPill depending on styling solution.\n  This is an example of internal sub-component naming convension. */\n.saltTokenizedInput .saltInputPill,\n.saltInputLegacy.saltTokenizedInput-input,\n.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input {\n  margin: calc(var(--tokenizedInput-gutter-size) / 2) 0;\n  height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5);\n}\n\n/* Styles applied to inner Pills */\n.saltTokenizedInput .saltInputPill {\n  min-width: 0;\n  margin-right: var(--tokenizedInput-gutter-size);\n  --saltPill-maxWidth: 100px;\n}\n\n.saltTokenizedInput .saltInputPill > * {\n  min-width: 0;\n}\n\n/* Styles applied to a Pill if `expanded={false} && index >= firstHiddenIndex` */\n.saltTokenizedInput .saltInputPill.saltInputPill-hidden {\n  display: none;\n}\n\n/* Styles applied to the last visible Pill when all visible */\n.saltTokenizedInput .saltInputPill-pillLastVisible {\n  margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin));\n}\n\n/* Styles applied to a Pill when active */\n.saltTokenizedInput .saltInputPill-pillActive {\n  background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover));\n}\n\n/* Styles applied to a Pills delete icon */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon {\n  color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover));\n}\n\n/* Styles applied to a Pills delete button */\n.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton {\n  color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover));\n  background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover));\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=TokenizedInput.css.js.map

package/dist-types/breadcrumbs/internal/BreadcrumbsContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface BreadcrumbsContext {
     wrap?: boolean;
     itemsMaxWidth?: number | string;

package/dist-types/breadcrumbs/internal/BreadcrumbsSeparator.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IconProps } from "@salt-ds/icons";
 export declare const BreadcrumbsSeparator: (props: IconProps) => JSX.Element;

package/dist-types/breadcrumbs/internal/useFocusMenuRemount.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function useFocusMenuRemount<T extends HTMLElement>(key: string): {
     ref: import("react").RefObject<T>;
     shouldFocusOnMount: import("react").MutableRefObject<boolean>;

package/dist-types/button-bar/OrderedButton.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonProps } from "@salt-ds/core";
 export interface OrderedButtonProps extends ButtonProps {
     /**

package/dist-types/button-bar/internal/ButtonBarContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface ButtonBarContextValue {
     matches: boolean;
     alignedIndex?: number;

package/dist-types/calendar/Calendar.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CalendarNavigationProps } from "./internal/CalendarNavigation";
 import { CalendarCarouselProps } from "./internal/CalendarCarousel";
 import { useCalendarProps } from "./useCalendar";

package/dist-types/calendar/internal/CalendarCarousel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { CalendarMonthProps } from "./CalendarMonth";
 export declare type CalendarCarouselProps = Omit<CalendarMonthProps, "date">;
 export declare const CalendarCarousel: import("react").ForwardRefExoticComponent<Omit<CalendarCarouselProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/internal/CalendarContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { useCalendar } from "../useCalendar";
 declare type CalendarState = {
     state: ReturnType<typeof useCalendar>["state"];

package/dist-types/cascading-menu/CascadingMenu.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { CascadingMenuProps } from "./CascadingMenuProps";
 export declare const CascadingMenu: import("react").ForwardRefExoticComponent<CascadingMenuProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/cascading-menu/CascadingMenuList.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { UseFloatingUIProps } from "@salt-ds/core";
 import { ListProps } from "../list-deprecated";
 import { MenuItemProps } from "./CascadingMenuItem";

package/dist-types/cascading-menu/internal/useMountedRef.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Used to know if the component is mounted or not
  */

package/dist-types/color-chooser/AlphaInputField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface AlphaInputProps {
     alphaValue: number;
     showAsOpacity?: boolean;

package/dist-types/color-chooser/DictTabs.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TabstripProps } from "../tabs";
 import { ColorPicker, ColorPickerProps } from "./ColorPicker";
 import { Swatches, SwatchesTabProps } from "./Swatches";

package/dist-types/color-chooser/HexInput.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface HexInputProps {
     hexValue: string | undefined;
     disableAlphaChooser: boolean;

package/dist-types/color-chooser/HexInputField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface HexInputProps {
     hexValue: string | undefined;
     disableAlphaChooser: boolean;

package/dist-types/color-chooser/RGBAInputField.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RGBAValue } from "./Color";
 interface RGBInputProps {
     rgbaValue: RGBAValue;

package/dist-types/color-chooser/Swatches.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Color } from "./Color";
 export interface SwatchesTabProps {
     allColors: string[][];

package/dist-types/color-chooser/SwatchesPicker.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Color } from "./Color";
 interface SwatchesPickerProps {
     allColors: string[][];

package/dist-types/combo-box-deprecated/internal/MultiSelectComboBox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { TokenizedInputProps } from "../../tokenized-input";
 import { BaseComboBoxProps } from "./DefaultComboBox";
 export declare type MultiSelectComboBoxProps<Item> = BaseComboBoxProps<Item, "multiple"> & Pick<TokenizedInputProps<Item>, "onFocus" | "onBlur" | "onInputFocus" | "onInputBlur" | "onInputChange" | "onInputSelect" | "stringToItem"> & {

package/dist-types/combo-box-next/useComboBox.d.ts

@@ -21,6 +21,13 @@ export declare const useComboBox: ({ defaultInputValue, onFocus, onBlur, onMouse
         reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
         getTriggerProps: () => Record<string, unknown>;
         getPortalProps: () => import("react").HTMLProps<HTMLDivElement>;
+        getPosition: () => {
+            top: number;
+            left: number;
+            position: import("@floating-ui/utils").Strategy;
+            width: number | undefined;
+            height: number | undefined;
+        };
     };
     selectedItem: string | undefined;
     setSelectedItem: import("react").Dispatch<import("react").SetStateAction<string | undefined>>;

package/dist-types/combo-box-next/useComboboxPortal.d.ts

@@ -12,4 +12,11 @@ export declare function useComboboxPortal(props?: UseComboBoxPortalProps): {
     reference: (node: import("@floating-ui/react").ReferenceType | null) => void;
     getPortalProps: () => HTMLProps<HTMLDivElement>;
     getTriggerProps: () => Record<string, unknown>;
+    getPosition: () => {
+        top: number;
+        left: number;
+        position: import("@floating-ui/utils").Strategy;
+        width: number | undefined;
+        height: number | undefined;
+    };
 };