xmlui 0.10.20 → 0.10.22

package/dist/lib/{index-Ckhnrf1F.mjs → index-BaUZuvtZ.mjs}

@@ -2,12 +2,12 @@ var _a;
 import "./index.css";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useRef, useInsertionEffect, useCallback, forwardRef, useState, useEffect, useId, cloneElement, useMemo, useContext, useLayoutEffect, createContext, memo, Fragment as Fragment$1, useImperativeHandle, useReducer, isValidElement, useDeferredValue, createElement, startTransition, useTransition, Children } from "react";
+import React__default, { useRef, useInsertionEffect, useCallback, forwardRef, useState, useEffect, useId, cloneElement, useMemo, useContext, useLayoutEffect, createContext, memo, Fragment as Fragment$1, useReducer, isValidElement, useDeferredValue, createElement, startTransition, useTransition, Children } from "react";
 import require$$0, { flushSync, createPortal } from "react-dom";
 import yaml from "js-yaml";
 import { useQuery, useInfiniteQuery, QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import produce, { createDraft, finishDraft, enableMapSet } from "immer";
-import { throttle, get, isNil, omitBy, isUndefined, noop as noop$2, isPlainObject, isEqual, isEmpty, union, uniq, orderBy as orderBy$1, isObject, isArray, groupBy, sortBy, omit, isNumber, isString as isString$1, set, isNaN as isNaN$1, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
+import { throttle, get, isNil, omitBy, isUndefined, noop as noop$2, isPlainObject, isEmpty, isEqual, union, uniq, orderBy as orderBy$1, isObject, isArray, groupBy, sortBy, omit, isNumber, isString as isString$1, set, isNaN as isNaN$1, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
 import { formatDistanceToNow, parse, format, parseISO, isValid, isToday, isYesterday, isTomorrow, isThisWeek, formatRelative, isThisYear, isSameDay, differenceInMinutes } from "date-fns";
 import { l as labelPositionMd, o as orientationOptionMd, v as validationStatusMd, b as alignmentOptionValues, i as isSizeType, L as LinkTargetMd, c as alignmentOptionMd, d as iconPositionMd, e as buttonTypesMd, s as sizeMd, f as buttonThemeMd, g as buttonVariantMd, h as layoutOptionKeys, T as TextVariantElement, V as VariantPropsKeys, j as variantOptionsMd, k as scrollAnchoringValues, m as buttonThemeNames, n as iconPositionNames, p as buttonVariantNames, t as triggerPositionNames, q as httpMethodNames, r as orientationOptionValues, u as viewportSizeNames, M as MetadataProvider } from "./metadata-utils-BTIt1_wE.mjs";
 import classnames from "classnames";
@@ -21,15 +21,13 @@ import { useLocation, NavLink as NavLink$1, Link, useNavigate, Routes, Route, Na
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { useContextSelector, createContext as createContext$1 } from "use-context-selector";
-import { FixedSizeList } from "react-window";
-import AutoSizer from "react-virtualized-auto-sizer";
+import { Virtualizer } from "virtua";
 import { F as Parser, G as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, H as T_MEMBER_ACCESS_EXPRESSION, I as T_IDENTIFIER, J as T_PREFIX_OP_EXPRESSION, K as T_FUNCTION_DECLARATION, L as T_ARROW_EXPRESSION, M as createXmlUiTreeNodeId, O as T_EMPTY_STATEMENT, Q as T_SWITCH_STATEMENT, R as T_TRY_STATEMENT, V as T_THROW_STATEMENT, W as T_FOR_OF_STATEMENT, X as T_FOR_IN_STATEMENT, Y as T_FOR_STATEMENT, Z as T_EXPRESSION_STATEMENT, _ as T_BREAK_STATEMENT, $ as T_CONTINUE_STATEMENT, a0 as T_DO_WHILE_STATEMENT, a1 as T_WHILE_STATEMENT, a2 as T_RETURN_STATEMENT, a3 as T_IF_STATEMENT, a4 as T_CONST_STATEMENT, a5 as T_LET_STATEMENT, a6 as T_ARROW_EXPRESSION_STATEMENT, a7 as T_BLOCK_STATEMENT, a8 as T_VAR_STATEMENT, a9 as T_ASSIGNMENT_EXPRESSION, aa as T_LITERAL, ab as T_SPREAD_EXPRESSION, ac as T_FUNCTION_INVOCATION_EXPRESSION, ad as T_POSTFIX_OP_EXPRESSION, ae as T_CONDITIONAL_EXPRESSION, af as T_BINARY_EXPRESSION, ag as T_UNARY_EXPRESSION, ah as T_OBJECT_LITERAL, ai as T_ARRAY_LITERAL, aj as T_SEQUENCE_EXPRESSION, ak as T_TEMPLATE_LITERAL_EXPRESSION, al as T_VAR_DECLARATION, am as T_DESTRUCTURE, h as createXmlUiParser, w as nodeToComponentDef, D as DiagnosticCategory, E as ErrCodes, S as SyntaxKind, an as PARSED_MARK_PROP, ao as collectCodeBehindFromSource, ap as removeCodeBehindTokensFromTree } from "./transform-Tooy42EB.mjs";
 import { useReactTable, getPaginationRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { RenderPropSticky } from "react-sticky-el";
 import * as dropzone from "react-dropzone";
 import toast, { Toaster, ToastBar } from "react-hot-toast";
-import { Virtualizer } from "virtua";
 import memoizeOne from "memoize-one";
 import { Popover, PopoverTrigger, Portal as Portal$1, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
 import { FocusScope } from "@radix-ui/react-focus-scope";
@@ -44,6 +42,7 @@ import rehypeRaw from "rehype-raw";
 import { visit } from "unist-util-visit";
 import EmojiPicker, { EmojiStyle } from "emoji-picker-react";
 import * as HoverCard from "@radix-ui/react-hover-card";
+import { useSpring, useInView, animated } from "@react-spring/web";
 import Papa from "papaparse";
 import { Root as Root$2, List, Trigger as Trigger$1, Content as Content$1 } from "@radix-ui/react-tabs";
 import scrollIntoView from "scroll-into-view-if-needed";
@@ -54,7 +53,6 @@ import { usePopper } from "react-popper";
 import * as RechartsPrimitive from "recharts";
 import { Area, ResponsiveContainer, AreaChart as AreaChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Legend as Legend$1, BarChart as BarChart$1, Bar, PieChart as PieChart$1, Pie, LabelList as LabelList$1, Sector, LineChart as LineChart$1, Line, Radar, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from "recharts";
 import { MemoryRouter, HashRouter, BrowserRouter } from "react-router-dom";
-import { useSpring, useInView, animated } from "@react-spring/web";
 import { AnimatePresence, motion } from "framer-motion";
 import { c as componentFileExtension, a as codeBehindFileExtension, g as getLintSeverity, L as LintSeverity, l as lintApp, p as printComponentLints, d as lintErrorsComponent } from "./xmlui-serializer-uCYa8_tZ.mjs";
 var client = {};
@@ -1734,8 +1732,8 @@ const styles$1h = {
 };
 const themeVars$Y = `'{"padding-Button": "var(--xmlui-padding-Button)", "paddingHorizontal-Button": "var(--xmlui-paddingHorizontal-Button, var(--xmlui-padding-Button))", "paddingVertical-Button": "var(--xmlui-paddingVertical-Button, var(--xmlui-padding-Button))", "paddingLeft-Button": "var(--xmlui-paddingLeft-Button, var(--xmlui-paddingHorizontal-Button, var(--xmlui-padding-Button)))", "paddingRight-Button": "var(--xmlui-paddingRight-Button, var(--xmlui-paddingHorizontal-Button, var(--xmlui-padding-Button)))", "paddingTop-Button": "var(--xmlui-paddingTop-Button, var(--xmlui-paddingVertical-Button, var(--xmlui-padding-Button)))", "paddingBottom-Button": "var(--xmlui-paddingBottom-Button, var(--xmlui-paddingVertical-Button, var(--xmlui-padding-Button)))", "padding-Button-xs": "var(--xmlui-padding-Button-xs)", "paddingHorizontal-Button-xs": "var(--xmlui-paddingHorizontal-Button-xs, var(--xmlui-padding-Button-xs))", "paddingVertical-Button-xs": "var(--xmlui-paddingVertical-Button-xs, var(--xmlui-padding-Button-xs))", "paddingLeft-Button-xs": "var(--xmlui-paddingLeft-Button-xs, var(--xmlui-paddingHorizontal-Button-xs, var(--xmlui-padding-Button-xs)))", "paddingRight-Button-xs": "var(--xmlui-paddingRight-Button-xs, var(--xmlui-paddingHorizontal-Button-xs, var(--xmlui-padding-Button-xs)))", "paddingTop-Button-xs": "var(--xmlui-paddingTop-Button-xs, var(--xmlui-paddingVertical-Button-xs, var(--xmlui-padding-Button-xs)))", "paddingBottom-Button-xs": "var(--xmlui-paddingBottom-Button-xs, var(--xmlui-paddingVertical-Button-xs, var(--xmlui-padding-Button-xs)))", "padding-Button-sm": "var(--xmlui-padding-Button-sm)", "paddingHorizontal-Button-sm": "var(--xmlui-paddingHorizontal-Button-sm, var(--xmlui-padding-Button-sm))", "paddingVertical-Button-sm": "var(--xmlui-paddingVertical-Button-sm, var(--xmlui-padding-Button-sm))", "paddingLeft-Button-sm": "var(--xmlui-paddingLeft-Button-sm, var(--xmlui-paddingHorizontal-Button-sm, var(--xmlui-padding-Button-sm)))", "paddingRight-Button-sm": "var(--xmlui-paddingRight-Button-sm, var(--xmlui-paddingHorizontal-Button-sm, var(--xmlui-padding-Button-sm)))", "paddingTop-Button-sm": "var(--xmlui-paddingTop-Button-sm, var(--xmlui-paddingVertical-Button-sm, var(--xmlui-padding-Button-sm)))", "paddingBottom-Button-sm": "var(--xmlui-paddingBottom-Button-sm, var(--xmlui-paddingVertical-Button-sm, var(--xmlui-padding-Button-sm)))", "padding-Button-md": "var(--xmlui-padding-Button-md)", "paddingHorizontal-Button-md": "var(--xmlui-paddingHorizontal-Button-md, var(--xmlui-padding-Button-md))", "paddingVertical-Button-md": "var(--xmlui-paddingVertical-Button-md, var(--xmlui-padding-Button-md))", "paddingLeft-Button-md": "var(--xmlui-paddingLeft-Button-md, var(--xmlui-paddingHorizontal-Button-md, var(--xmlui-padding-Button-md)))", "paddingRight-Button-md": "var(--xmlui-paddingRight-Button-md, var(--xmlui-paddingHorizontal-Button-md, var(--xmlui-padding-Button-md)))", "paddingTop-Button-md": "var(--xmlui-paddingTop-Button-md, var(--xmlui-paddingVertical-Button-md, var(--xmlui-padding-Button-md)))", "paddingBottom-Button-md": "var(--xmlui-paddingBottom-Button-md, var(--xmlui-paddingVertical-Button-md, var(--xmlui-padding-Button-md)))", "padding-Button-lg": "var(--xmlui-padding-Button-lg)", "paddingHorizontal-Button-lg": "var(--xmlui-paddingHorizontal-Button-lg, var(--xmlui-padding-Button-lg))", "paddingVertical-Button-lg": "var(--xmlui-paddingVertical-Button-lg, var(--xmlui-padding-Button-lg))", "paddingLeft-Button-lg": "var(--xmlui-paddingLeft-Button-lg, var(--xmlui-paddingHorizontal-Button-lg, var(--xmlui-padding-Button-lg)))", "paddingRight-Button-lg": "var(--xmlui-paddingRight-Button-lg, var(--xmlui-paddingHorizontal-Button-lg, var(--xmlui-padding-Button-lg)))", "paddingTop-Button-lg": "var(--xmlui-paddingTop-Button-lg, var(--xmlui-paddingVertical-Button-lg, var(--xmlui-padding-Button-lg)))", "paddingBottom-Button-lg": "var(--xmlui-paddingBottom-Button-lg, var(--xmlui-paddingVertical-Button-lg, var(--xmlui-padding-Button-lg)))", "width-Button": "var(--xmlui-width-Button)", "height-Button": "var(--xmlui-height-Button)", "fontFamily-Button-primary-solid": "var(--xmlui-fontFamily-Button-primary-solid)", "fontSize-Button-primary-solid": "var(--xmlui-fontSize-Button-primary-solid)", "fontWeight-Button-primary-solid": "var(--xmlui-fontWeight-Button-primary-solid)", "borderRadius-Button-primary-solid": "var(--xmlui-borderRadius-Button-primary-solid)", "borderWidth-Button-primary-solid": "var(--xmlui-borderWidth-Button-primary-solid)", "borderColor-Button-primary-solid": "var(--xmlui-borderColor-Button-primary-solid)", "borderStyle-Button-primary-solid": "var(--xmlui-borderStyle-Button-primary-solid)", "backgroundColor-Button-primary-solid": "var(--xmlui-backgroundColor-Button-primary-solid)", "textColor-Button-primary-solid": "var(--xmlui-textColor-Button-primary-solid)", "boxShadow-Button-primary-solid": "var(--xmlui-boxShadow-Button-primary-solid)", "outlineWidth-Button-primary-solid--focus": "var(--xmlui-outlineWidth-Button-primary-solid--focus)", "outlineColor-Button-primary-solid--focus": "var(--xmlui-outlineColor-Button-primary-solid--focus)", "outlineStyle-Button-primary-solid--focus": "var(--xmlui-outlineStyle-Button-primary-solid--focus)", "outlineOffset-Button-primary-solid--focus": "var(--xmlui-outlineOffset-Button-primary-solid--focus)", "borderColor-Button-primary-solid--hover": "var(--xmlui-borderColor-Button-primary-solid--hover)", "textColor-Button-primary-solid--hover": "var(--xmlui-textColor-Button-primary-solid--hover)", "backgroundColor-Button-primary-solid--hover": "var(--xmlui-backgroundColor-Button-primary-solid--hover)", "borderColor-Button-primary-solid--active": "var(--xmlui-borderColor-Button-primary-solid--active)", "textColor-Button-primary-solid--active": "var(--xmlui-textColor-Button-primary-solid--active)", "boxShadow-Button-primary-solid--active": "var(--xmlui-boxShadow-Button-primary-solid--active)", "backgroundColor-Button-primary-solid--active": "var(--xmlui-backgroundColor-Button-primary-solid--active)", "backgroundColor-Button--disabled": "var(--xmlui-backgroundColor-Button--disabled)", "textColor-Button--disabled": "var(--xmlui-textColor-Button--disabled)", "borderColor-Button--disabled": "var(--xmlui-borderColor-Button--disabled)", "fontFamily-Button-secondary-solid": "var(--xmlui-fontFamily-Button-secondary-solid)", "fontSize-Button-secondary-solid": "var(--xmlui-fontSize-Button-secondary-solid)", "fontWeight-Button-secondary-solid": "var(--xmlui-fontWeight-Button-secondary-solid)", "borderRadius-Button-secondary-solid": "var(--xmlui-borderRadius-Button-secondary-solid)", "borderWidth-Button-secondary-solid": "var(--xmlui-borderWidth-Button-secondary-solid)", "borderColor-Button-secondary-solid": "var(--xmlui-borderColor-Button-secondary-solid)", "borderStyle-Button-secondary-solid": "var(--xmlui-borderStyle-Button-secondary-solid)", "backgroundColor-Button-secondary-solid": "var(--xmlui-backgroundColor-Button-secondary-solid)", "textColor-Button-secondary-solid": "var(--xmlui-textColor-Button-secondary-solid)", "boxShadow-Button-secondary-solid": "var(--xmlui-boxShadow-Button-secondary-solid)", "outlineWidth-Button-secondary-solid--focus": "var(--xmlui-outlineWidth-Button-secondary-solid--focus)", "outlineColor-Button-secondary-solid--focus": "var(--xmlui-outlineColor-Button-secondary-solid--focus)", "outlineStyle-Button-secondary-solid--focus": "var(--xmlui-outlineStyle-Button-secondary-solid--focus)", "outlineOffset-Button-secondary-solid--focus": "var(--xmlui-outlineOffset-Button-secondary-solid--focus)", "borderColor-Button-secondary-solid--hover": "var(--xmlui-borderColor-Button-secondary-solid--hover)", "textColor-Button-secondary-solid--hover": "var(--xmlui-textColor-Button-secondary-solid--hover)", "backgroundColor-Button-secondary-solid--hover": "var(--xmlui-backgroundColor-Button-secondary-solid--hover)", "borderColor-Button-secondary-solid--active": "var(--xmlui-borderColor-Button-secondary-solid--active)", "textColor-Button-secondary-solid--active": "var(--xmlui-textColor-Button-secondary-solid--active)", "boxShadow-Button-secondary-solid--active": "var(--xmlui-boxShadow-Button-secondary-solid--active)", "backgroundColor-Button-secondary-solid--active": "var(--xmlui-backgroundColor-Button-secondary-solid--active)", "fontFamily-Button-attention-solid": "var(--xmlui-fontFamily-Button-attention-solid)", "fontSize-Button-attention-solid": "var(--xmlui-fontSize-Button-attention-solid)", "fontWeight-Button-attention-solid": "var(--xmlui-fontWeight-Button-attention-solid)", "borderRadius-Button-attention-solid": "var(--xmlui-borderRadius-Button-attention-solid)", "borderWidth-Button-attention-solid": "var(--xmlui-borderWidth-Button-attention-solid)", "borderColor-Button-attention-solid": "var(--xmlui-borderColor-Button-attention-solid)", "borderStyle-Button-attention-solid": "var(--xmlui-borderStyle-Button-attention-solid)", "backgroundColor-Button-attention-solid": "var(--xmlui-backgroundColor-Button-attention-solid)", "textColor-Button-attention-solid": "var(--xmlui-textColor-Button-attention-solid)", "boxShadow-Button-attention-solid": "var(--xmlui-boxShadow-Button-attention-solid)", "outlineWidth-Button-attention-solid--focus": "var(--xmlui-outlineWidth-Button-attention-solid--focus)", "outlineColor-Button-attention-solid--focus": "var(--xmlui-outlineColor-Button-attention-solid--focus)", "outlineStyle-Button-attention-solid--focus": "var(--xmlui-outlineStyle-Button-attention-solid--focus)", "outlineOffset-Button-attention-solid--focus": "var(--xmlui-outlineOffset-Button-attention-solid--focus)", "borderColor-Button-attention-solid--hover": "var(--xmlui-borderColor-Button-attention-solid--hover)", "textColor-Button-attention-solid--hover": "var(--xmlui-textColor-Button-attention-solid--hover)", "backgroundColor-Button-attention-solid--hover": "var(--xmlui-backgroundColor-Button-attention-solid--hover)", "borderColor-Button-attention-solid--active": "var(--xmlui-borderColor-Button-attention-solid--active)", "textColor-Button-attention-solid--active": "var(--xmlui-textColor-Button-attention-solid--active)", "boxShadow-Button-attention-solid--active": "var(--xmlui-boxShadow-Button-attention-solid--active)", "backgroundColor-Button-attention-solid--active": "var(--xmlui-backgroundColor-Button-attention-solid--active)", "fontFamily-Button-primary-outlined": "var(--xmlui-fontFamily-Button-primary-outlined)", "fontSize-Button-primary-outlined": "var(--xmlui-fontSize-Button-primary-outlined)", "fontWeight-Button-primary-outlined": "var(--xmlui-fontWeight-Button-primary-outlined)", "borderRadius-Button-primary-outlined": "var(--xmlui-borderRadius-Button-primary-outlined)", "borderWidth-Button-primary-outlined": "var(--xmlui-borderWidth-Button-primary-outlined)", "borderColor-Button-primary-outlined": "var(--xmlui-borderColor-Button-primary-outlined)", "borderStyle-Button-primary-outlined": "var(--xmlui-borderStyle-Button-primary-outlined)", "textColor-Button-primary-outlined": "var(--xmlui-textColor-Button-primary-outlined)", "boxShadow-Button-primary-outlined": "var(--xmlui-boxShadow-Button-primary-outlined)", "outlineWidth-Button-primary-outlined--focus": "var(--xmlui-outlineWidth-Button-primary-outlined--focus)", "outlineColor-Button-primary-outlined--focus": "var(--xmlui-outlineColor-Button-primary-outlined--focus)", "outlineStyle-Button-primary-outlined--focus": "var(--xmlui-outlineStyle-Button-primary-outlined--focus)", "outlineOffset-Button-primary-outlined--focus": "var(--xmlui-outlineOffset-Button-primary-outlined--focus)", "borderColor-Button-primary-outlined--hover": "var(--xmlui-borderColor-Button-primary-outlined--hover)", "backgroundColor-Button-primary-outlined--hover": "var(--xmlui-backgroundColor-Button-primary-outlined--hover)", "textColor-Button-primary-outlined--hover": "var(--xmlui-textColor-Button-primary-outlined--hover)", "borderColor-Button-primary-outlined--active": "var(--xmlui-borderColor-Button-primary-outlined--active)", "backgroundColor-Button-primary-outlined--active": "var(--xmlui-backgroundColor-Button-primary-outlined--active)", "textColor-Button-primary-outlined--active": "var(--xmlui-textColor-Button-primary-outlined--active)", "fontFamily-Button-secondary-outlined": "var(--xmlui-fontFamily-Button-secondary-outlined)", "fontSize-Button-secondary-outlined": "var(--xmlui-fontSize-Button-secondary-outlined)", "fontWeight-Button-secondary-outlined": "var(--xmlui-fontWeight-Button-secondary-outlined)", "borderRadius-Button-secondary-outlined": "var(--xmlui-borderRadius-Button-secondary-outlined)", "borderWidth-Button-secondary-outlined": "var(--xmlui-borderWidth-Button-secondary-outlined)", "borderColor-Button-secondary-outlined": "var(--xmlui-borderColor-Button-secondary-outlined)", "borderStyle-Button-secondary-outlined": "var(--xmlui-borderStyle-Button-secondary-outlined)", "textColor-Button-secondary-outlined": "var(--xmlui-textColor-Button-secondary-outlined)", "boxShadow-Button-secondary-outlined": "var(--xmlui-boxShadow-Button-secondary-outlined)", "outlineWidth-Button-secondary-outlined--focus": "var(--xmlui-outlineWidth-Button-secondary-outlined--focus)", "outlineColor-Button-secondary-outlined--focus": "var(--xmlui-outlineColor-Button-secondary-outlined--focus)", "outlineStyle-Button-secondary-outlined--focus": "var(--xmlui-outlineStyle-Button-secondary-outlined--focus)", "outlineOffset-Button-secondary-outlined--focus": "var(--xmlui-outlineOffset-Button-secondary-outlined--focus)", "borderColor-Button-secondary-outlined--hover": "var(--xmlui-borderColor-Button-secondary-outlined--hover)", "backgroundColor-Button-secondary-outlined--hover": "var(--xmlui-backgroundColor-Button-secondary-outlined--hover)", "textColor-Button-secondary-outlined--hover": "var(--xmlui-textColor-Button-secondary-outlined--hover)", "borderColor-Button-secondary-outlined--active": "var(--xmlui-borderColor-Button-secondary-outlined--active)", "backgroundColor-Button-secondary-outlined--active": "var(--xmlui-backgroundColor-Button-secondary-outlined--active)", "textColor-Button-secondary-outlined--active": "var(--xmlui-textColor-Button-secondary-outlined--active)", "fontFamily-Button-attention-outlined": "var(--xmlui-fontFamily-Button-attention-outlined)", "fontSize-Button-attention-outlined": "var(--xmlui-fontSize-Button-attention-outlined)", "fontWeight-Button-attention-outlined": "var(--xmlui-fontWeight-Button-attention-outlined)", "borderRadius-Button-attention-outlined": "var(--xmlui-borderRadius-Button-attention-outlined)", "borderWidth-Button-attention-outlined": "var(--xmlui-borderWidth-Button-attention-outlined)", "borderColor-Button-attention-outlined": "var(--xmlui-borderColor-Button-attention-outlined)", "borderStyle-Button-attention-outlined": "var(--xmlui-borderStyle-Button-attention-outlined)", "textColor-Button-attention-outlined": "var(--xmlui-textColor-Button-attention-outlined)", "boxShadow-Button-attention-outlined": "var(--xmlui-boxShadow-Button-attention-outlined)", "outlineWidth-Button-attention-outlined--focus": "var(--xmlui-outlineWidth-Button-attention-outlined--focus)", "outlineColor-Button-attention-outlined--focus": "var(--xmlui-outlineColor-Button-attention-outlined--focus)", "outlineStyle-Button-attention-outlined--focus": "var(--xmlui-outlineStyle-Button-attention-outlined--focus)", "outlineOffset-Button-attention-outlined--focus": "var(--xmlui-outlineOffset-Button-attention-outlined--focus)", "borderColor-Button-attention-outlined--hover": "var(--xmlui-borderColor-Button-attention-outlined--hover)", "backgroundColor-Button-attention-outlined--hover": "var(--xmlui-backgroundColor-Button-attention-outlined--hover)", "textColor-Button-attention-outlined--hover": "var(--xmlui-textColor-Button-attention-outlined--hover)", "borderColor-Button-attention-outlined--active": "var(--xmlui-borderColor-Button-attention-outlined--active)", "backgroundColor-Button-attention-outlined--active": "var(--xmlui-backgroundColor-Button-attention-outlined--active)", "textColor-Button-attention-outlined--active": "var(--xmlui-textColor-Button-attention-outlined--active)", "fontFamily-Button-primary-ghost": "var(--xmlui-fontFamily-Button-primary-ghost)", "fontSize-Button-primary-ghost": "var(--xmlui-fontSize-Button-primary-ghost)", "fontWeight-Button-primary-ghost": "var(--xmlui-fontWeight-Button-primary-ghost)", "borderRadius-Button-primary-ghost": "var(--xmlui-borderRadius-Button-primary-ghost)", "borderWidth-Button-primary-ghost": "var(--xmlui-borderWidth-Button-primary-ghost)", "textColor-Button-primary-ghost": "var(--xmlui-textColor-Button-primary-ghost)", "outlineWidth-Button-primary-ghost--focus": "var(--xmlui-outlineWidth-Button-primary-ghost--focus)", "outlineColor-Button-primary-ghost--focus": "var(--xmlui-outlineColor-Button-primary-ghost--focus)", "outlineStyle-Button-primary-ghost--focus": "var(--xmlui-outlineStyle-Button-primary-ghost--focus)", "outlineOffset-Button-primary-ghost--focus": "var(--xmlui-outlineOffset-Button-primary-ghost--focus)", "backgroundColor-Button-primary-ghost--hover": "var(--xmlui-backgroundColor-Button-primary-ghost--hover)", "textColor-Button-primary-ghost--hover": "var(--xmlui-textColor-Button-primary-ghost--hover)", "backgroundColor-Button-primary-ghost--active": "var(--xmlui-backgroundColor-Button-primary-ghost--active)", "textColor-Button-primary-ghost--active": "var(--xmlui-textColor-Button-primary-ghost--active)", "fontFamily-Button-secondary-ghost": "var(--xmlui-fontFamily-Button-secondary-ghost)", "fontSize-Button-secondary-ghost": "var(--xmlui-fontSize-Button-secondary-ghost)", "fontWeight-Button-secondary-ghost": "var(--xmlui-fontWeight-Button-secondary-ghost)", "borderRadius-Button-secondary-ghost": "var(--xmlui-borderRadius-Button-secondary-ghost)", "borderWidth-Button-secondary-ghost": "var(--xmlui-borderWidth-Button-secondary-ghost)", "textColor-Button-secondary-ghost": "var(--xmlui-textColor-Button-secondary-ghost)", "outlineWidth-Button-secondary-ghost--focus": "var(--xmlui-outlineWidth-Button-secondary-ghost--focus)", "outlineColor-Button-secondary-ghost--focus": "var(--xmlui-outlineColor-Button-secondary-ghost--focus)", "outlineStyle-Button-secondary-ghost--focus": "var(--xmlui-outlineStyle-Button-secondary-ghost--focus)", "outlineOffset-Button-secondary-ghost--focus": "var(--xmlui-outlineOffset-Button-secondary-ghost--focus)", "backgroundColor-Button-secondary-ghost--hover": "var(--xmlui-backgroundColor-Button-secondary-ghost--hover)", "textColor-Button-secondary-ghost--hover": "var(--xmlui-textColor-Button-secondary-ghost--hover)", "backgroundColor-Button-secondary-ghost--active": "var(--xmlui-backgroundColor-Button-secondary-ghost--active)", "textColor-Button-secondary-ghost--active": "var(--xmlui-textColor-Button-secondary-ghost--active)", "fontFamily-Button-attention-ghost": "var(--xmlui-fontFamily-Button-attention-ghost)", "fontSize-Button-attention-ghost": "var(--xmlui-fontSize-Button-attention-ghost)", "fontWeight-Button-attention-ghost": "var(--xmlui-fontWeight-Button-attention-ghost)", "borderRadius-Button-attention-ghost": "var(--xmlui-borderRadius-Button-attention-ghost)", "borderWidth-Button-attention-ghost": "var(--xmlui-borderWidth-Button-attention-ghost)", "textColor-Button-attention-ghost": "var(--xmlui-textColor-Button-attention-ghost)", "outlineWidth-Button-attention-ghost--focus": "var(--xmlui-outlineWidth-Button-attention-ghost--focus)", "outlineColor-Button-attention-ghost--focus": "var(--xmlui-outlineColor-Button-attention-ghost--focus)", "outlineStyle-Button-attention-ghost--focus": "var(--xmlui-outlineStyle-Button-attention-ghost--focus)", "outlineOffset-Button-attention-ghost--focus": "var(--xmlui-outlineOffset-Button-attention-ghost--focus)", "backgroundColor-Button-attention-ghost--hover": "var(--xmlui-backgroundColor-Button-attention-ghost--hover)", "textColor-Button-attention-ghost--hover": "var(--xmlui-textColor-Button-attention-ghost--hover)", "backgroundColor-Button-attention-ghost--active": "var(--xmlui-backgroundColor-Button-attention-ghost--active)", "textColor-Button-attention-ghost--active": "var(--xmlui-textColor-Button-attention-ghost--active)"}'`;
 const button$2 = "_button_1c10z_14";
-const alignStart = "_alignStart_1c10z_30";
-const alignEnd = "_alignEnd_1c10z_33";
+const alignStart$1 = "_alignStart_1c10z_30";
+const alignEnd$1 = "_alignEnd_1c10z_33";
 const buttonHorizontal = "_buttonHorizontal_1c10z_39";
 const xs$1 = "_xs_1c10z_42";
 const sm$1 = "_sm_1c10z_49";
@@ -1754,8 +1752,8 @@ const ghostAttention = "_ghostAttention_1c10z_366";
 const styles$1g = {
   themeVars: themeVars$Y,
   button: button$2,
-  alignStart,
-  alignEnd,
+  alignStart: alignStart$1,
+  alignEnd: alignEnd$1,
   buttonHorizontal,
   xs: xs$1,
   sm: sm$1,
@@ -4850,6 +4848,7 @@ function App({
   name,
   className,
   applyDefaultContentPadding,
+  registerComponentApi,
   ...rest
 }) {
   const { getThemeVar } = useTheme();
@@ -6249,7 +6248,7 @@ function hierarchyToNative(hierarchyData, fieldConfig) {
     treeItemsById
   };
 }
-const TreeRow = memo(({ index, style: style2, data }) => {
+const TreeRow = memo(({ index, data }) => {
   const {
     nodes,
     toggleNode,
@@ -6306,7 +6305,7 @@ const TreeRow = memo(({ index, style: style2, data }) => {
   );
   const nodeWithState = treeItem;
   const isLoading = nodeWithState.loadingState === "loading";
-  return /* @__PURE__ */ jsx("div", { style: { ...style2, width: "auto", minWidth: "100%", display: "flex" }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { style: { width: "100%", display: "flex" }, children: /* @__PURE__ */ jsxs(
     "div",
     {
       className: classnames(styles$16.rowWrapper, {
@@ -6897,10 +6896,6 @@ const TreeComponent = memo((props) => {
     animateExpand,
     expandRotation
   ]);
-  const getItemKey = useCallback((index, data2) => {
-    const node = data2.nodes[index];
-    return (node == null ? void 0 : node.key) || (node == null ? void 0 : node.id) || `fallback-${index}`;
-  }, []);
   const treeApiMethods = useMemo(() => {
     return {
       // Expansion methods
@@ -7076,14 +7071,14 @@ const TreeComponent = memo((props) => {
             (item2) => String(item2.key) === String(nodeId)
           );
           if (nodeIndex >= 0 && listRef.current) {
-            listRef.current.scrollToItem(nodeIndex, "center");
+            listRef.current.scrollToIndex(nodeIndex, { align: "center" });
           }
         }, 0);
       },
       scrollToItem: (nodeId) => {
         const nodeIndex = findNodeIndexById(nodeId);
         if (nodeIndex >= 0 && listRef.current) {
-          listRef.current.scrollToItem(nodeIndex, "center");
+          listRef.current.scrollToIndex(nodeIndex, { align: "center" });
         }
       },
       appendNode: (parentNodeId, nodeData) => {
@@ -7400,19 +7395,8 @@ const TreeComponent = memo((props) => {
       onFocus: handleTreeFocus,
       onBlur: handleTreeBlur,
       onKeyDown: handleKeyDown,
-      children: /* @__PURE__ */ jsx(AutoSizer, { children: ({ width, height }) => /* @__PURE__ */ jsx(
-        FixedSizeList,
-        {
-          ref: listRef,
-          height,
-          itemCount: itemData.nodes.length,
-          itemData,
-          itemSize: itemHeight,
-          itemKey: getItemKey,
-          width,
-          children: TreeRow
-        }
-      ) })
+      style: { height: "100%", overflow: "auto" },
+      children: /* @__PURE__ */ jsx(Virtualizer, { ref: listRef, children: flatTreeData.map((node, index) => /* @__PURE__ */ jsx(TreeRow, { index, data: itemData }, node.key)) })
     }
   );
 });
@@ -10798,6 +10782,576 @@ const styles$13 = {
   breakKeep,
   breakHyphenate
 };
+function hashString(str) {
+  let hash = 5381;
+  let i = str.length;
+  while (i) {
+    hash = hash * 33 ^ str.charCodeAt(--i);
+  }
+  let s = (hash >>> 0).toString(36);
+  return s;
+}
+function toKebabCase(str) {
+  if (str.startsWith("--")) {
+    return str;
+  }
+  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+}
+function stableJSONStringify(obj) {
+  return JSON.stringify(obj);
+}
+class StyleRegistry {
+  constructor() {
+    this.cache = /* @__PURE__ */ new Map();
+    this.rootClasses = /* @__PURE__ */ new Set();
+    this.injected = /* @__PURE__ */ new Set();
+    this.refCounts = /* @__PURE__ */ new Map();
+    this.ssrHashes = /* @__PURE__ */ new Set();
+  }
+  register(styles2) {
+    const key = stableJSONStringify(styles2);
+    const styleHash = hashString(key);
+    const cachedEntry = this.cache.get(styleHash);
+    if (cachedEntry) {
+      return cachedEntry;
+    }
+    const className = `css-${styleHash}`;
+    const css = this._generateCss(`.${className}`, styles2);
+    const entry = { className, styleHash, css };
+    this.cache.set(styleHash, entry);
+    return entry;
+  }
+  /**
+   * [PRIVATE] Recursively generates CSS rules from a style object.
+   * This is the new, more powerful engine.
+   * @param selector - The CSS selector for the current context (e.g., '.css-123' or '&:hover').
+   * @param styles - The style object to process.
+   * @returns A string of CSS rules.
+   */
+  _generateCss(selector, styles2) {
+    const directProps = [];
+    const nestedRules = [];
+    for (const key in styles2) {
+      const value = styles2[key];
+      if (typeof value === "object" && value !== null) {
+        nestedRules.push(this._processNestedRule(selector, key, value));
+      } else {
+        directProps.push(`${toKebabCase(key)}:${value};`);
+      }
+    }
+    let finalCss = "";
+    if (directProps.length > 0) {
+      finalCss += `${selector} {${directProps.join("")}}`;
+    }
+    finalCss += nestedRules.join("");
+    return finalCss;
+  }
+  _processNestedRule(parentSelector, nestedKey, nestedStyles) {
+    if (nestedKey.startsWith("@")) {
+      return `${nestedKey}{${this._generateCss(parentSelector, nestedStyles)}}`;
+    }
+    const newSelector = nestedKey.replace(/&/g, parentSelector);
+    return this._generateCss(newSelector, nestedStyles);
+  }
+  getSsrStyles() {
+    const allCss = Array.from(this.cache.values()).map((entry) => entry.css).join("");
+    return `@layer dynamic {${allCss}}`;
+  }
+  /**
+   * Adds a class name to be applied to the <html> tag.
+   */
+  addRootClasses(classNames) {
+    classNames.forEach((className) => {
+      this.rootClasses.add(className);
+    });
+  }
+  /**
+   * Returns a space-separated string of all collected html classes.
+   */
+  getRootClasses() {
+    return Array.from(this.rootClasses).join(" ");
+  }
+  // NEW: A helper to safely get the current reference count.
+  getRefCount(styleHash) {
+    return this.refCounts.get(styleHash) || 0;
+  }
+  /**
+   * Increments the reference count for a given style hash.
+   */
+  incrementRef(styleHash) {
+    const newCount = (this.refCounts.get(styleHash) || 0) + 1;
+    this.refCounts.set(styleHash, newCount);
+  }
+  /**
+   * Decrements the reference count for a given style hash.
+   * @returns {number} The new reference count.
+   */
+  decrementRef(styleHash) {
+    const currentCount = this.refCounts.get(styleHash) || 0;
+    const newCount = Math.max(0, currentCount - 1);
+    if (newCount > 0) {
+      this.refCounts.set(styleHash, newCount);
+    } else {
+      this.refCounts.delete(styleHash);
+    }
+    return newCount;
+  }
+}
+const IndexerContext = React__default.createContext({
+  indexing: false
+});
+function useIndexerContext() {
+  return useContext(IndexerContext);
+}
+const StyleContext = createContext(null);
+function StyleProvider({
+  children,
+  styleRegistry = new StyleRegistry(),
+  forceNew = false
+  // Optional prop to force a new registry
+}) {
+  const parentRegistry = useContext(StyleContext);
+  const [registry] = useState(() => {
+    const newRegistry = styleRegistry;
+    if (typeof window !== "undefined") {
+      const ssrTag = document.querySelector('style[data-style-registry="true"]');
+      const ssrHashes = ssrTag == null ? void 0 : ssrTag.getAttribute("data-ssr-hashes");
+      if (ssrHashes) {
+        let hashes = ssrHashes.split(",");
+        newRegistry.ssrHashes = new Set(hashes);
+        newRegistry.injected = new Set(hashes);
+      }
+    }
+    return newRegistry;
+  });
+  if (parentRegistry && !forceNew) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(StyleContext.Provider, { value: registry, children });
+}
+function useStyleRegistry() {
+  const registry = useContext(StyleContext);
+  if (registry === null) {
+    throw new Error("Component must be used within a StyleProvider");
+  }
+  return registry;
+}
+function useComponentStyle(styles2) {
+  const rootStyle = useMemo(() => {
+    return !styles2 || Object.keys(styles2).length === 0 ? EMPTY_OBJECT : {
+      "&": styles2
+      // "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
+    };
+  }, [styles2]);
+  return useStyles(rootStyle);
+}
+const StyleInjectionTargetContext = createContext(null);
+function useDomRoot() {
+  const domRoot = useContext(StyleInjectionTargetContext);
+  return domRoot;
+}
+function useStyles(styles2, { prepend } = EMPTY_OBJECT) {
+  const { indexing } = useIndexerContext();
+  const domRoot = useDomRoot();
+  const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head;
+  const registry = useStyleRegistry();
+  const { className, styleHash } = useMemo(() => {
+    if (indexing || !styles2 || styles2 === EMPTY_OBJECT || Object.keys(styles2).length === 0) {
+      return { className: void 0, styleHash: void 0 };
+    }
+    return registry.register(styles2);
+  }, [indexing, registry, styles2]);
+  useInsertionEffect(() => {
+    if (!styleHash || registry.injected.has(styleHash)) {
+      return;
+    }
+    const { css } = registry.cache.get(styleHash) || {};
+    if (css) {
+      const styleElement = document.createElement("style");
+      styleElement.setAttribute("data-style-hash", styleHash);
+      styleElement.innerHTML = `@layer dynamic {
+${css}
+}`;
+      if (prepend) {
+        injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
+      } else {
+        injectionTarget.appendChild(styleElement);
+      }
+      registry.injected.add(styleHash);
+    }
+  }, [registry, styleHash, injectionTarget]);
+  useEffect(() => {
+    if (!styleHash) {
+      return;
+    }
+    registry.incrementRef(styleHash);
+    return () => {
+      registry.decrementRef(styleHash);
+      setTimeout(() => {
+        var _a2;
+        if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
+          registry.injected.delete(styleHash);
+          (_a2 = injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)) == null ? void 0 : _a2.remove();
+        }
+      }, 0);
+    };
+  }, [injectionTarget, registry, styleHash]);
+  return className;
+}
+const THEME_VAR_PREFIX = "xmlui";
+const themeVarCapturesRegex = /(\$[a-zA-Z][a-zA-Z0-9-_]*)/g;
+const booleanRegex = /^(true|false)$/;
+const starSizeRegex = /^\d*\*$/;
+const defaultCompResult = {
+  cssProps: {},
+  issues: /* @__PURE__ */ new Set()
+};
+function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
+  const result = {
+    cssProps: {},
+    issues: /* @__PURE__ */ new Set()
+  };
+  if (!!getOrientation(layoutContext)) {
+    result.cssProps.flexShrink = 0;
+  }
+  collectCss("width");
+  const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
+  if (horizontalStarSize !== null) {
+    result.cssProps.flex = horizontalStarSize;
+    result.cssProps.flexShrink = 1;
+  }
+  collectCss("minWidth");
+  collectCss("maxWidth");
+  collectCss("height");
+  const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
+  if (verticalStarSize !== null) {
+    result.cssProps.flex = verticalStarSize;
+    result.cssProps.flexShrink = 1;
+  }
+  collectCss("minHeight");
+  collectCss("maxHeight");
+  collectCss("top");
+  collectCss("right");
+  collectCss("bottom");
+  collectCss("left");
+  collectCss("gap");
+  collectCss("padding");
+  const paddingHorizontal = transformLayoutValue("paddingHorizontal");
+  if (paddingHorizontal) {
+    result.cssProps.paddingLeft = paddingHorizontal;
+    result.cssProps.paddingRight = paddingHorizontal;
+  }
+  collectCss("paddingRight");
+  collectCss("paddingLeft");
+  const paddingVertical = transformLayoutValue("paddingVertical");
+  if (paddingVertical) {
+    result.cssProps.paddingTop = paddingVertical;
+    result.cssProps.paddingBottom = paddingVertical;
+  }
+  collectCss("paddingTop");
+  collectCss("paddingBottom");
+  collectCss("margin");
+  const marginHorizontal = transformLayoutValue("marginHorizontal");
+  if (marginHorizontal) {
+    result.cssProps.marginLeft = marginHorizontal;
+    result.cssProps.marginRight = marginHorizontal;
+  }
+  collectCss("marginRight");
+  collectCss("marginLeft");
+  const marginVertical = transformLayoutValue("marginVertical");
+  if (marginVertical) {
+    result.cssProps.marginTop = marginVertical;
+    result.cssProps.marginBottom = marginVertical;
+  }
+  collectCss("marginTop");
+  collectCss("marginBottom");
+  collectCss("border");
+  const horizontalBorder = transformLayoutValue("borderHorizontal");
+  if (horizontalBorder) {
+    result.cssProps.borderLeft = horizontalBorder;
+    result.cssProps.borderRight = horizontalBorder;
+  }
+  collectCss("borderRight");
+  collectCss("borderLeft");
+  const verticalBorder = transformLayoutValue("borderVertical");
+  if (verticalBorder) {
+    result.cssProps.borderTop = verticalBorder;
+    result.cssProps.borderBottom = verticalBorder;
+  }
+  collectCss("borderTop");
+  collectCss("borderBottom");
+  collectCss("borderColor");
+  collectCss("borderStyle");
+  collectCss("borderWidth");
+  collectCss("borderRadius");
+  collectCss("radiusTopLeft", "borderTopLeftRadius");
+  collectCss("radiusTopRight", "borderTopRightRadius");
+  collectCss("radiusBottomLeft", "borderBottomLeftRadius");
+  collectCss("radiusBottomRight", "borderBottomRightRadius");
+  collectCss("color");
+  collectCss("fontFamily");
+  collectCss("fontSize");
+  collectCss("fontWeight");
+  collectCss("fontStyle");
+  collectCss("fontVariant");
+  collectCss("lineBreak");
+  collectCss("textDecoration");
+  collectCss("textDecorationLine");
+  collectCss("textDecorationColor");
+  collectCss("textDecorationStyle");
+  collectCss("textDecorationThickness");
+  collectCss("textIndent");
+  collectCss("textShadow");
+  collectCss("textUnderlineOffset");
+  collectCss("userSelect");
+  collectCss("letterSpacing");
+  collectCss("textTransform");
+  collectCss("lineHeight");
+  collectCss("textAlign");
+  collectCss("textAlignLast");
+  collectCss("textWrap");
+  collectCss("wordBreak");
+  collectCss("wordSpacing");
+  collectCss("wordWrap");
+  collectCss("writingMode");
+  collectCss("backgroundColor");
+  collectCss("background");
+  collectCss("boxShadow");
+  collectCss("direction");
+  collectCss("overflowX");
+  collectCss("overflowY");
+  collectCss("zIndex");
+  collectCss("opacity");
+  collectCss("zoom");
+  collectCss("cursor");
+  collectCss("whiteSpace");
+  collectCss("transform");
+  collectCss("outline");
+  collectCss("outlineWidth");
+  collectCss("outlineColor");
+  collectCss("outlineStyle");
+  collectCss("outlineOffset");
+  const wrapContent = transformLayoutValue("wrapContent");
+  if (wrapContent) {
+    result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
+  }
+  collectCss("canShrink", "flexShrink");
+  const canShrink = transformLayoutValue("canShrink");
+  if (canShrink) {
+    result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
+  }
+  if (isEmpty(result.cssProps) && isEmpty(result.issues)) {
+    return defaultCompResult;
+  }
+  return result;
+  function transformLayoutValue(prop) {
+    var _a2, _b;
+    const defValue = resolveSingleValue();
+    if (((_a2 = layoutContext == null ? void 0 : layoutContext.mediaSize) == null ? void 0 : _a2.sizeIndex) !== void 0) {
+      const sizeIndex = (_b = layoutContext.mediaSize) == null ? void 0 : _b.sizeIndex;
+      const xsValue = resolveSingleValue("xs");
+      const smValue = resolveSingleValue("sm");
+      const mdValue = resolveSingleValue("md");
+      const lgValue = resolveSingleValue("lg");
+      const xlValue = resolveSingleValue("xl");
+      const xxlValue = resolveSingleValue("xxl");
+      let mergedValue;
+      switch (sizeIndex) {
+        case 0:
+          mergedValue = xsValue ?? smValue ?? mdValue;
+          break;
+        case 1:
+          mergedValue = smValue ?? mdValue;
+          break;
+        case 2:
+          mergedValue = mdValue;
+          break;
+        case 3:
+          mergedValue = lgValue;
+          break;
+        case 4:
+          mergedValue = xlValue ?? lgValue;
+          break;
+        case 5:
+          mergedValue = xxlValue ?? xlValue ?? lgValue;
+          break;
+      }
+      return mergedValue ?? defValue;
+    }
+    return defValue;
+    function resolveSingleValue(sizeTag = "") {
+      const fullProp = sizeTag ? `${prop}-${sizeTag}` : prop;
+      let singleInput = layoutProps[fullProp];
+      if (singleInput == void 0) {
+        return;
+      }
+      if (typeof singleInput === "string") {
+        singleInput = singleInput.trim();
+      } else {
+        singleInput = singleInput.toString();
+      }
+      const value = singleInput ? singleInput.replace(
+        themeVarCapturesRegex,
+        (match) => toCssVar(match.trim())
+      ) : void 0;
+      if (singleInput !== value) {
+        return value;
+      }
+      const propPatterns = layoutPatterns[prop];
+      if (!propPatterns || propPatterns.length === 0) {
+        return value;
+      }
+      for (const pattern of propPatterns) {
+        if (pattern.test(value)) {
+          return value;
+        }
+      }
+      result.issues.add(fullProp);
+      return value;
+    }
+  }
+  function collectCss(prop, propCssName = "") {
+    const value = transformLayoutValue(prop);
+    if (value) {
+      result.cssProps[propCssName || prop] = value;
+    }
+  }
+  function getHorizontalStarSize(size, layoutContext2) {
+    if (!size) return null;
+    const orientation = getOrientation(layoutContext2);
+    return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
+  }
+  function getVerticalStarSize(size, layoutContext2) {
+    if (!size) return null;
+    const orientation = getOrientation(layoutContext2);
+    return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
+  }
+  function getStarSizeNumber(input2) {
+    if (starSizeRegex.test(input2)) {
+      const numberPart = input2.slice(0, -1);
+      return numberPart === "" ? 1 : parseInt(numberPart, 10);
+    }
+    return null;
+  }
+  function getOrientation(layoutContext2) {
+    if (!layoutContext2) return;
+    let orientation = (layoutContext2 == null ? void 0 : layoutContext2.type) === "Stack" && (layoutContext2 == null ? void 0 : layoutContext2.orientation);
+    return orientation == null ? void 0 : orientation.toString();
+  }
+}
+function toCssVar(c) {
+  return `var(--${THEME_VAR_PREFIX}-${c.substring(1)})`;
+}
+const layoutPatterns = {
+  // --- Dimensions
+  width: [],
+  minWidth: [],
+  maxWidth: [],
+  height: [],
+  minHeight: [],
+  maxHeight: [],
+  gap: [],
+  // --- Positions
+  top: [],
+  right: [],
+  bottom: [],
+  left: [],
+  // --- Border
+  border: [],
+  borderTop: [],
+  borderRight: [],
+  borderBottom: [],
+  borderLeft: [],
+  borderColor: [],
+  borderStyle: [],
+  borderWidth: [],
+  borderHorizontal: [],
+  borderVertical: [],
+  // --- Border radius
+  borderRadius: [],
+  radiusTopLeft: [],
+  radiusTopRight: [],
+  radiusBottomLeft: [],
+  radiusBottomRight: [],
+  // --- Padding
+  padding: [],
+  paddingHorizontal: [],
+  paddingVertical: [],
+  paddingTop: [],
+  paddingRight: [],
+  paddingBottom: [],
+  paddingLeft: [],
+  // --- Margin
+  margin: [],
+  marginHorizontal: [],
+  marginVertical: [],
+  marginTop: [],
+  marginRight: [],
+  marginBottom: [],
+  marginLeft: [],
+  // --- Other
+  backgroundColor: [],
+  background: [],
+  boxShadow: [],
+  direction: [],
+  overflowX: [],
+  overflowY: [],
+  zIndex: [],
+  opacity: [],
+  // --- Typography
+  color: [],
+  fontFamily: [],
+  fontSize: [],
+  fontWeight: [],
+  fontStyle: [booleanRegex],
+  fontVariant: [],
+  lineBreak: [],
+  textDecoration: [],
+  userSelect: [],
+  letterSpacing: [],
+  textTransform: [],
+  lineHeight: [],
+  textAlign: [],
+  textWrap: [],
+  textAlignLast: [],
+  textIndent: [],
+  textShadow: [],
+  wordBreak: [],
+  wordSpacing: [],
+  wordWrap: [],
+  writingMode: [],
+  // --- Content rendering
+  wrapContent: [],
+  canShrink: [],
+  // --- Other
+  cursor: [],
+  zoom: [],
+  whiteSpace: [],
+  textDecorationLine: [],
+  textDecorationColor: [],
+  textDecorationStyle: [],
+  textDecorationThickness: [],
+  textUnderlineOffset: [],
+  transform: [],
+  // --- Outline
+  outline: [],
+  outlineWidth: [],
+  outlineColor: [],
+  outlineStyle: [],
+  outlineOffset: [],
+  // --- Animation
+  transition: []
+};
+const customVariantCache = /* @__PURE__ */ new Map();
+function setCustomVariantCache(variant, entry) {
+  customVariantCache.set(variant, {
+    ...entry,
+    createdAt: Date.now()
+  });
+}
+function hasCustomVariantCache(variant) {
+  return customVariantCache.has(variant);
+}
 const defaultProps$11 = {
   maxLines: 0,
   preserveLinebreaks: false,
@@ -10838,6 +11392,56 @@ const Text = forwardRef(function Text2({
     if (!variant || !TextVariantElement[variant]) return "div";
     return TextVariantElement[variant];
   }, [variant]);
+  const isCustomVariant = useMemo(() => {
+    return variant && !TextVariantElement[variant];
+  }, [variant]);
+  const variantSpec = useMemo(
+    () => {
+      if (!isCustomVariant) return EMPTY_OBJECT;
+      const subject = `-Text-${variant}`;
+      const cssInput = {
+        color: toCssVar(`$textColor${subject}`),
+        "font-family": toCssVar(`$fontFamily${subject}`),
+        "font-size": toCssVar(`$fontSize${subject}`),
+        "font-style": toCssVar(`$fontStyle${subject}`),
+        "font-weight": toCssVar(`$fontWeight${subject}`),
+        "font-stretch": toCssVar(`$fontStretch${subject}`),
+        "text-decoration-line": toCssVar(`$textDecorationLine${subject}`),
+        "text-decoration-color": toCssVar(`$textDecorationColor${subject}`),
+        "text-decoration-style": toCssVar(`$textDecorationStyle${subject}`),
+        "text-decoration-thickness": toCssVar(`$textDecorationThickness${subject}`),
+        "text-underline-offset": toCssVar(`$textUnderlineOffset${subject}`),
+        "line-height": toCssVar(`$lineHeight${subject}`),
+        "background-color": toCssVar(`$backgroundColor${subject}`),
+        "text-transform": toCssVar(`$textTransform${subject}`),
+        "letter-spacing": toCssVar(`$letterSpacing${subject}`),
+        "word-spacing": toCssVar(`$wordSpacing${subject}`),
+        "text-shadow": toCssVar(`$textShadow${subject}`),
+        "text-indent": toCssVar(`$textIndent${subject}`),
+        "text-align": toCssVar(`$textAlign${subject}`),
+        "text-align-last": toCssVar(`$textAlignLast${subject}`),
+        "word-break": toCssVar(`$wordBreak${subject}`),
+        "word-wrap": toCssVar(`$wordWrap${subject}`),
+        direction: toCssVar(`$direction${subject}`),
+        "writing-mode": toCssVar(`$writingMode${subject}`),
+        "line-break": toCssVar(`$lineBreak${subject}`)
+      };
+      return cssInput;
+    },
+    [isCustomVariant, variant]
+  );
+  const customVariantClassName = useComponentStyle(variantSpec);
+  useEffect(() => {
+    if (isCustomVariant && variant && customVariantClassName) {
+      if (!hasCustomVariantCache(variant)) {
+        setCustomVariantCache(variant, {
+          className: customVariantClassName,
+          cssText: ""
+          // Will be populated when CSS generation is implemented
+        });
+      }
+    }
+  }, [isCustomVariant, variant, customVariantClassName]);
   const overflowClasses = useMemo(() => {
     const classes = {};
     if (!overflowMode) {
@@ -10893,7 +11497,8 @@ const Text = forwardRef(function Text2({
       className: classnames(
         syntaxHighlightClasses,
         styles$13.text,
-        styles$13[variant || "default"],
+        // Use custom variant className if it's a custom variant, otherwise use predefined variant style
+        isCustomVariant ? customVariantClassName : styles$13[variant || "default"],
         {
           [styles$13.preserveLinebreaks]: preserveLinebreaks2,
           ...overflowClasses,
@@ -10920,7 +11525,7 @@ const TextMd = createMetadata({
       `The text to be displayed. This value can also be set via nesting the text into the \`${COMP$1n}\` component.`
     ),
     variant: {
-      description: "An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context.",
+      description: "An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context. In addition to predefined variants, you can specify custom variant names and style them using theme variables with the pattern `{cssProperty}-Text-{variantName}` (e.g., `textColor-Text-brandTitle`, `fontSize-Text-highlight`). See the documentation for a complete list of supported CSS properties.",
       availableValues: variantOptionsMd
     },
     maxLines: d(
@@ -11113,7 +11718,7 @@ const headerRow = "_headerRow_1ylgd_97";
 const columnCell = "_columnCell_1ylgd_101";
 const cell = "_cell_1ylgd_102";
 const alignTop = "_alignTop_1ylgd_110";
-const alignCenter = "_alignCenter_1ylgd_114";
+const alignCenter$1 = "_alignCenter_1ylgd_114";
 const alignBottom = "_alignBottom_1ylgd_118";
 const table = "_table_1ylgd_46";
 const row$1 = "_row_1ylgd_126";
@@ -11142,7 +11747,7 @@ const styles$12 = {
   columnCell,
   cell,
   alignTop,
-  alignCenter,
+  alignCenter: alignCenter$1,
   alignBottom,
   table,
   row: row$1,
@@ -11223,458 +11828,114 @@ const SelectionStore = ({
     return {
       selectedItems,
       setSelectedRowIds,
-      refreshSelection,
-      idKey
-    };
-  }, [refreshSelection, selectedItems, setSelectedRowIds, idKey]);
-  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: contextValue2, children });
-};
-const SelectionContext = React__default.createContext(null);
-function useSelectionContext() {
-  return useContext(SelectionContext);
-}
-const parsedHVarCache = {};
-function parseHVar(input2) {
-  if (parsedHVarCache[input2] !== void 0) {
-    return parsedHVarCache[input2];
-  }
-  const parts = input2.split(/-[A-Z]+/);
-  if (parts.length !== 2) {
-    parsedHVarCache[input2] = null;
-    return parsedHVarCache[input2];
-  }
-  const firstPart = parts[0];
-  const classessParts = firstPart.split(":");
-  const attribute = classessParts[classessParts.length - 1];
-  const classes = classessParts.length > 1 ? classessParts.slice(0, classessParts.length - 1) : [];
-  const secondPart = input2.substring(firstPart.length + 1);
-  const [compName, ...rest] = secondPart.split("-");
-  const traitsAndStates = secondPart.substring(compName.length).split("--");
-  const states = [];
-  const traits = [];
-  traitsAndStates.forEach((part) => {
-    if (!part.includes("-") && part) {
-      states.push(part);
-    } else {
-      part.split("-").forEach((trait) => {
-        if (trait) {
-          traits.push(trait);
-        }
-      });
-    }
-  });
-  parsedHVarCache[input2] = {
-    classes,
-    attribute,
-    component: compName,
-    traits,
-    states
-  };
-  return parsedHVarCache[input2];
-}
-function createCombinations(arr = []) {
-  const stateCombinations = [];
-  for (let i = 1; i <= arr.length; i++) {
-    for (let j = 0; j <= arr.length - i; j++) {
-      stateCombinations.push(arr.slice(j, j + i));
-    }
-  }
-  return stateCombinations.sort((a, b) => b.length - a.length);
-}
-function matchThemeVar(themeVar, availableThemeVars = []) {
-  const hvar = parseHVar(themeVar);
-  if (!hvar) {
-    return;
-  }
-  const stateCombinations = createCombinations(hvar.states);
-  const traitCombinations = createCombinations(hvar.traits);
-  const sortedTraitCombinations = [];
-  traitCombinations.forEach((traitComb) => {
-    let result = "";
-    traitComb.forEach((t) => {
-      result = `${result}-${t}`;
-    });
-    sortedTraitCombinations.push(result);
-  });
-  sortedTraitCombinations.push("");
-  const sortedStateCombinations = [];
-  stateCombinations.forEach((stateComb) => {
-    let result = "";
-    stateComb.forEach((s) => {
-      result = `${result}--${s}`;
-    });
-    sortedStateCombinations.push(result);
-  });
-  sortedStateCombinations.push("");
-  const componentParts = [hvar.component, ...hvar.classes];
-  const from = [];
-  sortedStateCombinations.forEach((stateComb) => {
-    sortedTraitCombinations.forEach((traitComb) => {
-      componentParts.forEach((componentPart) => {
-        from.push(`${hvar.attribute}-${componentPart}${traitComb}${stateComb}`);
-      });
-    });
-  });
-  let matchedValue;
-  for (let i = availableThemeVars.length - 1; i >= 0; i--) {
-    const themeVars2 = availableThemeVars[i];
-    let foundValue = from.find((themeVar2) => themeVars2[themeVar2] !== void 0);
-    if (foundValue) {
-      matchedValue = foundValue;
-      break;
-    }
-  }
-  const forValue = from[0];
-  return {
-    forValue,
-    matchedValue,
-    from
-  };
-}
-const THEME_VAR_PREFIX = "xmlui";
-const themeVarCapturesRegex = /(\$[a-zA-Z][a-zA-Z0-9-_]*)/g;
-const booleanRegex = /^(true|false)$/;
-const starSizeRegex = /^\d*\*$/;
-const defaultCompResult = {
-  cssProps: {},
-  issues: /* @__PURE__ */ new Set()
-};
-function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
-  const result = {
-    cssProps: {},
-    issues: /* @__PURE__ */ new Set()
-  };
-  if (!!getOrientation(layoutContext)) {
-    result.cssProps.flexShrink = 0;
-  }
-  collectCss("width");
-  const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
-  if (horizontalStarSize !== null) {
-    result.cssProps.flex = horizontalStarSize;
-    result.cssProps.flexShrink = 1;
-  }
-  collectCss("minWidth");
-  collectCss("maxWidth");
-  collectCss("height");
-  const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
-  if (verticalStarSize !== null) {
-    result.cssProps.flex = verticalStarSize;
-    result.cssProps.flexShrink = 1;
-  }
-  collectCss("minHeight");
-  collectCss("maxHeight");
-  collectCss("top");
-  collectCss("right");
-  collectCss("bottom");
-  collectCss("left");
-  collectCss("gap");
-  collectCss("padding");
-  const paddingHorizontal = transformLayoutValue("paddingHorizontal");
-  if (paddingHorizontal) {
-    result.cssProps.paddingLeft = paddingHorizontal;
-    result.cssProps.paddingRight = paddingHorizontal;
-  }
-  collectCss("paddingRight");
-  collectCss("paddingLeft");
-  const paddingVertical = transformLayoutValue("paddingVertical");
-  if (paddingVertical) {
-    result.cssProps.paddingTop = paddingVertical;
-    result.cssProps.paddingBottom = paddingVertical;
-  }
-  collectCss("paddingTop");
-  collectCss("paddingBottom");
-  collectCss("margin");
-  const marginHorizontal = transformLayoutValue("marginHorizontal");
-  if (marginHorizontal) {
-    result.cssProps.marginLeft = marginHorizontal;
-    result.cssProps.marginRight = marginHorizontal;
-  }
-  collectCss("marginRight");
-  collectCss("marginLeft");
-  const marginVertical = transformLayoutValue("marginVertical");
-  if (marginVertical) {
-    result.cssProps.marginTop = marginVertical;
-    result.cssProps.marginBottom = marginVertical;
-  }
-  collectCss("marginTop");
-  collectCss("marginBottom");
-  collectCss("border");
-  const horizontalBorder = transformLayoutValue("borderHorizontal");
-  if (horizontalBorder) {
-    result.cssProps.borderLeft = horizontalBorder;
-    result.cssProps.borderRight = horizontalBorder;
-  }
-  collectCss("borderRight");
-  collectCss("borderLeft");
-  const verticalBorder = transformLayoutValue("borderVertical");
-  if (verticalBorder) {
-    result.cssProps.borderTop = verticalBorder;
-    result.cssProps.borderBottom = verticalBorder;
-  }
-  collectCss("borderTop");
-  collectCss("borderBottom");
-  collectCss("borderColor");
-  collectCss("borderStyle");
-  collectCss("borderWidth");
-  collectCss("borderRadius");
-  collectCss("radiusTopLeft", "borderTopLeftRadius");
-  collectCss("radiusTopRight", "borderTopRightRadius");
-  collectCss("radiusBottomLeft", "borderBottomLeftRadius");
-  collectCss("radiusBottomRight", "borderBottomRightRadius");
-  collectCss("color");
-  collectCss("fontFamily");
-  collectCss("fontSize");
-  collectCss("fontWeight");
-  collectCss("fontStyle");
-  collectCss("fontVariant");
-  collectCss("lineBreak");
-  collectCss("textDecoration");
-  collectCss("textDecorationLine");
-  collectCss("textDecorationColor");
-  collectCss("textDecorationStyle");
-  collectCss("textDecorationThickness");
-  collectCss("textIndent");
-  collectCss("textShadow");
-  collectCss("textUnderlineOffset");
-  collectCss("userSelect");
-  collectCss("letterSpacing");
-  collectCss("textTransform");
-  collectCss("lineHeight");
-  collectCss("textAlign");
-  collectCss("textAlignLast");
-  collectCss("textWrap");
-  collectCss("wordBreak");
-  collectCss("wordSpacing");
-  collectCss("wordWrap");
-  collectCss("writingMode");
-  collectCss("backgroundColor");
-  collectCss("background");
-  collectCss("boxShadow");
-  collectCss("direction");
-  collectCss("overflowX");
-  collectCss("overflowY");
-  collectCss("zIndex");
-  collectCss("opacity");
-  collectCss("zoom");
-  collectCss("cursor");
-  collectCss("whiteSpace");
-  collectCss("transform");
-  collectCss("outline");
-  collectCss("outlineWidth");
-  collectCss("outlineColor");
-  collectCss("outlineStyle");
-  collectCss("outlineOffset");
-  const wrapContent = transformLayoutValue("wrapContent");
-  if (wrapContent) {
-    result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
-  }
-  collectCss("canShrink", "flexShrink");
-  const canShrink = transformLayoutValue("canShrink");
-  if (canShrink) {
-    result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
+      refreshSelection,
+      idKey
+    };
+  }, [refreshSelection, selectedItems, setSelectedRowIds, idKey]);
+  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value: contextValue2, children });
+};
+const SelectionContext = React__default.createContext(null);
+function useSelectionContext() {
+  return useContext(SelectionContext);
+}
+const parsedHVarCache = {};
+function parseHVar(input2) {
+  if (parsedHVarCache[input2] !== void 0) {
+    return parsedHVarCache[input2];
   }
-  if (isEmpty(result.cssProps) && isEmpty(result.issues)) {
-    return defaultCompResult;
+  const parts = input2.split(/-[A-Z]+/);
+  if (parts.length !== 2) {
+    parsedHVarCache[input2] = null;
+    return parsedHVarCache[input2];
   }
-  return result;
-  function transformLayoutValue(prop) {
-    var _a2, _b;
-    const defValue = resolveSingleValue();
-    if (((_a2 = layoutContext == null ? void 0 : layoutContext.mediaSize) == null ? void 0 : _a2.sizeIndex) !== void 0) {
-      const sizeIndex = (_b = layoutContext.mediaSize) == null ? void 0 : _b.sizeIndex;
-      const xsValue = resolveSingleValue("xs");
-      const smValue = resolveSingleValue("sm");
-      const mdValue = resolveSingleValue("md");
-      const lgValue = resolveSingleValue("lg");
-      const xlValue = resolveSingleValue("xl");
-      const xxlValue = resolveSingleValue("xxl");
-      let mergedValue;
-      switch (sizeIndex) {
-        case 0:
-          mergedValue = xsValue ?? smValue ?? mdValue;
-          break;
-        case 1:
-          mergedValue = smValue ?? mdValue;
-          break;
-        case 2:
-          mergedValue = mdValue;
-          break;
-        case 3:
-          mergedValue = lgValue;
-          break;
-        case 4:
-          mergedValue = xlValue ?? lgValue;
-          break;
-        case 5:
-          mergedValue = xxlValue ?? xlValue ?? lgValue;
-          break;
-      }
-      return mergedValue ?? defValue;
-    }
-    return defValue;
-    function resolveSingleValue(sizeTag = "") {
-      const fullProp = sizeTag ? `${prop}-${sizeTag}` : prop;
-      let singleInput = layoutProps[fullProp];
-      if (singleInput == void 0) {
-        return;
-      }
-      if (typeof singleInput === "string") {
-        singleInput = singleInput.trim();
-      } else {
-        singleInput = singleInput.toString();
-      }
-      const value = singleInput ? singleInput.replace(
-        themeVarCapturesRegex,
-        (match) => toCssVar(match.trim())
-      ) : void 0;
-      if (singleInput !== value) {
-        return value;
-      }
-      const propPatterns = layoutPatterns[prop];
-      if (!propPatterns || propPatterns.length === 0) {
-        return value;
-      }
-      for (const pattern of propPatterns) {
-        if (pattern.test(value)) {
-          return value;
+  const firstPart = parts[0];
+  const classessParts = firstPart.split(":");
+  const attribute = classessParts[classessParts.length - 1];
+  const classes = classessParts.length > 1 ? classessParts.slice(0, classessParts.length - 1) : [];
+  const secondPart = input2.substring(firstPart.length + 1);
+  const [compName, ...rest] = secondPart.split("-");
+  const traitsAndStates = secondPart.substring(compName.length).split("--");
+  const states = [];
+  const traits = [];
+  traitsAndStates.forEach((part) => {
+    if (!part.includes("-") && part) {
+      states.push(part);
+    } else {
+      part.split("-").forEach((trait) => {
+        if (trait) {
+          traits.push(trait);
         }
-      }
-      result.issues.add(fullProp);
-      return value;
+      });
     }
-  }
-  function collectCss(prop, propCssName = "") {
-    const value = transformLayoutValue(prop);
-    if (value) {
-      result.cssProps[propCssName || prop] = value;
+  });
+  parsedHVarCache[input2] = {
+    classes,
+    attribute,
+    component: compName,
+    traits,
+    states
+  };
+  return parsedHVarCache[input2];
+}
+function createCombinations(arr = []) {
+  const stateCombinations = [];
+  for (let i = 1; i <= arr.length; i++) {
+    for (let j = 0; j <= arr.length - i; j++) {
+      stateCombinations.push(arr.slice(j, j + i));
     }
   }
-  function getHorizontalStarSize(size, layoutContext2) {
-    if (!size) return null;
-    const orientation = getOrientation(layoutContext2);
-    return orientation === "horizontal" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
-  }
-  function getVerticalStarSize(size, layoutContext2) {
-    if (!size) return null;
-    const orientation = getOrientation(layoutContext2);
-    return orientation === "vertical" && starSizeRegex.test(size.toString()) ? getStarSizeNumber(size.toString()) : null;
+  return stateCombinations.sort((a, b) => b.length - a.length);
+}
+function matchThemeVar(themeVar, availableThemeVars = []) {
+  const hvar = parseHVar(themeVar);
+  if (!hvar) {
+    return;
   }
-  function getStarSizeNumber(input2) {
-    if (starSizeRegex.test(input2)) {
-      const numberPart = input2.slice(0, -1);
-      return numberPart === "" ? 1 : parseInt(numberPart, 10);
+  const stateCombinations = createCombinations(hvar.states);
+  const traitCombinations = createCombinations(hvar.traits);
+  const sortedTraitCombinations = [];
+  traitCombinations.forEach((traitComb) => {
+    let result = "";
+    traitComb.forEach((t) => {
+      result = `${result}-${t}`;
+    });
+    sortedTraitCombinations.push(result);
+  });
+  sortedTraitCombinations.push("");
+  const sortedStateCombinations = [];
+  stateCombinations.forEach((stateComb) => {
+    let result = "";
+    stateComb.forEach((s) => {
+      result = `${result}--${s}`;
+    });
+    sortedStateCombinations.push(result);
+  });
+  sortedStateCombinations.push("");
+  const componentParts = [hvar.component, ...hvar.classes];
+  const from = [];
+  sortedStateCombinations.forEach((stateComb) => {
+    sortedTraitCombinations.forEach((traitComb) => {
+      componentParts.forEach((componentPart) => {
+        from.push(`${hvar.attribute}-${componentPart}${traitComb}${stateComb}`);
+      });
+    });
+  });
+  let matchedValue;
+  for (let i = availableThemeVars.length - 1; i >= 0; i--) {
+    const themeVars2 = availableThemeVars[i];
+    let foundValue = from.find((themeVar2) => themeVars2[themeVar2] !== void 0);
+    if (foundValue) {
+      matchedValue = foundValue;
+      break;
     }
-    return null;
-  }
-  function getOrientation(layoutContext2) {
-    if (!layoutContext2) return;
-    let orientation = (layoutContext2 == null ? void 0 : layoutContext2.type) === "Stack" && (layoutContext2 == null ? void 0 : layoutContext2.orientation);
-    return orientation == null ? void 0 : orientation.toString();
   }
+  const forValue = from[0];
+  return {
+    forValue,
+    matchedValue,
+    from
+  };
 }
-function toCssVar(c) {
-  return `var(--${THEME_VAR_PREFIX}-${c.substring(1)})`;
-}
-const layoutPatterns = {
-  // --- Dimensions
-  width: [],
-  minWidth: [],
-  maxWidth: [],
-  height: [],
-  minHeight: [],
-  maxHeight: [],
-  gap: [],
-  // --- Positions
-  top: [],
-  right: [],
-  bottom: [],
-  left: [],
-  // --- Border
-  border: [],
-  borderTop: [],
-  borderRight: [],
-  borderBottom: [],
-  borderLeft: [],
-  borderColor: [],
-  borderStyle: [],
-  borderWidth: [],
-  borderHorizontal: [],
-  borderVertical: [],
-  // --- Border radius
-  borderRadius: [],
-  radiusTopLeft: [],
-  radiusTopRight: [],
-  radiusBottomLeft: [],
-  radiusBottomRight: [],
-  // --- Padding
-  padding: [],
-  paddingHorizontal: [],
-  paddingVertical: [],
-  paddingTop: [],
-  paddingRight: [],
-  paddingBottom: [],
-  paddingLeft: [],
-  // --- Margin
-  margin: [],
-  marginHorizontal: [],
-  marginVertical: [],
-  marginTop: [],
-  marginRight: [],
-  marginBottom: [],
-  marginLeft: [],
-  // --- Other
-  backgroundColor: [],
-  background: [],
-  boxShadow: [],
-  direction: [],
-  overflowX: [],
-  overflowY: [],
-  zIndex: [],
-  opacity: [],
-  // --- Typography
-  color: [],
-  fontFamily: [],
-  fontSize: [],
-  fontWeight: [],
-  fontStyle: [booleanRegex],
-  fontVariant: [],
-  lineBreak: [],
-  textDecoration: [],
-  userSelect: [],
-  letterSpacing: [],
-  textTransform: [],
-  lineHeight: [],
-  textAlign: [],
-  textWrap: [],
-  textAlignLast: [],
-  textIndent: [],
-  textShadow: [],
-  wordBreak: [],
-  wordSpacing: [],
-  wordWrap: [],
-  writingMode: [],
-  // --- Content rendering
-  wrapContent: [],
-  canShrink: [],
-  // --- Other
-  cursor: [],
-  zoom: [],
-  whiteSpace: [],
-  textDecorationLine: [],
-  textDecorationColor: [],
-  textDecorationStyle: [],
-  textDecorationThickness: [],
-  textUnderlineOffset: [],
-  transform: [],
-  // --- Outline
-  outline: [],
-  outlineWidth: [],
-  outlineColor: [],
-  outlineStyle: [],
-  outlineOffset: [],
-  // --- Animation
-  transition: []
-};
 function isThemeVarName(varName) {
   return typeof varName === "string" && (varName == null ? void 0 : varName.startsWith("$"));
 }
@@ -15781,7 +16042,6 @@ const IFrame = memo(forwardRef(function IFrame2({
   ...rest
 }, ref) {
   const iframeRef = useRef(null);
-  useImperativeHandle(ref, () => iframeRef.current, []);
   useEffect(() => {
     registerComponentApi == null ? void 0 : registerComponentApi({
       postMessage: (message, targetOrigin = "*") => {
@@ -22107,7 +22367,6 @@ const Form = forwardRef(function({
   ...rest
 }, ref) {
   const formRef = useRef(null);
-  useImperativeHandle(ref, () => formRef.current);
   const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = useState(false);
   const requestModalFormClose = useModalFormClose();
   const isEnabled2 = enabled2 && !formState.submitInProgress;
@@ -24227,7 +24486,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-qnCFw6Zc.mjs");
+      const { initMock } = await import("./initMock-BVLjWJxZ.mjs");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -24244,7 +24503,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-QiltRtq1.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-qnCFw6Zc.mjs")
+              import("./initMock-BVLjWJxZ.mjs")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -24281,7 +24540,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-QiltRtq1.mjs"),
-            import("./initMock-qnCFw6Zc.mjs")
+            import("./initMock-BVLjWJxZ.mjs")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -24383,12 +24642,6 @@ const ComponentRegistryContext = React__default.createContext(null);
 function useComponentRegistry() {
   return useContext(ComponentRegistryContext);
 }
-const IndexerContext = React__default.createContext({
-  indexing: false
-});
-function useIndexerContext() {
-  return useContext(IndexerContext);
-}
 const themeVars$e = `'{"padding-NestedApp": "var(--xmlui-padding-NestedApp)", "paddingHorizontal-NestedApp": "var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp))", "paddingVertical-NestedApp": "var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp))", "paddingLeft-NestedApp": "var(--xmlui-paddingLeft-NestedApp, var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingRight-NestedApp": "var(--xmlui-paddingRight-NestedApp, var(--xmlui-paddingHorizontal-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingTop-NestedApp": "var(--xmlui-paddingTop-NestedApp, var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp)))", "paddingBottom-NestedApp": "var(--xmlui-paddingBottom-NestedApp, var(--xmlui-paddingVertical-NestedApp, var(--xmlui-padding-NestedApp)))", "border-NestedApp": "var(--xmlui-border-NestedApp)", "borderHorizontal-NestedApp": "var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp))", "borderVertical-NestedApp": "var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp))", "borderLeft-NestedApp": "var(--xmlui-borderLeft-NestedApp, var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp)))", "borderRight-NestedApp": "var(--xmlui-borderRight-NestedApp, var(--xmlui-borderHorizontal-NestedApp, var(--xmlui-border-NestedApp)))", "borderTop-NestedApp": "var(--xmlui-borderTop-NestedApp, var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp)))", "borderBottom-NestedApp": "var(--xmlui-borderBottom-NestedApp, var(--xmlui-borderVertical-NestedApp, var(--xmlui-border-NestedApp)))", "borderWidth-NestedApp": "var(--xmlui-borderWidth-NestedApp)", "borderHorizontalWidth-NestedApp": "var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp))", "borderLeftWidth-NestedApp": "var(--xmlui-borderLeftWidth-NestedApp, var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderRightWidth-NestedApp": "var(--xmlui-borderRightWidth-NestedApp, var(--xmlui-borderHorizontalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderVerticalWidth-NestedApp": "var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp))", "borderTopWidth-NestedApp": "var(--xmlui-borderTopWidth-NestedApp, var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderBottomWidth-NestedApp": "var(--xmlui-borderBottomWidth-NestedApp, var(--xmlui-borderVerticalWidth-NestedApp, var(--xmlui-borderWidth-NestedApp)))", "borderStyle-NestedApp": "var(--xmlui-borderStyle-NestedApp)", "borderHorizontalStyle-NestedApp": "var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp))", "borderLeftStyle-NestedApp": "var(--xmlui-borderLeftStyle-NestedApp, var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderRightStyle-NestedApp": "var(--xmlui-borderRightStyle-NestedApp, var(--xmlui-borderHorizontalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderVerticalStyle-NestedApp": "var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp))", "borderTopStyle-NestedApp": "var(--xmlui-borderTopStyle-NestedApp, var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderBottomStyle-NestedApp": "var(--xmlui-borderBottomStyle-NestedApp, var(--xmlui-borderVerticalStyle-NestedApp, var(--xmlui-borderStyle-NestedApp)))", "borderColor-NestedApp": "var(--xmlui-borderColor-NestedApp)", "borderHorizontalColor-NestedApp": "var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp))", "borderLeftColor-NestedApp": "var(--xmlui-borderLeftColor-NestedApp, var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderRightColor-NestedApp": "var(--xmlui-borderRightColor-NestedApp, var(--xmlui-borderHorizontalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderVerticalColor-NestedApp": "var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp))", "borderTopColor-NestedApp": "var(--xmlui-borderTopColor-NestedApp, var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderBottomColor-NestedApp": "var(--xmlui-borderBottomColor-NestedApp, var(--xmlui-borderVerticalColor-NestedApp, var(--xmlui-borderColor-NestedApp)))", "borderStartStartRadius-NestedApp": "var(--xmlui-borderStartStartRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderStartEndRadius-NestedApp": "var(--xmlui-borderStartEndRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderEndStartRadius-NestedApp": "var(--xmlui-borderEndStartRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "borderEndEndRadius-NestedApp": "var(--xmlui-borderEndEndRadius-NestedApp, var(--xmlui-borderRadius-NestedApp))", "textColor-header-NestedApp": "var(--xmlui-textColor-header-NestedApp)", "fontFamily-header-NestedApp": "var(--xmlui-fontFamily-header-NestedApp)", "fontSize-header-NestedApp": "var(--xmlui-fontSize-header-NestedApp)", "fontStyle-header-NestedApp": "var(--xmlui-fontStyle-header-NestedApp)", "fontVariant-header-NestedApp": "var(--xmlui-fontVariant-header-NestedApp)", "fontWeight-header-NestedApp": "var(--xmlui-fontWeight-header-NestedApp)", "fontStretch-header-NestedApp": "var(--xmlui-fontStretch-header-NestedApp)", "textDecorationLine-header-NestedApp": "var(--xmlui-textDecorationLine-header-NestedApp)", "textDecorationColor-header-NestedApp": "var(--xmlui-textDecorationColor-header-NestedApp)", "textDecorationStyle-header-NestedApp": "var(--xmlui-textDecorationStyle-header-NestedApp)", "textDecorationThickness-header-NestedApp": "var(--xmlui-textDecorationThickness-header-NestedApp)", "textUnderlineOffset-header-NestedApp": "var(--xmlui-textUnderlineOffset-header-NestedApp)", "lineHeight-header-NestedApp": "var(--xmlui-lineHeight-header-NestedApp)", "backgroundColor-header-NestedApp": "var(--xmlui-backgroundColor-header-NestedApp)", "textTransform-header-NestedApp": "var(--xmlui-textTransform-header-NestedApp)", "letterSpacing-header-NestedApp": "var(--xmlui-letterSpacing-header-NestedApp)", "wordSpacing-header-NestedApp": "var(--xmlui-wordSpacing-header-NestedApp)", "textShadow-header-NestedApp": "var(--xmlui-textShadow-header-NestedApp)", "textIndent-header-NestedApp": "var(--xmlui-textIndent-header-NestedApp)", "textAlign-header-NestedApp": "var(--xmlui-textAlign-header-NestedApp)", "textAlignLast-header-NestedApp": "var(--xmlui-textAlignLast-header-NestedApp)", "wordBreak-header-NestedApp": "var(--xmlui-wordBreak-header-NestedApp)", "wordWrap-header-NestedApp": "var(--xmlui-wordWrap-header-NestedApp)", "direction-header-NestedApp": "var(--xmlui-direction-header-NestedApp)", "writingMode-header-NestedApp": "var(--xmlui-writingMode-header-NestedApp)", "lineBreak-header-NestedApp": "var(--xmlui-lineBreak-header-NestedApp)", "backgroundColor-frame-NestedApp": "var(--xmlui-backgroundColor-frame-NestedApp)", "gap-frame-NestedApp": "var(--xmlui-gap-frame-NestedApp)", "marginTop-NestedApp": "var(--xmlui-marginTop-NestedApp)", "marginBottom-NestedApp": "var(--xmlui-marginBottom-NestedApp)", "boxShadow-NestedApp": "var(--xmlui-boxShadow-NestedApp)", "backgroundColor-viewControls-NestedApp": "var(--xmlui-backgroundColor-viewControls-NestedApp)", "borderRadius-viewControls-NestedApp": "var(--xmlui-borderRadius-viewControls-NestedApp)", "padding-viewControls-NestedApp": "var(--xmlui-padding-viewControls-NestedApp)", "paddingVertical-viewControls-button-NestedApp": "var(--xmlui-paddingVertical-viewControls-button-NestedApp)", "paddingHorizontal-viewControls-button-NestedApp": "var(--xmlui-paddingHorizontal-viewControls-button-NestedApp)", "borderRadius-NestedApp": "var(--xmlui-borderRadius-NestedApp)", "borderBottom-header-NestedApp": "var(--xmlui-borderBottom-header-NestedApp)", "height-logo-splitView-NestedApp": "var(--xmlui-height-logo-splitView-NestedApp)", "width-logo-splitView-NestedApp": "var(--xmlui-width-logo-splitView-NestedApp)", "width-controls-NestedApp": "var(--xmlui-width-controls-NestedApp)", "padding-button-splitView-NestedApp": "var(--xmlui-padding-button-splitView-NestedApp)", "width-button-splitView-NestedApp": "var(--xmlui-width-button-splitView-NestedApp)", "height-button-splitView-NestedApp": "var(--xmlui-height-button-splitView-NestedApp)", "backgroundColor-code-splitView-NestedApp": "var(--xmlui-backgroundColor-code-splitView-NestedApp)", "backgroundColor-button-splitView-NestedApp--active": "var(--xmlui-backgroundColor-button-splitView-NestedApp--active)", "color-button-splitView-NestedApp": "var(--xmlui-color-button-splitView-NestedApp)", "color-button-splitView-NestedApp--active": "var(--xmlui-color-button-splitView-NestedApp--active)", "borderRadius-button-splitView-NestedApp": "var(--xmlui-borderRadius-button-splitView-NestedApp)", "borderColor-button-splitView-NestedApp": "var(--xmlui-borderColor-button-splitView-NestedApp)", "color-loadingText-NestedApp": "var(--xmlui-color-loadingText-NestedApp)"}'`;
 const nestedAppPlaceholder = "_nestedAppPlaceholder_2bz33_14";
 const loadingContainer = "_loadingContainer_2bz33_21";
@@ -24439,216 +24692,6 @@ const styles$w = {
   shadowRoot,
   content: content$2
 };
-function hashString(str) {
-  let hash = 5381;
-  let i = str.length;
-  while (i) {
-    hash = hash * 33 ^ str.charCodeAt(--i);
-  }
-  let s = (hash >>> 0).toString(36);
-  return s;
-}
-function toKebabCase(str) {
-  if (str.startsWith("--")) {
-    return str;
-  }
-  return str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
-}
-function stableJSONStringify(obj) {
-  return JSON.stringify(obj);
-}
-class StyleRegistry {
-  constructor() {
-    this.cache = /* @__PURE__ */ new Map();
-    this.rootClasses = /* @__PURE__ */ new Set();
-    this.injected = /* @__PURE__ */ new Set();
-    this.refCounts = /* @__PURE__ */ new Map();
-    this.ssrHashes = /* @__PURE__ */ new Set();
-  }
-  register(styles2) {
-    const key = stableJSONStringify(styles2);
-    const styleHash = hashString(key);
-    const cachedEntry = this.cache.get(styleHash);
-    if (cachedEntry) {
-      return cachedEntry;
-    }
-    const className = `css-${styleHash}`;
-    const css = this._generateCss(`.${className}`, styles2);
-    const entry = { className, styleHash, css };
-    this.cache.set(styleHash, entry);
-    return entry;
-  }
-  /**
-   * [PRIVATE] Recursively generates CSS rules from a style object.
-   * This is the new, more powerful engine.
-   * @param selector - The CSS selector for the current context (e.g., '.css-123' or '&:hover').
-   * @param styles - The style object to process.
-   * @returns A string of CSS rules.
-   */
-  _generateCss(selector, styles2) {
-    const directProps = [];
-    const nestedRules = [];
-    for (const key in styles2) {
-      const value = styles2[key];
-      if (typeof value === "object" && value !== null) {
-        nestedRules.push(this._processNestedRule(selector, key, value));
-      } else {
-        directProps.push(`${toKebabCase(key)}:${value};`);
-      }
-    }
-    let finalCss = "";
-    if (directProps.length > 0) {
-      finalCss += `${selector} {${directProps.join("")}}`;
-    }
-    finalCss += nestedRules.join("");
-    return finalCss;
-  }
-  _processNestedRule(parentSelector, nestedKey, nestedStyles) {
-    if (nestedKey.startsWith("@")) {
-      return `${nestedKey}{${this._generateCss(parentSelector, nestedStyles)}}`;
-    }
-    const newSelector = nestedKey.replace(/&/g, parentSelector);
-    return this._generateCss(newSelector, nestedStyles);
-  }
-  getSsrStyles() {
-    const allCss = Array.from(this.cache.values()).map((entry) => entry.css).join("");
-    return `@layer dynamic {${allCss}}`;
-  }
-  /**
-   * Adds a class name to be applied to the <html> tag.
-   */
-  addRootClasses(classNames) {
-    classNames.forEach((className) => {
-      this.rootClasses.add(className);
-    });
-  }
-  /**
-   * Returns a space-separated string of all collected html classes.
-   */
-  getRootClasses() {
-    return Array.from(this.rootClasses).join(" ");
-  }
-  // NEW: A helper to safely get the current reference count.
-  getRefCount(styleHash) {
-    return this.refCounts.get(styleHash) || 0;
-  }
-  /**
-   * Increments the reference count for a given style hash.
-   */
-  incrementRef(styleHash) {
-    const newCount = (this.refCounts.get(styleHash) || 0) + 1;
-    this.refCounts.set(styleHash, newCount);
-  }
-  /**
-   * Decrements the reference count for a given style hash.
-   * @returns {number} The new reference count.
-   */
-  decrementRef(styleHash) {
-    const currentCount = this.refCounts.get(styleHash) || 0;
-    const newCount = Math.max(0, currentCount - 1);
-    if (newCount > 0) {
-      this.refCounts.set(styleHash, newCount);
-    } else {
-      this.refCounts.delete(styleHash);
-    }
-    return newCount;
-  }
-}
-const StyleContext = createContext(null);
-function StyleProvider({
-  children,
-  styleRegistry = new StyleRegistry(),
-  forceNew = false
-  // Optional prop to force a new registry
-}) {
-  const parentRegistry = useContext(StyleContext);
-  const [registry] = useState(() => {
-    const newRegistry = styleRegistry;
-    if (typeof window !== "undefined") {
-      const ssrTag = document.querySelector('style[data-style-registry="true"]');
-      const ssrHashes = ssrTag == null ? void 0 : ssrTag.getAttribute("data-ssr-hashes");
-      if (ssrHashes) {
-        let hashes = ssrHashes.split(",");
-        newRegistry.ssrHashes = new Set(hashes);
-        newRegistry.injected = new Set(hashes);
-      }
-    }
-    return newRegistry;
-  });
-  if (parentRegistry && !forceNew) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  return /* @__PURE__ */ jsx(StyleContext.Provider, { value: registry, children });
-}
-function useStyleRegistry() {
-  const registry = useContext(StyleContext);
-  if (registry === null) {
-    throw new Error("Component must be used within a StyleProvider");
-  }
-  return registry;
-}
-function useComponentStyle(styles2) {
-  const rootStyle = useMemo(() => {
-    return !styles2 || Object.keys(styles2).length === 0 ? EMPTY_OBJECT : {
-      "&": styles2
-      // "@container style(--screenSize: 1) or @container style(--screenSize: 2) ... etc": responsiveSizes,
-    };
-  }, [styles2]);
-  return useStyles(rootStyle);
-}
-const StyleInjectionTargetContext = createContext(null);
-function useDomRoot() {
-  const domRoot = useContext(StyleInjectionTargetContext);
-  return domRoot;
-}
-function useStyles(styles2, { prepend } = EMPTY_OBJECT) {
-  const { indexing } = useIndexerContext();
-  const domRoot = useDomRoot();
-  const injectionTarget = typeof document === "undefined" ? null : domRoot instanceof ShadowRoot ? domRoot : document.head;
-  const registry = useStyleRegistry();
-  const { className, styleHash } = useMemo(() => {
-    if (indexing || !styles2 || styles2 === EMPTY_OBJECT || Object.keys(styles2).length === 0) {
-      return { className: void 0, styleHash: void 0 };
-    }
-    return registry.register(styles2);
-  }, [indexing, registry, styles2]);
-  useInsertionEffect(() => {
-    if (!styleHash || registry.injected.has(styleHash)) {
-      return;
-    }
-    const { css } = registry.cache.get(styleHash) || {};
-    if (css) {
-      const styleElement = document.createElement("style");
-      styleElement.setAttribute("data-style-hash", styleHash);
-      styleElement.innerHTML = `@layer dynamic {
-${css}
-}`;
-      if (prepend) {
-        injectionTarget.insertBefore(styleElement, injectionTarget.firstChild.nextSibling);
-      } else {
-        injectionTarget.appendChild(styleElement);
-      }
-      registry.injected.add(styleHash);
-    }
-  }, [registry, styleHash, injectionTarget]);
-  useEffect(() => {
-    if (!styleHash) {
-      return;
-    }
-    registry.incrementRef(styleHash);
-    return () => {
-      registry.decrementRef(styleHash);
-      setTimeout(() => {
-        var _a2;
-        if (registry.getRefCount(styleHash) === 0 && !registry.ssrHashes.has(styleHash)) {
-          registry.injected.delete(styleHash);
-          (_a2 = injectionTarget.querySelector(`style[data-style-hash="${styleHash}"]`)) == null ? void 0 : _a2.remove();
-        }
-      }, 0);
-    };
-  }, [injectionTarget, registry, styleHash]);
-  return className;
-}
 function AnimatedLogo() {
   return /* @__PURE__ */ jsxs("div", { className: styles$w.loadingContainer, children: [
     /* @__PURE__ */ jsx("div", { className: styles$w.loadingText, children: "Loading XMLUI App..." }),
@@ -28692,7 +28735,7 @@ const AppMd = createMetadata({
     }
   }
 });
-function AppNode({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) {
+function AppNode({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler, registerComponentApi }) {
   const processedNavRef = useRef(false);
   const layoutType = useMemo(
     () => extractValue(node.props.layout),
@@ -28908,6 +28951,7 @@ function AppNode({ node, extractValue, renderChild: renderChild2, className, loo
       navPanelDef: NavPanel3,
       logoContentDef: node.props.logoTemplate,
       renderChild: renderChild2,
+      registerComponentApi,
       children: [
         renderedContent,
         /* @__PURE__ */ jsx(SearchIndexCollector, { Pages: Pages2, renderChild: renderChild2 })
@@ -29039,7 +29083,7 @@ function PageIndexer({
 const appRenderer = createComponentRenderer(
   COMP$T,
   AppMd,
-  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
+  ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
       AppNode,
       {
@@ -29047,7 +29091,8 @@ const appRenderer = createComponentRenderer(
         renderChild: renderChild2,
         extractValue,
         className,
-        lookupEventHandler
+        lookupEventHandler,
+        registerComponentApi
       }
     );
   }
@@ -33181,6 +33226,305 @@ async function delay(_executionContext, timeoutInMs, callback) {
   await (callback == null ? void 0 : callback());
 }
 const timedAction = createAction("delay", delay);
+const AnimatedComponent = animated(
+  forwardRef(function InlineComponentDef(props, ref) {
+    const { children, ...rest } = props;
+    if (!React__default.isValidElement(children)) {
+      return children;
+    }
+    return React__default.cloneElement(children, { ...rest, ref });
+  })
+);
+const defaultProps$l = {
+  delay: 0,
+  animateWhenInView: false,
+  reverse: false,
+  loop: false,
+  once: false
+};
+const parseAnimation = (animation) => {
+  if (typeof animation === "object") {
+    return animation;
+  }
+  const presetAnimations = {
+    fadein: {
+      from: { opacity: 0 },
+      to: { opacity: 1 }
+    },
+    fadeout: {
+      from: { opacity: 1 },
+      to: { opacity: 0 }
+    },
+    slidein: {
+      from: { transform: "translateX(-100%)" },
+      to: { transform: "translateX(0%)" }
+    },
+    slideout: {
+      from: { transform: "translateX(0%)" },
+      to: { transform: "translateX(100%)" }
+    },
+    popin: {
+      from: { transform: "scale(0.8)", opacity: 0 },
+      to: { transform: "scale(1)", opacity: 1 }
+    },
+    popout: {
+      from: { transform: "scale(1)", opacity: 1 },
+      to: { transform: "scale(0.8)", opacity: 0 }
+    },
+    flipin: {
+      from: { transform: "rotateY(90deg)", opacity: 0 },
+      to: { transform: "rotateY(0deg)", opacity: 1 }
+    },
+    flipout: {
+      from: { transform: "rotateY(0deg)", opacity: 1 },
+      to: { transform: "rotateY(90deg)", opacity: 0 }
+    },
+    rotatein: {
+      from: { transform: "rotate(-180deg)", opacity: 0 },
+      to: { transform: "rotate(0deg)", opacity: 1 }
+    },
+    rotateout: {
+      from: { transform: "rotate(0deg)", opacity: 1 },
+      to: { transform: "rotate(180deg)", opacity: 0 }
+    },
+    zoomin: {
+      from: { transform: "scale(0)", opacity: 0 },
+      to: { transform: "scale(1)", opacity: 1 }
+    },
+    zoomout: {
+      from: { transform: "scale(1)", opacity: 1 },
+      to: { transform: "scale(0)", opacity: 0 }
+    }
+  };
+  return presetAnimations[animation] || { from: {}, to: {} };
+};
+function parseAnimationOptionValue(name, value) {
+  switch (name) {
+    case "duration":
+    case "delay":
+      const num = parseInt(value, 10);
+      return isNaN(num) ? void 0 : num;
+    case "animateWhenInView":
+    case "reverse":
+    case "loop":
+    case "once":
+      const lowerVal = value.toLowerCase();
+      if (lowerVal === "true" || lowerVal === "1" || lowerVal === "yes") return true;
+      if (lowerVal === "false" || lowerVal === "0" || lowerVal === "no") return false;
+      return void 0;
+    default:
+      return void 0;
+  }
+}
+function parseAnimationOptions(input2) {
+  if (isPlainObject(input2)) {
+    return input2;
+  }
+  if (typeof input2 === "string") {
+    const options2 = {};
+    const values = input2.split(";").map((value) => value.trim()).filter((value) => value.length > 0);
+    for (const value of values) {
+      if (value.includes(":")) {
+        const [name, val] = value.split(":").map((part) => part.trim());
+        if (name && val) {
+          const parsedValue = parseAnimationOptionValue(name, val);
+          if (parsedValue !== void 0) {
+            options2[name] = parsedValue;
+          }
+        }
+      } else {
+        const booleanOptions = ["animateWhenInView", "reverse", "loop", "once"];
+        if (booleanOptions.includes(value)) {
+          options2[value] = true;
+        } else if (value.startsWith("!") && value.length > 1) {
+          const optionName = value.substring(1);
+          if (booleanOptions.includes(optionName)) {
+            options2[optionName] = false;
+          }
+        }
+      }
+    }
+    return options2;
+  }
+  return {};
+}
+const Animation$1 = forwardRef(function Animation2({
+  children,
+  registerComponentApi,
+  animation,
+  duration,
+  onStop,
+  onStart,
+  delay: delay2 = defaultProps$l.delay,
+  animateWhenInView = defaultProps$l.animateWhenInView,
+  reverse: reverse2 = defaultProps$l.reverse,
+  loop = defaultProps$l.loop,
+  once = defaultProps$l.once,
+  ...rest
+}, forwardedRef) {
+  const [_animation] = useState(animation);
+  const [toggle, setToggle] = useState(false);
+  const [reset, setReset] = useState(false);
+  const [count, setCount] = useState(0);
+  const times = 1;
+  useId();
+  const animationSettings = useMemo(
+    () => ({
+      from: _animation.from,
+      to: _animation.to,
+      config: {
+        ..._animation.config,
+        duration
+      },
+      delay: delay2,
+      loop,
+      reset,
+      reverse: toggle,
+      onRest: () => {
+        onStop == null ? void 0 : onStop();
+        if (loop) {
+          if (reverse2) {
+            setCount(count + 1);
+            setToggle(!toggle);
+          }
+          setReset(true);
+        } else {
+          if (reverse2 && count < times) {
+            setCount(count + 1);
+            setToggle(!toggle);
+          }
+        }
+      },
+      onStart: () => {
+        onStart == null ? void 0 : onStart();
+      }
+    }),
+    [
+      _animation.config,
+      _animation.from,
+      _animation.to,
+      count,
+      delay2,
+      duration,
+      loop,
+      onStart,
+      onStop,
+      reset,
+      once,
+      reverse2,
+      toggle
+    ]
+  );
+  const [springs, api] = useSpring(
+    () => ({
+      ...animationSettings
+    }),
+    [animationSettings]
+  );
+  const [ref, animationStyles] = useInView(() => animationSettings, {
+    once
+  });
+  const composedRef = ref ? composeRefs(ref, forwardedRef) : forwardedRef;
+  const startAnimation = useCallback(() => {
+    void api.start(_animation);
+    return () => {
+      api.stop();
+    };
+  }, [_animation, api]);
+  const stopAnimation = useCallback(() => {
+    api.stop();
+  }, [api]);
+  useEffect(() => {
+    registerComponentApi == null ? void 0 : registerComponentApi({
+      start: startAnimation,
+      stop: stopAnimation
+    });
+  }, [registerComponentApi, startAnimation, stopAnimation]);
+  const content2 = useMemo(() => {
+    return Children.map(
+      children,
+      (child, index) => animateWhenInView ? /* @__PURE__ */ jsx(AnimatedComponent, { ...rest, style: animationStyles, ref: composedRef, children: child }, index) : /* @__PURE__ */ jsx(AnimatedComponent, { ...rest, style: springs, ref: forwardedRef, children: child }, index)
+    );
+  }, [animateWhenInView, animationStyles, children, springs, rest, composedRef, forwardedRef]);
+  return content2;
+});
+const tooltipBehavior = {
+  name: "tooltip",
+  canAttach: (node) => {
+    var _a2, _b;
+    const tooltipText = (_a2 = node.props) == null ? void 0 : _a2.tooltip;
+    const tooltipMarkdown = (_b = node.props) == null ? void 0 : _b.tooltipMarkdown;
+    return !!tooltipText || !!tooltipMarkdown;
+  },
+  attach: (context, node) => {
+    var _a2, _b, _c;
+    const { extractValue } = context;
+    const tooltipText = extractValue((_a2 = context.node.props) == null ? void 0 : _a2.tooltip, true);
+    const tooltipMarkdown = extractValue((_b = context.node.props) == null ? void 0 : _b.tooltipMarkdown, true);
+    const tooltipOptions = extractValue((_c = context.node.props) == null ? void 0 : _c.tooltipOptions, true);
+    const parsedOptions = parseTooltipOptions(tooltipOptions);
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, markdown: tooltipMarkdown, ...parsedOptions, children: node });
+  }
+};
+const animationBehavior = {
+  name: "animation",
+  canAttach: (node) => {
+    var _a2;
+    return !!((_a2 = node.props) == null ? void 0 : _a2.animation);
+  },
+  attach: (context, node) => {
+    var _a2, _b;
+    const { extractValue } = context;
+    const animation = extractValue((_a2 = context.node.props) == null ? void 0 : _a2.animation, true);
+    const animationOptions = extractValue((_b = context.node.props) == null ? void 0 : _b.animationOptions, true);
+    const parsedOptions = parseAnimationOptions(animationOptions);
+    return /* @__PURE__ */ jsx(Animation$1, { animation: parseAnimation(animation), ...parsedOptions, children: context.node.type === "ModalDialog" ? cloneElement(node, {
+      externalAnimation: true
+    }) : node });
+  }
+};
+const labelBehavior = {
+  name: "label",
+  canAttach: (node, metadata) => {
+    var _a2, _b;
+    if ((_a2 = metadata == null ? void 0 : metadata.props) == null ? void 0 : _a2.label) {
+      return false;
+    } else if (!((_b = node.props) == null ? void 0 : _b.label)) {
+      return false;
+    }
+    return true;
+  },
+  attach: (context, node) => {
+    var _a2;
+    const { extractValue, node: componentNode, className } = context;
+    const label2 = extractValue.asOptionalString(componentNode.props.label);
+    const labelPosition = extractValue(componentNode.props.labelPosition);
+    const labelWidth = extractValue.asOptionalString(componentNode.props.labelWidth);
+    const labelBreak2 = extractValue.asOptionalBoolean(componentNode.props.labelBreak);
+    const required2 = extractValue.asOptionalBoolean(componentNode.props.required);
+    const enabled2 = extractValue.asOptionalBoolean(componentNode.props.enabled, true);
+    const shrinkToLabel2 = extractValue.asOptionalBoolean(componentNode.props.shrinkToLabel);
+    const style2 = extractValue(componentNode.props.style);
+    const readOnly2 = extractValue.asOptionalBoolean(componentNode.props.readOnly);
+    return /* @__PURE__ */ jsx(
+      ItemWithLabel,
+      {
+        labelPosition,
+        label: label2,
+        labelWidth,
+        labelBreak: labelBreak2,
+        required: required2,
+        enabled: enabled2,
+        style: style2,
+        className,
+        shrinkToLabel: shrinkToLabel2,
+        labelStyle: { pointerEvents: readOnly2 ? "none" : void 0 },
+        isInputTemplateUsed: !!((_a2 = componentNode.props) == null ? void 0 : _a2.inputTemplate),
+        children: node
+      }
+    );
+  }
+};
 function Loader({
   state,
   loader,
@@ -34488,7 +34832,7 @@ var WeekDays = /* @__PURE__ */ ((WeekDays2) => {
   WeekDays2[WeekDays2["Saturday"] = 6] = "Saturday";
   return WeekDays2;
 })(WeekDays || {});
-const defaultProps$l = {
+const defaultProps$k = {
   enabled: true,
   validationStatus: "none",
   mode: "single",
@@ -34507,7 +34851,7 @@ const DateInput = forwardRef(function DateInputNative({
   id,
   initialValue,
   value: controlledValue,
-  enabled: enabled2 = defaultProps$l.enabled,
+  enabled: enabled2 = defaultProps$k.enabled,
   updateState,
   style: style2,
   className,
@@ -34515,28 +34859,28 @@ const DateInput = forwardRef(function DateInputNative({
   onFocus: onFocus2,
   onBlur,
   onInvalidChange,
-  validationStatus = defaultProps$l.validationStatus,
+  validationStatus = defaultProps$k.validationStatus,
   registerComponentApi,
-  mode = defaultProps$l.mode,
-  dateFormat = defaultProps$l.dateFormat,
-  showWeekNumber = defaultProps$l.showWeekNumber,
-  weekStartsOn = defaultProps$l.weekStartsOn,
+  mode = defaultProps$k.mode,
+  dateFormat = defaultProps$k.dateFormat,
+  showWeekNumber = defaultProps$k.showWeekNumber,
+  weekStartsOn = defaultProps$k.weekStartsOn,
   minValue,
   maxValue,
   disabledDates,
-  inline = defaultProps$l.inline,
-  clearable = defaultProps$l.clearable,
+  inline = defaultProps$k.inline,
+  clearable = defaultProps$k.clearable,
   clearIcon,
-  clearToInitialValue = defaultProps$l.clearToInitialValue,
-  required: required2 = defaultProps$l.required,
+  clearToInitialValue = defaultProps$k.clearToInitialValue,
+  required: required2 = defaultProps$k.required,
   startText,
   startIcon,
   endText,
   endIcon,
   gap,
-  readOnly: readOnly2 = defaultProps$l.readOnly,
-  autoFocus = defaultProps$l.autoFocus,
-  emptyCharacter = defaultProps$l.emptyCharacter,
+  readOnly: readOnly2 = defaultProps$k.readOnly,
+  autoFocus = defaultProps$k.autoFocus,
+  emptyCharacter = defaultProps$k.emptyCharacter,
   ...rest
 }, ref) {
   const dateInputRef = useRef(null);
@@ -34837,7 +35181,6 @@ const DateInput = forwardRef(function DateInputNative({
       return null;
     }
   }, [day2, month2, year2]);
-  useImperativeHandle(ref, () => dateInputRef.current);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi({
@@ -35294,34 +35637,34 @@ const DateInputMd = createMetadata({
     initialValue: dInitialValue(),
     autoFocus: dAutoFocus(),
     readOnly: dReadonly(),
-    enabled: dEnabled(defaultProps$l.enabled),
-    validationStatus: dValidationStatus(defaultProps$l.validationStatus),
+    enabled: dEnabled(defaultProps$k.enabled),
+    validationStatus: dValidationStatus(defaultProps$k.validationStatus),
     mode: {
       description: "The mode of the date input (single or range)",
       valueType: "string",
       availableValues: DateInputModeValues,
-      defaultValue: defaultProps$l.mode
+      defaultValue: defaultProps$k.mode
     },
     dateFormat: {
       description: "The format of the date displayed in the input field",
       valueType: "string",
-      defaultValue: defaultProps$l.dateFormat,
+      defaultValue: defaultProps$k.dateFormat,
       availableValues: dateFormats
     },
     emptyCharacter: {
       description: "Character used to create placeholder text for empty input fields",
       valueType: "string",
-      defaultValue: defaultProps$l.emptyCharacter
+      defaultValue: defaultProps$k.emptyCharacter
     },
     showWeekNumber: {
       description: "Whether to show the week number (compatibility with DatePicker, not used in DateInput)",
       valueType: "boolean",
-      defaultValue: defaultProps$l.showWeekNumber
+      defaultValue: defaultProps$k.showWeekNumber
     },
     weekStartsOn: {
       description: "The first day of the week. 0 is Sunday, 1 is Monday, etc. (compatibility with DatePicker, not used in DateInput)",
       valueType: "number",
-      defaultValue: defaultProps$l.weekStartsOn,
+      defaultValue: defaultProps$k.weekStartsOn,
       availableValues: [
         {
           value: WeekDays.Sunday,
@@ -35368,12 +35711,12 @@ const DateInputMd = createMetadata({
     inline: {
       description: "Whether to display the date input inline (compatibility with DatePicker, always true for DateInput)",
       valueType: "boolean",
-      defaultValue: defaultProps$l.inline
+      defaultValue: defaultProps$k.inline
     },
     clearable: {
       description: "Whether to show a clear button to reset the input",
       valueType: "boolean",
-      defaultValue: defaultProps$l.clearable
+      defaultValue: defaultProps$k.clearable
     },
     clearIcon: {
       description: "Icon name for the clear button",
@@ -35382,7 +35725,7 @@ const DateInputMd = createMetadata({
     clearToInitialValue: {
       description: "Whether clearing resets to initial value or null",
       valueType: "boolean",
-      defaultValue: defaultProps$l.clearToInitialValue
+      defaultValue: defaultProps$k.clearToInitialValue
     },
     gap: {
       description: "The gap between input elements",
@@ -35391,7 +35734,7 @@ const DateInputMd = createMetadata({
     required: {
       description: "Whether the input is required",
       valueType: "boolean",
-      defaultValue: defaultProps$l.required
+      defaultValue: defaultProps$k.required
     },
     startText: dStartText(),
     startIcon: dStartIcon(),
@@ -35483,7 +35826,7 @@ const dateInputComponentRenderer = createComponentRenderer(
         minValue: extractValue.asOptionalString(node.props.minValue),
         maxValue: extractValue.asOptionalString(node.props.maxValue),
         disabledDates: extractValue(node.props.disabledDates),
-        inline: extractValue.asOptionalBoolean(node.props.inline, defaultProps$l.inline),
+        inline: extractValue.asOptionalBoolean(node.props.inline, defaultProps$k.inline),
         startText: extractValue.asOptionalString(node.props.startText),
         startIcon: extractValue.asOptionalString(node.props.startIcon),
         endText: extractValue.asOptionalString(node.props.endText),
@@ -35491,9 +35834,9 @@ const dateInputComponentRenderer = createComponentRenderer(
         readOnly: extractValue.asOptionalBoolean(node.props.readOnly),
         autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus),
         required: extractValue.asOptionalBoolean(node.props.required),
-        clearable: extractValue.asOptionalBoolean(node.props.clearable, defaultProps$l.clearable),
+        clearable: extractValue.asOptionalBoolean(node.props.clearable, defaultProps$k.clearable),
         clearIcon: extractValue.asOptionalString(node.props.clearIcon),
-        clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, defaultProps$l.clearToInitialValue),
+        clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, defaultProps$k.clearToInitialValue),
         gap: extractValue.asOptionalString(node.props.gap),
         emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter)
       }
@@ -35782,7 +36125,7 @@ const PART_MINUTE = "minute";
 const PART_SECOND = "second";
 const PART_AMPM = "ampm";
 const PART_CLEAR_BUTTON = "clearButton";
-const defaultProps$k = {
+const defaultProps$j = {
   enabled: true,
   validationStatus: "none",
   hour24: true,
@@ -35798,7 +36141,7 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
   id,
   initialValue,
   value: controlledValue,
-  enabled: enabled2 = defaultProps$k.enabled,
+  enabled: enabled2 = defaultProps$j.enabled,
   updateState,
   style: style2,
   className,
@@ -35806,24 +36149,24 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
   onFocus,
   onBlur,
   onInvalidChange,
-  validationStatus = defaultProps$k.validationStatus,
+  validationStatus = defaultProps$j.validationStatus,
   registerComponentApi,
-  hour24 = defaultProps$k.hour24,
-  seconds = defaultProps$k.seconds,
+  hour24 = defaultProps$j.hour24,
+  seconds = defaultProps$j.seconds,
   minTime,
   maxTime,
-  clearable = defaultProps$k.clearable,
+  clearable = defaultProps$j.clearable,
   clearIcon,
-  clearToInitialValue = defaultProps$k.clearToInitialValue,
-  required: required2 = defaultProps$k.required,
+  clearToInitialValue = defaultProps$j.clearToInitialValue,
+  required: required2 = defaultProps$j.required,
   startText,
   startIcon,
   endText,
   endIcon,
   gap,
-  readOnly: readOnly2 = defaultProps$k.readOnly,
-  autoFocus = defaultProps$k.autoFocus,
-  emptyCharacter = defaultProps$k.emptyCharacter,
+  readOnly: readOnly2 = defaultProps$j.readOnly,
+  autoFocus = defaultProps$j.autoFocus,
+  emptyCharacter = defaultProps$j.emptyCharacter,
   ...rest
 }, ref) {
   const timeInputRef = useRef(null);
@@ -36164,7 +36507,6 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
     const s24 = (second2 || "00").padStart(2, "0");
     return `${h24}:${m24}:${s24}`;
   }, [hour2, minute2, second2, amPm, is12HourFormat]);
-  useImperativeHandle(ref, () => timeInputRef.current);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi({
@@ -36695,17 +37037,17 @@ const TimeInputMd = createMetadata({
     initialValue: dInitialValue(),
     autoFocus: dAutoFocus(),
     readOnly: dReadonly(),
-    enabled: dEnabled(defaultProps$k.enabled),
-    validationStatus: dValidationStatus(defaultProps$k.validationStatus),
+    enabled: dEnabled(defaultProps$j.enabled),
+    validationStatus: dValidationStatus(defaultProps$j.validationStatus),
     hour24: {
       description: "Whether to use 24-hour format (true) or 12-hour format with AM/PM (false)",
       valueType: "boolean",
-      defaultValue: defaultProps$k.hour24
+      defaultValue: defaultProps$j.hour24
     },
     seconds: {
       description: "Whether to show and allow input of seconds",
       valueType: "boolean",
-      defaultValue: defaultProps$k.seconds
+      defaultValue: defaultProps$j.seconds
     },
     minTime: {
       description: "Minimum time that the user can select",
@@ -36718,7 +37060,7 @@ const TimeInputMd = createMetadata({
     clearable: {
       description: "Whether to show a clear button that allows clearing the selected time",
       valueType: "boolean",
-      defaultValue: defaultProps$k.clearable
+      defaultValue: defaultProps$j.clearable
     },
     clearIcon: {
       description: "The icon to display in the clear button.",
@@ -36727,12 +37069,12 @@ const TimeInputMd = createMetadata({
     clearToInitialValue: {
       description: "Whether the clear button resets the time input to its initial value",
       valueType: "boolean",
-      defaultValue: defaultProps$k.clearToInitialValue
+      defaultValue: defaultProps$j.clearToInitialValue
     },
     required: {
       description: "Whether the time input should be required",
       valueType: "boolean",
-      defaultValue: defaultProps$k.required
+      defaultValue: defaultProps$j.required
     },
     startText: dStartText(),
     startIcon: dStartIcon(),
@@ -36745,7 +37087,7 @@ const TimeInputMd = createMetadata({
     emptyCharacter: {
       description: "Character to use as placeholder for empty time values. If longer than 1 character, uses the first character. Defaults to '-'",
       valueType: "string",
-      defaultValue: defaultProps$k.emptyCharacter
+      defaultValue: defaultProps$j.emptyCharacter
     }
   },
   events: {
@@ -36822,24 +37164,24 @@ const timeInputComponentRenderer = createComponentRenderer(
         value: stateValue,
         updateState,
         registerComponentApi,
-        enabled: extractValue.asOptionalBoolean(node.props.enabled, defaultProps$k.enabled),
-        autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, defaultProps$k.autoFocus),
-        readOnly: extractValue.asOptionalBoolean(node.props.readOnly, defaultProps$k.readOnly),
+        enabled: extractValue.asOptionalBoolean(node.props.enabled, defaultProps$j.enabled),
+        autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, defaultProps$j.autoFocus),
+        readOnly: extractValue.asOptionalBoolean(node.props.readOnly, defaultProps$j.readOnly),
         validationStatus: extractValue(node.props.validationStatus),
-        hour24: extractValue.asOptionalBoolean(node.props.hour24, defaultProps$k.hour24),
-        seconds: extractValue.asOptionalBoolean(node.props.seconds, defaultProps$k.seconds),
+        hour24: extractValue.asOptionalBoolean(node.props.hour24, defaultProps$j.hour24),
+        seconds: extractValue.asOptionalBoolean(node.props.seconds, defaultProps$j.seconds),
         minTime: extractValue(node.props.minTime),
         maxTime: extractValue(node.props.maxTime),
-        clearable: extractValue.asOptionalBoolean(node.props.clearable, defaultProps$k.clearable),
+        clearable: extractValue.asOptionalBoolean(node.props.clearable, defaultProps$j.clearable),
         clearIcon: extractValue(node.props.clearIcon),
-        clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, defaultProps$k.clearToInitialValue),
-        required: extractValue.asOptionalBoolean(node.props.required, defaultProps$k.required),
+        clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, defaultProps$j.clearToInitialValue),
+        required: extractValue.asOptionalBoolean(node.props.required, defaultProps$j.required),
         startText: extractValue(node.props.startText),
         startIcon: extractValue(node.props.startIcon),
         endText: extractValue(node.props.endText),
         endIcon: extractValue(node.props.endIcon),
         gap: extractValue.asOptionalString(node.props.gap),
-        emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter, defaultProps$k.emptyCharacter),
+        emptyCharacter: extractValue.asOptionalString(node.props.emptyCharacter, defaultProps$j.emptyCharacter),
         onDidChange: lookupEventHandler("didChange"),
         onFocus: lookupEventHandler("gotFocus"),
         onBlur: lookupEventHandler("lostFocus"),
@@ -36848,17 +37190,17 @@ const timeInputComponentRenderer = createComponentRenderer(
     );
   }
 );
-const defaultProps$j = {
+const defaultProps$i = {
   enabled: true,
   interval: 1e3,
   once: false,
   initialDelay: 0
 };
 const Timer = forwardRef(function Timer2({
-  enabled: enabled2 = defaultProps$j.enabled,
-  interval = defaultProps$j.interval,
-  once = defaultProps$j.once,
-  initialDelay = defaultProps$j.initialDelay,
+  enabled: enabled2 = defaultProps$i.enabled,
+  interval = defaultProps$i.interval,
+  once = defaultProps$i.once,
+  initialDelay = defaultProps$i.initialDelay,
   onTick,
   registerComponentApi,
   style: style2,
@@ -36911,7 +37253,6 @@ const Timer = forwardRef(function Timer2({
     isPaused: () => isPaused,
     isRunning: () => isRunning && !isPaused
   }), [pause, resume, isPaused, isRunning]);
-  useImperativeHandle(forwardedRef, () => timerApi, [timerApi]);
   useEffect(() => {
     if (registerComponentApi) {
       registerComponentApi(timerApi);
@@ -37009,22 +37350,22 @@ const TimerMd = createMetadata({
     enabled: {
       description: "Whether the timer is enabled and should fire events.",
       valueType: "boolean",
-      defaultValue: defaultProps$j.enabled
+      defaultValue: defaultProps$i.enabled
     },
     interval: {
       description: "The interval in milliseconds between timer events.",
       valueType: "number",
-      defaultValue: defaultProps$j.interval
+      defaultValue: defaultProps$i.interval
     },
     initialDelay: {
       description: "The delay in milliseconds before the first timer event.",
       valueType: "number",
-      defaultValue: defaultProps$j.initialDelay
+      defaultValue: defaultProps$i.initialDelay
     },
     once: {
       description: "Whether the timer should stop after firing its first tick event.",
       valueType: "boolean",
-      defaultValue: defaultProps$j.once
+      defaultValue: defaultProps$i.once
     }
   },
   events: {
@@ -37069,7 +37410,7 @@ const timerComponentRenderer = createComponentRenderer(
   }
 );
 const COMP$x = "Redirect";
-const defaultProps$i = {
+const defaultProps$h = {
   to: ""
 };
 const RedirectMd = createMetadata({
@@ -37082,7 +37423,7 @@ const RedirectMd = createMetadata({
     },
     to: {
       description: `This property defines the URL to which this component is about to redirect requests.`,
-      defaultValue: defaultProps$i.to
+      defaultValue: defaultProps$h.to
     }
   }
 });
@@ -37094,12 +37435,21 @@ const redirectRenderer = createComponentRenderer(
   }
 );
 const themeVars$9 = `'{"padding-trigger-Tabs": "var(--xmlui-padding-trigger-Tabs)", "paddingHorizontal-trigger-Tabs": "var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingVertical-trigger-Tabs": "var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs))", "paddingLeft-trigger-Tabs": "var(--xmlui-paddingLeft-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingRight-trigger-Tabs": "var(--xmlui-paddingRight-trigger-Tabs, var(--xmlui-paddingHorizontal-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingTop-trigger-Tabs": "var(--xmlui-paddingTop-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "paddingBottom-trigger-Tabs": "var(--xmlui-paddingBottom-trigger-Tabs, var(--xmlui-paddingVertical-trigger-Tabs, var(--xmlui-padding-trigger-Tabs)))", "backgroundColor-Tabs": "var(--xmlui-backgroundColor-Tabs)", "borderColor-Tabs": "var(--xmlui-borderColor-Tabs)", "borderWidth-Tabs": "var(--xmlui-borderWidth-Tabs)", "borderColor-active-Tabs": "var(--xmlui-borderColor-active-Tabs)", "backgroundColor-trigger-Tabs": "var(--xmlui-backgroundColor-trigger-Tabs)", "borderRadius-trigger-Tabs": "var(--xmlui-borderRadius-trigger-Tabs)", "border-trigger-Tabs": "var(--xmlui-border-trigger-Tabs)", "textColor-trigger-Tabs": "var(--xmlui-textColor-trigger-Tabs)", "backgroundColor-trigger-Tabs--hover": "var(--xmlui-backgroundColor-trigger-Tabs--hover)", "backgroundColor-trigger-Tabs--active": "var(--xmlui-backgroundColor-trigger-Tabs--active)", "backgroundColor-list-Tabs": "var(--xmlui-backgroundColor-list-Tabs)", "borderRadius-list-Tabs": "var(--xmlui-borderRadius-list-Tabs)", "border-list-Tabs": "var(--xmlui-border-list-Tabs)"}'`;
-const tabs = "_tabs_vrzjk_14";
-const filler = "_filler_vrzjk_26";
-const tabTrigger = "_tabTrigger_vrzjk_39";
-const distributeEvenly = "_distributeEvenly_vrzjk_56";
-const tabsList = "_tabsList_vrzjk_87";
-const tabsContent = "_tabsContent_vrzjk_107";
+const tabs = "_tabs_19izz_14";
+const filler = "_filler_19izz_26";
+const tabTrigger = "_tabTrigger_19izz_39";
+const distributeEvenly = "_distributeEvenly_19izz_56";
+const tabsList = "_tabsList_19izz_87";
+const alignStart = "_alignStart_19izz_104";
+const alignEnd = "_alignEnd_19izz_107";
+const alignCenter = "_alignCenter_19izz_110";
+const alignStretch = "_alignStretch_19izz_113";
+const tabsContent = "_tabsContent_19izz_119";
+const accordionView = "_accordionView_19izz_123";
+const accordionRoot = "_accordionRoot_19izz_126";
+const accordionInterleaved = "_accordionInterleaved_19izz_131";
+const accordionList = "_accordionList_19izz_136";
+const accordionTrigger = "_accordionTrigger_19izz_148";
 const styles$k = {
   themeVars: themeVars$9,
   tabs,
@@ -37107,43 +37457,61 @@ const styles$k = {
   tabTrigger,
   distributeEvenly,
   tabsList,
-  tabsContent
+  alignStart,
+  alignEnd,
+  alignCenter,
+  alignStretch,
+  tabsContent,
+  accordionView,
+  accordionRoot,
+  accordionInterleaved,
+  accordionList,
+  accordionTrigger
 };
 const TabContext = createContext({
   register: (tabItem) => {
   },
   unRegister: (innerId) => {
   },
-  activeTabId: ""
+  activeTabId: "",
+  getTabItems: () => []
 });
 function useTabContextValue() {
   const [tabItems, setTabItems] = useState(EMPTY_ARRAY);
+  const tabItemsRef = useRef(EMPTY_ARRAY);
+  tabItemsRef.current = tabItems;
   const [activeTabId, setActiveTabId] = useState("");
+  const register = useCallback((tabItem) => {
+    setTabItems(
+      produce((draft) => {
+        const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
+        if (existing < 0) {
+          draft.push(tabItem);
+        } else {
+          draft[existing] = tabItem;
+        }
+      })
+    );
+  }, []);
+  const unRegister = useCallback((innerId) => {
+    setTabItems(
+      produce((draft) => {
+        return draft.filter((col) => col.innerId !== innerId);
+      })
+    );
+  }, []);
+  const getTabItems = useCallback(() => {
+    return tabItemsRef.current;
+  }, []);
   const tabContextValue = useMemo(() => {
     return {
-      register: (tabItem) => {
-        setTabItems(
-          produce((draft) => {
-            const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
-            if (existing < 0) {
-              draft.push(tabItem);
-            } else {
-              draft[existing] = tabItem;
-            }
-          })
-        );
-      },
-      unRegister: (innerId) => {
-        setTabItems(
-          produce((draft) => {
-            return draft.filter((col) => col.innerId !== innerId);
-          })
-        );
-      },
+      register,
+      unRegister,
       activeTabId,
-      setActiveTabId
+      setActiveTabId,
+      getTabItems
     };
-  }, [activeTabId]);
+  }, [register, unRegister, activeTabId, getTabItems]);
   return {
     tabItems,
     tabContextValue
@@ -37152,21 +37520,25 @@ function useTabContextValue() {
 function useTabContext() {
   return useContext(TabContext);
 }
-const defaultProps$h = {
+const defaultProps$g = {
   activeTab: 0,
   orientation: "horizontal",
+  tabAlignment: "start",
+  accordionView: false,
   distributeEvenly: false
 };
 const Tabs = forwardRef(function Tabs2({
-  activeTab = defaultProps$h.activeTab,
-  orientation = defaultProps$h.orientation,
+  activeTab = defaultProps$g.activeTab,
+  orientation = defaultProps$g.orientation,
+  tabAlignment = defaultProps$g.tabAlignment,
+  accordionView: accordionView2 = defaultProps$g.accordionView,
   headerRenderer,
   style: style2,
   children,
   id,
   registerComponentApi,
   className,
-  distributeEvenly: distributeEvenly2 = defaultProps$h.distributeEvenly,
+  distributeEvenly: distributeEvenly2 = defaultProps$g.distributeEvenly,
   onDidChange = noop$1,
   ...rest
 }, forwardedRef) {
@@ -37230,6 +37602,66 @@ const Tabs = forwardRef(function Tabs2({
       setActiveTabById
     });
   }, [next, prev, setActiveTabIndex, setActiveTabById, registerComponentApi]);
+  if (accordionView2) {
+    return /* @__PURE__ */ jsx(TabContext.Provider, { value: tabContextValue, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...rest,
+        id: tabsId,
+        ref: forwardedRef,
+        className: classnames(className, styles$k.tabs, styles$k.accordionView),
+        style: style2,
+        children: /* @__PURE__ */ jsx(
+          Root$2,
+          {
+            value: `${currentTab}`,
+            onValueChange: (tab) => {
+              const tabItem = tabItems.find((item2) => item2.innerId === tab);
+              const newIndex = tabItems.findIndex((item2) => item2.innerId === tab);
+              if (newIndex !== activeIndex) {
+                tabContextValue.setActiveTabId(tab);
+                setActiveIndex(newIndex);
+                onDidChange == null ? void 0 : onDidChange(newIndex, tabItem.id || tabItem.innerId, tabItem == null ? void 0 : tabItem.label);
+              }
+            },
+            orientation: "vertical",
+            className: styles$k.accordionRoot,
+            children: /* @__PURE__ */ jsxs("div", { className: styles$k.accordionInterleaved, children: [
+              /* @__PURE__ */ jsx(List, { className: styles$k.accordionList, children: tabItems.map((tab, index) => /* @__PURE__ */ jsx(
+                Trigger$1,
+                {
+                  value: tab.innerId,
+                  asChild: true,
+                  style: { order: index * 2 },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      role: "tab",
+                      "aria-label": tab.label,
+                      className: classnames(styles$k.tabTrigger, styles$k.accordionTrigger),
+                      children: tab.headerRenderer ? tab.headerRenderer({
+                        ...tab.id !== void 0 && { id: tab.id },
+                        index,
+                        label: tab.label,
+                        isActive: tab.innerId === currentTab
+                      }) : headerRenderer ? headerRenderer({
+                        ...tab.id !== void 0 && { id: tab.id },
+                        index,
+                        label: tab.label,
+                        isActive: tab.innerId === currentTab
+                      }) : tab.label
+                    }
+                  )
+                },
+                tab.innerId
+              )) }),
+              children
+            ] })
+          }
+        )
+      }
+    ) });
+  }
   return /* @__PURE__ */ jsx(TabContext.Provider, { value: tabContextValue, children: /* @__PURE__ */ jsxs(
     Root$2,
     {
@@ -37250,30 +37682,44 @@ const Tabs = forwardRef(function Tabs2({
       orientation,
       style: style2,
       children: [
-        /* @__PURE__ */ jsxs(List, { className: styles$k.tabsList, role: "tablist", children: [
-          tabItems.map((tab, index) => /* @__PURE__ */ jsx(Trigger$1, { value: tab.innerId, asChild: true, children: /* @__PURE__ */ jsx(
-            "div",
-            {
-              role: "tab",
-              "aria-label": tab.label,
-              className: classnames(styles$k.tabTrigger, {
-                [styles$k.distributeEvenly]: distributeEvenly2
-              }),
-              children: tab.headerRenderer ? tab.headerRenderer({
-                ...tab.id !== void 0 && { id: tab.id },
-                index,
-                label: tab.label,
-                isActive: tab.innerId === currentTab
-              }) : headerRenderer ? headerRenderer({
-                ...tab.id !== void 0 && { id: tab.id },
-                index,
-                label: tab.label,
-                isActive: tab.innerId === currentTab
-              }) : tab.label
-            }
-          ) }, tab.innerId)),
-          !distributeEvenly2 && !headerRenderer && /* @__PURE__ */ jsx("div", { className: styles$k.filler, "data-orientation": orientation })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          List,
+          {
+            className: classnames(styles$k.tabsList, {
+              [styles$k.alignStart]: tabAlignment === "start",
+              [styles$k.alignEnd]: tabAlignment === "end",
+              [styles$k.alignCenter]: tabAlignment === "center",
+              [styles$k.alignStretch]: tabAlignment === "stretch"
+            }),
+            role: "tablist",
+            children: [
+              !distributeEvenly2 && !headerRenderer && tabAlignment === "end" && /* @__PURE__ */ jsx("div", { className: styles$k.filler, "data-orientation": orientation }),
+              !distributeEvenly2 && !headerRenderer && tabAlignment === "center" && /* @__PURE__ */ jsx("div", { className: styles$k.filler, "data-orientation": orientation }),
+              tabItems.map((tab, index) => /* @__PURE__ */ jsx(Trigger$1, { value: tab.innerId, asChild: true, children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "tab",
+                  "aria-label": tab.label,
+                  className: classnames(styles$k.tabTrigger, {
+                    [styles$k.distributeEvenly]: distributeEvenly2 || tabAlignment === "stretch"
+                  }),
+                  children: tab.headerRenderer ? tab.headerRenderer({
+                    ...tab.id !== void 0 && { id: tab.id },
+                    index,
+                    label: tab.label,
+                    isActive: tab.innerId === currentTab
+                  }) : headerRenderer ? headerRenderer({
+                    ...tab.id !== void 0 && { id: tab.id },
+                    index,
+                    label: tab.label,
+                    isActive: tab.innerId === currentTab
+                  }) : tab.label
+                }
+              ) }, tab.innerId)),
+              !distributeEvenly2 && !headerRenderer && tabAlignment !== "stretch" && (tabAlignment === "start" || tabAlignment === "center") && /* @__PURE__ */ jsx("div", { className: styles$k.filler, "data-orientation": orientation })
+            ]
+          }
+        ),
         children
       ]
     }
@@ -37288,11 +37734,22 @@ const TabsMd = createMetadata({
       `This property indicates the index of the active tab. The indexing starts from 0, representing the starting (leftmost) tab. If not set, the first tab is selected by default.`
     ),
     orientation: {
-      description: `This property indicates the orientation of the component. In horizontal orientation, the tab sections are laid out on the left side of the content panel, while in vertical orientation, the buttons are at the top.`,
+      description: `This property indicates the orientation of the component. In horizontal orientation, the tab sections are laid out on the left side of the content panel, while in vertical orientation, the buttons are at the top. Note: This property is ignored when accordionView is set to true.`,
       availableValues: ["horizontal", "vertical"],
-      defaultValue: defaultProps$h.orientation,
+      defaultValue: defaultProps$g.orientation,
+      valueType: "string"
+    },
+    tabAlignment: {
+      description: `This property controls how tabs are aligned within the tab header container in horizontal orientation. Use 'start' to align tabs to the left, 'end' to align to the right, 'center' to center the tabs, and 'stretch' to make tabs fill the full width of the header. Note: This property is ignored when orientation is set to 'vertical' or when accordionView is enabled.`,
+      availableValues: ["start", "end", "center", "stretch"],
+      defaultValue: defaultProps$g.tabAlignment,
       valueType: "string"
     },
+    accordionView: {
+      description: `When enabled, displays tabs in an accordion-like view where tab headers are stacked vertically and only the active tab's content is visible. Each tab header remains visible and clicking a header opens its content while closing others. When enabled, the orientation property is ignored.`,
+      defaultValue: defaultProps$g.accordionView,
+      valueType: "boolean"
+    },
     headerTemplate: {
       ...dComponent(`This property declares the template for the clickable tab area.`)
     }
@@ -37336,7 +37793,7 @@ const tabsComponentRenderer = createComponentRenderer(
   COMP$w,
   TabsMd,
   ({ extractValue, node, renderChild: renderChild2, className, registerComponentApi, lookupEventHandler }) => {
-    var _a2, _b, _c;
+    var _a2, _b, _c, _d, _e;
     return /* @__PURE__ */ jsx(
       Tabs,
       {
@@ -37355,6 +37812,8 @@ const tabsComponentRenderer = createComponentRenderer(
         ) : void 0,
         activeTab: extractValue((_b = node.props) == null ? void 0 : _b.activeTab),
         orientation: extractValue((_c = node.props) == null ? void 0 : _c.orientation),
+        tabAlignment: extractValue((_d = node.props) == null ? void 0 : _d.tabAlignment),
+        accordionView: extractValue((_e = node.props) == null ? void 0 : _e.accordionView),
         onDidChange: lookupEventHandler("didChange"),
         registerComponentApi,
         children: renderChild2(node.children)
@@ -37366,16 +37825,16 @@ const anchorRef = "_anchorRef_1tdkt_2";
 const styles$j = {
   anchorRef
 };
-const defaultProps$g = {
+const defaultProps$f = {
   level: 1,
   omitFromToc: false
 };
 const Bookmark = ({
   uid,
-  level = defaultProps$g.level,
+  level = defaultProps$f.level,
   children,
   title: title2,
-  omitFromToc = defaultProps$g.omitFromToc,
+  omitFromToc = defaultProps$f.omitFromToc,
   registerComponentApi,
   ...rest
 }) => {
@@ -37423,7 +37882,7 @@ const BookmarkMd = createMetadata({
     level: {
       description: "The level of the bookmark. The level is used to determine the bookmark's position in the table of contents.",
       valueType: "number",
-      defaultValue: defaultProps$g.level
+      defaultValue: defaultProps$f.level
     },
     title: {
       description: "Defines the text to display the bookmark in the table of contents. If this property is empty, the text falls back to the value of `id`.",
@@ -37432,7 +37891,7 @@ const BookmarkMd = createMetadata({
     omitFromToc: {
       description: "If true, this bookmark will be excluded from the table of contents.",
       valueType: "boolean",
-      defaultValue: defaultProps$g.omitFromToc
+      defaultValue: defaultProps$f.omitFromToc
     }
   },
   apis: {
@@ -37463,11 +37922,11 @@ const AppStateContext = createContext$1(null);
 function useAppStateContextPart(selector) {
   return useContextSelector(AppStateContext, selector);
 }
-const defaultProps$f = {
+const defaultProps$e = {
   bucket: "default"
 };
 function AppState({
-  bucket = defaultProps$f.bucket,
+  bucket = defaultProps$e.bucket,
   updateState,
   initialValue,
   registerComponentApi,
@@ -37528,7 +37987,7 @@ const AppStateMd = createMetadata({
     bucket: {
       description: `This property is the identifier of the bucket to which the \`${COMP$u}\` instance is bound. Multiple \`${COMP$u}\` instances with the same bucket will share the same state object: any of them updating the state will cause the other instances to view the new, updated state.`,
       valueType: "string",
-      defaultValue: defaultProps$f.bucket
+      defaultValue: defaultProps$e.bucket
     },
     initialValue: {
       description: `This property contains the initial state value. Though you can use multiple \`${COMP$u}\`component instances for the same bucket with their \`initialValue\` set, it may result in faulty app logic. When xmlui instantiates an \`${COMP$u}\` with an explicit initial value, that value is immediately merged with the existing state. The issue may come from the behavior that \`initialValue\` is set (merged) only when a component mounts. By default, the bucket's initial state is undefined.`
@@ -37611,16 +38070,16 @@ const styles$i = {
   head_6,
   active: active$1
 };
-const defaultProps$e = {
+const defaultProps$d = {
   smoothScrolling: false,
   maxHeadingLevel: 6,
   omitH1: false
 };
 const TableOfContents = forwardRef(function TableOfContents2({
   style: style2,
-  smoothScrolling = defaultProps$e.smoothScrolling,
-  maxHeadingLevel = defaultProps$e.maxHeadingLevel,
-  omitH1 = defaultProps$e.omitH1,
+  smoothScrolling = defaultProps$d.smoothScrolling,
+  maxHeadingLevel = defaultProps$d.maxHeadingLevel,
+  omitH1 = defaultProps$d.omitH1,
   className,
   ...rest
 }, forwardedRef) {
@@ -37712,12 +38171,12 @@ const TableOfContentsMd = createMetadata({
     smoothScrolling: {
       description: `This property indicates that smooth scrolling is used while scrolling the selected table of contents items into view.`,
       valueType: "boolean",
-      defaultValue: defaultProps$e.smoothScrolling
+      defaultValue: defaultProps$d.smoothScrolling
     },
     maxHeadingLevel: {
       description: "Defines the maximum heading level (1 to 6) to include in the table of contents. For example, if it is 2, then `H1` and `H2` are displayed, but lower levels (`H3` to `H6`) are not.",
       valueType: "number",
-      defaultValue: defaultProps$e.maxHeadingLevel
+      defaultValue: defaultProps$d.maxHeadingLevel
     },
     omitH1: {
       description: "If true, the `H1` heading is not included in the table of contents. This is useful when the `H1` is used for the page title and you want to avoid duplication.",
@@ -37805,7 +38264,7 @@ const AccordionContext = createContext({
 function useAccordionContext() {
   return useContext(AccordionContext);
 }
-const defaultProps$d = {
+const defaultProps$c = {
   hideIcon: false,
   collapsedIcon: "chevrondown",
   triggerPosition: "end",
@@ -37815,13 +38274,13 @@ const AccordionComponent = forwardRef(function AccordionComponent2({
   className,
   style: style2,
   children,
-  hideIcon = defaultProps$d.hideIcon,
+  hideIcon = defaultProps$c.hideIcon,
   expandedIcon,
-  collapsedIcon = defaultProps$d.collapsedIcon,
-  triggerPosition = defaultProps$d.triggerPosition,
+  collapsedIcon = defaultProps$c.collapsedIcon,
+  triggerPosition = defaultProps$c.triggerPosition,
   onDisplayDidChange = noop$1,
   registerComponentApi,
-  rotateExpanded = defaultProps$d.rotateExpanded,
+  rotateExpanded = defaultProps$c.rotateExpanded,
   ...rest
 }, forwardedRef) {
   const [expandedItems, setExpandedItems] = useState([]);
@@ -37942,14 +38401,14 @@ const AccordionMd = createMetadata({
   props: {
     triggerPosition: {
       description: `This property indicates the position where the trigger icon should be displayed. The \`start\` value signs the trigger is before the header text (template), and \`end\` indicates that it follows the header.`,
-      defaultValue: defaultProps$d.triggerPosition,
+      defaultValue: defaultProps$c.triggerPosition,
       valueType: "string",
       availableValues: triggerPositionNames
     },
     collapsedIcon: {
       description: "This property is the name of the icon that is displayed when the accordion is collapsed. This property is the name of the icon that is displayed when the accordion is expanded. If not provided, a chevron-down icon is used.",
       valueType: "string",
-      defaultValue: defaultProps$d.collapsedIcon
+      defaultValue: defaultProps$c.collapsedIcon
     },
     expandedIcon: {
       description: "This property is the name of the icon that is displayed when the accordion is expanded. If not provided, a chevron-up icon is used.",
@@ -37957,13 +38416,13 @@ const AccordionMd = createMetadata({
     },
     hideIcon: {
       description: `This property indicates that the trigger icon is not displayed (\`true\`).`,
-      defaultValue: defaultProps$d.hideIcon,
+      defaultValue: defaultProps$c.hideIcon,
       valueType: "boolean"
     },
     rotateExpanded: {
       description: `This optional property defines the rotation angle of the expanded icon (relative to the collapsed icon).`,
       valueType: "string",
-      defaultValue: defaultProps$d.rotateExpanded
+      defaultValue: defaultProps$c.rotateExpanded
     }
   },
   events: {
@@ -38030,7 +38489,7 @@ const accordionComponentRenderer = createComponentRenderer(
 );
 const TabItemComponent = forwardRef(function TabItemComponent2({ children, label: label2, headerRenderer, style: style2, id, activated, ...rest }, forwardedRef) {
   const innerId = useId();
-  const { register, unRegister, activeTabId } = useTabContext();
+  const { register, unRegister, activeTabId, getTabItems } = useTabContext();
   useEffect(() => {
     register({
       label: label2,
@@ -38051,6 +38510,9 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
     }
   }, [activeTabId, innerId, activated]);
   if (activeTabId !== innerId) return null;
+  const tabItems = getTabItems();
+  const tabIndex = (tabItems == null ? void 0 : tabItems.findIndex((item2) => item2.innerId === innerId)) ?? 0;
+  const contentOrder = tabIndex * 2 + 1;
   return /* @__PURE__ */ createElement(
     Content$1,
     {
@@ -38059,7 +38521,7 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
       value: innerId,
       className: styles$k.tabsContent,
       ref: forwardedRef,
-      style: style2
+      style: { ...style2, order: contentOrder }
     },
     children
   );
@@ -38121,16 +38583,16 @@ const tabItemComponentRenderer = createComponentRenderer(
 function defaultRenderer(header2) {
   return /* @__PURE__ */ jsx("div", { children: header2 });
 }
-const defaultProps$c = {
+const defaultProps$b = {
   initiallyExpanded: false,
   headerRenderer: defaultRenderer
 };
 const AccordionItemComponent = forwardRef(function AccordionItemComponent2({
   id,
   header: header2,
-  headerRenderer = defaultProps$c.headerRenderer,
+  headerRenderer = defaultProps$b.headerRenderer,
   content: content2,
-  initiallyExpanded = defaultProps$c.initiallyExpanded,
+  initiallyExpanded = defaultProps$b.initiallyExpanded,
   style: style2,
   className,
   ...rest
@@ -38227,7 +38689,7 @@ const AccordionItemMd = createMetadata({
     initiallyExpanded: {
       description: `This property indicates if the ${COMP$q} is expanded (\`true\`) or collapsed (\`false\`).`,
       valueType: "boolean",
-      defaultValue: defaultProps$c.initiallyExpanded
+      defaultValue: defaultProps$b.initiallyExpanded
     }
   }
 });
@@ -38480,7 +38942,7 @@ function useCarouselContextValue(isTabbed) {
     carouselContextValue
   };
 }
-const defaultProps$b = {
+const defaultProps$a = {
   orientation: "horizontal",
   indicators: true,
   autoplay: false,
@@ -38492,21 +38954,21 @@ const defaultProps$b = {
   stopAutoplayOnInteraction: true
 };
 const CarouselComponent = forwardRef(function CarouselComponent2({
-  orientation = defaultProps$b.orientation,
+  orientation = defaultProps$a.orientation,
   children,
   style: style2,
   className,
-  indicators: indicators2 = defaultProps$b.indicators,
+  indicators: indicators2 = defaultProps$a.indicators,
   onDisplayDidChange = noop$1,
-  autoplay = defaultProps$b.autoplay,
-  controls: controls2 = defaultProps$b.controls,
-  loop = defaultProps$b.loop,
-  startIndex = defaultProps$b.startIndex,
+  autoplay = defaultProps$a.autoplay,
+  controls: controls2 = defaultProps$a.controls,
+  loop = defaultProps$a.loop,
+  startIndex = defaultProps$a.startIndex,
   prevIcon,
   nextIcon,
-  transitionDuration = defaultProps$b.transitionDuration,
-  autoplayInterval = defaultProps$b.autoplayInterval,
-  stopAutoplayOnInteraction = defaultProps$b.stopAutoplayOnInteraction,
+  transitionDuration = defaultProps$a.transitionDuration,
+  autoplayInterval = defaultProps$a.autoplayInterval,
+  stopAutoplayOnInteraction = defaultProps$a.stopAutoplayOnInteraction,
   registerComponentApi,
   ...rest
 }, forwardedRef) {
@@ -38709,47 +39171,47 @@ const CarouselMd = createMetadata({
       description: "This property indicates the orientation of the carousel. The `horizontal` value indicates that the carousel moves horizontally, and the `vertical` value indicates that the carousel moves vertically.",
       availableValues: orientationOptionMd,
       valueType: "string",
-      defaultValue: defaultProps$b.orientation
+      defaultValue: defaultProps$a.orientation
     },
     indicators: {
       description: "Display the individual slides as buttons (`true`) or not (`false`).",
       valueType: "boolean",
-      defaultValue: defaultProps$b.indicators
+      defaultValue: defaultProps$a.indicators
     },
     controls: {
       description: "Display the previous/next controls (`true`) or not (`false`).",
       valueType: "boolean",
-      defaultValue: defaultProps$b.controls
+      defaultValue: defaultProps$a.controls
     },
     autoplay: {
       description: "Start scrolling the carousel automatically (`true`) or not (`false`).",
       valueType: "boolean",
-      defaultValue: defaultProps$b.autoplay
+      defaultValue: defaultProps$a.autoplay
     },
     loop: {
       description: "Sets whether the carousel should loop back to the start/end when it reaches the last/first slide.",
       valueType: "boolean",
-      defaultValue: defaultProps$b.loop
+      defaultValue: defaultProps$a.loop
     },
     startIndex: {
       description: "The index of the first slide to display.",
       valueType: "number",
-      defaultValue: defaultProps$b.startIndex
+      defaultValue: defaultProps$a.startIndex
     },
     transitionDuration: {
       description: "The duration of the transition between slides.",
       valueType: "number",
-      defaultValue: defaultProps$b.transitionDuration
+      defaultValue: defaultProps$a.transitionDuration
     },
     autoplayInterval: {
       description: "Specifies the interval between autoplay transitions.",
       valueType: "number",
-      defaultValue: defaultProps$b.autoplayInterval
+      defaultValue: defaultProps$a.autoplayInterval
     },
     stopAutoplayOnInteraction: {
       description: "This property indicates whether autoplay stops on user interaction.",
       valueType: "boolean",
-      defaultValue: defaultProps$b.stopAutoplayOnInteraction
+      defaultValue: defaultProps$a.stopAutoplayOnInteraction
     },
     prevIcon: {
       description: "The icon to display for the previous control.",
@@ -38900,7 +39362,7 @@ const breakoutComponentRenderer = createComponentRenderer(
 const COMP$l = "ToneChangerButton";
 const LIGHT_TO_DARK_ICON = "lightToDark:ToneChangerButton";
 const DARK_TO_LIGHT_ICON = "darkToLight:ToneChangerButton";
-const defaultProps$a = {
+const defaultProps$9 = {
   lightToDarkIcon: LIGHT_TO_DARK_ICON,
   darkToLightIcon: DARK_TO_LIGHT_ICON,
   onClick: noop$2
@@ -38911,11 +39373,11 @@ const ToneChangerButtonMd = createMetadata({
   props: {
     lightToDarkIcon: {
       description: `The icon displayed when the theme is in light mode and will switch to dark. You can change the default icon for all ${COMP$l} instances with the "icon.lightToDark:ToneChangerButton" declaration in the app configuration file.`,
-      defaultValue: defaultProps$a.lightToDarkIcon
+      defaultValue: defaultProps$9.lightToDarkIcon
     },
     darkToLightIcon: {
       description: `The icon displayed when the theme is in dark mode and will switch to light. You can change the default icon for all ${COMP$l} instances with the "icon.darkToLight:ToneChangerButton" declaration in the app configuration file.`,
-      defaultValue: defaultProps$a.darkToLightIcon
+      defaultValue: defaultProps$9.darkToLightIcon
     }
   },
   events: {
@@ -38923,9 +39385,9 @@ const ToneChangerButtonMd = createMetadata({
   }
 });
 function ToneChangerButton({
-  lightToDarkIcon = defaultProps$a.lightToDarkIcon,
-  darkToLightIcon = defaultProps$a.darkToLightIcon,
-  onClick = defaultProps$a.onClick
+  lightToDarkIcon = defaultProps$9.lightToDarkIcon,
+  darkToLightIcon = defaultProps$9.darkToLightIcon,
+  onClick = defaultProps$9.onClick
 }) {
   const { activeThemeTone, setActiveThemeTone } = useThemes();
   const iconName = activeThemeTone === "light" ? lightToDarkIcon : darkToLightIcon;
@@ -39057,7 +39519,7 @@ const toneSwitchComponentRenderer = createComponentRenderer(
     );
   }
 );
-const defaultProps$9 = {
+const defaultProps$8 = {
   method: "get"
 };
 function APICallNative({ registerComponentApi, node, uid }) {
@@ -39100,7 +39562,7 @@ const APICallMd = createMetadata({
       description: "The method of data manipulation can be done via setting this property.",
       valueType: "string",
       availableValues: httpMethodNames,
-      defaultValue: defaultProps$9.method
+      defaultValue: defaultProps$8.method
     },
     url: {
       description: "Use this property to set the URL to which data will be sent. If not provided, an empty URL is used.",
@@ -41811,7 +42273,7 @@ const inspectButtonComponentRenderer = createComponentRenderer(
     return /* @__PURE__ */ jsx(InspectButton, { className, children: renderChild2(node.children) });
   }
 );
-const defaultProps$8 = {
+const defaultProps$7 = {
   allowPlaygroundPopup: true,
   withFrame: true,
   components: EMPTY_ARRAY
@@ -41830,7 +42292,7 @@ const NestedAppMd = createMetadata({
     },
     components: {
       description: "This property defines an optional list of components to be used with the nested app.",
-      defaultValue: defaultProps$8.components
+      defaultValue: defaultProps$7.components
     },
     config: {
       description: "You can define the nested app's configuration with this property."
@@ -41929,7 +42391,7 @@ It supports both side-by-side and stacked layouts.`,
     },
     components: {
       description: "This property defines an optional list of components to be used with the nested app.",
-      defaultValue: defaultProps$8.components
+      defaultValue: defaultProps$7.components
     },
     config: {
       description: "You can define the nested app's configuration with this property."
@@ -41949,12 +42411,12 @@ It supports both side-by-side and stacked layouts.`,
     allowPlaygroundPopup: {
       description: "This property defines whether the nested app can be opened in the xmlui playground.",
       valueType: "boolean",
-      defaultValue: defaultProps$8.allowPlaygroundPopup
+      defaultValue: defaultProps$7.allowPlaygroundPopup
     },
     withFrame: {
       description: "This property defines whether the nested app should be displayed with a frame.",
       valueType: "boolean",
-      defaultValue: defaultProps$8.withFrame
+      defaultValue: defaultProps$7.withFrame
     }
   },
   themeVars: parseScssVar(styles$a.themeVars),
@@ -42151,7 +42613,7 @@ const TooltipContent = forwardRef(function({ active: active2, payload, indicator
   return null;
 });
 TooltipContent.displayName = "TooltipContent";
-const defaultProps$7 = {
+const defaultProps$6 = {
   hideTickX: false,
   hideTickY: false,
   hideX: false,
@@ -42167,18 +42629,18 @@ function AreaChart({
   data = [],
   nameKey,
   dataKeys = [],
-  hideTickX = defaultProps$7.hideTickX,
-  hideTickY = defaultProps$7.hideTickY,
-  hideY = defaultProps$7.hideY,
-  hideX = defaultProps$7.hideX,
-  hideTooltip = defaultProps$7.hideTooltip,
-  tickFormatterX = defaultProps$7.tickFormatterX,
-  tickFormatterY = defaultProps$7.tickFormatterY,
+  hideTickX = defaultProps$6.hideTickX,
+  hideTickY = defaultProps$6.hideTickY,
+  hideY = defaultProps$6.hideY,
+  hideX = defaultProps$6.hideX,
+  hideTooltip = defaultProps$6.hideTooltip,
+  tickFormatterX = defaultProps$6.tickFormatterX,
+  tickFormatterY = defaultProps$6.tickFormatterY,
   className,
   children,
-  showLegend = defaultProps$7.showLegend,
-  stacked = defaultProps$7.stacked,
-  curved = defaultProps$7.curved,
+  showLegend = defaultProps$6.showLegend,
+  stacked = defaultProps$6.stacked,
+  curved = defaultProps$6.curved,
   tooltipRenderer
 }) {
   const validData = Array.isArray(data) ? data : [];
@@ -42299,42 +42761,42 @@ const AreaChartMd = createMetadata({
     hideX: {
       description: "Determines whether the X-axis should be hidden. If set to `true`, the axis will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$7.hideX
+      defaultValue: defaultProps$6.hideX
     },
     hideY: {
       description: "Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$7.hideY
+      defaultValue: defaultProps$6.hideY
     },
     hideTickX: {
       description: "Determines whether the X-axis tick labels should be hidden. If set to `true`, the tick labels will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$7.hideTickX
+      defaultValue: defaultProps$6.hideTickX
     },
     hideTickY: {
       description: "Determines whether the Y-axis tick labels should be hidden. If set to `true`, the tick labels will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$7.hideTickY
+      defaultValue: defaultProps$6.hideTickY
     },
     hideTooltip: {
       description: "Determines whether the tooltip should be hidden. If set to `true`, the tooltip will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$7.hideTooltip
+      defaultValue: defaultProps$6.hideTooltip
     },
     showLegend: {
       description: "Determines whether the legend should be shown. If set to `true`, the legend will be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$7.showLegend
+      defaultValue: defaultProps$6.showLegend
     },
     stacked: {
       description: "Determines whether multiple areas should be stacked on top of each other. If set to `true`, areas will be stacked.",
       valueType: "boolean",
-      defaultValue: defaultProps$7.stacked
+      defaultValue: defaultProps$6.stacked
     },
     curved: {
       description: "Determines whether the area lines should be curved (smooth) or straight. If set to `true`, lines will be curved.",
       valueType: "boolean",
-      defaultValue: defaultProps$7.curved
+      defaultValue: defaultProps$6.curved
     },
     tooltipTemplate: {
       description: "This property allows replacing the default template to display a tooltip."
@@ -42394,7 +42856,7 @@ const wrapper$2 = "_wrapper_il6v1_14";
 const styles$8 = {
   wrapper: wrapper$2
 };
-const defaultProps$6 = {
+const defaultProps$5 = {
   layout: "vertical",
   stacked: false,
   hideTickX: false,
@@ -42412,21 +42874,21 @@ const defaultChartParams$1 = {
 };
 function BarChart({
   data = [],
-  layout = defaultProps$6.layout,
+  layout = defaultProps$5.layout,
   nameKey,
-  stacked = defaultProps$6.stacked,
+  stacked = defaultProps$5.stacked,
   dataKeys = [],
-  hideTickX = defaultProps$6.hideTickX,
-  hideTickY = defaultProps$6.hideTickY,
-  hideY = defaultProps$6.hideY,
-  hideX = defaultProps$6.hideX,
-  hideTooltip = defaultProps$6.hideTooltip,
-  tickFormatterX = defaultProps$6.tickFormatterX,
-  tickFormatterY = defaultProps$6.tickFormatterY,
+  hideTickX = defaultProps$5.hideTickX,
+  hideTickY = defaultProps$5.hideTickY,
+  hideY = defaultProps$5.hideY,
+  hideX = defaultProps$5.hideX,
+  hideTooltip = defaultProps$5.hideTooltip,
+  tickFormatterX = defaultProps$5.tickFormatterX,
+  tickFormatterY = defaultProps$5.tickFormatterY,
   style: style2,
   className,
   children,
-  showLegend = defaultProps$6.showLegend,
+  showLegend = defaultProps$5.showLegend,
   tooltipRenderer
 }) {
   const validData = useMemo(() => Array.isArray(data) ? data : [], [data]);
@@ -42760,13 +43222,13 @@ const BarChartMd = createMetadata({
     stacked: {
       description: `This property determines how the bars are laid out.If set to \`true\`, bars with the same category will be stacked on top of each other rather than placed side by side.`,
       valueType: "boolean",
-      defaultValue: defaultProps$6.stacked
+      defaultValue: defaultProps$5.stacked
     },
     orientation: {
       description: `This property determines the orientation of the bar chart. The \`vertical\` variant specifies the horizontal axis as the primary and lays out the bars from left to right. The \`horizontal\` variant specifies the vertical axis as the primary and has the bars spread from top to bottom.`,
       valueType: "string",
       availableValues: ["horizontal", "vertical"],
-      defaultValue: defaultProps$6.layout
+      defaultValue: defaultProps$5.layout
     },
     xKey: {
       description: `This property specifies the keys in the data objects that should be used for rendering the bars.E.g. 'id' or 'key'.`,
@@ -42775,40 +43237,40 @@ const BarChartMd = createMetadata({
     hideX: {
       description: "Determines whether the X-axis should be hidden. If set to `true`, the axis will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$6.hideX
+      defaultValue: defaultProps$5.hideX
     },
     hideY: {
       description: "Determines whether the Y-axis should be hidden. If set to `true`, the axis will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$6.hideY
+      defaultValue: defaultProps$5.hideY
     },
     hideTickX: {
       description: "Controls the visibility of the X-axis ticks. If set to `true`, tick labels on the X-axis will be hidden.",
       valueType: "boolean",
-      defaultValue: defaultProps$6.hideTickX
+      defaultValue: defaultProps$5.hideTickX
     },
     hideTickY: {
       description: "Controls the visibility of the Y-axis ticks. If set to `true`, tick labels on the Y-axis will be hidden.",
       valueType: "boolean",
-      defaultValue: defaultProps$6.hideTickY
+      defaultValue: defaultProps$5.hideTickY
     },
     tickFormatterX: {
       description: "A function that formats the tick labels on the X-axis. ",
-      defaultValue: JSON.stringify(defaultProps$6.tickFormatterX)
+      defaultValue: JSON.stringify(defaultProps$5.tickFormatterX)
     },
     tickFormatterY: {
       description: "A function that formats the tick labels on the Y-axis. ",
-      defaultValue: JSON.stringify(defaultProps$6.tickFormatterY)
+      defaultValue: JSON.stringify(defaultProps$5.tickFormatterY)
     },
     hideTooltip: {
       description: "Determines whether the tooltip should be hidden. If set to `true`, tooltips will not appear on hover.",
       valueType: "boolean",
-      defaultValue: defaultProps$6.hideTooltip
+      defaultValue: defaultProps$5.hideTooltip
     },
     showLegend: {
       description: "Determines whether the legend should be displayed.",
       valueType: "boolean",
-      defaultValue: defaultProps$6.showLegend
+      defaultValue: defaultProps$5.showLegend
     },
     tooltipTemplate: {
       description: "This property allows replacing the default template to display a tooltip."
@@ -42861,7 +43323,7 @@ const styles$7 = {
   themeVars: themeVars$2,
   wrapper: wrapper$1
 };
-const defaultProps$5 = {
+const defaultProps$4 = {
   showLabel: true,
   showLabelList: false,
   showLegend: false,
@@ -42932,14 +43394,14 @@ function PieChart({
   nameKey,
   style: style2,
   className,
-  showLabel = defaultProps$5.showLabel,
-  showLabelList = defaultProps$5.showLabelList,
-  labelListPosition = defaultProps$5.labelListPosition,
-  innerRadius = defaultProps$5.innerRadius,
+  showLabel = defaultProps$4.showLabel,
+  showLabelList = defaultProps$4.showLabelList,
+  labelListPosition = defaultProps$4.labelListPosition,
+  innerRadius = defaultProps$4.innerRadius,
   children,
   outerRadius,
   // no default; we'll compute when undefined or "auto"
-  showLegend = defaultProps$5.showLegend
+  showLegend = defaultProps$4.showLegend
 }) {
   const { getThemeVar } = useTheme();
   const colorValues = useMemo(() => {
@@ -43061,7 +43523,7 @@ function PieChart({
 }
 const COMP$8 = "DonutChart";
 const defaultPropsDonut = {
-  ...defaultProps$5,
+  ...defaultProps$4,
   innerRadius: 60
 };
 const DonutChartMd = createMetadata({
@@ -43144,10 +43606,10 @@ const styles$6 = {
   themeVars: themeVars$1,
   labelList
 };
-const defaultProps$4 = {
+const defaultProps$3 = {
   position: "inside"
 };
-const LabelList = ({ position = defaultProps$4.position, nameKey: key, style: style2, className }) => {
+const LabelList = ({ position = defaultProps$3.position, nameKey: key, style: style2, className }) => {
   const { nameKey } = useChart();
   const { setLabelList } = useLabelList();
   const content2 = useMemo(
@@ -43205,7 +43667,7 @@ const LabelListMd = createMetadata({
       description: "The position of the label list",
       valueType: "string",
       availableValues: LabelPositionValues,
-      defaultValue: defaultProps$4.position
+      defaultValue: defaultProps$3.position
     }
   },
   themeVars: parseScssVar(styles$6.themeVars),
@@ -43239,13 +43701,13 @@ const horizontalAlignmentValues = [
   "right",
   "center"
 ];
-const defaultProps$3 = {
+const defaultProps$2 = {
   verticalAlign: "bottom",
   align: "center"
 };
 const Legend = ({
-  verticalAlign = defaultProps$3.verticalAlign,
-  align = defaultProps$3.align
+  verticalAlign = defaultProps$2.verticalAlign,
+  align = defaultProps$2.align
 }) => {
   const { setLegend } = useLegend();
   const content2 = useMemo(
@@ -43266,13 +43728,13 @@ const LegendMd = createMetadata({
       description: "The alignment of the legend",
       valueType: "string",
       availableValues: horizontalAlignmentValues,
-      defaultValue: defaultProps$3.align
+      defaultValue: defaultProps$2.align
     },
     verticalAlign: {
       description: "The vertical alignment of the legend",
       valueType: "string",
       availableValues: verticalAlignmentValues,
-      defaultValue: defaultProps$3.verticalAlign
+      defaultValue: defaultProps$2.verticalAlign
     }
   }
 });
@@ -43296,7 +43758,7 @@ const styles$5 = {
   themeVars,
   wrapper
 };
-const defaultProps$2 = {
+const defaultProps$1 = {
   hideTickX: false,
   hideTickY: false,
   hideX: false,
@@ -43315,15 +43777,15 @@ const LineChart = forwardRef(function LineChart2({
   nameKey,
   style: style2,
   className,
-  hideX = defaultProps$2.hideX,
-  hideY = defaultProps$2.hideY,
-  hideTickX = defaultProps$2.hideTickX,
-  hideTickY = defaultProps$2.hideTickY,
-  hideTooltip = defaultProps$2.hideTooltip,
-  tickFormatterX = defaultProps$2.tickFormatterX,
-  tickFormatterY = defaultProps$2.tickFormatterY,
+  hideX = defaultProps$1.hideX,
+  hideY = defaultProps$1.hideY,
+  hideTickX = defaultProps$1.hideTickX,
+  hideTickY = defaultProps$1.hideTickY,
+  hideTooltip = defaultProps$1.hideTooltip,
+  tickFormatterX = defaultProps$1.tickFormatterX,
+  tickFormatterY = defaultProps$1.tickFormatterY,
   children,
-  showLegend = defaultProps$2.showLegend,
+  showLegend = defaultProps$1.showLegend,
   tooltipRenderer
 }, forwardedRef) {
   const { getThemeVar } = useTheme();
@@ -43553,27 +44015,27 @@ const LineChartMd = createMetadata({
     hideX: {
       description: "Determines whether the X-axis should be hidden. If set to (`true`), the axis will not be displayed.",
       valueType: "boolean",
-      defaultValue: defaultProps$2.hideX
+      defaultValue: defaultProps$1.hideX
     },
     hideY: {
       description: "Determines whether the Y-axis should be hidden. If set to (`true`), the axis will not be displayed.",
       valueType: "boolean",
-      defaultValue: defaultProps$2.hideY
+      defaultValue: defaultProps$1.hideY
     },
     hideTickX: {
       description: "Determines whether the X-axis ticks should be hidden. If set to (`true`), the ticks will not be displayed.",
       valueType: "boolean",
-      defaultValue: defaultProps$2.hideTickX
+      defaultValue: defaultProps$1.hideTickX
     },
     hideTickY: {
       description: "Determines whether the Y-axis ticks should be hidden. If set to (`true`), the ticks will not be displayed.",
       valueType: "boolean",
-      defaultValue: defaultProps$2.hideTickY
+      defaultValue: defaultProps$1.hideTickY
     },
     hideTooltip: {
       description: "Determines whether the tooltip should be hidden.If set to (`true`), no tooltip will be shown when hovering over data points.",
       valueType: "boolean",
-      defaultValue: defaultProps$2.hideTooltip
+      defaultValue: defaultProps$1.hideTooltip
     },
     tickFormatterX: {
       description: "A function that formats the X-axis tick labels. It receives a tick value and returns a formatted string."
@@ -43584,7 +44046,7 @@ const LineChartMd = createMetadata({
     showLegend: {
       description: "Determines whether the legend should be displayed.",
       valueType: "boolean",
-      defaultValue: defaultProps$2.showLegend
+      defaultValue: defaultProps$1.showLegend
     },
     tooltipTemplate: {
       description: "This property allows replacing the default template to display a tooltip."
@@ -43661,17 +44123,17 @@ const PieChartMd = createMetadata({
     showLabel: {
       description: "Toggles whether to show labels (`true`) or not (`false`).",
       valueType: "boolean",
-      defaultValue: defaultProps$5.showLabel
+      defaultValue: defaultProps$4.showLabel
     },
     showLabelList: {
       description: "Whether to show labels in a list (`true`) or not (`false`).",
       valueType: "boolean",
-      defaultValue: defaultProps$5.showLabelList
+      defaultValue: defaultProps$4.showLabelList
     },
     labelListPosition: {
       description: "The position of the label list.",
       valueType: "string",
-      defaultValue: defaultProps$5.labelListPosition,
+      defaultValue: defaultProps$4.labelListPosition,
       availableValues: LabelPositionValues
     },
     outerRadius: d(
@@ -43680,7 +44142,7 @@ const PieChartMd = createMetadata({
     showLegend: {
       description: "Toggles whether to show legend (`true`) or not (`false`).",
       valueType: "boolean",
-      defaultValue: defaultProps$5.showLegend
+      defaultValue: defaultProps$4.showLegend
     }
   },
   themeVars: parseScssVar(styles$7.themeVars),
@@ -43709,7 +44171,7 @@ const pieChartComponentRenderer = createComponentRenderer(
     );
   }
 );
-const defaultProps$1 = {
+const defaultProps = {
   hideGrid: false,
   hideAngleAxis: false,
   hideRadiusAxis: false,
@@ -43723,16 +44185,16 @@ function RadarChart({
   data = [],
   nameKey,
   dataKeys = [],
-  hideGrid = defaultProps$1.hideGrid,
-  hideAngleAxis = defaultProps$1.hideAngleAxis,
-  hideRadiusAxis = defaultProps$1.hideRadiusAxis,
-  hideTooltip = defaultProps$1.hideTooltip,
+  hideGrid = defaultProps.hideGrid,
+  hideAngleAxis = defaultProps.hideAngleAxis,
+  hideRadiusAxis = defaultProps.hideRadiusAxis,
+  hideTooltip = defaultProps.hideTooltip,
   className,
   children,
-  showLegend = defaultProps$1.showLegend,
-  filled = defaultProps$1.filled,
-  strokeWidth = defaultProps$1.strokeWidth,
-  fillOpacity = defaultProps$1.fillOpacity,
+  showLegend = defaultProps.showLegend,
+  filled = defaultProps.filled,
+  strokeWidth = defaultProps.strokeWidth,
+  fillOpacity = defaultProps.fillOpacity,
   tooltipRenderer
 }) {
   const validData = Array.isArray(data) ? data : [];
@@ -43855,42 +44317,42 @@ const RadarChartMd = createMetadata({
     hideGrid: {
       description: "Determines whether the polar grid should be hidden. If set to `true`, the grid will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$1.hideGrid
+      defaultValue: defaultProps.hideGrid
     },
     hideAngleAxis: {
       description: "Determines whether the angle axis should be hidden. If set to `true`, the angle axis will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$1.hideAngleAxis
+      defaultValue: defaultProps.hideAngleAxis
     },
     hideRadiusAxis: {
       description: "Determines whether the radius axis should be hidden. If set to `true`, the radius axis will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$1.hideRadiusAxis
+      defaultValue: defaultProps.hideRadiusAxis
     },
     hideTooltip: {
       description: "Determines whether the tooltip should be hidden. If set to `true`, the tooltip will not be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$1.hideTooltip
+      defaultValue: defaultProps.hideTooltip
     },
     showLegend: {
       description: "Determines whether the legend should be shown. If set to `true`, the legend will be rendered.",
       valueType: "boolean",
-      defaultValue: defaultProps$1.showLegend
+      defaultValue: defaultProps.showLegend
     },
     filled: {
       description: "Determines whether the radar areas should be filled. If set to `true`, areas will be filled with color.",
       valueType: "boolean",
-      defaultValue: defaultProps$1.filled
+      defaultValue: defaultProps.filled
     },
     strokeWidth: {
       description: "Sets the stroke width for the radar lines. Higher values create thicker lines.",
       valueType: "number",
-      defaultValue: defaultProps$1.strokeWidth
+      defaultValue: defaultProps.strokeWidth
     },
     fillOpacity: {
       description: "Sets the fill opacity for the radar areas when filled is true. Value between 0 and 1.",
       valueType: "number",
-      defaultValue: defaultProps$1.fillOpacity
+      defaultValue: defaultProps.fillOpacity
     },
     tooltipTemplate: {
       description: "This property allows replacing the default template to display a tooltip."
@@ -44271,7 +44733,7 @@ class ComponentRegistry {
    * about component registrations
    */
   constructor(contributes = {}, extensionManager) {
-    var _a2, _b, _c;
+    var _a2, _b, _c, _d;
     this.extensionManager = extensionManager;
     this.pool = /* @__PURE__ */ new Map();
     this.namePool = /* @__PURE__ */ new Map();
@@ -44279,6 +44741,7 @@ class ComponentRegistry {
     this.defaultThemeVars = {};
     this.actionFns = /* @__PURE__ */ new Map();
     this.loaders = /* @__PURE__ */ new Map();
+    this.behaviors = [];
     this.extensionRegistered = (extension) => {
       var _a3;
       (_a3 = extension.components) == null ? void 0 : _a3.forEach((c) => {
@@ -44767,7 +45230,13 @@ class ComponentRegistry {
     this.registerLoaderRenderer(externalDataLoaderRenderer);
     this.registerLoaderRenderer(mockLoaderRenderer);
     this.registerLoaderRenderer(dataLoaderRenderer);
-    (_c = this.extensionManager) == null ? void 0 : _c.subscribeToRegistrations(this.extensionRegistered);
+    this.registerBehavior(tooltipBehavior);
+    this.registerBehavior(animationBehavior);
+    this.registerBehavior(labelBehavior);
+    (_c = contributes.behaviors) == null ? void 0 : _c.forEach((behavior) => {
+      this.registerBehavior(behavior);
+    });
+    (_d = this.extensionManager) == null ? void 0 : _d.subscribeToRegistrations(this.extensionRegistered);
   }
   /**
    * All theme variables used by the registered components.
@@ -44874,6 +45343,22 @@ class ComponentRegistry {
   registerActionFn({ actionName: functionName, actionFn }) {
     this.actionFns.set(functionName, actionFn);
   }
+  // --- Registers a behavior
+  registerBehavior(behavior, location = "after", position) {
+    if (position) {
+      const targetIndex = this.behaviors.findIndex((b) => b.name === position);
+      if (targetIndex !== -1) {
+        const insertIndex = location === "before" ? targetIndex : targetIndex + 1;
+        this.behaviors.splice(insertIndex, 0, behavior);
+        return;
+      }
+    }
+    this.behaviors.push(behavior);
+  }
+  // --- Returns all registered behaviors
+  getBehaviors() {
+    return this.behaviors;
+  }
 }
 function ComponentProvider({
   children,
@@ -45756,7 +46241,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.20";
+const version = "0.10.22";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -48963,308 +49448,6 @@ function InvalidComponent({ errors = EMPTY_ARRAY, node, children }) {
     children
   ] });
 }
-const AnimatedComponent = animated(
-  forwardRef(function InlineComponentDef(props, ref) {
-    const { children, ...rest } = props;
-    if (!React__default.isValidElement(children)) {
-      return children;
-    }
-    return React__default.cloneElement(children, { ...rest, ref });
-  })
-);
-const defaultProps = {
-  delay: 0,
-  animateWhenInView: false,
-  reverse: false,
-  loop: false,
-  once: false
-};
-const parseAnimation = (animation) => {
-  if (typeof animation === "object") {
-    return animation;
-  }
-  const presetAnimations = {
-    fadein: {
-      from: { opacity: 0 },
-      to: { opacity: 1 }
-    },
-    fadeout: {
-      from: { opacity: 1 },
-      to: { opacity: 0 }
-    },
-    slidein: {
-      from: { transform: "translateX(-100%)" },
-      to: { transform: "translateX(0%)" }
-    },
-    slideout: {
-      from: { transform: "translateX(0%)" },
-      to: { transform: "translateX(100%)" }
-    },
-    popin: {
-      from: { transform: "scale(0.8)", opacity: 0 },
-      to: { transform: "scale(1)", opacity: 1 }
-    },
-    popout: {
-      from: { transform: "scale(1)", opacity: 1 },
-      to: { transform: "scale(0.8)", opacity: 0 }
-    },
-    flipin: {
-      from: { transform: "rotateY(90deg)", opacity: 0 },
-      to: { transform: "rotateY(0deg)", opacity: 1 }
-    },
-    flipout: {
-      from: { transform: "rotateY(0deg)", opacity: 1 },
-      to: { transform: "rotateY(90deg)", opacity: 0 }
-    },
-    rotatein: {
-      from: { transform: "rotate(-180deg)", opacity: 0 },
-      to: { transform: "rotate(0deg)", opacity: 1 }
-    },
-    rotateout: {
-      from: { transform: "rotate(0deg)", opacity: 1 },
-      to: { transform: "rotate(180deg)", opacity: 0 }
-    },
-    zoomin: {
-      from: { transform: "scale(0)", opacity: 0 },
-      to: { transform: "scale(1)", opacity: 1 }
-    },
-    zoomout: {
-      from: { transform: "scale(1)", opacity: 1 },
-      to: { transform: "scale(0)", opacity: 0 }
-    }
-  };
-  return presetAnimations[animation] || { from: {}, to: {} };
-};
-function parseAnimationOptionValue(name, value) {
-  switch (name) {
-    case "duration":
-    case "delay":
-      const num = parseInt(value, 10);
-      return isNaN(num) ? void 0 : num;
-    case "animateWhenInView":
-    case "reverse":
-    case "loop":
-    case "once":
-      const lowerVal = value.toLowerCase();
-      if (lowerVal === "true" || lowerVal === "1" || lowerVal === "yes") return true;
-      if (lowerVal === "false" || lowerVal === "0" || lowerVal === "no") return false;
-      return void 0;
-    default:
-      return void 0;
-  }
-}
-function parseAnimationOptions(input2) {
-  if (isPlainObject(input2)) {
-    return input2;
-  }
-  if (typeof input2 === "string") {
-    const options2 = {};
-    const values = input2.split(";").map((value) => value.trim()).filter((value) => value.length > 0);
-    for (const value of values) {
-      if (value.includes(":")) {
-        const [name, val] = value.split(":").map((part) => part.trim());
-        if (name && val) {
-          const parsedValue = parseAnimationOptionValue(name, val);
-          if (parsedValue !== void 0) {
-            options2[name] = parsedValue;
-          }
-        }
-      } else {
-        const booleanOptions = ["animateWhenInView", "reverse", "loop", "once"];
-        if (booleanOptions.includes(value)) {
-          options2[value] = true;
-        } else if (value.startsWith("!") && value.length > 1) {
-          const optionName = value.substring(1);
-          if (booleanOptions.includes(optionName)) {
-            options2[optionName] = false;
-          }
-        }
-      }
-    }
-    return options2;
-  }
-  return {};
-}
-const Animation$1 = forwardRef(function Animation2({
-  children,
-  registerComponentApi,
-  animation,
-  duration,
-  onStop,
-  onStart,
-  delay: delay2 = defaultProps.delay,
-  animateWhenInView = defaultProps.animateWhenInView,
-  reverse: reverse2 = defaultProps.reverse,
-  loop = defaultProps.loop,
-  once = defaultProps.once,
-  ...rest
-}, forwardedRef) {
-  const [_animation] = useState(animation);
-  const [toggle, setToggle] = useState(false);
-  const [reset, setReset] = useState(false);
-  const [count, setCount] = useState(0);
-  const times = 1;
-  useId();
-  const animationSettings = useMemo(
-    () => ({
-      from: _animation.from,
-      to: _animation.to,
-      config: {
-        ..._animation.config,
-        duration
-      },
-      delay: delay2,
-      loop,
-      reset,
-      reverse: toggle,
-      onRest: () => {
-        onStop == null ? void 0 : onStop();
-        if (loop) {
-          if (reverse2) {
-            setCount(count + 1);
-            setToggle(!toggle);
-          }
-          setReset(true);
-        } else {
-          if (reverse2 && count < times) {
-            setCount(count + 1);
-            setToggle(!toggle);
-          }
-        }
-      },
-      onStart: () => {
-        onStart == null ? void 0 : onStart();
-      }
-    }),
-    [
-      _animation.config,
-      _animation.from,
-      _animation.to,
-      count,
-      delay2,
-      duration,
-      loop,
-      onStart,
-      onStop,
-      reset,
-      once,
-      reverse2,
-      toggle
-    ]
-  );
-  const [springs, api] = useSpring(
-    () => ({
-      ...animationSettings
-    }),
-    [animationSettings]
-  );
-  const [ref, animationStyles] = useInView(() => animationSettings, {
-    once
-  });
-  const composedRef = ref ? composeRefs(ref, forwardedRef) : forwardedRef;
-  const startAnimation = useCallback(() => {
-    void api.start(_animation);
-    return () => {
-      api.stop();
-    };
-  }, [_animation, api]);
-  const stopAnimation = useCallback(() => {
-    api.stop();
-  }, [api]);
-  useEffect(() => {
-    registerComponentApi == null ? void 0 : registerComponentApi({
-      start: startAnimation,
-      stop: stopAnimation
-    });
-  }, [registerComponentApi, startAnimation, stopAnimation]);
-  const content2 = useMemo(() => {
-    return Children.map(
-      children,
-      (child, index) => animateWhenInView ? /* @__PURE__ */ jsx(AnimatedComponent, { ...rest, style: animationStyles, ref: composedRef, children: child }, index) : /* @__PURE__ */ jsx(AnimatedComponent, { ...rest, style: springs, ref: forwardedRef, children: child }, index)
-    );
-  }, [animateWhenInView, animationStyles, children, springs, rest, composedRef, forwardedRef]);
-  return content2;
-});
-const tooltipBehavior = {
-  name: "tooltip",
-  canAttach: (node) => {
-    var _a2, _b;
-    const tooltipText = (_a2 = node.props) == null ? void 0 : _a2.tooltip;
-    const tooltipMarkdown = (_b = node.props) == null ? void 0 : _b.tooltipMarkdown;
-    return !!tooltipText || !!tooltipMarkdown;
-  },
-  attach: (context, node) => {
-    var _a2, _b, _c;
-    const { extractValue } = context;
-    const tooltipText = extractValue((_a2 = context.node.props) == null ? void 0 : _a2.tooltip, true);
-    const tooltipMarkdown = extractValue((_b = context.node.props) == null ? void 0 : _b.tooltipMarkdown, true);
-    const tooltipOptions = extractValue((_c = context.node.props) == null ? void 0 : _c.tooltipOptions, true);
-    const parsedOptions = parseTooltipOptions(tooltipOptions);
-    return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, markdown: tooltipMarkdown, ...parsedOptions, children: node });
-  }
-};
-const animationBehavior = {
-  name: "animation",
-  canAttach: (node) => {
-    var _a2;
-    return !!((_a2 = node.props) == null ? void 0 : _a2.animation);
-  },
-  attach: (context, node) => {
-    var _a2, _b;
-    const { extractValue } = context;
-    const animation = extractValue((_a2 = context.node.props) == null ? void 0 : _a2.animation, true);
-    const animationOptions = extractValue((_b = context.node.props) == null ? void 0 : _b.animationOptions, true);
-    const parsedOptions = parseAnimationOptions(animationOptions);
-    return /* @__PURE__ */ jsx(Animation$1, { animation: parseAnimation(animation), ...parsedOptions, children: context.node.type === "ModalDialog" ? cloneElement(node, {
-      externalAnimation: true
-    }) : node });
-  }
-};
-const labelBehavior = {
-  name: "label",
-  canAttach: (node, metadata) => {
-    var _a2, _b;
-    if ((_a2 = metadata == null ? void 0 : metadata.props) == null ? void 0 : _a2.label) {
-      return false;
-    } else if (!((_b = node.props) == null ? void 0 : _b.label)) {
-      return false;
-    }
-    return true;
-  },
-  attach: (context, node) => {
-    var _a2;
-    const { extractValue, node: componentNode, className } = context;
-    const label2 = extractValue.asOptionalString(componentNode.props.label);
-    const labelPosition = extractValue(componentNode.props.labelPosition);
-    const labelWidth = extractValue.asOptionalString(componentNode.props.labelWidth);
-    const labelBreak2 = extractValue.asOptionalBoolean(componentNode.props.labelBreak);
-    const required2 = extractValue.asOptionalBoolean(componentNode.props.required);
-    const enabled2 = extractValue.asOptionalBoolean(componentNode.props.enabled, true);
-    const shrinkToLabel2 = extractValue.asOptionalBoolean(componentNode.props.shrinkToLabel);
-    const style2 = extractValue(componentNode.props.style);
-    const readOnly2 = extractValue.asOptionalBoolean(componentNode.props.readOnly);
-    return /* @__PURE__ */ jsx(
-      ItemWithLabel,
-      {
-        labelPosition,
-        label: label2,
-        labelWidth,
-        labelBreak: labelBreak2,
-        required: required2,
-        enabled: enabled2,
-        style: style2,
-        className,
-        shrinkToLabel: shrinkToLabel2,
-        labelStyle: { pointerEvents: readOnly2 ? "none" : void 0 },
-        isInputTemplateUsed: !!((_a2 = componentNode.props) == null ? void 0 : _a2.inputTemplate),
-        children: node
-      }
-    );
-  }
-};
-const getCoreBehaviors = () => {
-  return [tooltipBehavior, animationBehavior, labelBehavior];
-};
 const ComponentAdapter = forwardRef(function ComponentAdapter2({
   node,
   state,
@@ -49423,7 +49606,7 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
       }
       renderedNode = renderer(rendererContext);
     }
-    const behaviors = getCoreBehaviors();
+    const behaviors = componentRegistry.getBehaviors();
     if (!isCompoundComponent) {
       for (const behavior of behaviors) {
         if (behavior.canAttach(rendererContext.node, descriptor)) {