@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.100

package/dist-es/list-next/useList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useList.js","sources":["../src/list-next/useList.ts"],"sourcesContent":["import { useControlled, useIsFocusVisible } from \"@salt-ds/core\";\nimport {\n  type FocusEvent,\n  type KeyboardEvent,\n  type RefObject,\n  type SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\n\nexport interface UseListProps {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* Highlighted index for when the list is controlled. */\n  highlightedItem?: string;\n  /* Selected value for when the list is controlled. */\n  selected?: string;\n  /* Initial selected value for when the list is controlled. */\n  defaultSelected?: string;\n  /* Callback for change event. This is called when the selected value changes */\n  onChange?: (e: SyntheticEvent, data: { value: string | undefined }) => void;\n  /* Callback for select event. This is called when any selection occurs, even if a previously selected value is selected again. */\n  onSelect?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* List id. */\n  id?: string;\n  /* List ref. */\n  ref: RefObject<HTMLUListElement>;\n}\n\nexport const useList = ({\n  disabled = false,\n  highlightedItem: highlightedItemProp,\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n  onSelect,\n  id,\n  ref,\n}: UseListProps) => {\n  const getOptions: () => HTMLElement[] = useCallback(() => {\n    return Array.from(\n      ref.current?.querySelectorAll('[role=\"option\"]:not([aria-disabled])') ??\n        [],\n    );\n  }, [ref]);\n\n  const [focusVisible, setFocusVisible] = useState(false);\n  const [activeDescendant, setActiveDescendant] = useState<string | undefined>(\n    undefined,\n  );\n\n  const [highlightedItem, setHighlightedItem] = useControlled({\n    controlled: highlightedItemProp,\n    default: undefined,\n    name: \"ListNext\",\n    state: \"highlighted\",\n  });\n\n  const [selectedItem, setSelectedItem] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected,\n    name: \"ListNext\",\n    state: \"selected\",\n  });\n\n  const {\n    isFocusVisibleRef,\n    onFocus: handleFocusVisible,\n    onBlur: handleBlurVisible,\n    ref: focusVisibleRef,\n  } = useIsFocusVisible();\n\n  const updateScroll = useCallback(\n    (currentTarget: Element) => {\n      const list = ref.current;\n      if (!list || !currentTarget) return;\n      const { offsetTop, offsetHeight } = currentTarget as HTMLLIElement;\n      const listHeight = list?.clientHeight;\n      const listScrollTop = list?.scrollTop;\n      if (offsetTop < listScrollTop) {\n        list.scrollTop = offsetTop;\n      } else if (offsetTop + offsetHeight > listScrollTop + listHeight) {\n        list.scrollTop = offsetTop + offsetHeight - listHeight;\n      }\n    },\n    [ref],\n  );\n\n  const updateHighlighted = useCallback(\n    (element: HTMLElement) => {\n      setHighlightedItem(element.dataset.value);\n      setActiveDescendant(element.id);\n      updateScroll(element);\n    },\n    [updateScroll],\n  );\n\n  const selectItem = useCallback(\n    (element: HTMLElement) => {\n      const newValue = element?.dataset.value;\n      if (newValue) {\n        setSelectedItem(newValue);\n        updateHighlighted(element);\n      }\n    },\n    [updateHighlighted],\n  );\n\n  // Effect to move the cursor when items change controlled.\n  // this could be following active descendant if there is no better way of doing it when controlled\n  useEffect(() => {\n    const activeOptions = getOptions();\n    const highlightedIndex = activeOptions.findIndex(\n      (i) => i.dataset.value === highlightedItem,\n    );\n    if (highlightedIndex) {\n      setActiveDescendant(activeOptions[highlightedIndex]?.id);\n      highlightedItem && updateScroll(activeOptions[highlightedIndex]);\n    }\n  }, [highlightedItem, getOptions, updateScroll]);\n\n  const focusFirstItem = () => {\n    // Find first active item\n    const activeOptions = getOptions();\n    const firstItem = activeOptions[0];\n    if (firstItem) {\n      updateHighlighted(firstItem);\n    }\n  };\n  const focusLastItem = () => {\n    // Find last active item\n    const activeOptions = getOptions();\n    const lastItem = activeOptions[activeOptions.length - 1];\n    if (lastItem) {\n      updateHighlighted(lastItem);\n      updateScroll(lastItem);\n    }\n  };\n\n  const findNextOption = (\n    currentOption: HTMLElement | null,\n    moves: number,\n  ): HTMLElement => {\n    const activeOptions = getOptions();\n    // Returns next item, if no current option it will return 0\n    const nextOptionIndex = currentOption\n      ? activeOptions.indexOf(currentOption) + moves\n      : 0;\n    return (\n      activeOptions[nextOptionIndex] || activeOptions[activeOptions.length - 1]\n    );\n  };\n\n  const findPreviousOption = (\n    currentOption: HTMLElement,\n    moves: number,\n  ): HTMLElement => {\n    // Return the previous option if it exists; otherwise, returns first option\n    const activeOptions = getOptions();\n    const currentOptionIndex = activeOptions.findIndex(\n      (i) => i.id === currentOption.id,\n    );\n    return activeOptions[currentOptionIndex - moves] || activeOptions[0];\n  };\n\n  // CONTEXT CALLBACKS\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLLIElement>) => {\n      const newValue = event.currentTarget.dataset.value;\n      const activeOptions = getOptions();\n      const isActiveOption =\n        activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;\n      if (newValue && isActiveOption) {\n        onSelect?.(event, { value: newValue });\n        if (selectedItem !== newValue) {\n          selectItem(event.currentTarget);\n          onChange?.(event, { value: selectedItem });\n        }\n      }\n    },\n    [selectItem, selectedItem, onChange, onSelect, getOptions],\n  );\n\n  const isSelected = useCallback(\n    (value: string) => selectedItem === value,\n    [selectedItem],\n  );\n\n  const highlight = useCallback((event: SyntheticEvent<HTMLLIElement>) => {\n    setHighlightedItem(event.currentTarget.dataset.value);\n  }, []);\n\n  const isHighlighted = useCallback(\n    (value: string) => highlightedItem === value,\n    [highlightedItem],\n  );\n\n  const isFocused = useCallback(\n    (value: string) => isHighlighted(value) && focusVisible,\n    [focusVisible, isHighlighted],\n  );\n\n  const getActiveItem = () => {\n    const activeOptions = getOptions();\n    const activeIndex = activeOptions.findIndex(\n      (i) => i.id === activeDescendant,\n    );\n    return activeOptions[activeIndex];\n  };\n\n  // HANDLERS\n  const blurHandler = () => {\n    handleBlurVisible();\n    if (!isFocusVisibleRef.current) {\n      setFocusVisible(false);\n    }\n  };\n\n  const mouseOverHandler = () => {\n    if (focusVisible) {\n      setFocusVisible(false);\n    }\n  };\n\n  // takes care of focus when using keyboard navigation\n  const focusHandler = (event: FocusEvent<HTMLUListElement | HTMLElement>) => {\n    handleFocusVisible(event);\n    if (isFocusVisibleRef.current) {\n      setFocusVisible(true);\n    }\n    const activeElement = getActiveItem();\n    if (activeElement) {\n      updateHighlighted(activeElement);\n    } else {\n      focusFirstItem();\n    }\n  };\n\n  // takes care of keydown when using keyboard navigation\n  const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {\n    const { key } = event;\n    const currentItem = getActiveItem();\n    let nextItem = currentItem;\n    if (isFocusVisibleRef.current || !focusVisible) {\n      setFocusVisible(true);\n    }\n    switch (key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        if (!currentItem) {\n          focusFirstItem();\n          break;\n        }\n        nextItem =\n          key === \"ArrowUp\"\n            ? findPreviousOption(currentItem, 1)\n            : findNextOption(currentItem, 1);\n\n        if (nextItem && nextItem !== currentItem) {\n          event.preventDefault();\n          updateHighlighted(nextItem);\n        }\n        break;\n      case \"Home\":\n        event.preventDefault();\n        focusFirstItem();\n        break;\n      case \"End\":\n        event.preventDefault();\n        focusLastItem();\n        break;\n      case \" \":\n      case \"Enter\":\n        event.preventDefault();\n        if (nextItem) {\n          selectItem(nextItem);\n          onChange?.(event, { value: nextItem.dataset.value || \"\" });\n        }\n        break;\n      case \"PageDown\":\n      case \"PageUp\":\n        event.preventDefault();\n        break;\n      default:\n        break;\n    }\n  };\n\n  // CONTEXT\n  const contextValue = useMemo(\n    () => ({\n      disabled,\n      id,\n      select,\n      isSelected,\n      isFocused,\n      highlight,\n      isHighlighted,\n    }),\n    [disabled, id, select, isSelected, isFocused, highlight, isHighlighted],\n  );\n\n  return {\n    focusHandler,\n    keyDownHandler,\n    blurHandler,\n    mouseOverHandler,\n    activeDescendant,\n    selectedItem,\n    highlightedItem,\n    setSelectedItem,\n    setHighlightedItem,\n    contextValue,\n    focusVisibleRef,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/logo/Logo.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-high {\n  --logo-height: var(--saltLogo-logo-height, 14px);\n}\n.salt-density-medium {\n  --logo-height: var(--saltLogo-logo-height, 20px);\n}\n.salt-density-low {\n  --logo-height: var(--saltLogo-logo-height, 26px);\n}\n.salt-density-touch {\n  --logo-height: var(--saltLogo-logo-height, 32px);\n}\n\n.saltLogo {\n  --logo-color: var(--saltLogo-color, var(--salt-text-secondary-foreground));\n  --logo-divider-color: var(--saltLogo-pipe-color, var(--salt-separable-secondary-borderColor));\n  --logo-divider-height: var(--saltLogo-title-height, var(--salt-size-separator-height));\n  --logo-divider-margin: 0 calc(var(--salt-size-unit) * 2);\n  --logo-fontSize: var(--salt-text-fontSize);\n  --logo-lineHeight: var(--salt-text-lineHeight);\n}\n\n.saltLogo-compact {\n  --logo-pipe-margin: 0 calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--logo-height);\n}\n\n.saltLogo img {\n  max-height: 100%;\n}\n\n.saltLogo-wrapper {\n  display: inline-flex;\n  position: relative;\n  height: var(--logo-height);\n}\n\n.saltLogo-logo {\n  fill: var(--logo-color);\n  margin: auto;\n  stroke: none !important;\n  text-align: center;\n  font-size: var(--logo-fontSize);\n  line-height: var(--logo-lineHeight);\n}\n\n.saltLogo-appTitle {\n  align-self: center;\n  color: var(--logo-color);\n  position: relative;\n}\n\n.saltLogo-titlePipe {\n  border-right: 1px solid var(--logo-divider-color);\n  margin: var(--logo-divider-margin);\n  height: var(--logo-divider-height);\n}\n";
+var css_248z = "/* Styles for Logo */\n.saltLogo {\n  display: inline-flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  height: var(--salt-size-base);\n  gap: var(--salt-spacing-100);\n}\n\n.saltLogo svg {\n  fill: var(--salt-content-secondary-foreground);\n  stroke: none;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Logo.css.js.map

package/dist-es/logo/Logo.js

@@ -1,58 +1,24 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from 'clsx';
+import { jsx } from 'react/jsx-runtime';
 import { makePrefixer } from '@salt-ds/core';
-import { LogoTitle } from './internal/LogoTitle.js';
-import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import css_248z from './Logo.css.js';
 
 const withBaseName = makePrefixer("saltLogo");
-const Logo = forwardRef(function Logo2(props, ref) {
-  const {
-    appTitle,
-    className,
-    compact,
-    src,
-    ImageProps,
-    LogoImageComponent = "img",
-    TitleProps,
-    ...rest
-  } = props;
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "salt-logo",
-    css: css_248z,
-    window: targetWindow
-  });
-  return /* @__PURE__ */ jsxs("span", {
-    className: clsx(withBaseName(), className, {
-      [withBaseName("compact")]: compact
-    }),
-    ref,
-    ...rest,
-    children: [
-      /* @__PURE__ */ jsx("span", {
-        className: withBaseName("wrapper"),
-        children: /* @__PURE__ */ jsx(LogoImageComponent, {
-          ...ImageProps,
-          className: clsx(withBaseName("logo"), ImageProps == null ? void 0 : ImageProps.className),
-          src,
-          alt: (ImageProps == null ? void 0 : ImageProps.alt) || "Logo"
-        })
-      }),
-      /* @__PURE__ */ jsx(LogoTitle, {
-        ...TitleProps,
-        className: clsx(withBaseName("appTitle"), TitleProps == null ? void 0 : TitleProps.className),
-        label: appTitle,
-        separatorClassname: clsx(
-          withBaseName("titlePipe"),
-          TitleProps == null ? void 0 : TitleProps.separatorClassname
-        )
-      })
-    ]
-  });
-});
+const Logo = forwardRef(
+  function Logo2(props, ref) {
+    const { className, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-logo",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("span", { className: clsx(withBaseName(), className), ref, ...rest });
+  }
+);
 
 export { Logo };
 //# sourceMappingURL=Logo.js.map

package/dist-es/logo/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sources":["../src/logo/Logo.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ComponentType, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { LogoTitle, LogoTitleProps } from \"./internal/LogoTitle\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport logoCss from \"./Logo.css\";\n\nexport interface LogoProps extends ComponentPropsWithoutRef<\"span\"> {\n  /**\n   * Used to provide application title\n   */\n  appTitle?: string;\n  /**\n   * If `true`, the logo will be compact;\n   */\n  compact?: boolean;\n  /**\n   * Props passed to the Logo.\n   */\n  ImageProps?: Partial<ComponentPropsWithoutRef<\"img\">>;\n  /**\n   * Custom Component to render the logo image.\n   * e.g. if a custom renderer instead of static image using `src` prop.\n   */\n  LogoImageComponent?: ComponentType<Partial<ComponentPropsWithoutRef<\"img\">>>;\n  /**\n   * Image src for logo.\n   */\n  src?: string;\n  /**\n   * Props passed to the Application Title if used.\n   * If using a custom image then ImageProps.alt should be set to include a screen reader alternative text.\n   */\n  TitleProps?: Omit<Partial<LogoTitleProps>, \"label\">;\n}\n\nconst withBaseName = makePrefixer(\"saltLogo\");\n\nexport const Logo = forwardRef<HTMLSpanElement, LogoProps>(function Logo(\n  props,\n  ref\n) {\n  const {\n    appTitle,\n    className,\n    compact,\n    src,\n    ImageProps,\n    LogoImageComponent = \"img\",\n    TitleProps,\n    ...rest\n  } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-logo\",\n    css: logoCss,\n    window: targetWindow,\n  });\n\n  // TODO check if we need ImageProps and TitleProps classNames interface.\n  return (\n    <span\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"compact\")]: compact,\n      })}\n      ref={ref}\n      {...rest}\n    >\n      <span className={withBaseName(\"wrapper\")}>\n        <LogoImageComponent\n          {...ImageProps}\n          className={clsx(withBaseName(\"logo\"), ImageProps?.className)}\n          src={src}\n          alt={ImageProps?.alt || \"Logo\"}\n        />\n      </span>\n      <LogoTitle\n        {...TitleProps}\n        className={clsx(withBaseName(\"appTitle\"), TitleProps?.className)}\n        label={appTitle}\n        separatorClassname={clsx(\n          withBaseName(\"titlePipe\"),\n          TitleProps?.separatorClassname\n        )}\n      />\n    </span>\n  );\n});\n"],"names":["Logo","logoCss"],"mappings":";;;;;;;;;AAwCA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAO,GAAA,UAAA,CAAuC,SAASA,KAAAA,CAClE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAqB,GAAA,KAAA;AAAA,IACrB,UAAA;AAAA,IACG,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAGD,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACzC,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,KAC5B,CAAA;AAAA,IACD,GAAA;AAAA,IACC,GAAG,IAAA;AAAA,IAEJ,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACrC,QAAC,kBAAA,GAAA,CAAA,kBAAA,EAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,WAAW,IAAK,CAAA,YAAA,CAAa,MAAM,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,UAC3D,GAAA;AAAA,UACA,GAAA,EAAA,CAAK,yCAAY,GAAO,KAAA,MAAA;AAAA,SAC1B,CAAA;AAAA,OACF,CAAA;AAAA,sBACC,GAAA,CAAA,SAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAW,IAAK,CAAA,YAAA,CAAa,UAAU,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,QAC/D,KAAO,EAAA,QAAA;AAAA,QACP,kBAAoB,EAAA,IAAA;AAAA,UAClB,aAAa,WAAW,CAAA;AAAA,UACxB,UAAY,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,UAAA,CAAA,kBAAA;AAAA,SACd;AAAA,OACF,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Logo.js","sources":["../src/logo/Logo.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport logoCss from \"./Logo.css\";\n\nexport type LogoProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogo\");\n\nexport const Logo = forwardRef<HTMLSpanElement, LogoProps>(\n  function Logo(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo\",\n      css: logoCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span className={clsx(withBaseName(), className)} ref={ref} {...rest} />\n    );\n  },\n);\n"],"names":["Logo","logoCss"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AAErC,MAAM,IAAA,GAAO,UAAA;AAAA,EAClB,SAASA,KAAAA,CAAK,KAAA,EAAO,GAAA,EAAK;AACxB,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,WAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,IAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AAAA,EAE1E;AACF;;;;"}

package/dist-es/logo/LogoImage.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles for LogoImage */\n.saltLogoImage {\n  max-height: 100%;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=LogoImage.css.js.map

package/dist-es/logo/LogoImage.css.js.map

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

package/dist-es/logo/LogoImage.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './LogoImage.css.js';
+
+const withBaseName = makePrefixer("saltLogoImage");
+const LogoImage = forwardRef(
+  function LogoImage2(props, ref) {
+    const { className, alt, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-logo-image",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...rest,
+        alt,
+        className: clsx(withBaseName(), className),
+        ref
+      }
+    );
+  }
+);
+
+export { LogoImage };
+//# sourceMappingURL=LogoImage.js.map

package/dist-es/logo/LogoImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoImage.js","sources":["../src/logo/LogoImage.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport logoImageCss from \"./LogoImage.css\";\n\nexport interface LogoImageProps\n  extends Omit<ComponentPropsWithoutRef<\"img\">, \"alt\"> {\n  alt: string;\n}\n\nconst withBaseName = makePrefixer(\"saltLogoImage\");\n\nexport const LogoImage = forwardRef<HTMLImageElement, LogoImageProps>(\n  function LogoImage(props, ref) {\n    const { className, alt, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-image\",\n      css: logoImageCss,\n      window: targetWindow,\n    });\n\n    return (\n      <img\n        {...rest}\n        alt={alt}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n      />\n    );\n  },\n);\n"],"names":["LogoImage","logoImageCss"],"mappings":";;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA;AAE1C,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,SAASA,UAAAA,CAAU,KAAA,EAAO,GAAA,EAAK;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,GAAG,MAAK,GAAI,KAAA;AAEpC,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,iBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/logo/LogoSeparator.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Styles for LogoSeparator */\n.saltLogoSeparator {\n  height: var(--salt-size-separator-height);\n  border-right: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-primary-borderColor);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=LogoSeparator.css.js.map

package/dist-es/logo/LogoSeparator.css.js.map

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

package/dist-es/logo/LogoSeparator.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './LogoSeparator.css.js';
+
+const withBaseName = makePrefixer("saltLogoSeparator");
+const LogoSeparator = forwardRef(
+  function LogoSeparator2(props, ref) {
+    const { className, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-logo-separator",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx("span", { ...rest, className: clsx(withBaseName(), className), ref });
+  }
+);
+
+export { LogoSeparator };
+//# sourceMappingURL=LogoSeparator.js.map

package/dist-es/logo/LogoSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogoSeparator.js","sources":["../src/logo/LogoSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nimport logoSeparatorCss from \"./LogoSeparator.css\";\n\nexport type LogoSeparatorProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogoSeparator\");\n\nexport const LogoSeparator = forwardRef<HTMLImageElement, LogoSeparatorProps>(\n  function LogoSeparator(props, ref) {\n    const { className, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-logo-separator\",\n      css: logoSeparatorCss,\n      window: targetWindow,\n    });\n\n    return (\n      <span {...rest} className={clsx(withBaseName(), className)} ref={ref} />\n    );\n  },\n);\n"],"names":["LogoSeparator","logoSeparatorCss"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAM,GAAG,IAAA,EAAM,SAAA,EAAW,KAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAAU,CAAA;AAAA,EAE1E;AACF;;;;"}

package/dist-es/menu-button/MenuButton.js

@@ -1,19 +1,19 @@
 import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { forwardRef, useState, useCallback } from 'react';
 import { CascadingMenu } from '../cascading-menu/CascadingMenu.js';
-import { MenuButtonTrigger } from './MenuButtonTrigger.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './MenuButton.css.js';
+import { MenuButtonTrigger } from './MenuButtonTrigger.js';
 
 const MenuButton = forwardRef(
-  function MenuButton2({ variant = "secondary", CascadingMenuProps: CascadingMenuProps2 = {}, children, ...restProps }, ref) {
+  function MenuButton2({ variant = "secondary", CascadingMenuProps = {}, children, ...restProps }, ref) {
     const {
       initialSource = { menuItems: [] },
       onOpen,
       onClose,
       ...restMenuProps
-    } = CascadingMenuProps2;
+    } = CascadingMenuProps;
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-menu-button",
@@ -23,27 +23,33 @@ const MenuButton = forwardRef(
     const [isMenuOpen, setMenuOpen] = useState(false);
     const handleOpen = useCallback(() => {
       setMenuOpen(true);
-      onOpen && onOpen();
+      onOpen == null ? void 0 : onOpen();
     }, [onOpen]);
     const handleClose = useCallback(() => {
       setMenuOpen(false);
-      onClose && onClose();
+      onClose == null ? void 0 : onClose();
     }, [onClose]);
-    return /* @__PURE__ */ jsx(CascadingMenu, {
-      initialSource,
-      onClose: handleClose,
-      onOpen: handleOpen,
-      ...restMenuProps,
-      children: /* @__PURE__ */ jsx(MenuButtonTrigger, {
-        "aria-expanded": isMenuOpen,
-        "aria-haspopup": true,
-        isMenuOpen,
-        ref,
-        variant,
-        ...restProps,
-        children
-      })
-    });
+    return /* @__PURE__ */ jsx(
+      CascadingMenu,
+      {
+        initialSource,
+        onClose: handleClose,
+        onOpen: handleOpen,
+        ...restMenuProps,
+        children: /* @__PURE__ */ jsx(
+          MenuButtonTrigger,
+          {
+            "aria-expanded": isMenuOpen,
+            "aria-haspopup": true,
+            isMenuOpen,
+            ref,
+            variant,
+            ...restProps,
+            children
+          }
+        )
+      }
+    );
   }
 );
 

package/dist-es/menu-button/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useState } from \"react\";\nimport { ButtonProps } from \"@salt-ds/core\";\nimport { CascadingMenu, CascadingMenuProps } from \"../cascading-menu\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport menuButtonCss from \"./MenuButton.css\";\n\nexport interface MenuButtonProps extends ButtonProps {\n  CascadingMenuProps: CascadingMenuProps;\n  children: ReactNode;\n  className?: string;\n  hideCaret?: boolean;\n}\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(\n    { variant = \"secondary\", CascadingMenuProps = {}, children, ...restProps },\n    ref\n  ) {\n    const {\n      initialSource = { menuItems: [] },\n      onOpen,\n      onClose,\n      ...restMenuProps\n    } = CascadingMenuProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-button\",\n      css: menuButtonCss,\n      window: targetWindow,\n    });\n\n    const [isMenuOpen, setMenuOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setMenuOpen(true);\n      onOpen && onOpen();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose && onClose();\n    }, [onClose]);\n\n    return (\n      <CascadingMenu\n        initialSource={initialSource}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        {...restMenuProps}\n      >\n        <MenuButtonTrigger\n          aria-expanded={isMenuOpen}\n          aria-haspopup\n          isMenuOpen={isMenuOpen}\n          ref={ref}\n          variant={variant}\n          {...restProps}\n        >\n          {children}\n        </MenuButtonTrigger>\n      </CascadingMenu>\n    );\n  }\n);\n"],"names":["MenuButton","CascadingMenuProps","menuButtonCss"],"mappings":";;;;;;;;AAgBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAAA,CACP,EAAE,OAAA,GAAU,WAAa,EAAA,kBAAA,EAAAC,mBAAqB,GAAA,EAAI,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EACzE,GACA,EAAA;AACA,IAAM,MAAA;AAAA,MACJ,aAAgB,GAAA,EAAE,SAAW,EAAA,EAAG,EAAA;AAAA,MAChC,MAAA;AAAA,MACA,OAAA;AAAA,MACG,GAAA,aAAA;AAAA,KACDA,GAAAA,mBAAAA,CAAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEhD,IAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,MAAA,MAAA,IAAU,MAAO,EAAA,CAAA;AAAA,KACnB,EAAG,CAAC,MAAM,CAAC,CAAA,CAAA;AAEX,IAAM,MAAA,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,MAAA,OAAA,IAAW,OAAQ,EAAA,CAAA;AAAA,KACrB,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,IAAA,uBACG,GAAA,CAAA,aAAA,EAAA;AAAA,MACC,aAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,MAAQ,EAAA,UAAA;AAAA,MACP,GAAG,aAAA;AAAA,MAEJ,QAAC,kBAAA,GAAA,CAAA,iBAAA,EAAA;AAAA,QACC,eAAe,EAAA,UAAA;AAAA,QACf,eAAa,EAAA,IAAA;AAAA,QACb,UAAA;AAAA,QACA,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"MenuButton.js","sources":["../src/menu-button/MenuButton.tsx"],"sourcesContent":["import type { ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef, type ReactNode, useCallback, useState } from \"react\";\nimport { CascadingMenu, type CascadingMenuProps } from \"../cascading-menu\";\nimport menuButtonCss from \"./MenuButton.css\";\nimport { MenuButtonTrigger } from \"./MenuButtonTrigger\";\n\nexport interface MenuButtonProps extends ButtonProps {\n  CascadingMenuProps: CascadingMenuProps;\n  children: ReactNode;\n  className?: string;\n  hideCaret?: boolean;\n}\n\nexport const MenuButton = forwardRef<HTMLButtonElement, MenuButtonProps>(\n  function MenuButton(\n    { variant = \"secondary\", CascadingMenuProps = {}, children, ...restProps },\n    ref,\n  ) {\n    const {\n      initialSource = { menuItems: [] },\n      onOpen,\n      onClose,\n      ...restMenuProps\n    } = CascadingMenuProps;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-menu-button\",\n      css: menuButtonCss,\n      window: targetWindow,\n    });\n\n    const [isMenuOpen, setMenuOpen] = useState(false);\n\n    const handleOpen = useCallback(() => {\n      setMenuOpen(true);\n      onOpen?.();\n    }, [onOpen]);\n\n    const handleClose = useCallback(() => {\n      setMenuOpen(false);\n      onClose?.();\n    }, [onClose]);\n\n    return (\n      <CascadingMenu\n        initialSource={initialSource}\n        onClose={handleClose}\n        onOpen={handleOpen}\n        {...restMenuProps}\n      >\n        <MenuButtonTrigger\n          aria-expanded={isMenuOpen}\n          aria-haspopup\n          isMenuOpen={isMenuOpen}\n          ref={ref}\n          variant={variant}\n          {...restProps}\n        >\n          {children}\n        </MenuButtonTrigger>\n      </CascadingMenu>\n    );\n  },\n);\n"],"names":["MenuButton","menuButtonCss"],"mappings":";;;;;;;;AAeO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,SAASA,WAAAA,CACP,EAAE,OAAA,GAAU,WAAA,EAAa,kBAAA,GAAqB,EAAC,EAAG,QAAA,EAAU,GAAG,SAAA,EAAU,EACzE,GAAA,EACA;AACA,IAAA,MAAM;AAAA,MACJ,aAAA,GAAgB,EAAE,SAAA,EAAW,EAAC,EAAE;AAAA,MAChC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,kBAAA;AAEJ,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,IAAA,MAAM,UAAA,GAAa,YAAY,MAAM;AACnC,MAAA,WAAA,CAAY,IAAI,CAAA;AAChB,MAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,EAAA;AAAA,IACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,IAAA,MAAM,WAAA,GAAc,YAAY,MAAM;AACpC,MAAA,WAAA,CAAY,KAAK,CAAA;AACjB,MAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AAAA,IACF,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,IAAA,uBACE,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,aAAA;AAAA,QACA,OAAA,EAAS,WAAA;AAAA,QACT,MAAA,EAAQ,UAAA;AAAA,QACP,GAAG,aAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAAC,iBAAA;AAAA,UAAA;AAAA,YACC,eAAA,EAAe,UAAA;AAAA,YACf,eAAA,EAAa,IAAA;AAAA,YACb,UAAA;AAAA,YACA,GAAA;AAAA,YACA,OAAA;AAAA,YACC,GAAG,SAAA;AAAA,YAEH;AAAA;AAAA;AACH;AAAA,KACF;AAAA,EAEJ;AACF;;;;"}

package/dist-es/menu-button/MenuButtonTrigger.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMenuButtonTrigger {\n  --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-primary-foreground-active));\n}\n\n.saltMenuButtonTrigger {\n  display: inline-flex;\n  line-height: 1;\n}\n\n.saltMenuButtonTrigger-buttonOpen {\n  background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-primary-background-active));\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-icon {\n}\n\n.saltMenuButtonTrigger-caretIcon {\n  --saltIcon-margin: 0 0 0 var(--salt-size-unit);\n}\n";
+var css_248z = ".saltMenuButtonTrigger {\n  --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-primary-foreground-active));\n}\n\n.saltMenuButtonTrigger {\n  display: inline-flex;\n  line-height: 1;\n}\n\n.saltMenuButtonTrigger-buttonOpen {\n  background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-primary-background-active));\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon {\n  color: var(--menuButton-trigger-open-color);\n}\n\n.saltMenuButtonTrigger-caretIcon {\n  --saltIcon-margin: 0 0 0 var(--salt-size-unit);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MenuButtonTrigger.css.js.map

package/dist-es/menu-button/MenuButtonTrigger.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { clsx } from 'clsx';
-import { makePrefixer, Button } from '@salt-ds/core';
-import { ChevronDownIcon } from '@salt-ds/icons';
-import { useWindow } from '@salt-ds/window';
+import { makePrefixer, useIcon, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
 import css_248z from './MenuButtonTrigger.css.js';
 
 const withBaseName = makePrefixer("saltMenuButtonTrigger");
@@ -15,21 +14,28 @@ const MenuButtonTrigger = forwardRef(function MenuButtonTrigger2({ className, hi
     css: css_248z,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsxs(Button, {
-    ref,
-    className: clsx(withBaseName(), className, {
-      [withBaseName("buttonOpen")]: isMenuOpen
-    }),
-    "data-testid": "menu-button-trigger",
-    ...rest,
-    children: [
-      children,
-      !hideCaret && /* @__PURE__ */ jsx(ChevronDownIcon, {
-        className: withBaseName("caretIcon"),
-        "data-testid": "menu-button-trigger-caret"
-      })
-    ]
-  });
+  const { ExpandIcon } = useIcon();
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      ref,
+      className: clsx(withBaseName(), className, {
+        [withBaseName("buttonOpen")]: isMenuOpen
+      }),
+      "data-testid": "menu-button-trigger",
+      ...rest,
+      children: [
+        children,
+        !hideCaret && /* @__PURE__ */ jsx(
+          ExpandIcon,
+          {
+            className: withBaseName("caretIcon"),
+            "data-testid": "menu-button-trigger-caret"
+          }
+        )
+      ]
+    }
+  );
 });
 
 export { MenuButtonTrigger };

package/dist-es/menu-button/MenuButtonTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { forwardRef, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronDownIcon } from \"@salt-ds/icons\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport menuButtonTrigger from \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-menu-button-trigger\",\n    css: menuButtonTrigger,\n    window: targetWindow,\n  });\n\n  return (\n    <Button\n      ref={ref}\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ChevronDownIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["MenuButtonTrigger","menuButtonTrigger"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAS5C,MAAA,iBAAA,GAAoB,UAG/B,CAAA,SAASA,kBACT,CAAA,EAAE,SAAW,EAAA,SAAA,EAAW,UAAY,EAAA,QAAA,EAAA,GAAa,IAAK,EAAA,EACtD,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,0BAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,MACzC,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,KAC/B,CAAA;AAAA,IACD,aAAY,EAAA,qBAAA;AAAA,IACX,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,CAAC,6BACC,GAAA,CAAA,eAAA,EAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QACnC,aAAY,EAAA,2BAAA;AAAA,OACd,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"MenuButtonTrigger.js","sources":["../src/menu-button/MenuButtonTrigger.tsx"],"sourcesContent":["import { Button, type ButtonProps, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport menuButtonTrigger from \"./MenuButtonTrigger.css\";\n\nconst withBaseName = makePrefixer(\"saltMenuButtonTrigger\");\n\nexport interface MenuButtonTriggerProps extends ButtonProps {\n  className?: string;\n  hideCaret?: boolean;\n  isMenuOpen?: boolean;\n  children?: ReactNode;\n}\n\nexport const MenuButtonTrigger = forwardRef<\n  HTMLButtonElement,\n  MenuButtonTriggerProps\n>(function MenuButtonTrigger(\n  { className, hideCaret, isMenuOpen, children, ...rest },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-menu-button-trigger\",\n    css: menuButtonTrigger,\n    window: targetWindow,\n  });\n  const { ExpandIcon } = useIcon();\n\n  return (\n    <Button\n      ref={ref}\n      className={clsx(withBaseName(), className, {\n        [withBaseName(\"buttonOpen\")]: isMenuOpen,\n      })}\n      data-testid=\"menu-button-trigger\"\n      {...rest}\n    >\n      {children}\n      {!hideCaret && (\n        <ExpandIcon\n          className={withBaseName(\"caretIcon\")}\n          data-testid=\"menu-button-trigger-caret\"\n        />\n      )}\n    </Button>\n  );\n});\n"],"names":["MenuButtonTrigger","menuButtonTrigger"],"mappings":";;;;;;;;AAQA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AASlD,MAAM,iBAAA,GAAoB,UAAA,CAG/B,SAASA,kBAAAA,CACT,EAAE,SAAA,EAAW,SAAA,EAAW,UAAA,EAAY,QAAA,EAAU,GAAG,IAAA,EAAK,EACtD,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,0BAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,OAAA,EAAQ;AAE/B,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,YAAA,EAAa,EAAG,SAAA,EAAW;AAAA,QACzC,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG;AAAA,OAC/B,CAAA;AAAA,MACD,aAAA,EAAY,qBAAA;AAAA,MACX,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,CAAC,SAAA,oBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,YACnC,aAAA,EAAY;AAAA;AAAA;AACd;AAAA;AAAA,GAEJ;AAEJ,CAAC;;;;"}

package/dist-es/metric/Metric.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMetric {\n  display: flex;\n  align-items: flex-start;\n  padding: 0px;\n  color: var(--saltMetric-color, var(--salt-text-primary-foreground));\n}\n\n.saltMetric-orientation-horizontal {\n  flex-direction: row;\n  gap: var(--metric-horizontal-gap, 16px);\n  margin-top: var(--metric-horizontal-marginTop, 0px);\n}\n\n.saltMetric-orientation-vertical {\n  flex-direction: column;\n  justify-content: center;\n}\n\n.saltMetric-orientation-vertical.saltMetric-align-center {\n  align-items: center;\n}\n.saltMetric-orientation-vertical.saltMetric-align-right {\n  align-items: flex-end;\n}\n";
+var css_248z = ".saltMetric {\n  display: flex;\n  align-items: flex-start;\n  padding: 0px;\n  color: var(--saltMetric-color, var(--salt-content-primary-foreground));\n}\n\n.saltMetric-orientation-horizontal {\n  flex-direction: row;\n  gap: var(--metric-horizontal-gap, 16px);\n  margin-top: var(--metric-horizontal-marginTop, 0px);\n}\n\n.saltMetric-orientation-vertical {\n  flex-direction: column;\n  justify-content: center;\n}\n\n.saltMetric-orientation-vertical.saltMetric-align-center {\n  align-items: center;\n}\n.saltMetric-orientation-vertical.saltMetric-align-right {\n  align-items: flex-end;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=Metric.css.js.map

package/dist-es/metric/Metric.js

@@ -1,10 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef, useMemo } from 'react';
 import { MetricContextProvider } from './internal/MetricContext.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './Metric.css.js';
 
 const withBaseName = makePrefixer("saltMetric");
@@ -57,9 +57,9 @@ const Metric = forwardRef(function Metric2({
       valueId
     ]
   );
-  return /* @__PURE__ */ jsx(MetricContextProvider, {
-    value,
-    children: /* @__PURE__ */ jsx("div", {
+  return /* @__PURE__ */ jsx(MetricContextProvider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
       ...restProps,
       className: clsx(
         withBaseName(),
@@ -74,8 +74,8 @@ const Metric = forwardRef(function Metric2({
       id,
       ref,
       children
-    })
-  });
+    }
+  ) });
 });
 
 export { Metric };

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

@@ -1 +1 @@
-{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { MetricContextProvider, MetricContextValue } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport metricCSS from \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-metric\",\n    css: metricCSS,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ]\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["Metric","metricCSS"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA,CAAA;AAmBjC,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,WAAc,GAAA,UAAA;AAAA,EACd,iBAAoB,GAAA,KAAA;AAAA,EACpB,gBAAmB,GAAA,CAAA;AAAA,EACnB,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACJ,GAAA,SAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AACvB,EAAA,MAAM,UAAU,CAAgB,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,aAAa,CAAmB,gBAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AACtC,EAAA,MAAM,UAAU,CAAgB,aAAA,EAAA,EAAA,CAAA,CAAA,CAAA;AAEhC,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,qBAAA,EAAA;AAAA,IAAsB,KAAA;AAAA,IACrB,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,QAAQ,IAAM,CAAA,CAAA,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAA,CAAa,CAAa,UAAA,EAAA,SAAA,CAAA,CAAW,CAAI,GAAA,SAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,CAAe,YAAA,EAAA,WAAA,CAAA,CAAa,CAAI,GAAA,WAAA;AAAA,UAC9C,CAAC,YAAA,CAAa,CAAS,MAAA,EAAA,KAAA,CAAA,CAAO,CAAI,GAAA,KAAA;AAAA,SACpC;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useMemo } from \"react\";\nimport { MetricContextProvider, type MetricContextValue } from \"./internal\";\n\nimport metricCSS from \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-metric\",\n    css: metricCSS,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ],\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className,\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["Metric","metricCSS"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAmBvC,MAAM,MAAA,GAAS,UAAA,CAAwC,SAASA,OAAAA,CACrE;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR,WAAA,GAAc,UAAA;AAAA,EACd,iBAAA,GAAoB,KAAA;AAAA,EACpB,gBAAA,GAAmB,CAAA;AAAA,EACnB,EAAA,EAAI,MAAA;AAAA,EACJ,IAAA,GAAO,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,EAAA,wBAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,aAAA;AAAA,IACR,GAAA,EAAKC,QAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAA,MAAM,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAClC,EAAA,MAAM,UAAA,GAAa,mBAAmB,EAAE,CAAA,CAAA;AACxC,EAAA,MAAM,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAElC,EAAA,MAAM,KAAA,GAAQ,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAA,uBACE,GAAA,CAAC,yBAAsB,KAAA,EACrB,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAA,EAAW,IAAA;AAAA,QACT,YAAA,EAAa;AAAA,QACb,YAAA,CAAa,CAAA,KAAA,EAAQ,IAAI,CAAA,CAAE,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAA,CAAa,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC,GAAG,SAAA;AAAA,UAC1C,CAAC,YAAA,CAAa,CAAA,YAAA,EAAe,WAAW,CAAA,CAAE,CAAC,GAAG,WAAA;AAAA,UAC9C,CAAC,YAAA,CAAa,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAC,GAAG;AAAA,SACpC;AAAA,QACA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/metric/MetricContent.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-status-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-status-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-status-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-status-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
+var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-positive-foreground-decorative);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-positive-foreground-informative);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-sentiment-negative-foreground-decorative);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-sentiment-negative-foreground-informative);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=MetricContent.css.js.map

package/dist-es/metric/MetricContent.js

@@ -1,11 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, Text, Display3, Display2, Display1 } from '@salt-ds/core';
-import { ArrowDownIcon, ArrowUpIcon } from '@salt-ds/icons';
+import { makePrefixer, Display1, Display2, Display3, Text } from '@salt-ds/core';
+import { ArrowUpIcon, ArrowDownIcon } from '@salt-ds/icons';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useMetricContext } from './internal/MetricContext.js';
-import { useWindow } from '@salt-ds/window';
-import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './MetricContent.css.js';
 
 const iconComponentMap = {
@@ -51,36 +51,41 @@ const MetricContent = forwardRef(
       size: iconSize,
       ...IndicatorIconProps
     };
-    const IconComponent = IndicatorIconComponent != null ? IndicatorIconComponent : direction ? iconComponentMap[direction] : void 0;
-    const icon = showIndicator && IconComponent ? /* @__PURE__ */ jsx(IconComponent, {
-      ...iconProps
-    }) : null;
-    return /* @__PURE__ */ jsxs("div", {
-      ...restProps,
-      className: clsx(withBaseName(), className),
-      "aria-labelledby": `${titleId || ""} ${subtitleId || ""}`,
-      ref,
-      children: [
-        /* @__PURE__ */ jsxs("div", {
-          className: withBaseName("value-container"),
-          children: [
+    const IconComponent = IndicatorIconComponent ?? (direction ? iconComponentMap[direction] : void 0);
+    const icon = showIndicator && IconComponent ? /* @__PURE__ */ jsx(IconComponent, { ...iconProps }) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...restProps,
+        className: clsx(withBaseName(), className),
+        role: "presentation",
+        "aria-labelledby": `${titleId || ""} ${subtitleId || ""}`,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: withBaseName("value-container"), children: [
             indicatorPosition === "start" && icon,
-            /* @__PURE__ */ jsx(ValueComponent, {
-              "data-testid": "metric-value",
-              id: valueId,
-              className: withBaseName("value"),
-              children: value
-            }),
+            /* @__PURE__ */ jsx(
+              ValueComponent,
+              {
+                "data-testid": "metric-value",
+                id: valueId,
+                className: withBaseName("value"),
+                children: value
+              }
+            ),
             indicatorPosition === "end" && icon
-          ]
-        }),
-        subvalue && /* @__PURE__ */ jsx(Text, {
-          className: withBaseName("subvalue"),
-          "data-testid": "metric-subvalue",
-          children: subvalue
-        })
-      ]
-    });
+          ] }),
+          subvalue && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: withBaseName("subvalue"),
+              "data-testid": "metric-subvalue",
+              children: subvalue
+            }
+          )
+        ]
+      }
+    );
   }
 );