@tcn/ui 0.0.4 → 0.2.0

package/dist/inputs/suggestions/suggestion_list.js

@@ -1,21 +1,21 @@
-import { jsx as o, jsxs as E, 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 { clsx as K } from "clsx";
+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 N } from "../../stacks/v_stack.js";
+import "../../typography/title/title.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__ */ E(
-        N,
+      children: /* @__PURE__ */ K(
+        O,
         {
-          minHeight: `calc(${Q}, 8px)`,
+          minHeight: `calc(${Y}, 8px)`,
           maxHeight: "300px",
-          minWidth: G,
+          minWidth: J,
           width: "auto",
           hAlign: "start",
-          className: K(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: K(R.input, "suggestion-list-search-input"),
-                ...$
+                className: N(R.input, "suggestion-list-search-input"),
+                ...j
               },
               -1
             ),
-            /* @__PURE__ */ E(N, { 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)
           ]
         }
       )

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

@@ -1 +1 @@
-{"version":3,"file":"suggestion_list.js","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, Children, isValidElement } from 'react';\nimport { useRef, useState } from 'react';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { SuggestionItem } from './suggestion_item.js';\nimport { OptionProps, Option } from '../options/option.js';\nimport styles from './suggestion_list.module.css';\n\nimport { Button } from '../../actions/index.js';\nimport { Popper } from '../../overlay/popper/popper.js';\n\nconst MAX_RESULTS = 50;\nconst BATCH_SIZE = 50;\n\nexport interface SuggestionListProps\n  extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  value?: string;\n  scrollToValue?: string;\n  anchorElement: HTMLElement | null;\n  children?: React.ReactNode;\n  onChange?: (value: string) => void;\n  onOptionSelect?: (\n    value: string,\n    label: string | undefined,\n    isSuggestion: boolean\n  ) => void;\n  noSuggestionMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n  haveValueAsOption?: boolean;\n  onClose?: (\n    inputValue: string,\n    cursorStartPosition: number | null,\n    cursorEndPosition: number | null\n  ) => void;\n}\n\nexport function SuggestionList({\n  value = '',\n  scrollToValue,\n  anchorElement,\n  children,\n  onOptionSelect,\n  noSuggestionMessage = '-- No Matches --',\n  onClose,\n  onChange,\n  onKeyUp,\n  onKeyDown,\n  trimCustomInput = false,\n  haveValueAsOption = false,\n  ...props\n}: SuggestionListProps) {\n  // Extract valid Option components from children\n  const suggestions = Children.toArray(children).filter(\n    (child): child is React.ReactElement<OptionProps> =>\n      isValidElement(child) && child.type === Option\n  );\n\n  const [selectedIndex, setSelectedIndex] = useState(() => {\n    if (scrollToValue != null) {\n      const index = suggestions.findIndex(option => option.props.value === scrollToValue);\n      if (index !== -1) {\n        return index;\n      }\n    }\n    return -1;\n  });\n\n  const keyPressedDownRef = useRef('');\n  const [maxResults, setMaxResults] = useState(MAX_RESULTS);\n  const [focusedIndex, setFocusedIndex] = useState(selectedIndex);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);\n  const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(\n    () => getMatchedOptions(value, MAX_RESULTS)\n  );\n  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    const input = event.currentTarget;\n\n    const isSameKey = (keyPressedDownRef.current = key);\n    keyPressedDownRef.current = '';\n\n    // Enter and Escape remove the popover, so we want to handle this on keyup.\n    // This prevents from another element from getting the key events.\n    if (isSameKey) {\n      switch (key) {\n        case 'Enter': {\n          if (matchedOptions[focusedIndex] == null) {\n            const value = trimCustomInput ? input.value.trim() : input.value;\n\n            if (value === '') {\n              return;\n            }\n\n            const lowercaseValue = value.toLocaleLowerCase();\n            const option = suggestions.find(\n              option =>\n                option.props.value.toLocaleLowerCase() === lowercaseValue ||\n                (option.props.label != null &&\n                  option.props.label.toLocaleLowerCase() === lowercaseValue)\n            );\n\n            const isSuggestion = option != null;\n            const label = option?.props.label || value;\n            const optionValue = option?.props.value || value;\n\n            requestAnimationFrame(() => {\n              onOptionSelect && onOptionSelect(optionValue, label, isSuggestion);\n            });\n\n            break;\n          }\n          const selectedOption = matchedOptions[focusedIndex];\n          const optionProps = selectedOption.props;\n\n          // Don't select disabled options\n          if (optionProps.disabled) {\n            break;\n          }\n\n          requestAnimationFrame(() => {\n            onOptionSelect && onOptionSelect(optionProps.value, optionProps.label, true);\n          });\n          break;\n        }\n        case 'Escape': {\n          onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n          break;\n        }\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n\n    // We handle these key events on keydown to be responsive navigation.\n    switch (key) {\n      case 'ArrowDown': {\n        let newIndex = focusedIndex + 1;\n\n        // Skip disabled options\n        while (\n          newIndex < matchedOptions.length &&\n          matchedOptions[newIndex]?.props.disabled\n        ) {\n          newIndex++;\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'Tab': {\n        let step = 1;\n        if (event.shiftKey) {\n          step = -1;\n        }\n        let newIndex = focusedIndex + step;\n        // Skip disabled options\n        if (step > 0) {\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n        } else {\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        } else if (newIndex <= -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'ArrowUp': {\n        let newIndex = focusedIndex - 1;\n\n        // Skip disabled options\n        while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n          newIndex--;\n        }\n\n        if (newIndex === -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n    }\n    onKeyDown && onKeyDown(event);\n  }\n\n  function getMatchedOptions(value: string, maxResults: number) {\n    const results = suggestions.filter(option => {\n      const props = option.props;\n      const label = String(props.label).toLocaleLowerCase();\n      const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];\n      const optionValue = String(props.value).toLocaleLowerCase();\n      const searchValue = value.toLocaleLowerCase();\n\n      return (\n        label.includes(searchValue) ||\n        keywords.some(k => k.includes(searchValue)) ||\n        optionValue.includes(searchValue)\n      );\n    });\n\n    if (\n      haveValueAsOption &&\n      value.trim().length > 0 &&\n      !results.some(r => r.props.value === value)\n    ) {\n      results.unshift(\n        <Option key=\"value\" value={value} label={value} keywords={[value]}>\n          {value}\n        </Option>\n      );\n    }\n\n    setTotalMatchedLength(results.length);\n    return results.slice(0, maxResults);\n  }\n\n  function focusInput() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      input.focus();\n    }\n  }\n\n  function handleUseClose() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n    }\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n\n    setMaxResults(MAX_RESULTS);\n    setInternalValue(event.target.value);\n\n    const newMatches = getMatchedOptions(input.value, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n\n    onChange && onChange(event.target.value);\n  }\n\n  function handleShowMore() {\n    const newMaxResults = maxResults + BATCH_SIZE;\n    setMaxResults(newMaxResults);\n    const newMatches = getMatchedOptions(internalValue, newMaxResults);\n    setMatchedOptions(newMatches);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef.current;\n\n    if (input != null && input.value.length > 0) {\n      input.select();\n    } else if (input != null) {\n      input.focus();\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    if (anchorElement != null) {\n      const rect = anchorElement.getBoundingClientRect();\n      setSuggestionsWidth(`${rect.width}px`);\n      setSuggestionsHeight(`${rect.height}px`);\n\n      if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {\n        internalInputRef.current.value = anchorElement.value;\n        internalInputRef.current.selectionStart = anchorElement.selectionStart;\n        internalInputRef.current.selectionEnd = anchorElement.selectionEnd;\n      }\n    }\n  }, [anchorElement]);\n\n  useLayoutEffect(() => {\n    if (scrollToValue != null) {\n      const index = matchedOptions.findIndex(\n        option => option.props.value === scrollToValue\n      );\n      setSelectedIndex(index);\n    }\n  }, [matchedOptions, scrollToValue]);\n\n  useLayoutEffect(() => {\n    setFocusedIndex(internalValue === '' ? selectedIndex : -1);\n  }, [internalValue, selectedIndex]);\n\n  return (\n    <Popper\n      open\n      anchorElement={anchorElement}\n      onClose={handleUseClose}\n      verticalAnchor=\"top\"\n      verticalOrigin=\"top\"\n      verticalOffset={-4}\n    >\n      <VStack\n        minHeight={`calc(${suggestionsHeight}, 8px)`}\n        maxHeight=\"300px\"\n        minWidth={suggestionsWidth}\n        width=\"auto\"\n        hAlign=\"start\"\n        className={clsx(styles['suggestion-list'], 'suggestion-list')}\n      >\n        <input\n          ref={internalInputRef}\n          key={-1}\n          value={internalValue}\n          onKeyUp={handleKeyUp}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          className={clsx(styles.input, 'suggestion-list-search-input')}\n          {...props}\n        />\n        <VStack>\n          {matchedOptions.map((option, index) => (\n            <SuggestionItem\n              key={index}\n              option={option}\n              isSelected={index === selectedIndex && internalValue !== ''}\n              isFocused={index === focusedIndex}\n              onClick={onOptionSelect}\n            />\n          ))}\n          {totalMatchedLength > matchedOptions.length && (\n            <>\n              <Button marginBlock=\"8px\" hierarchy=\"tertiary\" onClick={handleShowMore}>\n                Show More\n              </Button>\n            </>\n          )}\n        </VStack>\n        {matchedOptions.length === 0 && (\n          <ZStack padding=\"8px\" className={styles['no-results']}>\n            <BodyText>{noSuggestionMessage}</BodyText>\n          </ZStack>\n        )}\n        <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />\n      </VStack>\n    </Popper>\n  );\n}\n"],"names":["MAX_RESULTS","BATCH_SIZE","SuggestionList","value","scrollToValue","anchorElement","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","props","suggestions","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","getMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","results","keywords","k","searchValue","r","jsx","focusInput","handleUseClose","handleChange","newMatches","handleShowMore","newMaxResults","useLayoutEffect","rect","Popper","jsxs","VStack","clsx","styles","SuggestionItem","Fragment","Button","ZStack","BodyText","FocusRedirect"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;wGAcMA,IAAc,IACdC,KAAa;AAwBZ,SAASC,GAAe;AAAA,EAC7B,OAAAC,IAAQ;AAAA,EACR,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,mBAAAC,IAAoB;AAAA,EACpB,GAAGC;AACL,GAAwB;AAEtB,QAAMC,IAAcC,GAAS,QAAQX,CAAQ,EAAE;AAAA,IAC7C,CAACY,MACCC,GAAeD,CAAK,KAAKA,EAAM,SAASE;AAAA,EAAA,GAGtC,CAACC,GAAeC,CAAgB,IAAIC,EAAS,MAAM;AACvD,QAAInB,KAAiB,MAAM;AACzB,YAAMoB,IAAQR,EAAY,UAAU,OAAUS,EAAO,MAAM,UAAUrB,CAAa;AAClF,UAAIoB,MAAU;AACZ,eAAOA;AAAA,IAEX;AACA,WAAO;AAAA,EACT,CAAC,GAEKE,IAAoBC,EAAO,EAAE,GAC7B,CAACC,GAAYC,CAAa,IAAIN,EAASvB,CAAW,GAClD,CAAC8B,GAAcC,CAAe,IAAIR,EAASF,CAAa,GACxD,CAACW,GAAeC,CAAgB,IAAIV,EAASpB,CAAK,GAClD+B,IAAmBP,EAAgC,IAAI,GACvD,CAACQ,GAAoBC,CAAqB,IAAIb,EAASP,EAAY,MAAM,GACzE,CAACqB,GAAgBC,CAAiB,IAAIf;AAAA,IAC1C,MAAMgB,EAAkBpC,GAAOH,CAAW;AAAA,EAAA,GAEtC,CAACwC,GAAkBC,CAAmB,IAAIlB,EAAA,GAC1C,CAACmB,GAAmBC,CAAoB,IAAIpB,EAAA;AAElD,WAASqB,GAAYC,GAA8C;AACjE,UAAMC,IAAMD,EAAM,KACZE,IAAQF,EAAM,eAEdG,IAAatB,EAAkB,UAAUoB;AAK/C,QAJApB,EAAkB,UAAU,IAIxBsB;AACF,cAAQF,GAAA;AAAA,QACN,KAAK,SAAS;AACZ,cAAIT,EAAeP,CAAY,KAAK,MAAM;AACxC,kBAAM3B,IAAQU,IAAkBkC,EAAM,MAAM,KAAA,IAASA,EAAM;AAE3D,gBAAI5C,MAAU;AACZ;AAGF,kBAAM8C,IAAiB9C,EAAM,kBAAA,GACvBsB,IAAST,EAAY;AAAA,cACzB,CAAAS,MACEA,EAAO,MAAM,MAAM,wBAAwBwB,KAC1CxB,EAAO,MAAM,SAAS,QACrBA,EAAO,MAAM,MAAM,wBAAwBwB;AAAA,YAAA,GAG3CC,IAAezB,KAAU,MACzB0B,KAAQ1B,GAAQ,MAAM,SAAStB,GAC/BiD,KAAc3B,GAAQ,MAAM,SAAStB;AAE3C,kCAAsB,MAAM;AAC1B,cAAAI,KAAkBA,EAAe6C,IAAaD,IAAOD,CAAY;AAAA,YACnE,CAAC;AAED;AAAA,UACF;AAEA,gBAAMG,IADiBhB,EAAeP,CAAY,EACf;AAGnC,cAAIuB,EAAY;AACd;AAGF,gCAAsB,MAAM;AAC1B,YAAA9C,KAAkBA,EAAe8C,EAAY,OAAOA,EAAY,OAAO,EAAI;AAAA,UAC7E,CAAC;AACD;AAAA,QACF;AAAA,QACA,KAAK,UAAU;AACb,UAAA5C,KAAWA,EAAQsC,EAAM,OAAOA,EAAM,gBAAgBA,EAAM,YAAY;AACxE;AAAA,QACF;AAAA,MAAA;AAIJ,IAAApC,KAAWA,EAAQkC,CAAK;AAAA,EAC1B;AAEA,WAASS,GAAcT,GAA8C;AACnE,UAAMC,IAAMD,EAAM;AAIlB,YAHAnB,EAAkB,UAAUoB,GAGpBA,GAAA;AAAA,MACN,KAAK,aAAa;AAChB,YAAIS,IAAWzB,IAAe;AAG9B,eACEyB,IAAWlB,EAAe,UAC1BA,EAAekB,CAAQ,GAAG,MAAM;AAEhC,UAAAA;AAGF,YAAIA,MAAalB,EAAe,QAAQ;AAGtC,eADAkB,IAAW,GAETA,IAAWlB,EAAe,UAC1BA,EAAekB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAGF,UAAIA,MAAalB,EAAe,WAC9BkB,IAAW;AAAA,QAEf;AAEA,QAAAxB,EAAgBwB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,MACA,KAAK,OAAO;AACV,YAAIW,IAAO;AACX,QAAIX,EAAM,aACRW,IAAO;AAET,YAAID,IAAWzB,IAAe0B;AAE9B,YAAIA,IAAO;AACT,iBACED,IAAWlB,EAAe,UAC1BA,EAAekB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAAA;AAGF,iBAAOA,KAAY,KAAKlB,EAAekB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAIJ,YAAIA,MAAalB,EAAe,QAAQ;AAGtC,eADAkB,IAAW,GAETA,IAAWlB,EAAe,UAC1BA,EAAekB,CAAQ,GAAG,MAAM;AAEhC,YAAAA;AAGF,UAAIA,MAAalB,EAAe,WAC9BkB,IAAW;AAAA,QAEf,WAAWA,KAAY,IAAI;AAGzB,eADAA,IAAWlB,EAAe,SAAS,GAC5BkB,KAAY,KAAKlB,EAAekB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAGF,UAAIA,MAAa,OACfA,IAAW;AAAA,QAEf;AAEA,QAAAxB,EAAgBwB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,MACA,KAAK,WAAW;AACd,YAAIU,IAAWzB,IAAe;AAG9B,eAAOyB,KAAY,KAAKlB,EAAekB,CAAQ,GAAG,MAAM;AACtD,UAAAA;AAGF,YAAIA,MAAa,IAAI;AAGnB,eADAA,IAAWlB,EAAe,SAAS,GAC5BkB,KAAY,KAAKlB,EAAekB,CAAQ,GAAG,MAAM;AACtD,YAAAA;AAGF,UAAIA,MAAa,OACfA,IAAW;AAAA,QAEf;AAEA,QAAAxB,EAAgBwB,CAAQ,GACxBV,EAAM,eAAA;AACN;AAAA,MACF;AAAA,IAAA;AAEF,IAAAjC,KAAaA,EAAUiC,CAAK;AAAA,EAC9B;AAEA,WAASN,EAAkBpC,GAAeyB,GAAoB;AAC5D,UAAM6B,IAAUzC,EAAY,OAAO,CAAAS,MAAU;AAC3C,YAAMV,IAAQU,EAAO,OACf0B,IAAQ,OAAOpC,EAAM,KAAK,EAAE,kBAAA,GAC5B2C,IAAW3C,EAAM,UAAU,IAAI,OAAK4C,EAAE,kBAAA,CAAmB,KAAK,CAAA,GAC9DP,IAAc,OAAOrC,EAAM,KAAK,EAAE,kBAAA,GAClC6C,IAAczD,EAAM,kBAAA;AAE1B,aACEgD,EAAM,SAASS,CAAW,KAC1BF,EAAS,KAAK,CAAAC,MAAKA,EAAE,SAASC,CAAW,CAAC,KAC1CR,EAAY,SAASQ,CAAW;AAAA,IAEpC,CAAC;AAED,WACE9C,KACAX,EAAM,KAAA,EAAO,SAAS,KACtB,CAACsD,EAAQ,KAAK,CAAAI,MAAKA,EAAE,MAAM,UAAU1D,CAAK,KAE1CsD,EAAQ;AAAA,MACN,gBAAAK,EAAC1C,GAAA,EAAmB,OAAOjB,GAAO,OAAOA,GAAO,UAAU,CAACA,CAAK,GAC7D,UAAAA,EAAAA,GADS,OAEZ;AAAA,IAAA,GAIJiC,EAAsBqB,EAAQ,MAAM,GAC7BA,EAAQ,MAAM,GAAG7B,CAAU;AAAA,EACpC;AAEA,WAASmC,KAAa;AACpB,UAAMhB,IAAQb,EAAiB;AAC/B,IACEa,GAAM,MAAA;AAAA,EAEV;AAEA,WAASiB,KAAiB;AACxB,UAAMjB,IAAQb,EAAiB;AAC/B,IAAIa,KAAS,QACXtC,KAAWA,EAAQsC,EAAM,OAAOA,EAAM,gBAAgBA,EAAM,YAAY;AAAA,EAE5E;AAEA,WAASkB,GAAapB,GAA4C;AAChE,UAAME,IAAQF,EAAM;AAEpB,IAAAhB,EAAc7B,CAAW,GACzBiC,EAAiBY,EAAM,OAAO,KAAK;AAEnC,UAAMqB,IAAa3B,EAAkBQ,EAAM,OAAO/C,CAAW;AAC7D,IAAAsC,EAAkB4B,CAAU,GAE5BxD,KAAYA,EAASmC,EAAM,OAAO,KAAK;AAAA,EACzC;AAEA,WAASsB,KAAiB;AACxB,UAAMC,IAAgBxC,IAAa3B;AACnC,IAAA4B,EAAcuC,CAAa;AAC3B,UAAMF,IAAa3B,EAAkBP,GAAeoC,CAAa;AACjE,IAAA9B,EAAkB4B,CAAU;AAAA,EAC9B;AAEA,SAAAG,EAAgB,MAAM;AACpB,UAAMtB,IAAQb,EAAiB;AAE/B,IAAIa,KAAS,QAAQA,EAAM,MAAM,SAAS,IACxCA,EAAM,OAAA,IAENA,GAAM,MAAA;AAAA,EAEV,GAAG,CAAA,CAAE,GAELsB,EAAgB,MAAM;AACpB,QAAIhE,KAAiB,MAAM;AACzB,YAAMiE,IAAOjE,EAAc,sBAAA;AAC3B,MAAAoC,EAAoB,GAAG6B,EAAK,KAAK,IAAI,GACrC3B,EAAqB,GAAG2B,EAAK,MAAM,IAAI,GAEnCpC,EAAiB,WAAW,QAAQ7B,aAAyB,qBAC/D6B,EAAiB,QAAQ,QAAQ7B,EAAc,OAC/C6B,EAAiB,QAAQ,iBAAiB7B,EAAc,gBACxD6B,EAAiB,QAAQ,eAAe7B,EAAc;AAAA,IAE1D;AAAA,EACF,GAAG,CAACA,CAAa,CAAC,GAElBgE,EAAgB,MAAM;AACpB,QAAIjE,KAAiB,MAAM;AACzB,YAAMoB,IAAQa,EAAe;AAAA,QAC3B,CAAAZ,MAAUA,EAAO,MAAM,UAAUrB;AAAA,MAAA;AAEnC,MAAAkB,EAAiBE,CAAK;AAAA,IACxB;AAAA,EACF,GAAG,CAACa,GAAgBjC,CAAa,CAAC,GAElCiE,EAAgB,MAAM;AACpB,IAAAtC,EAAgBC,MAAkB,KAAKX,IAAgB,EAAE;AAAA,EAC3D,GAAG,CAACW,GAAeX,CAAa,CAAC,GAG/B,gBAAAyC;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MACJ,eAAAlE;AAAA,MACA,SAAS2D;AAAA,MACT,gBAAe;AAAA,MACf,gBAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,UAAA,gBAAAQ;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ/B,CAAiB;AAAA,UACpC,WAAU;AAAA,UACV,UAAUF;AAAA,UACV,OAAM;AAAA,UACN,QAAO;AAAA,UACP,WAAWkC,EAAKC,EAAO,iBAAiB,GAAG,iBAAiB;AAAA,UAE5D,UAAA;AAAA,YAAA,gBAAAb;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAK5B;AAAA,gBAEL,OAAOF;AAAA,gBACP,SAASY;AAAA,gBACT,WAAWU;AAAA,gBACX,UAAUW;AAAA,gBACV,WAAWS,EAAKC,EAAO,OAAO,8BAA8B;AAAA,gBAC3D,GAAG5D;AAAA,cAAA;AAAA,cANC;AAAA,YAAA;AAAA,8BAQN0D,GAAA,EACE,UAAA;AAAA,cAAApC,EAAe,IAAI,CAACZ,GAAQD,MAC3B,gBAAAsC;AAAA,gBAACc;AAAA,gBAAA;AAAA,kBAEC,QAAAnD;AAAA,kBACA,YAAYD,MAAUH,KAAiBW,MAAkB;AAAA,kBACzD,WAAWR,MAAUM;AAAA,kBACrB,SAASvB;AAAA,gBAAA;AAAA,gBAJJiB;AAAA,cAAA,CAMR;AAAA,cACAW,IAAqBE,EAAe,UACnC,gBAAAyB,EAAAe,IAAA,EACE,UAAA,gBAAAf,EAACgB,IAAA,EAAO,aAAY,OAAM,WAAU,YAAW,SAASX,IAAgB,uBAExE,EAAA,CACF;AAAA,YAAA,GAEJ;AAAA,YACC9B,EAAe,WAAW,KACzB,gBAAAyB,EAACiB,MAAO,SAAQ,OAAM,WAAWJ,EAAO,YAAY,GAClD,UAAA,gBAAAb,EAACkB,IAAA,EAAU,aAAoB,GACjC;AAAA,8BAEDC,IAAA,EAA8C,YAAYlB,GAAA,GAAvC1B,EAAe,SAAS,CAA2B;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzE;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"suggestion_list.js","sources":["../../../src/inputs/suggestions/suggestion_list.tsx"],"sourcesContent":["import { BodyText } from '../../typography/index.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { ZStack } from '../../stacks/z_stack.js';\nimport { clsx } from 'clsx';\nimport React, { useLayoutEffect, Children, isValidElement } from 'react';\nimport { useRef, useState } from 'react';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { SuggestionItem } from './suggestion_item.js';\nimport { OptionProps, Option } from '../options/option.js';\nimport styles from './suggestion_list.module.css';\n\nimport { Button } from '../../actions/index.js';\nimport { Popper } from '../../overlay/popper/popper.js';\n\nconst MAX_RESULTS = 50;\nconst BATCH_SIZE = 50;\n\nexport interface SuggestionListProps\n  extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  value?: string;\n  scrollToValue?: string;\n  anchorElement: HTMLElement | null;\n  children?: React.ReactNode;\n  onChange?: (value: string) => void;\n  onOptionSelect?: (\n    value: string,\n    label: string | undefined,\n    isSuggestion: boolean,\n    obfuscate: boolean\n  ) => void;\n  noSuggestionMessage?: React.ReactNode;\n  trimCustomInput?: boolean;\n  haveValueAsOption?: boolean;\n  onClose?: (\n    inputValue: string,\n    cursorStartPosition: number | null,\n    cursorEndPosition: number | null\n  ) => void;\n}\n\nexport function SuggestionList({\n  value = '',\n  scrollToValue,\n  anchorElement,\n  children,\n  onOptionSelect,\n  noSuggestionMessage = '-- No Matches --',\n  onClose,\n  onChange,\n  onKeyUp,\n  onKeyDown,\n  trimCustomInput = false,\n  haveValueAsOption = false,\n  ...props\n}: SuggestionListProps) {\n  // Extract valid Option components from children\n  const suggestions = Children.toArray(children).filter(\n    (child): child is React.ReactElement<OptionProps> =>\n      isValidElement(child) && child.type === Option\n  );\n\n  const [selectedIndex, setSelectedIndex] = useState(() => {\n    if (scrollToValue != null) {\n      const index = suggestions.findIndex(option => option.props.value === scrollToValue);\n      if (index !== -1) {\n        return index;\n      }\n    }\n    return -1;\n  });\n\n  const keyPressedDownRef = useRef('');\n  const [maxResults, setMaxResults] = useState(MAX_RESULTS);\n  const [focusedIndex, setFocusedIndex] = useState(selectedIndex);\n  const [internalValue, setInternalValue] = useState(value);\n  const internalInputRef = useRef<HTMLInputElement | null>(null);\n  const [totalMatchedLength, setTotalMatchedLength] = useState(suggestions.length);\n  const [matchedOptions, setMatchedOptions] = useState<React.ReactElement<OptionProps>[]>(\n    () => getMatchedOptions(value, MAX_RESULTS)\n  );\n  const [suggestionsWidth, setSuggestionsWidth] = useState<string | undefined>();\n  const [suggestionsHeight, setSuggestionsHeight] = useState<string | undefined>();\n\n  function handleKeyUp(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    const input = event.currentTarget;\n\n    const isSameKey = (keyPressedDownRef.current = key);\n    keyPressedDownRef.current = '';\n\n    // Enter and Escape remove the popover, so we want to handle this on keyup.\n    // This prevents from another element from getting the key events.\n    if (isSameKey) {\n      switch (key) {\n        case 'Enter': {\n          if (matchedOptions[focusedIndex] == null) {\n            const value = trimCustomInput ? input.value.trim() : input.value;\n\n            if (value === '') {\n              return;\n            }\n\n            const lowercaseValue = value.toLocaleLowerCase();\n            const option = suggestions.find(\n              option =>\n                option.props.value.toLocaleLowerCase() === lowercaseValue ||\n                (option.props.label != null &&\n                  option.props.label.toLocaleLowerCase() === lowercaseValue)\n            );\n\n            const isSuggestion = option != null;\n            const label = option?.props.label || value;\n            const optionValue = option?.props.value || value;\n\n            requestAnimationFrame(() => {\n              onOptionSelect &&\n                onOptionSelect(\n                  optionValue,\n                  label,\n                  isSuggestion,\n                  option?.props.obfuscate ?? false\n                );\n            });\n\n            break;\n          }\n          const selectedOption = matchedOptions[focusedIndex];\n          const optionProps = selectedOption.props;\n\n          // Don't select disabled options\n          if (optionProps.disabled) {\n            break;\n          }\n\n          requestAnimationFrame(() => {\n            onOptionSelect &&\n              onOptionSelect(\n                optionProps.value,\n                optionProps.label,\n                true,\n                optionProps.obfuscate ?? false\n              );\n          });\n          break;\n        }\n        case 'Escape': {\n          onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n          break;\n        }\n      }\n    }\n\n    onKeyUp && onKeyUp(event);\n  }\n\n  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    const key = event.key;\n    keyPressedDownRef.current = key;\n\n    // We handle these key events on keydown to be responsive navigation.\n    switch (key) {\n      case 'ArrowDown': {\n        let newIndex = focusedIndex + 1;\n\n        // Skip disabled options\n        while (\n          newIndex < matchedOptions.length &&\n          matchedOptions[newIndex]?.props.disabled\n        ) {\n          newIndex++;\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'Tab': {\n        let step = 1;\n        if (event.shiftKey) {\n          step = -1;\n        }\n        let newIndex = focusedIndex + step;\n        // Skip disabled options\n        if (step > 0) {\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n        } else {\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n        }\n\n        if (newIndex === matchedOptions.length) {\n          // Wrap around to first non-disabled option\n          newIndex = 0;\n          while (\n            newIndex < matchedOptions.length &&\n            matchedOptions[newIndex]?.props.disabled\n          ) {\n            newIndex++;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === matchedOptions.length) {\n            newIndex = -1;\n          }\n        } else if (newIndex <= -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n      case 'ArrowUp': {\n        let newIndex = focusedIndex - 1;\n\n        // Skip disabled options\n        while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n          newIndex--;\n        }\n\n        if (newIndex === -1) {\n          // Wrap around to last non-disabled option\n          newIndex = matchedOptions.length - 1;\n          while (newIndex >= 0 && matchedOptions[newIndex]?.props.disabled) {\n            newIndex--;\n          }\n          // If all options are disabled, stay at -1\n          if (newIndex === -1) {\n            newIndex = -1;\n          }\n        }\n\n        setFocusedIndex(newIndex);\n        event.preventDefault();\n        break;\n      }\n    }\n    onKeyDown && onKeyDown(event);\n  }\n\n  function getMatchedOptions(value: string, maxResults: number) {\n    const results = suggestions.filter(option => {\n      const props = option.props;\n      const label = String(props.label).toLocaleLowerCase();\n      const keywords = props.keywords?.map(k => k.toLocaleLowerCase()) || [];\n      const optionValue = String(props.value).toLocaleLowerCase();\n      const searchValue = value.toLocaleLowerCase();\n      const obfuscate = props.obfuscate ?? false;\n\n      // Obfuscated options can only be searched by label or keywords, not by value\n      if (obfuscate) {\n        return label.includes(searchValue) || keywords.some(k => k.includes(searchValue));\n      }\n\n      return (\n        label.includes(searchValue) ||\n        keywords.some(k => k.includes(searchValue)) ||\n        optionValue.includes(searchValue)\n      );\n    });\n\n    if (\n      haveValueAsOption &&\n      value.trim().length > 0 &&\n      !results.some(r => r.props.value === value)\n    ) {\n      results.unshift(\n        <Option key=\"value\" value={value} label={value} keywords={[value]}>\n          {value}\n        </Option>\n      );\n    }\n\n    setTotalMatchedLength(results.length);\n    return results.slice(0, maxResults);\n  }\n\n  function focusInput() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      input.focus();\n    }\n  }\n\n  function handleUseClose() {\n    const input = internalInputRef.current;\n    if (input != null) {\n      onClose && onClose(input.value, input.selectionStart, input.selectionEnd);\n    }\n  }\n\n  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const input = event.currentTarget;\n\n    setMaxResults(MAX_RESULTS);\n    setInternalValue(event.target.value);\n\n    const newMatches = getMatchedOptions(input.value, MAX_RESULTS);\n    setMatchedOptions(newMatches);\n\n    onChange && onChange(event.target.value);\n  }\n\n  function handleShowMore() {\n    const newMaxResults = maxResults + BATCH_SIZE;\n    setMaxResults(newMaxResults);\n    const newMatches = getMatchedOptions(internalValue, newMaxResults);\n    setMatchedOptions(newMatches);\n  }\n\n  useLayoutEffect(() => {\n    const input = internalInputRef.current;\n\n    if (input != null && input.value.length > 0) {\n      input.select();\n    } else if (input != null) {\n      input.focus();\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    if (anchorElement != null) {\n      const rect = anchorElement.getBoundingClientRect();\n      setSuggestionsWidth(`${rect.width}px`);\n      setSuggestionsHeight(`${rect.height}px`);\n\n      if (internalInputRef.current != null && anchorElement instanceof HTMLInputElement) {\n        internalInputRef.current.value = anchorElement.value;\n        internalInputRef.current.selectionStart = anchorElement.selectionStart;\n        internalInputRef.current.selectionEnd = anchorElement.selectionEnd;\n      }\n    }\n  }, [anchorElement]);\n\n  useLayoutEffect(() => {\n    if (scrollToValue != null) {\n      const index = matchedOptions.findIndex(\n        option => option.props.value === scrollToValue\n      );\n      setSelectedIndex(index);\n    }\n  }, [matchedOptions, scrollToValue]);\n\n  useLayoutEffect(() => {\n    setFocusedIndex(internalValue === '' ? selectedIndex : -1);\n  }, [internalValue, selectedIndex]);\n\n  return (\n    <Popper\n      open\n      anchorElement={anchorElement}\n      onClose={handleUseClose}\n      verticalAnchor=\"top\"\n      verticalOrigin=\"top\"\n      verticalOffset={-4}\n    >\n      <VStack\n        minHeight={`calc(${suggestionsHeight}, 8px)`}\n        maxHeight=\"300px\"\n        minWidth={suggestionsWidth}\n        width=\"auto\"\n        hAlign=\"start\"\n        className={clsx(styles['suggestion-list'], 'suggestion-list')}\n      >\n        <input\n          ref={internalInputRef}\n          key={-1}\n          value={internalValue}\n          onKeyUp={handleKeyUp}\n          onKeyDown={handleKeyDown}\n          onChange={handleChange}\n          className={clsx(styles.input, 'suggestion-list-search-input')}\n          {...props}\n        />\n        <VStack>\n          {matchedOptions.map((option, index) => (\n            <SuggestionItem\n              key={index}\n              option={option}\n              isSelected={index === selectedIndex && internalValue !== ''}\n              isFocused={index === focusedIndex}\n              onClick={onOptionSelect}\n            />\n          ))}\n          {totalMatchedLength > matchedOptions.length && (\n            <>\n              <Button marginBlock=\"8px\" hierarchy=\"tertiary\" onClick={handleShowMore}>\n                Show More\n              </Button>\n            </>\n          )}\n        </VStack>\n        {matchedOptions.length === 0 && (\n          <ZStack padding=\"8px\" className={styles['no-results']}>\n            <BodyText>{noSuggestionMessage}</BodyText>\n          </ZStack>\n        )}\n        <FocusRedirect key={matchedOptions.length + 1} onRedirect={focusInput} />\n      </VStack>\n    </Popper>\n  );\n}\n"],"names":["MAX_RESULTS","BATCH_SIZE","SuggestionList","value","scrollToValue","anchorElement","children","onOptionSelect","noSuggestionMessage","onClose","onChange","onKeyUp","onKeyDown","trimCustomInput","haveValueAsOption","props","suggestions","Children","child","isValidElement","Option","selectedIndex","setSelectedIndex","useState","index","option","keyPressedDownRef","useRef","maxResults","setMaxResults","focusedIndex","setFocusedIndex","internalValue","setInternalValue","internalInputRef","totalMatchedLength","setTotalMatchedLength","matchedOptions","setMatchedOptions","getMatchedOptions","suggestionsWidth","setSuggestionsWidth","suggestionsHeight","setSuggestionsHeight","handleKeyUp","event","key","input","isSameKey","lowercaseValue","isSuggestion","label","optionValue","optionProps","handleKeyDown","newIndex","step","results","keywords","k","searchValue","r","jsx","focusInput","handleUseClose","handleChange","newMatches","handleShowMore","newMaxResults","useLayoutEffect","rect","Popper","jsxs","VStack","clsx","styles","SuggestionItem","Fragment","Button","ZStack","BodyText","FocusRedirect"],"mappings":"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"}

package/dist/inputs/textarea/textarea.d.ts

@@ -1,5 +1,5 @@
-import { default as React, HTMLAttributes } from 'react';
-export interface TextareaProps extends Omit<HTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+import { default as React, TextareaHTMLAttributes } from 'react';
+export interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
     value?: string;
     width?: string;
     height?: string;

package/dist/inputs/textarea/textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/inputs/textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,cAAc,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACnF;AAED,eAAO,MAAM,QAAQ,2FAgBnB,CAAC"}
+{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/inputs/textarea/textarea.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAG/C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;CACnF;AAED,eAAO,MAAM,QAAQ,2FAgBnB,CAAC"}

package/dist/inputs/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../../src/inputs/textarea/textarea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './textarea.module.css';\n\nexport interface TextareaProps\n  extends Omit<HTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n  value?: string;\n  width?: string;\n  height?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nexport const Textarea = React.forwardRef(function Textarea(\n  { className, width, height, style, onChange, ...props }: TextareaProps,\n  ref: React.Ref<HTMLTextAreaElement>\n) {\n  return (\n    <textarea\n      style={{ width, height, ...style }}\n      className={clsx(className, styles.textarea, 'textarea')}\n      data-is-disabled={props.disabled || false}\n      ref={ref}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n    />\n  );\n});\n"],"names":["Textarea","React","className","width","height","style","onChange","props","ref","jsx","clsx","styles","e"],"mappings":";;;oDAeaA,IAAWC,EAAM,WAAW,SACvC,EAAE,WAAAC,GAAW,OAAAC,GAAO,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GAChDC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,OAAAN,GAAO,QAAAC,GAAQ,GAAGC,EAAA;AAAA,MAC3B,WAAWK,EAAKR,GAAWS,EAAO,UAAU,UAAU;AAAA,MACtD,oBAAkBJ,EAAM,YAAY;AAAA,MACpC,KAAAC;AAAA,MACA,UAAU,CAAAI,MAAK;AACb,QAAAN,KAAYA,EAASM,EAAE,cAAc,OAAOA,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"textarea.js","sources":["../../../src/inputs/textarea/textarea.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { TextareaHTMLAttributes } from 'react';\nimport styles from './textarea.module.css';\n\nexport interface TextareaProps\n  extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {\n  value?: string;\n  width?: string;\n  height?: string;\n  disabled?: boolean;\n  placeholder?: string;\n  onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;\n}\n\nexport const Textarea = React.forwardRef(function Textarea(\n  { className, width, height, style, onChange, ...props }: TextareaProps,\n  ref: React.Ref<HTMLTextAreaElement>\n) {\n  return (\n    <textarea\n      style={{ width, height, ...style }}\n      className={clsx(className, styles.textarea, 'textarea')}\n      data-is-disabled={props.disabled || false}\n      ref={ref}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n    />\n  );\n});\n"],"names":["Textarea","React","className","width","height","style","onChange","props","ref","jsx","clsx","styles","e"],"mappings":";;;oDAeaA,IAAWC,EAAM,WAAW,SACvC,EAAE,WAAAC,GAAW,OAAAC,GAAO,QAAAC,GAAQ,OAAAC,GAAO,UAAAC,GAAU,GAAGC,EAAA,GAChDC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,OAAAN,GAAO,QAAAC,GAAQ,GAAGC,EAAA;AAAA,MAC3B,WAAWK,EAAKR,GAAWS,EAAO,UAAU,UAAU;AAAA,MACtD,oBAAkBJ,EAAM,YAAY;AAAA,MACpC,KAAAC;AAAA,MACA,UAAU,CAAAI,MAAK;AACb,QAAAN,KAAYA,EAASM,EAAE,cAAc,OAAOA,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGL;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

package/dist/layouts/footer/footer.js

@@ -1,14 +1,14 @@
-import { jsx as c } from "react/jsx-runtime";
+import { jsx as f } from "react/jsx-runtime";
 import s from "react";
 import { clsx as m } from "clsx";
 import { HStack as n } from "../../stacks/h_stack.js";
-import '../../footer.css';const i = "_footer_4a43c3e", d = { footer: i }, u = s.forwardRef(function({ hierarchy: o = "secondary", size: r = "md", children: t, className: e, ...a }, f) {
-  return /* @__PURE__ */ c(
+import '../../footer.css';const i = "_footer_4a43c3e", d = { footer: i }, u = s.forwardRef(function({ hierarchy: o = "secondary", size: r = "md", children: t, className: e, ...a }, c) {
+  return /* @__PURE__ */ f(
     n,
     {
-      ref: f,
+      ref: c,
       as: "footer",
-      className: m(d.footer, e, "footer", "tcn-footer"),
+      className: m(d.footer, e, "tcn-footer"),
       "data-hierarchy": o,
       "data-size": r,
       ...a,

package/dist/layouts/footer/footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"footer.js","sources":["../../../src/layouts/footer/footer.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './footer.module.css';\n\nexport interface FooterProps extends Omit<HStackProps, 'as' | 'children'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n  children?: React.ReactNode;\n}\n\nexport const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer(\n  { hierarchy = 'secondary', size = 'md', children, className, ...props }: FooterProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"footer\"\n      className={clsx(styles.footer, className, 'footer', 'tcn-footer')}\n      data-hierarchy={hierarchy}\n      data-size={size}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Footer","React","hierarchy","size","children","className","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;gDAYaA,IAASC,EAAM,WAAqC,SAC/D,EAAE,WAAAC,IAAY,aAAa,MAAAC,IAAO,MAAM,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAChEC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,QAAQN,GAAW,UAAU,YAAY;AAAA,MAChE,kBAAgBH;AAAA,MAChB,aAAWC;AAAA,MACV,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"footer.js","sources":["../../../src/layouts/footer/footer.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './footer.module.css';\n\nexport interface FooterProps extends Omit<HStackProps, 'as' | 'children'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n  children?: React.ReactNode;\n}\n\nexport const Footer = React.forwardRef<HTMLElement, FooterProps>(function Footer(\n  { hierarchy = 'secondary', size = 'md', children, className, ...props }: FooterProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"footer\"\n      className={clsx(styles.footer, className, 'tcn-footer')}\n      data-hierarchy={hierarchy}\n      data-size={size}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Footer","React","hierarchy","size","children","className","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;gDAYaA,IAASC,EAAM,WAAqC,SAC/D,EAAE,WAAAC,IAAY,aAAa,MAAAC,IAAO,MAAM,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GAChEC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,QAAQN,GAAW,YAAY;AAAA,MACtD,kBAAgBH;AAAA,MAChB,aAAWC;AAAA,MACV,GAAGG;AAAA,MAEH,UAAAF;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/header/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/layouts/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAI5D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,MAAM,iFAwBjB,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/layouts/header/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAG5D,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC;IAC1D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb;AAED,eAAO,MAAM,MAAM,iFAwBjB,CAAC"}

package/dist/layouts/header/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sources":["../../../src/layouts/header/header.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './header.module.css';\n\n// UtilityBar\nexport interface HeaderProps extends Omit<HStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(\n  {\n    hierarchy = 'secondary',\n    height = 'auto',\n    children,\n    className,\n    size = 'md',\n    ...props\n  }: HeaderProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"header\"\n      className={clsx(styles.header, className, 'tcn-header', 'header')}\n      data-hierarchy={hierarchy}\n      data-size={size}\n      height={height}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Header","React","hierarchy","height","children","className","size","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;gDAYaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,QAAQP,GAAW,cAAc,QAAQ;AAAA,MAChE,kBAAgBH;AAAA,MAChB,aAAWI;AAAA,MACX,QAAAH;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}
+{"version":3,"file":"header.js","sources":["../../../src/layouts/header/header.tsx"],"sourcesContent":["import React from 'react';\nimport { clsx } from 'clsx';\nimport { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport type { Hierarchy, Size } from '../../utils/index.js';\nimport styles from './header.module.css';\n\nexport interface HeaderProps extends Omit<HStackProps, 'as'> {\n  hierarchy?: Hierarchy;\n  size?: Size;\n}\n\nexport const Header = React.forwardRef<HTMLElement, HeaderProps>(function Header(\n  {\n    hierarchy = 'secondary',\n    height = 'auto',\n    children,\n    className,\n    size = 'md',\n    ...props\n  }: HeaderProps,\n  ref\n) {\n  return (\n    <HStack\n      ref={ref}\n      as=\"header\"\n      className={clsx(styles.header, className, 'tcn-header', 'header')}\n      data-hierarchy={hierarchy}\n      data-size={size}\n      height={height}\n      {...props}\n    >\n      {children}\n    </HStack>\n  );\n});\n"],"names":["Header","React","hierarchy","height","children","className","size","props","ref","jsx","HStack","clsx","styles"],"mappings":";;;;gDAWaA,IAASC,EAAM,WAAqC,SAC/D;AAAA,EACE,WAAAC,IAAY;AAAA,EACZ,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,GACA;AACA,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAAF;AAAA,MACA,IAAG;AAAA,MACH,WAAWG,EAAKC,EAAO,QAAQP,GAAW,cAAc,QAAQ;AAAA,MAChE,kBAAgBH;AAAA,MAChB,aAAWI;AAAA,MACX,QAAAH;AAAA,MACC,GAAGI;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/layouts/index.d.ts

@@ -1,3 +1,5 @@
+export * from './body/h_body.js';
+export * from './body/v_body.js';
 export * from './column/column.js';
 export * from './divider/divider.js';
 export * from './footer/footer.js';
@@ -8,6 +10,5 @@ export * from './list/list.js';
 export * from './list/section_header.js';
 export * from './sidebar_end/sidebar_end.js';
 export * from './sidebar_start/sidebar_start.js';
-export * from './body/h_body.js';
-export * from './body/v_body.js';
+export * from './utility_bar/utility_bar.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/layouts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/layouts/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,8BAA8B,CAAC"}

package/dist/layouts/index.js

@@ -1,27 +1,29 @@
-import { Column as e } from "./column/column.js";
-import { Divider as m } from "./divider/divider.js";
-import { Footer as p } from "./footer/footer.js";
-import { Grid as d } from "./grid/grid.js";
-import { Header as a } from "./header/header.js";
-import { Item as n } from "./list/item.js";
-import { List as b } from "./list/list.js";
-import { SectionHeader as B } from "./list/section_header.js";
-import { SidebarEnd as l } from "./sidebar_end/sidebar_end.js";
-import { SidebarStart as u } from "./sidebar_start/sidebar_start.js";
-import { HBody as C } from "./body/h_body.js";
-import { VBody as E } from "./body/v_body.js";
+import { HBody as e } from "./body/h_body.js";
+import { VBody as m } from "./body/v_body.js";
+import { Column as p } from "./column/column.js";
+import { Divider as d } from "./divider/divider.js";
+import { Footer as a } from "./footer/footer.js";
+import { Grid as n } from "./grid/grid.js";
+import { Header as B } from "./header/header.js";
+import { Item as b } from "./list/item.js";
+import { List as c } from "./list/list.js";
+import { SectionHeader as u } from "./list/section_header.js";
+import { SidebarEnd as C } from "./sidebar_end/sidebar_end.js";
+import { SidebarStart as E } from "./sidebar_start/sidebar_start.js";
+import { UtilityBar as G } from "./utility_bar/utility_bar.js";
 export {
-  e as Column,
-  m as Divider,
-  p as Footer,
-  d as Grid,
-  C as HBody,
-  a as Header,
-  n as Item,
-  b as List,
-  B as SectionHeader,
-  l as SidebarEnd,
-  u as SidebarStart,
-  E as VBody
+  p as Column,
+  d as Divider,
+  a as Footer,
+  n as Grid,
+  e as HBody,
+  B as Header,
+  b as Item,
+  c as List,
+  u as SectionHeader,
+  C as SidebarEnd,
+  E as SidebarStart,
+  G as UtilityBar,
+  m as VBody
 };
 //# sourceMappingURL=index.js.map

package/dist/layouts/index.js.map

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

package/dist/layouts/list/item.d.ts

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { HStackProps } from '../../stacks/h_stack.js';
 export interface ItemProps extends Omit<HStackProps, 'as' | 'children'> {
     children?: React.ReactNode;
+    selected?: boolean;
 }
 export declare const Item: React.ForwardRefExoticComponent<ItemProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=item.d.ts.map

package/dist/layouts/list/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/layouts/list/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,IAAI,kFASf,CAAC"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/layouts/list/item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGnE,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,WAAW,EAAE,IAAI,GAAG,UAAU,CAAC;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,IAAI,kFAgBf,CAAC"}