@tcn/ui 0.0.3 → 0.1.1

package/dist/inputs/select/select.js

@@ -5,7 +5,7 @@ import "../../utils/scroll_away_listener.js";
 import w, { useRef as c, useState as L } from "react";
 import { useForkRef as H } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import J from "classnames";
+import { clsx as J } from "clsx";
 import { SuggestionList as Q } from "../suggestions/suggestion_list.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
@@ -23,30 +23,30 @@ const pe = w.forwardRef(function({
   onKeyUp: f,
   value: m,
   placeholder: _ = "-- Select --",
-  noOptionMatchedMessage: C,
-  trimCustomInput: E = !1,
-  className: T,
+  noOptionMatchedMessage: x,
+  trimCustomInput: C = !1,
+  className: E,
   onMouseDown: p,
   onMouseUp: d,
   onChange: g,
-  ...x
+  ...T
 }, D) {
   const K = w.Children.toArray(
     t
-  ), l = c(""), M = c(!1), h = c(!1), [N, S] = L(null), i = c(null), [y, b] = L(!1), j = H(D, i), R = Z(K, m || ""), k = R == null ? _ || "" : R.props.label;
+  ), l = c(""), M = c(!1), h = c(!1), [j, S] = L(null), i = c(null), [y, b] = L(!1), q = H(D, i), R = Z(K, m || ""), k = R == null ? _ || "" : R.props.label;
   function A() {
     b(!0);
   }
   function o() {
     b(!1);
   }
-  function q() {
+  function B() {
     const e = i.current;
     e != null && requestAnimationFrame(() => {
       e.focus();
     }), o();
   }
-  function B(e, s, r) {
+  function N(e, s, r) {
     const F = i.current;
     F != null && requestAnimationFrame(() => {
       r && g && g(e), F.focus();
@@ -73,10 +73,10 @@ const pe = w.forwardRef(function({
     /* @__PURE__ */ u(
       W,
       {
-        ref: j,
-        className: J(T, "select", O.select),
+        ref: q,
+        className: J(E, "select", O.select),
         width: "100%",
-        ...x,
+        ...T,
         hAlign: "start",
         value: k,
         onKeyDown: U,
@@ -89,13 +89,13 @@ const pe = w.forwardRef(function({
     y && /* @__PURE__ */ u(
       Q,
       {
-        anchorElement: N,
-        onClose: q,
+        anchorElement: j,
+        onClose: B,
         value: "",
         scrollToValue: m || "",
-        trimCustomInput: E,
-        onOptionSelect: B,
-        noSuggestionMessage: C,
+        trimCustomInput: C,
+        onOptionSelect: N,
+        noSuggestionMessage: x,
         children: t
       }
     )

package/dist/inputs/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport classNames from 'classnames';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={classNames(className, 'select', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={styles.selectedLabel}>{selectedLabel}</span>\n      </Button>\n      {isSuggestionsOpen && (\n        <SuggestionList\n          anchorElement={anchorElement}\n          onClose={handleClose}\n          value={''}\n          scrollToValue={value || ''}\n          trimCustomInput={trimCustomInput}\n          onOptionSelect={handleSelection}\n          noSuggestionMessage={noOptionMatchedMessage}\n        >\n          {children}\n        </SuggestionList>\n      )}\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","classNames","styles","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"select.js","sources":["../../../src/inputs/select/select.tsx"],"sourcesContent":["import { useForkRef } from '../../utils/index.js';\nimport { clsx } from 'clsx';\nimport React, { useRef, useState } from 'react';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { OptionProps } from '../options/option.js';\nimport { Button, type ButtonProps } from '../../actions/index.js';\nimport styles from './select.module.css';\n\nfunction findOptionFromValue(options: React.ReactElement<OptionProps>[], value: string) {\n  return options.find(option => option.props.value === value);\n}\n\nexport interface SelectProps\n  extends Omit<ButtonProps, 'children' | 'onChange' | 'value'> {\n  children?: React.ReactElement<OptionProps>[] | React.ReactElement<OptionProps>;\n  onChange?: (value: string) => void;\n  value?: string | null;\n  placeholder?: string;\n  noOptionMatchedMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n}\n\nexport const Select = React.forwardRef(function Select(\n  {\n    children = [],\n    onKeyDown,\n    onKeyUp,\n    value,\n    placeholder = '-- Select --',\n    noOptionMatchedMessage,\n    trimCustomInput = false,\n    className,\n    onMouseDown,\n    onMouseUp,\n    onChange,\n    ...props\n  }: SelectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const safeChildren = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n  const keyPressedDownRef = useRef('');\n  const isAlreadyFocusedRef = useRef(false);\n  const isClosingRef = useRef(false);\n  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(null);\n  const internalButtonRef = useRef<HTMLButtonElement | null>(null);\n  const [isSuggestionsOpen, setIsSuggestionsOpen] = useState(false);\n  const forkedRef = useForkRef(ref, internalButtonRef);\n  const selectedOption = findOptionFromValue(safeChildren, value || '');\n  const selectedLabel =\n    selectedOption == null ? placeholder || '' : selectedOption.props.label;\n\n  function openSuggestions() {\n    setIsSuggestionsOpen(true);\n  }\n\n  function closeSuggestions() {\n    setIsSuggestionsOpen(false);\n  }\n\n  function handleClose() {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleSelection(value: string, _: string | undefined, isSuggestion: boolean) {\n    const button = internalButtonRef.current;\n\n    if (button != null) {\n      requestAnimationFrame(() => {\n        if (isSuggestion) {\n          onChange && onChange(value);\n        }\n        button.focus();\n      });\n    }\n\n    closeSuggestions();\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n    onKeyDown && onKeyDown(event);\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    const isSameKey = (keyPressedDownRef.current = event.key);\n\n    keyPressedDownRef.current = '';\n    const key = event.key;\n\n    if (isSameKey && (key === 'Enter' || key === ' ')) {\n      if (isSuggestionsOpen) {\n        closeSuggestions();\n      } else {\n        openSuggestions();\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handlMouseDown(event: React.MouseEvent<HTMLButtonElement>) {\n    setAnchorElement(event.currentTarget);\n    isAlreadyFocusedRef.current = document.activeElement === event.currentTarget;\n    onMouseDown && onMouseDown(event);\n  }\n\n  function handleMouseUp(event: React.MouseEvent<HTMLButtonElement>) {\n    if (isClosingRef.current) {\n      isClosingRef.current = false;\n      closeSuggestions();\n    }\n\n    openSuggestions();\n    onMouseUp && onMouseUp(event);\n  }\n\n  return (\n    <>\n      <Button\n        ref={forkedRef}\n        className={clsx(className, 'select', styles.select)}\n        width=\"100%\"\n        {...props}\n        hAlign=\"start\"\n        value={selectedLabel}\n        onKeyDown={handleKeyDown}\n        onKeyUp={handleKeyUp}\n        onMouseDown={handlMouseDown}\n        onMouseUp={handleMouseUp}\n      >\n        <span className={styles.selectedLabel}>{selectedLabel}</span>\n      </Button>\n      {isSuggestionsOpen && (\n        <SuggestionList\n          anchorElement={anchorElement}\n          onClose={handleClose}\n          value={''}\n          scrollToValue={value || ''}\n          trimCustomInput={trimCustomInput}\n          onOptionSelect={handleSelection}\n          noSuggestionMessage={noOptionMatchedMessage}\n        >\n          {children}\n        </SuggestionList>\n      )}\n    </>\n  );\n});\n"],"names":["findOptionFromValue","options","value","option","Select","React","children","onKeyDown","onKeyUp","placeholder","noOptionMatchedMessage","trimCustomInput","className","onMouseDown","onMouseUp","onChange","props","ref","safeChildren","keyPressedDownRef","useRef","isAlreadyFocusedRef","isClosingRef","anchorElement","setAnchorElement","useState","internalButtonRef","isSuggestionsOpen","setIsSuggestionsOpen","forkedRef","useForkRef","selectedOption","selectedLabel","openSuggestions","closeSuggestions","handleClose","button","handleSelection","_","isSuggestion","handleKeyDown","event","key","handleKeyUp","isSameKey","handlMouseDown","handleMouseUp","jsxs","Fragment","jsx","Button","clsx","styles","SuggestionList"],"mappings":"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"}

package/dist/inputs/slider/slider.js

@@ -1,15 +1,15 @@
 import { jsx as p } from "react/jsx-runtime";
-import m from "classnames";
+import { clsx as m } from "clsx";
 import g, { useRef as v, useLayoutEffect as y } from "react";
 import "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as R } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, x = g.forwardRef(function({ style: i, className: l, width: u, min: r = 0, max: t = 100, onChange: o, ...n }, c) {
-  const a = v(null), d = R(c, a);
+import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, N = g.forwardRef(function({ style: l, className: a, width: u, min: r = 0, max: t = 100, onChange: o, ...n }, c) {
+  const i = v(null), d = R(c, i);
   return y(() => {
-    const e = a.current;
+    const e = i.current;
     if (e == null) return;
     const s = () => {
       const f = (parseFloat(e.value) - r) / (t - r) * 100;
@@ -22,7 +22,7 @@ import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, x = g.
     "input",
     {
       type: "range",
-      className: m(l, b.slider, "slider"),
+      className: m(a, b.slider, "slider"),
       "data-is-disabled": n.disabled || !1,
       ref: d,
       onChange: (e) => {
@@ -32,11 +32,11 @@ import '../../slider.css';const S = "_slider_eb84151", b = { slider: S }, x = g.
       min: String(r),
       max: String(t),
       "data-width": "100%",
-      style: { width: u, ...i }
+      style: { width: u, ...l }
     }
   );
 });
 export {
-  x as Slider
+  N as Slider
 };
 //# sourceMappingURL=slider.js.map

package/dist/inputs/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sources":["../../../src/inputs/slider/slider.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './slider.module.css';\nimport { useForkRef } from '../../utils/index.js';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  value?: string;\n  list?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Slider = React.forwardRef(function Slider(\n  { style, className, width, min = 0, max = 100, onChange, ...props }: SliderProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const localRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, localRef);\n\n  useLayoutEffect(() => {\n    const range = localRef.current;\n    if (range == null) return;\n    const updateProgress = () => {\n      const value = parseFloat(range.value);\n      const percent = ((value - min) / (max - min)) * 100;\n      range.style.setProperty('--progress', `${percent}%`);\n    };\n\n    range.addEventListener('input', updateProgress);\n    updateProgress();\n\n    return () => {\n      range.removeEventListener('input', updateProgress);\n    };\n  }, [min, max]);\n\n  return (\n    <input\n      type=\"range\"\n      className={classnames(className, styles.slider, 'slider')}\n      data-is-disabled={props.disabled || false}\n      ref={forkedRef}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      min={String(min)}\n      max={String(max)}\n      data-width=\"100%\"\n      style={{ width, ...style }}\n    />\n  );\n});\n"],"names":["Slider","React","style","className","width","min","max","onChange","props","ref","localRef","useRef","forkedRef","useForkRef","useLayoutEffect","range","updateProgress","percent","jsx","classnames","styles"],"mappings":";;;;;;;;gDAgBaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,KAAK,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,EAAWJ,GAAKC,CAAQ;AAE1C,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAQL,EAAS;AACvB,QAAIK,KAAS,KAAM;AACnB,UAAMC,IAAiB,MAAM;AAE3B,YAAMC,KADQ,WAAWF,EAAM,KAAK,IACVV,MAAQC,IAAMD,KAAQ;AAChD,MAAAU,EAAM,MAAM,YAAY,cAAc,GAAGE,CAAO,GAAG;AAAA,IACrD;AAEA,WAAAF,EAAM,iBAAiB,SAASC,CAAc,GAC9CA,EAAA,GAEO,MAAM;AACX,MAAAD,EAAM,oBAAoB,SAASC,CAAc;AAAA,IACnD;AAAA,EACF,GAAG,CAACX,GAAKC,CAAG,CAAC,GAGX,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAWhB,GAAWiB,EAAO,QAAQ,QAAQ;AAAA,MACxD,oBAAkBZ,EAAM,YAAY;AAAA,MACpC,KAAKI;AAAA,MACL,UAAU,CAAA,MAAK;AACb,QAAAL,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,KAAK,OAAOH,CAAG;AAAA,MACf,KAAK,OAAOC,CAAG;AAAA,MACf,cAAW;AAAA,MACX,OAAO,EAAE,OAAAF,GAAO,GAAGF,EAAA;AAAA,IAAM;AAAA,EAAA;AAG/B,CAAC;"}
+{"version":3,"file":"slider.js","sources":["../../../src/inputs/slider/slider.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useLayoutEffect, useRef } from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './slider.module.css';\nimport { useForkRef } from '../../utils/index.js';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  width?: string;\n  disabled?: boolean;\n  min?: number;\n  max?: number;\n  value?: string;\n  list?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Slider = React.forwardRef(function Slider(\n  { style, className, width, min = 0, max = 100, onChange, ...props }: SliderProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  const localRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, localRef);\n\n  useLayoutEffect(() => {\n    const range = localRef.current;\n    if (range == null) return;\n    const updateProgress = () => {\n      const value = parseFloat(range.value);\n      const percent = ((value - min) / (max - min)) * 100;\n      range.style.setProperty('--progress', `${percent}%`);\n    };\n\n    range.addEventListener('input', updateProgress);\n    updateProgress();\n\n    return () => {\n      range.removeEventListener('input', updateProgress);\n    };\n  }, [min, max]);\n\n  return (\n    <input\n      type=\"range\"\n      className={clsx(className, styles.slider, 'slider')}\n      data-is-disabled={props.disabled || false}\n      ref={forkedRef}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      min={String(min)}\n      max={String(max)}\n      data-width=\"100%\"\n      style={{ width, ...style }}\n    />\n  );\n});\n"],"names":["Slider","React","style","className","width","min","max","onChange","props","ref","localRef","useRef","forkedRef","useForkRef","useLayoutEffect","range","updateProgress","percent","jsx","clsx","styles"],"mappings":";;;;;;;;gDAgBaA,IAASC,EAAM,WAAW,SACrC,EAAE,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,KAAAC,IAAM,GAAG,KAAAC,IAAM,KAAK,UAAAC,GAAU,GAAGC,EAAA,GAC5DC,GACA;AACA,QAAMC,IAAWC,EAAyB,IAAI,GACxCC,IAAYC,EAAWJ,GAAKC,CAAQ;AAE1C,SAAAI,EAAgB,MAAM;AACpB,UAAMC,IAAQL,EAAS;AACvB,QAAIK,KAAS,KAAM;AACnB,UAAMC,IAAiB,MAAM;AAE3B,YAAMC,KADQ,WAAWF,EAAM,KAAK,IACVV,MAAQC,IAAMD,KAAQ;AAChD,MAAAU,EAAM,MAAM,YAAY,cAAc,GAAGE,CAAO,GAAG;AAAA,IACrD;AAEA,WAAAF,EAAM,iBAAiB,SAASC,CAAc,GAC9CA,EAAA,GAEO,MAAM;AACX,MAAAD,EAAM,oBAAoB,SAASC,CAAc;AAAA,IACnD;AAAA,EACF,GAAG,CAACX,GAAKC,CAAG,CAAC,GAGX,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,WAAWC,EAAKhB,GAAWiB,EAAO,QAAQ,QAAQ;AAAA,MAClD,oBAAkBZ,EAAM,YAAY;AAAA,MACpC,KAAKI;AAAA,MACL,UAAU,CAAA,MAAK;AACb,QAAAL,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,KAAK,OAAOH,CAAG;AAAA,MACf,KAAK,OAAOC,CAAG;AAAA,MACf,cAAW;AAAA,MACX,OAAO,EAAE,OAAAF,GAAO,GAAGF,EAAA;AAAA,IAAM;AAAA,EAAA;AAG/B,CAAC;"}

package/dist/inputs/suggestions/suggestion_item.d.ts

@@ -3,7 +3,7 @@ export interface SuggestionItemProps {
     isFocused: boolean;
     isSelected: boolean;
     option: React.ReactElement;
-    onClick?: (value: string, label: string, isSuggestion: boolean) => void;
+    onClick?: (value: string, label: string, isSuggestion: boolean, obfuscate: boolean) => void;
 }
 export declare function SuggestionItem({ isFocused, isSelected, option, onClick, }: SuggestionItemProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=suggestion_item.d.ts.map

package/dist/inputs/suggestions/suggestion_item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion_item.d.ts","sourceRoot":"","sources":["../../../src/inputs/suggestions/suggestion_item.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,OAAO,KAAK,IAAI,CAAC;CACzE;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,UAAU,EACV,MAAM,EACN,OAAO,GACR,EAAE,mBAAmB,2CAoCrB"}
+{"version":3,"file":"suggestion_item.d.ts","sourceRoot":"","sources":["../../../src/inputs/suggestions/suggestion_item.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,mBAAmB;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC;IAC3B,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,YAAY,EAAE,OAAO,EACrB,SAAS,EAAE,OAAO,KACf,IAAI,CAAC;CACX;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,UAAU,EACV,MAAM,EACN,OAAO,GACR,EAAE,mBAAmB,2CAyCrB"}

package/dist/inputs/suggestions/suggestion_item.js

@@ -1,34 +1,39 @@
-import { jsx as u } from "react/jsx-runtime";
-import a from "classnames";
-import { useRef as c, useEffect as i } from "react";
-import '../../suggestion_item.css';const m = "_suggestion-item_6b60309", b = { "suggestion-item": m };
+import { jsx as i } from "react/jsx-runtime";
+import { clsx as a } from "clsx";
+import { useRef as c, useEffect as u } from "react";
+import '../../suggestion_item.css';const f = "_suggestion-item_6b60309", b = { "suggestion-item": f };
 function p({
   isFocused: e,
-  isSelected: n,
-  option: s,
+  isSelected: o,
+  option: t,
   onClick: l
 }) {
-  const o = c(null), r = s.props.disabled;
-  return i(() => {
-    const t = o.current;
-    n && t != null && t.scrollIntoView({ block: "start" });
-  }, [n]), i(() => {
-    const t = o.current;
-    e && t != null && t.scrollIntoView({ block: "center" });
-  }, [e]), /* @__PURE__ */ u(
+  const n = c(null), r = t.props.disabled;
+  return u(() => {
+    const s = n.current;
+    o && s != null && s.scrollIntoView({ block: "start" });
+  }, [o]), u(() => {
+    const s = n.current;
+    e && s != null && s.scrollIntoView({ block: "center" });
+  }, [e]), /* @__PURE__ */ i(
     "button",
     {
       tabIndex: -1,
-      ref: o,
+      ref: n,
       className: a(b["suggestion-item"], "suggestion-item"),
-      "data-is-selected": n,
+      "data-is-selected": o,
       "data-is-focused": e,
       "data-disabled": r,
       disabled: r,
       onClick: () => {
-        !r && l && l(s.props.value, s.props.label, !0);
+        !r && l && l(
+          t.props.value,
+          t.props.label,
+          !0,
+          t.props.obfuscate ?? !1
+        );
       },
-      children: s
+      children: t
     }
   );
 }

package/dist/inputs/suggestions/suggestion_item.js.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion_item.js","sources":["../../../src/inputs/suggestions/suggestion_item.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React, { useEffect, useRef } from 'react';\nimport styles from './suggestion_item.module.css';\n\nexport interface SuggestionItemProps {\n  isFocused: boolean;\n  isSelected: boolean;\n  option: React.ReactElement;\n  onClick?: (value: string, label: string, isSuggestion: boolean) => void;\n}\n\nexport function SuggestionItem({\n  isFocused,\n  isSelected,\n  option,\n  onClick,\n}: SuggestionItemProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const isDisabled = option.props.disabled;\n\n  useEffect(() => {\n    const button = buttonRef.current;\n    if (isSelected && button != null) {\n      button.scrollIntoView({ block: 'start' });\n    }\n  }, [isSelected]);\n\n  useEffect(() => {\n    const button = buttonRef.current;\n    if (isFocused && button != null) {\n      button.scrollIntoView({ block: 'center' });\n    }\n  }, [isFocused]);\n\n  return (\n    <button\n      tabIndex={-1}\n      ref={buttonRef}\n      className={classNames(styles['suggestion-item'], 'suggestion-item')}\n      data-is-selected={isSelected}\n      data-is-focused={isFocused}\n      data-disabled={isDisabled}\n      disabled={isDisabled}\n      onClick={() => {\n        if (!isDisabled && onClick) {\n          onClick(option.props.value, option.props.label, true);\n        }\n      }}\n    >\n      {option}\n    </button>\n  );\n}\n"],"names":["SuggestionItem","isFocused","isSelected","option","onClick","buttonRef","useRef","isDisabled","useEffect","button","jsx","classNames","styles"],"mappings":";;;;AAWO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AACF,GAAwB;AACtB,QAAMC,IAAYC,EAAiC,IAAI,GACjDC,IAAaJ,EAAO,MAAM;AAEhC,SAAAK,EAAU,MAAM;AACd,UAAMC,IAASJ,EAAU;AACzB,IAAIH,KAAcO,KAAU,QAC1BA,EAAO,eAAe,EAAE,OAAO,QAAA,CAAS;AAAA,EAE5C,GAAG,CAACP,CAAU,CAAC,GAEfM,EAAU,MAAM;AACd,UAAMC,IAASJ,EAAU;AACzB,IAAIJ,KAAaQ,KAAU,QACzBA,EAAO,eAAe,EAAE,OAAO,SAAA,CAAU;AAAA,EAE7C,GAAG,CAACR,CAAS,CAAC,GAGZ,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,KAAKL;AAAA,MACL,WAAWM,EAAWC,EAAO,iBAAiB,GAAG,iBAAiB;AAAA,MAClE,oBAAkBV;AAAA,MAClB,mBAAiBD;AAAA,MACjB,iBAAeM;AAAA,MACf,UAAUA;AAAA,MACV,SAAS,MAAM;AACb,QAAI,CAACA,KAAcH,KACjBA,EAAQD,EAAO,MAAM,OAAOA,EAAO,MAAM,OAAO,EAAI;AAAA,MAExD;AAAA,MAEC,UAAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"suggestion_item.js","sources":["../../../src/inputs/suggestions/suggestion_item.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React, { useEffect, useRef } from 'react';\nimport styles from './suggestion_item.module.css';\n\nexport interface SuggestionItemProps {\n  isFocused: boolean;\n  isSelected: boolean;\n  option: React.ReactElement;\n  onClick?: (\n    value: string,\n    label: string,\n    isSuggestion: boolean,\n    obfuscate: boolean\n  ) => void;\n}\n\nexport function SuggestionItem({\n  isFocused,\n  isSelected,\n  option,\n  onClick,\n}: SuggestionItemProps) {\n  const buttonRef = useRef<HTMLButtonElement | null>(null);\n  const isDisabled = option.props.disabled;\n\n  useEffect(() => {\n    const button = buttonRef.current;\n    if (isSelected && button != null) {\n      button.scrollIntoView({ block: 'start' });\n    }\n  }, [isSelected]);\n\n  useEffect(() => {\n    const button = buttonRef.current;\n    if (isFocused && button != null) {\n      button.scrollIntoView({ block: 'center' });\n    }\n  }, [isFocused]);\n\n  return (\n    <button\n      tabIndex={-1}\n      ref={buttonRef}\n      className={clsx(styles['suggestion-item'], 'suggestion-item')}\n      data-is-selected={isSelected}\n      data-is-focused={isFocused}\n      data-disabled={isDisabled}\n      disabled={isDisabled}\n      onClick={() => {\n        if (!isDisabled && onClick) {\n          onClick(\n            option.props.value,\n            option.props.label,\n            true,\n            option.props.obfuscate ?? false\n          );\n        }\n      }}\n    >\n      {option}\n    </button>\n  );\n}\n"],"names":["SuggestionItem","isFocused","isSelected","option","onClick","buttonRef","useRef","isDisabled","useEffect","button","jsx","clsx","styles"],"mappings":";;;;AAgBO,SAASA,EAAe;AAAA,EAC7B,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AACF,GAAwB;AACtB,QAAMC,IAAYC,EAAiC,IAAI,GACjDC,IAAaJ,EAAO,MAAM;AAEhC,SAAAK,EAAU,MAAM;AACd,UAAMC,IAASJ,EAAU;AACzB,IAAIH,KAAcO,KAAU,QAC1BA,EAAO,eAAe,EAAE,OAAO,QAAA,CAAS;AAAA,EAE5C,GAAG,CAACP,CAAU,CAAC,GAEfM,EAAU,MAAM;AACd,UAAMC,IAASJ,EAAU;AACzB,IAAIJ,KAAaQ,KAAU,QACzBA,EAAO,eAAe,EAAE,OAAO,SAAA,CAAU;AAAA,EAE7C,GAAG,CAACR,CAAS,CAAC,GAGZ,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,KAAKL;AAAA,MACL,WAAWM,EAAKC,EAAO,iBAAiB,GAAG,iBAAiB;AAAA,MAC5D,oBAAkBV;AAAA,MAClB,mBAAiBD;AAAA,MACjB,iBAAeM;AAAA,MACf,UAAUA;AAAA,MACV,SAAS,MAAM;AACb,QAAI,CAACA,KAAcH,KACjBA;AAAA,UACED,EAAO,MAAM;AAAA,UACbA,EAAO,MAAM;AAAA,UACb;AAAA,UACAA,EAAO,MAAM,aAAa;AAAA,QAAA;AAAA,MAGhC;AAAA,MAEC,UAAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/inputs/suggestions/suggestion_list.d.ts

@@ -5,7 +5,7 @@ export interface SuggestionListProps extends Omit<React.HTMLAttributes<HTMLInput
     anchorElement: HTMLElement | null;
     children?: React.ReactNode;
     onChange?: (value: string) => void;
-    onOptionSelect?: (value: string, label: string | undefined, isSuggestion: boolean) => void;
+    onOptionSelect?: (value: string, label: string | undefined, isSuggestion: boolean, obfuscate: boolean) => void;
     noSuggestionMessage?: React.ReactNode;
     trimCustomInput?: boolean;
     haveValueAsOption?: boolean;

package/dist/inputs/suggestions/suggestion_list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggestion_list.d.ts","sourceRoot":"","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,YAAY,EAAE,OAAO,KAClB,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,CACR,UAAU,EAAE,MAAM,EAClB,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAC7B,IAAI,CAAC;CACX;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,cAAc,EACd,mBAAwC,EACxC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,iBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAqWrB"}
+{"version":3,"file":"suggestion_list.d.ts","sourceRoot":"","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAazE,MAAM,WAAW,mBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,cAAc,CAAC,EAAE,CACf,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,YAAY,EAAE,OAAO,EACrB,SAAS,EAAE,OAAO,KACf,IAAI,CAAC;IACV,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,CACR,UAAU,EAAE,MAAM,EAClB,mBAAmB,EAAE,MAAM,GAAG,IAAI,EAClC,iBAAiB,EAAE,MAAM,GAAG,IAAI,KAC7B,IAAI,CAAC;CACX;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,cAAc,EACd,mBAAwC,EACxC,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,EACT,eAAuB,EACvB,iBAAyB,EACzB,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAuXrB"}

package/dist/inputs/suggestions/suggestion_list.js

@@ -1,21 +1,21 @@
-import { jsx as o, jsxs as N, Fragment as ce } from "react/jsx-runtime";
+import { jsx as r, jsxs as K, Fragment as ce } from "react/jsx-runtime";
 import { BodyText as ae } from "../../typography/body_text/body_text.js";
-import E from "classnames";
+import { clsx as N } from "clsx";
 import "../../callout.module-D8ECmxpO.js";
 import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
 import "../../headline.module-BiwHBtGf.js";
 import "../../subheadline.module-C-v7zMkQ.js";
 import "../../title.module-B16de2jd.js";
-import { VStack as K } from "../../stacks/v_stack.js";
+import { VStack as O } from "../../stacks/v_stack.js";
 import { ZStack as ue } from "../../stacks/z_stack.js";
-import { Children as pe, isValidElement as de, useState as c, useRef as O, useLayoutEffect as S } from "react";
+import { Children as pe, isValidElement as de, useState as a, useRef as T, useLayoutEffect as S } from "react";
 import { FocusRedirect as fe } from "../../utils/focus_redirect.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
 import { SuggestionItem as ge } from "./suggestion_item.js";
-import { Option as T } from "../options/option.js";
+import { Option as U } from "../options/option.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import "../../actions/button/slim_button/slim_button.js";
@@ -26,68 +26,78 @@ import { Popper as me } from "../../overlay/popper/popper.js";
 import '../../suggestion_list.css';const we = "_suggestion-list_711fb17", be = "_input_a0df060", R = { "suggestion-list": we, input: be }, I = 50, xe = 50;
 function je({
   value: A = "",
-  scrollToValue: d,
-  anchorElement: r,
-  children: U,
-  onOptionSelect: f,
-  noSuggestionMessage: V = "-- No Matches --",
-  onClose: w,
+  scrollToValue: g,
+  anchorElement: l,
+  children: V,
+  onOptionSelect: h,
+  noSuggestionMessage: P = "-- No Matches --",
+  onClose: b,
   onChange: D,
   onKeyUp: F,
   onKeyDown: H,
-  trimCustomInput: P = !1,
-  haveValueAsOption: W = !1,
-  ...$
+  trimCustomInput: W = !1,
+  haveValueAsOption: $ = !1,
+  ...j
 }) {
-  const b = pe.toArray(U).filter(
-    (e) => de(e) && e.type === T
-  ), [x, j] = c(() => {
-    if (d != null) {
-      const e = b.findIndex((i) => i.props.value === d);
+  const x = pe.toArray(V).filter(
+    (e) => de(e) && e.type === U
+  ), [L, q] = a(() => {
+    if (g != null) {
+      const e = x.findIndex((o) => o.props.value === g);
       if (e !== -1)
         return e;
     }
     return -1;
-  }), M = O(""), [q, _] = c(I), [u, L] = c(x), [g, Z] = c(A), l = O(null), [X, z] = c(b.length), [n, B] = c(
+  }), M = T(""), [Z, _] = a(I), [f, k] = a(L), [m, X] = a(A), c = T(null), [z, G] = a(x.length), [n, B] = a(
     () => C(A, I)
-  ), [G, J] = c(), [Q, Y] = c();
-  function ee(e) {
-    const i = e.key, t = e.currentTarget, s = M.current = i;
+  ), [J, Q] = a(), [Y, ee] = a();
+  function te(e) {
+    const o = e.key, t = e.currentTarget, s = M.current = o;
     if (M.current = "", s)
-      switch (i) {
+      switch (o) {
         case "Enter": {
-          if (n[u] == null) {
-            const p = P ? t.value.trim() : t.value;
+          if (n[f] == null) {
+            const p = W ? t.value.trim() : t.value;
             if (p === "")
               return;
-            const y = p.toLocaleLowerCase(), a = b.find(
+            const y = p.toLocaleLowerCase(), i = x.find(
               (v) => v.props.value.toLocaleLowerCase() === y || v.props.label != null && v.props.label.toLocaleLowerCase() === y
-            ), m = a != null, re = a?.props.label || p, le = a?.props.value || p;
+            ), E = i != null, d = i?.props.label || p, le = i?.props.value || p;
             requestAnimationFrame(() => {
-              f && f(le, re, m);
+              h && h(
+                le,
+                d,
+                E,
+                i?.props.obfuscate ?? !1
+              );
             });
             break;
           }
-          const h = n[u].props;
-          if (h.disabled)
+          const u = n[f].props;
+          if (u.disabled)
             break;
           requestAnimationFrame(() => {
-            f && f(h.value, h.label, !0);
+            h && h(
+              u.value,
+              u.label,
+              !0,
+              u.obfuscate ?? !1
+            );
           });
           break;
         }
         case "Escape": {
-          w && w(t.value, t.selectionStart, t.selectionEnd);
+          b && b(t.value, t.selectionStart, t.selectionEnd);
           break;
         }
       }
     F && F(e);
   }
-  function te(e) {
-    const i = e.key;
-    switch (M.current = i, i) {
+  function se(e) {
+    const o = e.key;
+    switch (M.current = o, o) {
       case "ArrowDown": {
-        let t = u + 1;
+        let t = f + 1;
         for (; t < n.length && n[t]?.props.disabled; )
           t++;
         if (t === n.length) {
@@ -95,13 +105,13 @@ function je({
             t++;
           t === n.length && (t = -1);
         }
-        L(t), e.preventDefault();
+        k(t), e.preventDefault();
         break;
       }
       case "Tab": {
         let t = 1;
         e.shiftKey && (t = -1);
-        let s = u + t;
+        let s = f + t;
         if (t > 0)
           for (; s < n.length && n[s]?.props.disabled; )
             s++;
@@ -117,11 +127,11 @@ function je({
             s--;
           s === -1 && (s = -1);
         }
-        L(s), e.preventDefault();
+        k(s), e.preventDefault();
         break;
       }
       case "ArrowUp": {
-        let t = u - 1;
+        let t = f - 1;
         for (; t >= 0 && n[t]?.props.disabled; )
           t--;
         if (t === -1) {
@@ -129,105 +139,105 @@ function je({
             t--;
           t === -1 && (t = -1);
         }
-        L(t), e.preventDefault();
+        k(t), e.preventDefault();
         break;
       }
     }
     H && H(e);
   }
-  function C(e, i) {
-    const t = b.filter((s) => {
-      const k = s.props, h = String(k.label).toLocaleLowerCase(), p = k.keywords?.map((m) => m.toLocaleLowerCase()) || [], y = String(k.value).toLocaleLowerCase(), a = e.toLocaleLowerCase();
-      return h.includes(a) || p.some((m) => m.includes(a)) || y.includes(a);
+  function C(e, o) {
+    const t = x.filter((s) => {
+      const w = s.props, u = String(w.label).toLocaleLowerCase(), p = w.keywords?.map((d) => d.toLocaleLowerCase()) || [], y = String(w.value).toLocaleLowerCase(), i = e.toLocaleLowerCase();
+      return w.obfuscate ?? !1 ? u.includes(i) || p.some((d) => d.includes(i)) : u.includes(i) || p.some((d) => d.includes(i)) || y.includes(i);
     });
-    return W && e.trim().length > 0 && !t.some((s) => s.props.value === e) && t.unshift(
-      /* @__PURE__ */ o(T, { value: e, label: e, keywords: [e], children: e }, "value")
-    ), z(t.length), t.slice(0, i);
+    return $ && e.trim().length > 0 && !t.some((s) => s.props.value === e) && t.unshift(
+      /* @__PURE__ */ r(U, { value: e, label: e, keywords: [e], children: e }, "value")
+    ), G(t.length), t.slice(0, o);
   }
-  function se() {
-    const e = l.current;
+  function ne() {
+    const e = c.current;
     e?.focus();
   }
-  function ne() {
-    const e = l.current;
-    e != null && w && w(e.value, e.selectionStart, e.selectionEnd);
+  function oe() {
+    const e = c.current;
+    e != null && b && b(e.value, e.selectionStart, e.selectionEnd);
   }
   function ie(e) {
-    const i = e.currentTarget;
-    _(I), Z(e.target.value);
-    const t = C(i.value, I);
+    const o = e.currentTarget;
+    _(I), X(e.target.value);
+    const t = C(o.value, I);
     B(t), D && D(e.target.value);
   }
-  function oe() {
-    const e = q + xe;
+  function re() {
+    const e = Z + xe;
     _(e);
-    const i = C(g, e);
-    B(i);
+    const o = C(m, e);
+    B(o);
   }
   return S(() => {
-    const e = l.current;
+    const e = c.current;
     e != null && e.value.length > 0 ? e.select() : e?.focus();
   }, []), S(() => {
-    if (r != null) {
-      const e = r.getBoundingClientRect();
-      J(`${e.width}px`), Y(`${e.height}px`), l.current != null && r instanceof HTMLInputElement && (l.current.value = r.value, l.current.selectionStart = r.selectionStart, l.current.selectionEnd = r.selectionEnd);
+    if (l != null) {
+      const e = l.getBoundingClientRect();
+      Q(`${e.width}px`), ee(`${e.height}px`), c.current != null && l instanceof HTMLInputElement && (c.current.value = l.value, c.current.selectionStart = l.selectionStart, c.current.selectionEnd = l.selectionEnd);
     }
-  }, [r]), S(() => {
-    if (d != null) {
+  }, [l]), S(() => {
+    if (g != null) {
       const e = n.findIndex(
-        (i) => i.props.value === d
+        (o) => o.props.value === g
       );
-      j(e);
+      q(e);
     }
-  }, [n, d]), S(() => {
-    L(g === "" ? x : -1);
-  }, [g, x]), /* @__PURE__ */ o(
+  }, [n, g]), S(() => {
+    k(m === "" ? L : -1);
+  }, [m, L]), /* @__PURE__ */ r(
     me,
     {
       open: !0,
-      anchorElement: r,
-      onClose: ne,
+      anchorElement: l,
+      onClose: oe,
       verticalAnchor: "top",
       verticalOrigin: "top",
       verticalOffset: -4,
-      children: /* @__PURE__ */ N(
-        K,
+      children: /* @__PURE__ */ K(
+        O,
         {
-          minHeight: `calc(${Q}, 8px)`,
+          minHeight: `calc(${Y}, 8px)`,
           maxHeight: "300px",
-          minWidth: G,
+          minWidth: J,
           width: "auto",
           hAlign: "start",
-          className: E(R["suggestion-list"], "suggestion-list"),
+          className: N(R["suggestion-list"], "suggestion-list"),
           children: [
-            /* @__PURE__ */ o(
+            /* @__PURE__ */ r(
               "input",
               {
-                ref: l,
-                value: g,
-                onKeyUp: ee,
-                onKeyDown: te,
+                ref: c,
+                value: m,
+                onKeyUp: te,
+                onKeyDown: se,
                 onChange: ie,
-                className: E(R.input, "suggestion-list-search-input"),
-                ...$
+                className: N(R.input, "suggestion-list-search-input"),
+                ...j
               },
               -1
             ),
-            /* @__PURE__ */ N(K, { children: [
-              n.map((e, i) => /* @__PURE__ */ o(
+            /* @__PURE__ */ K(O, { children: [
+              n.map((e, o) => /* @__PURE__ */ r(
                 ge,
                 {
                   option: e,
-                  isSelected: i === x && g !== "",
-                  isFocused: i === u,
-                  onClick: f
+                  isSelected: o === L && m !== "",
+                  isFocused: o === f,
+                  onClick: h
                 },
-                i
+                o
               )),
-              X > n.length && /* @__PURE__ */ o(ce, { children: /* @__PURE__ */ o(he, { marginBlock: "8px", hierarchy: "tertiary", onClick: oe, children: "Show More" }) })
+              z > n.length && /* @__PURE__ */ r(ce, { children: /* @__PURE__ */ r(he, { marginBlock: "8px", hierarchy: "tertiary", onClick: re, children: "Show More" }) })
             ] }),
-            n.length === 0 && /* @__PURE__ */ o(ue, { padding: "8px", className: R["no-results"], children: /* @__PURE__ */ o(ae, { children: V }) }),
-            /* @__PURE__ */ o(fe, { onRedirect: se }, n.length + 1)
+            n.length === 0 && /* @__PURE__ */ r(ue, { padding: "8px", className: R["no-results"], children: /* @__PURE__ */ r(ae, { children: P }) }),
+            /* @__PURE__ */ r(fe, { onRedirect: ne }, n.length + 1)
           ]
         }
       )