@octaviaflow/core 3.0.10 → 3.0.12

package/dist/index.js

@@ -195,7 +195,7 @@ function AgentCard({
 }
 
 // src/components/AuthCard/AuthCard.tsx
-import { useState } from "react";
+import { useId, useRef as useRef2, useState } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function AuthCard({
   logo,
@@ -245,24 +245,61 @@ function AuthTabs({ tabs, defaultTab, value, onChange, className }) {
     onChange?.(id);
   };
   const activeTab = tabs.find((t) => t.id === active) ?? tabs[0];
+  const scopeId = useId();
+  const tabRefs = useRef2({});
+  const handleKeyDown = (e) => {
+    const ids = tabs.map((t) => t.id);
+    const currentIdx = ids.indexOf(active);
+    if (currentIdx === -1) return;
+    let nextIdx = null;
+    if (e.key === "ArrowRight") nextIdx = (currentIdx + 1) % ids.length;
+    else if (e.key === "ArrowLeft") nextIdx = (currentIdx - 1 + ids.length) % ids.length;
+    else if (e.key === "Home") nextIdx = 0;
+    else if (e.key === "End") nextIdx = ids.length - 1;
+    if (nextIdx === null) return;
+    e.preventDefault();
+    const nextId = ids[nextIdx];
+    select(nextId);
+    tabRefs.current[nextId]?.focus();
+  };
   return /* @__PURE__ */ jsxs3("div", { className: cn("ods-auth-tabs", className), children: [
-    /* @__PURE__ */ jsx3("div", { className: "ods-auth-tabs__list", role: "tablist", children: tabs.map((t) => /* @__PURE__ */ jsxs3(
-      "button",
+    /* @__PURE__ */ jsx3("div", { className: "ods-auth-tabs__list", role: "tablist", children: tabs.map((t) => {
+      const isActive2 = t.id === active;
+      return /* @__PURE__ */ jsxs3(
+        "button",
+        {
+          ref: (el) => {
+            tabRefs.current[t.id] = el;
+          },
+          type: "button",
+          role: "tab",
+          id: `${scopeId}-tab-${t.id}`,
+          "aria-selected": isActive2,
+          "aria-controls": `${scopeId}-panel-${t.id}`,
+          tabIndex: isActive2 ? 0 : -1,
+          className: cn("ods-auth-tabs__tab", isActive2 && "ods-auth-tabs__tab--active"),
+          onClick: () => select(t.id),
+          onKeyDown: handleKeyDown,
+          children: [
+            t.icon && /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__icon", children: t.icon }),
+            /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__label", children: t.label }),
+            t.description && /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__desc", children: t.description })
+          ]
+        },
+        t.id
+      );
+    }) }),
+    activeTab && /* @__PURE__ */ jsx3(
+      "div",
       {
-        type: "button",
-        role: "tab",
-        "aria-selected": t.id === active,
-        className: cn("ods-auth-tabs__tab", t.id === active && "ods-auth-tabs__tab--active"),
-        onClick: () => select(t.id),
-        children: [
-          t.icon && /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__icon", children: t.icon }),
-          /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__label", children: t.label }),
-          t.description && /* @__PURE__ */ jsx3("span", { className: "ods-auth-tabs__desc", children: t.description })
-        ]
-      },
-      t.id
-    )) }),
-    activeTab && /* @__PURE__ */ jsx3("div", { className: "ods-auth-tabs__panel", children: activeTab.content })
+        role: "tabpanel",
+        id: `${scopeId}-panel-${activeTab.id}`,
+        "aria-labelledby": `${scopeId}-tab-${activeTab.id}`,
+        tabIndex: 0,
+        className: "ods-auth-tabs__panel",
+        children: activeTab.content
+      }
+    )
   ] });
 }
 function AuthBadge({ tone = "neutral", children, className }) {
@@ -546,11 +583,11 @@ function BlogCard({
 }
 
 // src/components/Breadcrumb/Breadcrumb.tsx
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 import { useBreadcrumbItem, useBreadcrumbs } from "react-aria";
 import { Fragment, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function BreadcrumbItem({ item, isCurrent }) {
-  const ref = useRef2(null);
+  const ref = useRef3(null);
   const { itemProps } = useBreadcrumbItem(
     { children: item.label, isCurrent, elementType: item.href ? "a" : "span" },
     ref
@@ -605,7 +642,7 @@ function Breadcrumb({
 
 // src/components/Button/Button.tsx
 import { motion as motion2 } from "framer-motion";
-import { useRef as useRef3 } from "react";
+import { useRef as useRef4 } from "react";
 import { useButton } from "react-aria";
 
 // src/utils/a11y.ts
@@ -649,7 +686,7 @@ function Button({
   style,
   ...props
 }) {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   const isDisabled = disabled || loading;
   const hasAction = Boolean(props.onClick) || type === "submit" || type === "reset" || Boolean(props.href);
   const resolvedCursor = cursor ?? (disabled ? "not-allowed" : loading ? "progress" : hasAction ? "pointer" : "default");
@@ -962,7 +999,7 @@ function ChatBubble({
 }
 
 // src/components/Checkbox/Checkbox.tsx
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
 import { useCheckbox } from "react-aria";
 
 // ../../node_modules/react-stately/dist/private/utils/useControlledState.mjs
@@ -2492,7 +2529,7 @@ function Checkbox({
   className,
   ...props
 }) {
-  const ref = useRef4(null);
+  const ref = useRef5(null);
   const state = $fd3c5e01e837dc20$export$8042c6c013fd5226({
     isSelected: checked,
     defaultSelected: defaultChecked,
@@ -2711,7 +2748,7 @@ function ChoiceCard({
 }
 
 // src/components/CodeEditor/CodeEditor.tsx
-import { useEffect, useMemo as useMemo3, useRef as useRef5, useState as useState3 } from "react";
+import { useEffect, useMemo as useMemo3, useRef as useRef6, useState as useState3 } from "react";
 import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var COMMENT_PREFIX = {
   sql: "-- ",
@@ -2763,8 +2800,8 @@ function CodeEditor({
   showCounter = true,
   searchable = true
 }) {
-  const taRef = useRef5(null);
-  const gutterRef = useRef5(null);
+  const taRef = useRef6(null);
+  const gutterRef = useRef6(null);
   const [activeLine, setActiveLine] = useState3(1);
   const [copied, setCopied] = useState3(false);
   const [internalWrap, setInternalWrap] = useState3(wordWrapProp ?? false);
@@ -2774,7 +2811,7 @@ function CodeEditor({
   const [findOpen, setFindOpen] = useState3(false);
   const [findQuery, setFindQuery] = useState3("");
   const [findIndex, setFindIndex] = useState3(0);
-  const findInputRef = useRef5(null);
+  const findInputRef = useRef6(null);
   const lines = value.split("\n");
   const lineCount = lines.length;
   const matches = useMemo3(() => {
@@ -3370,9 +3407,9 @@ function ColorPicker({
 import {
   useCallback,
   useEffect as useEffect2,
-  useId,
+  useId as useId2,
   useMemo as useMemo4,
-  useRef as useRef6,
+  useRef as useRef7,
   useState as useState5
 } from "react";
 import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -3388,10 +3425,10 @@ function OptionDropdown({
   const [open, setOpen] = useState5(false);
   const [query, setQuery] = useState5("");
   const [activeIdx, setActiveIdx] = useState5(0);
-  const triggerRef = useRef6(null);
-  const panelRef = useRef6(null);
-  const inputRef = useRef6(null);
-  const listboxId = useId();
+  const triggerRef = useRef7(null);
+  const panelRef = useRef7(null);
+  const inputRef = useRef7(null);
+  const listboxId = useId2();
   const showSearch = searchable === true || searchable === "auto" && options.length > 8;
   const selected = options.find((o) => o.value === value);
   const filtered = useMemo4(() => {
@@ -3696,7 +3733,7 @@ function ConditionBuilder({
 
 // src/components/ConfigPanel/ConfigPanel.tsx
 import { AnimatePresence as AnimatePresence2, motion as motion4 } from "framer-motion";
-import { useRef as useRef7 } from "react";
+import { useRef as useRef8 } from "react";
 import { useButton as useButton2 } from "react-aria";
 import { jsx as jsx21, jsxs as jsxs20 } from "react/jsx-runtime";
 function ConfigPanel({
@@ -3709,9 +3746,9 @@ function ConfigPanel({
   onCancel,
   className
 }) {
-  const closeRef = useRef7(null);
-  const saveRef = useRef7(null);
-  const cancelRef = useRef7(null);
+  const closeRef = useRef8(null);
+  const saveRef = useRef8(null);
+  const cancelRef = useRef8(null);
   const { buttonProps: closeProps } = useButton2(
     { onPress: onClose, "aria-label": "Close panel" },
     closeRef
@@ -3786,7 +3823,7 @@ import {
   useCallback as useCallback2,
   useEffect as useEffect3,
   useMemo as useMemo5,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState6
 } from "react";
 import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -4139,8 +4176,8 @@ function DataMapper({
   const [display, setDisplay] = useState6(defaultDisplay);
   const [sidebarOpen, setSidebarOpen] = useState6(defaultSidebarOpen);
   const [sidebarTab, setSidebarTab] = useState6("schema");
-  const editorRef = useRef8(null);
-  const rootRef = useRef8(null);
+  const editorRef = useRef9(null);
+  const rootRef = useRef9(null);
   useEffect3(() => {
     if (!selectedTarget) return;
     const handler = (e) => {
@@ -4864,8 +4901,8 @@ function ExpressionEditor({
   readDragSnippet,
   editorRef
 }) {
-  const lastEmittedRef = useRef8(value);
-  const isMountedRef = useRef8(false);
+  const lastEmittedRef = useRef9(value);
+  const isMountedRef = useRef9(false);
   useEffect3(() => {
     const el = editorRef.current;
     if (!el || isMountedRef.current) return;
@@ -5108,7 +5145,7 @@ import {
   useCallback as useCallback3,
   useEffect as useEffect4,
   useMemo as useMemo6,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState7
 } from "react";
 import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
@@ -5760,7 +5797,7 @@ function Row({
   clickable
 }) {
   const [menuOpen, setMenuOpen] = useState7(false);
-  const menuRef = useRef9(null);
+  const menuRef = useRef10(null);
   useEffect4(() => {
     if (!menuOpen) return;
     const close = (e) => {
@@ -5899,7 +5936,7 @@ function ChevronRightSmall() {
 }
 
 // src/components/DatePicker/DatePicker.tsx
-import { useEffect as useEffect5, useRef as useRef10, useState as useState8 } from "react";
+import { useEffect as useEffect5, useRef as useRef11, useState as useState8 } from "react";
 import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 var defaultFormat = (d) => d.toLocaleDateString(void 0, { month: "short", day: "numeric", year: "numeric" });
 function DatePicker({
@@ -5917,7 +5954,7 @@ function DatePicker({
   className
 }) {
   const [open, setOpen] = useState8(false);
-  const wrapRef = useRef10(null);
+  const wrapRef = useRef11(null);
   useEffect5(() => {
     if (!open) return;
     const onDoc = (e) => {
@@ -6059,7 +6096,7 @@ function DescriptionList({
 
 // src/components/Dialog/Dialog.tsx
 import { AnimatePresence as AnimatePresence3, motion as motion5 } from "framer-motion";
-import { useRef as useRef11 } from "react";
+import { useRef as useRef12 } from "react";
 import { FocusScope, OverlayProvider, useDialog, useModal, useOverlay } from "react-aria";
 import { createPortal } from "react-dom";
 
@@ -6113,8 +6150,8 @@ function DialogContent({
   footer,
   className
 }) {
-  const overlayRef = useRef11(null);
-  const dialogRef = useRef11(null);
+  const overlayRef = useRef12(null);
+  const dialogRef = useRef12(null);
   const { overlayProps, underlayProps } = useOverlay(
     {
       isOpen: open,
@@ -6306,12 +6343,12 @@ function Drawer({
 
 // src/components/DropdownMenu/DropdownMenu.tsx
 import { AnimatePresence as AnimatePresence4, motion as motion6 } from "framer-motion";
-import { useRef as useRef12 } from "react";
+import { useEffect as useEffect6, useRef as useRef13 } from "react";
 import { useButton as useButton3, useMenu, useMenuItem, useMenuTrigger } from "react-aria";
 import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment6, jsx as jsx29, jsxs as jsxs28 } from "react/jsx-runtime";
 function MenuItemComponent({ item, state, onAction }) {
-  const ref = useRef12(null);
+  const ref = useRef13(null);
   const { menuItemProps } = useMenuItem({ key: item.key, onAction }, state, ref);
   const menuItem = item.value;
   const isDisabled = state.disabledKeys.has(item.key);
@@ -6337,9 +6374,37 @@ function MenuPopup({
   menuItems,
   triggerRef,
   align,
-  className
+  className,
+  closeOnOutsideClick,
+  closeOnEscape
 }) {
-  const menuRef = useRef12(null);
+  const menuRef = useRef13(null);
+  useEffect6(() => {
+    if (!state.isOpen || !closeOnOutsideClick) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (!target) return;
+      const insideMenu = menuRef.current?.contains(target);
+      const insideTrigger = triggerRef.current?.contains(target);
+      if (!insideMenu && !insideTrigger) {
+        state.close();
+      }
+    };
+    document.addEventListener("mousedown", handler, true);
+    return () => document.removeEventListener("mousedown", handler, true);
+  }, [state.isOpen, closeOnOutsideClick]);
+  useEffect6(() => {
+    if (!state.isOpen || !closeOnEscape) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        state.close();
+        triggerRef.current?.focus();
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [state.isOpen, closeOnEscape]);
   const nonSepItems = menuItems.filter((i) => !i.separator);
   const children = nonSepItems.map((item, idx) => /* @__PURE__ */ jsx29($05678f3aee5e7d1a$export$6d08773d2e66f8f2, { textValue: item.label, children: item.label }, idx));
   const treeState = $6b915bde6cd300dd$export$728d6ba534403756({
@@ -6419,10 +6484,12 @@ function DropdownMenu({
   align = "start",
   className,
   triggerClassName,
+  closeOnOutsideClick = true,
+  closeOnEscape = true,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby
 }) {
-  const triggerRef = useRef12(null);
+  const triggerRef = useRef13(null);
   const state = $e3403870bfb691da$export$79fefeb1c2091ac3({});
   const { menuTriggerProps } = useMenuTrigger({}, state, triggerRef);
   const ariaNameProps = resolveAccessibleName({
@@ -6453,7 +6520,9 @@ function DropdownMenu({
         menuItems: items,
         triggerRef,
         align,
-        className
+        className,
+        closeOnOutsideClick,
+        closeOnEscape
       }
     )
   ] });
@@ -6472,7 +6541,7 @@ function EmptyState({ icon, title, description, action, className }) {
 
 // src/components/ExecutionConsole/ExecutionConsole.tsx
 import { motion as motion7 } from "framer-motion";
-import { useEffect as useEffect6, useRef as useRef13 } from "react";
+import { useEffect as useEffect7, useRef as useRef14 } from "react";
 import { Fragment as Fragment7, jsx as jsx31, jsxs as jsxs30 } from "react/jsx-runtime";
 var iconProps = {
   xmlns: "http://www.w3.org/2000/svg",
@@ -6508,7 +6577,7 @@ function ExecutionConsole({
   toolbar,
   className
 }) {
-  const logEndRef = useRef13(null);
+  const logEndRef = useRef14(null);
   const handleCopy = () => {
     if (onCopy) {
       onCopy();
@@ -6519,7 +6588,7 @@ function ExecutionConsole({
       void navigator.clipboard.writeText(text);
     }
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (open && logEndRef.current) {
       logEndRef.current.scrollIntoView?.({ behavior: "smooth" });
     }
@@ -6685,9 +6754,9 @@ function FeatureCard({
 // src/components/FileDropzone/FileDropzone.tsx
 import {
   useCallback as useCallback4,
-  useEffect as useEffect7,
-  useId as useId2,
-  useRef as useRef14,
+  useEffect as useEffect8,
+  useId as useId3,
+  useRef as useRef15,
   useState as useState9
 } from "react";
 
@@ -6827,9 +6896,9 @@ function FileDropzone({
   compact = false,
   className
 }) {
-  const inputRef = useRef14(null);
-  const dropzoneRef = useRef14(null);
-  const inputId = useId2();
+  const inputRef = useRef15(null);
+  const dropzoneRef = useRef15(null);
+  const inputId = useId3();
   const [isOver, setOver] = useState9(false);
   const [error, setError] = useState9(null);
   const [autoPreviews, setAutoPreviews] = useState9({});
@@ -6871,7 +6940,7 @@ function FileDropzone({
     },
     [disabled, onFiles, validate]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (!files) return;
     const next = {};
     const created = [];
@@ -6888,7 +6957,7 @@ function FileDropzone({
       created.forEach((u) => URL.revokeObjectURL(u));
     };
   }, [files]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!pasteEnabled || disabled) return;
     const onPaste = (e) => {
       const active = document.activeElement;
@@ -7129,7 +7198,7 @@ function FileDropzone({
 
 // src/components/FlowCanvas/FlowCanvas.tsx
 import { AnimatePresence as AnimatePresence5 } from "framer-motion";
-import { useCallback as useCallback6, useRef as useRef16 } from "react";
+import { useCallback as useCallback6, useRef as useRef17 } from "react";
 
 // src/components/FlowEdge/FlowEdge.tsx
 import { jsx as jsx34, jsxs as jsxs33 } from "react/jsx-runtime";
@@ -7173,8 +7242,8 @@ import { motion as motion8 } from "framer-motion";
 import {
   forwardRef,
   useCallback as useCallback5,
-  useEffect as useEffect8,
-  useRef as useRef15,
+  useEffect as useEffect9,
+  useRef as useRef16,
   useState as useState10
 } from "react";
 import { jsx as jsx35, jsxs as jsxs34 } from "react/jsx-runtime";
@@ -7238,7 +7307,7 @@ var FlowNode = forwardRef(function FlowNode2({
 }, ref) {
   const [isDragging, setIsDragging] = useState10(false);
   const [wasDragged, setWasDragged] = useState10(false);
-  const dragStartRef = useRef15(null);
+  const dragStartRef = useRef16(null);
   const zoom = viewport?.zoom ?? 1;
   const handleClick = useCallback5(
     (e) => {
@@ -7289,7 +7358,7 @@ var FlowNode = forwardRef(function FlowNode2({
     },
     [isLockMode]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (!isDragging) return;
     const applyDelta = (clientX, clientY) => {
       const start = dragStartRef.current;
@@ -7586,7 +7655,7 @@ function FlowCanvas({
   className,
   ...props
 }) {
-  const canvasRef = useRef16(null);
+  const canvasRef = useRef17(null);
   const isEmpty = nodes.length === 0 && edges.length === 0;
   const handleCanvasClick = useCallback6(
     (e) => {
@@ -8030,7 +8099,7 @@ function FormSection({
 }
 
 // src/components/HoverCard/HoverCard.tsx
-import { useCallback as useCallback8, useEffect as useEffect9, useLayoutEffect, useRef as useRef17, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useLayoutEffect, useRef as useRef18, useState as useState11 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs39 } from "react/jsx-runtime";
 function computePosition(rect, panelRect, placement, offset) {
@@ -8057,10 +8126,10 @@ function HoverCard({
   className
 }) {
   const [open, setOpen] = useState11(false);
-  const triggerRef = useRef17(null);
-  const panelRef = useRef17(null);
-  const openTimer = useRef17(null);
-  const closeTimer = useRef17(null);
+  const triggerRef = useRef18(null);
+  const panelRef = useRef18(null);
+  const openTimer = useRef18(null);
+  const closeTimer = useRef18(null);
   const [coords, setCoords] = useState11(null);
   const clearTimers = () => {
     if (openTimer.current) {
@@ -8072,7 +8141,7 @@ function HoverCard({
       closeTimer.current = null;
     }
   };
-  useEffect9(() => () => clearTimers(), []);
+  useEffect10(() => () => clearTimers(), []);
   const show = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setOpen(true), openDelay);
@@ -8093,7 +8162,7 @@ function HoverCard({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!open) return;
     const h = () => reposition();
     window.addEventListener("scroll", h, true);
@@ -8182,9 +8251,9 @@ function IconCard({
 // src/components/Input/Input.tsx
 import {
   forwardRef as forwardRef2,
-  useId as useId3,
+  useId as useId4,
   useImperativeHandle,
-  useRef as useRef18
+  useRef as useRef19
 } from "react";
 import { jsx as jsx42, jsxs as jsxs41 } from "react/jsx-runtime";
 var CLEAR_GLYPH = /* @__PURE__ */ jsx42("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx42("path", { d: "m3 3 6 6M9 3l-6 6", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round" }) });
@@ -8209,9 +8278,9 @@ var Input = forwardRef2(
     onChange,
     ...props
   }, forwardedRef) => {
-    const innerRef = useRef18(null);
+    const innerRef = useRef19(null);
     useImperativeHandle(forwardedRef, () => innerRef.current);
-    const reactId = useId3();
+    const reactId = useId4();
     const inputId = id ?? `${reactId}-input`;
     const errorId = `${reactId}-err`;
     const helperId = `${reactId}-help`;
@@ -8704,10 +8773,10 @@ function LinkButton({
 import { AnimatePresence as AnimatePresence6, motion as motion9 } from "framer-motion";
 import {
   useCallback as useCallback9,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect2,
   useMemo as useMemo9,
-  useRef as useRef19,
+  useRef as useRef20,
   useState as useState13
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
@@ -8737,11 +8806,11 @@ function MultiSelect({
   const [query, setQuery] = useState13("");
   const [activeIdx, setActiveIdx] = useState13(0);
   const [dropdownPos, setDropdownPos] = useState13({ top: 0, left: 0, width: 0 });
-  const wrapRef = useRef19(null);
-  const tagsRowRef = useRef19(null);
-  const searchRef = useRef19(null);
-  const dropdownRef = useRef19(null);
-  const chipRefs = useRef19([]);
+  const wrapRef = useRef20(null);
+  const tagsRowRef = useRef20(null);
+  const searchRef = useRef20(null);
+  const dropdownRef = useRef20(null);
+  const chipRefs = useRef20([]);
   const commit = useCallback9(
     (next) => {
       if (controlledValue === void 0) setInternalValue(next);
@@ -8766,7 +8835,7 @@ function MultiSelect({
     const rect = wrapRef.current.getBoundingClientRect();
     setDropdownPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
   }, []);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!open) return;
     updatePosition();
     window.addEventListener("scroll", updatePosition, true);
@@ -8776,7 +8845,7 @@ function MultiSelect({
       window.removeEventListener("resize", updatePosition);
     };
   }, [open, updatePosition]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!open) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -8788,12 +8857,12 @@ function MultiSelect({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (open && showSearch) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
   }, [open, showSearch]);
-  useEffect10(() => setActiveIdx(0), [query, open]);
+  useEffect11(() => setActiveIdx(0), [query, open]);
   const [fitCount, setFitCount] = useState13(selectedValues.length);
   const [tick, setTick] = useState13(0);
   useLayoutEffect2(() => {
@@ -8822,7 +8891,7 @@ function MultiSelect({
     if (count < selectedValues.length && count > 0) count = Math.max(1, count - 1);
     setFitCount(count);
   }, [tick, selectedValues, maxVisibleTags]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (typeof ResizeObserver === "undefined") return;
     const row = tagsRowRef.current;
     if (!row) return;
@@ -9174,7 +9243,7 @@ function NumberInput({
 // src/components/OTPInput/OTPInput.tsx
 import {
   useCallback as useCallback11,
-  useRef as useRef20
+  useRef as useRef21
 } from "react";
 import { jsx as jsx50, jsxs as jsxs49 } from "react/jsx-runtime";
 function OTPInput({
@@ -9190,7 +9259,7 @@ function OTPInput({
   autoFocus = false,
   className
 }) {
-  const refs = useRef20([]);
+  const refs = useRef21([]);
   const pattern = type === "numeric" ? /[^0-9]/g : /[^a-zA-Z0-9]/g;
   const setCharAt = useCallback11(
     (idx, ch) => {
@@ -9505,7 +9574,7 @@ function PhoneInput({
 }
 
 // src/components/Popover/Popover.tsx
-import { useCallback as useCallback12, useEffect as useEffect11, useLayoutEffect as useLayoutEffect3, useRef as useRef21, useState as useState16 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect12, useLayoutEffect as useLayoutEffect3, useRef as useRef22, useState as useState16 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { Fragment as Fragment12, jsx as jsx54, jsxs as jsxs53 } from "react/jsx-runtime";
 function computePosition2(rect, popRect, placement, offset) {
@@ -9545,8 +9614,8 @@ function Popover({
     },
     [openProp, onOpenChange]
   );
-  const triggerRef = useRef21(null);
-  const popRef = useRef21(null);
+  const triggerRef = useRef22(null);
+  const popRef = useRef22(null);
   const [coords, setCoords] = useState16(null);
   const reposition = useCallback12(() => {
     if (!triggerRef.current || !popRef.current) return;
@@ -9560,7 +9629,7 @@ function Popover({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [open, reposition, content]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open) return;
     const onScroll = () => reposition();
     window.addEventListener("scroll", onScroll, true);
@@ -9570,7 +9639,7 @@ function Popover({
       window.removeEventListener("resize", onScroll);
     };
   }, [open, reposition]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open || !closeOnClickOutside) return;
     const onDoc = (e) => {
       const t = e.target;
@@ -9581,7 +9650,7 @@ function Popover({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open, closeOnClickOutside, setOpen]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") setOpen(false);
@@ -9782,8 +9851,8 @@ function ProgressRing({
 // src/components/PromptInput/PromptInput.tsx
 import {
   useCallback as useCallback13,
-  useEffect as useEffect12,
-  useRef as useRef22,
+  useEffect as useEffect13,
+  useRef as useRef23,
   useState as useState17
 } from "react";
 import { jsx as jsx58, jsxs as jsxs57 } from "react/jsx-runtime";
@@ -9836,7 +9905,7 @@ function PromptInput({
   className,
   ariaLabel = "Prompt"
 }) {
-  const taRef = useRef22(null);
+  const taRef = useRef23(null);
   const [internal, setInternal] = useState17(defaultValue);
   const v = value ?? internal;
   const isControlled = value !== void 0;
@@ -9851,7 +9920,7 @@ function PromptInput({
     },
     [isControlled, onChange]
   );
-  useEffect12(() => {
+  useEffect13(() => {
     const el = taRef.current;
     if (!el) return;
     const computed = window.getComputedStyle(el);
@@ -10178,11 +10247,11 @@ function Quote({
 }
 
 // src/components/Radio/Radio.tsx
-import { useRef as useRef24 } from "react";
+import { useRef as useRef25 } from "react";
 import { useRadio } from "react-aria";
 
 // src/components/Radio/RadioGroup.tsx
-import { createContext, useContext, useRef as useRef23 } from "react";
+import { createContext, useContext, useRef as useRef24 } from "react";
 import { useRadioGroup } from "react-aria";
 import { jsx as jsx60, jsxs as jsxs59 } from "react/jsx-runtime";
 var RadioGroupContext = createContext(null);
@@ -10223,7 +10292,7 @@ function RadioGroup({
     "aria-describedby": ariaDescribedBy
   };
   const state = $384704861d32dbed$export$bca9d026f8e704eb(ariaProps);
-  const ref = useRef23(null);
+  const ref = useRef24(null);
   const { radioGroupProps, labelProps } = useRadioGroup(ariaProps, state);
   return /* @__PURE__ */ jsxs59(
     "div",
@@ -10255,7 +10324,7 @@ function Radio({
   ...props
 }) {
   const state = useRadioGroupContext();
-  const ref = useRef24(null);
+  const ref = useRef25(null);
   const ariaNameProps = resolveAccessibleName({
     label,
     ariaLabel: props["aria-label"],
@@ -10514,8 +10583,8 @@ function Rating({
 // src/components/Resizable/Resizable.tsx
 import {
   useCallback as useCallback14,
-  useEffect as useEffect13,
-  useRef as useRef25,
+  useEffect as useEffect14,
+  useRef as useRef26,
   useState as useState19
 } from "react";
 import { jsx as jsx64, jsxs as jsxs63 } from "react/jsx-runtime";
@@ -10532,7 +10601,7 @@ function Resizable({
   className,
   ariaLabel = "Resize panels"
 }) {
-  const wrapRef = useRef25(null);
+  const wrapRef = useRef26(null);
   const [internalSplit, setInternalSplit] = useState19(() => {
     if (typeof window === "undefined" || !storageKey) return null;
     const stored = window.localStorage.getItem(storageKey);
@@ -10542,7 +10611,7 @@ function Resizable({
     }
     return null;
   });
-  const draggingRef = useRef25(false);
+  const draggingRef = useRef26(false);
   const [isDragging, setDragging] = useState19(false);
   const computeFromDefault = useCallback14(() => {
     const el = wrapRef.current;
@@ -10555,7 +10624,7 @@ function Resizable({
     if (internalSplit != null) return internalSplit;
     return defaultSplit > 0 && defaultSplit < 1 ? 0 : defaultSplit;
   });
-  useEffect13(() => {
+  useEffect14(() => {
     if (splitProp != null) {
       setSplit(splitProp);
       return;
@@ -10588,7 +10657,7 @@ function Resizable({
     draggingRef.current = true;
     setDragging(true);
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const onMove = (e) => {
       if (!draggingRef.current) return;
       const el = wrapRef.current;
@@ -10686,16 +10755,16 @@ function ResizablePanel({
 }) {
   const [internal, setInternal] = useState19(sizeProp ?? defaultSize);
   const size = sizeProp ?? internal;
-  const draggingRef = useRef25(false);
+  const draggingRef = useRef26(false);
   const [isDragging, setDragging] = useState19(false);
-  const startRef = useRef25({ x: 0, size });
+  const startRef = useRef26({ x: 0, size });
   const onMouseDown = (e) => {
     e.preventDefault();
     draggingRef.current = true;
     setDragging(true);
     startRef.current = { x: e.clientX, size };
   };
-  useEffect13(() => {
+  useEffect14(() => {
     const onMove = (e) => {
       if (!draggingRef.current) return;
       const dx = e.clientX - startRef.current.x;
@@ -10758,18 +10827,18 @@ function Ribbon({
 
 // src/components/Select/Select.tsx
 import { AnimatePresence as AnimatePresence7, motion as motion10 } from "framer-motion";
-import { useCallback as useCallback15, useEffect as useEffect14, useMemo as useMemo10, useRef as useRef26, useState as useState20 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect15, useMemo as useMemo10, useRef as useRef27, useState as useState20 } from "react";
 import { HiddenSelect, useButton as useButton4, useListBox, useOption, useSelect } from "react-aria";
 import { createPortal as createPortal6 } from "react-dom";
 import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs65 } from "react/jsx-runtime";
 function ListBox(props) {
-  const ref = useRef26(null);
+  const ref = useRef27(null);
   const { listBoxRef = ref, state } = props;
   const { listBoxProps } = useListBox(props, state, listBoxRef);
   return /* @__PURE__ */ jsx66("ul", { ...listBoxProps, ref: listBoxRef, className: "ods-select__options", children: [...state.collection].map((item) => /* @__PURE__ */ jsx66(Option, { item, state }, item.key)) });
 }
 function Option({ item, state }) {
-  const ref = useRef26(null);
+  const ref = useRef27(null);
   const { optionProps, isSelected, isFocused, isDisabled } = useOption(
     { key: item.key },
     state,
@@ -10853,9 +10922,9 @@ function Select({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy
 }) {
-  const triggerRef = useRef26(null);
-  const listBoxRef = useRef26(null);
-  const searchRef = useRef26(null);
+  const triggerRef = useRef27(null);
+  const listBoxRef = useRef27(null);
+  const searchRef = useRef27(null);
   const [searchQuery, setSearchQuery] = useState20("");
   const [dropdownPos, setDropdownPos] = useState20({ top: 0, left: 0, width: 0 });
   const filteredOptions = useMemo10(() => {
@@ -10914,7 +10983,7 @@ function Select({
       width: rect.width
     });
   }, []);
-  useEffect14(() => {
+  useEffect15(() => {
     if (state.isOpen) {
       updatePosition();
       window.addEventListener("scroll", updatePosition, true);
@@ -10925,7 +10994,7 @@ function Select({
       };
     }
   }, [state.isOpen, updatePosition]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (state.isOpen && searchable && searchRef.current) {
       requestAnimationFrame(() => searchRef.current?.focus());
     }
@@ -11039,7 +11108,7 @@ function SettingsRow({
 
 // src/components/Sheet/Sheet.tsx
 import { AnimatePresence as AnimatePresence8, motion as motion11 } from "framer-motion";
-import { useEffect as useEffect15 } from "react";
+import { useEffect as useEffect16 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 import { Fragment as Fragment14, jsx as jsx68, jsxs as jsxs67 } from "react/jsx-runtime";
 var slideVariants = {
@@ -11074,7 +11143,7 @@ function Sheet({
   dragHandle = true,
   className
 }) {
-  useEffect15(() => {
+  useEffect16(() => {
     if (!open || !closeOnEsc) return;
     const onKey = (e) => {
       if (e.key === "Escape") onClose();
@@ -11126,7 +11195,7 @@ function Sheet({
 }
 
 // src/components/Sidebar/Sidebar.tsx
-import { useCallback as useCallback16, useEffect as useEffect16, useRef as useRef27, useState as useState21 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect17, useRef as useRef28, useState as useState21 } from "react";
 import { Fragment as Fragment15, jsx as jsx69, jsxs as jsxs68 } from "react/jsx-runtime";
 function Sidebar({
   variant = "expanded",
@@ -11149,7 +11218,7 @@ function Sidebar({
 }) {
   const allSections = sections ?? (items ? [{ items }] : []);
   const [internalPinned, setInternalPinned] = useState21(defaultPinned);
-  useEffect16(() => {
+  useEffect17(() => {
     if (pinnedProp !== void 0) return;
     try {
       const stored = window.localStorage.getItem(pinStorageKey);
@@ -11172,8 +11241,8 @@ function Sidebar({
     [pinnedProp, pinStorageKey, onPinnedChange]
   );
   const [hoverOpen, setHoverOpen] = useState21(false);
-  const openTimer = useRef27(null);
-  const closeTimer = useRef27(null);
+  const openTimer = useRef28(null);
+  const closeTimer = useRef28(null);
   const clearTimers = () => {
     if (openTimer.current) {
       clearTimeout(openTimer.current);
@@ -11184,7 +11253,7 @@ function Sidebar({
       closeTimer.current = null;
     }
   };
-  useEffect16(() => () => clearTimers(), []);
+  useEffect17(() => () => clearTimers(), []);
   const handleEnter = () => {
     clearTimers();
     openTimer.current = setTimeout(() => setHoverOpen(true), hoverOpenDelay);
@@ -11196,7 +11265,7 @@ function Sidebar({
   const autoMode = variant === "auto";
   const showAsRail = autoMode ? !pinned : variant === "rail";
   const overlayOpen = autoMode && !pinned && hoverOpen;
-  useEffect16(() => {
+  useEffect17(() => {
     if (!overlayOpen) return;
     const handler = (e) => {
       if (e.key === "Escape") {
@@ -11346,23 +11415,24 @@ function RailItem({
   tooltipDelay,
   suppressTooltip
 }) {
-  const [tipOpen, setTipOpen] = useState21(false);
-  const timerRef = useRef27(null);
+  const [open, setOpen] = useState21(false);
+  const timerRef = useRef28(null);
+  const hasChildren = !!(item.children && item.children.length > 0);
   const clear = () => {
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   };
-  useEffect16(() => () => clear(), []);
+  useEffect17(() => () => clear(), []);
   const show = () => {
     if (suppressTooltip) return;
     clear();
-    timerRef.current = setTimeout(() => setTipOpen(true), tooltipDelay);
+    timerRef.current = setTimeout(() => setOpen(true), tooltipDelay);
   };
   const hide = () => {
     clear();
-    setTipOpen(false);
+    setOpen(false);
   };
   const Comp = item.href ? "a" : "button";
   const labelText = typeof item.label === "string" ? item.label : void 0;
@@ -11381,13 +11451,20 @@ function RailItem({
             type: item.href ? void 0 : "button",
             href: item.href,
             onClick: item.onClick,
-            className: cn("ods-sidebar__rail-item", item.active && "ods-sidebar__rail-item--active"),
+            className: cn(
+              "ods-sidebar__rail-item",
+              hasChildren && "ods-sidebar__rail-item--parent",
+              item.active && "ods-sidebar__rail-item--active"
+            ),
             "aria-current": item.active ? "page" : void 0,
             "aria-label": labelText,
+            "aria-haspopup": hasChildren ? "menu" : void 0,
+            "aria-expanded": hasChildren ? open : void 0,
             children: /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-icon", children: item.icon })
           }
         ),
-        tipOpen && labelText && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-tooltip", role: "tooltip", children: [
+        open && labelText && hasChildren && /* @__PURE__ */ jsx69(RailFlyout, { title: labelText, items: item.children ?? [] }),
+        open && labelText && !hasChildren && /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-tooltip", role: "tooltip", children: [
           /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-tooltip-label", children: labelText }),
           item.shortcut && /* @__PURE__ */ jsx69("kbd", { className: "ods-sidebar__rail-kbd", children: item.shortcut })
         ] })
@@ -11395,6 +11472,34 @@ function RailItem({
     }
   );
 }
+function RailFlyout({ title, items }) {
+  return /* @__PURE__ */ jsxs68("div", { className: "ods-sidebar__rail-flyout", role: "menu", children: [
+    /* @__PURE__ */ jsx69("div", { className: "ods-sidebar__rail-flyout-header", children: /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-title", children: title }) }),
+    /* @__PURE__ */ jsx69("ul", { className: "ods-sidebar__rail-flyout-list", children: items.map((child) => {
+      const ChildComp = child.href ? "a" : "button";
+      return /* @__PURE__ */ jsx69("li", { children: /* @__PURE__ */ jsxs68(
+        ChildComp,
+        {
+          type: child.href ? void 0 : "button",
+          href: child.href,
+          onClick: child.onClick,
+          role: "menuitem",
+          className: cn(
+            "ods-sidebar__rail-flyout-item",
+            child.active && "ods-sidebar__rail-flyout-item--active"
+          ),
+          "aria-current": child.active ? "page" : void 0,
+          children: [
+            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-icon", children: child.icon }),
+            /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-label", children: child.label }),
+            child.tag && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-tag", children: child.tag }),
+            child.badge && /* @__PURE__ */ jsx69("span", { className: "ods-sidebar__rail-flyout-badge", children: child.badge })
+          ]
+        }
+      ) }, child.id);
+    }) })
+  ] });
+}
 function ExpandedLayout({
   logo,
   brand,
@@ -11619,7 +11724,7 @@ function Skeleton({ variant = "text", width, height, lines = 1, className }) {
 
 // src/components/SlideoutPanel/SlideoutPanel.tsx
 import { AnimatePresence as AnimatePresence9, motion as motion12 } from "framer-motion";
-import { useRef as useRef28 } from "react";
+import { useRef as useRef29 } from "react";
 import { FocusScope as FocusScope2, OverlayProvider as OverlayProvider2, useDialog as useDialog2, useModal as useModal2, useOverlay as useOverlay2 } from "react-aria";
 import { createPortal as createPortal8 } from "react-dom";
 import { Fragment as Fragment16, jsx as jsx71, jsxs as jsxs69 } from "react/jsx-runtime";
@@ -11645,8 +11750,8 @@ function SlideoutContent({
   footer,
   className
 }) {
-  const overlayRef = useRef28(null);
-  const panelRef = useRef28(null);
+  const overlayRef = useRef29(null);
+  const panelRef = useRef29(null);
   const { overlayProps } = useOverlay2(
     {
       isOpen: open,
@@ -11876,8 +11981,8 @@ function SocialButton({
 // src/components/Sortable/Sortable.tsx
 import {
   useCallback as useCallback17,
-  useEffect as useEffect17,
-  useRef as useRef29,
+  useEffect as useEffect18,
+  useRef as useRef30,
   useState as useState22
 } from "react";
 import { jsx as jsx74, jsxs as jsxs72 } from "react/jsx-runtime";
@@ -11892,10 +11997,10 @@ function Sortable({
   autoScrollEdge = 48,
   className
 }) {
-  const containerRef = useRef29(null);
-  const itemRefs = useRef29(/* @__PURE__ */ new Map());
-  const originalOrderRef = useRef29(null);
-  const scrollTimerRef = useRef29(null);
+  const containerRef = useRef30(null);
+  const itemRefs = useRef30(/* @__PURE__ */ new Map());
+  const originalOrderRef = useRef30(null);
+  const scrollTimerRef = useRef30(null);
   const [draggingId, setDraggingId] = useState22(null);
   const [dropPos, setDropPos] = useState22(null);
   const [kbActiveId, setKbActiveId] = useState22(null);
@@ -11959,7 +12064,7 @@ function Sortable({
     },
     [items, onChange]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (!autoScroll || !draggingId) return;
     const container = containerRef.current;
     if (!container) return;
@@ -12009,7 +12114,7 @@ function Sortable({
       }
     };
   }, [autoScroll, autoScrollEdge, draggingId, isVertical]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (!draggingId) return;
     const onKey = (e) => {
       if (e.key === "Escape") cancelDrag();
@@ -12288,7 +12393,7 @@ function Stat({
 }
 
 // src/components/Switch/Switch.tsx
-import { useRef as useRef30 } from "react";
+import { useRef as useRef31 } from "react";
 import { useSwitch } from "react-aria";
 import { jsx as jsx78, jsxs as jsxs75 } from "react/jsx-runtime";
 function Switch({
@@ -12301,7 +12406,7 @@ function Switch({
   className,
   ...props
 }) {
-  const ref = useRef30(null);
+  const ref = useRef31(null);
   const state = $fd3c5e01e837dc20$export$8042c6c013fd5226({
     isSelected: checked,
     defaultSelected: defaultChecked,
@@ -12519,11 +12624,11 @@ function TableRow({
 
 // src/components/Tabs/Tabs.tsx
 import { motion as motion13 } from "framer-motion";
-import { useMemo as useMemo11, useRef as useRef31, useState as useState24 } from "react";
+import { useMemo as useMemo11, useRef as useRef32, useState as useState24 } from "react";
 import { useTab, useTabList, useTabPanel } from "react-aria";
 import { jsx as jsx80, jsxs as jsxs77 } from "react/jsx-runtime";
 function TabButton({ item, state }) {
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const { tabProps } = useTab({ key: item.key }, state, ref);
   const isSelected = state.selectedKey === item.key;
   const isDisabled = state.disabledKeys.has(item.key);
@@ -12553,7 +12658,7 @@ function TabButton({ item, state }) {
   );
 }
 function TabPanelContent({ state, panelContent, ...props }) {
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const { tabPanelProps } = useTabPanel(props, state, ref);
   return /* @__PURE__ */ jsx80("div", { ...tabPanelProps, ref, className: "ods-tabs__panel", children: panelContent });
 }
@@ -12589,7 +12694,7 @@ function Tabs({
     disabledKeys: items.filter((i) => i.disabled).map((i) => i.value)
   };
   const state = $caeb030f09a278a1$export$4ba071daf4e486(stateProps);
-  const ref = useRef31(null);
+  const ref = useRef32(null);
   const { tabListProps } = useTabList({ ...stateProps, orientation }, state, ref);
   const currentPanelContent = panelContentMap.get(String(selectedKey));
   return /* @__PURE__ */ jsxs77("div", { className: cn("ods-tabs", `ods-tabs--${orientation}`, className), children: [
@@ -12743,7 +12848,7 @@ function TestimonialCard({
 }
 
 // src/components/Textarea/Textarea.tsx
-import { useId as useId4, useRef as useRef32, useState as useState26 } from "react";
+import { useId as useId5, useRef as useRef33, useState as useState26 } from "react";
 import { useTextField as useTextField2 } from "react-aria";
 import { jsx as jsx83, jsxs as jsxs80 } from "react/jsx-runtime";
 function Textarea({
@@ -12761,8 +12866,8 @@ function Textarea({
   onChange,
   ...props
 }) {
-  const ref = useRef32(null);
-  const errorId = useId4();
+  const ref = useRef33(null);
+  const errorId = useId5();
   const [charCount, setCharCount] = useState26(() => String(value ?? defaultValue ?? "").length);
   const ariaNameProps = resolveAccessibleName({
     label,
@@ -12862,8 +12967,8 @@ function Timeline({ items, size = "md", className }) {
 import {
   Fragment as Fragment18,
   useCallback as useCallback19,
-  useEffect as useEffect18,
-  useRef as useRef33,
+  useEffect as useEffect19,
+  useRef as useRef34,
   useState as useState27
 } from "react";
 import { Fragment as Fragment19, jsx as jsx85, jsxs as jsxs82 } from "react/jsx-runtime";
@@ -12895,13 +13000,13 @@ function TimePicker({
 }) {
   const [open, setOpen] = useState27(false);
   const [activeSeg, setActiveSeg] = useState27(null);
-  const draftRef = useRef33("");
-  const wrapRef = useRef33(null);
-  const hoursRef = useRef33(null);
-  const minutesRef = useRef33(null);
-  const secondsRef = useRef33(null);
+  const draftRef = useRef34("");
+  const wrapRef = useRef34(null);
+  const hoursRef = useRef34(null);
+  const minutesRef = useRef34(null);
+  const secondsRef = useRef34(null);
   const refOf = (s) => s === "hours" ? hoursRef : s === "minutes" ? minutesRef : secondsRef;
-  useEffect18(() => {
+  useEffect19(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (!wrapRef.current?.contains(e.target)) {
@@ -13162,7 +13267,7 @@ function TimePicker({
 }
 
 // src/components/TimezonePicker/TimezonePicker.tsx
-import { useEffect as useEffect19, useMemo as useMemo12, useRef as useRef34, useState as useState28 } from "react";
+import { useEffect as useEffect20, useMemo as useMemo12, useRef as useRef35, useState as useState28 } from "react";
 import { Fragment as Fragment20, jsx as jsx86, jsxs as jsxs83 } from "react/jsx-runtime";
 var DEFAULT_TZS = [
   { iana: "America/Los_Angeles", label: "Pacific Time", offset: "UTC\u22128" },
@@ -13192,8 +13297,8 @@ function TimezonePicker({
 }) {
   const [open, setOpen] = useState28(false);
   const [query, setQuery] = useState28("");
-  const wrapRef = useRef34(null);
-  const inputRef = useRef34(null);
+  const wrapRef = useRef35(null);
+  const inputRef = useRef35(null);
   const selected = options.find((o) => o.iana === value);
   const filtered = useMemo12(() => {
     if (!query.trim()) return options;
@@ -13202,7 +13307,7 @@ function TimezonePicker({
       (o) => o.iana.toLowerCase().includes(q) || o.label.toLowerCase().includes(q) || o.offset.toLowerCase().includes(q) || o.region?.toLowerCase().includes(q)
     );
   }, [options, query]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (!open) return;
     const onDoc = (e) => {
       if (!wrapRef.current?.contains(e.target)) {
@@ -13213,7 +13318,7 @@ function TimezonePicker({
     document.addEventListener("mousedown", onDoc);
     return () => document.removeEventListener("mousedown", onDoc);
   }, [open]);
-  useEffect19(() => {
+  useEffect20(() => {
     if (open) requestAnimationFrame(() => inputRef.current?.focus());
   }, [open]);
   const select = (iana) => {
@@ -13371,7 +13476,7 @@ import {
   useCallback as useCallback20,
   useContext as useContext2,
   useMemo as useMemo13,
-  useRef as useRef35,
+  useRef as useRef36,
   useState as useState29
 } from "react";
 import { createPortal as createPortal9 } from "react-dom";
@@ -13565,8 +13670,8 @@ function ToastProvider({
   maxStack = 3
 }) {
   const [toasts, setToasts] = useState29([]);
-  const timers = useRef35(/* @__PURE__ */ new Map());
-  const idCounter2 = useRef35(0);
+  const timers = useRef36(/* @__PURE__ */ new Map());
+  const idCounter2 = useRef36(0);
   const dismiss = useCallback20((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
     const timer = timers.current.get(id);
@@ -13834,9 +13939,9 @@ import { AnimatePresence as AnimatePresence11, motion as motion15 } from "framer
 import {
   cloneElement,
   useCallback as useCallback21,
-  useEffect as useEffect20,
+  useEffect as useEffect21,
   useLayoutEffect as useLayoutEffect4,
-  useRef as useRef36,
+  useRef as useRef37,
   useState as useState30
 } from "react";
 import { useTooltip, useTooltipTrigger } from "react-aria";
@@ -13871,7 +13976,7 @@ function TooltipContent({
   offset
 }) {
   const { tooltipProps } = useTooltip({ isOpen: state.isOpen }, state);
-  const tipRef = useRef36(null);
+  const tipRef = useRef37(null);
   const [coords, setCoords] = useState30(null);
   const reposition = useCallback21(() => {
     if (!triggerRef.current || !tipRef.current) return;
@@ -13885,7 +13990,7 @@ function TooltipContent({
     const id = requestAnimationFrame(reposition);
     return () => cancelAnimationFrame(id);
   }, [state.isOpen, reposition]);
-  useEffect20(() => {
+  useEffect21(() => {
     if (!state.isOpen) return;
     const handler = () => reposition();
     window.addEventListener("scroll", handler, true);
@@ -13941,7 +14046,7 @@ function Tooltip({
   children,
   className
 }) {
-  const triggerRef = useRef36(null);
+  const triggerRef = useRef37(null);
   const state = $3834487504f4fc00$export$4d40659c25ecb50b({ delay });
   const { triggerProps } = useTooltipTrigger({ delay }, state, triggerRef);
   return /* @__PURE__ */ jsxs88(Fragment22, { children: [
@@ -15665,13 +15770,13 @@ function YamlViewer({
 
 // src/provider/OdsProvider.tsx
 import { generateCssVars, resolveConfig } from "@octaviaflow/config";
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect21, useMemo as useMemo18 } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect22, useMemo as useMemo18 } from "react";
 import { OverlayProvider as OverlayProvider3 } from "react-aria";
 import { jsx as jsx98 } from "react/jsx-runtime";
 var OdsContext = createContext3(null);
 function OdsProvider({ config: userConfig, children }) {
   const resolved = useMemo18(() => resolveConfig(userConfig), [userConfig]);
-  useEffect21(() => {
+  useEffect22(() => {
     const cssVarsBlock = generateCssVars(resolved);
     const match = cssVarsBlock.match(/:root\s*\{([\s\S]*)\}/);
     if (match) {