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

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 {\n  FocusEvent,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { useList } from \"./useList\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport listNextCss from \"./ListNext.css\";\nimport { ListNextContext } from \"./ListNextContext\";\n\nconst withBaseName = makePrefixer(\"saltListNext\");\n\nexport interface ListNextProps extends HTMLAttributes<HTMLUListElement> {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* Value for the uncontrolled version. */\n  selected?: string;\n  /* Initial value for the uncontrolled version. */\n  defaultSelected?: string;\n}\n\nexport const ListNext = forwardRef<HTMLUListElement, ListNextProps>(\n  function ListNext(\n    {\n      children,\n      className,\n      disabled,\n      id,\n      onSelect,\n      onFocus,\n      onBlur,\n      onKeyDown,\n      onMouseDown,\n      selected,\n      defaultSelected,\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\n    const {\n      focusHandler,\n      keyDownHandler,\n      blurHandler,\n      mouseDownHandler,\n      activeDescendant,\n      contextValue,\n    } = useList({\n      disabled,\n      selected,\n      defaultSelected,\n      id: listId,\n      ref: listRef,\n    });\n\n    const handleFocus = (event: FocusEvent<HTMLUListElement>) => {\n      focusHandler();\n      onFocus?.(event);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLUListElement>) => {\n      keyDownHandler(event);\n      onKeyDown?.(event);\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLUListElement>) => {\n      blurHandler();\n      onBlur?.(event);\n    };\n\n    const handleMouseDown = (event: MouseEvent<HTMLUListElement>) => {\n      mouseDownHandler();\n      onMouseDown?.(event);\n    };\n\n    return (\n      <ListNextContext.Provider value={contextValue}>\n        <ul\n          ref={handleRef}\n          id={listId}\n          className={clsx(withBaseName(), className)}\n          role=\"listbox\"\n          tabIndex={disabled ? -1 : 0}\n          aria-activedescendant={disabled ? undefined : activeDescendant}\n          aria-disabled={disabled}\n          onFocus={handleFocus}\n          onKeyDown={handleKeyDown}\n          onBlur={handleBlur}\n          onMouseDown={handleMouseDown}\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,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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 { SyntheticEvent, useContext } from \"react\";\n\nexport interface ListNextContextValue {\n  disabled?: boolean;\n  id?: string;\n  select: (event: SyntheticEvent<HTMLLIElement>) => void;\n  isSelected: (id: string) => boolean;\n  isFocused: (id: 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":";;;;;;;AAWO,MAAM,eAAkB,GAAAA,kBAAA;AAAA,EAC7B,iBAAA;AAAA,EACA,KAAA,CAAA;AACF,EAAA;AAEO,SAAS,WAAc,GAAA;AAC5B,EAAA,OAAOC,iBAAW,eAAe,CAAA,CAAA;AACnC;;;;;"}

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

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@salt-ds/core');
+
+const useList = ({
+  disabled = false,
+  selected: selectedProp,
+  defaultSelected,
+  onChange,
+  id,
+  ref
+}) => {
+  const [activeDescendant, setActiveDescendant] = React.useState(
+    void 0
+  );
+  const [showFocusRing, setShowFocusRing] = React.useState(false);
+  const [selectedItem, setSelectedItem] = core.useControlled({
+    controlled: selectedProp,
+    default: defaultSelected,
+    name: "ListNext",
+    state: "selected"
+  });
+  const getOptions = React.useCallback(() => {
+    var _a, _b;
+    return Array.from(
+      (_b = (_a = ref.current) == null ? void 0 : _a.querySelectorAll('[role="option"]:not([aria-disabled])')) != null ? _b : []
+    );
+  }, [ref]);
+  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 updateActiveDescendant = React.useCallback(
+    (element) => {
+      setActiveDescendant(element.id);
+      updateScroll(element);
+    },
+    [setActiveDescendant, updateScroll]
+  );
+  const selectItem = React.useCallback(
+    (element) => {
+      const newValue = element == null ? void 0 : element.dataset.value;
+      if (newValue) {
+        setSelectedItem(newValue);
+        updateActiveDescendant(element);
+      }
+    },
+    [setSelectedItem, updateActiveDescendant]
+  );
+  const focusAndMoveActive = (element) => {
+    setShowFocusRing(true);
+    updateActiveDescendant(element);
+  };
+  const focusFirstItem = () => {
+    const activeOptions = getOptions();
+    const firstItem = activeOptions[0];
+    if (firstItem) {
+      focusAndMoveActive(firstItem);
+    }
+  };
+  const focusLastItem = () => {
+    const activeOptions = getOptions();
+    const lastItem = activeOptions[activeOptions.length - 1];
+    if (lastItem) {
+      focusAndMoveActive(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;
+      if (event.type === "click") {
+        setShowFocusRing(false);
+      }
+      const activeOptions = getOptions();
+      const isActiveOption = activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;
+      if (newValue && selectedItem !== newValue && isActiveOption) {
+        selectItem(event.currentTarget);
+        onChange == null ? void 0 : onChange(event, { value: newValue });
+      }
+    },
+    [selectItem, selectedItem, onChange, getOptions]
+  );
+  const isSelected = React.useCallback(
+    (id2) => selectedItem === id2,
+    [selectedItem]
+  );
+  const isFocused = React.useCallback(
+    (id2) => activeDescendant === id2 && showFocusRing,
+    [activeDescendant, showFocusRing]
+  );
+  const getActiveItem = () => {
+    const activeOptions = getOptions();
+    const activeIndex = activeOptions.findIndex(
+      (i) => i.id === activeDescendant
+    );
+    return activeOptions[activeIndex !== -1 ? activeIndex : 0];
+  };
+  const blurHandler = () => {
+    setShowFocusRing(false);
+  };
+  const mouseDownHandler = () => {
+    setShowFocusRing(false);
+  };
+  const focusHandler = () => {
+    const activeElement = getActiveItem();
+    focusAndMoveActive(activeElement);
+  };
+  const keyDownHandler = (event) => {
+    const { key } = event;
+    const currentItem = getActiveItem();
+    let nextItem = currentItem;
+    if (!currentItem) {
+      return;
+    }
+    switch (key) {
+      case "ArrowUp":
+      case "ArrowDown":
+        nextItem = key === "ArrowUp" ? findPreviousOption(currentItem, 1) : findNextOption(currentItem, 1);
+        if (nextItem && nextItem !== currentItem) {
+          event.preventDefault();
+          focusAndMoveActive(nextItem);
+        }
+        break;
+      case "Home":
+        event.preventDefault();
+        focusFirstItem();
+        break;
+      case "End":
+        event.preventDefault();
+        focusLastItem();
+        break;
+      case " ":
+      case "Enter":
+        event.preventDefault();
+        nextItem && selectItem(nextItem);
+        break;
+    }
+  };
+  const contextValue = React.useMemo(
+    () => ({
+      disabled,
+      id,
+      select,
+      isSelected,
+      isFocused
+    }),
+    [disabled, id, select, isSelected, isFocused]
+  );
+  return {
+    focusHandler,
+    keyDownHandler,
+    blurHandler,
+    mouseDownHandler,
+    activeDescendant,
+    contextValue
+  };
+};
+
+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 {\n  KeyboardEvent,\n  RefObject,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useControlled } from \"@salt-ds/core\";\n\ninterface UseListProps {\n  /**\n   * If true, all items in list will be disabled.\n   */\n  disabled?: boolean;\n  /* Value for the uncontrolled version. */\n  selected?: string;\n  /* Initial value for the uncontrolled version. */\n  defaultSelected?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  id?: string;\n  ref: RefObject<HTMLUListElement>;\n}\n\nexport const useList = ({\n  disabled = false,\n  selected: selectedProp,\n  defaultSelected,\n  onChange,\n  id,\n  ref,\n}: UseListProps) => {\n  const [activeDescendant, setActiveDescendant] = useState<string | undefined>(\n    undefined\n  );\n\n  const [showFocusRing, setShowFocusRing] = useState<boolean>(false);\n  const [selectedItem, setSelectedItem] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected,\n    name: \"ListNext\",\n    state: \"selected\",\n  });\n\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 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 updateActiveDescendant = useCallback(\n    (element: HTMLElement) => {\n      setActiveDescendant(element.id);\n      updateScroll(element);\n    },\n    [setActiveDescendant, updateScroll]\n  );\n  const selectItem = useCallback(\n    (element: HTMLElement) => {\n      const newValue = element?.dataset.value;\n      if (newValue) {\n        setSelectedItem(newValue);\n        updateActiveDescendant(element);\n      }\n    },\n    [setSelectedItem, updateActiveDescendant]\n  );\n\n  const focusAndMoveActive = (element: HTMLElement) => {\n    setShowFocusRing(true);\n    updateActiveDescendant(element);\n  };\n\n  const focusFirstItem = () => {\n    // Find first active item\n    const activeOptions = getOptions();\n    const firstItem = activeOptions[0];\n    if (firstItem) {\n      focusAndMoveActive(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      focusAndMoveActive(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      if (event.type === \"click\") {\n        setShowFocusRing(false);\n      }\n      const activeOptions = getOptions();\n      const isActiveOption =\n        activeOptions.findIndex((i) => i.id === event.currentTarget.id) !== -1;\n      if (newValue && selectedItem !== newValue && isActiveOption) {\n        selectItem(event.currentTarget);\n        onChange?.(event, { value: newValue });\n      }\n    },\n    [selectItem, selectedItem, onChange, getOptions]\n  );\n\n  const isSelected = useCallback(\n    (id: string) => selectedItem === id,\n    [selectedItem]\n  );\n\n  const isFocused = useCallback(\n    (id: string | undefined) => activeDescendant === id && showFocusRing,\n    [activeDescendant, showFocusRing]\n  );\n\n  const getActiveItem = () => {\n    const activeOptions = getOptions();\n    const activeIndex = activeOptions.findIndex(\n      (i) => i.id === activeDescendant\n    );\n    return activeOptions[activeIndex !== -1 ? activeIndex : 0];\n  };\n\n  // HANDLERS\n  const blurHandler = () => {\n    setShowFocusRing(false);\n  };\n\n  const mouseDownHandler = () => {\n    // When list gets focused, we can't guarantee that focus happens after click event.\n    // If first focus (where !activeDescendant) happens from a click, list shouldn't render focus ring in the first element.\n    setShowFocusRing(false);\n  };\n\n  // takes care of focus when using keyboard navigation\n  const focusHandler = () => {\n    const activeElement = getActiveItem();\n    focusAndMoveActive(activeElement);\n  };\n\n  // takes care of keydown when using keyboard navigation\n  const keyDownHandler = (event: KeyboardEvent<HTMLUListElement>) => {\n    const { key } = event;\n    const currentItem = getActiveItem();\n    let nextItem = currentItem;\n    if (!currentItem) {\n      return;\n    }\n    switch (key) {\n      case \"ArrowUp\":\n      case \"ArrowDown\":\n        nextItem =\n          key === \"ArrowUp\"\n            ? findPreviousOption(currentItem, 1)\n            : findNextOption(currentItem, 1);\n\n        if (nextItem && nextItem !== currentItem) {\n          event.preventDefault();\n          focusAndMoveActive(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        nextItem && selectItem(nextItem);\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    }),\n    [disabled, id, select, isSelected, isFocused]\n  );\n\n  return {\n    focusHandler,\n    keyDownHandler,\n    blurHandler,\n    mouseDownHandler,\n    activeDescendant,\n    contextValue,\n  };\n};\n"],"names":["useState","useControlled","useCallback","id","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}\n\n.saltLogo svg {\n  fill: var(--salt-text-secondary-foreground);\n  stroke: none;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=Logo.css.js.map

package/dist-cjs/logo/Logo.js

@@ -6,55 +6,23 @@ 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 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 { className, ...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
-    }),
+  return /* @__PURE__ */ jsxRuntime.jsx("span", {
+    className: clsx.clsx(withBaseName(), className),
     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
-        )
-      })
-    ]
+    ...rest
   });
 });
 

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 { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport logoCss from \"./Logo.css\";\n\nexport type LogoProps = ComponentPropsWithoutRef<\"span\">;\n\nconst withBaseName = makePrefixer(\"saltLogo\");\n\nexport const Logo = forwardRef<HTMLSpanElement, LogoProps>(function Logo(\n  props,\n  ref\n) {\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"],"names":["makePrefixer","forwardRef","Logo","useWindow","useComponentCssInjection","logoCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,UAAU,CAAA,CAAA;AAErC,MAAM,IAAO,GAAAC,gBAAA,CAAuC,SAASC,KAAAA,CAClE,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,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;AAED,EAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,IAAK,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAAW,GAAG,IAAA;AAAA,GAAM,CAAA,CAAA;AAE1E,CAAC;;;;"}

package/dist-cjs/logo/LogoImage.js

@@ -0,0 +1,24 @@
+'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');
+
+const withBaseName = core.makePrefixer("saltLogoImage");
+const LogoImage = React.forwardRef(
+  function LogoImage2(props, ref) {
+    const { className, alt, ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx("img", {
+      ...rest,
+      alt,
+      className: clsx.clsx(withBaseName(), className),
+      ref
+    });
+  }
+);
+
+exports.LogoImage = LogoImage;
+//# sourceMappingURL=LogoImage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoImage.js","sources":["../src/logo/LogoImage.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\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    return (\n      <img\n        {...rest}\n        alt={alt}\n        className={clsx(withBaseName(), className)}\n        ref={ref}\n      />\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","LogoImage","jsx","clsx"],"mappings":";;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA;AAAA,EACvB,SAASC,UAAU,CAAA,KAAA,EAAO,GAAK,EAAA;AAC7B,IAAA,MAAM,EAAE,SAAA,EAAW,GAAQ,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEpC,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MACA,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Styles for LogoSeparator */\n.saltLogoSeparator {\n  height: var(--salt-size-separator-height);\n  margin: 0 var(--salt-spacing-100);\n  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=LogoSeparator.css.js.map

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

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

package/dist-cjs/logo/LogoSeparator.js

@@ -0,0 +1,32 @@
+'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 window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var LogoSeparator$1 = require('./LogoSeparator.css.js');
+
+const withBaseName = core.makePrefixer("saltLogoSeparator");
+const LogoSeparator = React.forwardRef(
+  function LogoSeparator2(props, ref) {
+    const { className, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-logo-separator",
+      css: LogoSeparator$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("span", {
+      ...rest,
+      className: clsx.clsx(withBaseName(), className),
+      ref
+    });
+  }
+);
+
+exports.LogoSeparator = LogoSeparator;
+//# sourceMappingURL=LogoSeparator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoSeparator.js","sources":["../src/logo/LogoSeparator.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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":["makePrefixer","forwardRef","LogoSeparator","useWindow","useComponentCssInjection","logoSeparatorCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAM,MAAA,EAAE,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,MAAA,EAAA;AAAA,MAAM,GAAG,IAAA;AAAA,MAAM,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,KAAU,CAAA,CAAA;AAAA,GAE1E;AACF;;;;"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = "/* Style applied to the root element */\n.saltMultilineInput {\n  --multilineInput-borderColor: var(--salt-editable-borderColor);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle);\n  --multilineInput-outlineColor: var(--salt-focused-outlineColor);\n  --multilineInput-paddingLeft: var(--salt-spacing-100);\n  --multilineInput-border: none;\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--multilineInput-background);\n  border: var(--multilineInput-border);\n  color: var(--salt-text-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: auto;\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  padding-inline: var(--salt-spacing-100);\n  position: relative;\n  width: 100%;\n}\n\n/* Style applied on hover */\n.saltMultilineInput:hover {\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --multilineInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--multilineInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Style applied when active */\n.saltMultilineInput:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-active);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--multilineInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltMultilineInput-primary {\n  --multilineInput-background: var(--salt-editable-primary-background);\n  --multilineInput-background-active: var(--salt-editable-primary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-primary-background-hover);\n  --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltMultilineInput-secondary {\n  --multilineInput-background: var(--salt-editable-secondary-background);\n  --multilineInput-background-active: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-hover: var(--salt-editable-secondary-background-active);\n  --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltMultilineInput-error,\n.saltMultilineInput-error:hover {\n  --multilineInput-background: var(--salt-status-error-background);\n  --multilineInput-background-active: var(--salt-status-error-background);\n  --multilineInput-background-hover: var(--salt-status-error-background);\n  --multilineInput-borderColor: var(--salt-status-error-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltMultilineInput-warning,\n.saltMultilineInput-warning:hover {\n  --multilineInput-background: var(--salt-status-warning-background);\n  --multilineInput-background-active: var(--salt-status-warning-background);\n  --multilineInput-background-hover: var(--salt-status-warning-background);\n  --multilineInput-borderColor: var(--salt-status-warning-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltMultilineInput-success,\n.saltMultilineInput-success:hover {\n  --multilineInput-background: var(--salt-status-success-background);\n  --multilineInput-background-active: var(--salt-status-success-background);\n  --multilineInput-background-hover: var(--salt-status-success-background);\n  --multilineInput-borderColor: var(--salt-status-success-borderColor);\n  --multilineInput-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner textarea element */\n.saltMultilineInput-textarea {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  letter-spacing: 0;\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  resize: none;\n  padding: var(--salt-spacing-100) 0;\n  text-align: var(--multilineInput-textAlign);\n  width: 100%;\n}\n\n/* Reset in the  class */\n.saltMultilineInput-textarea:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltMultilineInput-textarea::selection {\n  background: var(--salt-text-background-selected);\n}\n\n/* Styling when focused */\n.saltMultilineInput-focused {\n  --multilineInput-borderColor: var(--multilineInput-outlineColor);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor);\n}\n\n/* Style applied if `readOnly={true}` */\n.saltMultilineInput.saltMultilineInput-readOnly,\n.saltMultilineInput.saltMultilineInput-readOnly:active,\n.saltMultilineInput.saltMultilineInput-readOnly:hover {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n  --multilineInput-paddingLeft: 0;\n\n  background: var(--multilineInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Style applied to selected text if `disabled={true}` */\n.saltMultilineInput-disabled .saltMultilineInput-textarea::selection {\n  background: none;\n}\n\n/* Style applied when `disabled={true}` */\n.saltMultilineInput-disabled,\n.saltMultilineInput-disabled:hover,\n.saltMultilineInput-disabled:active {\n  --multilineInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --multilineInput-activationIndicator-borderWidth: var(--salt-size-border);\n\n  background: var(--multilineInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Style for activation indicator */\n.saltMultilineInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor);\n}\n\n/* Style applied if `fullBorder={true}` */\n.saltMultilineInput.saltMultilineInput-fullBorder {\n  --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor);\n  --multilineInput-paddingLeft: var(--salt-spacing-100);\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied if active or focused when `fullBorder={true}` */\n.saltMultilineInput-fullBorder:active,\n.saltMultilineInput-fullBorder.saltMultilineInput-focused {\n  --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `fullBorder={true}` */\n.saltMultilineInput-fullBorder.saltMultilineInput-readOnly:hover,\n.saltMultilineInput-fullBorder.saltMultilineInput-disabled:hover {\n  --multilineInput-activationIndicator-borderWidth: 0;\n}\n\n/* Style applied to adornment containers */\n.saltMultilineInput-endAdornmentContainer,\n.saltMultilineInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to start adornment container */\n.saltMultilineInput-startAdornmentContainer {\n  align-self: self-start;\n  padding-right: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornment container */\n.saltMultilineInput-endAdornmentContainer {\n  align-self: self-end;\n  padding-left: var(--salt-spacing-100);\n}\n\n/* Style applied to status adornment container */\n.saltMultilineInput-statusAdornmentContainer {\n  align-self: self-end;\n  display: inline-flex;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n}\n\n/* Style applied to button start adornment if first child */\n.saltMultilineInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Style applied to button end adornment if last child */\n.saltMultilineInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n/* Styles for button adornment */\n.saltMultilineInput .saltButton {\n  --saltButton-padding: 0;\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-50));\n  --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-50));\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=MultilineInput.css.js.map

package/dist-cjs/multiline-input/MultilineInput.css.js.map

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

package/dist-cjs/multiline-input/MultilineInput.js

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var MultilineInput$1 = require('./MultilineInput.css.js');
+
+const withBaseName = core.makePrefixer("saltMultilineInput");
+const MultilineInput = React.forwardRef(
+  function MultilineInput2({
+    "aria-activedescendant": ariaActiveDescendant,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": ariaOwns,
+    className: classNameProp,
+    disabled,
+    endAdornment,
+    fullBorder = false,
+    id,
+    textAreaProps = {},
+    textAreaRef,
+    placeholder,
+    readOnly,
+    role,
+    rows = 3,
+    startAdornment,
+    value: valueProp,
+    defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
+    validationStatus: validationStatusProp,
+    variant = "primary",
+    ...other
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-multiline-input",
+      css: MultilineInput$1,
+      window: targetWindow
+    });
+    const restA11yProps = {
+      "aria-activedescendant": ariaActiveDescendant,
+      "aria-expanded": ariaExpanded,
+      "aria-owns": ariaOwns
+    };
+    const [focused, setFocused] = React.useState(false);
+    const {
+      "aria-describedby": textAreaDescribedBy,
+      "aria-labelledby": textAreaLabelledBy,
+      onBlur,
+      onChange,
+      onFocus,
+      required: textAreaRequired,
+      ...restTextAreaProps
+    } = textAreaProps;
+    const {
+      a11yProps: {
+        "aria-describedby": formFieldDescribedBy,
+        "aria-labelledby": formFieldLabelledBy
+      } = {},
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly,
+      necessity: formFieldRequired,
+      validationStatus: formFieldValidationStatus
+    } = core.useFormFieldProps();
+    const isDisabled = disabled || formFieldDisabled;
+    const isReadOnly = readOnly || formFieldReadOnly;
+    const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
+    const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : textAreaRequired;
+    const [value, setValue] = core.useControlled({
+      controlled: valueProp,
+      default: defaultValueProp,
+      name: "MultilineInput",
+      state: "value"
+    });
+    const handleChange = (event) => {
+      const value2 = event.target.value;
+      setValue(value2);
+      onChange == null ? void 0 : onChange(event);
+    };
+    const handleBlur = (event) => {
+      onBlur == null ? void 0 : onBlur(event);
+      setFocused(false);
+    };
+    const handleFocus = (event) => {
+      onFocus == null ? void 0 : onFocus(event);
+      setFocused(true);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: clsx.clsx(
+        withBaseName(),
+        withBaseName(variant),
+        {
+          [withBaseName("fullBorder")]: fullBorder,
+          [withBaseName("focused")]: !isDisabled && !isReadOnly && focused,
+          [withBaseName("disabled")]: isDisabled,
+          [withBaseName("readOnly")]: isReadOnly,
+          [withBaseName(validationStatus || "")]: validationStatus
+        },
+        classNameProp
+      ),
+      ref,
+      ...other,
+      children: [
+        startAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: withBaseName("startAdornmentContainer"),
+          children: startAdornment
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("textarea", {
+          "aria-describedby": clsx.clsx(formFieldDescribedBy, textAreaDescribedBy),
+          "aria-labelledby": clsx.clsx(formFieldLabelledBy, textAreaLabelledBy),
+          className: clsx.clsx(withBaseName("textarea"), textAreaProps == null ? void 0 : textAreaProps.className),
+          disabled: isDisabled,
+          id,
+          readOnly: isReadOnly,
+          ref: textAreaRef,
+          required: isRequired,
+          role,
+          rows,
+          tabIndex: isReadOnly || isDisabled ? -1 : 0,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          onFocus: !isDisabled && !isReadOnly ? handleFocus : void 0,
+          placeholder,
+          value,
+          ...restA11yProps,
+          ...restTextAreaProps
+        }),
+        !isDisabled && !isReadOnly && validationStatus && /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: withBaseName("statusAdornmentContainer"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(core.StatusAdornment, {
+            status: validationStatus
+          })
+        }),
+        endAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: withBaseName("endAdornmentContainer"),
+          children: endAdornment
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: withBaseName("activationIndicator")
+        })
+      ]
+    });
+  }
+);
+
+exports.MultilineInput = MultilineInput;
+//# sourceMappingURL=MultilineInput.js.map

package/dist-cjs/multiline-input/MultilineInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultilineInput.js","sources":["../src/multiline-input/MultilineInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  ChangeEvent,\n  ComponentPropsWithoutRef,\n  FocusEvent,\n  forwardRef,\n  ReactNode,\n  Ref,\n  TextareaHTMLAttributes,\n  useState,\n} from \"react\";\nimport {\n  makePrefixer,\n  StatusAdornment,\n  useControlled,\n  useFormFieldProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport multilineInputCss from \"./MultilineInput.css\";\n\nconst withBaseName = makePrefixer(\"saltMultilineInput\");\n\nexport interface MultilineInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"defaultValue\">,\n    Pick<\n      ComponentPropsWithoutRef<\"input\">,\n      \"disabled\" | \"value\" | \"defaultValue\" | \"placeholder\"\n    > {\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * Styling variant with full border. Defaults to false\n   */\n  fullBorder?: boolean;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#Attributes) applied to the `textarea` element.\n   */\n  textAreaProps?: TextareaHTMLAttributes<HTMLTextAreaElement>;\n  /**\n   * Optional ref for the textarea component\n   */\n  textAreaRef?: Ref<HTMLTextAreaElement>;\n  /**\n   * If `true`, the component is read only.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * Validation status.\n   */\n  validationStatus?: \"error\" | \"warning\" | \"success\";\n  /**\n   * Styling variant. Defaults to \"primary\".\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * Number of rows. Defaults to 3\n   */\n  rows?: number;\n}\n\nexport const MultilineInput = forwardRef<HTMLDivElement, MultilineInputProps>(\n  function MultilineInput(\n    {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n      className: classNameProp,\n      disabled,\n      endAdornment,\n      fullBorder = false,\n      id,\n      textAreaProps = {},\n      textAreaRef,\n      placeholder,\n      readOnly,\n      role,\n      rows = 3,\n      startAdornment,\n      value: valueProp,\n      defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n      validationStatus: validationStatusProp,\n      variant = \"primary\",\n      ...other\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-multiline-input\",\n      css: multilineInputCss,\n      window: targetWindow,\n    });\n\n    const restA11yProps = {\n      \"aria-activedescendant\": ariaActiveDescendant,\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": ariaOwns,\n    };\n\n    const [focused, setFocused] = useState(false);\n\n    const {\n      \"aria-describedby\": textAreaDescribedBy,\n      \"aria-labelledby\": textAreaLabelledBy,\n      onBlur,\n      onChange,\n      onFocus,\n      required: textAreaRequired,\n      ...restTextAreaProps\n    } = textAreaProps;\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isDisabled = disabled || formFieldDisabled;\n    const isReadOnly = readOnly || formFieldReadOnly;\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : undefined ?? textAreaRequired;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default: defaultValueProp,\n      name: \"MultilineInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      onChange?.(event);\n    };\n\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onBlur?.(event);\n      setFocused(false);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onFocus?.(event);\n      setFocused(true);\n    };\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          withBaseName(variant),\n          {\n            [withBaseName(\"fullBorder\")]: fullBorder,\n            [withBaseName(\"focused\")]: !isDisabled && !isReadOnly && focused,\n            [withBaseName(\"disabled\")]: isDisabled,\n            [withBaseName(\"readOnly\")]: isReadOnly,\n            [withBaseName(validationStatus || \"\")]: validationStatus,\n          },\n          classNameProp\n        )}\n        ref={ref}\n        {...other}\n      >\n        {startAdornment && (\n          <div className={withBaseName(\"startAdornmentContainer\")}>\n            {startAdornment}\n          </div>\n        )}\n        <textarea\n          aria-describedby={clsx(formFieldDescribedBy, textAreaDescribedBy)}\n          aria-labelledby={clsx(formFieldLabelledBy, textAreaLabelledBy)}\n          className={clsx(withBaseName(\"textarea\"), textAreaProps?.className)}\n          disabled={isDisabled}\n          id={id}\n          readOnly={isReadOnly}\n          ref={textAreaRef}\n          required={isRequired}\n          role={role}\n          rows={rows}\n          tabIndex={isReadOnly || isDisabled ? -1 : 0}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onFocus={!isDisabled && !isReadOnly ? handleFocus : undefined}\n          placeholder={placeholder}\n          value={value}\n          {...restA11yProps}\n          {...restTextAreaProps}\n        />\n        {!isDisabled && !isReadOnly && validationStatus && (\n          <div className={withBaseName(\"statusAdornmentContainer\")}>\n            <StatusAdornment status={validationStatus} />\n          </div>\n        )}\n        {endAdornment && (\n          <div className={withBaseName(\"endAdornmentContainer\")}>\n            {endAdornment}\n          </div>\n        )}\n        <div className={withBaseName(\"activationIndicator\")} />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","MultilineInput","useWindow","useComponentCssInjection","multilineInputCss","useState","useFormFieldProps","useControlled","value","jsxs","clsx","jsx","StatusAdornment"],"mappings":"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"}