@octavius2929-personal/design-system 1.5.0 → 1.5.1

package/dist/index.cjs

@@ -2258,41 +2258,123 @@ var Alert = (0, import_react43.forwardRef)(function Alert2({ severity: severity2
 });
 
 // src/components/tooltip/index.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
+var import_react_dom = require("react-dom");
 
-// src/components/tooltip/use-styles.ts
+// src/hooks/use-floating-position/index.ts
 var import_react44 = require("react");
 
+// src/hooks/use-floating-position/compute-position.ts
+function computeFloatingPosition({
+  anchorRect,
+  overlaySize,
+  viewport,
+  placement = "bottom",
+  align: align2 = "center",
+  offset = 4,
+  margin = 8
+}) {
+  const spaceBelow = viewport.height - anchorRect.bottom;
+  const spaceAbove = anchorRect.top;
+  const needed = overlaySize.height + offset;
+  const fitsBelow = spaceBelow >= needed;
+  const fitsAbove = spaceAbove >= needed;
+  let resolvedPlacement = placement;
+  if (placement === "bottom" && !fitsBelow && fitsAbove) {
+    resolvedPlacement = "top";
+  } else if (placement === "top" && !fitsAbove && fitsBelow) {
+    resolvedPlacement = "bottom";
+  }
+  const top = resolvedPlacement === "bottom" ? anchorRect.bottom + offset : anchorRect.top - offset - overlaySize.height;
+  let left;
+  if (align2 === "start") {
+    left = anchorRect.left;
+  } else if (align2 === "end") {
+    left = anchorRect.right - overlaySize.width;
+  } else {
+    left = anchorRect.left + anchorRect.width / 2 - overlaySize.width / 2;
+  }
+  const minLeft = margin;
+  const maxLeft = viewport.width - overlaySize.width - margin;
+  left = maxLeft < minLeft ? minLeft : Math.min(Math.max(left, minLeft), maxLeft);
+  return { placement: resolvedPlacement, top, left };
+}
+
+// src/hooks/use-floating-position/index.ts
+function useFloatingPosition(anchorRef, overlayRef, { open, placement, align: align2, offset, margin }) {
+  (0, import_react44.useLayoutEffect)(() => {
+    if (!open) return;
+    const recalc = () => {
+      const anchor = anchorRef.current;
+      const overlay2 = overlayRef.current;
+      if (!anchor || !overlay2) return;
+      const next = computeFloatingPosition({
+        anchorRect: anchor.getBoundingClientRect(),
+        overlaySize: { width: overlay2.offsetWidth, height: overlay2.offsetHeight },
+        viewport: { width: document.documentElement.clientWidth, height: window.innerHeight },
+        placement,
+        align: align2,
+        offset,
+        margin
+      });
+      overlay2.style.top = `${next.top}px`;
+      overlay2.style.left = `${next.left}px`;
+      overlay2.style.visibility = "visible";
+    };
+    recalc();
+    window.addEventListener("scroll", recalc, true);
+    window.addEventListener("resize", recalc);
+    return () => {
+      window.removeEventListener("scroll", recalc, true);
+      window.removeEventListener("resize", recalc);
+    };
+  }, [open, placement, align2, offset, margin, anchorRef, overlayRef]);
+}
+
+// src/components/tooltip/use-styles.ts
+var import_react45 = require("react");
+
 // src/components/tooltip/use-styles.css.ts
 var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__1qa7atn2";
-var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_placement_bottom__h9kvh3" };
 var wrapper = "use-styles_wrapper__h9kvh0";
 
 // src/components/tooltip/use-styles.ts
-function useStyles19({
-  placement: placement2 = "top"
-}) {
+function useStyles19() {
   const { themeClass } = useTheme();
-  const wrapper4 = (0, import_react44.useMemo)(
+  const wrapper4 = (0, import_react45.useMemo)(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
     [themeClass]
   );
-  const bubble2 = (0, import_react44.useMemo)(
-    () => [bubble, placement[placement2]].filter(Boolean).join(" "),
-    [placement2]
-  );
+  const bubble2 = (0, import_react45.useMemo)(() => [themeClass, bubble].filter(Boolean).join(" "), [themeClass]);
   return { wrapper: wrapper4, bubble: bubble2 };
 }
 
 // src/components/tooltip/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var HIDE_DELAY = 120;
-var Tooltip = (0, import_react45.forwardRef)(function Tooltip2({ label: label8, children, placement: placement2, testId }, ref) {
-  const [open, setOpen] = (0, import_react45.useState)(false);
-  const tooltipId = (0, import_react45.useId)();
-  const { wrapper: wrapper4, bubble: bubble2 } = useStyles19({ placement: placement2 });
+var GAP = 4;
+function assignRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+var Tooltip = (0, import_react46.forwardRef)(function Tooltip2({ label: label8, children, placement = "top", testId }, ref) {
+  const [open, setOpen] = (0, import_react46.useState)(false);
+  const tooltipId = (0, import_react46.useId)();
+  const { wrapper: wrapper4, bubble: bubble2 } = useStyles19();
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
-  const hideTimer = (0, import_react45.useRef)(null);
+  const hideTimer = (0, import_react46.useRef)(null);
+  const wrapperRef = (0, import_react46.useRef)(null);
+  const setWrapperRef = (node) => {
+    wrapperRef.current = node;
+    assignRef(ref, node);
+  };
+  const bubbleRef = (0, import_react46.useRef)(null);
+  useFloatingPosition(wrapperRef, bubbleRef, {
+    open,
+    placement,
+    align: "center",
+    offset: GAP
+  });
   const clearHide = () => {
     if (hideTimer.current) {
       clearTimeout(hideTimer.current);
@@ -2311,7 +2393,7 @@ var Tooltip = (0, import_react45.forwardRef)(function Tooltip2({ label: label8,
     clearHide();
     setOpen(false);
   };
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     return () => {
       if (hideTimer.current) clearTimeout(hideTimer.current);
     };
@@ -2324,11 +2406,11 @@ var Tooltip = (0, import_react45.forwardRef)(function Tooltip2({ label: label8,
   };
   const previousDescribedBy = children.props["aria-describedby"];
   const describedBy = open ? [previousDescribedBy, tooltipId].filter(Boolean).join(" ") : previousDescribedBy;
-  const trigger2 = (0, import_react45.cloneElement)(children, { "aria-describedby": describedBy });
+  const trigger2 = (0, import_react46.cloneElement)(children, { "aria-describedby": describedBy });
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "span",
     {
-      ref,
+      ref: setWrapperRef,
       className: wrapper4,
       "data-testid": dataTestId,
       onMouseEnter: show,
@@ -2338,25 +2420,29 @@ var Tooltip = (0, import_react45.forwardRef)(function Tooltip2({ label: label8,
       onKeyDown: handleKeyDown,
       children: [
         trigger2,
-        open && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "span",
-          {
-            id: tooltipId,
-            role: "tooltip",
-            className: bubble2,
-            "data-testid": slot("bubble"),
-            onMouseEnter: show,
-            onMouseLeave: scheduleHide,
-            children: label8
-          }
-        )
+        open && typeof document !== "undefined" ? (0, import_react_dom.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            "span",
+            {
+              ref: bubbleRef,
+              id: tooltipId,
+              role: "tooltip",
+              className: bubble2,
+              "data-testid": slot("bubble"),
+              onMouseEnter: show,
+              onMouseLeave: scheduleHide,
+              children: label8
+            }
+          ),
+          document.body
+        ) : null
       ]
     }
   );
 });
 
 // src/components/select/index.tsx
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/icons/chevron-down/index.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
@@ -2381,7 +2467,7 @@ function ChevronDownIcon({ size: size3 = 20, strokeWidth = 1.75, title, ...rest
 }
 
 // src/components/select/use-styles.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 
 // src/components/select/use-styles.css.ts
 var chevron = "use-styles_chevron__1w1czpb4";
@@ -2400,7 +2486,7 @@ function useStyles20({
   open = false
 }) {
   const { themeClass } = useTheme();
-  return (0, import_react46.useMemo)(() => {
+  return (0, import_react47.useMemo)(() => {
     const chevron3 = [chevron, open && chevronOpen].filter(Boolean).join(" ");
     return {
       root: [themeClass, root14].filter(Boolean).join(" "),
@@ -2416,7 +2502,7 @@ function useStyles20({
 
 // src/components/select/index.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var Select = (0, import_react47.forwardRef)(function Select2({
+var Select = (0, import_react48.forwardRef)(function Select2({
   options,
   value,
   onChange,
@@ -2427,15 +2513,15 @@ var Select = (0, import_react47.forwardRef)(function Select2({
   "aria-labelledby": ariaLabelledBy,
   ...rest
 }, ref) {
-  const [open, setOpen] = (0, import_react47.useState)(false);
-  const [activeIndex, setActiveIndex] = (0, import_react47.useState)(0);
-  const rootRef = (0, import_react47.useRef)(null);
+  const [open, setOpen] = (0, import_react48.useState)(false);
+  const [activeIndex, setActiveIndex] = (0, import_react48.useState)(0);
+  const rootRef = (0, import_react48.useRef)(null);
   const setRootRef = (node) => {
     rootRef.current = node;
     if (typeof ref === "function") ref(node);
     else if (ref) ref.current = node;
   };
-  const baseId = (0, import_react47.useId)();
+  const baseId = (0, import_react48.useId)();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
   const triggerLabelledBy = [label8 ? labelId : null, ariaLabelledBy].filter(Boolean).join(" ") || void 0;
@@ -2448,7 +2534,7 @@ var Select = (0, import_react47.forwardRef)(function Select2({
     menu: menu2,
     optionClass
   } = useStyles20({ open });
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     if (!open) return;
     const onPointerDown = (event) => {
       if (rootRef.current && !rootRef.current.contains(event.target)) {
@@ -2560,10 +2646,10 @@ var Select = (0, import_react47.forwardRef)(function Select2({
 });
 
 // src/components/slider/index.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/components/slider/use-styles.ts
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/components/slider/use-styles.css.ts
 var input5 = "use-styles_input__okw59n3";
@@ -2577,7 +2663,7 @@ var wrapper2 = "use-styles_wrapper__okw59n6";
 // src/components/slider/use-styles.ts
 function useStyles21() {
   const { themeClass } = useTheme();
-  return (0, import_react48.useMemo)(() => {
+  return (0, import_react49.useMemo)(() => {
     const root25 = [themeClass, root15].filter(Boolean).join(" ");
     return {
       wrapper: wrapper2,
@@ -2593,7 +2679,7 @@ function useStyles21() {
 
 // src/components/slider/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Slider = (0, import_react49.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled4, label: label8, ...rest }, ref) {
+var Slider = (0, import_react50.forwardRef)(function Slider2({ value = 0, onChange, min = 0, max = 100, step: step2 = 1, disabled: disabled4, label: label8, ...rest }, ref) {
   const { wrapper: wrapper4, label: labelClass, root: root25, track: track4, range: range2, thumb: thumb2, input: input6 } = useStyles21();
   const span = max - min;
   const percent = span > 0 ? (value - min) / span * 100 : 0;
@@ -2627,10 +2713,10 @@ var Slider = (0, import_react49.forwardRef)(function Slider2({ value = 0, onChan
 });
 
 // src/components/accordion/index.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/components/accordion/use-styles.ts
-var import_react50 = require("react");
+var import_react51 = require("react");
 
 // src/components/accordion/use-styles.css.ts
 var chevron2 = "use-styles_chevron__1cjrdh93";
@@ -2643,7 +2729,7 @@ var root16 = "use-styles_root__1cjrdh90";
 // src/components/accordion/use-styles.ts
 function useStyles22({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react50.useMemo)(
+  return (0, import_react51.useMemo)(
     () => ({
       root: [themeClass, root16, className].filter(Boolean).join(" "),
       item,
@@ -2657,8 +2743,8 @@ function useStyles22({ className }) {
 
 // src/components/accordion/index.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var Accordion = (0, import_react51.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className, testId }, ref) {
-  const [open, setOpen] = (0, import_react51.useState)(defaultOpen);
+var Accordion = (0, import_react52.forwardRef)(function Accordion2({ items, multiple = false, defaultOpen = [], className, testId }, ref) {
+  const [open, setOpen] = (0, import_react52.useState)(defaultOpen);
   const { root: root25, item: item3, header: header3, chevronFor, panel: panel3 } = useStyles22({ className });
   const { testId: dataTestId, slot } = useTestId("layout", testId);
   const toggle = (id) => {
@@ -2715,7 +2801,7 @@ var Accordion = (0, import_react51.forwardRef)(function Accordion2({ items, mult
 });
 
 // src/components/breadcrumbs/index.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/icons/chevron-right/index.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -2740,7 +2826,7 @@ function ChevronRightIcon({ size: size3 = 20, strokeWidth = 1.75, title, ...rest
 }
 
 // src/components/breadcrumbs/use-styles.ts
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // src/components/breadcrumbs/use-styles.css.ts
 var crumb = "use-styles_crumb__7u0du61";
@@ -2751,7 +2837,7 @@ var separator = "use-styles_separator__7u0du63";
 // src/components/breadcrumbs/use-styles.ts
 function useStyles23({ className }) {
   const { themeClass } = useTheme();
-  const root25 = (0, import_react52.useMemo)(
+  const root25 = (0, import_react53.useMemo)(
     () => [themeClass, root17, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -2760,13 +2846,13 @@ function useStyles23({ className }) {
 
 // src/components/breadcrumbs/index.tsx
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var Breadcrumbs = (0, import_react53.forwardRef)(function Breadcrumbs2({ items, className, testId, ...rest }, ref) {
+var Breadcrumbs = (0, import_react54.forwardRef)(function Breadcrumbs2({ items, className, testId, ...rest }, ref) {
   const { root: root25, crumb: crumb2, current: current2, separator: separator2 } = useStyles23({ className });
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("nav", { ref, "aria-label": "Breadcrumb", className: root25, "data-testid": dataTestId, ...rest, children: items.map((item3, index) => {
     const isLast = index === items.length - 1;
     const key = index;
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react53.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react54.Fragment, { children: [
       isLast ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: current2, "aria-current": "page", "data-testid": slot(`crumb-${index}`), children: item3.label }) : item3.href ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("a", { className: crumb2, href: item3.href, "data-testid": slot(`crumb-${index}`), children: item3.label }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: crumb2, "data-testid": slot(`crumb-${index}`), children: item3.label }),
       !isLast && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: separator2, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { size: 14 }) })
     ] }, key);
@@ -2774,7 +2860,7 @@ var Breadcrumbs = (0, import_react53.forwardRef)(function Breadcrumbs2({ items,
 });
 
 // src/components/pagination/index.tsx
-var import_react55 = require("react");
+var import_react56 = require("react");
 
 // src/components/icons/chevron-left/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -2799,7 +2885,7 @@ function ChevronLeftIcon({ size: size3 = 20, strokeWidth = 1.75, title, ...rest
 }
 
 // src/components/pagination/use-styles.ts
-var import_react54 = require("react");
+var import_react55 = require("react");
 
 // src/components/pagination/use-styles.css.ts
 var ellipsis = "use-styles_ellipsis__1azgzoh3";
@@ -2811,7 +2897,7 @@ var root18 = "use-styles_root__1azgzoh0";
 // src/components/pagination/use-styles.ts
 function useStyles24() {
   const { themeClass } = useTheme();
-  return (0, import_react54.useMemo)(
+  return (0, import_react55.useMemo)(
     () => ({
       root: [themeClass, root18].filter(Boolean).join(" "),
       pageBtnFor: (active2) => [pageBtn, active2 && pageActive].filter(Boolean).join(" "),
@@ -2837,7 +2923,7 @@ function buildItems(count, page, siblingCount) {
   if (last > first) items.push(last);
   return items;
 }
-var Pagination = (0, import_react55.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, testId, ...rest }, ref) {
+var Pagination = (0, import_react56.forwardRef)(function Pagination2({ count, page = 1, onChange, siblingCount = 1, testId, ...rest }, ref) {
   const { root: root25, pageBtnFor, ellipsis: ellipsis2, nav: nav2 } = useStyles24();
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   const total = Math.max(1, count);
@@ -2895,10 +2981,10 @@ var Pagination = (0, import_react55.forwardRef)(function Pagination2({ count, pa
 });
 
 // src/components/stepper/index.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // src/components/stepper/use-styles.ts
-var import_react56 = require("react");
+var import_react57 = require("react");
 
 // src/components/stepper/use-styles.css.ts
 var connector = "use-styles_connector__79pt4e7";
@@ -2913,7 +2999,7 @@ var step = "use-styles_step__79pt4e1";
 // src/components/stepper/use-styles.ts
 function useStyles25({ className }) {
   const { themeClass } = useTheme();
-  return (0, import_react56.useMemo)(() => {
+  return (0, import_react57.useMemo)(() => {
     const root25 = [themeClass, root19, className].filter(Boolean).join(" ");
     const markerFor = (state) => [
       marker,
@@ -2927,7 +3013,7 @@ function useStyles25({ className }) {
 
 // src/components/stepper/index.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
-var Stepper = (0, import_react57.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, testId, ...rest }, ref) {
+var Stepper = (0, import_react58.forwardRef)(function Stepper2({ steps, active: active2 = 0, className, testId, ...rest }, ref) {
   const { root: root25, step: step2, connector: connector2, markerFor, labelFor } = useStyles25({ className });
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: root25, "data-testid": dataTestId, ...rest, children: steps.map((s, index) => {
@@ -2935,7 +3021,7 @@ var Stepper = (0, import_react57.forwardRef)(function Stepper2({ steps, active:
     const isActive = state === "active";
     return (
       // biome-ignore lint/suspicious/noArrayIndexKey: steps are a static, ordered list with no stable id.
-      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react57.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_react58.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
           "div",
           {
@@ -2956,10 +3042,10 @@ var Stepper = (0, import_react57.forwardRef)(function Stepper2({ steps, active:
 });
 
 // src/components/tabs/index.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/tabs/use-styles.ts
-var import_react58 = require("react");
+var import_react59 = require("react");
 
 // src/components/tabs/use-styles.css.ts
 var panel2 = "use-styles_panel__1l4m7t43";
@@ -2970,7 +3056,7 @@ var tabActive = "use-styles_tabActive__1l4m7t42";
 // src/components/tabs/use-styles.ts
 function useStyles26() {
   const { themeClass } = useTheme();
-  return (0, import_react58.useMemo)(() => {
+  return (0, import_react59.useMemo)(() => {
     const root25 = [themeClass, root20].filter(Boolean).join(" ");
     const tabClass = (active2) => [tab, active2 && tabActive].filter(Boolean).join(" ");
     return { root: root25, tab, tabClass, panel: panel2 };
@@ -2980,11 +3066,11 @@ function useStyles26() {
 // src/components/tabs/index.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var ICON_SIZE3 = 16;
-var Tabs = (0, import_react59.forwardRef)(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
+var Tabs = (0, import_react60.forwardRef)(function Tabs2({ items, value, onChange, testId, ...rest }, ref) {
   const { root: root25, tabClass, panel: panel3 } = useStyles26();
   const { testId: dataTestId, slot } = useTestId("nav", testId);
-  const baseId = (0, import_react59.useId)();
-  const tabRefs = (0, import_react59.useRef)([]);
+  const baseId = (0, import_react60.useId)();
+  const tabRefs = (0, import_react60.useRef)([]);
   const hasPanels = items.some((item3) => item3.content !== void 0);
   const activeIndex = items.findIndex((item3) => item3.value === value);
   const tabId = (v) => `${baseId}-tab-${v}`;
@@ -3064,10 +3150,11 @@ var Tabs = (0, import_react59.forwardRef)(function Tabs2({ items, value, onChang
 });
 
 // src/components/menu/index.tsx
-var import_react61 = require("react");
+var import_react62 = require("react");
+var import_react_dom2 = require("react-dom");
 
 // src/components/menu/use-styles.ts
-var import_react60 = require("react");
+var import_react61 = require("react");
 
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
@@ -3078,10 +3165,10 @@ var wrapper3 = "use-styles_wrapper__1uyxaj0";
 // src/components/menu/use-styles.ts
 function useStyles27() {
   const { themeClass } = useTheme();
-  return (0, import_react60.useMemo)(
+  return (0, import_react61.useMemo)(
     () => ({
       wrapper: [themeClass, wrapper3].filter(Boolean).join(" "),
-      list: list2,
+      list: [themeClass, list2].filter(Boolean).join(" "),
       item: item2,
       dangerItem: [item2, danger].join(" ")
     }),
@@ -3092,23 +3179,38 @@ function useStyles27() {
 // src/components/menu/index.tsx
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var ICON_SIZE4 = 16;
-function assignRef(ref, value) {
+var GAP2 = 4;
+var TYPEAHEAD_RESET_MS = 500;
+function assignRef2(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Menu = (0, import_react61.forwardRef)(function Menu2({ trigger: trigger2, items, testId }, ref) {
+var Menu = (0, import_react62.forwardRef)(function Menu2({ trigger: trigger2, items, testId }, ref) {
   const { wrapper: wrapper4, list: list3, item: item3, dangerItem } = useStyles27();
   const { testId: rootTestId, slot } = useTestId("menu", testId);
-  const [open, setOpen] = (0, import_react61.useState)(false);
-  const [alignEnd, setAlignEnd] = (0, import_react61.useState)(false);
-  const rootRef = (0, import_react61.useRef)(null);
+  const [open, setOpen] = (0, import_react62.useState)(false);
+  const rootRef = (0, import_react62.useRef)(null);
   const setRootRef = (node) => {
     rootRef.current = node;
-    assignRef(ref, node);
+    assignRef2(ref, node);
   };
-  const listRef = (0, import_react61.useRef)(null);
-  const triggerRef = (0, import_react61.useRef)(null);
-  const getMenuItems = () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []);
+  const listRef = (0, import_react62.useRef)(null);
+  const triggerRef = (0, import_react62.useRef)(null);
+  const pendingFocusRef = (0, import_react62.useRef)("first");
+  const typeAheadRef = (0, import_react62.useRef)({
+    query: "",
+    timeout: null
+  });
+  useFloatingPosition(rootRef, listRef, {
+    open,
+    placement: "bottom",
+    align: "start",
+    offset: GAP2
+  });
+  const getMenuItems = (0, import_react62.useCallback)(
+    () => Array.from(listRef.current?.querySelectorAll('[role="menuitem"]') ?? []),
+    []
+  );
   const focusItemAt = (index) => {
     const menuItems = getMenuItems();
     if (menuItems.length === 0) return;
@@ -3119,23 +3221,41 @@ var Menu = (0, import_react61.forwardRef)(function Menu2({ trigger: trigger2, it
     setOpen(false);
     triggerRef.current?.focus();
   };
-  (0, import_react61.useLayoutEffect)(() => {
-    if (!open) {
-      setAlignEnd(false);
-      return;
+  const resetTypeAhead = (0, import_react62.useCallback)(() => {
+    if (typeAheadRef.current.timeout) clearTimeout(typeAheadRef.current.timeout);
+    typeAheadRef.current = { query: "", timeout: null };
+  }, []);
+  const handleTypeAhead = (key) => {
+    if (typeAheadRef.current.timeout) clearTimeout(typeAheadRef.current.timeout);
+    const query = typeAheadRef.current.query + key.toLowerCase();
+    typeAheadRef.current.query = query;
+    typeAheadRef.current.timeout = setTimeout(() => {
+      typeAheadRef.current = { query: "", timeout: null };
+    }, TYPEAHEAD_RESET_MS);
+    const menuItems = getMenuItems();
+    if (menuItems.length === 0) return;
+    const current2 = menuItems.indexOf(document.activeElement);
+    const startIndex = current2 === -1 ? 0 : current2 + 1;
+    for (let i = 0; i < menuItems.length; i++) {
+      const candidate = menuItems[(startIndex + i) % menuItems.length];
+      const text2 = candidate?.textContent?.trim().toLowerCase() ?? "";
+      if (text2.startsWith(query)) {
+        candidate?.focus();
+        return;
+      }
     }
-    const listEl = listRef.current;
-    const rootEl = rootRef.current;
-    if (!listEl || !rootEl) return;
-    const rootLeft = rootEl.getBoundingClientRect().left;
-    const viewport = document.documentElement.clientWidth;
-    setAlignEnd(rootLeft + listEl.offsetWidth > viewport);
-  }, [open]);
-  (0, import_react61.useEffect)(() => {
+  };
+  (0, import_react62.useEffect)(() => {
     if (!open) return;
-    listRef.current?.querySelector('[role="menuitem"]')?.focus();
+    const menuItems = getMenuItems();
+    const index = pendingFocusRef.current === "last" ? menuItems.length - 1 : 0;
+    menuItems[index]?.focus();
+    pendingFocusRef.current = "first";
     const onDocMouseDown = (event) => {
-      if (rootRef.current && !rootRef.current.contains(event.target)) {
+      const target = event.target;
+      const insideTrigger = rootRef.current?.contains(target) ?? false;
+      const insideList = listRef.current?.contains(target) ?? false;
+      if (!insideTrigger && !insideList) {
         setOpen(false);
       }
     };
@@ -3150,8 +3270,9 @@ var Menu = (0, import_react61.forwardRef)(function Menu2({ trigger: trigger2, it
     return () => {
       document.removeEventListener("mousedown", onDocMouseDown);
       document.removeEventListener("keydown", onKeyDown);
+      resetTypeAhead();
     };
-  }, [open]);
+  }, [open, getMenuItems, resetTypeAhead]);
   const onMenuKeyDown = (event) => {
     const menuItems = getMenuItems();
     const current2 = menuItems.indexOf(document.activeElement);
@@ -3179,22 +3300,58 @@ var Menu = (0, import_react61.forwardRef)(function Menu2({ trigger: trigger2, it
       case "Tab":
         setOpen(false);
         break;
+      case " ":
+        event.preventDefault();
+        if (typeAheadRef.current.query.length > 0) {
+          handleTypeAhead(event.key);
+        } else {
+          menuItems[current2]?.click();
+        }
+        break;
+      default:
+        if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+          event.preventDefault();
+          handleTypeAhead(event.key);
+        }
+        break;
     }
   };
   const triggerProps = trigger2.props;
   const consumerRef = trigger2.ref;
   const mergedTriggerRef = (node) => {
     triggerRef.current = node;
-    assignRef(consumerRef, node);
+    assignRef2(consumerRef, node);
   };
-  const clonedTrigger = (0, import_react61.cloneElement)(trigger2, {
+  const handleTriggerKeyDown = (event) => {
+    triggerProps.onKeyDown?.(event);
+    if (open) return;
+    switch (event.key) {
+      case "Enter":
+      case " ":
+      case "ArrowDown":
+        event.preventDefault();
+        pendingFocusRef.current = "first";
+        setOpen(true);
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        pendingFocusRef.current = "last";
+        setOpen(true);
+        break;
+    }
+  };
+  const clonedTrigger = (0, import_react62.cloneElement)(trigger2, {
     ref: mergedTriggerRef,
     "aria-haspopup": "menu",
     "aria-expanded": open,
     onClick: (event) => {
       triggerProps.onClick?.(event);
-      setOpen((prev) => !prev);
-    }
+      setOpen((prev) => {
+        if (!prev) pendingFocusRef.current = "first";
+        return !prev;
+      });
+    },
+    onKeyDown: handleTriggerKeyDown
   });
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
@@ -3205,50 +3362,52 @@ var Menu = (0, import_react61.forwardRef)(function Menu2({ trigger: trigger2, it
       "data-state": open ? "open" : "closed",
       children: [
         clonedTrigger,
-        open && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-          "div",
-          {
-            ref: listRef,
-            role: "menu",
-            className: list3,
-            "data-align": alignEnd ? "end" : "start",
-            "data-testid": slot("list"),
-            onKeyDown: onMenuKeyDown,
-            children: items.map((entry, index) => {
-              const ItemIcon = entry.icon;
-              return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  role: "menuitem",
-                  tabIndex: -1,
-                  className: entry.danger ? dangerItem : item3,
-                  "data-testid": slot(`item-${index}`),
-                  onClick: () => {
-                    entry.onClick?.();
-                    setOpen(false);
+        open && typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            "div",
+            {
+              ref: listRef,
+              role: "menu",
+              className: list3,
+              "data-testid": slot("list"),
+              onKeyDown: onMenuKeyDown,
+              children: items.map((entry, index) => {
+                const ItemIcon = entry.icon;
+                return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    role: "menuitem",
+                    tabIndex: -1,
+                    className: entry.danger ? dangerItem : item3,
+                    "data-testid": slot(`item-${index}`),
+                    onClick: () => {
+                      entry.onClick?.();
+                      setOpen(false);
+                    },
+                    children: [
+                      ItemIcon ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ItemIcon, { size: ICON_SIZE4 }) : null,
+                      entry.label
+                    ]
                   },
-                  children: [
-                    ItemIcon ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ItemIcon, { size: ICON_SIZE4 }) : null,
-                    entry.label
-                  ]
-                },
-                index
-              );
-            })
-          }
-        )
+                  index
+                );
+              })
+            }
+          ),
+          document.body
+        ) : null
       ]
     }
   );
 });
 
 // src/components/dialog/index.tsx
-var import_react63 = require("react");
-var import_react_dom = require("react-dom");
+var import_react64 = require("react");
+var import_react_dom3 = require("react-dom");
 
 // src/components/dialog/use-styles.ts
-var import_react62 = require("react");
+var import_react63 = require("react");
 
 // src/components/dialog/use-styles.css.ts
 var actions = "use-styles_actions__5tstu83";
@@ -3259,7 +3418,7 @@ var surface2 = "use-styles_surface__5tstu81";
 // src/components/dialog/use-styles.ts
 function useStyles28() {
   const { themeClass } = useTheme();
-  return (0, import_react62.useMemo)(
+  return (0, import_react63.useMemo)(
     () => ({
       overlay: [themeClass, overlay].filter(Boolean).join(" "),
       surface: surface2,
@@ -3273,22 +3432,22 @@ function useStyles28() {
 // src/components/dialog/index.tsx
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var FOCUSABLE = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-function assignRef2(ref, value) {
+function assignRef3(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var Dialog = (0, import_react63.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
+var Dialog = (0, import_react64.forwardRef)(function Dialog2({ open, onClose, title, actions: actions3, children, testId }, ref) {
   const { overlay: overlay2, surface: surface3, body: body3, actions: actionsClass } = useStyles28();
   const { testId: rootTestId, slot } = useTestId("dialog", testId);
-  const surfaceRef = (0, import_react63.useRef)(null);
+  const surfaceRef = (0, import_react64.useRef)(null);
   const setSurfaceRef = (node) => {
     surfaceRef.current = node;
-    assignRef2(ref, node);
+    assignRef3(ref, node);
   };
-  const previouslyFocused = (0, import_react63.useRef)(null);
-  const generatedId = (0, import_react63.useId)();
+  const previouslyFocused = (0, import_react64.useRef)(null);
+  const generatedId = (0, import_react64.useId)();
   const titleId = title != null ? generatedId : void 0;
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") onClose();
@@ -3296,13 +3455,13 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({ open, onClose, ti
     document.addEventListener("keydown", onKeyDown);
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!open) return;
     previouslyFocused.current = document.activeElement;
     surfaceRef.current?.focus();
     return () => previouslyFocused.current?.focus?.();
   }, [open]);
-  (0, import_react63.useEffect)(() => {
+  (0, import_react64.useEffect)(() => {
     if (!open) return;
     const previousOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -3338,7 +3497,7 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({ open, onClose, ti
       first.focus();
     }
   };
-  return (0, import_react_dom.createPortal)(
+  return (0, import_react_dom3.createPortal)(
     // biome-ignore lint/a11y/useKeyWithClickEvents: ESC handled by a document keydown listener.
     /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: overlay2, "data-testid": slot("overlay"), onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "div",
@@ -3364,11 +3523,11 @@ var Dialog = (0, import_react63.forwardRef)(function Dialog2({ open, onClose, ti
 });
 
 // src/components/snackbar/index.tsx
-var import_react65 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react66 = require("react");
+var import_react_dom4 = require("react-dom");
 
 // src/components/snackbar/use-styles.ts
-var import_react64 = require("react");
+var import_react65 = require("react");
 
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
@@ -3378,7 +3537,7 @@ var root21 = "use-styles_root__ihzsep0 surfaces_inkySurface__1qa7atn2";
 // src/components/snackbar/use-styles.ts
 function useStyles29() {
   const { themeClass } = useTheme();
-  return (0, import_react64.useMemo)(
+  return (0, import_react65.useMemo)(
     () => ({
       root: [themeClass, root21].filter(Boolean).join(" "),
       message,
@@ -3391,7 +3550,7 @@ function useStyles29() {
 // src/components/snackbar/index.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var DEFAULT_DURATION = 5e3;
-var Snackbar = (0, import_react65.forwardRef)(function Snackbar2({
+var Snackbar = (0, import_react66.forwardRef)(function Snackbar2({
   open,
   message: message2,
   action,
@@ -3406,19 +3565,19 @@ var Snackbar = (0, import_react65.forwardRef)(function Snackbar2({
 }, ref) {
   const { root: root25, message: messageClass, closeBtn: closeBtn2 } = useStyles29();
   const { testId: dataTestId, slot } = useTestId("feedback", testId);
-  const onCloseRef = (0, import_react65.useRef)(onClose);
-  (0, import_react65.useEffect)(() => {
+  const onCloseRef = (0, import_react66.useRef)(onClose);
+  (0, import_react66.useEffect)(() => {
     onCloseRef.current = onClose;
   }, [onClose]);
-  const interactingRef = (0, import_react65.useRef)({ hover: false, focus: false });
-  const timeoutRef = (0, import_react65.useRef)();
-  const clearTimer = (0, import_react65.useCallback)(() => {
+  const interactingRef = (0, import_react66.useRef)({ hover: false, focus: false });
+  const timeoutRef = (0, import_react66.useRef)();
+  const clearTimer = (0, import_react66.useCallback)(() => {
     if (timeoutRef.current !== void 0) {
       clearTimeout(timeoutRef.current);
       timeoutRef.current = void 0;
     }
   }, []);
-  const scheduleTimer = (0, import_react65.useCallback)(() => {
+  const scheduleTimer = (0, import_react66.useCallback)(() => {
     clearTimer();
     if (!open || duration == null || !onCloseRef.current) return;
     if (interactingRef.current.hover || interactingRef.current.focus) return;
@@ -3426,7 +3585,7 @@ var Snackbar = (0, import_react65.forwardRef)(function Snackbar2({
       onCloseRef.current?.();
     }, duration);
   }, [open, duration, clearTimer]);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react66.useEffect)(() => {
     scheduleTimer();
     return clearTimer;
   }, [scheduleTimer, clearTimer]);
@@ -3451,7 +3610,7 @@ var Snackbar = (0, import_react65.forwardRef)(function Snackbar2({
     onBlur?.(event);
   };
   if (!open || typeof document === "undefined") return null;
-  return (0, import_react_dom2.createPortal)(
+  return (0, import_react_dom4.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
       "div",
       {
@@ -3486,10 +3645,10 @@ var Snackbar = (0, import_react65.forwardRef)(function Snackbar2({
 });
 
 // src/components/table/index.tsx
-var import_react67 = require("react");
+var import_react68 = require("react");
 
 // src/components/table/use-styles.ts
-var import_react66 = require("react");
+var import_react67 = require("react");
 
 // src/components/table/use-styles.css.ts
 var alignRight = "use-styles_alignRight__1n2cz6i3";
@@ -3501,7 +3660,7 @@ var th = "use-styles_th__1n2cz6i1";
 // src/components/table/use-styles.ts
 function useStyles30({ className }) {
   const { themeClass } = useTheme();
-  const root25 = (0, import_react66.useMemo)(
+  const root25 = (0, import_react67.useMemo)(
     () => [themeClass, root22, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -3527,15 +3686,15 @@ function TableInner({ columns, rows, getRowKey, className, caption: caption2, te
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("tbody", { children: rows.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("tr", { "data-testid": slot(`row-${index}`), children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("td", { className: cellClass(column), children: column.render ? column.render(row) : String(row[column.key]) }, column.key)) }, getRowKey ? getRowKey(row, index) : index)) })
   ] });
 }
-var TableForwarded = (0, import_react67.forwardRef)(TableInner);
+var TableForwarded = (0, import_react68.forwardRef)(TableInner);
 TableForwarded.displayName = "Table";
 var Table = TableForwarded;
 
 // src/components/app-bar/index.tsx
-var import_react69 = require("react");
+var import_react70 = require("react");
 
 // src/components/app-bar/use-styles.ts
-var import_react68 = require("react");
+var import_react69 = require("react");
 
 // src/components/app-bar/use-styles.css.ts
 var actions2 = "use-styles_actions__1h133nh2";
@@ -3545,7 +3704,7 @@ var root23 = "use-styles_root__1h133nh0";
 // src/components/app-bar/use-styles.ts
 function useStyles31({ className }) {
   const { themeClass } = useTheme();
-  const root25 = (0, import_react68.useMemo)(
+  const root25 = (0, import_react69.useMemo)(
     () => [themeClass, root23, className].filter(Boolean).join(" "),
     [themeClass, className]
   );
@@ -3554,7 +3713,7 @@ function useStyles31({ className }) {
 
 // src/components/app-bar/index.tsx
 var import_jsx_runtime46 = require("react/jsx-runtime");
-var AppBar = (0, import_react69.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, testId, ...rest }, ref) {
+var AppBar = (0, import_react70.forwardRef)(function AppBar2({ brand: brand2, actions: actions3, className, children, testId, ...rest }, ref) {
   const styles = useStyles31({ className });
   const { testId: dataTestId, slot } = useTestId("nav", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("header", { ref, className: styles.root, "data-testid": dataTestId, ...rest, children: [
@@ -3565,10 +3724,10 @@ var AppBar = (0, import_react69.forwardRef)(function AppBar2({ brand: brand2, ac
 });
 
 // src/components/list-item/index.tsx
-var import_react71 = require("react");
+var import_react72 = require("react");
 
 // src/components/list-item/use-styles.ts
-var import_react70 = require("react");
+var import_react71 = require("react");
 
 // src/components/list-item/use-styles.css.ts
 var content3 = "use-styles_content__kbreq13";
@@ -3583,7 +3742,7 @@ function useStyles32({
   className
 }) {
   const { themeClass } = useTheme();
-  const root25 = (0, import_react70.useMemo)(
+  const root25 = (0, import_react71.useMemo)(
     () => [themeClass, root24, selected4 && selected3, className].filter(Boolean).join(" "),
     [themeClass, selected4, className]
   );
@@ -3592,7 +3751,7 @@ function useStyles32({
 
 // src/components/list-item/index.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var ListItem = (0, import_react71.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected4, className, testId, children, ...rest }, ref) {
+var ListItem = (0, import_react72.forwardRef)(function ListItem2({ leading: leading2, trailing: trailing2, selected: selected4, className, testId, children, ...rest }, ref) {
   const styles = useStyles32({ selected: selected4, className });
   const { testId: dataTestId, slot } = useTestId("list", testId);
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(