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

package/dist-cjs/list-next/ListItemNext.js

@@ -0,0 +1,85 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var ListItemNext$1 = require('./ListItemNext.css.js');
+var ListNextContext = require('./ListNextContext.js');
+
+const withBaseName = core.makePrefixer("saltListItemNext");
+const ListItemNext = react.forwardRef(
+  function ListItemNext2({
+    children,
+    className,
+    disabled: disabledProp,
+    id: idProp,
+    value,
+    onClick,
+    ...props
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-list-item-next",
+      css: ListItemNext$1,
+      window: targetWindow
+    });
+    const id = core.useIdMemo(idProp);
+    const listContext = ListNextContext.useListItem();
+    if (!listContext) return null;
+    const {
+      id: contextId,
+      disabled: contextDisabled,
+      select,
+      isSelected,
+      isFocused,
+      highlight,
+      isHighlighted
+    } = listContext;
+    const itemId = `${contextId || "listNext"}--${id}`;
+    const disabled = disabledProp || contextDisabled;
+    const selected = isSelected(value);
+    const focused = isFocused(value);
+    const highlighted = isHighlighted(value);
+    const handleClick = (event) => {
+      if (!disabled) {
+        select(event);
+        onClick == null ? void 0 : onClick(event);
+      }
+    };
+    const handleMouseMove = (event) => {
+      if (!highlighted) {
+        highlight(event);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        className: clsx.clsx(
+          withBaseName(),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("highlighted")]: highlighted,
+            [withBaseName("focused")]: focused
+          },
+          className
+        ),
+        role: "option",
+        "aria-disabled": disabled || void 0,
+        "aria-selected": selected || void 0,
+        id: itemId,
+        "data-value": value,
+        onClick: handleClick,
+        onMouseMove: handleMouseMove,
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+exports.ListItemNext = ListItemNext;
+//# sourceMappingURL=ListItemNext.js.map

package/dist-cjs/list-next/ListItemNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemNext.js","sources":["../src/list-next/ListItemNext.tsx"],"sourcesContent":["import { makePrefixer, useIdMemo } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, type MouseEvent } from \"react\";\nimport listItemNextCss from \"./ListItemNext.css\";\nimport { useListItem } from \"./ListNextContext\";\n\nconst withBaseName = makePrefixer(\"saltListItemNext\");\n\nexport interface ListItemNextProps extends HTMLAttributes<HTMLLIElement> {\n  /**\n   * If true, the particular list item in list will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * List item id.\n   */\n  id?: string;\n  /**\n   * List item value.\n   */\n  value: string;\n}\n\nexport const ListItemNext = forwardRef<HTMLLIElement, ListItemNextProps>(\n  function ListItemNext(\n    {\n      children,\n      className,\n      disabled: disabledProp,\n      id: idProp,\n      value,\n      onClick,\n      ...props\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-list-item-next\",\n      css: listItemNextCss,\n      window: targetWindow,\n    });\n    const id = useIdMemo(idProp);\n\n    const listContext = useListItem();\n    if (!listContext) return null;\n\n    const {\n      id: contextId,\n      disabled: contextDisabled,\n      select,\n      isSelected,\n      isFocused,\n      highlight,\n      isHighlighted,\n    } = listContext;\n\n    const itemId = `${contextId || \"listNext\"}--${id}`;\n    const disabled = disabledProp || contextDisabled;\n    const selected = isSelected(value);\n    const focused = isFocused(value);\n    const highlighted = isHighlighted(value);\n\n    const handleClick = (event: MouseEvent<HTMLLIElement>) => {\n      if (!disabled) {\n        select(event);\n        onClick?.(event);\n      }\n    };\n\n    const handleMouseMove = (event: MouseEvent<HTMLLIElement>) => {\n      if (!highlighted) {\n        highlight(event);\n      }\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"disabled\")]: disabled,\n            [withBaseName(\"highlighted\")]: highlighted,\n            [withBaseName(\"focused\")]: focused,\n          },\n          className,\n        )}\n        role=\"option\"\n        aria-disabled={disabled || undefined}\n        aria-selected={selected || undefined}\n        id={itemId}\n        data-value={value}\n        onClick={handleClick}\n        onMouseMove={handleMouseMove}\n        {...props}\n      >\n        {children}\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ListItemNext","useWindow","useComponentCssInjection","listItemNextCss","useIdMemo","useListItem","jsx","clsx"],"mappings":";;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAiB7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA,EAAU,YAAA;AAAA,IACV,EAAA,EAAI,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AACD,IAAA,MAAM,EAAA,GAAKC,eAAU,MAAM,CAAA;AAE3B,IAAA,MAAM,cAAcC,2BAAA,EAAY;AAChC,IAAA,IAAI,CAAC,aAAa,OAAO,IAAA;AAEzB,IAAA,MAAM;AAAA,MACJ,EAAA,EAAI,SAAA;AAAA,MACJ,QAAA,EAAU,eAAA;AAAA,MACV,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA,KACF,GAAI,WAAA;AAEJ,IAAA,MAAM,MAAA,GAAS,CAAA,EAAG,SAAA,IAAa,UAAU,KAAK,EAAE,CAAA,CAAA;AAChD,IAAA,MAAM,WAAW,YAAA,IAAgB,eAAA;AACjC,IAAA,MAAM,QAAA,GAAW,WAAW,KAAK,CAAA;AACjC,IAAA,MAAM,OAAA,GAAU,UAAU,KAAK,CAAA;AAC/B,IAAA,MAAM,WAAA,GAAc,cAAc,KAAK,CAAA;AAEvC,IAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAqC;AACxD,MAAA,IAAI,CAAC,QAAA,EAAU;AACb,QAAA,MAAA,CAAO,KAAK,CAAA;AACZ,QAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAAA,MACZ;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,eAAA,GAAkB,CAAC,KAAA,KAAqC;AAC5D,MAAA,IAAI,CAAC,WAAA,EAAa;AAChB,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA,MACjB;AAAA,IACF,CAAA;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAWC,SAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG,WAAA;AAAA,YAC/B,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACA,IAAA,EAAK,QAAA;AAAA,QACL,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,EAAA,EAAI,MAAA;AAAA,QACJ,YAAA,EAAY,KAAA;AAAA,QACZ,OAAA,EAAS,WAAA;AAAA,QACT,WAAA,EAAa,eAAA;AAAA,QACZ,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/list-next/ListNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Style applied to the root element */\n.saltListNext {\n  margin: 0;\n  background: var(--salt-container-primary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--salt-borderStyle-solid);\n  border-width: var(--salt-size-fixed-100);\n  height: 100%;\n  outline: none;\n  overflow-y: auto;\n  overflow-x: hidden;\n  position: relative;\n  padding-inline-start: 0;\n  box-sizing: content-box;\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ListNext.css.js.map

package/dist-cjs/list-next/ListNext.css.js.map

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

package/dist-cjs/list-next/ListNext.js

@@ -0,0 +1,102 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var ListNext$1 = require('./ListNext.css.js');
+var ListNextContext = require('./ListNextContext.js');
+var useList = require('./useList.js');
+
+const withBaseName = core.makePrefixer("saltListNext");
+const ListNext = react.forwardRef(
+  function ListNext2({
+    children,
+    className,
+    disabled,
+    disableFocus,
+    id,
+    onSelect,
+    onFocus,
+    onBlur,
+    onKeyDown,
+    onMouseOver,
+    highlightedItem,
+    selected,
+    defaultSelected,
+    onChange,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-list-next",
+      css: ListNext$1,
+      window: targetWindow
+    });
+    const listId = core.useId(id);
+    const listRef = react.useRef(null);
+    const handleRef = core.useForkRef(listRef, ref);
+    const {
+      focusHandler,
+      keyDownHandler,
+      blurHandler,
+      mouseOverHandler,
+      activeDescendant,
+      contextValue,
+      focusVisibleRef
+    } = useList.useList({
+      disabled,
+      highlightedItem,
+      selected,
+      defaultSelected,
+      onChange,
+      onSelect,
+      id: listId,
+      ref: listRef
+    });
+    const setListRef = core.useForkRef(focusVisibleRef, handleRef);
+    const handleFocus = (event) => {
+      focusHandler(event);
+      onFocus == null ? void 0 : onFocus(event);
+    };
+    const handleKeyDown = (event) => {
+      if (disableFocus) {
+        event.preventDefault();
+        return;
+      }
+      keyDownHandler(event);
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleBlur = (event) => {
+      blurHandler();
+      onBlur == null ? void 0 : onBlur(event);
+    };
+    const handleMouseOver = (event) => {
+      mouseOverHandler();
+      onMouseOver == null ? void 0 : onMouseOver(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(ListNextContext.ListNextContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        ref: setListRef,
+        id: listId,
+        className: clsx.clsx(withBaseName(), className),
+        role: "listbox",
+        tabIndex: disabled || disableFocus ? -1 : 0,
+        "aria-activedescendant": disabled ? void 0 : activeDescendant,
+        "aria-disabled": disabled,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        onMouseOver: handleMouseOver,
+        ...rest,
+        children
+      }
+    ) });
+  }
+);
+
+exports.ListNext = ListNext;
+//# sourceMappingURL=ListNext.js.map

package/dist-cjs/list-next/ListNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListNext.js","sources":["../src/list-next/ListNext.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  forwardRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type SyntheticEvent,\n  useRef,\n} from \"react\";\nimport listNextCss from \"./ListNext.css\";\nimport { ListNextContext } from \"./ListNextContext\";\nimport { useList } from \"./useList\";\n\nconst withBaseName = makePrefixer(\"saltListNext\");\n\nexport interface ListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"ul\">, \"onChange\" | \"onSelect\"> {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* If `true`, the component will not receive focus. */\n  disableFocus?: boolean;\n  /* Value for the controlled version. */\n  highlightedItem?: string;\n  /* Value for the controlled version. */\n  selected?: string;\n  /* Callback for change event. Returns current selection.*/\n  onChange?: (\n    event: SyntheticEvent,\n    data: { value: string | undefined },\n  ) => void;\n  /* Callback for select event. Returns new selected item.*/\n  onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n  /* Initial selection. */\n  defaultSelected?: string;\n}\n\nexport const ListNext = forwardRef<HTMLUListElement, ListNextProps>(\n  function ListNext(\n    {\n      children,\n      className,\n      disabled,\n      disableFocus,\n      id,\n      onSelect,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      onMouseOver,\n      highlightedItem,\n      selected,\n      defaultSelected,\n      onChange,\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-list-next\",\n      css: listNextCss,\n      window: targetWindow,\n    });\n\n    const listId = useId(id);\n    const listRef = useRef<HTMLUListElement>(null);\n    const handleRef = useForkRef(listRef, ref);\n    const {\n      focusHandler,\n      keyDownHandler,\n      blurHandler,\n      mouseOverHandler,\n      activeDescendant,\n      contextValue,\n      focusVisibleRef,\n    } = useList({\n      disabled,\n      highlightedItem,\n      selected,\n      defaultSelected,\n      onChange,\n      onSelect,\n      id: listId,\n      ref: listRef,\n    });\n\n    const setListRef = useForkRef(focusVisibleRef, handleRef);\n\n    const handleFocus = (event: FocusEvent<HTMLUListElement>) => {\n      focusHandler(event);\n      onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n      if (disableFocus) {\n        event.preventDefault();\n        return;\n      }\n      keyDownHandler(event);\n      onKeyDown?.(event);\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n      blurHandler();\n      onBlur?.(event);\n    };\n\n    const handleMouseOver = (event: MouseEvent<HTMLUListElement>) => {\n      mouseOverHandler();\n      onMouseOver?.(event);\n    };\n\n    return (\n      <ListNextContext.Provider value={contextValue}>\n        <ul\n          // TODO: fix type from useIsFocusVisible\n          // @ts-expect-error\n          ref={setListRef}\n          id={listId}\n          className={clsx(withBaseName(), className)}\n          role=\"listbox\"\n          tabIndex={disabled || disableFocus ? -1 : 0}\n          aria-activedescendant={disabled ? undefined : activeDescendant}\n          aria-disabled={disabled}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          onMouseOver={handleMouseOver}\n          {...rest}\n        >\n          {children}\n        </ul>\n      </ListNextContext.Provider>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","ListNext","useWindow","useComponentCssInjection","listNextCss","useId","useRef","useForkRef","useList","jsx","ListNextContext","clsx"],"mappings":"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"}

package/dist-cjs/list-next/ListNextContext.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const ListNextContext = core.createContext(
+  "ListNextContext",
+  void 0
+);
+function useListItem() {
+  return react.useContext(ListNextContext);
+}
+
+exports.ListNextContext = ListNextContext;
+exports.useListItem = useListItem;
+//# sourceMappingURL=ListNextContext.js.map

package/dist-cjs/list-next/ListNextContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListNextContext.js","sources":["../src/list-next/ListNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { type SyntheticEvent, useContext } from \"react\";\n\nexport interface ListNextContextValue {\n  disabled?: boolean;\n  id?: string;\n  select: (event: SyntheticEvent<HTMLLIElement>) => void;\n  isSelected: (value: string) => boolean;\n  isFocused: (value: string) => boolean;\n  highlight: (event: SyntheticEvent<HTMLLIElement>) => void;\n  isHighlighted: (value: string) => boolean;\n}\n\nexport const ListNextContext = createContext<ListNextContextValue | undefined>(\n  \"ListNextContext\",\n  undefined,\n);\n\nexport function useListItem() {\n  return useContext(ListNextContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;;AAaO,MAAM,eAAA,GAAkBA,kBAAA;AAAA,EAC7B,iBAAA;AAAA,EACA;AACF;AAEO,SAAS,WAAA,GAAc;AAC5B,EAAA,OAAOC,iBAAW,eAAe,CAAA;AACnC;;;;;"}

package/dist-cjs/list-next/useList.js

@@ -0,0 +1,245 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const useList = ({
+  disabled = false,
+  highlightedItem: highlightedItemProp,
+  selected: selectedProp,
+  defaultSelected,
+  onChange,
+  onSelect,
+  id,
+  ref
+}) => {
+  const getOptions = react.useCallback(() => {
+    var _a;
+    return Array.from(
+      ((_a = ref.current) == null ? void 0 : _a.querySelectorAll('[role="option"]:not([aria-disabled])')) ?? []
+    );
+  }, [ref]);
+  const [focusVisible, setFocusVisible] = react.useState(false);
+  const [activeDescendant, setActiveDescendant] = react.useState(
+    void 0
+  );
+  const [highlightedItem, setHighlightedItem] = core.useControlled({
+    controlled: highlightedItemProp,
+    default: void 0,
+    name: "ListNext",
+    state: "highlighted"
+  });
+  const [selectedItem, setSelectedItem] = core.useControlled({
+    controlled: selectedProp,
+    default: defaultSelected,
+    name: "ListNext",
+    state: "selected"
+  });
+  const {
+    isFocusVisibleRef,
+    onFocus: handleFocusVisible,
+    onBlur: handleBlurVisible,
+    ref: focusVisibleRef
+  } = core.useIsFocusVisible();
+  const updateScroll = react.useCallback(
+    (currentTarget) => {
+      const list = ref.current;
+      if (!list || !currentTarget) return;
+      const { offsetTop, offsetHeight } = currentTarget;
+      const listHeight = list == null ? void 0 : list.clientHeight;
+      const listScrollTop = list == null ? void 0 : list.scrollTop;
+      if (offsetTop < listScrollTop) {
+        list.scrollTop = offsetTop;
+      } else if (offsetTop + offsetHeight > listScrollTop + listHeight) {
+        list.scrollTop = offsetTop + offsetHeight - listHeight;
+      }
+    },
+    [ref]
+  );
+  const updateHighlighted = react.useCallback(
+    (element) => {
+      setHighlightedItem(element.dataset.value);
+      setActiveDescendant(element.id);
+      updateScroll(element);
+    },
+    [updateScroll]
+  );
+  const selectItem = react.useCallback(
+    (element) => {
+      const newValue = element == null ? void 0 : element.dataset.value;
+      if (newValue) {
+        setSelectedItem(newValue);
+        updateHighlighted(element);
+      }
+    },
+    [updateHighlighted]
+  );
+  react.useEffect(() => {
+    var _a;
+    const activeOptions = getOptions();
+    const highlightedIndex = activeOptions.findIndex(
+      (i) => i.dataset.value === highlightedItem
+    );
+    if (highlightedIndex) {
+      setActiveDescendant((_a = activeOptions[highlightedIndex]) == null ? void 0 : _a.id);
+      highlightedItem && updateScroll(activeOptions[highlightedIndex]);
+    }
+  }, [highlightedItem, getOptions, updateScroll]);
+  const focusFirstItem = () => {
+    const activeOptions = getOptions();
+    const firstItem = activeOptions[0];
+    if (firstItem) {
+      updateHighlighted(firstItem);
+    }
+  };
+  const focusLastItem = () => {
+    const activeOptions = getOptions();
+    const lastItem = activeOptions[activeOptions.length - 1];
+    if (lastItem) {
+      updateHighlighted(lastItem);
+      updateScroll(lastItem);
+    }
+  };
+  const findNextOption = (currentOption, moves) => {
+    const activeOptions = getOptions();
+    const nextOptionIndex = currentOption ? activeOptions.indexOf(currentOption) + moves : 0;
+    return activeOptions[nextOptionIndex] || activeOptions[activeOptions.length - 1];
+  };
+  const findPreviousOption = (currentOption, moves) => {
+    const activeOptions = getOptions();
+    const currentOptionIndex = activeOptions.findIndex(
+      (i) => i.id === currentOption.id
+    );
+    return activeOptions[currentOptionIndex - moves] || activeOptions[0];
+  };
+  const select = react.useCallback(
+    (event) => {
+      const newValue = event.currentTarget.dataset.value;
+      const activeOptions = getOptions();
+      const isActiveOption = activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;
+      if (newValue && isActiveOption) {
+        onSelect == null ? void 0 : onSelect(event, { value: newValue });
+        if (selectedItem !== newValue) {
+          selectItem(event.currentTarget);
+          onChange == null ? void 0 : onChange(event, { value: selectedItem });
+        }
+      }
+    },
+    [selectItem, selectedItem, onChange, onSelect, getOptions]
+  );
+  const isSelected = react.useCallback(
+    (value) => selectedItem === value,
+    [selectedItem]
+  );
+  const highlight = react.useCallback((event) => {
+    setHighlightedItem(event.currentTarget.dataset.value);
+  }, []);
+  const isHighlighted = react.useCallback(
+    (value) => highlightedItem === value,
+    [highlightedItem]
+  );
+  const isFocused = react.useCallback(
+    (value) => isHighlighted(value) && focusVisible,
+    [focusVisible, isHighlighted]
+  );
+  const getActiveItem = () => {
+    const activeOptions = getOptions();
+    const activeIndex = activeOptions.findIndex(
+      (i) => i.id === activeDescendant
+    );
+    return activeOptions[activeIndex];
+  };
+  const blurHandler = () => {
+    handleBlurVisible();
+    if (!isFocusVisibleRef.current) {
+      setFocusVisible(false);
+    }
+  };
+  const mouseOverHandler = () => {
+    if (focusVisible) {
+      setFocusVisible(false);
+    }
+  };
+  const focusHandler = (event) => {
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current) {
+      setFocusVisible(true);
+    }
+    const activeElement = getActiveItem();
+    if (activeElement) {
+      updateHighlighted(activeElement);
+    } else {
+      focusFirstItem();
+    }
+  };
+  const keyDownHandler = (event) => {
+    const { key } = event;
+    const currentItem = getActiveItem();
+    let nextItem = currentItem;
+    if (isFocusVisibleRef.current || !focusVisible) {
+      setFocusVisible(true);
+    }
+    switch (key) {
+      case "ArrowUp":
+      case "ArrowDown":
+        if (!currentItem) {
+          focusFirstItem();
+          break;
+        }
+        nextItem = key === "ArrowUp" ? findPreviousOption(currentItem, 1) : findNextOption(currentItem, 1);
+        if (nextItem && nextItem !== currentItem) {
+          event.preventDefault();
+          updateHighlighted(nextItem);
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        focusFirstItem();
+        break;
+      case "End":
+        event.preventDefault();
+        focusLastItem();
+        break;
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        if (nextItem) {
+          selectItem(nextItem);
+          onChange == null ? void 0 : onChange(event, { value: nextItem.dataset.value || "" });
+        }
+        break;
+      case "PageDown":
+      case "PageUp":
+        event.preventDefault();
+        break;
+    }
+  };
+  const contextValue = react.useMemo(
+    () => ({
+      disabled,
+      id,
+      select,
+      isSelected,
+      isFocused,
+      highlight,
+      isHighlighted
+    }),
+    [disabled, id, select, isSelected, isFocused, highlight, isHighlighted]
+  );
+  return {
+    focusHandler,
+    keyDownHandler,
+    blurHandler,
+    mouseOverHandler,
+    activeDescendant,
+    selectedItem,
+    highlightedItem,
+    setSelectedItem,
+    setHighlightedItem,
+    contextValue,
+    focusVisibleRef
+  };
+};
+
+exports.useList = useList;
+//# sourceMappingURL=useList.js.map

package/dist-cjs/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":["useCallback","useState","useControlled","useIsFocusVisible","useEffect","useMemo"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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";
 
 module.exports = css_248z;
 //# sourceMappingURL=Logo.css.js.map

package/dist-cjs/logo/Logo.js

@@ -1,62 +1,26 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var clsx = require('clsx');
 var core = require('@salt-ds/core');
-var LogoTitle = require('./internal/LogoTitle.js');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
 var Logo$1 = require('./Logo.css.js');
 
 const withBaseName = core.makePrefixer("saltLogo");
-const Logo = React.forwardRef(function Logo2(props, ref) {
-  const {
-    appTitle,
-    className,
-    compact,
-    src,
-    ImageProps,
-    LogoImageComponent = "img",
-    TitleProps,
-    ...rest
-  } = props;
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-logo",
-    css: Logo$1,
-    window: targetWindow
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", {
-    className: clsx.clsx(withBaseName(), className, {
-      [withBaseName("compact")]: compact
-    }),
-    ref,
-    ...rest,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", {
-        className: withBaseName("wrapper"),
-        children: /* @__PURE__ */ jsxRuntime.jsx(LogoImageComponent, {
-          ...ImageProps,
-          className: clsx.clsx(withBaseName("logo"), ImageProps == null ? void 0 : ImageProps.className),
-          src,
-          alt: (ImageProps == null ? void 0 : ImageProps.alt) || "Logo"
-        })
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(LogoTitle.LogoTitle, {
-        ...TitleProps,
-        className: clsx.clsx(withBaseName("appTitle"), TitleProps == null ? void 0 : TitleProps.className),
-        label: appTitle,
-        separatorClassname: clsx.clsx(
-          withBaseName("titlePipe"),
-          TitleProps == null ? void 0 : TitleProps.separatorClassname
-        )
-      })
-    ]
-  });
-});
+const Logo = react.forwardRef(
+  function Logo2(props, ref) {
+    const { className, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-logo",
+      css: Logo$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: clsx.clsx(withBaseName(), className), ref, ...rest });
+  }
+);
 
 exports.Logo = Logo;
 //# sourceMappingURL=Logo.js.map

package/dist-cjs/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":["makePrefixer","forwardRef","Logo","useWindow","useComponentCssInjection","logoCss","jsxs","clsx","jsx","LogoTitle"],"mappings":";;;;;;;;;;;;;AAwCA,MAAM,YAAA,GAAeA,kBAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAO,GAAAC,gBAAA,CAAuC,SAASC,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,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAGD,EAAA,uBACGC,eAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAAC,SAAA,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,sBAACC,cAAA,CAAA,MAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QACrC,QAAC,kBAAAA,cAAA,CAAA,kBAAA,EAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACJ,WAAWD,SAAK,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,sBACCC,cAAA,CAAAC,mBAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAWF,SAAK,CAAA,YAAA,CAAa,UAAU,CAAA,EAAG,yCAAY,SAAS,CAAA;AAAA,QAC/D,KAAO,EAAA,QAAA;AAAA,QACP,kBAAoB,EAAAA,SAAA;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":["makePrefixer","forwardRef","Logo","useWindow","useComponentCssInjection","logoCss","jsx","clsx"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,UAAU,CAAA;AAErC,MAAM,IAAA,GAAOC,gBAAA;AAAA,EAClB,SAASC,KAAAA,CAAK,KAAA,EAAO,GAAA,EAAK;AACxB,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,WAAA;AAAA,MACR,GAAA,EAAKC,MAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAWC,SAAA,CAAK,YAAA,IAAgB,SAAS,CAAA,EAAG,GAAA,EAAW,GAAG,IAAA,EAAM,CAAA;AAAA,EAE1E;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles for LogoImage */\n.saltLogoImage {\n  max-height: 100%;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=LogoImage.css.js.map

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

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