@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.71

package/dist-cjs/tokenized-input/TokenizedInputBase.js

@@ -0,0 +1,305 @@
+'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 deepmerge = require('deepmerge');
+var react = require('react');
+var InputLegacy = require('../input-legacy/InputLegacy.js');
+require('../input-legacy/StaticInputAdornment.js');
+var InputPill = require('./internal/InputPill.js');
+var InputRuler = require('./internal/InputRuler.js');
+var calcFirstHiddenIndex = require('./internal/calcFirstHiddenIndex.js');
+var defaultItemToString = require('./internal/defaultItemToString.js');
+var useResizeObserver = require('./internal/useResizeObserver.js');
+var useWidth = require('./internal/useWidth.js');
+var TokenizedInput = require('./TokenizedInput.css.js');
+
+const INITIAL_INPUT_WIDTH = 5;
+const withBaseName = core.makePrefixer("saltTokenizedInput");
+const getItemsAriaLabel = (itemCount) => itemCount === 0 ? "no item selected" : `${itemCount} ${itemCount > 1 ? "items" : "item"}`;
+function hasHelpers(helpers) {
+  if (process.env.NODE_ENV !== "production") {
+    if (helpers == null) {
+      console.warn(
+        'TokenizedInputBase is used without helpers. You should pass in "helpers" from "useTokenizedInput".'
+      );
+    }
+  }
+  return helpers != null;
+}
+const TokenizedInputBase = react.forwardRef(function TokenizedInputBase2(props, ref) {
+  const {
+    InputProps = {},
+    ExpandButtonProps = {},
+    className,
+    activeIndices = [],
+    selectedItems = [],
+    highlightedIndex,
+    value,
+    focused,
+    expanded,
+    disabled,
+    helpers,
+    onFocus,
+    onBlur,
+    onKeyUp,
+    onKeyDown,
+    onRemoveItem,
+    onInputChange,
+    onInputFocus,
+    onInputBlur,
+    onInputSelect,
+    onClear,
+    onClick,
+    inputRef,
+    itemToString = defaultItemToString.defaultItemToString,
+    id: idProp,
+    expandButtonRef: expandButtonRefProp,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...restProps
+  } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-tokenized-input",
+    css: TokenizedInput,
+    window: targetWindow
+  });
+  const density = core.useDensity();
+  const { OverflowIcon, CloseIcon } = core.useIcon();
+  const id = core.useId(idProp);
+  const inputId = `${id}-input`;
+  const expandButtonId = `${id}-expand-button`;
+  const clearButtonId = `${id}-clear-button`;
+  const pillGroupPadding = 16;
+  const pillsRef = react.useRef({});
+  const inputRulerRef = react.useRef(null);
+  const keydownExpandButton = react.useRef(false);
+  const [expandButtonRef, expandButtonWidth] = useWidth.useWidth(density);
+  const [clearButtonRef, clearButtonWidth] = useWidth.useWidth(density);
+  const [inputWidth, setInputWidth] = react.useState(INITIAL_INPUT_WIDTH);
+  const [pillGroupWidth, setPillGroupWidth] = react.useState(null);
+  const [firstHiddenIndex, setFirstHiddenIndex] = react.useState(null);
+  const showExpandButton = !expanded && firstHiddenIndex != null;
+  const widthOffset = pillGroupPadding + INITIAL_INPUT_WIDTH + (expanded ? clearButtonWidth : expandButtonWidth);
+  const containerRef = useResizeObserver.useResizeObserver(
+    react.useCallback(
+      ([{ contentRect }]) => {
+        setPillGroupWidth(contentRect.width - widthOffset);
+      },
+      [widthOffset]
+    )
+  );
+  core.useIsomorphicLayoutEffect(
+    () => () => {
+      setFirstHiddenIndex(null);
+    },
+    [density]
+  );
+  core.useIsomorphicLayoutEffect(
+    () => {
+      if (expanded) {
+        setFirstHiddenIndex(null);
+      } else if (pillGroupWidth != null) {
+        setFirstHiddenIndex(
+          calcFirstHiddenIndex.calcFirstHiddenIndex({
+            containerWidth: pillGroupWidth,
+            pillWidths: Object.values(pillsRef.current).filter(
+              Boolean
+            )
+          })
+        );
+      }
+    },
+    // Additional dependency on selectedItems is for the controlled version
+    [expanded, pillGroupWidth, selectedItems]
+  );
+  core.useIsomorphicLayoutEffect(() => {
+    if (expanded && inputRulerRef.current) {
+      const newInputWidth = inputRulerRef.current.scrollWidth;
+      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));
+    }
+  }, [expanded, pillGroupWidth, value]);
+  const handleExpandButtonKeyDown = (event) => {
+    const singleChar = event.key.length === 1;
+    const triggerExpand = [
+      "CONTROL",
+      "META",
+      "ENTER",
+      "BACKSPACE",
+      "ARROWDOWN",
+      "ARROWLEFT",
+      "ARROWRIGHT"
+    ].indexOf(event.key.toUpperCase()) !== -1;
+    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      helpers.updateExpanded(true);
+      keydownExpandButton.current = true;
+    }
+  };
+  const handleInputKeyUp = (event) => {
+    if (keydownExpandButton.current && "Enter" !== event.key) {
+      keydownExpandButton.current = false;
+      if (onKeyDown) {
+        onKeyDown(event);
+      }
+    }
+    if (onKeyUp) {
+      onKeyUp(event);
+    }
+  };
+  const handleExpand = (event) => {
+    event.stopPropagation();
+    if (hasHelpers(helpers)) {
+      helpers.updateExpanded(true);
+    }
+  };
+  const handleClearButtonFocus = (event) => {
+    event.stopPropagation();
+    if (hasHelpers(helpers)) {
+      helpers.setFocused(false);
+      helpers.cancelBlur();
+    }
+  };
+  const selectedItemIds = selectedItems.map(
+    (_, index) => `${id}-pill-${index}`
+  );
+  const inputAriaLabelledBy = disabled ? [ariaLabelledBy, inputId, ...selectedItemIds] : [ariaLabelledBy, inputId];
+  const mergedInputProps = deepmerge(
+    {
+      inputProps: {
+        style: {
+          width: inputWidth,
+          minWidth: inputWidth
+        },
+        "aria-label": [ariaLabel, getItemsAriaLabel(selectedItems.length)].filter(Boolean).join(" "),
+        "aria-labelledby": inputAriaLabelledBy.filter(Boolean).join(" "),
+        "aria-activedescendant": highlightedIndex && highlightedIndex >= 0 ? `${id}-pill-${highlightedIndex}` : void 0
+      }
+    },
+    InputProps
+  );
+  const {
+    accessibleText: expandButtonAccessibleText,
+    ...restExpandButtonProps
+  } = ExpandButtonProps;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ...restProps,
+      className: clsx.clsx(
+        withBaseName(),
+        {
+          [withBaseName("focused")]: focused,
+          [withBaseName("expanded")]: expanded,
+          [withBaseName("disabled")]: disabled
+        },
+        className
+      ),
+      id,
+      onClick,
+      ref: core.useForkRef(ref, containerRef),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-owns": selectedItemIds.join(" "),
+            className: withBaseName("hidden"),
+            role: "listbox"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("pillGroup"), children: [
+          selectedItems.map((item, index) => {
+            const label = itemToString(item);
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              InputPill.InputPill,
+              {
+                active: activeIndices.indexOf(index) !== -1,
+                disabled,
+                hidden: showExpandButton && index >= firstHiddenIndex,
+                highlighted: index === highlightedIndex,
+                id: `${id}-pill-${index}`,
+                index,
+                label,
+                lastVisible: !showExpandButton && index === selectedItems.length - 1,
+                onDelete: expanded ? onRemoveItem : void 0,
+                pillsRef
+              },
+              `${index}-${label}`
+            );
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            core.Button,
+            {
+              "aria-labelledby": [ariaLabelledBy, inputId, expandButtonId].filter(Boolean).join(" "),
+              className: clsx.clsx(withBaseName("expandButton"), {
+                [withBaseName("hidden")]: !showExpandButton
+              }),
+              disabled,
+              id: expandButtonId,
+              onBlur,
+              onClick: handleExpand,
+              onFocus,
+              onKeyDown: handleExpandButtonKeyDown,
+              ref: core.useForkRef(expandButtonRef, expandButtonRefProp),
+              variant: "secondary",
+              ...restExpandButtonProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                OverflowIcon,
+                {
+                  "aria-label": expandButtonAccessibleText === void 0 ? "expand edit" : expandButtonAccessibleText
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            InputLegacy.InputLegacy,
+            {
+              ...mergedInputProps,
+              className: clsx.clsx(withBaseName("input"), withBaseName("inputField"), {
+                [withBaseName("hidden")]: showExpandButton
+              }),
+              disabled,
+              id: inputId,
+              onBlur: onInputBlur,
+              onChange: onInputChange,
+              onFocus: onInputFocus,
+              onKeyDown,
+              onKeyUp: handleInputKeyUp,
+              onSelect: onInputSelect,
+              renderSuffix: () => /* @__PURE__ */ jsxRuntime.jsx(InputRuler.InputRuler, { ref: inputRulerRef, value }),
+              value,
+              ref: inputRef
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          core.Button,
+          {
+            className: clsx.clsx(withBaseName("clearButton"), {
+              [withBaseName("hidden")]: !expanded || selectedItems.length === 0
+            }),
+            disabled,
+            id: clearButtonId,
+            onBlur,
+            onClick: onClear,
+            onFocus: handleClearButtonFocus,
+            ref: clearButtonRef,
+            variant: "secondary",
+            "data-testid": "clear-button",
+            children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, { "aria-label": "clear input" })
+          }
+        )
+      ]
+    }
+  );
+});
+
+exports.TokenizedInputBase = TokenizedInputBase;
+//# sourceMappingURL=TokenizedInputBase.js.map

package/dist-cjs/tokenized-input/TokenizedInputBase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenizedInputBase.js","sources":["../src/tokenized-input/TokenizedInputBase.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  makePrefixer,\n  useDensity,\n  useForkRef,\n  useIcon,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport deepmerge from \"deepmerge\";\nimport {\n  type ChangeEventHandler,\n  type FocusEvent,\n  type FocusEventHandler,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type KeyboardEventHandler,\n  type ReactElement,\n  type ReactEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  InputLegacy as Input,\n  type InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { InputPill } from \"./internal/InputPill\";\nimport { InputRuler } from \"./internal/InputRuler\";\nimport { calcFirstHiddenIndex } from \"./internal/calcFirstHiddenIndex\";\nimport { defaultItemToString } from \"./internal/defaultItemToString\";\nimport { useResizeObserver } from \"./internal/useResizeObserver\";\nimport { useWidth } from \"./internal/useWidth\";\nimport type {\n  TokenizedInputHelpers,\n  TokenizedInputState,\n} from \"./useTokenizedInput\";\n\nimport tokenizedInputCss from \"./TokenizedInput.css\";\n\nexport type RemoveItemHandler = (itemIndex: number) => void;\nexport type ItemToString<Item> = (item: Item) => string;\nexport type ExpandButtonProps = Pick<\n  ButtonProps,\n  \"role\" | \"aria-roledescription\" | \"aria-describedby\"\n> & { accessibleText?: string };\n\nexport interface TokenizedInputBaseProps<Item>\n  extends Partial<TokenizedInputState<Item>>,\n    Omit<\n      HTMLAttributes<HTMLDivElement>,\n      \"onFocus\" | \"onBlur\" | \"onChange\" | \"onKeyUp\" | \"onKeyDown\"\n    > {\n  ExpandButtonProps?: ExpandButtonProps;\n  InputProps?: Pick<InputProps, \"aria-describedby\" | \"inputProps\">;\n  disabled?: boolean;\n  expandButtonRef?: Ref<HTMLButtonElement>;\n  helpers: TokenizedInputHelpers<Item>;\n  inputRef?: Ref<HTMLInputElement>;\n  itemToString?: ItemToString<Item>;\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n  // Can key down on either input or expand button\n  onKeyDown?: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  onRemoveItem?: RemoveItemHandler;\n  onInputBlur?: FocusEventHandler<HTMLInputElement>;\n  onInputFocus?: FocusEventHandler<HTMLInputElement>;\n  onInputChange?: ChangeEventHandler<HTMLInputElement>;\n  onInputSelect?: ReactEventHandler<HTMLInputElement>;\n  onClick?: (event: SyntheticEvent<HTMLElement>) => void;\n  onClear?: ReactEventHandler;\n}\n\nconst INITIAL_INPUT_WIDTH = 5;\nconst withBaseName = makePrefixer(\"saltTokenizedInput\");\n\nconst getItemsAriaLabel = (itemCount: number) =>\n  itemCount === 0\n    ? \"no item selected\"\n    : `${itemCount} ${itemCount > 1 ? \"items\" : \"item\"}`;\n\nfunction hasHelpers<Item>(helpers: TokenizedInputHelpers<Item>) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (helpers == null) {\n      console.warn(\n        'TokenizedInputBase is used without helpers. You should pass in \"helpers\" from \"useTokenizedInput\".',\n      );\n    }\n  }\n  return helpers != null;\n}\n\nexport const TokenizedInputBase = forwardRef(function TokenizedInputBase<Item>(\n  props: TokenizedInputBaseProps<Item>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const {\n    InputProps = {},\n    ExpandButtonProps = {},\n    className,\n    activeIndices = [],\n    selectedItems = [],\n    highlightedIndex,\n    value,\n    focused,\n    expanded,\n    disabled,\n    helpers,\n    onFocus,\n    onBlur,\n    onKeyUp,\n    onKeyDown,\n    onRemoveItem,\n    onInputChange,\n    onInputFocus,\n    onInputBlur,\n    onInputSelect,\n    onClear,\n    onClick,\n    inputRef,\n    itemToString = defaultItemToString,\n    id: idProp,\n    expandButtonRef: expandButtonRefProp,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    ...restProps\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tokenized-input\",\n    css: tokenizedInputCss,\n    window: targetWindow,\n  });\n\n  const density = useDensity();\n  const { OverflowIcon, CloseIcon } = useIcon();\n  const id = useId(idProp);\n  const inputId = `${id}-input`;\n  const expandButtonId = `${id}-expand-button`;\n  const clearButtonId = `${id}-clear-button`;\n\n  // TODO: Use proper machanism to get variable values from theme in React. Something like below\n  // getComputedStyle(document.documentElement)\n  // .getPropertyValue('--my-variable-name'); // #999999\n  const pillGroupPadding = 16;\n  const lastVisiblePillMargin = 4;\n\n  const pillsRef = useRef<{ [index: number]: number | undefined }>({});\n  const inputRulerRef = useRef<HTMLSpanElement | null>(null);\n  const keydownExpandButton = useRef(false);\n\n  const [expandButtonRef, expandButtonWidth] = useWidth(density);\n  const [clearButtonRef, clearButtonWidth] = useWidth(density);\n  const [inputWidth, setInputWidth] = useState(INITIAL_INPUT_WIDTH);\n  const [pillGroupWidth, setPillGroupWidth] = useState<number | null>(null);\n  const [firstHiddenIndex, setFirstHiddenIndex] = useState<number | null>(null);\n\n  const showExpandButton = !expanded && firstHiddenIndex != null;\n\n  const widthOffset =\n    pillGroupPadding +\n    INITIAL_INPUT_WIDTH +\n    (expanded ? clearButtonWidth : expandButtonWidth);\n\n  const containerRef = useResizeObserver<HTMLDivElement>(\n    useCallback(\n      ([{ contentRect }]) => {\n        setPillGroupWidth(contentRect.width - widthOffset);\n      },\n      [widthOffset],\n    ),\n  );\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      // When density changes, set hidden index to null so that pills are in their\n      // readonly state before they are measured.\n      setFirstHiddenIndex(null);\n    },\n    [density],\n  );\n\n  // useLayoutEffect because of potential layout change\n  // We want to do that before paint to avoid layout jumps\n  useIsomorphicLayoutEffect(\n    () => {\n      if (expanded) {\n        setFirstHiddenIndex(null);\n      } else if (pillGroupWidth != null) {\n        setFirstHiddenIndex(\n          calcFirstHiddenIndex({\n            containerWidth: pillGroupWidth,\n            pillWidths: Object.values(pillsRef.current).filter(\n              Boolean,\n            ) as number[],\n          }),\n        );\n      }\n    },\n    // Additional dependency on selectedItems is for the controlled version\n    [expanded, pillGroupWidth, selectedItems],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (expanded && inputRulerRef.current) {\n      const newInputWidth = inputRulerRef.current.scrollWidth;\n      setInputWidth(Math.min(newInputWidth, pillGroupWidth || 0));\n    }\n  }, [expanded, pillGroupWidth, value]);\n\n  const handleExpandButtonKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n  ) => {\n    const singleChar = event.key.length === 1;\n    const triggerExpand =\n      [\n        \"CONTROL\",\n        \"META\",\n        \"ENTER\",\n        \"BACKSPACE\",\n        \"ARROWDOWN\",\n        \"ARROWLEFT\",\n        \"ARROWRIGHT\",\n      ].indexOf(event.key.toUpperCase()) !== -1;\n\n    if ((singleChar || triggerExpand) && hasHelpers(helpers)) {\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n      helpers.updateExpanded(true);\n      keydownExpandButton.current = true;\n    }\n  };\n\n  const handleInputKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n    // Call keydown again if the initail event has been used to expand the input\n    if (keydownExpandButton.current && \"Enter\" !== event.key) {\n      keydownExpandButton.current = false;\n\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n    }\n\n    if (onKeyUp) {\n      onKeyUp(event);\n    }\n  };\n\n  const handleExpand = (event: SyntheticEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.updateExpanded(true);\n    }\n  };\n\n  const handleClearButtonFocus = (event: FocusEvent<HTMLButtonElement>) => {\n    event.stopPropagation();\n\n    if (hasHelpers(helpers)) {\n      helpers.setFocused(false);\n      helpers.cancelBlur();\n    }\n  };\n\n  const selectedItemIds = selectedItems.map(\n    (_, index) => `${id}-pill-${index}`,\n  );\n\n  const inputAriaLabelledBy = disabled\n    ? [ariaLabelledBy, inputId, ...selectedItemIds]\n    : [ariaLabelledBy, inputId];\n\n  const mergedInputProps = deepmerge(\n    {\n      inputProps: {\n        style: {\n          width: inputWidth,\n          minWidth: inputWidth,\n        },\n        \"aria-label\": [ariaLabel, getItemsAriaLabel(selectedItems.length)]\n          .filter(Boolean)\n          .join(\" \"),\n        \"aria-labelledby\": inputAriaLabelledBy.filter(Boolean).join(\" \"),\n        \"aria-activedescendant\":\n          highlightedIndex && highlightedIndex >= 0\n            ? `${id}-pill-${highlightedIndex}`\n            : undefined,\n      },\n    },\n    InputProps,\n  );\n\n  const {\n    accessibleText: expandButtonAccessibleText,\n    ...restExpandButtonProps\n  } = ExpandButtonProps;\n\n  return (\n    <div\n      {...restProps}\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"focused\")]: focused,\n          [withBaseName(\"expanded\")]: expanded,\n          [withBaseName(\"disabled\")]: disabled,\n        },\n        className,\n      )}\n      id={id}\n      onClick={onClick}\n      ref={useForkRef(ref, containerRef)}\n    >\n      <span\n        aria-owns={selectedItemIds.join(\" \")}\n        className={withBaseName(\"hidden\")}\n        role=\"listbox\"\n      />\n      <div className={withBaseName(\"pillGroup\")}>\n        {selectedItems.map((item, index) => {\n          const label = itemToString(item);\n\n          return (\n            <InputPill\n              active={activeIndices.indexOf(index) !== -1}\n              disabled={disabled}\n              hidden={showExpandButton && index >= firstHiddenIndex}\n              highlighted={index === highlightedIndex}\n              id={`${id}-pill-${index}`}\n              index={index}\n              key={`${index}-${label}`}\n              label={label}\n              lastVisible={\n                !showExpandButton && index === selectedItems.length - 1\n              }\n              onDelete={expanded ? onRemoveItem : undefined}\n              pillsRef={pillsRef}\n            />\n          );\n        })}\n        <Button\n          aria-labelledby={[ariaLabelledBy, inputId, expandButtonId]\n            .filter(Boolean)\n            .join(\" \")}\n          className={clsx(withBaseName(\"expandButton\"), {\n            [withBaseName(\"hidden\")]: !showExpandButton,\n          })}\n          disabled={disabled}\n          id={expandButtonId}\n          onBlur={onBlur}\n          onClick={handleExpand}\n          onFocus={onFocus}\n          onKeyDown={handleExpandButtonKeyDown}\n          ref={useForkRef(expandButtonRef, expandButtonRefProp)}\n          variant=\"secondary\"\n          {...restExpandButtonProps}\n        >\n          <OverflowIcon\n            aria-label={\n              expandButtonAccessibleText === undefined\n                ? \"expand edit\"\n                : expandButtonAccessibleText\n            }\n          />\n        </Button>\n        <Input\n          {...mergedInputProps}\n          className={clsx(withBaseName(\"input\"), withBaseName(\"inputField\"), {\n            [withBaseName(\"hidden\")]: showExpandButton,\n          })}\n          disabled={disabled}\n          id={inputId}\n          // TODO: Use multi line input when available\n          // multiline\n          onBlur={onInputBlur}\n          onChange={onInputChange}\n          onFocus={onInputFocus}\n          onKeyDown={onKeyDown}\n          onKeyUp={handleInputKeyUp}\n          onSelect={onInputSelect}\n          renderSuffix={() => <InputRuler ref={inputRulerRef} value={value} />}\n          value={value}\n          ref={inputRef}\n        />\n      </div>\n      <Button\n        className={clsx(withBaseName(\"clearButton\"), {\n          [withBaseName(\"hidden\")]: !expanded || selectedItems.length === 0,\n        })}\n        disabled={disabled}\n        id={clearButtonId}\n        onBlur={onBlur}\n        onClick={onClear}\n        onFocus={handleClearButtonFocus}\n        ref={clearButtonRef}\n        variant=\"secondary\"\n        data-testid=\"clear-button\"\n      >\n        <CloseIcon aria-label=\"clear input\" />\n      </Button>\n    </div>\n  );\n}) as <Item>(\n  p: TokenizedInputBaseProps<Item> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReactElement<TokenizedInputBaseProps<Item>>;\n"],"names":["makePrefixer","forwardRef","TokenizedInputBase","defaultItemToString","useWindow","useComponentCssInjection","tokenizedInputCss","useDensity","useIcon","useId","useRef","useWidth","useState","useResizeObserver","useCallback","useIsomorphicLayoutEffect","calcFirstHiddenIndex","jsxs","clsx","useForkRef","jsx","InputPill","Button","Input","InputRuler"],"mappings":";;;;;;;;;;;;;;;;;;;AAkFA,MAAM,mBAAsB,GAAA,CAAA;AAC5B,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAEtD,MAAM,iBAAoB,GAAA,CAAC,SACzB,KAAA,SAAA,KAAc,CACV,GAAA,kBAAA,GACA,CAAG,EAAA,SAAS,CAAI,CAAA,EAAA,SAAA,GAAY,CAAI,GAAA,OAAA,GAAU,MAAM,CAAA,CAAA;AAEtD,SAAS,WAAiB,OAAsC,EAAA;AAC9D,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAA,IAAI,WAAW,IAAM,EAAA;AACnB,MAAQ,OAAA,CAAA,IAAA;AAAA,QACN;AAAA,OACF;AAAA;AACF;AAEF,EAAA,OAAO,OAAW,IAAA,IAAA;AACpB;AAEO,MAAM,kBAAqB,GAAAC,gBAAA,CAAW,SAASC,mBAAAA,CACpD,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,aAAa,EAAC;AAAA,IACd,oBAAoB,EAAC;AAAA,IACrB,SAAA;AAAA,IACA,gBAAgB,EAAC;AAAA,IACjB,gBAAgB,EAAC;AAAA,IACjB,gBAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAAC,uCAAA;AAAA,IACf,EAAI,EAAA,MAAA;AAAA,IACJ,eAAiB,EAAA,mBAAA;AAAA,IACjB,YAAc,EAAA,SAAA;AAAA,IACd,iBAAmB,EAAA,cAAA;AAAA,IACnB,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,sBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,UAAUC,eAAW,EAAA;AAC3B,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAIC,YAAQ,EAAA;AAC5C,EAAM,MAAA,EAAA,GAAKC,WAAM,MAAM,CAAA;AACvB,EAAM,MAAA,OAAA,GAAU,GAAG,EAAE,CAAA,MAAA,CAAA;AACrB,EAAM,MAAA,cAAA,GAAiB,GAAG,EAAE,CAAA,cAAA,CAAA;AAC5B,EAAM,MAAA,aAAA,GAAgB,GAAG,EAAE,CAAA,aAAA,CAAA;AAK3B,EAAA,MAAM,gBAAmB,GAAA,EAAA;AAGzB,EAAM,MAAA,QAAA,GAAWC,YAAgD,CAAA,EAAE,CAAA;AACnE,EAAM,MAAA,aAAA,GAAgBA,aAA+B,IAAI,CAAA;AACzD,EAAM,MAAA,mBAAA,GAAsBA,aAAO,KAAK,CAAA;AAExC,EAAA,MAAM,CAAC,eAAA,EAAiB,iBAAiB,CAAA,GAAIC,kBAAS,OAAO,CAAA;AAC7D,EAAA,MAAM,CAAC,cAAA,EAAgB,gBAAgB,CAAA,GAAIA,kBAAS,OAAO,CAAA;AAC3D,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIC,eAAS,mBAAmB,CAAA;AAChE,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,eAAwB,IAAI,CAAA;AACxE,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAE5E,EAAM,MAAA,gBAAA,GAAmB,CAAC,QAAA,IAAY,gBAAoB,IAAA,IAAA;AAE1D,EAAA,MAAM,WACJ,GAAA,gBAAA,GACA,mBACC,IAAA,QAAA,GAAW,gBAAmB,GAAA,iBAAA,CAAA;AAEjC,EAAA,MAAM,YAAe,GAAAC,mCAAA;AAAA,IACnBC,iBAAA;AAAA,MACE,CAAC,CAAC,EAAE,WAAA,EAAa,CAAM,KAAA;AACrB,QAAkB,iBAAA,CAAA,WAAA,CAAY,QAAQ,WAAW,CAAA;AAAA,OACnD;AAAA,MACA,CAAC,WAAW;AAAA;AACd,GACF;AAEA,EAAAC,8BAAA;AAAA,IACE,MAAM,MAAM;AAGV,MAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,KAC1B;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAIA,EAAAA,8BAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,QAAU,EAAA;AACZ,QAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA,OAC1B,MAAA,IAAW,kBAAkB,IAAM,EAAA;AACjC,QAAA,mBAAA;AAAA,UACEC,yCAAqB,CAAA;AAAA,YACnB,cAAgB,EAAA,cAAA;AAAA,YAChB,UAAY,EAAA,MAAA,CAAO,MAAO,CAAA,QAAA,CAAS,OAAO,CAAE,CAAA,MAAA;AAAA,cAC1C;AAAA;AACF,WACD;AAAA,SACH;AAAA;AACF,KACF;AAAA;AAAA,IAEA,CAAC,QAAU,EAAA,cAAA,EAAgB,aAAa;AAAA,GAC1C;AAEA,EAAAD,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,QAAA,IAAY,cAAc,OAAS,EAAA;AACrC,MAAM,MAAA,aAAA,GAAgB,cAAc,OAAQ,CAAA,WAAA;AAC5C,MAAA,aAAA,CAAc,IAAK,CAAA,GAAA,CAAI,aAAe,EAAA,cAAA,IAAkB,CAAC,CAAC,CAAA;AAAA;AAC5D,GACC,EAAA,CAAC,QAAU,EAAA,cAAA,EAAgB,KAAK,CAAC,CAAA;AAEpC,EAAM,MAAA,yBAAA,GAA4B,CAChC,KACG,KAAA;AACH,IAAM,MAAA,UAAA,GAAa,KAAM,CAAA,GAAA,CAAI,MAAW,KAAA,CAAA;AACxC,IAAA,MAAM,aACJ,GAAA;AAAA,MACE,SAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,MACA,OAAQ,CAAA,KAAA,CAAM,GAAI,CAAA,WAAA,EAAa,CAAM,KAAA,EAAA;AAEzC,IAAA,IAAA,CAAK,UAAc,IAAA,aAAA,KAAkB,UAAW,CAAA,OAAO,CAAG,EAAA;AACxD,MAAA,IAAI,KAAM,CAAA,GAAA,KAAQ,OAAW,IAAA,KAAA,CAAM,QAAQ,GAAK,EAAA;AAC9C,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAA,KAAA,CAAM,eAAgB,EAAA;AAAA;AAExB,MAAA,OAAA,CAAQ,eAAe,IAAI,CAAA;AAC3B,MAAA,mBAAA,CAAoB,OAAU,GAAA,IAAA;AAAA;AAChC,GACF;AAEA,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAA2C,KAAA;AAEnE,IAAA,IAAI,mBAAoB,CAAA,OAAA,IAAW,OAAY,KAAA,KAAA,CAAM,GAAK,EAAA;AACxD,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA;AAE9B,MAAA,IAAI,SAAW,EAAA;AACb,QAAA,SAAA,CAAU,KAAK,CAAA;AAAA;AACjB;AAGF,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,OAAA,CAAQ,KAAK,CAAA;AAAA;AACf,GACF;AAEA,EAAM,MAAA,YAAA,GAAe,CAAC,KAA6C,KAAA;AACjE,IAAA,KAAA,CAAM,eAAgB,EAAA;AAEtB,IAAI,IAAA,UAAA,CAAW,OAAO,CAAG,EAAA;AACvB,MAAA,OAAA,CAAQ,eAAe,IAAI,CAAA;AAAA;AAC7B,GACF;AAEA,EAAM,MAAA,sBAAA,GAAyB,CAAC,KAAyC,KAAA;AACvE,IAAA,KAAA,CAAM,eAAgB,EAAA;AAEtB,IAAI,IAAA,UAAA,CAAW,OAAO,CAAG,EAAA;AACvB,MAAA,OAAA,CAAQ,WAAW,KAAK,CAAA;AACxB,MAAA,OAAA,CAAQ,UAAW,EAAA;AAAA;AACrB,GACF;AAEA,EAAA,MAAM,kBAAkB,aAAc,CAAA,GAAA;AAAA,IACpC,CAAC,CAAG,EAAA,KAAA,KAAU,CAAG,EAAA,EAAE,SAAS,KAAK,CAAA;AAAA,GACnC;AAEA,EAAM,MAAA,mBAAA,GAAsB,QACxB,GAAA,CAAC,cAAgB,EAAA,OAAA,EAAS,GAAG,eAAe,CAAA,GAC5C,CAAC,cAAA,EAAgB,OAAO,CAAA;AAE5B,EAAA,MAAM,gBAAmB,GAAA,SAAA;AAAA,IACvB;AAAA,MACE,UAAY,EAAA;AAAA,QACV,KAAO,EAAA;AAAA,UACL,KAAO,EAAA,UAAA;AAAA,UACP,QAAU,EAAA;AAAA,SACZ;AAAA,QACA,YAAc,EAAA,CAAC,SAAW,EAAA,iBAAA,CAAkB,aAAc,CAAA,MAAM,CAAC,CAAA,CAC9D,MAAO,CAAA,OAAO,CACd,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,QACX,mBAAmB,mBAAoB,CAAA,MAAA,CAAO,OAAO,CAAA,CAAE,KAAK,GAAG,CAAA;AAAA,QAC/D,uBAAA,EACE,oBAAoB,gBAAoB,IAAA,CAAA,GACpC,GAAG,EAAE,CAAA,MAAA,EAAS,gBAAgB,CAC9B,CAAA,GAAA;AAAA;AACR,KACF;AAAA,IACA;AAAA,GACF;AAEA,EAAM,MAAA;AAAA,IACJ,cAAgB,EAAA,0BAAA;AAAA,IAChB,GAAG;AAAA,GACD,GAAA,iBAAA;AAEJ,EACE,uBAAAE,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,UAC3B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG,QAAA;AAAA,UAC5B,CAAC,YAAA,CAAa,UAAU,CAAC,GAAG;AAAA,SAC9B;AAAA,QACA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAA,EAAKC,eAAW,CAAA,GAAA,EAAK,YAAY,CAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAW,eAAgB,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,YACnC,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,YAChC,IAAK,EAAA;AAAA;AAAA,SACP;AAAA,wBACCH,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,WAAW,CACrC,EAAA,QAAA,EAAA;AAAA,UAAc,aAAA,CAAA,GAAA,CAAI,CAAC,IAAA,EAAM,KAAU,KAAA;AAClC,YAAM,MAAA,KAAA,GAAQ,aAAa,IAAI,CAAA;AAE/B,YACE,uBAAAG,cAAA;AAAA,cAACC,mBAAA;AAAA,cAAA;AAAA,gBACC,MAAQ,EAAA,aAAA,CAAc,OAAQ,CAAA,KAAK,CAAM,KAAA,EAAA;AAAA,gBACzC,QAAA;AAAA,gBACA,MAAA,EAAQ,oBAAoB,KAAS,IAAA,gBAAA;AAAA,gBACrC,aAAa,KAAU,KAAA,gBAAA;AAAA,gBACvB,EAAI,EAAA,CAAA,EAAG,EAAE,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA;AAAA,gBACvB,KAAA;AAAA,gBAEA,KAAA;AAAA,gBACA,WACE,EAAA,CAAC,gBAAoB,IAAA,KAAA,KAAU,cAAc,MAAS,GAAA,CAAA;AAAA,gBAExD,QAAA,EAAU,WAAW,YAAe,GAAA,MAAA;AAAA,gBACpC;AAAA,eAAA;AAAA,cANK,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,KAAK,CAAA;AAAA,aAOxB;AAAA,WAEH,CAAA;AAAA,0BACDD,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,iBAAA,EAAiB,CAAC,cAAA,EAAgB,OAAS,EAAA,cAAc,EACtD,MAAO,CAAA,OAAO,CACd,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,cACX,SAAW,EAAAJ,SAAA,CAAK,YAAa,CAAA,cAAc,CAAG,EAAA;AAAA,gBAC5C,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,CAAC;AAAA,eAC5B,CAAA;AAAA,cACD,QAAA;AAAA,cACA,EAAI,EAAA,cAAA;AAAA,cACJ,MAAA;AAAA,cACA,OAAS,EAAA,YAAA;AAAA,cACT,OAAA;AAAA,cACA,SAAW,EAAA,yBAAA;AAAA,cACX,GAAA,EAAKC,eAAW,CAAA,eAAA,EAAiB,mBAAmB,CAAA;AAAA,cACpD,OAAQ,EAAA,WAAA;AAAA,cACP,GAAG,qBAAA;AAAA,cAEJ,QAAA,kBAAAC,cAAA;AAAA,gBAAC,YAAA;AAAA,gBAAA;AAAA,kBACC,YAAA,EACE,0BAA+B,KAAA,MAAA,GAC3B,aACA,GAAA;AAAA;AAAA;AAER;AAAA,WACF;AAAA,0BACAA,cAAA;AAAA,YAACG,uBAAA;AAAA,YAAA;AAAA,cACE,GAAG,gBAAA;AAAA,cACJ,WAAWL,SAAK,CAAA,YAAA,CAAa,OAAO,CAAG,EAAA,YAAA,CAAa,YAAY,CAAG,EAAA;AAAA,gBACjE,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,eAC3B,CAAA;AAAA,cACD,QAAA;AAAA,cACA,EAAI,EAAA,OAAA;AAAA,cAGJ,MAAQ,EAAA,WAAA;AAAA,cACR,QAAU,EAAA,aAAA;AAAA,cACV,OAAS,EAAA,YAAA;AAAA,cACT,SAAA;AAAA,cACA,OAAS,EAAA,gBAAA;AAAA,cACT,QAAU,EAAA,aAAA;AAAA,cACV,cAAc,sBAAME,cAAA,CAACI,qBAAW,EAAA,EAAA,GAAA,EAAK,eAAe,KAAc,EAAA,CAAA;AAAA,cAClE,KAAA;AAAA,cACA,GAAK,EAAA;AAAA;AAAA;AACP,SACF,EAAA,CAAA;AAAA,wBACAJ,cAAA;AAAA,UAACE,WAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAAJ,SAAA,CAAK,YAAa,CAAA,aAAa,CAAG,EAAA;AAAA,cAC3C,CAAC,aAAa,QAAQ,CAAC,GAAG,CAAC,QAAA,IAAY,cAAc,MAAW,KAAA;AAAA,aACjE,CAAA;AAAA,YACD,QAAA;AAAA,YACA,EAAI,EAAA,aAAA;AAAA,YACJ,MAAA;AAAA,YACA,OAAS,EAAA,OAAA;AAAA,YACT,OAAS,EAAA,sBAAA;AAAA,YACT,GAAK,EAAA,cAAA;AAAA,YACL,OAAQ,EAAA,WAAA;AAAA,YACR,aAAY,EAAA,cAAA;AAAA,YAEZ,QAAA,kBAAAE,cAAA,CAAC,SAAU,EAAA,EAAA,YAAA,EAAW,aAAc,EAAA;AAAA;AAAA;AACtC;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist-cjs/tokenized-input/internal/InputPill.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var useWidth = require('./useWidth.js');
+
+const withBaseName = core.makePrefixer("saltInputPill");
+const InputPill = react.memo(function InputPill2(props) {
+  const {
+    active,
+    className,
+    disabled,
+    hidden,
+    highlighted,
+    index,
+    label,
+    lastVisible,
+    onDelete,
+    pillsRef,
+    ...restProps
+  } = props;
+  const ref = react.useRef(null);
+  const isRemovable = Boolean(onDelete);
+  const { CloseIcon } = core.useIcon();
+  core.useIsomorphicLayoutEffect(() => {
+    if (!isRemovable && pillsRef.current) {
+      pillsRef.current[index] = useWidth.getWidth(ref.current);
+    }
+  }, [pillsRef, index, isRemovable, lastVisible]);
+  core.useIsomorphicLayoutEffect(
+    () => () => {
+      pillsRef.current[index] = void 0;
+    },
+    [pillsRef, index]
+  );
+  const handleDelete = () => {
+    onDelete == null ? void 0 : onDelete(index);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    core.Pill,
+    {
+      className: clsx.clsx(
+        withBaseName(),
+        {
+          [withBaseName("pillActive")]: active || highlighted,
+          [withBaseName("pillLastVisible")]: lastVisible,
+          [withBaseName("hidden")]: hidden
+        },
+        className
+      ),
+      disabled,
+      tabIndex: -1,
+      onClick: isRemovable ? handleDelete : void 0,
+      ref,
+      role: "option",
+      ...restProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("label"), children: label }),
+        isRemovable && /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
+      ]
+    }
+  );
+});
+
+exports.InputPill = InputPill;
+//# sourceMappingURL=InputPill.js.map

package/dist-cjs/tokenized-input/internal/InputPill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputPill.js","sources":["../src/tokenized-input/internal/InputPill.tsx"],"sourcesContent":["import {\n  Pill,\n  type PillProps,\n  makePrefixer,\n  useIcon,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type MutableRefObject, memo, useRef } from \"react\";\nimport { getWidth } from \"./useWidth\";\n\nconst withBaseName = makePrefixer(\"saltInputPill\");\n\nexport type InputPillProps = PillProps & {\n  /**\n   * An ref object holds pills index map to width.\n   */\n  pillsRef: MutableRefObject<Record<number, number | undefined>>;\n  /**\n   * Index of the pill within Input.\n   */\n  index: number;\n  /**\n   * Pill label.\n   */\n  label?: string;\n  /**\n   * Whether the pill is the last visible one within Input.\n   */\n  lastVisible?: boolean;\n  /**\n   * Whether the pill is highlighted.\n   */\n  highlighted?: boolean;\n  /**\n   * Whether the pill is active.\n   */\n  active?: boolean;\n  /**\n   * Callback when pill is deleted.\n   */\n  onDelete?: (index: number) => void;\n};\n\nexport const InputPill = memo(function InputPill(props: InputPillProps) {\n  const {\n    active,\n    className,\n    disabled,\n    hidden,\n    highlighted,\n    index,\n    label,\n    lastVisible,\n    onDelete,\n    pillsRef,\n    ...restProps\n  } = props;\n\n  const ref = useRef<HTMLButtonElement | null>(null);\n  const isRemovable = Boolean(onDelete);\n  const { CloseIcon } = useIcon();\n  // useLayoutEffect to match the calcFirstHiddenIndex in TokenizedInputBase\n  // We need to collect widths before the calculation\n  useIsomorphicLayoutEffect(() => {\n    if (!isRemovable && pillsRef.current) {\n      pillsRef.current[index] = getWidth(ref.current);\n    }\n  }, [pillsRef, index, isRemovable, lastVisible]);\n\n  useIsomorphicLayoutEffect(\n    () => () => {\n      pillsRef.current[index] = undefined;\n    },\n    [pillsRef, index],\n  );\n\n  const handleDelete = () => {\n    onDelete?.(index);\n  };\n\n  return (\n    <Pill\n      className={clsx(\n        withBaseName(),\n        {\n          [withBaseName(\"pillActive\")]: active || highlighted,\n          [withBaseName(\"pillLastVisible\")]: lastVisible,\n          [withBaseName(\"hidden\")]: hidden,\n        },\n        className,\n      )}\n      disabled={disabled}\n      tabIndex={-1}\n      onClick={isRemovable ? handleDelete : undefined}\n      ref={ref}\n      role=\"option\"\n      //  style={useMemo(() => ({ maxWidth }), [maxWidth])}\n      {...restProps}\n    >\n      <span className={withBaseName(\"label\")}>{label}</span>\n      {isRemovable && <CloseIcon />}\n    </Pill>\n  );\n});\n"],"names":["makePrefixer","memo","InputPill","useRef","useIcon","useIsomorphicLayoutEffect","getWidth","jsxs","Pill","clsx","jsx"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA;AAiC1C,MAAM,SAAY,GAAAC,UAAA,CAAK,SAASC,UAAAA,CAAU,KAAuB,EAAA;AACtE,EAAM,MAAA;AAAA,IACJ,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAM,MAAA,GAAA,GAAMC,aAAiC,IAAI,CAAA;AACjD,EAAM,MAAA,WAAA,GAAc,QAAQ,QAAQ,CAAA;AACpC,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,YAAQ,EAAA;AAG9B,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAC,WAAe,IAAA,QAAA,CAAS,OAAS,EAAA;AACpC,MAAA,QAAA,CAAS,OAAQ,CAAA,KAAK,CAAI,GAAAC,iBAAA,CAAS,IAAI,OAAO,CAAA;AAAA;AAChD,KACC,CAAC,QAAA,EAAU,KAAO,EAAA,WAAA,EAAa,WAAW,CAAC,CAAA;AAE9C,EAAAD,8BAAA;AAAA,IACE,MAAM,MAAM;AACV,MAAS,QAAA,CAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,MAAA;AAAA,KAC5B;AAAA,IACA,CAAC,UAAU,KAAK;AAAA,GAClB;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAW,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAA,KAAA,CAAA;AAAA,GACb;AAEA,EACE,uBAAAE,eAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAAC,SAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAA,CAAa,YAAY,CAAC,GAAG,MAAU,IAAA,WAAA;AAAA,UACxC,CAAC,YAAA,CAAa,iBAAiB,CAAC,GAAG,WAAA;AAAA,UACnC,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,SAC5B;AAAA,QACA;AAAA,OACF;AAAA,MACA,QAAA;AAAA,MACA,QAAU,EAAA,EAAA;AAAA,MACV,OAAA,EAAS,cAAc,YAAe,GAAA,MAAA;AAAA,MACtC,GAAA;AAAA,MACA,IAAK,EAAA,QAAA;AAAA,MAEJ,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAAI,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,QAC9C,WAAA,mCAAgB,SAAU,EAAA,EAAA;AAAA;AAAA;AAAA,GAC7B;AAEJ,CAAC;;;;"}

package/dist-cjs/tokenized-input/internal/InputRuler.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltInputRuler {\n  position: absolute;\n  left: 0;\n  white-space: nowrap;\n  visibility: hidden;\n  overflow: hidden;\n  max-width: 100%;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=InputRuler.css.js.map

package/dist-cjs/tokenized-input/internal/InputRuler.css.js.map

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

package/dist-cjs/tokenized-input/internal/InputRuler.js

@@ -0,0 +1,23 @@
+'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 react = require('react');
+var InputRuler$1 = require('./InputRuler.css.js');
+
+const withBaseName = core.makePrefixer("saltInputRuler");
+const InputRuler = react.forwardRef(function InputRuler2(props, ref) {
+  const { value } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-input-ruler",
+    css: InputRuler$1,
+    window: targetWindow
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName(), ref, children: value });
+});
+
+exports.InputRuler = InputRuler;
+//# sourceMappingURL=InputRuler.js.map

package/dist-cjs/tokenized-input/internal/InputRuler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputRuler.js","sources":["../src/tokenized-input/internal/InputRuler.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ForwardedRef, type InputHTMLAttributes, forwardRef } from \"react\";\nimport inputRuler from \"./InputRuler.css\";\n\nconst withBaseName = makePrefixer(\"saltInputRuler\");\n\n/**\n * This hidden component is used to wrap a copy of an input value\n * so that we can use it to determine the input width dynamically\n */\nexport const InputRuler = forwardRef(function InputRuler(\n  props: { value: InputHTMLAttributes<HTMLInputElement>[\"value\"] },\n  ref: ForwardedRef<HTMLSpanElement>,\n) {\n  const { value } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-input-ruler\",\n    css: inputRuler,\n    window: targetWindow,\n  });\n\n  return (\n    <span className={withBaseName()} ref={ref}>\n      {value}\n    </span>\n  );\n});\n"],"names":["makePrefixer","forwardRef","InputRuler","useWindow","useComponentCssInjection","inputRuler"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAM3C,MAAM,UAAa,GAAAC,gBAAA,CAAW,SAASC,WAAAA,CAC5C,OACA,GACA,EAAA;AACA,EAAM,MAAA,EAAE,OAAU,GAAA,KAAA;AAElB,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAC,YAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,sCACG,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,EAAA,EAAG,KAC9B,QACH,EAAA,KAAA,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/tokenized-input/internal/calcFirstHiddenIndex.js

@@ -0,0 +1,20 @@
+'use strict';
+
+function calcFirstHiddenIndex({
+  containerWidth = 0,
+  pillWidths = []
+} = {}) {
+  let totalWidth = 0;
+  let firstHiddenIndex = null;
+  for (let i = 0; i < pillWidths.length; i++) {
+    totalWidth += pillWidths[i];
+    if (totalWidth > containerWidth) {
+      firstHiddenIndex = i;
+      break;
+    }
+  }
+  return firstHiddenIndex;
+}
+
+exports.calcFirstHiddenIndex = calcFirstHiddenIndex;
+//# sourceMappingURL=calcFirstHiddenIndex.js.map

package/dist-cjs/tokenized-input/internal/calcFirstHiddenIndex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calcFirstHiddenIndex.js","sources":["../src/tokenized-input/internal/calcFirstHiddenIndex.ts"],"sourcesContent":["export function calcFirstHiddenIndex({\n  containerWidth = 0,\n  pillWidths = [],\n}: { containerWidth?: number; pillWidths?: number[] } = {}) {\n  let totalWidth = 0;\n  let firstHiddenIndex: null | number = null;\n\n  for (let i = 0; i < pillWidths.length; i++) {\n    totalWidth += pillWidths[i];\n\n    if (totalWidth > containerWidth) {\n      firstHiddenIndex = i;\n      break;\n    }\n  }\n\n  return firstHiddenIndex;\n}\n"],"names":[],"mappings":";;AAAO,SAAS,oBAAqB,CAAA;AAAA,EACnC,cAAiB,GAAA,CAAA;AAAA,EACjB,aAAa;AACf,CAAA,GAAwD,EAAI,EAAA;AAC1D,EAAA,IAAI,UAAa,GAAA,CAAA;AACjB,EAAA,IAAI,gBAAkC,GAAA,IAAA;AAEtC,EAAA,KAAA,IAAS,CAAI,GAAA,CAAA,EAAG,CAAI,GAAA,UAAA,CAAW,QAAQ,CAAK,EAAA,EAAA;AAC1C,IAAA,UAAA,IAAc,WAAW,CAAC,CAAA;AAE1B,IAAA,IAAI,aAAa,cAAgB,EAAA;AAC/B,MAAmB,gBAAA,GAAA,CAAA;AACnB,MAAA;AAAA;AACF;AAGF,EAAO,OAAA,gBAAA;AACT;;;;"}

package/dist-cjs/tokenized-input/internal/defaultItemToString.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var isPlainObject = require('./isPlainObject.js');
+
+const defaultItemToString = (item) => {
+  if (!isPlainObject.isPlainObject(item)) {
+    return String(item);
+  }
+  if (Object.prototype.hasOwnProperty.call(item, "label")) {
+    return String(item.label);
+  }
+  if (process.env.NODE_ENV !== "production") {
+    console.warn(
+      [
+        "itemToString: you've likely forgotten to set the label prop on the item object.",
+        "You can also provide your own `itemToString` implementation."
+      ].join("\n")
+    );
+  }
+  return "";
+};
+
+exports.defaultItemToString = defaultItemToString;
+//# sourceMappingURL=defaultItemToString.js.map

package/dist-cjs/tokenized-input/internal/defaultItemToString.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaultItemToString.js","sources":["../src/tokenized-input/internal/defaultItemToString.ts"],"sourcesContent":["import { isPlainObject } from \"./isPlainObject\";\n\nexport const defaultItemToString = (item: any) => {\n  if (!isPlainObject(item)) {\n    return String(item);\n  }\n\n  if (Object.prototype.hasOwnProperty.call(item, \"label\")) {\n    return String(item.label);\n  }\n\n  if (process.env.NODE_ENV !== \"production\") {\n    console.warn(\n      [\n        \"itemToString: you've likely forgotten to set the label prop on the item object.\",\n        \"You can also provide your own `itemToString` implementation.\",\n      ].join(\"\\n\"),\n    );\n  }\n\n  return \"\";\n};\n"],"names":["isPlainObject"],"mappings":";;;;AAEa,MAAA,mBAAA,GAAsB,CAAC,IAAc,KAAA;AAChD,EAAI,IAAA,CAACA,2BAAc,CAAA,IAAI,CAAG,EAAA;AACxB,IAAA,OAAO,OAAO,IAAI,CAAA;AAAA;AAGpB,EAAA,IAAI,OAAO,SAAU,CAAA,cAAA,CAAe,IAAK,CAAA,IAAA,EAAM,OAAO,CAAG,EAAA;AACvD,IAAO,OAAA,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA;AAG1B,EAAI,IAAA,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,IAAQ,OAAA,CAAA,IAAA;AAAA,MACN;AAAA,QACE,iFAAA;AAAA,QACA;AAAA,OACF,CAAE,KAAK,IAAI;AAAA,KACb;AAAA;AAGF,EAAO,OAAA,EAAA;AACT;;;;"}

package/dist-cjs/tokenized-input/internal/getCursorPosition.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const getCursorPosition = (inputRef) => {
+  if (inputRef.current) {
+    const { selectionStart, selectionEnd } = inputRef.current;
+    if (selectionStart != null && selectionStart === selectionEnd) {
+      return selectionStart;
+    }
+  }
+  return -1;
+};
+
+exports.getCursorPosition = getCursorPosition;
+//# sourceMappingURL=getCursorPosition.js.map

package/dist-cjs/tokenized-input/internal/getCursorPosition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCursorPosition.js","sources":["../src/tokenized-input/internal/getCursorPosition.ts"],"sourcesContent":["import type { MutableRefObject } from \"react\";\nexport const getCursorPosition = (\n  inputRef: MutableRefObject<HTMLInputElement | null>,\n) => {\n  if (inputRef.current) {\n    const { selectionStart, selectionEnd } = inputRef.current;\n\n    // if there is no selection range\n    if (selectionStart != null && selectionStart === selectionEnd) {\n      return selectionStart;\n    }\n  }\n\n  return -1;\n};\n"],"names":[],"mappings":";;AACa,MAAA,iBAAA,GAAoB,CAC/B,QACG,KAAA;AACH,EAAA,IAAI,SAAS,OAAS,EAAA;AACpB,IAAA,MAAM,EAAE,cAAA,EAAgB,YAAa,EAAA,GAAI,QAAS,CAAA,OAAA;AAGlD,IAAI,IAAA,cAAA,IAAkB,IAAQ,IAAA,cAAA,KAAmB,YAAc,EAAA;AAC7D,MAAO,OAAA,cAAA;AAAA;AACT;AAGF,EAAO,OAAA,EAAA;AACT;;;;"}

package/dist-cjs/tokenized-input/internal/isPlainObject.js

@@ -0,0 +1,6 @@
+'use strict';
+
+const isPlainObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
+
+exports.isPlainObject = isPlainObject;
+//# sourceMappingURL=isPlainObject.js.map

package/dist-cjs/tokenized-input/internal/isPlainObject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isPlainObject.js","sources":["../src/tokenized-input/internal/isPlainObject.ts"],"sourcesContent":["// biome-ignore lint/suspicious/noExplicitAny: this is a valid use case for `any`\nexport type PlainObject = { [name: string]: any };\n\n// biome-ignore lint/suspicious/noExplicitAny: this is a valid use case for `any`\nexport const isPlainObject = (obj: any): obj is PlainObject =>\n  Object.prototype.toString.call(obj) === \"[object Object]\";\n"],"names":[],"mappings":";;AAIa,MAAA,aAAA,GAAgB,CAAC,GAC5B,KAAA,MAAA,CAAO,UAAU,QAAS,CAAA,IAAA,CAAK,GAAG,CAAM,KAAA;;;;"}

package/dist-cjs/tokenized-input/internal/useResizeObserver.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+function useResizeObserver(onSizeChange) {
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (!ref.current) {
+      return void 0;
+    }
+    const observer = new ResizeObserver(onSizeChange);
+    observer.observe(ref.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [onSizeChange]);
+  core.useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      onSizeChange([
+        {
+          target: ref.current,
+          contentRect: ref.current.getBoundingClientRect(),
+          borderBoxSize: [],
+          contentBoxSize: [],
+          devicePixelContentBoxSize: []
+        }
+      ]);
+    }
+  }, [onSizeChange]);
+  return ref;
+}
+
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=useResizeObserver.js.map

package/dist-cjs/tokenized-input/internal/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../src/tokenized-input/internal/useResizeObserver.ts"],"sourcesContent":["// TODO: Use resize observer from Tabstrip / Toolbar\n\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { type Ref, useEffect, useRef } from \"react\";\n\n/**\n * This monitors the size of a component and calls `onSizeChange` callback\n * every time when size changes.\n */\nexport function useResizeObserver<Element extends HTMLElement>(\n  onSizeChange: (\n    entries: ResizeObserverEntry[],\n    observer?: ResizeObserver,\n  ) => void,\n): Ref<Element> {\n  const ref = useRef<Element>(null);\n\n  useEffect(() => {\n    if (!ref.current) {\n      return undefined;\n    }\n\n    const observer = new ResizeObserver(onSizeChange);\n    observer.observe(ref.current);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [onSizeChange]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      onSizeChange([\n        {\n          target: ref.current,\n          contentRect: ref.current.getBoundingClientRect(),\n          borderBoxSize: [],\n          contentBoxSize: [],\n          devicePixelContentBoxSize: [],\n        },\n      ]);\n    }\n  }, [onSizeChange]);\n\n  return ref;\n}\n"],"names":["useRef","useEffect","useIsomorphicLayoutEffect"],"mappings":";;;;;AASO,SAAS,kBACd,YAIc,EAAA;AACd,EAAM,MAAA,GAAA,GAAMA,aAAgB,IAAI,CAAA;AAEhC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAC,IAAI,OAAS,EAAA;AAChB,MAAO,OAAA,MAAA;AAAA;AAGT,IAAM,MAAA,QAAA,GAAW,IAAI,cAAA,CAAe,YAAY,CAAA;AAChD,IAAS,QAAA,CAAA,OAAA,CAAQ,IAAI,OAAO,CAAA;AAE5B,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAW,EAAA;AAAA,KACtB;AAAA,GACF,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAa,YAAA,CAAA;AAAA,QACX;AAAA,UACE,QAAQ,GAAI,CAAA,OAAA;AAAA,UACZ,WAAA,EAAa,GAAI,CAAA,OAAA,CAAQ,qBAAsB,EAAA;AAAA,UAC/C,eAAe,EAAC;AAAA,UAChB,gBAAgB,EAAC;AAAA,UACjB,2BAA2B;AAAC;AAC9B,OACD,CAAA;AAAA;AACH,GACF,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,EAAO,OAAA,GAAA;AACT;;;;"}

package/dist-cjs/tokenized-input/internal/useWidth.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+const safeParseFloat = (target) => Number.parseFloat(target || "0");
+const getWidth = (node) => {
+  if (node == null) {
+    return 0;
+  }
+  const style = window.getComputedStyle(node);
+  const margin = safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);
+  let dimension;
+  if (style.display === "none") {
+    const nodeDisplay = node.style.display;
+    node.style.display = "inline-block";
+    dimension = node.getBoundingClientRect();
+    node.style.display = nodeDisplay;
+  } else {
+    dimension = node.getBoundingClientRect();
+  }
+  return dimension.width + margin;
+};
+const useWidth = (density) => {
+  const [node, setNode] = react.useState(null);
+  const [width, setWidth] = react.useState(0);
+  core.useIsomorphicLayoutEffect(() => {
+    if (node !== null && density) {
+      setWidth(getWidth(node));
+    }
+  }, [node, density]);
+  return [setNode, width];
+};
+
+exports.getWidth = getWidth;
+exports.useWidth = useWidth;
+//# sourceMappingURL=useWidth.js.map

package/dist-cjs/tokenized-input/internal/useWidth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWidth.js","sources":["../src/tokenized-input/internal/useWidth.ts"],"sourcesContent":["import { type Density, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useState } from \"react\";\n\nconst safeParseFloat = (target?: string) => Number.parseFloat(target || \"0\");\n\nexport const getWidth = (node: HTMLElement | null) => {\n  if (node == null) {\n    return 0;\n  }\n\n  const style = window.getComputedStyle(node);\n  const margin =\n    safeParseFloat(style.marginLeft) + safeParseFloat(style.marginRight);\n\n  let dimension: DOMRect;\n\n  if (style.display === \"none\") {\n    const nodeDisplay = node.style.display;\n\n    node.style.display = \"inline-block\";\n    dimension = node.getBoundingClientRect();\n    node.style.display = nodeDisplay;\n  } else {\n    dimension = node.getBoundingClientRect();\n  }\n\n  return dimension.width + margin;\n};\n\n/**\n * This records the width of a component when it's rendered\n */\nexport const useWidth = (\n  density: Density,\n  // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n): [(newNode: any) => void, number] => {\n  const [node, setNode] = useState<HTMLElement | null>(null);\n  const [width, setWidth] = useState<number>(0);\n\n  useIsomorphicLayoutEffect(() => {\n    if (node !== null && density) {\n      setWidth(getWidth(node));\n    }\n  }, [node, density]);\n\n  return [setNode, width];\n};\n"],"names":["useState","useIsomorphicLayoutEffect"],"mappings":";;;;;AAGA,MAAM,iBAAiB,CAAC,MAAA,KAAoB,MAAO,CAAA,UAAA,CAAW,UAAU,GAAG,CAAA;AAE9D,MAAA,QAAA,GAAW,CAAC,IAA6B,KAAA;AACpD,EAAA,IAAI,QAAQ,IAAM,EAAA;AAChB,IAAO,OAAA,CAAA;AAAA;AAGT,EAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,gBAAA,CAAiB,IAAI,CAAA;AAC1C,EAAA,MAAM,SACJ,cAAe,CAAA,KAAA,CAAM,UAAU,CAAI,GAAA,cAAA,CAAe,MAAM,WAAW,CAAA;AAErE,EAAI,IAAA,SAAA;AAEJ,EAAI,IAAA,KAAA,CAAM,YAAY,MAAQ,EAAA;AAC5B,IAAM,MAAA,WAAA,GAAc,KAAK,KAAM,CAAA,OAAA;AAE/B,IAAA,IAAA,CAAK,MAAM,OAAU,GAAA,cAAA;AACrB,IAAA,SAAA,GAAY,KAAK,qBAAsB,EAAA;AACvC,IAAA,IAAA,CAAK,MAAM,OAAU,GAAA,WAAA;AAAA,GAChB,MAAA;AACL,IAAA,SAAA,GAAY,KAAK,qBAAsB,EAAA;AAAA;AAGzC,EAAA,OAAO,UAAU,KAAQ,GAAA,MAAA;AAC3B;AAKa,MAAA,QAAA,GAAW,CACtB,OAEqC,KAAA;AACrC,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,eAA6B,IAAI,CAAA;AACzD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAiB,CAAC,CAAA;AAE5C,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,IAAA,KAAS,QAAQ,OAAS,EAAA;AAC5B,MAAS,QAAA,CAAA,QAAA,CAAS,IAAI,CAAC,CAAA;AAAA;AACzB,GACC,EAAA,CAAC,IAAM,EAAA,OAAO,CAAC,CAAA;AAElB,EAAO,OAAA,CAAC,SAAS,KAAK,CAAA;AACxB;;;;;"}