xmlui 0.10.13 → 0.10.15

package/dist/lib/{index-Db5iQkFp.mjs → index-axjeT2uJ.mjs}

@@ -7,9 +7,9 @@ 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, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
+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 { formatDistanceToNow, parse, format, parseISO, isValid, isToday, isYesterday, isTomorrow, isThisWeek, formatRelative, isThisYear, isSameDay, differenceInMinutes } from "date-fns";
-import { l as labelPositionMd, v as validationStatusMd, o as orientationOptionMd, 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-D90qqMGc.mjs";
+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-CtY0QcvH.mjs";
 import classnames from "classnames";
 import Color from "color";
 import * as ReactDropdownMenu from "@radix-ui/react-dropdown-menu";
@@ -238,6 +238,26 @@ function createLoaderRenderer(type, renderer, hints) {
     hints
   };
 }
+function createUserDefinedComponentRenderer(metadata, def, codeBehind) {
+  const component2 = def.component.component;
+  if (codeBehind) {
+    if (codeBehind.vars) {
+      component2.vars ?? (component2.vars = {});
+      component2.vars = { ...component2.vars, ...codeBehind.vars };
+    }
+    if (codeBehind.functions) {
+      component2.functions ?? (component2.functions = {});
+      component2.functions = {
+        ...component2.functions,
+        ...codeBehind.functions
+      };
+    }
+  }
+  return {
+    compoundComponentDef: def.component,
+    metadata
+  };
+}
 let lastIdValue = 1;
 function generatedId() {
   return `$qid_${lastIdValue++}`;
@@ -844,6 +864,7 @@ const defaultProps$1f = {
 const numberRegex = /^[0-9]+$/;
 const ItemWithLabel = forwardRef(function ItemWithLabel2({
   id,
+  testId,
   labelPosition = "top",
   style: style2 = {},
   className,
@@ -882,7 +903,7 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { ...rest, ref, style: style2, className: classnames(className, styles$1k.itemWithLabel), children: [
+  return /* @__PURE__ */ jsxs("div", { ...rest, "data-testid": testId, ref, style: style2, className: classnames(className, styles$1k.itemWithLabel), children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -926,7 +947,7 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
               ]
             }
           ),
-          /* @__PURE__ */ jsx(Slot, { "data-part-id": PART_LABELED_ITEM, id: !isInputTemplateUsed ? inputId : void 0, children })
+          /* @__PURE__ */ jsx(Slot, { "data-part-id": PART_LABELED_ITEM, id: !isInputTemplateUsed ? inputId : void 0, "data-testid": void 0, children })
         ]
       }
     ),
@@ -1037,6 +1058,11 @@ function dValidationStatus(value) {
     defaultValue: value ?? "none"
   };
 }
+function dValueApi() {
+  return {
+    description: `You can query this read-only API property to query the component's current value (\`true\`: checked, \`false\`: unchecked).`
+  };
+}
 function dSetValueApi() {
   return {
     description: `You can use this method to set the component's current value programmatically (\`true\`: checked, \`false\`: unchecked).`
@@ -1091,11 +1117,41 @@ function dEndIcon() {
     valueType: "string"
   };
 }
+function dExpanded(comp) {
+  return {
+    description: `This property indicates if the ${comp} is expanded (\`true\`) or collapsed (\`false\`).`
+  };
+}
+function dExpand(comp) {
+  return {
+    description: `This method expands the ${comp}.`
+  };
+}
+function dCollapse(comp) {
+  return {
+    description: `This method collapses the ${comp}.`
+  };
+}
 function dFocus(comp) {
   return {
     description: `This method sets the focus on the ${comp}.`
   };
 }
+function dValue() {
+  return {
+    description: `You can query the component's value. If no value is set, it will retrieve \`undefined\`.`
+  };
+}
+function dDidOpen(comp) {
+  return {
+    description: `This event is triggered when the ${comp} has been displayed. The event handler has a single boolean argument set to \`true\`, indicating that the user opened the component.`
+  };
+}
+function dDidClose(comp) {
+  return {
+    description: `This event is triggered when the ${comp} has been closed. The event handler has a single boolean argument set to \`true\`, indicating that the user closed the component.`
+  };
+}
 function dTriggerTemplate(comp) {
   return {
     description: `This property allows you to define a custom trigger instead of the default one provided by \`${comp}\`.`,
@@ -1432,7 +1488,7 @@ const Stack = forwardRef(function Stack2({
     }
   );
 });
-const COMP$1x = "Stack";
+const COMP$1w = "Stack";
 const HORIZONTAL_ALIGNMENT = {
   description: "Manages the horizontal content alignment for each child element in the Stack.",
   availableValues: alignmentOptionValues,
@@ -1482,7 +1538,7 @@ const stackMd = createMetadata({
     }
   },
   events: {
-    click: dClick(COMP$1x),
+    click: dClick(COMP$1w),
     mounted: dInternal("Reserved for future use")
   },
   themeVars: parseScssVar(styles$1l.themeVars)
@@ -1495,7 +1551,7 @@ const StackMd = {
 };
 const VStackMd = {
   ...StackMd,
-  specializedFrom: COMP$1x,
+  specializedFrom: COMP$1w,
   description: `This component represents a stack rendering its contents vertically.`,
   props: {
     ...stackMd.props
@@ -1503,7 +1559,7 @@ const VStackMd = {
 };
 const HStackMd = {
   ...StackMd,
-  specializedFrom: COMP$1x,
+  specializedFrom: COMP$1w,
   description: `This component represents a stack rendering its contents horizontally.`,
   props: {
     ...stackMd.props
@@ -1511,12 +1567,12 @@ const HStackMd = {
 };
 const CVStackMd = {
   ...StackMd,
-  specializedFrom: COMP$1x,
+  specializedFrom: COMP$1w,
   description: `This component represents a stack that renders its contents vertically and aligns that in the center along both axes.`
 };
 const CHStackMd = {
   ...StackMd,
-  specializedFrom: COMP$1x,
+  specializedFrom: COMP$1w,
   description: `This component represents a stack that renders its contents horizontally and aligns that in the center along both axes.`
 };
 function renderStack({
@@ -1552,7 +1608,7 @@ function renderStack({
   );
 }
 const stackComponentRenderer = createComponentRenderer(
-  COMP$1x,
+  COMP$1w,
   StackMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
     var _a2, _b, _c;
@@ -3403,16 +3459,18 @@ const MenuItem = forwardRef(function MenuItem2({
     }
   );
 });
-function SubMenuItem({ children, label: label2, triggerTemplate }) {
-  const { root: root2 } = useTheme();
-  return /* @__PURE__ */ jsxs(ReactDropdownMenu.Sub, { children: [
-    /* @__PURE__ */ jsx(ReactDropdownMenu.SubTrigger, { className: styles$1h.DropdownMenuSubTrigger, asChild: true, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 }) }),
-    /* @__PURE__ */ jsx(ReactDropdownMenu.Portal, { container: root2, children: /* @__PURE__ */ jsx(ReactDropdownMenu.SubContent, { className: styles$1h.DropdownMenuSubContent, children }) })
-  ] });
-}
-function MenuSeparator() {
-  return /* @__PURE__ */ jsx(ReactDropdownMenu.Separator, { className: styles$1h.DropdownMenuSeparator });
-}
+const SubMenuItem = forwardRef(
+  function SubMenuItem2({ children, label: label2, triggerTemplate }, ref) {
+    const { root: root2 } = useTheme();
+    return /* @__PURE__ */ jsxs(ReactDropdownMenu.Sub, { children: [
+      /* @__PURE__ */ jsx(ReactDropdownMenu.SubTrigger, { className: styles$1h.DropdownMenuSubTrigger, asChild: true, ref, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 }) }),
+      /* @__PURE__ */ jsx(ReactDropdownMenu.Portal, { container: root2, children: /* @__PURE__ */ jsx(ReactDropdownMenu.SubContent, { className: styles$1h.DropdownMenuSubContent, children }) })
+    ] });
+  }
+);
+const MenuSeparator = forwardRef(function MenuSeparator2(props, ref) {
+  return /* @__PURE__ */ jsx(ReactDropdownMenu.Separator, { ref, className: styles$1h.DropdownMenuSeparator, ...props });
+});
 const ResponsiveBarDropdown = ({
   overflowIcon,
   children,
@@ -3709,11 +3767,11 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
     }
   );
 });
-const COMP$1w = "ResponsiveBar";
+const COMP$1v = "ResponsiveBar";
 const ResponsiveBarMd = createMetadata({
   status: "stable",
   description: "`ResponsiveBar` is a layout container that automatically manages child component overflow by moving items that don't fit into a dropdown menu. It supports both horizontal and vertical orientations and provides a space-efficient way to display navigation items, toolbar buttons, or other components that need to adapt to varying container dimensions while maintaining full functionality.",
-  docFolder: COMP$1w,
+  docFolder: COMP$1v,
   props: {
     orientation: {
       description: "Layout direction of the responsive bar. In horizontal mode, items are arranged left-to-right and overflow is based on container width. In vertical mode, items are arranged top-to-bottom and overflow is based on container height.",
@@ -3733,20 +3791,20 @@ const ResponsiveBarMd = createMetadata({
     }
   },
   events: {
-    click: dClick(COMP$1w)
+    click: dClick(COMP$1v)
   },
   apis: {},
   contextVars: {},
   themeVars: parseScssVar(styles$1i.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`backgroundColor-${COMP$1w}`]: "transparent",
-    [`padding-${COMP$1w}`]: "0",
-    [`margin-${COMP$1w}`]: "0"
+    [`backgroundColor-${COMP$1v}`]: "transparent",
+    [`padding-${COMP$1v}`]: "0",
+    [`margin-${COMP$1v}`]: "0"
   }
 });
 const responsiveBarComponentRenderer = createComponentRenderer(
-  COMP$1w,
+  COMP$1v,
   ResponsiveBarMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
     var _a2, _b, _c;
@@ -3770,13 +3828,13 @@ const styles$1e = {
   spacer
 };
 const SpaceFiller = () => /* @__PURE__ */ jsx("div", { className: styles$1e.spacer });
-const COMP$1v = "SpaceFiller";
+const COMP$1u = "SpaceFiller";
 const SpaceFillerMd = createMetadata({
   status: "stable",
   description: "`SpaceFiller` works well in layout containers to fill remaining (unused) space. Its behavior depends on the layout container in which it is used.",
   themeVars: parseScssVar(styles$1e.themeVars)
 });
-const spaceFillerComponentRenderer = createComponentRenderer(COMP$1v, SpaceFillerMd, () => /* @__PURE__ */ jsx(SpaceFiller, {}));
+const spaceFillerComponentRenderer = createComponentRenderer(COMP$1u, SpaceFillerMd, () => /* @__PURE__ */ jsx(SpaceFiller, {}));
 const themeVars$U = `'{"padding-TextArea": "var(--xmlui-padding-TextArea)", "paddingHorizontal-TextArea": "var(--xmlui-paddingHorizontal-TextArea, var(--xmlui-padding-TextArea))", "paddingVertical-TextArea": "var(--xmlui-paddingVertical-TextArea, var(--xmlui-padding-TextArea))", "paddingLeft-TextArea": "var(--xmlui-paddingLeft-TextArea, var(--xmlui-paddingHorizontal-TextArea, var(--xmlui-padding-TextArea)))", "paddingRight-TextArea": "var(--xmlui-paddingRight-TextArea, var(--xmlui-paddingHorizontal-TextArea, var(--xmlui-padding-TextArea)))", "paddingTop-TextArea": "var(--xmlui-paddingTop-TextArea, var(--xmlui-paddingVertical-TextArea, var(--xmlui-padding-TextArea)))", "paddingBottom-TextArea": "var(--xmlui-paddingBottom-TextArea, var(--xmlui-paddingVertical-TextArea, var(--xmlui-padding-TextArea)))", "Input:borderRadius-TextArea-default": "var(--xmlui-borderRadius-TextArea-default)", "Input:borderColor-TextArea-default": "var(--xmlui-borderColor-TextArea-default)", "Input:borderWidth-TextArea-default": "var(--xmlui-borderWidth-TextArea-default)", "Input:borderStyle-TextArea-default": "var(--xmlui-borderStyle-TextArea-default)", "Input:fontSize-TextArea-default": "var(--xmlui-fontSize-TextArea-default)", "Input:backgroundColor-TextArea-default": "var(--xmlui-backgroundColor-TextArea-default)", "Input:boxShadow-TextArea-default": "var(--xmlui-boxShadow-TextArea-default)", "Input:textColor-TextArea-default": "var(--xmlui-textColor-TextArea-default)", "Input:borderColor-TextArea-default--hover": "var(--xmlui-borderColor-TextArea-default--hover)", "Input:backgroundColor-TextArea-default--hover": "var(--xmlui-backgroundColor-TextArea-default--hover)", "Input:boxShadow-TextArea-default--hover": "var(--xmlui-boxShadow-TextArea-default--hover)", "Input:textColor-TextArea-default--hover": "var(--xmlui-textColor-TextArea-default--hover)", "Input:borderColor-TextArea-default--focus": "var(--xmlui-borderColor-TextArea-default--focus)", "Input:backgroundColor-TextArea-default--focus": "var(--xmlui-backgroundColor-TextArea-default--focus)", "Input:boxShadow-TextArea-default--focus": "var(--xmlui-boxShadow-TextArea-default--focus)", "Input:textColor-TextArea-default--focus": "var(--xmlui-textColor-TextArea-default--focus)", "Input:outlineWidth-TextArea-default--focus": "var(--xmlui-outlineWidth-TextArea-default--focus)", "Input:outlineColor-TextArea-default--focus": "var(--xmlui-outlineColor-TextArea-default--focus)", "Input:outlineStyle-TextArea-default--focus": "var(--xmlui-outlineStyle-TextArea-default--focus)", "Input:outlineOffset-TextArea-default--focus": "var(--xmlui-outlineOffset-TextArea-default--focus)", "Input:textColor-placeholder-TextArea-default": "var(--xmlui-textColor-placeholder-TextArea-default)", "Input:fontSize-placeholder-TextArea-default": "var(--xmlui-fontSize-placeholder-TextArea-default)", "Input:borderRadius-TextArea-error": "var(--xmlui-borderRadius-TextArea-error)", "Input:borderColor-TextArea-error": "var(--xmlui-borderColor-TextArea-error)", "Input:borderWidth-TextArea-error": "var(--xmlui-borderWidth-TextArea-error)", "Input:borderStyle-TextArea-error": "var(--xmlui-borderStyle-TextArea-error)", "Input:fontSize-TextArea-error": "var(--xmlui-fontSize-TextArea-error)", "Input:backgroundColor-TextArea-error": "var(--xmlui-backgroundColor-TextArea-error)", "Input:boxShadow-TextArea-error": "var(--xmlui-boxShadow-TextArea-error)", "Input:textColor-TextArea-error": "var(--xmlui-textColor-TextArea-error)", "Input:borderColor-TextArea-error--hover": "var(--xmlui-borderColor-TextArea-error--hover)", "Input:backgroundColor-TextArea-error--hover": "var(--xmlui-backgroundColor-TextArea-error--hover)", "Input:boxShadow-TextArea-error--hover": "var(--xmlui-boxShadow-TextArea-error--hover)", "Input:textColor-TextArea-error--hover": "var(--xmlui-textColor-TextArea-error--hover)", "Input:borderColor-TextArea-error--focus": "var(--xmlui-borderColor-TextArea-error--focus)", "Input:backgroundColor-TextArea-error--focus": "var(--xmlui-backgroundColor-TextArea-error--focus)", "Input:boxShadow-TextArea-error--focus": "var(--xmlui-boxShadow-TextArea-error--focus)", "Input:textColor-TextArea-error--focus": "var(--xmlui-textColor-TextArea-error--focus)", "Input:outlineWidth-TextArea-error--focus": "var(--xmlui-outlineWidth-TextArea-error--focus)", "Input:outlineColor-TextArea-error--focus": "var(--xmlui-outlineColor-TextArea-error--focus)", "Input:outlineStyle-TextArea-error--focus": "var(--xmlui-outlineStyle-TextArea-error--focus)", "Input:outlineOffset-TextArea-error--focus": "var(--xmlui-outlineOffset-TextArea-error--focus)", "Input:textColor-placeholder-TextArea-error": "var(--xmlui-textColor-placeholder-TextArea-error)", "Input:fontSize-placeholder-TextArea-error": "var(--xmlui-fontSize-placeholder-TextArea-error)", "Input:borderRadius-TextArea-warning": "var(--xmlui-borderRadius-TextArea-warning)", "Input:borderColor-TextArea-warning": "var(--xmlui-borderColor-TextArea-warning)", "Input:borderWidth-TextArea-warning": "var(--xmlui-borderWidth-TextArea-warning)", "Input:borderStyle-TextArea-warning": "var(--xmlui-borderStyle-TextArea-warning)", "Input:fontSize-TextArea-warning": "var(--xmlui-fontSize-TextArea-warning)", "Input:backgroundColor-TextArea-warning": "var(--xmlui-backgroundColor-TextArea-warning)", "Input:boxShadow-TextArea-warning": "var(--xmlui-boxShadow-TextArea-warning)", "Input:textColor-TextArea-warning": "var(--xmlui-textColor-TextArea-warning)", "Input:borderColor-TextArea-warning--hover": "var(--xmlui-borderColor-TextArea-warning--hover)", "Input:backgroundColor-TextArea-warning--hover": "var(--xmlui-backgroundColor-TextArea-warning--hover)", "Input:boxShadow-TextArea-warning--hover": "var(--xmlui-boxShadow-TextArea-warning--hover)", "Input:textColor-TextArea-warning--hover": "var(--xmlui-textColor-TextArea-warning--hover)", "Input:borderColor-TextArea-warning--focus": "var(--xmlui-borderColor-TextArea-warning--focus)", "Input:backgroundColor-TextArea-warning--focus": "var(--xmlui-backgroundColor-TextArea-warning--focus)", "Input:boxShadow-TextArea-warning--focus": "var(--xmlui-boxShadow-TextArea-warning--focus)", "Input:textColor-TextArea-warning--focus": "var(--xmlui-textColor-TextArea-warning--focus)", "Input:outlineWidth-TextArea-warning--focus": "var(--xmlui-outlineWidth-TextArea-warning--focus)", "Input:outlineColor-TextArea-warning--focus": "var(--xmlui-outlineColor-TextArea-warning--focus)", "Input:outlineStyle-TextArea-warning--focus": "var(--xmlui-outlineStyle-TextArea-warning--focus)", "Input:outlineOffset-TextArea-warning--focus": "var(--xmlui-outlineOffset-TextArea-warning--focus)", "Input:textColor-placeholder-TextArea-warning": "var(--xmlui-textColor-placeholder-TextArea-warning)", "Input:fontSize-placeholder-TextArea-warning": "var(--xmlui-fontSize-placeholder-TextArea-warning)", "Input:borderRadius-TextArea-success": "var(--xmlui-borderRadius-TextArea-success)", "Input:borderColor-TextArea-success": "var(--xmlui-borderColor-TextArea-success)", "Input:borderWidth-TextArea-success": "var(--xmlui-borderWidth-TextArea-success)", "Input:borderStyle-TextArea-success": "var(--xmlui-borderStyle-TextArea-success)", "Input:fontSize-TextArea-success": "var(--xmlui-fontSize-TextArea-success)", "Input:backgroundColor-TextArea-success": "var(--xmlui-backgroundColor-TextArea-success)", "Input:boxShadow-TextArea-success": "var(--xmlui-boxShadow-TextArea-success)", "Input:textColor-TextArea-success": "var(--xmlui-textColor-TextArea-success)", "Input:borderColor-TextArea-success--hover": "var(--xmlui-borderColor-TextArea-success--hover)", "Input:backgroundColor-TextArea-success--hover": "var(--xmlui-backgroundColor-TextArea-success--hover)", "Input:boxShadow-TextArea-success--hover": "var(--xmlui-boxShadow-TextArea-success--hover)", "Input:textColor-TextArea-success--hover": "var(--xmlui-textColor-TextArea-success--hover)", "Input:borderColor-TextArea-success--focus": "var(--xmlui-borderColor-TextArea-success--focus)", "Input:backgroundColor-TextArea-success--focus": "var(--xmlui-backgroundColor-TextArea-success--focus)", "Input:boxShadow-TextArea-success--focus": "var(--xmlui-boxShadow-TextArea-success--focus)", "Input:textColor-TextArea-success--focus": "var(--xmlui-textColor-TextArea-success--focus)", "Input:outlineWidth-TextArea-success--focus": "var(--xmlui-outlineWidth-TextArea-success--focus)", "Input:outlineColor-TextArea-success--focus": "var(--xmlui-outlineColor-TextArea-success--focus)", "Input:outlineStyle-TextArea-success--focus": "var(--xmlui-outlineStyle-TextArea-success--focus)", "Input:outlineOffset-TextArea-success--focus": "var(--xmlui-outlineOffset-TextArea-success--focus)", "Input:textColor-placeholder-TextArea-success": "var(--xmlui-textColor-placeholder-TextArea-success)", "Input:fontSize-placeholder-TextArea-success": "var(--xmlui-fontSize-placeholder-TextArea-success)", "Input:backgroundColor-TextArea--disabled": "var(--xmlui-backgroundColor-TextArea--disabled)", "Input:textColor-TextArea--disabled": "var(--xmlui-textColor-TextArea--disabled)", "Input:borderColor-TextArea--disabled": "var(--xmlui-borderColor-TextArea--disabled)"}'`;
 const textarea = "_textarea_9c161_14";
 const error$d = "_error_9c161_59";
@@ -4115,7 +4173,7 @@ const TextArea = forwardRef(function TextArea2({
     }
   );
 });
-const COMP$1u = "TextArea";
+const COMP$1t = "TextArea";
 const resizeOptionsMd = [
   { value: "(undefined)", description: "No resizing" },
   { value: "horizontal", description: "Can only resize horizontally" },
@@ -4146,15 +4204,15 @@ const TextAreaMd = createMetadata({
       defaultValue: defaultProps$1c.enterSubmits
     },
     escResets: {
-      description: `This boolean property indicates whether the ${COMP$1u} contents should be reset when pressing the ESC key.`,
+      description: `This boolean property indicates whether the ${COMP$1t} contents should be reset when pressing the ESC key.`,
       valueType: "boolean",
       defaultValue: false
     },
     maxRows: d(
-      `This optional property sets the maximum number of text rows the \`${COMP$1u}\` can grow. If not set, the number of rows is unlimited.`
+      `This optional property sets the maximum number of text rows the \`${COMP$1t}\` can grow. If not set, the number of rows is unlimited.`
     ),
     minRows: d(
-      `This optional property sets the minimum number of text rows the \`${COMP$1u}\` can shrink. If not set, the minimum number of rows is 1.`
+      `This optional property sets the minimum number of text rows the \`${COMP$1t}\` can shrink. If not set, the minimum number of rows is 1.`
     ),
     rows: {
       description: `Specifies the number of rows the component initially has.`,
@@ -4162,7 +4220,7 @@ const TextAreaMd = createMetadata({
       defaultValue: defaultProps$1c.rows
     },
     autoSize: {
-      description: `If set to \`true\`, this boolean property enables the \`${COMP$1u}\` to resize automatically based on the number of lines inside it.`,
+      description: `If set to \`true\`, this boolean property enables the \`${COMP$1t}\` to resize automatically based on the number of lines inside it.`,
       valueType: "boolean",
       defaultValue: false
     },
@@ -4170,8 +4228,8 @@ const TextAreaMd = createMetadata({
     initialValue: dInitialValue(),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$1u),
-    labelBreak: dLabelBreak(COMP$1u),
+    labelWidth: dLabelWidth(COMP$1t),
+    labelBreak: dLabelBreak(COMP$1t),
     maxLength: dMaxLength(),
     autoFocus: dAutoFocus(),
     required: dRequired(),
@@ -4184,13 +4242,13 @@ const TextAreaMd = createMetadata({
     }
   },
   events: {
-    gotFocus: dGotFocus(COMP$1u),
-    lostFocus: dLostFocus(COMP$1u),
-    didChange: dDidChange(COMP$1u)
+    gotFocus: dGotFocus(COMP$1t),
+    lostFocus: dLostFocus(COMP$1t),
+    didChange: dDidChange(COMP$1t)
   },
   apis: {
     focus: {
-      description: `This method sets the focus on the \`${COMP$1u}\` component.`,
+      description: `This method sets the focus on the \`${COMP$1t}\` component.`,
       signature: "focus(): void"
     },
     value: {
@@ -4201,12 +4259,12 @@ const TextAreaMd = createMetadata({
   },
   themeVars: parseScssVar(styles$1d.themeVars),
   defaultThemeVars: {
-    [`paddingVertical-${COMP$1u}`]: "$space-2",
-    [`paddingHorizontal-${COMP$1u}`]: "$space-2"
+    [`paddingVertical-${COMP$1t}`]: "$space-2",
+    [`paddingHorizontal-${COMP$1t}`]: "$space-2"
   }
 });
 const textAreaComponentRenderer = createComponentRenderer(
-  COMP$1u,
+  COMP$1t,
   TextAreaMd,
   ({
     node,
@@ -4531,6 +4589,7 @@ const defaultProps$1b = {
 const Image = forwardRef(function Img({
   src,
   alt,
+  imageData,
   fit = defaultProps$1b.fit,
   style: style2,
   className,
@@ -4540,13 +4599,36 @@ const Image = forwardRef(function Img({
   inline = defaultProps$1b.inline,
   ...rest
 }, ref) {
+  const [blobUrl, setBlobUrl] = useState(null);
+  const blobToRender = useMemo(() => {
+    if (!imageData || !(imageData instanceof Blob)) {
+      return void 0;
+    }
+    return imageData;
+  }, [imageData]);
+  useEffect(() => {
+    if (!src && blobToRender) {
+      const url = URL.createObjectURL(blobToRender);
+      setBlobUrl(url);
+      return () => {
+        URL.revokeObjectURL(url);
+        setBlobUrl(null);
+      };
+    } else {
+      if (blobUrl) {
+        URL.revokeObjectURL(blobUrl);
+        setBlobUrl(null);
+      }
+    }
+  }, [src, blobToRender]);
   src = safeConvertPropToString(src);
   alt = safeConvertPropToString(alt);
+  const imageSrc = src || blobUrl;
   return /* @__PURE__ */ jsx(
     "img",
     {
       ...rest,
-      src,
+      src: imageSrc,
       ref,
       alt,
       loading: lazyLoad ? "lazy" : "eager",
@@ -5422,7 +5504,7 @@ const NavGroup = forwardRef(function NavGroup2({
   renderChild: renderChild2,
   to,
   disabled: disabled2 = false,
-  initiallyExpanded,
+  initiallyExpanded = false,
   iconHorizontalCollapsed,
   iconHorizontalExpanded,
   iconVerticalCollapsed,
@@ -5443,7 +5525,7 @@ const NavGroup = forwardRef(function NavGroup2({
       layoutIsVertical,
       iconHorizontalCollapsed: iconHorizontalCollapsed ?? defaultProps$16.iconHorizontalCollapsed,
       iconHorizontalExpanded: iconHorizontalExpanded ?? defaultProps$16.iconHorizontalExpanded,
-      iconVerticalCollapsed: iconVerticalCollapsed ?? defaultProps$16.iconVerticalCollapsed,
+      iconVerticalCollapsed: iconVerticalCollapsed ?? (level < 0 && !inline ? defaultProps$16.iconVerticalExpanded : defaultProps$16.iconVerticalCollapsed),
       iconVerticalExpanded: iconVerticalExpanded ?? defaultProps$16.iconVerticalExpanded
     };
   }, [
@@ -5452,7 +5534,8 @@ const NavGroup = forwardRef(function NavGroup2({
     iconVerticalCollapsed,
     iconVerticalExpanded,
     level,
-    layoutIsVertical
+    layoutIsVertical,
+    inline
   ]);
   return /* @__PURE__ */ jsx(NavGroupContext.Provider, { value: navGroupContextValue, children: inline ? /* @__PURE__ */ jsx(
     ExpandableNavGroup,
@@ -5478,6 +5561,7 @@ const NavGroup = forwardRef(function NavGroup2({
       renderChild: renderChild2,
       ref,
       to,
+      initiallyExpanded,
       disabled: disabled2
     }
   ) });
@@ -5517,6 +5601,7 @@ const ExpandableNavGroup = forwardRef(function ExpandableNavGroup2({
         icon: icon2,
         to,
         disabled: disabled2,
+        "aria-expanded": expanded2,
         children: [
           label2,
           /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
@@ -5527,6 +5612,7 @@ const ExpandableNavGroup = forwardRef(function ExpandableNavGroup2({
     /* @__PURE__ */ jsx(
       "div",
       {
+        "aria-hidden": !expanded2,
         className: classnames(styles$18.groupContent, {
           [styles$18.expanded]: expanded2
         }),
@@ -5542,6 +5628,7 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
   node,
   to,
   disabled: disabled2 = false,
+  initiallyExpanded = false,
   ...rest
 }, ref) {
   const {
@@ -5560,56 +5647,68 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
     Trigger2 = DropdownMenuSubTrigger$1;
     Content2 = DropdownMenuSubContent$1;
   }
-  const [expanded2, setExpanded] = useState(false);
-  return /* @__PURE__ */ jsxs(Wrapper, { ...rest, onOpenChange: (open) => setExpanded(open), children: [
-    /* @__PURE__ */ jsx(Trigger2, { asChild: true, disabled: disabled2, children: /* @__PURE__ */ jsxs(
-      NavLink,
-      {
-        icon: icon2,
-        style: { flexShrink: 0 },
-        vertical: level >= 1,
-        to,
-        disabled: disabled2,
-        children: [
-          label2,
-          /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
-          level === 0 && /* @__PURE__ */ jsx(Icon, { name: iconVerticalExpanded }),
-          level >= 1 && /* @__PURE__ */ jsx(Icon, { name: expanded2 ? iconHorizontalExpanded : iconHorizontalCollapsed })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(DropdownMenuPortal, { container: root2, children: /* @__PURE__ */ jsx(
-      Content2,
-      {
-        className: styles$18.dropdownList,
-        style: { display: "flex", flexDirection: "column" },
-        side: "bottom",
-        align: "start",
-        children: renderChild2(node.children, {
-          wrapChild: ({ node: node2 }, renderedChild, hints) => {
-            if (hints == null ? void 0 : hints.opaque) {
-              return renderedChild;
-            }
-            if (node2.type === "List") {
-              return renderedChild;
-            }
-            if (node2.type === "NavGroup") {
-              return renderedChild;
-            }
-            let child = renderedChild;
-            if (node2.type === "NavLink") {
-              child = cloneElement(renderedChild, {
-                ...mergeProps(renderedChild.props, {
-                  vertical: true
-                })
-              });
-            }
-            return /* @__PURE__ */ jsx(DropdownMenuItem$1, { asChild: true, children: child });
+  const [expanded2, setExpanded] = useState(initiallyExpanded);
+  const [renderCount, setRenderCount] = useState(false);
+  useEffect(() => setRenderCount(true), []);
+  return /* @__PURE__ */ jsxs(
+    Wrapper,
+    {
+      ...rest,
+      open: expanded2,
+      onOpenChange: (open) => {
+        if (renderCount) setExpanded(open);
+      },
+      children: [
+        /* @__PURE__ */ jsx(Trigger2, { asChild: true, disabled: disabled2, children: /* @__PURE__ */ jsxs(
+          NavLink,
+          {
+            icon: icon2,
+            style: { flexShrink: 0 },
+            vertical: level >= 1,
+            to,
+            disabled: disabled2,
+            children: [
+              label2,
+              /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+              level === 0 && /* @__PURE__ */ jsx(Icon, { name: expanded2 ? iconVerticalExpanded : iconVerticalCollapsed }),
+              level >= 1 && /* @__PURE__ */ jsx(Icon, { name: expanded2 ? iconHorizontalExpanded : iconHorizontalCollapsed })
+            ]
           }
-        })
-      }
-    ) })
-  ] });
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenuPortal, { container: root2, children: /* @__PURE__ */ jsx(
+          Content2,
+          {
+            className: styles$18.dropdownList,
+            style: { display: "flex", flexDirection: "column" },
+            side: "bottom",
+            align: "start",
+            children: renderChild2(node.children, {
+              wrapChild: ({ node: node2 }, renderedChild, hints) => {
+                if (hints == null ? void 0 : hints.opaque) {
+                  return renderedChild;
+                }
+                if (node2.type === "List") {
+                  return renderedChild;
+                }
+                if (node2.type === "NavGroup") {
+                  return renderedChild;
+                }
+                let child = renderedChild;
+                if (node2.type === "NavLink") {
+                  child = cloneElement(renderedChild, {
+                    ...mergeProps(renderedChild.props, {
+                      vertical: true
+                    })
+                  });
+                }
+                return /* @__PURE__ */ jsx(DropdownMenuItem$1, { asChild: true, children: child });
+              }
+            })
+          }
+        ) })
+      ]
+    }
+  );
 });
 const NavGroupContext = createContext({
   level: -1,
@@ -5703,7 +5802,7 @@ const NavLink = forwardRef(function NavLink2({
   }
   return content2;
 });
-const COMP$1t = "NavLink";
+const COMP$1s = "NavLink";
 const NavLinkMd = createMetadata({
   status: "stable",
   description: "`NavLink` creates interactive navigation items that connect users to different destinations within an app or external URLs. It automatically indicates active states, supports custom icons and labels, and can execute custom actions instead of navigation when needed.",
@@ -5722,7 +5821,7 @@ const NavLinkMd = createMetadata({
     },
     label: dLabel(),
     vertical: {
-      description: `This property sets how the active status is displayed on the \`${COMP$1t}\` component. If set to true, the indicator is displayed on the side which lends itself to a vertically aligned navigation menu. By default, it displays a horizontal indicator.`,
+      description: `This property sets how the active status is displayed on the \`${COMP$1s}\` component. If set to true, the indicator is displayed on the side which lends itself to a vertically aligned navigation menu. By default, it displays a horizontal indicator.`,
       valueType: "boolean"
     },
     displayActive: {
@@ -5735,37 +5834,37 @@ const NavLinkMd = createMetadata({
     )
   },
   events: {
-    click: dClick(COMP$1t)
+    click: dClick(COMP$1s)
   },
   themeVars: parseScssVar(navLinkStyles.themeVars),
   themeVarDescriptions: {
-    [`color-indicator-${COMP$1t}`]: "Provides the following states: `--hover`, `--active`, `--pressed`"
+    [`color-indicator-${COMP$1s}`]: "Provides the following states: `--hover`, `--active`, `--pressed`"
   },
   defaultThemeVars: {
-    [`border-${COMP$1t}`]: "0px solid $borderColor",
-    [`borderRadius-${COMP$1t}`]: "$borderRadius",
-    [`backgroundColor-${COMP$1t}`]: "transparent",
-    [`paddingHorizontal-${COMP$1t}`]: "$space-4",
-    [`paddingVertical-${COMP$1t}`]: "$space-2",
-    [`fontSize-${COMP$1t}`]: "$fontSize-sm",
-    [`fontWeight-${COMP$1t}`]: "$fontWeight-normal",
-    [`fontFamily-${COMP$1t}`]: "$fontFamily",
-    [`textColor-${COMP$1t}`]: "$textColor-primary",
-    [`fontWeight-${COMP$1t}--pressed`]: "$fontWeight-normal",
-    [`thickness-indicator-${COMP$1t}`]: "$space-0_5",
-    [`outlineColor-${COMP$1t}--focus`]: "$outlineColor--focus",
-    [`outlineWidth-${COMP$1t}--focus`]: "$outlineWidth--focus",
-    [`outlineStyle-${COMP$1t}--focus`]: "$outlineStyle--focus",
-    [`outlineOffset-${COMP$1t}--focus`]: "-1px",
-    [`borderRadius-indicator-${COMP$1t}`]: "$borderRadius",
-    [`color-icon-${COMP$1t}`]: "$color-surface-500",
-    [`color-indicator-${COMP$1t}--active`]: "$color-primary-500",
-    [`color-indicator-${COMP$1t}--pressed`]: "$color-primary-500",
-    [`color-indicator-${COMP$1t}--hover`]: "$color-primary-600"
+    [`border-${COMP$1s}`]: "0px solid $borderColor",
+    [`borderRadius-${COMP$1s}`]: "$borderRadius",
+    [`backgroundColor-${COMP$1s}`]: "transparent",
+    [`paddingHorizontal-${COMP$1s}`]: "$space-4",
+    [`paddingVertical-${COMP$1s}`]: "$space-2",
+    [`fontSize-${COMP$1s}`]: "$fontSize-sm",
+    [`fontWeight-${COMP$1s}`]: "$fontWeight-normal",
+    [`fontFamily-${COMP$1s}`]: "$fontFamily",
+    [`textColor-${COMP$1s}`]: "$textColor-primary",
+    [`fontWeight-${COMP$1s}--pressed`]: "$fontWeight-normal",
+    [`thickness-indicator-${COMP$1s}`]: "$space-0_5",
+    [`outlineColor-${COMP$1s}--focus`]: "$outlineColor--focus",
+    [`outlineWidth-${COMP$1s}--focus`]: "$outlineWidth--focus",
+    [`outlineStyle-${COMP$1s}--focus`]: "$outlineStyle--focus",
+    [`outlineOffset-${COMP$1s}--focus`]: "-1px",
+    [`borderRadius-indicator-${COMP$1s}`]: "$borderRadius",
+    [`color-icon-${COMP$1s}`]: "$color-surface-500",
+    [`color-indicator-${COMP$1s}--active`]: "$color-primary-500",
+    [`color-indicator-${COMP$1s}--pressed`]: "$color-primary-500",
+    [`color-indicator-${COMP$1s}--hover`]: "$color-primary-600"
   }
 });
 const navLinkComponentRenderer = createComponentRenderer(
-  COMP$1t,
+  COMP$1s,
   NavLinkMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     var _a2;
@@ -5850,7 +5949,7 @@ function specifyTypes(props) {
     referrerPolicy
   };
 }
-const COMP$1s = "Link";
+const COMP$1r = "Link";
 const LinkMd = createMetadata({
   status: "stable",
   description: "`Link` creates clickable navigation elements for internal app routes or external URLs. You can use the `label` and `icon` properties for simple text links, or embed custom components like buttons, cards, or complex layouts for rich interactive link presentations.",
@@ -5865,7 +5964,7 @@ const LinkMd = createMetadata({
       defaultValue: defaultProps$14.active
     },
     target: {
-      description: `This property specifies where to open the link represented by the \`${COMP$1s}\`. This property accepts the following values (in accordance with the HTML standard):`,
+      description: `This property specifies where to open the link represented by the \`${COMP$1r}\`. This property accepts the following values (in accordance with the HTML standard):`,
       availableValues: LinkTargetMd,
       type: "string"
     },
@@ -5881,37 +5980,37 @@ const LinkMd = createMetadata({
   },
   themeVars: parseScssVar(styles$17.themeVars),
   themeVarDescriptions: {
-    [`gap-icon-${COMP$1s}`]: "This property defines the size of the gap between the icon and the label."
+    [`gap-icon-${COMP$1r}`]: "This property defines the size of the gap between the icon and the label."
   },
   defaultThemeVars: {
-    [`border-${COMP$1s}`]: "0px solid $borderColor",
-    [`textColor-${COMP$1s}`]: "$color-primary-500",
-    [`textDecorationColor-${COMP$1s}`]: `textDecorationColor-${COMP$1s}`,
-    [`textColor-${COMP$1s}--hover`]: `$color-primary-400`,
-    [`textDecorationColor-${COMP$1s}--hover`]: `textColor-${COMP$1s}--hover`,
-    [`textColor-${COMP$1s}--active`]: "$color-primary-400",
-    [`textDecorationColor-${COMP$1s}--active`]: `textColor-${COMP$1s}--active`,
-    [`textColor-${COMP$1s}--hover--active`]: `$textColor-${COMP$1s}--active`,
-    [`textUnderlineOffset-${COMP$1s}`]: "$space-1",
-    [`textDecorationLine-${COMP$1s}`]: "underline",
-    [`textDecorationStyle-${COMP$1s}`]: "solid",
-    [`outlineColor-${COMP$1s}--focus`]: "$outlineColor--focus",
-    [`outlineWidth-${COMP$1s}--focus`]: "$outlineWidth--focus",
-    [`outlineStyle-${COMP$1s}--focus`]: "$outlineStyle--focus",
-    [`outlineOffset-${COMP$1s}--focus`]: "$outlineOffset--focus",
-    [`fontSize-${COMP$1s}`]: "inherit",
-    [`fontWeight-${COMP$1s}--active`]: "$fontWeight-bold",
-    [`gap-icon-${COMP$1s}`]: "$gap-tight",
-    [`padding-icon-${COMP$1s}`]: "$space-0_5",
+    [`border-${COMP$1r}`]: "0px solid $borderColor",
+    [`textColor-${COMP$1r}`]: "$color-primary-500",
+    [`textDecorationColor-${COMP$1r}`]: `textDecorationColor-${COMP$1r}`,
+    [`textColor-${COMP$1r}--hover`]: `$color-primary-400`,
+    [`textDecorationColor-${COMP$1r}--hover`]: `textColor-${COMP$1r}--hover`,
+    [`textColor-${COMP$1r}--active`]: "$color-primary-400",
+    [`textDecorationColor-${COMP$1r}--active`]: `textColor-${COMP$1r}--active`,
+    [`textColor-${COMP$1r}--hover--active`]: `$textColor-${COMP$1r}--active`,
+    [`textUnderlineOffset-${COMP$1r}`]: "$space-1",
+    [`textDecorationLine-${COMP$1r}`]: "underline",
+    [`textDecorationStyle-${COMP$1r}`]: "solid",
+    [`outlineColor-${COMP$1r}--focus`]: "$outlineColor--focus",
+    [`outlineWidth-${COMP$1r}--focus`]: "$outlineWidth--focus",
+    [`outlineStyle-${COMP$1r}--focus`]: "$outlineStyle--focus",
+    [`outlineOffset-${COMP$1r}--focus`]: "$outlineOffset--focus",
+    [`fontSize-${COMP$1r}`]: "inherit",
+    [`fontWeight-${COMP$1r}--active`]: "$fontWeight-bold",
+    [`gap-icon-${COMP$1r}`]: "$gap-tight",
+    [`padding-icon-${COMP$1r}`]: "$space-0_5",
     dark: {
-      [`textColor-${COMP$1s}`]: "$color-primary-600",
-      [`textColor-${COMP$1s}--hover`]: `$color-primary-500`,
-      [`textColor-${COMP$1s}--active`]: "$color-primary-500"
+      [`textColor-${COMP$1r}`]: "$color-primary-600",
+      [`textColor-${COMP$1r}--hover`]: `$color-primary-500`,
+      [`textColor-${COMP$1r}--active`]: "$color-primary-500"
     }
   }
 });
 const localLinkComponentRenderer = createComponentRenderer(
-  COMP$1s,
+  COMP$1r,
   LinkMd,
   ({ node, extractValue, renderChild: renderChild2, lookupEventHandler, className }) => {
     var _a2;
@@ -6105,10 +6204,10 @@ function TreeComponent({
     }
   ) }) });
 }
-const COMP$1r = "Tree";
+const COMP$1q = "Tree";
 const TreeMd = createMetadata({
   status: "in progress",
-  description: `The \`${COMP$1r}\` component is a virtualized tree component that displays hierarchical data.`,
+  description: `The \`${COMP$1q}\` component is a virtualized tree component that displays hierarchical data.`,
   props: {
     data: {
       description: `The data source of the tree.`,
@@ -6121,7 +6220,7 @@ const TreeMd = createMetadata({
   }
 });
 const treeComponentRenderer = createComponentRenderer(
-  COMP$1r,
+  COMP$1q,
   TreeMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     return /* @__PURE__ */ jsx(
@@ -6328,10 +6427,10 @@ const TreeDisplay = forwardRef(function TreeDisplay2({ style: style2, className,
   const treeNodes = useMemo(() => parseTreeContent(contentString), [contentString]);
   return /* @__PURE__ */ jsx("div", { className: classnames(styles$15.treeDisplay, className), style: style2, ref: forwardedRef, children: /* @__PURE__ */ jsx("div", { className: styles$15.content, children: treeNodes.map((node, index) => renderTreeNode(node, index, itemHeight, 0, [])) }) });
 });
-const COMP$1q = "TreeDisplay";
+const COMP$1p = "TreeDisplay";
 const TreeDisplayMd = createMetadata({
   status: "stable",
-  description: `The \`${COMP$1q}\` component displays hierarchical data in a tree structure. It accepts an indented text format where each line is an entry in the tree, and the number of leading spaces determines the nesting level. The component renders the tree with SVG lines and continuous vertical guides to clearly visualize parent-child relationships in the hierarchy.`,
+  description: `The \`${COMP$1p}\` component displays hierarchical data in a tree structure. It accepts an indented text format where each line is an entry in the tree, and the number of leading spaces determines the nesting level. The component renders the tree with SVG lines and continuous vertical guides to clearly visualize parent-child relationships in the hierarchy.`,
   props: {
     content: {
       description: "The indented text content to display as a tree structure. Each level of indentation (using spaces) represents one level in the tree hierarchy.",
@@ -6346,21 +6445,21 @@ const TreeDisplayMd = createMetadata({
   },
   themeVars: parseScssVar(styles$15.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$1q}`]: "$backgroundColor-CodeBlock",
-    [`borderRadius-${COMP$1q}`]: "8px",
-    [`padding-${COMP$1q}`]: "$space-4",
-    [`paddingLeft-${COMP$1q}`]: "$space-2",
-    [`fontSize-${COMP$1q}`]: "$fontSize-code",
-    [`fontWeight-${COMP$1q}`]: "$fontWeight-normal",
-    [`fontFamily-${COMP$1q}`]: "$fontFamily-monospace",
-    [`color-${COMP$1q}`]: "$textColor-primary",
-    [`color-connect-${COMP$1q}`]: "$color-surface-200",
-    [`boxShadow-${COMP$1q}`]: "none",
-    [`border-${COMP$1q}`]: "0.5px solid $borderColor"
+    [`backgroundColor-${COMP$1p}`]: "$backgroundColor-CodeBlock",
+    [`borderRadius-${COMP$1p}`]: "8px",
+    [`padding-${COMP$1p}`]: "$space-4",
+    [`paddingLeft-${COMP$1p}`]: "$space-2",
+    [`fontSize-${COMP$1p}`]: "$fontSize-code",
+    [`fontWeight-${COMP$1p}`]: "$fontWeight-normal",
+    [`fontFamily-${COMP$1p}`]: "$fontFamily-monospace",
+    [`color-${COMP$1p}`]: "$textColor-primary",
+    [`color-connect-${COMP$1p}`]: "$color-surface-200",
+    [`boxShadow-${COMP$1p}`]: "none",
+    [`border-${COMP$1p}`]: "0.5px solid $borderColor"
   }
 });
 const treeDisplayComponentRenderer = createComponentRenderer(
-  COMP$1q,
+  COMP$1p,
   TreeDisplayMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     return /* @__PURE__ */ jsx(
@@ -6374,7 +6473,10 @@ const treeDisplayComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$1p = "Button";
+function hasRenderableChildren(children) {
+  return !!(children == null ? void 0 : children.some((child) => (child == null ? void 0 : child.type) !== "Slot"));
+}
+const COMP$1o = "Button";
 const ButtonMd = createMetadata({
   status: "stable",
   description: "`Button` is the primary interactive component for triggering actions like form submissions, navigation, opening modals, and API calls. It supports multiple visual styles and sizes to match different UI contexts and importance levels.",
@@ -6407,11 +6509,11 @@ const ButtonMd = createMetadata({
       defaultValue: defaultProps$1d.size
     },
     label: {
-      description: `This property is an optional string to set a label for the ${COMP$1p}. If no label is specified and an icon is set, the ${COMP$1p} will modify its styling to look like a small icon button. When the ${COMP$1p} has nested children, it will display them and ignore the value of the \`label\` prop.`,
+      description: `This property is an optional string to set a label for the ${COMP$1o}. If no label is specified and an icon is set, the ${COMP$1o} will modify its styling to look like a small icon button. When the ${COMP$1o} has nested children, it will display them and ignore the value of the \`label\` prop.`,
       type: "string"
     },
     type: {
-      description: `This optional string describes how the ${COMP$1p} appears in an HTML context. You rarely need to set this property explicitly.`,
+      description: `This optional string describes how the ${COMP$1o} appears in an HTML context. You rarely need to set this property explicitly.`,
       availableValues: buttonTypesMd,
       valueType: "string",
       defaultValue: defaultProps$1d.type
@@ -6423,86 +6525,86 @@ const ButtonMd = createMetadata({
     },
     orientation: dOrientation(defaultProps$1d.orientation),
     icon: {
-      description: `This string value denotes an icon name. The framework will render an icon if XMLUI recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP$1p} displays only that icon.`,
+      description: `This string value denotes an icon name. The framework will render an icon if XMLUI recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP$1o} displays only that icon.`,
       type: "string"
     },
     iconPosition: {
-      description: `This optional string determines the location of the icon in the ${COMP$1p}.`,
+      description: `This optional string determines the location of the icon in the ${COMP$1o}.`,
       availableValues: iconPositionMd,
       type: "string",
       defaultValue: defaultProps$1d.iconPosition
     },
     contentPosition: {
-      description: `This optional value determines how the label and icon (or nested children) should be placedinside the ${COMP$1p} component.`,
+      description: `This optional value determines how the label and icon (or nested children) should be placedinside the ${COMP$1o} component.`,
       availableValues: alignmentOptionMd,
       type: "string",
       defaultValue: defaultProps$1d.contentPosition
     },
     contextualLabel: {
-      description: `This optional value is used to provide an accessible name for the ${COMP$1p} in the context of its usage.`,
+      description: `This optional value is used to provide an accessible name for the ${COMP$1o} in the context of its usage.`,
       type: "string"
     }
   },
   events: {
-    click: dClick(COMP$1p),
-    gotFocus: dGotFocus(COMP$1p),
-    lostFocus: dLostFocus(COMP$1p)
+    click: dClick(COMP$1o),
+    gotFocus: dGotFocus(COMP$1o),
+    lostFocus: dLostFocus(COMP$1o)
   },
   themeVars: parseScssVar(styles$1g.themeVars),
   defaultThemeVars: {
-    [`width-${COMP$1p}`]: "fit-content",
-    [`height-${COMP$1p}`]: "fit-content",
-    [`borderRadius-${COMP$1p}`]: "$borderRadius",
-    [`fontSize-${COMP$1p}`]: "$fontSize-sm",
-    [`fontWeight-${COMP$1p}`]: "$fontWeight-medium",
-    [`backgroundColor-${COMP$1p}-primary`]: "$color-primary-500",
-    [`backgroundColor-${COMP$1p}-attention`]: "$backgroundColor-attention",
-    [`borderColor-${COMP$1p}-attention`]: "$color-attention",
-    [`backgroundColor-${COMP$1p}--disabled`]: "$backgroundColor--disabled",
-    [`borderColor-${COMP$1p}--disabled`]: "$borderColor--disabled",
-    [`borderStyle-${COMP$1p}`]: "solid",
-    [`textColor-${COMP$1p}--disabled`]: "$textColor--disabled",
-    [`outlineColor-${COMP$1p}--focus`]: "$outlineColor--focus",
-    [`borderWidth-${COMP$1p}`]: "1px",
-    [`outlineWidth-${COMP$1p}--focus`]: "$outlineWidth--focus",
-    [`outlineStyle-${COMP$1p}--focus`]: "$outlineStyle--focus",
-    [`outlineOffset-${COMP$1p}--focus`]: "$outlineOffset--focus",
-    [`paddingHorizontal-${COMP$1p}-xs`]: "$space-1",
-    [`paddingVertical-${COMP$1p}-xs`]: "$space-0_5",
-    [`paddingHorizontal-${COMP$1p}-sm`]: "$space-4",
-    [`paddingVertical-${COMP$1p}-sm`]: "$space-2",
-    [`paddingHorizontal-${COMP$1p}-md`]: "$space-4",
-    [`paddingVertical-${COMP$1p}-md`]: "$space-3",
-    [`paddingHorizontal-${COMP$1p}-lg`]: "$space-5",
-    [`paddingVertical-${COMP$1p}-lg`]: "$space-4",
-    [`textColor-${COMP$1p}`]: "$color-surface-950",
-    [`textColor-${COMP$1p}-solid`]: "$const-color-surface-50",
-    [`borderColor-${COMP$1p}-primary`]: "$color-primary-500",
-    [`backgroundColor-${COMP$1p}-primary--hover`]: "$color-primary-400",
-    [`backgroundColor-${COMP$1p}-primary--active`]: "$color-primary-500",
-    [`backgroundColor-${COMP$1p}-primary-outlined--hover`]: "$color-primary-50",
-    [`backgroundColor-${COMP$1p}-primary-outlined--active`]: "$color-primary-100",
-    [`borderColor-${COMP$1p}-primary-outlined`]: "$color-primary-600",
-    [`borderColor-${COMP$1p}-primary-outlined--hover`]: "$color-primary-500",
-    [`textColor-${COMP$1p}-primary-outlined`]: "$color-primary-900",
-    [`textColor-${COMP$1p}-primary-outlined--hover`]: "$color-primary-950",
-    [`textColor-${COMP$1p}-primary-outlined--active`]: "$color-primary-900",
-    [`backgroundColor-${COMP$1p}-primary-ghost--hover`]: "$color-primary-50",
-    [`backgroundColor-${COMP$1p}-primary-ghost--active`]: "$color-primary-100",
-    [`borderColor-${COMP$1p}-secondary`]: "$color-secondary-100",
-    [`backgroundColor-${COMP$1p}-secondary`]: "$color-secondary-500",
-    [`backgroundColor-${COMP$1p}-secondary--hover`]: "$color-secondary-400",
-    [`backgroundColor-${COMP$1p}-secondary--active`]: "$color-secondary-500",
-    [`backgroundColor-${COMP$1p}-secondary-outlined--hover`]: "$color-secondary-50",
-    [`backgroundColor-${COMP$1p}-secondary-outlined--active`]: "$color-secondary-100",
-    [`backgroundColor-${COMP$1p}-secondary-ghost--hover`]: "$color-secondary-100",
-    [`backgroundColor-${COMP$1p}-secondary-ghost--active`]: "$color-secondary-100",
-    [`backgroundColor-${COMP$1p}-attention--hover`]: "$color-danger-400",
-    [`backgroundColor-${COMP$1p}-attention--active`]: "$color-danger-500",
-    [`backgroundColor-${COMP$1p}-attention-outlined--hover`]: "$color-danger-50",
-    [`backgroundColor-${COMP$1p}-attention-outlined--active`]: "$color-danger-100",
-    [`backgroundColor-${COMP$1p}-attention-ghost--hover`]: "$color-danger-50",
-    [`backgroundColor-${COMP$1p}-attention-ghost--active`]: "$color-danger-100"
+    [`width-${COMP$1o}`]: "fit-content",
+    [`height-${COMP$1o}`]: "fit-content",
+    [`borderRadius-${COMP$1o}`]: "$borderRadius",
+    [`fontSize-${COMP$1o}`]: "$fontSize-sm",
+    [`fontWeight-${COMP$1o}`]: "$fontWeight-medium",
+    [`backgroundColor-${COMP$1o}-primary`]: "$color-primary-500",
+    [`backgroundColor-${COMP$1o}-attention`]: "$backgroundColor-attention",
+    [`borderColor-${COMP$1o}-attention`]: "$color-attention",
+    [`backgroundColor-${COMP$1o}--disabled`]: "$backgroundColor--disabled",
+    [`borderColor-${COMP$1o}--disabled`]: "$borderColor--disabled",
+    [`borderStyle-${COMP$1o}`]: "solid",
+    [`textColor-${COMP$1o}--disabled`]: "$textColor--disabled",
+    [`outlineColor-${COMP$1o}--focus`]: "$outlineColor--focus",
+    [`borderWidth-${COMP$1o}`]: "1px",
+    [`outlineWidth-${COMP$1o}--focus`]: "$outlineWidth--focus",
+    [`outlineStyle-${COMP$1o}--focus`]: "$outlineStyle--focus",
+    [`outlineOffset-${COMP$1o}--focus`]: "$outlineOffset--focus",
+    [`paddingHorizontal-${COMP$1o}-xs`]: "$space-1",
+    [`paddingVertical-${COMP$1o}-xs`]: "$space-0_5",
+    [`paddingHorizontal-${COMP$1o}-sm`]: "$space-4",
+    [`paddingVertical-${COMP$1o}-sm`]: "$space-2",
+    [`paddingHorizontal-${COMP$1o}-md`]: "$space-4",
+    [`paddingVertical-${COMP$1o}-md`]: "$space-3",
+    [`paddingHorizontal-${COMP$1o}-lg`]: "$space-5",
+    [`paddingVertical-${COMP$1o}-lg`]: "$space-4",
+    [`textColor-${COMP$1o}`]: "$color-surface-950",
+    [`textColor-${COMP$1o}-solid`]: "$const-color-surface-50",
+    [`borderColor-${COMP$1o}-primary`]: "$color-primary-500",
+    [`backgroundColor-${COMP$1o}-primary--hover`]: "$color-primary-400",
+    [`backgroundColor-${COMP$1o}-primary--active`]: "$color-primary-500",
+    [`backgroundColor-${COMP$1o}-primary-outlined--hover`]: "$color-primary-50",
+    [`backgroundColor-${COMP$1o}-primary-outlined--active`]: "$color-primary-100",
+    [`borderColor-${COMP$1o}-primary-outlined`]: "$color-primary-600",
+    [`borderColor-${COMP$1o}-primary-outlined--hover`]: "$color-primary-500",
+    [`textColor-${COMP$1o}-primary-outlined`]: "$color-primary-900",
+    [`textColor-${COMP$1o}-primary-outlined--hover`]: "$color-primary-950",
+    [`textColor-${COMP$1o}-primary-outlined--active`]: "$color-primary-900",
+    [`backgroundColor-${COMP$1o}-primary-ghost--hover`]: "$color-primary-50",
+    [`backgroundColor-${COMP$1o}-primary-ghost--active`]: "$color-primary-100",
+    [`borderColor-${COMP$1o}-secondary`]: "$color-secondary-100",
+    [`backgroundColor-${COMP$1o}-secondary`]: "$color-secondary-500",
+    [`backgroundColor-${COMP$1o}-secondary--hover`]: "$color-secondary-400",
+    [`backgroundColor-${COMP$1o}-secondary--active`]: "$color-secondary-500",
+    [`backgroundColor-${COMP$1o}-secondary-outlined--hover`]: "$color-secondary-50",
+    [`backgroundColor-${COMP$1o}-secondary-outlined--active`]: "$color-secondary-100",
+    [`backgroundColor-${COMP$1o}-secondary-ghost--hover`]: "$color-secondary-100",
+    [`backgroundColor-${COMP$1o}-secondary-ghost--active`]: "$color-secondary-100",
+    [`backgroundColor-${COMP$1o}-attention--hover`]: "$color-danger-400",
+    [`backgroundColor-${COMP$1o}-attention--active`]: "$color-danger-500",
+    [`backgroundColor-${COMP$1o}-attention-outlined--hover`]: "$color-danger-50",
+    [`backgroundColor-${COMP$1o}-attention-outlined--active`]: "$color-danger-100",
+    [`backgroundColor-${COMP$1o}-attention-ghost--hover`]: "$color-danger-50",
+    [`backgroundColor-${COMP$1o}-attention-ghost--active`]: "$color-danger-100"
   }
 });
 const buttonComponentRenderer = createComponentRenderer(
@@ -6511,6 +6613,7 @@ const buttonComponentRenderer = createComponentRenderer(
   ({ node, extractValue, renderChild: renderChild2, lookupEventHandler, className }) => {
     const iconName = extractValue.asString(node.props.icon);
     const label2 = extractValue.asDisplayText(node.props.label);
+    const renderedChildren = hasRenderableChildren(node.children) ? renderChild2(node.children, { type: "Stack", orientation: "horizontal" }) : label2;
     return /* @__PURE__ */ jsx(
       Button,
       {
@@ -6529,7 +6632,7 @@ const buttonComponentRenderer = createComponentRenderer(
         onBlur: lookupEventHandler("lostFocus"),
         className,
         contextualLabel: extractValue.asOptionalString(node.props.contextualLabel),
-        children: renderChild2(node.children, { type: "Stack", orientation: "horizontal" }) || label2
+        children: renderedChildren
       }
     );
   }
@@ -8710,9 +8813,9 @@ class PropsTrasform {
     return this.mapValues(filteredKeys, this.extractValue);
   }
 }
-const COMP$1o = "Heading";
+const COMP$1n = "Heading";
 const VALUE_DESC = d(
-  `This property determines the text displayed in the heading. \`${COMP$1o}\` also accepts nested text instead of specifying the \`value\`. If both \`value\` and a nested text are used, the \`value\` will be displayed.`
+  `This property determines the text displayed in the heading. \`${COMP$1n}\` also accepts nested text instead of specifying the \`value\`. If both \`value\` and a nested text are used, the \`value\` will be displayed.`
 );
 const MAX_LINES_DESC = d(
   "This optional property determines the maximum number of lines the component can wrap to. If there is not enough space for all of the text, the component wraps the text up to as many lines as specified. If the value is not specified, there is no limit on the number of displayed lines."
@@ -8769,13 +8872,13 @@ const HeadingMd = createMetadata({
   themeVars: parseScssVar(styles$14.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`fontFamily-${COMP$1o}`]: "$fontFamily",
-    [`textColor-${COMP$1o}`]: "inherit",
-    [`fontWeight-${COMP$1o}`]: "$fontWeight-bold",
-    [`letterSpacing-${COMP$1o} `]: "0",
-    [`color-anchor-${COMP$1o} `]: "$color-surface-400",
-    [`gap-anchor-${COMP$1o} `]: "$space-2",
-    [`textDecorationLine-anchor-${COMP$1o} `]: "underline",
+    [`fontFamily-${COMP$1n}`]: "$fontFamily",
+    [`textColor-${COMP$1n}`]: "inherit",
+    [`fontWeight-${COMP$1n}`]: "$fontWeight-bold",
+    [`letterSpacing-${COMP$1n} `]: "0",
+    [`color-anchor-${COMP$1n} `]: "$color-surface-400",
+    [`gap-anchor-${COMP$1n} `]: "$space-2",
+    [`textDecorationLine-anchor-${COMP$1n} `]: "underline",
     light: {
       // --- No light-specific theme vars
     },
@@ -8788,7 +8891,7 @@ const H1 = "H1";
 const H1Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(1),
-  specializedFrom: COMP$1o,
+  specializedFrom: COMP$1n,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8818,7 +8921,7 @@ const H2 = "H2";
 const H2Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(2),
-  specializedFrom: COMP$1o,
+  specializedFrom: COMP$1n,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8848,7 +8951,7 @@ const H3 = "H3";
 const H3Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(3),
-  specializedFrom: COMP$1o,
+  specializedFrom: COMP$1n,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8878,7 +8981,7 @@ const H4 = "H4";
 const H4Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(4),
-  specializedFrom: COMP$1o,
+  specializedFrom: COMP$1n,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8908,7 +9011,7 @@ const H5 = "H5";
 const H5Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(5),
-  specializedFrom: COMP$1o,
+  specializedFrom: COMP$1n,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8938,7 +9041,7 @@ const H6 = "H6";
 const H6Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(6),
-  specializedFrom: COMP$1o,
+  specializedFrom: COMP$1n,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8994,7 +9097,7 @@ function renderHeading({
   );
 }
 const headingComponentRenderer = createComponentRenderer(
-  COMP$1o,
+  COMP$1n,
   HeadingMd,
   ({ node, extractValue, className, renderChild: renderChild2, registerComponentApi }) => {
     return renderHeading({
@@ -9278,13 +9381,13 @@ const Text = forwardRef(function Text2({
     }
   );
 });
-const COMP$1n = "Text";
+const COMP$1m = "Text";
 const TextMd = createMetadata({
   status: "stable",
-  description: `The \`${COMP$1n}\` component displays textual information in a number of optional styles and variants.`,
+  description: `The \`${COMP$1m}\` component displays textual information in a number of optional styles and variants.`,
   props: {
     value: d(
-      `The text to be displayed. This value can also be set via nesting the text into the \`${COMP$1n}\` component.`
+      `The text to be displayed. This value can also be set via nesting the text into the \`${COMP$1m}\` 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.",
@@ -9344,76 +9447,76 @@ const TextMd = createMetadata({
   },
   themeVars: parseScssVar(styles$13.themeVars),
   defaultThemeVars: {
-    [`borderRadius-${COMP$1n}`]: "$borderRadius",
-    [`borderStyle-${COMP$1n}`]: "solid",
-    [`fontSize-${COMP$1n}`]: "$fontSize-sm",
-    [`borderWidth-${COMP$1n}`]: "$space-0",
-    [`lineHeight-${COMP$1n}-codefence`]: "1.5",
-    [`fontWeight-${COMP$1n}-abbr`]: "$fontWeight-bold",
-    [`textTransform-${COMP$1n}-abbr`]: "uppercase",
-    [`fontSize-${COMP$1n}-secondary`]: "$fontSize-sm",
-    [`fontStyle-${COMP$1n}-cite`]: "italic",
-    [`textColor-${COMP$1n}`]: "$textColor-primary",
-    [`fontFamily-${COMP$1n}`]: "$fontFamily",
-    [`fontWeight-${COMP$1n}`]: "$fontWeight-normal",
-    [`fontSize-${COMP$1n}-codefence`]: "$fontSize-code",
-    [`fontFamily-${COMP$1n}-code`]: "$fontFamily-monospace",
-    [`fontSize-${COMP$1n}-code`]: "$fontSize-sm",
-    [`borderWidth-${COMP$1n}-code`]: "1px",
-    [`borderStyle-${COMP$1n}-code`]: "solid",
-    [`borderRadius-${COMP$1n}-code`]: "4px",
-    [`paddingHorizontal-${COMP$1n}-code`]: "$space-0_5",
-    [`paddingBottom-${COMP$1n}-code`]: "2px",
-    [`textDecorationLine-${COMP$1n}-deleted`]: "line-through",
-    [`textDecorationLine-${COMP$1n}-inserted`]: "underline",
-    [`fontFamily-${COMP$1n}-keyboard`]: "$fontFamily-monospace",
-    [`fontSize-${COMP$1n}-keyboard`]: "$fontSize-sm",
-    [`fontWeight-${COMP$1n}-keyboard`]: "$fontWeight-bold",
-    [`borderWidth-${COMP$1n}-keyboard`]: "1px",
-    [`paddingHorizontal-${COMP$1n}-keyboard`]: "$space-1",
-    [`fontFamily-${COMP$1n}-sample`]: "$fontFamily-monospace",
-    [`fontSize-${COMP$1n}-sample`]: "$fontSize-sm",
-    [`fontSize-${COMP$1n}-sup`]: "$fontSize-xs",
-    [`verticalAlignment-${COMP$1n}-sup`]: "super",
-    [`fontSize-${COMP$1n}-sub`]: "$fontSize-xs",
-    [`verticalAlignment-${COMP$1n}-sub`]: "sub",
-    [`fontStyle-${COMP$1n}-var`]: "italic",
-    [`fontStyle-${COMP$1n}-em`]: "italic",
-    [`fontFamily-${COMP$1n}-mono`]: "$fontFamily-monospace",
-    [`fontSize-${COMP$1n}-title`]: "$fontSize-2xl",
-    [`fontSize-${COMP$1n}-subtitle`]: "$fontSize-xl",
-    [`fontSize-${COMP$1n}-small`]: "$fontSize-sm",
-    [`letterSpacing-${COMP$1n}-caption`]: "0.05rem",
-    [`fontSize-${COMP$1n}-placeholder`]: "$fontSize-xs",
-    [`fontFamily-${COMP$1n}-codefence`]: "$fontFamily-monospace",
-    [`paddingHorizontal-${COMP$1n}-codefence`]: "$space-4",
-    [`paddingVertical-${COMP$1n}-codefence`]: "$space-3",
-    [`paddingVertical-${COMP$1n}-paragraph`]: "$space-1",
-    [`fontSize-${COMP$1n}-subheading`]: "$fontSize-H6",
-    [`fontWeight-${COMP$1n}-subheading`]: "$fontWeight-bold",
-    [`letterSpacing-${COMP$1n}-subheading`]: "0.04em",
-    [`textTransform-${COMP$1n}-subheading`]: "uppercase",
-    [`marginTop-${COMP$1n}-tableheading`]: "$space-1",
-    [`marginBottom-${COMP$1n}-tableheading`]: "$space-4",
-    [`paddingHorizontal-${COMP$1n}-tableheading`]: "$space-1",
-    [`fontSize-${COMP$1n}-tableheading`]: "$fontSize-H6",
-    [`fontWeight-${COMP$1n}-tableheading`]: "$fontWeight-bold",
-    [`backgroundColor-${COMP$1n}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
-    [`borderColor-${COMP$1n}-code`]: "$color-surface-100",
-    [`backgroundColor-${COMP$1n}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
-    [`borderColor-${COMP$1n}-keyboard`]: "$color-surface-300",
-    [`backgroundColor-${COMP$1n}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",
-    [`color-${COMP$1n}-placeholder`]: "$color-surface-500",
-    [`color-${COMP$1n}-codefence`]: "$color-surface-900",
-    [`color-${COMP$1n}-subheading`]: "$textColor-secondary",
-    [`color-${COMP$1n}-secondary`]: "$textColor-secondary",
+    [`borderRadius-${COMP$1m}`]: "$borderRadius",
+    [`borderStyle-${COMP$1m}`]: "solid",
+    [`fontSize-${COMP$1m}`]: "$fontSize-sm",
+    [`borderWidth-${COMP$1m}`]: "$space-0",
+    [`lineHeight-${COMP$1m}-codefence`]: "1.5",
+    [`fontWeight-${COMP$1m}-abbr`]: "$fontWeight-bold",
+    [`textTransform-${COMP$1m}-abbr`]: "uppercase",
+    [`fontSize-${COMP$1m}-secondary`]: "$fontSize-sm",
+    [`fontStyle-${COMP$1m}-cite`]: "italic",
+    [`textColor-${COMP$1m}`]: "$textColor-primary",
+    [`fontFamily-${COMP$1m}`]: "$fontFamily",
+    [`fontWeight-${COMP$1m}`]: "$fontWeight-normal",
+    [`fontSize-${COMP$1m}-codefence`]: "$fontSize-code",
+    [`fontFamily-${COMP$1m}-code`]: "$fontFamily-monospace",
+    [`fontSize-${COMP$1m}-code`]: "$fontSize-sm",
+    [`borderWidth-${COMP$1m}-code`]: "1px",
+    [`borderStyle-${COMP$1m}-code`]: "solid",
+    [`borderRadius-${COMP$1m}-code`]: "4px",
+    [`paddingHorizontal-${COMP$1m}-code`]: "$space-0_5",
+    [`paddingBottom-${COMP$1m}-code`]: "2px",
+    [`textDecorationLine-${COMP$1m}-deleted`]: "line-through",
+    [`textDecorationLine-${COMP$1m}-inserted`]: "underline",
+    [`fontFamily-${COMP$1m}-keyboard`]: "$fontFamily-monospace",
+    [`fontSize-${COMP$1m}-keyboard`]: "$fontSize-sm",
+    [`fontWeight-${COMP$1m}-keyboard`]: "$fontWeight-bold",
+    [`borderWidth-${COMP$1m}-keyboard`]: "1px",
+    [`paddingHorizontal-${COMP$1m}-keyboard`]: "$space-1",
+    [`fontFamily-${COMP$1m}-sample`]: "$fontFamily-monospace",
+    [`fontSize-${COMP$1m}-sample`]: "$fontSize-sm",
+    [`fontSize-${COMP$1m}-sup`]: "$fontSize-xs",
+    [`verticalAlignment-${COMP$1m}-sup`]: "super",
+    [`fontSize-${COMP$1m}-sub`]: "$fontSize-xs",
+    [`verticalAlignment-${COMP$1m}-sub`]: "sub",
+    [`fontStyle-${COMP$1m}-var`]: "italic",
+    [`fontStyle-${COMP$1m}-em`]: "italic",
+    [`fontFamily-${COMP$1m}-mono`]: "$fontFamily-monospace",
+    [`fontSize-${COMP$1m}-title`]: "$fontSize-2xl",
+    [`fontSize-${COMP$1m}-subtitle`]: "$fontSize-xl",
+    [`fontSize-${COMP$1m}-small`]: "$fontSize-sm",
+    [`letterSpacing-${COMP$1m}-caption`]: "0.05rem",
+    [`fontSize-${COMP$1m}-placeholder`]: "$fontSize-xs",
+    [`fontFamily-${COMP$1m}-codefence`]: "$fontFamily-monospace",
+    [`paddingHorizontal-${COMP$1m}-codefence`]: "$space-4",
+    [`paddingVertical-${COMP$1m}-codefence`]: "$space-3",
+    [`paddingVertical-${COMP$1m}-paragraph`]: "$space-1",
+    [`fontSize-${COMP$1m}-subheading`]: "$fontSize-H6",
+    [`fontWeight-${COMP$1m}-subheading`]: "$fontWeight-bold",
+    [`letterSpacing-${COMP$1m}-subheading`]: "0.04em",
+    [`textTransform-${COMP$1m}-subheading`]: "uppercase",
+    [`marginTop-${COMP$1m}-tableheading`]: "$space-1",
+    [`marginBottom-${COMP$1m}-tableheading`]: "$space-4",
+    [`paddingHorizontal-${COMP$1m}-tableheading`]: "$space-1",
+    [`fontSize-${COMP$1m}-tableheading`]: "$fontSize-H6",
+    [`fontWeight-${COMP$1m}-tableheading`]: "$fontWeight-bold",
+    [`backgroundColor-${COMP$1m}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
+    [`borderColor-${COMP$1m}-code`]: "$color-surface-100",
+    [`backgroundColor-${COMP$1m}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
+    [`borderColor-${COMP$1m}-keyboard`]: "$color-surface-300",
+    [`backgroundColor-${COMP$1m}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",
+    [`color-${COMP$1m}-placeholder`]: "$color-surface-500",
+    [`color-${COMP$1m}-codefence`]: "$color-surface-900",
+    [`color-${COMP$1m}-subheading`]: "$textColor-secondary",
+    [`color-${COMP$1m}-secondary`]: "$textColor-secondary",
     dark: {
-      [`backgroundColor-${COMP$1n}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)"
+      [`backgroundColor-${COMP$1m}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)"
     }
   }
 });
 const textComponentRenderer = createComponentRenderer(
-  COMP$1n,
+  COMP$1m,
   TextMd,
   ({ node, extractValue, className, renderChild: renderChild2, registerComponentApi }) => {
     const {
@@ -9449,7 +9552,7 @@ const textComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$1m = "Fragment";
+const COMP$1l = "Fragment";
 const FragmentMd = createMetadata({
   status: "stable",
   description: "`Fragment` provides conditional rendering. You can use `when=` on any component to render it conditionally, use `Fragment` to apply `when` to a group of components.",
@@ -9459,7 +9562,7 @@ const FragmentMd = createMetadata({
   }
 });
 const fragmentComponentRenderer = createComponentRenderer(
-  COMP$1m,
+  COMP$1l,
   FragmentMd,
   ({ node, extractValue, renderChild: renderChild2, layoutContext }) => {
     let renderedChild = renderChild2(node.children, layoutContext);
@@ -9554,10 +9657,12 @@ const SelectionStore = ({
 }) => {
   const [items, setItems] = useState(selectedItems);
   const valueInitializedRef = useRef(false);
+  const currentItemsRef = useRef(selectedItems);
   const refreshSelection = useEvent((allItems = EMPTY_ARRAY) => {
     const safeAllItems = allItems || EMPTY_ARRAY;
     const safeSelectedItems = selectedItems || EMPTY_ARRAY;
     setItems(safeAllItems);
+    currentItemsRef.current = safeAllItems;
     let value = safeAllItems.filter(
       (item2) => !!safeSelectedItems.find((si) => si && item2 && si[idKey] === item2[idKey])
     );
@@ -9569,7 +9674,7 @@ const SelectionStore = ({
     }
   });
   const setSelectedRowIds = useEvent((rowIds) => {
-    const safeItems = items || EMPTY_ARRAY;
+    const safeItems = currentItemsRef.current || EMPTY_ARRAY;
     updateState({ value: safeItems.filter((item2) => rowIds.includes(item2[idKey])) });
   });
   const clearSelection = useEvent(() => {
@@ -9821,6 +9926,7 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
   collectCss("zoom");
   collectCss("cursor");
   collectCss("whiteSpace");
+  collectCss("transform");
   collectCss("outline");
   collectCss("outlineWidth");
   collectCss("outlineColor");
@@ -10027,6 +10133,7 @@ const layoutPatterns = {
   textDecorationStyle: [],
   textDecorationThickness: [],
   textUnderlineOffset: [],
+  transform: [],
   // --- Outline
   outline: [],
   outlineWidth: [],
@@ -10922,17 +11029,127 @@ function useRowSelection({
   rowsSelectable,
   enableMultiRowSelection,
   rowDisabledPredicate,
-  onSelectionDidChange
+  onSelectionDidChange,
+  initiallySelected = EMPTY_ARRAY,
+  syncWithAppState
 }) {
+  var _a2;
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const [selectionInterval, setSelectionInterval] = useState(null);
   const { selectedItems, setSelectedRowIds, refreshSelection, idKey } = useSelectionContext();
   const walkableList = useMemo(() => {
     return visibleItems2.map((item2) => item2[idKey]);
   }, [idKey, visibleItems2]);
+  const [initialSelectionApplied, setInitialSelectionApplied] = useState(false);
   useEffect(() => {
     refreshSelection(rowsSelectable ? items : EMPTY_ARRAY);
   }, [refreshSelection, items, rowsSelectable]);
+  const appStateSelection = (_a2 = syncWithAppState == null ? void 0 : syncWithAppState.value) == null ? void 0 : _a2.selectedIds;
+  const prevAppStateSelection = usePrevious(appStateSelection);
+  const [syncState, setSyncState] = useState("idle");
+  const lastAppStateSelectionRef = useRef();
+  const lastTableSelectionRef = useRef();
+  const lastUpdateSourceRef = useRef(null);
+  useEffect(() => {
+    if (!rowsSelectable || !syncWithAppState || !appStateSelection || syncState === "updating_to_appstate") {
+      return;
+    }
+    const appStateChanged = appStateSelection !== prevAppStateSelection;
+    const isDifferentFromLastKnown = JSON.stringify([...appStateSelection || []].sort()) !== JSON.stringify([...lastAppStateSelectionRef.current || []].sort());
+    const wasNotOurUpdate = lastUpdateSourceRef.current !== "table";
+    if (appStateChanged && isDifferentFromLastKnown && wasNotOurUpdate && items.length > 0) {
+      setSyncState("updating_from_appstate");
+      const validIds = appStateSelection.filter(
+        (id) => items.some((item2) => item2[idKey] === id)
+      );
+      const idsToSelect = enableMultiRowSelection ? validIds : validIds.slice(0, 1);
+      lastAppStateSelectionRef.current = [...appStateSelection];
+      lastTableSelectionRef.current = [...idsToSelect];
+      lastUpdateSourceRef.current = "appstate";
+      setSelectedRowIds(idsToSelect);
+      setInitialSelectionApplied(true);
+    }
+  }, [
+    appStateSelection,
+    prevAppStateSelection,
+    items,
+    rowsSelectable,
+    syncWithAppState,
+    idKey,
+    enableMultiRowSelection,
+    setSelectedRowIds,
+    syncState
+  ]);
+  useEffect(() => {
+    var _a3;
+    if (!rowsSelectable || !syncWithAppState || syncState === "updating_from_appstate") {
+      return;
+    }
+    const currentSelectionIds = selectedItems.map((item2) => item2[idKey]);
+    const appStateSelectionIds = appStateSelection || [];
+    const tableChanged = JSON.stringify([...currentSelectionIds].sort()) !== JSON.stringify([...lastTableSelectionRef.current || []].sort());
+    const isDifferentFromAppState = JSON.stringify([...currentSelectionIds].sort()) !== JSON.stringify([...appStateSelectionIds].sort());
+    const wasNotAppStateUpdate = lastUpdateSourceRef.current !== "appstate";
+    if (tableChanged && isDifferentFromAppState && wasNotAppStateUpdate) {
+      setSyncState("updating_to_appstate");
+      lastTableSelectionRef.current = [...currentSelectionIds];
+      lastAppStateSelectionRef.current = [...currentSelectionIds];
+      lastUpdateSourceRef.current = "table";
+      (_a3 = syncWithAppState.update) == null ? void 0 : _a3.call(syncWithAppState, { selectedIds: currentSelectionIds });
+    }
+  }, [
+    selectedItems,
+    syncWithAppState,
+    appStateSelection,
+    idKey,
+    rowsSelectable,
+    syncState
+  ]);
+  useEffect(() => {
+    if (syncState !== "idle") {
+      const resetTimer = requestAnimationFrame(() => {
+        setSyncState("idle");
+      });
+      return () => cancelAnimationFrame(resetTimer);
+    }
+  }, [syncState, appStateSelection, selectedItems]);
+  useEffect(() => {
+    if (syncState === "idle") {
+      const clearTimer = requestAnimationFrame(() => {
+        lastUpdateSourceRef.current = null;
+      });
+      return () => cancelAnimationFrame(clearTimer);
+    }
+  }, [syncState]);
+  useEffect(() => {
+    if (syncWithAppState) {
+      return;
+    }
+    if (!rowsSelectable || !initiallySelected || initiallySelected.length === 0 || initialSelectionApplied) {
+      return;
+    }
+    if (items.length > 0) {
+      const frameId = requestAnimationFrame(() => {
+        const validIds = initiallySelected.filter((id) => items.some((item2) => item2[idKey] === id));
+        if (validIds.length > 0) {
+          const idsToSelect = enableMultiRowSelection ? validIds : [validIds[0]];
+          setSelectedRowIds(idsToSelect);
+          setInitialSelectionApplied(true);
+        }
+      });
+      return () => cancelAnimationFrame(frameId);
+    }
+  }, [
+    items,
+    initiallySelected,
+    rowsSelectable,
+    idKey,
+    enableMultiRowSelection,
+    setSelectedRowIds,
+    initialSelectionApplied,
+    selectedItems,
+    syncWithAppState
+  ]);
   const prevEnableMultiRowSelection = usePrevious(enableMultiRowSelection);
   useEffect(() => {
     if (prevEnableMultiRowSelection && !enableMultiRowSelection) {
@@ -11564,6 +11781,8 @@ const Table = forwardRef(
     headerHeight,
     rowsSelectable = defaultProps$Z.rowsSelectable,
     enableMultiRowSelection = defaultProps$Z.enableMultiRowSelection,
+    initiallySelected = defaultProps$Z.initiallySelected,
+    syncWithAppState,
     pageSizeOptions = defaultProps$Z.pageSizeOptions,
     pageSize = (pageSizeOptions == null ? void 0 : pageSizeOptions[0]) || DEFAULT_PAGE_SIZES[0],
     currentPageIndex = 0,
@@ -11632,7 +11851,9 @@ const Table = forwardRef(
       rowsSelectable,
       enableMultiRowSelection,
       rowDisabledPredicate,
-      onSelectionDidChange
+      onSelectionDidChange,
+      initiallySelected,
+      syncWithAppState
     });
     const dataWithOrder = useMemo(() => {
       return safeData.map((item2, index) => {
@@ -12133,6 +12354,7 @@ const defaultProps$Z = {
   loading: false,
   rowsSelectable: false,
   enableMultiRowSelection: true,
+  initiallySelected: EMPTY_ARRAY,
   pageSizeOptions: [5, 10, 15],
   sortingDirection: "ascending",
   autoFocus: false,
@@ -12149,7 +12371,7 @@ const defaultProps$Z = {
   pageSizeSelectorPosition: "start",
   pageInfoPosition: "end"
 };
-const COMP$1l = "Table";
+const COMP$1k = "Table";
 const TableMd = createMetadata({
   status: "stable",
   description: "`Table` presents structured data for viewing, sorting, selection, and interaction.",
@@ -12161,7 +12383,7 @@ const TableMd = createMetadata({
       `The component receives data via this property. The \`data\` property is a list of items that the \`Table\` can display.`
     ),
     isPaginated: {
-      description: `This property adds pagination controls to the \`${COMP$1l}\`.`,
+      description: `This property adds pagination controls to the \`${COMP$1k}\`.`,
       valueType: "boolean",
       defaultValue: defaultProps$Z.isPaginated
     },
@@ -12170,6 +12392,12 @@ const TableMd = createMetadata({
     ),
     headerHeight: d(`This optional property is used to specify the height of the table header.`),
     rowsSelectable: d(`Indicates whether the rows are selectable (\`true\`) or not (\`false\`).`),
+    initiallySelected: d(
+      `An array of IDs that should be initially selected when the table is rendered. This property only has an effect when the rowsSelectable property is set to \`true\`.`
+    ),
+    syncWithAppState: d(
+      `An AppState instance to synchronize the table's selection state with. The table will read from and write to the 'selectedIds' property of the AppState object. When provided, this takes precedence over the initiallySelected property for initial selection. You can use the AppState's didUpdate event to receive notifications when the selection changes.`
+    ),
     pageSize: d(
       `This property defines the number of rows to display per page when pagination is enabled.`
     ),
@@ -12231,13 +12459,13 @@ const TableMd = createMetadata({
       defaultValue: defaultProps$Z.hideHeader
     },
     iconNoSort: d(
-      `Allows setting an alternate icon displayed in the ${COMP$1l} column header when sorting is enabled, but the column remains unsorted. You can change the default icon for all ${COMP$1l} instances with the "icon.nosort:Table" declaration in the app configuration file.`
+      `Allows setting an alternate icon displayed in the ${COMP$1k} column header when sorting is enabled, but the column remains unsorted. You can change the default icon for all ${COMP$1k} instances with the "icon.nosort:Table" declaration in the app configuration file.`
     ),
     iconSortAsc: d(
-      `Allows setting an alernate icon displayed in the ${COMP$1l} column header when sorting is enabled, and the column is sorted in ascending order. You can change the default icon for all ${COMP$1l} instances with the "icon.sortasc:Table" declaration in the app configuration file.`
+      `Allows setting an alernate icon displayed in the ${COMP$1k} column header when sorting is enabled, and the column is sorted in ascending order. You can change the default icon for all ${COMP$1k} instances with the "icon.sortasc:Table" declaration in the app configuration file.`
     ),
     iconSortDesc: d(
-      `Allows setting an alternate icon displayed in the ${COMP$1l} column header when sorting is enabled, and the column is sorted in descending order. You can change the default icon for all ${COMP$1l} instances with the "icon.sortdesc:Table" declaration in the app configuration file.`
+      `Allows setting an alternate icon displayed in the ${COMP$1k} column header when sorting is enabled, and the column is sorted in descending order. You can change the default icon for all ${COMP$1k} instances with the "icon.sortdesc:Table" declaration in the app configuration file.`
     ),
     enableMultiRowSelection: {
       description: `This boolean property indicates whether you can select multiple rows in the table. This property only has an effect when the rowsSelectable property is set. Setting it to \`false\` limits selection to a single row.`,
@@ -12305,33 +12533,33 @@ const TableMd = createMetadata({
   },
   themeVars: parseScssVar(styles$12.themeVars),
   defaultThemeVars: {
-    [`padding-heading-${COMP$1l}`]: `$space-2 $space-1 $space-2 $space-2`,
-    [`padding-cell-${COMP$1l}`]: "$space-2 $space-1 $space-2 $space-2",
-    [`paddingHorizontal-cell-first-${COMP$1l}`]: "$space-5",
-    [`paddingHorizontal-cell-last-${COMP$1l}`]: "$space-1",
-    [`border-cell-${COMP$1l}`]: "1px solid $borderColor",
-    [`outlineWidth-heading-${COMP$1l}--focus`]: "$outlineWidth--focus",
-    [`outlineStyle-heading-${COMP$1l}--focus`]: "$outlineStyle--focus",
-    [`outlineOffset-heading-${COMP$1l}--focus`]: "$outlineOffset--focus",
-    [`fontSize-heading-${COMP$1l}`]: "$fontSize-tiny",
-    [`fontWeight-heading-${COMP$1l}`]: "$fontWeight-bold",
-    [`textTransform-heading-${COMP$1l}`]: "uppercase",
-    [`fontSize-row-${COMP$1l}`]: "$fontSize-sm",
+    [`padding-heading-${COMP$1k}`]: `$space-2 $space-1 $space-2 $space-2`,
+    [`padding-cell-${COMP$1k}`]: "$space-2 $space-1 $space-2 $space-2",
+    [`paddingHorizontal-cell-first-${COMP$1k}`]: "$space-5",
+    [`paddingHorizontal-cell-last-${COMP$1k}`]: "$space-1",
+    [`border-cell-${COMP$1k}`]: "1px solid $borderColor",
+    [`outlineWidth-heading-${COMP$1k}--focus`]: "$outlineWidth--focus",
+    [`outlineStyle-heading-${COMP$1k}--focus`]: "$outlineStyle--focus",
+    [`outlineOffset-heading-${COMP$1k}--focus`]: "$outlineOffset--focus",
+    [`fontSize-heading-${COMP$1k}`]: "$fontSize-tiny",
+    [`fontWeight-heading-${COMP$1k}`]: "$fontWeight-bold",
+    [`textTransform-heading-${COMP$1k}`]: "uppercase",
+    [`fontSize-row-${COMP$1k}`]: "$fontSize-sm",
     // [`backgroundColor-${COMP}`]: "transparent",
     // [`backgroundColor-row-${COMP}`]: "inherit",
-    [`backgroundColor-selected-${COMP$1l}--hover`]: `$backgroundColor-row-${COMP$1l}--hover`,
-    [`backgroundColor-pagination-${COMP$1l}`]: `$backgroundColor-${COMP$1l}`,
-    [`outlineColor-heading-${COMP$1l}--focus`]: "$outlineColor--focus",
-    [`textColor-pagination-${COMP$1l}`]: "$color-secondary",
-    [`backgroundColor-row-${COMP$1l}--hover`]: "$color-primary-50",
-    [`backgroundColor-selected-${COMP$1l}`]: "$color-primary-100",
-    [`backgroundColor-heading-${COMP$1l}--hover`]: "$color-surface-200",
-    [`backgroundColor-heading-${COMP$1l}--active`]: "$color-surface-300",
-    [`backgroundColor-heading-${COMP$1l}`]: "$color-surface-100",
-    [`textColor-heading-${COMP$1l}`]: "$color-surface-500",
-    [`border-${COMP$1l}`]: "0px solid transparent",
-    [`borderBottom-last-row-${COMP$1l}`]: `$borderBottom-cell-${COMP$1l}`,
-    [`borderRadius-${COMP$1l}`]: "$borderRadius"
+    [`backgroundColor-selected-${COMP$1k}--hover`]: `$backgroundColor-row-${COMP$1k}--hover`,
+    [`backgroundColor-pagination-${COMP$1k}`]: `$backgroundColor-${COMP$1k}`,
+    [`outlineColor-heading-${COMP$1k}--focus`]: "$outlineColor--focus",
+    [`textColor-pagination-${COMP$1k}`]: "$color-secondary",
+    [`backgroundColor-row-${COMP$1k}--hover`]: "$color-primary-50",
+    [`backgroundColor-selected-${COMP$1k}`]: "$color-primary-100",
+    [`backgroundColor-heading-${COMP$1k}--hover`]: "$color-surface-200",
+    [`backgroundColor-heading-${COMP$1k}--active`]: "$color-surface-300",
+    [`backgroundColor-heading-${COMP$1k}`]: "$color-surface-100",
+    [`textColor-heading-${COMP$1k}`]: "$color-surface-500",
+    [`border-${COMP$1k}`]: "0px solid transparent",
+    [`borderBottom-last-row-${COMP$1k}`]: `$borderBottom-cell-${COMP$1k}`,
+    [`borderRadius-${COMP$1k}`]: "$borderRadius"
   }
 });
 const TableWithColumns = memo(forwardRef(
@@ -12451,7 +12679,9 @@ const TableWithColumns = memo(forwardRef(
           pageInfoPosition: extractValue.asOptionalString(node.props.pageInfoPosition),
           showCurrentPage: extractValue.asOptionalBoolean(node.props.showCurrentPage),
           showPageInfo: extractValue.asOptionalBoolean(node.props.showPageInfo),
-          showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector)
+          showPageSizeSelector: extractValue.asOptionalBoolean(node.props.showPageSizeSelector),
+          initiallySelected: extractValue(node.props.initiallySelected),
+          syncWithAppState: extractValue(node.props.syncWithAppState)
         }
       )
     ] });
@@ -12463,7 +12693,7 @@ const TableWithColumns = memo(forwardRef(
 ));
 TableWithColumns.displayName = "TableWithColumns";
 const tableComponentRenderer = createComponentRenderer(
-  COMP$1l,
+  COMP$1k,
   TableMd,
   ({
     extractValue,
@@ -12547,7 +12777,7 @@ function StickyBox({ children, uid, style: style2, to = defaultProps$Y.to, class
     )
   ] });
 }
-const COMP$1k = "StickyBox";
+const COMP$1j = "StickyBox";
 const StickyBoxMd = createMetadata({
   status: "stable",
   description: "`StickyBox` remains fixed at the top or bottom of the screen as the user scrolls.",
@@ -12561,11 +12791,11 @@ const StickyBoxMd = createMetadata({
   },
   themeVars: parseScssVar(styles$$.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$1k}`]: "$backgroundColor"
+    [`backgroundColor-${COMP$1j}`]: "$backgroundColor"
   }
 });
 const stickyBoxComponentRenderer = createComponentRenderer(
-  COMP$1k,
+  COMP$1j,
   StickyBoxMd,
   ({ node, renderChild: renderChild2, extractValue, className }) => {
     var _a2;
@@ -12608,7 +12838,7 @@ const Badge = forwardRef(function Badge2({ children, color, variant = defaultPro
     }
   );
 });
-const COMP$1j = "Badge";
+const COMP$1i = "Badge";
 const BadgeMd = createMetadata({
   status: "stable",
   description: "`Badge` displays small text labels with colored backgrounds, commonly used for status indicators, categories, tags, and counts. It supports dynamic color mapping based on content values, useful for status systems and data categorization.",
@@ -12625,7 +12855,7 @@ const BadgeMd = createMetadata({
       defaultValue: defaultProps$X.variant
     },
     colorMap: {
-      description: `The \`${COMP$1j}\` component supports the mapping of a list of colors using the \`value\` prop as the key. If this property is not set, no color mapping is used.`
+      description: `The \`${COMP$1i}\` component supports the mapping of a list of colors using the \`value\` prop as the key. If this property is not set, no color mapping is used.`
     },
     themeColor: dInternal(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
     indicatorText: dInternal(
@@ -12640,18 +12870,18 @@ const BadgeMd = createMetadata({
   events: {},
   themeVars: parseScssVar(styles$_.themeVars),
   defaultThemeVars: {
-    [`padding-${COMP$1j}`]: `$space-0_5 $space-2`,
-    [`border-${COMP$1j}`]: `0px solid $borderColor`,
-    [`padding-${COMP$1j}-pill`]: `$space-0_5 $space-2`,
-    [`borderRadius-${COMP$1j}`]: "4px",
-    [`fontSize-${COMP$1j}`]: "0.8em",
-    [`fontSize-${COMP$1j}-pill`]: "0.8em",
-    [`backgroundColor-${COMP$1j}`]: "rgb(from $color-secondary-500 r g b / 0.6)",
-    [`textColor-${COMP$1j}`]: "$const-color-surface-0"
+    [`padding-${COMP$1i}`]: `$space-0_5 $space-2`,
+    [`border-${COMP$1i}`]: `0px solid $borderColor`,
+    [`padding-${COMP$1i}-pill`]: `$space-0_5 $space-2`,
+    [`borderRadius-${COMP$1i}`]: "4px",
+    [`fontSize-${COMP$1i}`]: "0.8em",
+    [`fontSize-${COMP$1i}-pill`]: "0.8em",
+    [`backgroundColor-${COMP$1i}`]: "rgb(from $color-secondary-500 r g b / 0.6)",
+    [`textColor-${COMP$1i}`]: "$const-color-surface-0"
   }
 });
 const badgeComponentRenderer = createComponentRenderer(
-  COMP$1j,
+  COMP$1i,
   BadgeMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     var _a2;
@@ -12751,23 +12981,23 @@ function abbrevName(name) {
   }
   return null;
 }
-const COMP$1i = "Avatar";
+const COMP$1h = "Avatar";
 const AvatarMd = createMetadata({
   status: "stable",
   description: "`Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.",
   props: {
     size: {
-      description: `This property defines the display size of the ${COMP$1i}.`,
+      description: `This property defines the display size of the ${COMP$1h}.`,
       availableValues: sizeMd,
       valueType: "string",
       defaultValue: defaultProps$W.size
     },
     name: {
-      description: `This property sets the name value the ${COMP$1i} uses to display initials. If neither this property nor \`url\` is defined, an empty avatar is displayed.`,
+      description: `This property sets the name value the ${COMP$1h} uses to display initials. If neither this property nor \`url\` is defined, an empty avatar is displayed.`,
       valueType: "string"
     },
     url: {
-      description: `This property specifies the URL of the image to display in the ${COMP$1i}. If neither this property nor \`name\` is defined, an empty avatar is displayed.`,
+      description: `This property specifies the URL of the image to display in the ${COMP$1h}. If neither this property nor \`name\` is defined, an empty avatar is displayed.`,
       valueType: "string"
     }
   },
@@ -12776,16 +13006,16 @@ const AvatarMd = createMetadata({
   },
   themeVars: parseScssVar(styles$Z.themeVars),
   defaultThemeVars: {
-    [`borderRadius-${COMP$1i}`]: "4px",
-    [`boxShadow-${COMP$1i}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
-    [`textColor-${COMP$1i}`]: "$textColor-secondary",
-    [`fontWeight-${COMP$1i}`]: "$fontWeight-bold",
-    [`border-${COMP$1i}`]: "0px solid $color-surface-400A80",
-    [`backgroundColor-${COMP$1i}`]: "$color-surface-100"
+    [`borderRadius-${COMP$1h}`]: "4px",
+    [`boxShadow-${COMP$1h}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
+    [`textColor-${COMP$1h}`]: "$textColor-secondary",
+    [`fontWeight-${COMP$1h}`]: "$fontWeight-bold",
+    [`border-${COMP$1h}`]: "0px solid $color-surface-400A80",
+    [`backgroundColor-${COMP$1h}`]: "$color-surface-100"
   }
 });
 const avatarComponentRenderer = createComponentRenderer(
-  COMP$1i,
+  COMP$1h,
   AvatarMd,
   ({ node, extractValue, lookupEventHandler, className, extractResourceUrl }) => {
     var _a2;
@@ -12838,7 +13068,7 @@ const ContentSeparator = forwardRef(
     );
   }
 );
-const COMP$1h = "ContentSeparator";
+const COMP$1g = "ContentSeparator";
 const ContentSeparatorMd = createMetadata({
   status: "stable",
   description: "`ContentSeparator` creates visual dividers between content sections using horizontal or vertical lines. It's essential for improving readability by breaking up dense content, separating list items, or creating clear boundaries between different UI sections.",
@@ -12856,8 +13086,8 @@ const ContentSeparatorMd = createMetadata({
   },
   themeVars: parseScssVar(styles$Y.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$1h}`]: "$color-surface-200",
-    [`size-${COMP$1h}`]: "1px",
+    [`backgroundColor-${COMP$1g}`]: "$color-surface-200",
+    [`size-${COMP$1g}`]: "1px",
     light: {
       // --- No light-specific theme vars
     },
@@ -12867,7 +13097,7 @@ const ContentSeparatorMd = createMetadata({
   }
 });
 const contentSeparatorComponentRenderer = createComponentRenderer(
-  COMP$1h,
+  COMP$1g,
   ContentSeparatorMd,
   ({ node, className, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -12947,13 +13177,13 @@ const Card = forwardRef(function Card2({
     }
   );
 });
-const COMP$1g = "Card";
+const COMP$1f = "Card";
 const CardMd = createMetadata({
   status: "stable",
   description: "`Card` is a versatile container that groups related content with a visual boundary, typically featuring background color, padding, borders, and rounded corners. It's ideal for organizing information, creating sections, and establishing visual hierarchy in your interface.",
   props: {
     avatarUrl: {
-      description: `The url for an avarar image. If not specified, but [\`showAvatar\`](#showAvatar) is true, ${COMP$1g} will show the first letters of the [\`title\`](#title).`,
+      description: `The url for an avarar image. If not specified, but [\`showAvatar\`](#showAvatar) is true, ${COMP$1f} will show the first letters of the [\`title\`](#title).`,
       type: "string"
     },
     showAvatar: {
@@ -12979,33 +13209,33 @@ const CardMd = createMetadata({
       valueType: "string"
     },
     orientation: {
-      description: `An optional property that governs the ${COMP$1g}'s orientation (whether the ${COMP$1g} lays out its children in a row or a column). If the orientation is set to \`horizontal\`, the ${COMP$1g} will display its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`,
+      description: `An optional property that governs the ${COMP$1f}'s orientation (whether the ${COMP$1f} lays out its children in a row or a column). If the orientation is set to \`horizontal\`, the ${COMP$1f} will display its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`,
       availableValues: orientationOptionMd,
       valueType: "string",
       defaultValue: defaultProps$U.orientation
     }
   },
   events: {
-    click: dClick(COMP$1g)
+    click: dClick(COMP$1f)
   },
   themeVars: parseScssVar(styles$X.themeVars),
   defaultThemeVars: {
-    [`padding-${COMP$1g}`]: "$space-4",
-    [`border-${COMP$1g}`]: "1px solid $borderColor",
-    [`borderRadius-${COMP$1g}`]: "$borderRadius",
-    [`boxShadow-${COMP$1g}`]: "none",
-    [`backgroundColor-${COMP$1g}`]: "$color-surface-raised",
-    [`gap-${COMP$1g}`]: "var(--stack-gap-default)",
-    [`gap-title-${COMP$1g}`]: "$gap-none",
-    [`gap-avatar-${COMP$1g}`]: "$gap-normal",
-    [`verticalAlignment-title-${COMP$1g}`]: "center"
+    [`padding-${COMP$1f}`]: "$space-4",
+    [`border-${COMP$1f}`]: "1px solid $borderColor",
+    [`borderRadius-${COMP$1f}`]: "$borderRadius",
+    [`boxShadow-${COMP$1f}`]: "none",
+    [`backgroundColor-${COMP$1f}`]: "$color-surface-raised",
+    [`gap-${COMP$1f}`]: "var(--stack-gap-default)",
+    [`gap-title-${COMP$1f}`]: "$gap-none",
+    [`gap-avatar-${COMP$1f}`]: "$gap-normal",
+    [`verticalAlignment-title-${COMP$1f}`]: "center"
   },
   themeVarDescriptions: {
-    [`gap-${COMP$1g}`]: "The gap between the component's children.",
-    [`gap-title-${COMP$1g}`]: "The gap between the title and the subtitle",
-    [`gap-avatar-${COMP$1g}`]: "The gap between the avatar and the title panel",
-    [`horizontalAlignment-title-${COMP$1g}`]: "The horizontal alignment of panel with the title and subtitle",
-    [`verticalAlignment-title-${COMP$1g}`]: "The vertical alignment of the title and subtitle to the avatar"
+    [`gap-${COMP$1f}`]: "The gap between the component's children.",
+    [`gap-title-${COMP$1f}`]: "The gap between the title and the subtitle",
+    [`gap-avatar-${COMP$1f}`]: "The gap between the avatar and the title panel",
+    [`horizontalAlignment-title-${COMP$1f}`]: "The horizontal alignment of panel with the title and subtitle",
+    [`verticalAlignment-title-${COMP$1f}`]: "The vertical alignment of the title and subtitle to the avatar"
   }
 });
 const cardComponentRenderer = createComponentRenderer(
@@ -13176,13 +13406,13 @@ const FlowLayout = forwardRef(function FlowLayout2({ style: style2, className, c
   }, [_columnGap, _rowGap]);
   return /* @__PURE__ */ jsx(FlowLayoutContext.Provider, { value: flowLayoutContextValue, children: /* @__PURE__ */ jsx("div", { style: style2, className, ref: forwardedRef, ...rest, children: /* @__PURE__ */ jsx("div", { className: styles$W.outer, children: /* @__PURE__ */ jsx("div", { className: classnames(styles$W.flowContainer, styles$W.horizontal), style: innerStyle, children }) }) }) });
 });
-const COMP$1f = "FlowLayout";
+const COMP$1e = "FlowLayout";
 const FlowLayoutMd = createMetadata({
   status: "stable",
   description: "`FlowLayout` positions content in rows with automatic wrapping. When items exceed the available horizontal space, they automatically wrap to a new line.",
   props: {
     gap: {
-      description: `This property defines the gap between items in the same row and between rows. The ${COMP$1f} component creates a new row when an item is about to overflow the current row.`,
+      description: `This property defines the gap between items in the same row and between rows. The ${COMP$1e} component creates a new row when an item is about to overflow the current row.`,
       type: "string",
       defaultValue: "$gap-normal"
     },
@@ -13191,14 +13421,14 @@ const FlowLayoutMd = createMetadata({
       defaultValue: defaultProps$T.columnGap
     },
     rowGap: {
-      description: `The \`rowGap\` property specifies the space between the ${COMP$1f} rows; it overrides the \`gap\` value.`,
+      description: `The \`rowGap\` property specifies the space between the ${COMP$1e} rows; it overrides the \`gap\` value.`,
       defaultValue: defaultProps$T.rowGap
     }
   },
   themeVars: parseScssVar(styles$W.themeVars)
 });
 const flowLayoutComponentRenderer = createComponentRenderer(
-  COMP$1f,
+  COMP$1e,
   FlowLayoutMd,
   ({ node, renderChild: renderChild2, className, extractValue }) => {
     var _a2, _b, _c, _d;
@@ -13234,14 +13464,14 @@ const flowLayoutComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$z = `'{"padding-ModalDialog": "var(--xmlui-padding-ModalDialog)", "paddingHorizontal-ModalDialog": "var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingVertical-ModalDialog": "var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog))", "paddingLeft-ModalDialog": "var(--xmlui-paddingLeft-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingRight-ModalDialog": "var(--xmlui-paddingRight-ModalDialog, var(--xmlui-paddingHorizontal-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingTop-ModalDialog": "var(--xmlui-paddingTop-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "paddingBottom-ModalDialog": "var(--xmlui-paddingBottom-ModalDialog, var(--xmlui-paddingVertical-ModalDialog, var(--xmlui-padding-ModalDialog)))", "padding-overlay-ModalDialog": "var(--xmlui-padding-overlay-ModalDialog)", "paddingHorizontal-overlay-ModalDialog": "var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingVertical-overlay-ModalDialog": "var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog))", "paddingLeft-overlay-ModalDialog": "var(--xmlui-paddingLeft-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingRight-overlay-ModalDialog": "var(--xmlui-paddingRight-overlay-ModalDialog, var(--xmlui-paddingHorizontal-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingTop-overlay-ModalDialog": "var(--xmlui-paddingTop-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "paddingBottom-overlay-ModalDialog": "var(--xmlui-paddingBottom-overlay-ModalDialog, var(--xmlui-paddingVertical-overlay-ModalDialog, var(--xmlui-padding-overlay-ModalDialog)))", "Dialog:backgroundColor-ModalDialog": "var(--xmlui-backgroundColor-ModalDialog)", "Dialog:backgroundColor-overlay-ModalDialog": "var(--xmlui-backgroundColor-overlay-ModalDialog)", "Dialog:borderRadius-ModalDialog": "var(--xmlui-borderRadius-ModalDialog)", "Dialog:fontFamily-ModalDialog": "var(--xmlui-fontFamily-ModalDialog)", "Dialog:textColor-ModalDialog": "var(--xmlui-textColor-ModalDialog)", "Dialog:minWidth-ModalDialog": "var(--xmlui-minWidth-ModalDialog)", "Dialog:maxWidth-ModalDialog": "var(--xmlui-maxWidth-ModalDialog)", "Dialog:marginBottom-title-ModalDialog": "var(--xmlui-marginBottom-title-ModalDialog)"}'`;
-const overlay$2 = "_overlay_hcifu_14";
-const fullScreen = "_fullScreen_hcifu_22";
-const content$5 = "_content_hcifu_28";
-const overlayBg$1 = "_overlayBg_hcifu_36";
-const nested = "_nested_hcifu_42";
-const dialogTitle = "_dialogTitle_hcifu_77";
-const innerContent = "_innerContent_hcifu_82";
-const closeButton = "_closeButton_hcifu_107";
+const overlay$2 = "_overlay_r7ppn_14";
+const fullScreen = "_fullScreen_r7ppn_22";
+const content$5 = "_content_r7ppn_28";
+const overlayBg$1 = "_overlayBg_r7ppn_37";
+const nested = "_nested_r7ppn_43";
+const dialogTitle = "_dialogTitle_r7ppn_78";
+const innerContent = "_innerContent_r7ppn_83";
+const closeButton = "_closeButton_r7ppn_108";
 const styles$V = {
   themeVars: themeVars$z,
   overlay: overlay$2,
@@ -13461,7 +13691,7 @@ const ModalDialog = React__default.forwardRef(
   }
 );
 ModalDialog.displayName = "ModalDialog";
-const COMP$1e = "ModalDialog";
+const COMP$1d = "ModalDialog";
 const ModalDialogMd = createMetadata({
   status: "stable",
   description: "`ModalDialog` creates overlay dialogs that appear on top of the main interface, ideal for forms, confirmations, detailed views, or any content that requires focused user attention. Dialogs are programmatically opened using the `open()` method and can receive parameters for dynamic content.",
@@ -13488,15 +13718,15 @@ const ModalDialogMd = createMetadata({
   },
   events: {
     open: d(
-      `This event is fired when the \`${COMP$1e}\` is opened either via a \`when\` or an imperative API call (\`open()\`).`
+      `This event is fired when the \`${COMP$1d}\` is opened either via a \`when\` or an imperative API call (\`open()\`).`
     ),
     close: d(
-      `This event is fired when the close button is pressed or the user clicks outside the \`${COMP$1e}\`.`
+      `This event is fired when the close button is pressed or the user clicks outside the \`${COMP$1d}\`.`
     )
   },
   apis: {
     close: {
-      description: `This method is used to close the \`${COMP$1e}\`. Invoke it using \`modalId.close()\` where \`modalId\` refers to a \`ModalDialog\` component.`,
+      description: `This method is used to close the \`${COMP$1d}\`. Invoke it using \`modalId.close()\` where \`modalId\` refers to a \`ModalDialog\` component.`,
       signature: "close(): void"
     },
     open: {
@@ -13515,18 +13745,18 @@ const ModalDialogMd = createMetadata({
   },
   themeVars: parseScssVar(styles$V.themeVars),
   defaultThemeVars: {
-    ...paddingSubject(COMP$1e, { all: "$space-7" }),
-    [`backgroundColor-${COMP$1e}`]: "$backgroundColor-primary",
-    [`backgroundColor-overlay-${COMP$1e}`]: "$backgroundColor-overlay",
-    [`textColor-${COMP$1e}`]: "$textColor-primary",
-    [`borderRadius-${COMP$1e}`]: "$borderRadius",
-    [`fontFamily-${COMP$1e}`]: "$fontFamily",
-    [`maxWidth-${COMP$1e}`]: "450px",
-    [`marginBottom-title-${COMP$1e}`]: "0"
+    ...paddingSubject(COMP$1d, { all: "$space-7" }),
+    [`backgroundColor-${COMP$1d}`]: "$backgroundColor-primary",
+    [`backgroundColor-overlay-${COMP$1d}`]: "$backgroundColor-overlay",
+    [`textColor-${COMP$1d}`]: "$textColor-primary",
+    [`borderRadius-${COMP$1d}`]: "$borderRadius",
+    [`fontFamily-${COMP$1d}`]: "$fontFamily",
+    [`maxWidth-${COMP$1d}`]: "450px",
+    [`marginBottom-title-${COMP$1d}`]: "0"
   }
 });
 const modalViewComponentRenderer = createComponentRenderer(
-  COMP$1e,
+  COMP$1d,
   ModalDialogMd,
   ({
     node,
@@ -13606,7 +13836,7 @@ const NoResult = forwardRef(function NoResult2({
     }
   );
 });
-const COMP$1d = "NoResult";
+const COMP$1c = "NoResult";
 const NoResultMd = createMetadata({
   status: "stable",
   description: "`NoResult` displays a visual indication that a query or search returned nothing.",
@@ -13625,10 +13855,10 @@ const NoResultMd = createMetadata({
   },
   themeVars: parseScssVar(styles$U.themeVars),
   defaultThemeVars: {
-    [`border-${COMP$1d}`]: "0px solid $borderColor",
-    [`paddingVertical-${COMP$1d}`]: "$space-2",
-    [`gap-icon-${COMP$1d}`]: "$space-2",
-    [`size-icon-${COMP$1d}`]: "$space-8",
+    [`border-${COMP$1c}`]: "0px solid $borderColor",
+    [`paddingVertical-${COMP$1c}`]: "$space-2",
+    [`gap-icon-${COMP$1c}`]: "$space-2",
+    [`size-icon-${COMP$1c}`]: "$space-8",
     light: {
       // --- No light-specific theme vars
     },
@@ -13638,7 +13868,7 @@ const NoResultMd = createMetadata({
   }
 });
 const noResultComponentRenderer = createComponentRenderer(
-  COMP$1d,
+  COMP$1c,
   NoResultMd,
   ({ node, extractValue, className }) => {
     return /* @__PURE__ */ jsx(
@@ -13760,7 +13990,7 @@ const FileUploadDropZone = forwardRef(function FileUploadDropZone2({
     ] })
   ] });
 });
-const COMP$1c = "FileUploadDropZone";
+const COMP$1b = "FileUploadDropZone";
 const FileUploadDropZoneMd = createMetadata({
   status: "stable",
   description: "`FileUploadDropZone` enables users to upload files by dragging and dropping files from their local file system onto a designated area within the UI.",
@@ -13804,7 +14034,7 @@ const FileUploadDropZoneMd = createMetadata({
   }
 });
 const fileUploadDropZoneComponentRenderer = createComponentRenderer(
-  COMP$1c,
+  COMP$1b,
   FileUploadDropZoneMd,
   ({ node, extractValue, updateState, renderChild: renderChild2, lookupEventHandler, registerComponentApi, className }) => {
     return /* @__PURE__ */ jsx(
@@ -13825,7 +14055,7 @@ const fileUploadDropZoneComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$1b = "Icon";
+const COMP$1a = "Icon";
 const IconMd = createMetadata({
   status: "stable",
   description: "`Icon` displays scalable vector icons from XMLUI's built-in icon registry using simple name references. Icons are commonly used in buttons, navigation elements, and status indicators.",
@@ -13834,7 +14064,7 @@ const IconMd = createMetadata({
       "This string property specifies the name of the icon to display. All icons have unique, case-sensitive names identifying them. If the icon name is not set, the `fallback` value is used."
     ),
     size: {
-      description: `This property defines the size of the \`${COMP$1b}\`. Note that setting the \`height\` and/or the \`width\` of the component will override this property. You can use az explicit size value (e.g., 32px) or one of these predefined values: \`xs\`, \`sm\`, \`md\`, \`lg\`.`,
+      description: `This property defines the size of the \`${COMP$1a}\`. Note that setting the \`height\` and/or the \`width\` of the component will override this property. You can use az explicit size value (e.g., 32px) or one of these predefined values: \`xs\`, \`sm\`, \`md\`, \`lg\`.`,
       availableValues: ["xs", "sm", "md", "lg"]
     },
     fallback: d(
@@ -13846,11 +14076,11 @@ const IconMd = createMetadata({
   },
   themeVars: parseScssVar(styles$1f.themeVars),
   defaultThemeVars: {
-    [`size-${COMP$1b}`]: "1.25em"
+    [`size-${COMP$1a}`]: "1.25em"
   }
 });
 const iconComponentRenderer = createComponentRenderer(
-  COMP$1b,
+  COMP$1a,
   IconMd,
   ({ node, extractValue, className, lookupEventHandler }) => {
     return /* @__PURE__ */ jsx(
@@ -13922,7 +14152,7 @@ const IFrame = memo(forwardRef(function IFrame2({
     }
   );
 }));
-const COMP$1a = "IFrame";
+const COMP$19 = "IFrame";
 const IFrameMd = createMetadata({
   status: "stable",
   description: "`IFrame` embeds external content from another HTML document into the current page. It provides security controls through sandbox and allow attributes, and supports features like fullscreen display and referrer policy configuration.",
@@ -13959,7 +14189,7 @@ const IFrameMd = createMetadata({
   },
   events: {
     load: {
-      description: `This event is triggered when the ${COMP$1a} content has finished loading.`
+      description: `This event is triggered when the ${COMP$19} content has finished loading.`
     }
   },
   apis: {
@@ -13982,14 +14212,14 @@ const IFrameMd = createMetadata({
   },
   themeVars: parseScssVar(styles$S.themeVars),
   defaultThemeVars: {
-    [`width-${COMP$1a}`]: "100%",
-    [`height-${COMP$1a}`]: "300px",
-    [`borderRadius-${COMP$1a}`]: "$borderRadius",
-    [`border-${COMP$1a}`]: "1px solid $borderColor"
+    [`width-${COMP$19}`]: "100%",
+    [`height-${COMP$19}`]: "300px",
+    [`borderRadius-${COMP$19}`]: "$borderRadius",
+    [`border-${COMP$19}`]: "1px solid $borderColor"
   }
 });
 const iframeComponentRenderer = createComponentRenderer(
-  COMP$1a,
+  COMP$19,
   IFrameMd,
   ({ node, extractValue, className, extractResourceUrl, lookupEventHandler, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
@@ -14037,7 +14267,7 @@ function Items({ items, renderItem, reverse: reverse2 = defaultProps$P.reverse }
     ) }, index);
   }) });
 }
-const COMP$19 = "Items";
+const COMP$18 = "Items";
 const ItemsMd = createMetadata({
   status: "stable",
   description: "`Items` renders data arrays without built-in layout or styling, providing a lightweight alternative to `List`. Unlike `List`, it provides no virtualization, grouping, or visual formatting — just pure data iteration.",
@@ -14064,7 +14294,7 @@ const ItemsMd = createMetadata({
   },
   opaque: true
 });
-const itemsComponentRenderer = createComponentRenderer(COMP$19, ItemsMd, (rendererContext) => {
+const itemsComponentRenderer = createComponentRenderer(COMP$18, ItemsMd, (rendererContext) => {
   const { node, renderChild: renderChild2, extractValue, layoutContext } = rendererContext;
   return /* @__PURE__ */ jsx(
     Items,
@@ -14086,10 +14316,10 @@ const itemsComponentRenderer = createComponentRenderer(COMP$19, ItemsMd, (render
     }
   );
 });
-const COMP$18 = "SelectionStore";
+const COMP$17 = "SelectionStore";
 const SelectionStoreMd = createMetadata({
   status: "deprecated",
-  description: `The \`${COMP$18}\` is a non-visual component that may wrap components (items) and manage their selection state to accommodate the usage of other actions.`,
+  description: `The \`${COMP$17}\` is a non-visual component that may wrap components (items) and manage their selection state to accommodate the usage of other actions.`,
   props: {
     idKey: {
       description: `The selected items in the selection store needs to have a unique ID to use as an unambiguous key for that particular item. This property uniquely identifies the selected object item via a given property. By default, the key attribute is \`"id"\`.`,
@@ -14098,7 +14328,7 @@ const SelectionStoreMd = createMetadata({
   }
 });
 const selectionStoreComponentRenderer = createComponentRenderer(
-  COMP$18,
+  COMP$17,
   SelectionStoreMd,
   (rendererContext) => {
     const { node, state, updateState, renderChild: renderChild2, registerComponentApi } = rendererContext;
@@ -14114,7 +14344,7 @@ const selectionStoreComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$17 = "Image";
+const COMP$16 = "Image";
 const ImageMd = createMetadata({
   status: "stable",
   description: "`Image` displays pictures from URLs or local sources with built-in responsive sizing, aspect ratio control, and accessibility features. It handles different image formats and provides options for lazy loading and click interactions.",
@@ -14122,6 +14352,9 @@ const ImageMd = createMetadata({
     src: d(
       "This property is used to indicate the source (path) of the image to display. When not defined, no image is displayed."
     ),
+    data: d(
+      `This property contains the binary data that represents the image.`
+    ),
     alt: d(`This optional property specifies an alternate text for the image.`),
     fit: {
       description: "This property sets how the image content should be resized to fit its container.",
@@ -14144,18 +14377,19 @@ const ImageMd = createMetadata({
     animation: dInternal(`The optional animation object to be applied to the component`)
   },
   events: {
-    click: dClick(COMP$17)
+    click: dClick(COMP$16)
   },
   themeVars: parseScssVar(styles$1a.themeVars)
 });
 const imageComponentRenderer = createComponentRenderer(
-  COMP$17,
+  COMP$16,
   ImageMd,
   ({ node, extractValue, className, extractResourceUrl }) => {
     return /* @__PURE__ */ jsx(
       Image,
       {
-        src: extractResourceUrl(node.props.src),
+        src: node.props.src ? extractResourceUrl(node.props.src) : void 0,
+        imageData: extractValue(node.props.data),
         alt: extractValue(node.props.alt),
         fit: extractValue(node.props.fit),
         lazyLoad: extractValue.asOptionalBoolean(node.props.lazyLoad),
@@ -14173,7 +14407,7 @@ const defaultProps$O = {
 const PageMetaTitle = ({ title: title2 = defaultProps$O.title }) => {
   return /* @__PURE__ */ jsx(Helmet, { title: title2 });
 };
-const COMP$16 = "PageMetaTitle";
+const COMP$15 = "PageMetaTitle";
 const PageMetaTitleMd = createMetadata({
   status: "stable",
   description: "`PageMetaTitle` dynamically sets or updates the browser tab title, enabling pages and components to override the default application name with context-specific titles.",
@@ -14185,7 +14419,7 @@ const PageMetaTitleMd = createMetadata({
   }
 });
 const pageMetaTitleComponentRenderer = createComponentRenderer(
-  COMP$16,
+  COMP$15,
   PageMetaTitleMd,
   ({ node, extractValue, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(PageMetaTitle, { title: extractValue(node.props.value) || renderChild2(node.children) });
@@ -14224,7 +14458,7 @@ const ProgressBar = forwardRef(function ProgressBar2({ value = defaultProps$N.va
     }
   );
 });
-const COMP$15 = "ProgressBar";
+const COMP$14 = "ProgressBar";
 const ProgressBarMd = createMetadata({
   status: "stable",
   description: "`ProgressBar` provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete).",
@@ -14237,15 +14471,15 @@ const ProgressBarMd = createMetadata({
   },
   themeVars: parseScssVar(styles$R.themeVars),
   defaultThemeVars: {
-    [`borderRadius-${COMP$15}`]: "$borderRadius",
-    [`borderRadius-indicator-${COMP$15}`]: "0px",
-    [`thickness-${COMP$15}`]: "$space-2",
-    [`backgroundColor-${COMP$15}`]: "$color-surface-200",
-    [`color-indicator-${COMP$15}`]: "$color-primary-500"
+    [`borderRadius-${COMP$14}`]: "$borderRadius",
+    [`borderRadius-indicator-${COMP$14}`]: "0px",
+    [`thickness-${COMP$14}`]: "$space-2",
+    [`backgroundColor-${COMP$14}`]: "$color-surface-200",
+    [`color-indicator-${COMP$14}`]: "$color-primary-500"
   }
 });
 const progressBarComponentRenderer = createComponentRenderer(
-  COMP$15,
+  COMP$14,
   ProgressBarMd,
   ({ node, extractValue, className }) => {
     return /* @__PURE__ */ jsx(
@@ -14474,13 +14708,13 @@ const Splitter = ({
     }
   );
 };
-const COMP$14 = "Splitter";
+const COMP$13 = "Splitter";
 const baseSplitterMd = createMetadata({
   status: "stable",
   description: "`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them.",
   props: {
     swapped: {
-      description: `This optional booelan property indicates whether the \`${COMP$14}\` sections are layed out as primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
+      description: `This optional booelan property indicates whether the \`${COMP$13}\` sections are layed out as primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
       valueType: "boolean",
       defaultValue: defaultProps$M.swapped
     },
@@ -14519,10 +14753,10 @@ const baseSplitterMd = createMetadata({
   },
   themeVars: parseScssVar(styles$Q.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-resizer-${COMP$14}`]: "$color-surface-100",
-    [`thickness-resizer-${COMP$14}`]: "5px",
-    [`cursor-resizer-horizontal-${COMP$14}`]: "ew-resize",
-    [`cursor-resizer-vertical-${COMP$14}`]: "ns-resize"
+    [`backgroundColor-resizer-${COMP$13}`]: "$color-surface-100",
+    [`thickness-resizer-${COMP$13}`]: "5px",
+    [`cursor-resizer-horizontal-${COMP$13}`]: "ew-resize",
+    [`cursor-resizer-vertical-${COMP$13}`]: "ns-resize"
   }
 });
 const SplitterMd = {
@@ -14531,8 +14765,8 @@ const SplitterMd = {
     ...baseSplitterMd.props
   }
 };
-const HSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$14 };
-const VSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$14 };
+const HSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$13 };
+const VSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$13 };
 const DEFAULT_ORIENTATION = "vertical";
 function renderSplitter({
   node,
@@ -14563,7 +14797,7 @@ function renderSplitter({
   );
 }
 const splitterComponentRenderer = createComponentRenderer(
-  COMP$14,
+  COMP$13,
   SplitterMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
     return renderSplitter({
@@ -14930,7 +15164,7 @@ function Queue({
   }, [doComplete, doSingle, prevQueue, queue]);
   return null;
 }
-const COMP$13 = "Queue";
+const COMP$12 = "Queue";
 const QueueMd = createMetadata({
   status: "stable",
   description: "`Queue` manages sequential processing of items in FIFO (first-in, first-out) order. It is a non-visual component but provides UI progress reporting and result display.",
@@ -15003,7 +15237,7 @@ const QueueMd = createMetadata({
   }
 });
 const queueComponentRenderer = createComponentRenderer(
-  COMP$13,
+  COMP$12,
   QueueMd,
   ({ node, registerComponentApi, lookupEventHandler, renderChild: renderChild2, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -15600,7 +15834,7 @@ function MemoizedSection({
     }
   );
 }
-const COMP$12 = "List";
+const COMP$11 = "List";
 const ListMd = createMetadata({
   status: "stable",
   description: "`List` is a high-performance, virtualized container for rendering large datasets with built-in grouping, sorting, and visual formatting. It only renders visible items in the viewport, making it ideal for displaying thousands of records while maintaining smooth scrolling performance.",
@@ -15615,7 +15849,7 @@ const ListMd = createMetadata({
       `This property delays the rendering of children until it is set to \`false\`, or the component receives usable list items via the [\`data\`](#data) property.`
     ),
     limit: d(
-      `This property limits the number of items displayed in the \`${COMP$12}\`. If not set, all items are displayed.`
+      `This property limits the number of items displayed in the \`${COMP$11}\`. If not set, all items are displayed.`
     ),
     scrollAnchor: {
       description: `This property pins the scroll position to a specified location of the list. Available values are shown below.`,
@@ -15630,7 +15864,7 @@ const ListMd = createMetadata({
       `This optioanl property enables the ordering of list items by specifying an attribute in the data.`
     ),
     availableGroups: d(
-      `This property is an array of group names that the \`${COMP$12}\` will display. If not set, all groups in the data are displayed.`
+      `This property is an array of group names that the \`${COMP$11}\` will display. If not set, all groups in the data are displayed.`
     ),
     groupHeaderTemplate: dComponent(
       `Enables the customization of how the groups are displayed, similarly to the [\`itemTemplate\`](#itemtemplate). You can use the \`$item\` context variable to access an item group and map its individual attributes.`
@@ -15645,7 +15879,7 @@ const ListMd = createMetadata({
       `This property defines the template to display when the list is empty.`
     ),
     pageInfo: d(
-      `This property contains the current page information. Setting this property also enures the \`${COMP$12}\` uses pagination.`
+      `This property contains the current page information. Setting this property also enures the \`${COMP$11}\` uses pagination.`
     ),
     idKey: {
       description: "Denotes which attribute of an item acts as the ID or key of the item",
@@ -15659,7 +15893,7 @@ const ListMd = createMetadata({
       defaultProps$K.groupsInitiallyExpanded
     ),
     defaultGroups: d(
-      `This property adds an optional list of default groups for the \`${COMP$12}\` and displays the group headers in the specified order. If the data contains group headers not in this list, those headers are also displayed (after the ones in this list); however, their order is not deterministic.`
+      `This property adds an optional list of default groups for the \`${COMP$11}\` and displays the group headers in the specified order. If the data contains group headers not in this list, those headers are also displayed (after the ones in this list); however, their order is not deterministic.`
     ),
     hideEmptyGroups: {
       description: "This boolean property indicates if empty groups should be hidden (no header and footer are displayed).",
@@ -15707,7 +15941,7 @@ const ListMd = createMetadata({
   themeVars: parseScssVar(styles$P.themeVars)
 });
 const dynamicHeightListComponentRenderer = createComponentRenderer(
-  COMP$12,
+  COMP$11,
   ListMd,
   ({
     node,
@@ -15810,7 +16044,7 @@ function PositionedContainer({
     }
   );
 }
-const COMP$11 = "PositionedContainer";
+const COMP$10 = "PositionedContainer";
 const PositionedContainerMd = createMetadata({
   status: "deprecated",
   description: "(**OBSOLETE**) This component was created for the ChatEngine app.",
@@ -15820,7 +16054,7 @@ const PositionedContainerMd = createMetadata({
   themeVars: parseScssVar(styles$O.themeVars)
 });
 const positionedContainerComponentRenderer = createComponentRenderer(
-  COMP$11,
+  COMP$10,
   PositionedContainerMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     return /* @__PURE__ */ jsx(
@@ -15856,7 +16090,7 @@ function ChangeListener({ listenTo, onChange, throttleWaitInMs = defaultProps$J.
   }, [listenTo, throttledOnChange, prevValue]);
   return null;
 }
-const COMP$10 = "ChangeListener";
+const COMP$$ = "ChangeListener";
 const ChangeListenerMd = createMetadata({
   status: "stable",
   description: "`ChangeListener` is an invisible component that watches for changes in values and triggers actions in response. It's essential for creating reactive behavior when you need to respond to data changes, state updates, or component property modifications outside of normal event handlers.",
@@ -15872,11 +16106,11 @@ const ChangeListenerMd = createMetadata({
     }
   },
   events: {
-    didChange: dDidChange(COMP$10)
+    didChange: dDidChange(COMP$$)
   }
 });
 const changeListenerComponentRenderer = createComponentRenderer(
-  COMP$10,
+  COMP$$,
   ChangeListenerMd,
   ({ node, lookupEventHandler, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -17427,18 +17661,12 @@ const TextBox = forwardRef(function TextBox2({
   autoFocus,
   readOnly: readOnly2,
   tabIndex,
-  label: label2,
-  labelPosition,
-  labelWidth,
-  labelBreak: labelBreak2,
   required: required2,
   showPasswordToggle,
   passwordVisibleIcon = defaultProps$I.passwordVisibleIcon,
   passwordHiddenIcon = defaultProps$I.passwordHiddenIcon,
   ...rest
 }, ref) {
-  const _id = useId();
-  id = id || _id;
   const inputRef = useRef(null);
   const [showPassword, setShowPassword] = useState(false);
   const actualType = type === "password" && showPassword ? "text" : type;
@@ -17493,88 +17721,73 @@ const TextBox = forwardRef(function TextBox2({
       setValue
     });
   }, [focus, registerComponentApi, setValue]);
-  return /* @__PURE__ */ jsx(
-    ItemWithLabel,
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
       ...rest,
-      id,
-      labelPosition,
-      label: label2,
-      labelWidth,
-      labelBreak: labelBreak2,
-      required: required2,
-      enabled: enabled2,
-      style: style2,
-      className,
       ref,
-      isInputTemplateUsed: true,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: classnames(styles$N.inputRoot, {
-            [styles$N.disabled]: !enabled2,
-            [styles$N.readOnly]: readOnly2,
-            [styles$N.error]: validationStatus === "error",
-            [styles$N.warning]: validationStatus === "warning",
-            [styles$N.valid]: validationStatus === "valid"
-          }),
-          tabIndex: -1,
-          onFocus: focus,
-          style: { gap },
-          children: [
-            /* @__PURE__ */ jsx(
-              Adornment,
-              {
-                "data-part-id": PART_START_ADORNMENT,
-                text: startText,
-                iconName: startIcon,
-                className: classnames(styles$N.adornment)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                id,
-                "data-part-id": PART_INPUT,
-                type: actualType,
-                className: classnames(styles$N.input, {
-                  [styles$N.readOnly]: readOnly2
-                }),
-                disabled: !enabled2,
-                value: localValue,
-                maxLength,
-                placeholder: placeholder2,
-                onChange: onInputChange,
-                onFocus: handleOnFocus,
-                onBlur: handleOnBlur,
-                onKeyDown,
-                ref: inputRef,
-                readOnly: readOnly2,
-                autoFocus,
-                tabIndex: enabled2 ? tabIndex : -1,
-                required: required2
-              }
-            ),
-            type === "password" && showPasswordToggle ? /* @__PURE__ */ jsx(
-              Adornment,
-              {
-                "data-part-id": PART_END_ADORNMENT,
-                iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon,
-                className: classnames(styles$N.adornment, styles$N.passwordToggle),
-                onClick: togglePasswordVisibility
-              }
-            ) : /* @__PURE__ */ jsx(
-              Adornment,
-              {
-                "data-part-id": PART_END_ADORNMENT,
-                text: endText,
-                iconName: endIcon,
-                className: styles$N.adornment
-              }
-            )
-          ]
-        }
-      )
+      className: classnames(styles$N.inputRoot, {
+        [styles$N.disabled]: !enabled2,
+        [styles$N.readOnly]: readOnly2,
+        [styles$N.error]: validationStatus === "error",
+        [styles$N.warning]: validationStatus === "warning",
+        [styles$N.valid]: validationStatus === "valid"
+      }),
+      tabIndex: -1,
+      onFocus: focus,
+      style: { gap },
+      children: [
+        /* @__PURE__ */ jsx(
+          Adornment,
+          {
+            "data-part-id": PART_START_ADORNMENT,
+            text: startText,
+            iconName: startIcon,
+            className: classnames(styles$N.adornment)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id,
+            ref: inputRef,
+            "data-part-id": PART_INPUT,
+            type: actualType,
+            className: classnames(styles$N.input, {
+              [styles$N.readOnly]: readOnly2
+            }),
+            disabled: !enabled2,
+            value: localValue,
+            maxLength,
+            placeholder: placeholder2,
+            onChange: onInputChange,
+            onFocus: handleOnFocus,
+            onBlur: handleOnBlur,
+            onKeyDown,
+            readOnly: readOnly2,
+            autoFocus,
+            tabIndex: enabled2 ? tabIndex : -1,
+            required: required2
+          }
+        ),
+        type === "password" && showPasswordToggle ? /* @__PURE__ */ jsx(
+          Adornment,
+          {
+            "data-part-id": PART_END_ADORNMENT,
+            iconName: showPassword ? passwordVisibleIcon : passwordHiddenIcon,
+            className: classnames(styles$N.adornment, styles$N.passwordToggle),
+            onClick: togglePasswordVisibility
+          }
+        ) : /* @__PURE__ */ jsx(
+          Adornment,
+          {
+            "data-part-id": PART_END_ADORNMENT,
+            text: endText,
+            iconName: endIcon,
+            className: styles$N.adornment
+          }
+        )
+      ]
     }
   );
 });
@@ -19466,7 +19679,7 @@ const DatePicker = forwardRef(function DatePicker2({
   ...rest
 }, ref) {
   const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : 0;
-  const [isMenuFocused, setIsMenuFocused] = useState(false);
+  const [_, setIsMenuFocused] = useState(false);
   const [referenceElement, setReferenceElement] = useState(null);
   const [inlineMonth, setInlineMonth] = useState();
   const generatedId2 = useId();
@@ -19482,7 +19695,6 @@ const DatePicker = forwardRef(function DatePicker2({
     }
     return void 0;
   }, [value, mode]);
-  console.log("sel", selected2);
   useEffect(() => {
     if (!dateFormats$1.includes(dateFormat)) {
       throw new Error(
@@ -19491,6 +19703,7 @@ const DatePicker = forwardRef(function DatePicker2({
     }
   }, [dateFormat]);
   const startDate = useMemo(() => {
+    console.log(minValue, parse(minValue, dateFormat, /* @__PURE__ */ new Date()));
     return minValue ? parse(minValue, dateFormat, /* @__PURE__ */ new Date()) : void 0;
   }, [minValue, dateFormat]);
   const endDate = useMemo(() => {
@@ -19647,7 +19860,7 @@ const DatePicker = forwardRef(function DatePicker2({
         setOpen(false);
       }
     },
-    [onDidChange, updateState, mode, dateFormat]
+    [onDidChange, updateState, mode, dateFormat, readOnly2]
   );
   return inline ? /* @__PURE__ */ jsx(
     ItemWithLabel,
@@ -20884,17 +21097,17 @@ function AutoCompleteOption(option) {
     id
   );
 }
-const themeVars$j = `'{"Input:backgroundColor-track-Slider": "var(--xmlui-backgroundColor-track-Slider)", "Input:borderRadius-Slider-default": "var(--xmlui-borderRadius-Slider-default)", "Input:borderColor-Slider-default": "var(--xmlui-borderColor-Slider-default)", "Input:borderWidth-Slider-default": "var(--xmlui-borderWidth-Slider-default)", "Input:borderStyle-Slider-default": "var(--xmlui-borderStyle-Slider-default)", "Input:boxShadow-Slider-default": "var(--xmlui-boxShadow-Slider-default)", "Input:borderColor-Slider-default--hover": "var(--xmlui-borderColor-Slider-default--hover)", "Input:boxShadow-Slider-default--hover": "var(--xmlui-boxShadow-Slider-default--hover)", "Input:borderColor-Slider-default--focus": "var(--xmlui-borderColor-Slider-default--focus)", "Input:boxShadow-Slider-default--focus": "var(--xmlui-boxShadow-Slider-default--focus)", "Input:borderRadius-Slider-error": "var(--xmlui-borderRadius-Slider-error)", "Input:borderColor-Slider-error": "var(--xmlui-borderColor-Slider-error)", "Input:borderWidth-Slider-error": "var(--xmlui-borderWidth-Slider-error)", "Input:borderStyle-Slider-error": "var(--xmlui-borderStyle-Slider-error)", "Input:boxShadow-Slider-error": "var(--xmlui-boxShadow-Slider-error)", "Input:borderColor-Slider-error--hover": "var(--xmlui-borderColor-Slider-error--hover)", "Input:boxShadow-Slider-error--hover": "var(--xmlui-boxShadow-Slider-error--hover)", "Input:borderColor-Slider-error--focus": "var(--xmlui-borderColor-Slider-error--focus)", "Input:boxShadow-Slider-error--focus": "var(--xmlui-boxShadow-Slider-error--focus)", "Input:borderRadius-Slider-warning": "var(--xmlui-borderRadius-Slider-warning)", "Input:borderColor-Slider-warning": "var(--xmlui-borderColor-Slider-warning)", "Input:borderWidth-Slider-warning": "var(--xmlui-borderWidth-Slider-warning)", "Input:borderStyle-Slider-warning": "var(--xmlui-borderStyle-Slider-warning)", "Input:boxShadow-Slider-warning": "var(--xmlui-boxShadow-Slider-warning)", "Input:borderColor-Slider-warning--hover": "var(--xmlui-borderColor-Slider-warning--hover)", "Input:boxShadow-Slider-warning--hover": "var(--xmlui-boxShadow-Slider-warning--hover)", "Input:borderColor-Slider-warning--focus": "var(--xmlui-borderColor-Slider-warning--focus)", "Input:boxShadow-Slider-warning--focus": "var(--xmlui-boxShadow-Slider-warning--focus)", "Input:borderRadius-Slider-success": "var(--xmlui-borderRadius-Slider-success)", "Input:borderColor-Slider-success": "var(--xmlui-borderColor-Slider-success)", "Input:borderWidth-Slider-success": "var(--xmlui-borderWidth-Slider-success)", "Input:borderStyle-Slider-success": "var(--xmlui-borderStyle-Slider-success)", "Input:boxShadow-Slider-success": "var(--xmlui-boxShadow-Slider-success)", "Input:borderColor-Slider-success--hover": "var(--xmlui-borderColor-Slider-success--hover)", "Input:boxShadow-Slider-success--hover": "var(--xmlui-boxShadow-Slider-success--hover)", "Input:borderColor-Slider-success--focus": "var(--xmlui-borderColor-Slider-success--focus)", "Input:boxShadow-Slider-success--focus": "var(--xmlui-boxShadow-Slider-success--focus)", "Input:backgroundColor-track-Slider--disabled": "var(--xmlui-backgroundColor-track-Slider--disabled)", "Input:backgroundColor-range-Slider": "var(--xmlui-backgroundColor-range-Slider)", "Input:backgroundColor-range-Slider--disabled": "var(--xmlui-backgroundColor-range-Slider--disabled)", "Input:borderWidth-thumb-Slider": "var(--xmlui-borderWidth-thumb-Slider)", "Input:borderStyle-thumb-Slider": "var(--xmlui-borderStyle-thumb-Slider)", "Input:borderColor-thumb-Slider": "var(--xmlui-borderColor-thumb-Slider)", "Input:backgroundColor-thumb-Slider": "var(--xmlui-backgroundColor-thumb-Slider)", "Input:boxShadow-thumb-Slider": "var(--xmlui-boxShadow-thumb-Slider)", "Input:backgroundColor-thumb-Slider--hover": "var(--xmlui-backgroundColor-thumb-Slider--hover)", "Input:boxShadow-thumb-Slider--hover": "var(--xmlui-boxShadow-thumb-Slider--hover)", "Input:backgroundColor-thumb-Slider--active": "var(--xmlui-backgroundColor-thumb-Slider--active)", "Input:boxShadow-thumb-Slider--active": "var(--xmlui-boxShadow-thumb-Slider--active)"}'`;
-const sliderContainer = "_sliderContainer_1xn5g_14";
-const sliderRoot = "_sliderRoot_1xn5g_19";
-const sliderTrack = "_sliderTrack_1xn5g_28";
-const error$4 = "_error_1xn5g_50";
-const warning$5 = "_warning_1xn5g_65";
-const valid$4 = "_valid_1xn5g_80";
-const disabled$3 = "_disabled_1xn5g_95";
-const sliderRange = "_sliderRange_1xn5g_101";
-const sliderThumb = "_sliderThumb_1xn5g_110";
-const readOnly$2 = "_readOnly_1xn5g_140";
+const themeVars$j = `'{"Input:backgroundColor-track-Slider": "var(--xmlui-backgroundColor-track-Slider)", "Input:borderRadius-Slider-default": "var(--xmlui-borderRadius-Slider-default)", "Input:borderColor-Slider-default": "var(--xmlui-borderColor-Slider-default)", "Input:borderWidth-Slider-default": "var(--xmlui-borderWidth-Slider-default)", "Input:borderStyle-Slider-default": "var(--xmlui-borderStyle-Slider-default)", "Input:boxShadow-Slider-default": "var(--xmlui-boxShadow-Slider-default)", "Input:borderColor-Slider-default--hover": "var(--xmlui-borderColor-Slider-default--hover)", "Input:boxShadow-Slider-default--hover": "var(--xmlui-boxShadow-Slider-default--hover)", "Input:borderColor-Slider-default--focus": "var(--xmlui-borderColor-Slider-default--focus)", "Input:boxShadow-Slider-default--focus": "var(--xmlui-boxShadow-Slider-default--focus)", "Input:borderRadius-Slider-error": "var(--xmlui-borderRadius-Slider-error)", "Input:borderColor-Slider-error": "var(--xmlui-borderColor-Slider-error)", "Input:borderWidth-Slider-error": "var(--xmlui-borderWidth-Slider-error)", "Input:borderStyle-Slider-error": "var(--xmlui-borderStyle-Slider-error)", "Input:boxShadow-Slider-error": "var(--xmlui-boxShadow-Slider-error)", "Input:borderColor-Slider-error--hover": "var(--xmlui-borderColor-Slider-error--hover)", "Input:boxShadow-Slider-error--hover": "var(--xmlui-boxShadow-Slider-error--hover)", "Input:borderColor-Slider-error--focus": "var(--xmlui-borderColor-Slider-error--focus)", "Input:boxShadow-Slider-error--focus": "var(--xmlui-boxShadow-Slider-error--focus)", "Input:borderRadius-Slider-warning": "var(--xmlui-borderRadius-Slider-warning)", "Input:borderColor-Slider-warning": "var(--xmlui-borderColor-Slider-warning)", "Input:borderWidth-Slider-warning": "var(--xmlui-borderWidth-Slider-warning)", "Input:borderStyle-Slider-warning": "var(--xmlui-borderStyle-Slider-warning)", "Input:boxShadow-Slider-warning": "var(--xmlui-boxShadow-Slider-warning)", "Input:borderColor-Slider-warning--hover": "var(--xmlui-borderColor-Slider-warning--hover)", "Input:boxShadow-Slider-warning--hover": "var(--xmlui-boxShadow-Slider-warning--hover)", "Input:borderColor-Slider-warning--focus": "var(--xmlui-borderColor-Slider-warning--focus)", "Input:boxShadow-Slider-warning--focus": "var(--xmlui-boxShadow-Slider-warning--focus)", "Input:borderRadius-Slider-success": "var(--xmlui-borderRadius-Slider-success)", "Input:borderColor-Slider-success": "var(--xmlui-borderColor-Slider-success)", "Input:borderWidth-Slider-success": "var(--xmlui-borderWidth-Slider-success)", "Input:borderStyle-Slider-success": "var(--xmlui-borderStyle-Slider-success)", "Input:boxShadow-Slider-success": "var(--xmlui-boxShadow-Slider-success)", "Input:borderColor-Slider-success--hover": "var(--xmlui-borderColor-Slider-success--hover)", "Input:boxShadow-Slider-success--hover": "var(--xmlui-boxShadow-Slider-success--hover)", "Input:borderColor-Slider-success--focus": "var(--xmlui-borderColor-Slider-success--focus)", "Input:boxShadow-Slider-success--focus": "var(--xmlui-boxShadow-Slider-success--focus)", "Input:backgroundColor-track-Slider--disabled": "var(--xmlui-backgroundColor-track-Slider--disabled)", "Input:backgroundColor-range-Slider": "var(--xmlui-backgroundColor-range-Slider)", "Input:backgroundColor-range-Slider--disabled": "var(--xmlui-backgroundColor-range-Slider--disabled)", "Input:borderWidth-thumb-Slider": "var(--xmlui-borderWidth-thumb-Slider)", "Input:borderStyle-thumb-Slider": "var(--xmlui-borderStyle-thumb-Slider)", "Input:borderColor-thumb-Slider": "var(--xmlui-borderColor-thumb-Slider)", "Input:backgroundColor-thumb-Slider": "var(--xmlui-backgroundColor-thumb-Slider)", "Input:boxShadow-thumb-Slider": "var(--xmlui-boxShadow-thumb-Slider)", "Input:backgroundColor-thumb-Slider--focus": "var(--xmlui-backgroundColor-thumb-Slider--focus)", "Input:boxShadow-thumb-Slider--focus": "var(--xmlui-boxShadow-thumb-Slider--focus)", "Input:backgroundColor-thumb-Slider--hover": "var(--xmlui-backgroundColor-thumb-Slider--hover)", "Input:boxShadow-thumb-Slider--hover": "var(--xmlui-boxShadow-thumb-Slider--hover)", "Input:backgroundColor-thumb-Slider--active": "var(--xmlui-backgroundColor-thumb-Slider--active)", "Input:boxShadow-thumb-Slider--active": "var(--xmlui-boxShadow-thumb-Slider--active)"}'`;
+const sliderContainer = "_sliderContainer_8oyz9_14";
+const sliderRoot = "_sliderRoot_8oyz9_19";
+const sliderTrack = "_sliderTrack_8oyz9_28";
+const error$4 = "_error_8oyz9_50";
+const warning$5 = "_warning_8oyz9_65";
+const valid$4 = "_valid_8oyz9_80";
+const disabled$3 = "_disabled_8oyz9_95";
+const sliderRange = "_sliderRange_8oyz9_101";
+const sliderThumb = "_sliderThumb_8oyz9_110";
+const readOnly$2 = "_readOnly_8oyz9_144";
 const styles$D = {
   themeVars: themeVars$j,
   sliderContainer,
@@ -21544,8 +21757,8 @@ function xmlUiMarkupToComponent(source, fileId = 0) {
     return { component: null, errors: errorsForDisplay, erroneousCompoundComponentName };
   }
   try {
-    const component = nodeToComponentDef(node, getText, fileId);
-    const transformResult = { component, errors: [] };
+    const component2 = nodeToComponentDef(node, getText, fileId);
+    const transformResult = { component: component2, errors: [] };
     return transformResult;
   } catch (e) {
     const erroneousCompoundComponentName = getCompoundCompName(node, getText);
@@ -22043,7 +22256,7 @@ function ApiInterceptorProvider({
       return;
     }
     (async () => {
-      const { initMock } = await import("./initMock-B9LtmFJG.mjs");
+      const { initMock } = await import("./initMock-BoTWMs19.mjs");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -22060,7 +22273,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-DPgtUtdA.mjs") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-B9LtmFJG.mjs")
+              import("./initMock-BoTWMs19.mjs")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -22097,7 +22310,7 @@ function ApiInterceptorProvider({
         (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-DPgtUtdA.mjs"),
-            import("./initMock-B9LtmFJG.mjs")
+            import("./initMock-BoTWMs19.mjs")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -22598,22 +22811,22 @@ function NestedApp({
   }, []);
   useEffect(() => {
     var _a2;
-    let { errors, component, erroneousCompoundComponentName } = xmlUiMarkupToComponent(app);
+    let { errors, component: component2, erroneousCompoundComponentName } = xmlUiMarkupToComponent(app);
     if (errors.length > 0) {
-      component = errReportComponent(errors, "Main.xmlui", erroneousCompoundComponentName);
+      component2 = errReportComponent(errors, "Main.xmlui", erroneousCompoundComponentName);
     }
     const compoundComponents = (components ?? []).map((src) => {
       const isErrorReportComponent = typeof src !== "string";
       if (isErrorReportComponent) {
         return src;
       }
-      let { errors: errors2, component: component2, erroneousCompoundComponentName: erroneousCompoundComponentName2 } = xmlUiMarkupToComponent(
+      let { errors: errors2, component: component22, erroneousCompoundComponentName: erroneousCompoundComponentName2 } = xmlUiMarkupToComponent(
         src
       );
       if (errors2.length > 0) {
         return errReportComponent(errors2, `nested xmlui`, erroneousCompoundComponentName2);
       }
-      return component2;
+      return component22;
     });
     let globalProps = {
       name: config == null ? void 0 : config.name,
@@ -22621,7 +22834,7 @@ function NestedApp({
       apiUrl
     };
     (_a2 = contentRootRef.current) == null ? void 0 : _a2.render(
-      /* @__PURE__ */ jsx(ErrorBoundary, { node: component, children: /* @__PURE__ */ jsx(StyleInjectionTargetContext.Provider, { value: shadowRef.current, children: /* @__PURE__ */ jsx(StyleProvider, { forceNew: true, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(ErrorBoundary, { node: component2, children: /* @__PURE__ */ jsx(StyleInjectionTargetContext.Provider, { value: shadowRef.current, children: /* @__PURE__ */ jsx(StyleProvider, { forceNew: true, children: /* @__PURE__ */ jsx(
         ApiInterceptorProvider,
         {
           parentInterceptorContext,
@@ -22635,7 +22848,7 @@ function NestedApp({
               previewMode: true,
               standalone: true,
               trackContainerHeight: height ? "fixed" : "auto",
-              node: component,
+              node: component2,
               globalProps,
               defaultTheme: activeTheme || (config == null ? void 0 : config.defaultTheme),
               defaultTone: toneToApply,
@@ -23847,7 +24060,7 @@ function convertTreeDisplayToMarkdown(content2) {
 `;
   }
 }
-const COMP$$ = "Markdown";
+const COMP$_ = "Markdown";
 const MarkdownMd = createMetadata({
   status: "stable",
   description: "`Markdown` renders formatted text using markdown syntax. Use [Text](/working-with-text) for simple, styled text content, and `Markdown` when you need [rich formatting](/working-with-markdown).",
@@ -23914,7 +24127,7 @@ const MarkdownMd = createMetadata({
   }
 });
 const markdownComponentRenderer = createComponentRenderer(
-  COMP$$,
+  COMP$_,
   MarkdownMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     let renderedChildren = "";
@@ -24113,17 +24326,33 @@ const defaultProps$u = {
   valueFormat: (value) => value.toString(),
   minStepsBetweenThumbs: 1
 };
-const formatValue = (val, defaultVal = 0) => {
+const parseValue = (val, defaultVal) => {
+  if (typeof val === "number") {
+    return val;
+  } else if (typeof val === "string") {
+    const parsed = parseFloat(val);
+    if (!isNaN$1(parsed)) {
+      return parsed;
+    }
+  }
+  return defaultVal;
+};
+const formatValue = (val, defaultVal = 0, minVal, maxVal) => {
+  const clampValue = (value) => {
+    if (minVal !== void 0 && value < minVal) return minVal;
+    if (maxVal !== void 0 && value > maxVal) return maxVal;
+    return value;
+  };
   if (val === void 0) {
-    return [defaultVal];
+    return [clampValue(defaultVal)];
   }
   if (typeof val === "number") {
-    return [val];
+    return [clampValue(val)];
   }
   if (Array.isArray(val) && val.length > 0) {
-    return val;
+    return val.map(clampValue);
   }
-  return [defaultVal];
+  return [clampValue(defaultVal)];
 };
 const Slider = forwardRef(
   ({
@@ -24163,7 +24392,11 @@ const Slider = forwardRef(
     const inputRef = useRef(null);
     const tooltipRef = useRef(null);
     const thumbRef = useRef(null);
-    const [localValue, setLocalValue] = React__default.useState([]);
+    min = parseValue(min, defaultProps$u.min);
+    max = parseValue(max, defaultProps$u.max);
+    const [localValue, setLocalValue] = React__default.useState(
+      () => formatValue(value || initialValue, min, min, max)
+    );
     const [showTooltip, setShowTooltip] = React__default.useState(false);
     const onShowTooltip = useCallback(() => setShowTooltip(true), []);
     const onHideTooltip = useCallback(() => setShowTooltip(false), []);
@@ -24171,21 +24404,20 @@ const Slider = forwardRef(
       let initialVal = min;
       if (typeof initialValue === "string") {
         try {
-          initialVal = JSON.parse(initialValue);
+          const parsed = JSON.parse(initialValue);
+          initialVal = parsed;
         } catch (e) {
           const num = parseFloat(initialValue);
-          if (!isNaN(num)) {
+          if (!isNaN$1(num)) {
             initialVal = num;
           }
         }
       } else if (typeof initialValue === "number") {
-        if (initialValue >= min && initialValue <= max) {
-          initialVal = initialValue;
-        }
-      } else {
-        initialVal = formatValue(initialValue, min);
+        initialVal = initialValue;
+      } else if (initialValue !== void 0) {
+        initialVal = initialValue;
       }
-      const formattedValue = formatValue(initialVal, min);
+      const formattedValue = formatValue(initialVal, min, min, max);
       setLocalValue(formattedValue);
       if (updateState) {
         updateState(
@@ -24198,10 +24430,10 @@ const Slider = forwardRef(
     }, [initialValue, min, max, updateState]);
     useEffect(() => {
       if (value !== void 0) {
-        const formattedValue = formatValue(value, min);
+        const formattedValue = formatValue(value, min, min, max);
         setLocalValue(formattedValue);
       }
-    }, [value, min]);
+    }, [value, min, max]);
     const updateValue = useCallback(
       (value2) => {
         if (updateState) {
@@ -24213,6 +24445,9 @@ const Slider = forwardRef(
     );
     const onInputChange = useCallback(
       (value2) => {
+        if (readOnly2) {
+          return;
+        }
         setLocalValue(value2);
         if (inputRef.current) {
           inputRef.current.value = value2;
@@ -24223,16 +24458,35 @@ const Slider = forwardRef(
           updateValue(value2[0]);
         }
       },
-      [updateValue]
+      [updateValue, readOnly2]
+    );
+    const handleOnFocus = useCallback(
+      (ev) => {
+        var _a2;
+        (_a2 = thumbRef.current) == null ? void 0 : _a2.focus();
+        onFocus == null ? void 0 : onFocus(ev);
+      },
+      [onFocus]
+    );
+    const handleOnBlur = useCallback(
+      (ev) => {
+        var _a2;
+        (_a2 = thumbRef.current) == null ? void 0 : _a2.focus();
+        onBlur == null ? void 0 : onBlur(ev);
+      },
+      [onBlur]
     );
-    const handleOnFocus = useCallback((ev) => onFocus == null ? void 0 : onFocus(ev), [onFocus]);
-    const handleOnBlur = useCallback((ev) => onBlur == null ? void 0 : onBlur(ev), [onBlur]);
     const focus = useCallback(() => {
       var _a2;
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, []);
     const setValue = useEvent((newValue) => {
-      updateValue(newValue);
+      if (readOnly2 || !enabled2) {
+        return;
+      }
+      const formattedValue = formatValue(newValue, min, min, max);
+      const valueToUpdate = formattedValue.length === 1 ? formattedValue[0] : formattedValue;
+      updateValue(valueToUpdate);
     });
     useEffect(() => {
       registerComponentApi == null ? void 0 : registerComponentApi({
@@ -24240,7 +24494,7 @@ const Slider = forwardRef(
         setValue
       });
     }, [focus, registerComponentApi, setValue]);
-    const displayValue = localValue.length > 0 ? localValue : [min];
+    const displayValue = localValue.length > 0 ? localValue : formatValue(void 0, min, min, max);
     return /* @__PURE__ */ jsx(
       ItemWithLabel,
       {
@@ -24281,13 +24535,12 @@ const Slider = forwardRef(
             onMouseOver: onShowTooltip,
             onMouseLeave: onHideTooltip,
             onPointerDown: onShowTooltip,
-            "aria-required": required2,
             value: displayValue,
-            autoFocus,
             children: [
               /* @__PURE__ */ jsx(
                 Track,
                 {
+                  "data-track": true,
                   className: classnames(styles$D.sliderTrack, {
                     [styles$D.disabled]: !enabled2,
                     [styles$D.readOnly]: readOnly2,
@@ -24299,6 +24552,7 @@ const Slider = forwardRef(
                   children: /* @__PURE__ */ jsx(
                     Range,
                     {
+                      "data-range": true,
                       className: classnames(styles$D.sliderRange, {
                         [styles$D.disabled]: !enabled2
                       })
@@ -24316,13 +24570,15 @@ const Slider = forwardRef(
                   children: /* @__PURE__ */ jsx(
                     Thumb,
                     {
+                      id,
+                      "aria-required": required2,
                       ref: index === 0 ? thumbRef : null,
                       className: classnames(styles$D.sliderThumb, {
                         [styles$D.disabled]: !enabled2
                       }),
                       style: thumbStyle ? { ...thumbStyle } : void 0,
-                      id,
-                      "data-thumb-index": index
+                      "data-thumb-index": index,
+                      autoFocus
                     }
                   )
                 },
@@ -24352,8 +24608,7 @@ const defaultProps$t = {
   initialValue: "#000000",
   value: "#000000",
   enabled: true,
-  validationStatus: "none",
-  debounceDelayInMs: 200
+  validationStatus: "none"
 };
 const ColorPicker = forwardRef(
   ({
@@ -24376,11 +24631,10 @@ const ColorPicker = forwardRef(
     required: required2,
     validationStatus = defaultProps$t.validationStatus,
     initialValue = defaultProps$t.initialValue,
-    debounceDelayInMs = defaultProps$t.debounceDelayInMs,
     ...rest
   }, forwardedRef) => {
     const inputRef = useRef(null);
-    const debounceTimeoutRef = useRef(null);
+    const [isPending, startTransition2] = useTransition();
     const updateValue = useCallback(
       (value2) => {
         updateState({ value: value2 });
@@ -24388,45 +24642,31 @@ const ColorPicker = forwardRef(
       },
       [onDidChange, updateState]
     );
-    const debouncedUpdateValue = useCallback(
+    const updateValueWithTransition = useCallback(
       (value2, immediate = false) => {
-        if (debounceTimeoutRef.current) {
-          clearTimeout(debounceTimeoutRef.current);
-        }
         if (immediate) {
           updateValue(value2);
         } else {
-          debounceTimeoutRef.current = setTimeout(() => {
+          startTransition2(() => {
             updateValue(value2);
-          }, debounceDelayInMs);
+          });
         }
       },
-      [updateValue, debounceDelayInMs]
+      [updateValue, startTransition2]
     );
     const onInputChange = useCallback(
       (event) => {
-        debouncedUpdateValue(event.target.value);
+        updateValueWithTransition(event.target.value);
       },
-      [debouncedUpdateValue]
+      [updateValueWithTransition]
     );
     useEffect(() => {
       updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
-    useEffect(() => {
-      return () => {
-        if (debounceTimeoutRef.current) {
-          clearTimeout(debounceTimeoutRef.current);
-        }
-      };
-    }, []);
     const handleOnFocus = useCallback(() => {
       onFocus == null ? void 0 : onFocus();
     }, [onFocus]);
     const handleOnBlur = useCallback(() => {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-        debounceTimeoutRef.current = null;
-      }
       onBlur == null ? void 0 : onBlur();
     }, [onBlur]);
     const focus = useCallback(() => {
@@ -24434,7 +24674,7 @@ const ColorPicker = forwardRef(
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, []);
     const setValue = useEvent((newValue) => {
-      debouncedUpdateValue(newValue, true);
+      updateValueWithTransition(newValue, true);
     });
     useEffect(() => {
       registerComponentApi == null ? void 0 : registerComponentApi({
@@ -24983,7 +25223,7 @@ function CustomFormItem({
   }, [bindTo, dispatch, node.children, node.vars, validationResult, value]);
   return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(decoratedMetadata) });
 }
-const COMP$_ = "FormItem";
+const COMP$Z = "FormItem";
 const filteredValidationSeverityValues = validationSeverityValues.filter(
   (value) => value !== "none"
 );
@@ -24998,7 +25238,7 @@ const FormItemMd = createMetadata({
     autoFocus: dAutoFocus(),
     label: dLabel(),
     labelPosition: dLabelPosition(),
-    labelWidth: dLabelWidth(COMP$_),
+    labelWidth: dLabelWidth(COMP$Z),
     labelBreak: {
       description: `This boolean value indicates if the label can be split into multiple lines if it would overflow the available label width.`,
       type: "boolean",
@@ -25137,7 +25377,7 @@ const FormItemMd = createMetadata({
   }
 });
 const formItemComponentRenderer = createComponentRenderer(
-  COMP$_,
+  COMP$Z,
   FormItemMd,
   ({
     node,
@@ -25248,7 +25488,7 @@ const formItemComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$Z = "TextBox";
+const COMP$Y = "TextBox";
 const TextBoxMd = createMetadata({
   status: "stable",
   description: "`TextBox` captures user text input for forms, search fields, and data entry with support for validation, icons, and formatting hints.",
@@ -25273,10 +25513,6 @@ const TextBoxMd = createMetadata({
       ...dInitialValue(),
       defaultValue: defaultProps$I.initialValue
     },
-    label: dLabel(),
-    labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$Z),
-    labelBreak: dLabelBreak(COMP$Z),
     maxLength: dMaxLength(),
     autoFocus: dAutoFocus(),
     required: dRequired(),
@@ -25312,13 +25548,13 @@ const TextBoxMd = createMetadata({
     }
   },
   events: {
-    gotFocus: dGotFocus(COMP$Z),
-    lostFocus: dLostFocus(COMP$Z),
-    didChange: dDidChange(COMP$Z)
+    gotFocus: dGotFocus(COMP$Y),
+    lostFocus: dLostFocus(COMP$Y),
+    didChange: dDidChange(COMP$Y)
   },
   apis: {
     focus: {
-      description: `This method sets the focus on the \`${COMP$Z}\` component.`,
+      description: `This method sets the focus on the \`${COMP$Y}\` component.`,
       signature: "focus(): void"
     },
     value: {
@@ -25326,7 +25562,7 @@ const TextBoxMd = createMetadata({
       signature: "get value(): string | undefined"
     },
     setValue: {
-      description: `This API sets the value of the \`${COMP$Z}\`. You can use it to programmatically change the value.`,
+      description: `This API sets the value of the \`${COMP$Y}\`. You can use it to programmatically change the value.`,
       signature: "setValue(value: string): void",
       parameters: {
         value: "The new value to set. If the value is empty, it will clear the input."
@@ -25341,8 +25577,8 @@ const TextBoxMd = createMetadata({
     "backgroundColor-Input--disabled": "$backgroundColor--disabled",
     "borderWidth-Input": "1px",
     "minHeight-Input": "39px",
-    [`paddingHorizontal-${COMP$Z}`]: "$space-2",
-    [`paddingVertical-${COMP$Z}`]: "$space-2",
+    [`paddingHorizontal-${COMP$Y}`]: "$space-2",
+    [`paddingVertical-${COMP$Y}`]: "$space-2",
     "gap-adornment-Input": "$space-2",
     "borderStyle-Input": "solid",
     "borderColor-Input--disabled": "$borderColor--disabled",
@@ -25389,10 +25625,6 @@ function renderTextBox(className, state, updateState, extractValue, node, lookup
       gap: extractValue.asOptionalString(node.props.gap),
       autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus),
       readOnly: extractValue.asOptionalBoolean(node.props.readOnly),
-      label: extractValue.asOptionalString(node.props.label),
-      labelPosition: extractValue(node.props.labelPosition),
-      labelWidth: extractValue.asOptionalString(node.props.labelWidth),
-      labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak),
       required: extractValue.asOptionalBoolean(node.props.required),
       showPasswordToggle: extractValue.asOptionalBoolean(node.props.showPasswordToggle, false),
       passwordVisibleIcon: extractValue.asOptionalString(node.props.passwordVisibleIcon),
@@ -25401,7 +25633,7 @@ function renderTextBox(className, state, updateState, extractValue, node, lookup
   );
 }
 const textBoxComponentRenderer = createComponentRenderer(
-  COMP$Z,
+  COMP$Y,
   TextBoxMd,
   ({
     node,
@@ -25454,19 +25686,85 @@ const passwordInputComponentRenderer = createComponentRenderer(
 function isAxiosResponse(response) {
   return "data" in response;
 }
-async function parseResponseJson(response, logError = false) {
+function getContentType(response) {
+  if (isAxiosResponse(response)) {
+    return response.headers["content-type"] || response.headers["Content-Type"] || "";
+  } else {
+    return response.headers.get("content-type") || "";
+  }
+}
+function isBinaryContentType(contentType) {
+  const binaryTypes = [
+    // Images
+    "image/",
+    // Audio
+    "audio/",
+    // Video
+    "video/",
+    // Documents
+    "application/pdf",
+    "application/msword",
+    "application/vnd.openxmlformats-officedocument.",
+    "application/vnd.ms-excel",
+    "application/vnd.ms-powerpoint",
+    // Archives
+    "application/zip",
+    "application/x-rar-compressed",
+    "application/x-tar",
+    "application/gzip",
+    "application/x-7z-compressed",
+    // Other binary
+    "application/octet-stream",
+    "application/x-binary"
+  ];
+  return binaryTypes.some((type) => contentType.toLowerCase().includes(type.toLowerCase()));
+}
+function shouldReturnAsArrayBuffer(contentType) {
+  const arrayBufferTypes = [
+    "application/zip",
+    "application/x-rar-compressed",
+    "application/x-tar",
+    "application/gzip",
+    "application/x-7z-compressed",
+    "application/x-binary"
+  ];
+  return arrayBufferTypes.some((type) => contentType.toLowerCase().includes(type.toLowerCase()));
+}
+async function parseResponseBody(response, logError = false) {
   let resp;
   if (isAxiosResponse(response)) {
     resp = response.data;
   } else {
-    try {
-      resp = await response.clone().json();
-    } catch (e) {
+    const contentType = getContentType(response);
+    if (isBinaryContentType(contentType)) {
       try {
-        resp = await response.clone().text();
-      } catch (e2) {
+        if (shouldReturnAsArrayBuffer(contentType)) {
+          resp = await response.clone().arrayBuffer();
+        } else {
+          resp = await response.clone().blob();
+        }
+      } catch (e) {
         if (logError) {
-          console.error("Failed to parse response as text or JSON", response.body);
+          console.error("Failed to parse binary response", e, contentType);
+        }
+        try {
+          resp = await response.clone().text();
+        } catch (textError) {
+          if (logError) {
+            console.error("Failed to parse response as text after binary parsing failed", textError);
+          }
+        }
+      }
+    } else {
+      try {
+        resp = await response.clone().json();
+      } catch (e) {
+        try {
+          resp = await response.clone().text();
+        } catch (e2) {
+          if (logError) {
+            console.error("Failed to parse response as text or JSON", response.body);
+          }
         }
       }
     }
@@ -25771,7 +26069,7 @@ class RestApiProxy {
       }
     };
     this.tryParseResponse = async (response, logError = false) => {
-      return await parseResponseJson(response, logError);
+      return await parseResponseBody(response, logError);
     };
     this.raiseError = async (response) => {
       if ("config" in response) {
@@ -25945,7 +26243,7 @@ function RealTimeAdapter({ url, onEvent }) {
   }, [appContext, onEvent, url]);
   return null;
 }
-const COMP$Y = "RealTimeAdapter";
+const COMP$X = "RealTimeAdapter";
 const RealTimeAdapterMd = createMetadata({
   status: "experimental",
   description: "`RealTimeAdapter` is a non-visual component that listens to real-time events.",
@@ -25960,7 +26258,7 @@ const RealTimeAdapterMd = createMetadata({
   }
 });
 const realTimeAdapterComponentRenderer = createComponentRenderer(
-  COMP$Y,
+  COMP$X,
   RealTimeAdapterMd,
   ({ node, lookupEventHandler, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -25972,7 +26270,7 @@ const realTimeAdapterComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$X = "Form";
+const COMP$W = "Form";
 const FormMd = createMetadata({
   status: "stable",
   description: "`Form` provides a structured container for collecting and validating user input, with built-in data binding, validation, and submission handling. It automatically manages form state and provides context for nested form controls to work together.",
@@ -26084,7 +26382,7 @@ const FormMd = createMetadata({
   }
 });
 const formComponentRenderer = createComponentRenderer(
-  COMP$X,
+  COMP$W,
   FormMd,
   ({ node, renderChild: renderChild2, extractValue, className, lookupEventHandler, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
@@ -26135,7 +26433,7 @@ const EmojiSelector = forwardRef(
     }
   )
 );
-const COMP$W = "EmojiSelector";
+const COMP$V = "EmojiSelector";
 const EmojiSelectorMd = createMetadata({
   status: "experimental",
   description: "`EmojiSelector` enables users to browse, search and select emojis from their system's native emoji set.",
@@ -26150,7 +26448,7 @@ const EmojiSelectorMd = createMetadata({
   }
 });
 const emojiSelectorRenderer = createComponentRenderer(
-  COMP$W,
+  COMP$V,
   EmojiSelectorMd,
   ({ node, lookupEventHandler, extractValue }) => {
     const onActionSelect = lookupEventHandler("select");
@@ -26165,7 +26463,7 @@ const emojiSelectorRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$V = "NumberBox";
+const COMP$U = "NumberBox";
 const NumberBoxMd = createMetadata({
   status: "stable",
   description: "`NumberBox` provides a specialized input field for numeric values with built-in validation, spinner buttons, and flexible formatting options. It supports both integer and floating-point numbers, handles empty states as null values, and integrates seamlessly with form validation.",
@@ -26188,8 +26486,8 @@ const NumberBoxMd = createMetadata({
     initialValue: dInitialValue(),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$V),
-    labelBreak: dLabelBreak(COMP$V),
+    labelWidth: dLabelWidth(COMP$U),
+    labelBreak: dLabelBreak(COMP$U),
     maxLength: dMaxLength(),
     autoFocus: dAutoFocus(),
     required: dRequired(),
@@ -26209,10 +26507,10 @@ const NumberBoxMd = createMetadata({
       defaultValue: defaultProps$G.hasSpinBox
     },
     spinnerUpIcon: d(
-      `Allows setting an alternate icon displayed in the ${COMP$V} spinner for incrementing values. You can change the default icon for all ${COMP$V} instances with the "icon.spinnerUp:NumberBox" declaration in the app configuration file.`
+      `Allows setting an alternate icon displayed in the ${COMP$U} spinner for incrementing values. You can change the default icon for all ${COMP$U} instances with the "icon.spinnerUp:NumberBox" declaration in the app configuration file.`
     ),
     spinnerDownIcon: d(
-      `Allows setting an alternate icon displayed in the ${COMP$V} spinner for decrementing values. You can change the default icon for all ${COMP$V} instances with the "icon.spinnerDown:NumberBox" declaration in the app configuration file.`
+      `Allows setting an alternate icon displayed in the ${COMP$U} spinner for decrementing values. You can change the default icon for all ${COMP$U} instances with the "icon.spinnerDown:NumberBox" declaration in the app configuration file.`
     ),
     step: {
       description: `This prop governs how big the step when clicking on the spinner of the field.`,
@@ -26239,32 +26537,32 @@ const NumberBoxMd = createMetadata({
     }
   },
   events: {
-    gotFocus: dGotFocus(COMP$V),
-    lostFocus: dLostFocus(COMP$V),
-    didChange: dDidChange(COMP$V)
+    gotFocus: dGotFocus(COMP$U),
+    lostFocus: dLostFocus(COMP$U),
+    didChange: dDidChange(COMP$U)
   },
   apis: {
     focus: {
-      description: `This API focuses the input field of the \`${COMP$V}\`. You can use it to programmatically focus the field.`,
+      description: `This API focuses the input field of the \`${COMP$U}\`. You can use it to programmatically focus the field.`,
       signature: "focus(): void"
     },
     value: {
-      description: `This API retrieves the current value of the \`${COMP$V}\`. You can use it to get the value programmatically.`,
+      description: `This API retrieves the current value of the \`${COMP$U}\`. You can use it to get the value programmatically.`,
       signature: "get value(): number | undefined"
     },
     setValue: {
-      description: `This API sets the value of the \`${COMP$V}\`. You can use it to programmatically change the value.`,
+      description: `This API sets the value of the \`${COMP$U}\`. You can use it to programmatically change the value.`,
       signature: "setValue(value: number | undefined): void"
     }
   },
   themeVars: parseScssVar(styles$K.themeVars),
   defaultThemeVars: {
-    [`paddingVertical-${COMP$V}`]: "$space-2",
-    [`paddingHorizontal-${COMP$V}`]: "$space-2"
+    [`paddingVertical-${COMP$U}`]: "$space-2",
+    [`paddingHorizontal-${COMP$U}`]: "$space-2"
   }
 });
 const numberBoxComponentRenderer = createComponentRenderer(
-  COMP$V,
+  COMP$U,
   NumberBoxMd,
   ({
     node,
@@ -26325,7 +26623,7 @@ const HoverCardComponent = ({ triggerTemplate, children }) => {
     /* @__PURE__ */ jsx(HoverCard.Portal, { container: root2, children: /* @__PURE__ */ jsx(HoverCard.Content, { side: "bottom", sideOffset: 5, children }) })
   ] });
 };
-const COMP$U = "HoverCard";
+const COMP$T = "HoverCard";
 const HoverCardMd = createMetadata({
   status: "deprecated",
   description: "(**OBSOLETE**) This component displays some content when its parent component is hovered.",
@@ -26334,13 +26632,13 @@ const HoverCardMd = createMetadata({
   }
 });
 const hoverCardComponentRenderer = createComponentRenderer(
-  COMP$U,
+  COMP$T,
   HoverCardMd,
   ({ node, extractValue, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(HoverCardComponent, { triggerTemplate: renderChild2(extractValue(node.props.triggerTemplate)), children: renderChild2(node.children) });
   }
 );
-const COMP$T = "App";
+const COMP$S = "App";
 const AppMd = createMetadata({
   status: "stable",
   description: "The `App` component is the root container that defines your application's overall structure and layout. It provides a complete UI framework with built-in navigation, header, footer, and content areas that work together seamlessly.",
@@ -26399,10 +26697,10 @@ const AppMd = createMetadata({
   },
   events: {
     ready: {
-      description: `This event fires when the \`${COMP$T}\` component finishes rendering on the page.`
+      description: `This event fires when the \`${COMP$S}\` component finishes rendering on the page.`
     },
     messageReceived: {
-      description: `This event fires when the \`${COMP$T}\` component receives a message from another window or iframe via the window.postMessage API.`
+      description: `This event fires when the \`${COMP$S}\` component receives a message from another window or iframe via the window.postMessage API.`
     }
   },
   themeVars: { ...parseScssVar(styles$1c.themeVars), ...parseScssVar(drawerStyles.themeVars) },
@@ -26415,11 +26713,11 @@ const AppMd = createMetadata({
   },
   defaultThemeVars: {
     "maxWidth-Drawer": "100%",
-    [`width-navPanel-${COMP$T}`]: "$space-64",
-    [`backgroundColor-navPanel-${COMP$T}`]: "$backgroundColor",
-    [`maxWidth-content-${COMP$T}`]: "$maxWidth-content",
-    [`boxShadow-header-${COMP$T}`]: "none",
-    [`boxShadow-navPanel-${COMP$T}`]: "$boxShadow-spread",
+    [`width-navPanel-${COMP$S}`]: "$space-64",
+    [`backgroundColor-navPanel-${COMP$S}`]: "$backgroundColor",
+    [`maxWidth-content-${COMP$S}`]: "$maxWidth-content",
+    [`boxShadow-header-${COMP$S}`]: "none",
+    [`boxShadow-navPanel-${COMP$S}`]: "$boxShadow-spread",
     [`scroll-padding-block-Pages`]: "$space-4",
     [`backgroundColor-content-App`]: "$backgroundColor",
     light: {
@@ -26775,7 +27073,7 @@ function PageIndexer({
   return /* @__PURE__ */ jsx("div", { ref: contentRef, children: renderChild2(Page.children) });
 }
 const appRenderer = createComponentRenderer(
-  COMP$T,
+  COMP$S,
   AppMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
     return /* @__PURE__ */ jsx(
@@ -26886,7 +27184,7 @@ function extractNavPanelFromPages(Pages2, NavPanel3, processedNavRef, extractVal
   });
   return extraNavs;
 }
-const COMP$S = "NavPanel";
+const COMP$R = "NavPanel";
 const NavPanelMd = createMetadata({
   status: "stable",
   description: "`NavPanel` defines the navigation structure within an App, serving as a container for NavLink and NavGroup components that create your application's primary navigation menu. Its appearance and behavior automatically adapt based on the App's layout configuration.",
@@ -26903,15 +27201,15 @@ const NavPanelMd = createMetadata({
   themeVars: parseScssVar(styles$19.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`horizontalAlignment-logo-${COMP$S}`]: "center",
-    [`backgroundColor-${COMP$S}`]: "$backgroundColor",
-    [`backgroundColor-${COMP$S}-horizontal`]: "$backgroundColor-AppHeader",
-    [`border-${COMP$S}`]: "0px solid $borderColor",
-    [`paddingHorizontal-${COMP$S}`]: "0",
-    [`paddingVertical-logo-${COMP$S}`]: "$space-4",
-    [`paddingHorizontal-logo-${COMP$S}`]: "$space-4",
-    [`marginBottom-logo-${COMP$S}`]: "$space-4",
-    [`boxShadow-${COMP$S}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)"
+    [`horizontalAlignment-logo-${COMP$R}`]: "center",
+    [`backgroundColor-${COMP$R}`]: "$backgroundColor",
+    [`backgroundColor-${COMP$R}-horizontal`]: "$backgroundColor-AppHeader",
+    [`border-${COMP$R}`]: "0px solid $borderColor",
+    [`paddingHorizontal-${COMP$R}`]: "0",
+    [`paddingVertical-logo-${COMP$R}`]: "$space-4",
+    [`paddingHorizontal-logo-${COMP$R}`]: "$space-4",
+    [`marginBottom-logo-${COMP$R}`]: "$space-4",
+    [`boxShadow-${COMP$R}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)"
   }
 });
 function NavPanelWithBuiltNavHierarchy({
@@ -26937,7 +27235,7 @@ function NavPanelWithBuiltNavHierarchy({
   );
 }
 const navPanelRenderer = createComponentRenderer(
-  COMP$S,
+  COMP$R,
   NavPanelMd,
   ({ node, renderChild: renderChild2, className, layoutContext, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -27053,7 +27351,7 @@ const pageRenderer = createComponentRenderer(
     ) });
   }
 );
-const COMP$R = "Pages";
+const COMP$Q = "Pages";
 const PagesMd = createMetadata({
   status: "stable",
   description: "`Pages` serves as the routing coordinator within an [App](/components/App), managing which [Page](/components/Page)  displays based on the current URL.",
@@ -27065,7 +27363,7 @@ const PagesMd = createMetadata({
   }
 });
 const pagesRenderer = createComponentRenderer(
-  COMP$R,
+  COMP$Q,
   PagesMd,
   ({ node, extractValue, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(
@@ -27107,22 +27405,22 @@ const Footer = forwardRef(function Footer2({
     }
   ) });
 });
-const COMP$Q = "Footer";
+const COMP$P = "Footer";
 const FooterMd = createMetadata({
   status: "stable",
   description: "`Footer` provides a designated area at the bottom of your application for footer content such as branding, copyright notices, or utility controls like theme toggles.",
   themeVars: parseScssVar(styles$q.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`backgroundColor-${COMP$Q}`]: "$backgroundColor-AppHeader",
-    [`verticalAlignment-${COMP$Q}`]: "center",
-    [`fontSize-${COMP$Q}`]: "$fontSize-sm",
-    [`textColor-${COMP$Q}`]: "$textColor-secondary",
-    [`maxWidth-content-${COMP$Q}`]: "$maxWidth-content",
-    [`borderTop-${COMP$Q}`]: `1px solid $borderColor`,
-    [`padding-${COMP$Q}`]: "$space-2 $space-4",
-    [`gap-${COMP$Q}`]: "$space-normal",
-    [`margin-${COMP$Q}`]: `0 auto`,
+    [`backgroundColor-${COMP$P}`]: "$backgroundColor-AppHeader",
+    [`verticalAlignment-${COMP$P}`]: "center",
+    [`fontSize-${COMP$P}`]: "$fontSize-sm",
+    [`textColor-${COMP$P}`]: "$textColor-secondary",
+    [`maxWidth-content-${COMP$P}`]: "$maxWidth-content",
+    [`borderTop-${COMP$P}`]: `1px solid $borderColor`,
+    [`padding-${COMP$P}`]: "$space-2 $space-4",
+    [`gap-${COMP$P}`]: "$space-normal",
+    [`margin-${COMP$P}`]: `0 auto`,
     light: {
       // --- No light-specific theme vars
     },
@@ -27132,7 +27430,7 @@ const FooterMd = createMetadata({
   }
 });
 const footerRenderer = createComponentRenderer(
-  COMP$Q,
+  COMP$P,
   FooterMd,
   ({ node, renderChild: renderChild2, className, layoutContext }) => {
     return /* @__PURE__ */ jsx(Footer, { className: classnames(layoutContext == null ? void 0 : layoutContext.themeClassName, className), children: renderChild2(node.children, {
@@ -27141,7 +27439,7 @@ const footerRenderer = createComponentRenderer(
     }) });
   }
 );
-const COMP$P = "NavGroup";
+const COMP$O = "NavGroup";
 const NavGroupMd = createMetadata({
   status: "stable",
   description: "`NavGroup` creates collapsible containers for organizing related navigation items into hierarchical menu structures. It groups `NavLink` components and other `NavGroup` components, providing expandable submenus with customizable icons and states.",
@@ -27156,7 +27454,7 @@ const NavGroupMd = createMetadata({
       valueType: "string"
     },
     icon: {
-      description: `This property defines an optional icon to display along with the \`${COMP$P}\` label.`,
+      description: `This property defines an optional icon to display along with the \`${COMP$O}\` label.`,
       valueType: "string"
     },
     iconHorizontalExpanded: {
@@ -27182,13 +27480,13 @@ const NavGroupMd = createMetadata({
   },
   themeVars: parseScssVar(styles$18.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-dropdown-${COMP$P}`]: "$backgroundColor-primary",
-    [`borderRadius-dropdown-${COMP$P}`]: "$borderRadius",
-    [`boxShadow-dropdown-${COMP$P}`]: "$boxShadow-spread"
+    [`backgroundColor-dropdown-${COMP$O}`]: "$backgroundColor-primary",
+    [`borderRadius-dropdown-${COMP$O}`]: "$borderRadius",
+    [`boxShadow-dropdown-${COMP$O}`]: "$boxShadow-spread"
   }
 });
 const navGroupComponentRenderer = createComponentRenderer(
-  COMP$P,
+  COMP$O,
   NavGroupMd,
   ({ node, extractValue, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(
@@ -27209,7 +27507,7 @@ const navGroupComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$O = "Logo";
+const COMP$N = "Logo";
 const LogoMd = createMetadata({
   status: "stable",
   description: "`Logo` displays your application's brand symbol by automatically loading logo images defined in the app manifest. While logos are typically configured using App-level properties (`logo`, `logo-dark`), this component provides direct control when you need custom logo placement or templating.",
@@ -27227,7 +27525,7 @@ const LogoMd = createMetadata({
   }
 });
 const logoComponentRenderer = createComponentRenderer(
-  COMP$O,
+  COMP$N,
   LogoMd,
   ({ node, className, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -27240,7 +27538,7 @@ const logoComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$N = "RadioGroup";
+const COMP$M = "RadioGroup";
 const RGOption = `RadioGroupOption`;
 const RadioGroupMd = createMetadata({
   status: "stable",
@@ -27269,13 +27567,13 @@ const RadioGroupMd = createMetadata({
     ),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$N),
-    labelBreak: dLabelBreak(COMP$N)
+    labelWidth: dLabelWidth(COMP$M),
+    labelBreak: dLabelBreak(COMP$M)
   },
   events: {
-    gotFocus: dGotFocus(COMP$N),
-    lostFocus: dLostFocus(COMP$N),
-    didChange: dDidChange(COMP$N)
+    gotFocus: dGotFocus(COMP$M),
+    lostFocus: dLostFocus(COMP$M),
+    didChange: dDidChange(COMP$M)
   },
   themeVars: parseScssVar(styles$I.themeVars),
   defaultThemeVars: {
@@ -27297,7 +27595,7 @@ const RadioGroupMd = createMetadata({
   }
 });
 const radioGroupRenderer = createComponentRenderer(
-  COMP$N,
+  COMP$M,
   RadioGroupMd,
   ({
     node,
@@ -27334,7 +27632,7 @@ const radioGroupRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$M = "Slot";
+const COMP$L = "Slot";
 const SlotMd = createMetadata({
   status: "experimental",
   description: "Placeholder in a reusable component. Signs the slot where the component's injected children should be rendered.",
@@ -27344,8 +27642,8 @@ const SlotMd = createMetadata({
   allowArbitraryProps: true,
   opaque: true
 });
-const SlotHolder = createPropHolderComponent(COMP$M, SlotMd);
-const COMP$L = "FileInput";
+const SlotHolder = createPropHolderComponent(COMP$L, SlotMd);
+const COMP$K = "FileInput";
 const DEFAULT_ICON = "browse:FileInput";
 const FileInputMd = createMetadata({
   status: "stable",
@@ -27360,12 +27658,12 @@ const FileInputMd = createMetadata({
     validationStatus: dValidationStatus(),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$L),
-    labelBreak: dLabelBreak(COMP$L),
+    labelWidth: dLabelWidth(COMP$K),
+    labelBreak: dLabelBreak(COMP$K),
     buttonVariant: d("The button variant to use", buttonVariantNames),
     buttonLabel: d(`This property is an optional string to set a label for the button part.`),
     buttonIcon: d(
-      `The ID of the icon to display in the button. You can change the default icon for all ${COMP$L} instances with the "icon.browse:FileInput" declaration in the app configuration file.`
+      `The ID of the icon to display in the button. You can change the default icon for all ${COMP$K} instances with the "icon.browse:FileInput" declaration in the app configuration file.`
     ),
     buttonIconPosition: d(
       `This optional string determines the location of the button icon.`,
@@ -27408,9 +27706,9 @@ const FileInputMd = createMetadata({
     )
   },
   events: {
-    didChange: dDidChange(COMP$L),
-    gotFocus: dGotFocus(COMP$L),
-    lostFocus: dLostFocus(COMP$L)
+    didChange: dDidChange(COMP$K),
+    gotFocus: dGotFocus(COMP$K),
+    lostFocus: dLostFocus(COMP$K)
   },
   apis: {
     value: {
@@ -27436,7 +27734,7 @@ const FileInputMd = createMetadata({
   themeVars: parseScssVar(styles$L.themeVars)
 });
 const fileInputRenderer = createComponentRenderer(
-  COMP$L,
+  COMP$K,
   FileInputMd,
   ({ node, state, updateState, extractValue, lookupEventHandler, registerComponentApi, className }) => {
     const iconName = extractValue.asOptionalString(node.props.buttonIcon) || DEFAULT_ICON;
@@ -27474,7 +27772,7 @@ const fileInputRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$K = "Spinner";
+const COMP$J = "Spinner";
 const SpinnerMd = createMetadata({
   status: "stable",
   description: "`Spinner` is an animated indicator that represents an action in progress with no deterministic progress value.",
@@ -27492,13 +27790,13 @@ const SpinnerMd = createMetadata({
   },
   themeVars: parseScssVar(styles$1j.themeVars),
   defaultThemeVars: {
-    [`size-${COMP$K}`]: "$space-10",
-    [`thickness-${COMP$K}`]: "$space-0_5",
-    [`borderColor-${COMP$K}`]: "$color-surface-400"
+    [`size-${COMP$J}`]: "$space-10",
+    [`thickness-${COMP$J}`]: "$space-0_5",
+    [`borderColor-${COMP$J}`]: "$color-surface-400"
   }
 });
 const spinnerComponentRenderer = createComponentRenderer(
-  COMP$K,
+  COMP$J,
   SpinnerMd,
   ({ node, className, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -27511,7 +27809,7 @@ const spinnerComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$J = "Select";
+const COMP$I = "Select";
 const SelectMd = createMetadata({
   status: "stable",
   description: "`Select` provides a dropdown interface for choosing from a list of options, supporting both single and multiple selection modes. It offers extensive customization capabilities including search functionality, custom templates, and comprehensive form integration.",
@@ -27548,9 +27846,9 @@ const SelectMd = createMetadata({
     },
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$J),
+    labelWidth: dLabelWidth(COMP$I),
     labelBreak: {
-      ...dLabelBreak(COMP$J),
+      ...dLabelBreak(COMP$I),
       defaultValue: defaultProps$F.labelBreak
     },
     optionLabelTemplate: dComponent(
@@ -27586,24 +27884,24 @@ const SelectMd = createMetadata({
     }
   },
   events: {
-    gotFocus: dGotFocus(COMP$J),
-    lostFocus: dLostFocus(COMP$J),
-    didChange: dDidChange(COMP$J)
+    gotFocus: dGotFocus(COMP$I),
+    lostFocus: dLostFocus(COMP$I),
+    didChange: dDidChange(COMP$I)
   },
   apis: {
     focus: {
-      description: `This method focuses the \`${COMP$J}\` component. You can use it to programmatically focus the component.`,
+      description: `This method focuses the \`${COMP$I}\` component. You can use it to programmatically focus the component.`,
       signature: "focus(): void"
     },
     setValue: {
-      description: `This API sets the value of the \`${COMP$J}\`. You can use it to programmatically change the value.`,
+      description: `This API sets the value of the \`${COMP$I}\`. You can use it to programmatically change the value.`,
       signature: "setValue(value: string | string[] | undefined): void",
       parameters: {
         value: "The new value to set. Can be a single value or an array of values for multi-select."
       }
     },
     value: {
-      description: `This API retrieves the current value of the \`${COMP$J}\`. You can use it to get the value programmatically.`,
+      description: `This API retrieves the current value of the \`${COMP$I}\`. You can use it to get the value programmatically.`,
       signature: "get value(): string | string[] | undefined"
     },
     reset: {
@@ -27617,35 +27915,35 @@ const SelectMd = createMetadata({
   },
   themeVars: parseScssVar(styles$J.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-menu-${COMP$J}`]: "$color-surface-raised",
-    [`boxShadow-menu-${COMP$J}`]: "$boxShadow-md",
-    [`borderRadius-menu-${COMP$J}`]: "$borderRadius",
-    [`borderWidth-menu-${COMP$J}`]: "1px",
-    [`borderColor-menu-${COMP$J}`]: "$borderColor",
-    [`backgroundColor-${COMP$J}-badge`]: "$color-primary-500",
-    [`fontSize-${COMP$J}-badge`]: "$fontSize-sm",
-    [`paddingHorizontal-${COMP$J}-badge`]: "$space-2_5",
-    [`paddingVertical-${COMP$J}-badge`]: "$space-0_5",
-    [`borderRadius-${COMP$J}-badge`]: "$borderRadius",
-    [`paddingHorizontal-item-${COMP$J}`]: "$space-2",
-    [`paddingVertical-item-${COMP$J}`]: "$space-2",
-    [`paddingHorizontal-${COMP$J}`]: "$space-2",
-    [`paddingVertical-${COMP$J}`]: "$space-2",
-    [`opacity-text-item-${COMP$J}--disabled`]: "0.5",
-    [`opacity-${COMP$J}--disabled`]: "0.5",
-    [`backgroundColor-${COMP$J}-badge--hover`]: "$color-primary-400",
-    [`backgroundColor-${COMP$J}-badge--active`]: "$color-primary-500",
-    [`textColor-item-${COMP$J}--disabled`]: "$color-surface-200",
-    [`textColor-${COMP$J}-badge`]: "$color-surface-50",
-    [`backgroundColor-item-${COMP$J}`]: "$backgroundColor-dropdown-item",
-    [`backgroundColor-item-${COMP$J}--hover`]: "$backgroundColor-dropdown-item--hover",
-    [`backgroundColor-item-${COMP$J}--active`]: "$backgroundColor-dropdown-item--active",
+    [`backgroundColor-menu-${COMP$I}`]: "$color-surface-raised",
+    [`boxShadow-menu-${COMP$I}`]: "$boxShadow-md",
+    [`borderRadius-menu-${COMP$I}`]: "$borderRadius",
+    [`borderWidth-menu-${COMP$I}`]: "1px",
+    [`borderColor-menu-${COMP$I}`]: "$borderColor",
+    [`backgroundColor-${COMP$I}-badge`]: "$color-primary-500",
+    [`fontSize-${COMP$I}-badge`]: "$fontSize-sm",
+    [`paddingHorizontal-${COMP$I}-badge`]: "$space-2_5",
+    [`paddingVertical-${COMP$I}-badge`]: "$space-0_5",
+    [`borderRadius-${COMP$I}-badge`]: "$borderRadius",
+    [`paddingHorizontal-item-${COMP$I}`]: "$space-2",
+    [`paddingVertical-item-${COMP$I}`]: "$space-2",
+    [`paddingHorizontal-${COMP$I}`]: "$space-2",
+    [`paddingVertical-${COMP$I}`]: "$space-2",
+    [`opacity-text-item-${COMP$I}--disabled`]: "0.5",
+    [`opacity-${COMP$I}--disabled`]: "0.5",
+    [`backgroundColor-${COMP$I}-badge--hover`]: "$color-primary-400",
+    [`backgroundColor-${COMP$I}-badge--active`]: "$color-primary-500",
+    [`textColor-item-${COMP$I}--disabled`]: "$color-surface-200",
+    [`textColor-${COMP$I}-badge`]: "$color-surface-50",
+    [`backgroundColor-item-${COMP$I}`]: "$backgroundColor-dropdown-item",
+    [`backgroundColor-item-${COMP$I}--hover`]: "$backgroundColor-dropdown-item--hover",
+    [`backgroundColor-item-${COMP$I}--active`]: "$backgroundColor-dropdown-item--active",
     // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-    [`borderColor-${COMP$J}--disabled`]: "initial"
+    [`borderColor-${COMP$I}--disabled`]: "initial"
   }
 });
 const selectComponentRenderer = createComponentRenderer(
-  COMP$J,
+  COMP$I,
   SelectMd,
   ({
     node,
@@ -27721,14 +28019,95 @@ const selectComponentRenderer = createComponentRenderer(
     );
   }
 );
-function compoundComponentDefFromSource(name, componentSource2) {
-  const compoundComponentDef = xmlUiMarkupToComponent(componentSource2).component;
-  if (!compoundComponentDef) {
-    throw new Error(`Failed to parse ${name} component definition during build.`);
+var component = {
+  name: "FormSection",
+  component: {
+    type: "VStack",
+    debug: {
+      source: {
+        start: 30,
+        end: 684,
+        fileId: "0"
+      }
+    },
+    props: {
+      paddingBottom: "{$props.paddingBottom ?? '1rem'}",
+      gap: "0"
+    },
+    children: [
+      {
+        type: "Heading",
+        debug: {
+          source: {
+            start: 98,
+            end: 308,
+            fileId: "0"
+          }
+        },
+        when: "{!!$props.heading}",
+        props: {
+          marginBottom: "$space-tight",
+          level: "{$props.headingLevel ?? 'h3'}",
+          fontWeight: "{$props.headingWeight ?? 'bold'}",
+          value: "{$props.heading}"
+        }
+      },
+      {
+        type: "Text",
+        debug: {
+          source: {
+            start: 308,
+            end: 465,
+            fileId: "0"
+          }
+        },
+        when: "{!!$props.info}",
+        props: {
+          fontSize: "{$props.infoFontSize ?? '0.8rem'}",
+          paddingBottom: "$space-normal",
+          value: "{$props.info}"
+        }
+      },
+      {
+        type: "FlowLayout",
+        debug: {
+          source: {
+            start: 465,
+            end: 672,
+            fileId: "0"
+          }
+        },
+        props: {
+          paddingTop: "{$props.paddingTop ?? '$space-normal'}",
+          columnGap: "{$props.columnGap ?? '3rem'}",
+          rowGap: "{$props.rowGap ?? '$space-normal'}"
+        },
+        children: [
+          {
+            type: "Slot",
+            debug: {
+              source: {
+                start: 639,
+                end: 654,
+                fileId: "0"
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  debug: {
+    source: {
+      start: 0,
+      end: 697,
+      fileId: "0"
+    }
   }
-  return compoundComponentDef;
-}
-const COMP$I = "FormSection";
+};
+const componentSource = {
+  component
+};
 const FormSectionMd = createMetadata({
   status: "experimental",
   description: "`FormSection` groups elements within a `Form`. Child components are placed in a [FlowLayout](/components/FlowLayout).",
@@ -27773,34 +28152,10 @@ const FormSectionMd = createMetadata({
     }
   }
 });
-const componentSource = `
-<Component name="FormSection">
-  <VStack paddingBottom="{$props.paddingBottom ?? '1rem'}" gap="0" width="100%">
-    <Heading
-      when="{!!$props.heading}"
-      marginBottom="$space-tight"
-      level="{$props.headingLevel ?? 'h3'}"
-      fontWeight="{$props.headingWeight ?? 'bold'}"
-      value="{$props.heading}" />
-    <Text
-      when="{!!$props.info}"
-      fontSize="{$props.infoFontSize ?? '0.8rem'}"
-      paddingBottom="$space-normal"
-      value="{$props.info}" />
-    <FlowLayout
-      width="100%"
-      paddingTop="{$props.paddingTop ?? '$space-normal'}"
-      columnGap="{$props.columnGap ?? '3rem'}"
-      rowGap="{$props.rowGap ?? '$space-normal'}" >
-      <Slot />
-    </FlowLayout>
-  </VStack>
-</Component>
-`;
-const formSectionRenderer = {
-  compoundComponentDef: compoundComponentDefFromSource(COMP$I, componentSource),
-  metadata: FormSectionMd
-};
+const formSectionRenderer = createUserDefinedComponentRenderer(
+  FormSectionMd,
+  componentSource
+);
 const defaultProps$o = {
   ...defaultProps$$,
   labelPosition: "end"
@@ -30086,24 +30441,24 @@ function Theme({
   }
   if (isRoot) {
     const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
-    return (
-      // <ThemeContext.Provider value={currentThemeContextValue}>
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsxs(Helmet, { children: [
-          /* @__PURE__ */ jsx("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }),
-          fontLinks == null ? void 0 : fontLinks.map((fontLink) => /* @__PURE__ */ jsx("link", { href: fontLink, rel: "stylesheet" }, fontLink))
-        ] }),
-        /* @__PURE__ */ jsx(RootClasses, { classNames: rootClasses }),
-        /* @__PURE__ */ jsxs(ErrorBoundary, { node, location: "theme-root", children: [
-          renderChild2(node.children),
-          children
-        ] }),
-        /* @__PURE__ */ jsx(NotificationToast, { toastDuration })
-      ] })
-    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Helmet, { children: [
+        /* @__PURE__ */ jsx("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }),
+        fontLinks == null ? void 0 : fontLinks.map((fontLink) => /* @__PURE__ */ jsx("link", { href: fontLink, rel: "stylesheet" }, fontLink))
+      ] }),
+      /* @__PURE__ */ jsx(RootClasses, { classNames: rootClasses }),
+      /* @__PURE__ */ jsxs(ErrorBoundary, { node, location: "theme-root", children: [
+        renderChild2 && renderChild2(node.children),
+        children
+      ] }),
+      /* @__PURE__ */ jsx(NotificationToast, { toastDuration })
+    ] });
   }
   return /* @__PURE__ */ jsxs(ThemeContext.Provider, { value: currentThemeContextValue, children: [
-    /* @__PURE__ */ jsx("div", { className: classnames(styles$p.wrapper, className), children: renderChild2(node.children, { ...layoutContext, themeClassName: className }) }),
+    /* @__PURE__ */ jsxs("div", { className: classnames(styles$p.wrapper, className), children: [
+      renderChild2 && renderChild2(node.children, { ...layoutContext, themeClassName: className }),
+      children
+    ] }),
     root2 && createPortal(
       /* @__PURE__ */ jsx(
         "div",
@@ -33492,10 +33847,8 @@ const defaultProps$k = {
   clearable: false,
   clearToInitialValue: true,
   required: false,
-  labelPosition: "top",
   readOnly: false,
   autoFocus: false,
-  labelBreak: false,
   emptyCharacter: "-"
 };
 const TimeInputNative = forwardRef(function TimeInputNative2({
@@ -33525,10 +33878,6 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
   endText,
   endIcon,
   gap,
-  label: label2,
-  labelPosition = defaultProps$k.labelPosition,
-  labelWidth,
-  labelBreak: labelBreak2 = defaultProps$k.labelBreak,
   readOnly: readOnly2 = defaultProps$k.readOnly,
   autoFocus = defaultProps$k.autoFocus,
   emptyCharacter = defaultProps$k.emptyCharacter,
@@ -33956,6 +34305,7 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
             /* @__PURE__ */ jsx(
               HourInput,
               {
+                id,
                 amPm,
                 autoFocus,
                 disabled: !enabled2,
@@ -34052,23 +34402,6 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
       ]
     }
   );
-  if (label2) {
-    return /* @__PURE__ */ jsx(
-      ItemWithLabel,
-      {
-        label: label2,
-        labelPosition,
-        labelWidth,
-        labelBreak: labelBreak2,
-        required: required2,
-        children: /* @__PURE__ */ jsxs(Fragment, { children: [
-          startAdornment,
-          timeInputComponent,
-          endAdornment
-        ] })
-      }
-    );
-  }
   return timeInputComponent;
 });
 function AmPmButton({
@@ -34433,10 +34766,6 @@ const TimeInputMd = createMetadata({
     readOnly: dReadonly(),
     enabled: dEnabled(defaultProps$k.enabled),
     validationStatus: dValidationStatus(defaultProps$k.validationStatus),
-    label: dLabel(),
-    labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$z),
-    labelBreak: dLabelBreak(COMP$z),
     hour24: {
       description: "Whether to use 24-hour format (true) or 12-hour format with AM/PM (false)",
       valueType: "boolean",
@@ -34574,10 +34903,6 @@ const timeInputComponentRenderer = createComponentRenderer(
         clearIcon: extractValue(node.props.clearIcon),
         clearToInitialValue: extractValue.asOptionalBoolean(node.props.clearToInitialValue, defaultProps$k.clearToInitialValue),
         required: extractValue.asOptionalBoolean(node.props.required, defaultProps$k.required),
-        label: extractValue(node.props.label),
-        labelPosition: extractValue(node.props.labelPosition),
-        labelWidth: extractValue(node.props.labelWidth),
-        labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak, defaultProps$k.labelBreak),
         startText: extractValue(node.props.startText),
         startIcon: extractValue(node.props.startIcon),
         endText: extractValue(node.props.endText),
@@ -35214,7 +35539,8 @@ function AppState({
   bucket = defaultProps$f.bucket,
   updateState,
   initialValue,
-  registerComponentApi
+  registerComponentApi,
+  onDidUpdate
 }) {
   const registerAppState = useAppStateContextPart((value2) => value2.registerAppState);
   const update = useAppStateContextPart((value2) => value2.update);
@@ -35226,18 +35552,45 @@ function AppState({
   const value = useAppStateContextPart((value2) => value2.appState[bucket]);
   useIsomorphicLayoutEffect(() => {
     updateState({ value });
-  }, [updateState, value]);
+    if (onDidUpdate) {
+      onDidUpdate({ bucket, value, previousValue: void 0 });
+    }
+  }, [updateState, value, onDidUpdate, bucket]);
   useIsomorphicLayoutEffect(() => {
     registerComponentApi({
-      update: (patch) => update(bucket, patch)
+      update: (patch) => update(bucket, patch),
+      appendToList: (key, id) => {
+        const currentState = value || {};
+        const currentArray = currentState[key] || [];
+        if (!currentArray.includes(id)) {
+          const newArray = [...currentArray, id];
+          update(bucket, { [key]: newArray });
+        }
+      },
+      removeFromList: (key, id) => {
+        const currentState = value || {};
+        const currentArray = currentState[key] || [];
+        const newArray = currentArray.filter((item2) => item2 !== id);
+        update(bucket, { [key]: newArray });
+      },
+      listIncludes: (key, id) => {
+        const currentState = value || {};
+        const currentArray = currentState[key] || [];
+        return currentArray.includes(id);
+      }
     });
-  }, [bucket, registerComponentApi, update]);
+  }, [bucket, registerComponentApi, update, value]);
   return null;
 }
 const COMP$u = "AppState";
 const AppStateMd = createMetadata({
   status: "stable",
   description: "`AppState` is an invisible component that provides global state management across your entire application. Unlike component variables that are scoped locally, AppState allows any component to access and update shared state without prop drilling.",
+  events: {
+    didUpdate: d(
+      "This event is fired when the AppState value is updated. The event provides the new state value as its parameter."
+    )
+  },
   props: {
     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.`,
@@ -35255,6 +35608,30 @@ const AppStateMd = createMetadata({
       parameters: {
         newState: "An object that specifies the new state value."
       }
+    },
+    appendToList: {
+      signature: "appendToList(key: string, id: any)",
+      description: "This method appends an item to an array in the application state object bound to the `AppState` instance.",
+      parameters: {
+        key: "The key of the array in the state object.",
+        id: "The item to append to the array."
+      }
+    },
+    removeFromList: {
+      signature: "removeFromList(key: string, id: any)",
+      description: "This method removes an item from an array in the application state object bound to the `AppState` instance.",
+      parameters: {
+        key: "The key of the array in the state object.",
+        id: "The item to remove from the array."
+      }
+    },
+    listIncludes: {
+      signature: "listIncludes(key: string, id: any)",
+      description: "This method checks if an array in the application state object contains a specific item.",
+      parameters: {
+        key: "The key of the array in the state object.",
+        id: "The item to check for in the array."
+      }
     }
   },
   nonVisual: true
@@ -35262,14 +35639,15 @@ const AppStateMd = createMetadata({
 const appStateComponentRenderer = createComponentRenderer(
   COMP$u,
   AppStateMd,
-  ({ node, extractValue, updateState, registerComponentApi }) => {
+  ({ node, extractValue, updateState, registerComponentApi, lookupEventHandler }) => {
     return /* @__PURE__ */ jsx(
       AppState,
       {
         bucket: extractValue(node.props.bucket),
         initialValue: extractValue(node.props.initialValue),
         updateState,
-        registerComponentApi
+        registerComponentApi,
+        onDidUpdate: lookupEventHandler("didUpdate")
       }
     );
   }
@@ -36030,6 +36408,8 @@ const SliderMd = createMetadata({
     [`borderStyle-thumb-${COMP$p}`]: "solid",
     [`borderColor-thumb-${COMP$p}`]: "$color-surface-50",
     [`backgroundColor-thumb-${COMP$p}`]: "$color-primary",
+    [`backgroundColor-thumb-${COMP$p}--focus`]: "$color-primary",
+    [`boxShadow-thumb-${COMP$p}--focus`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
     [`backgroundColor-thumb-${COMP$p}--hover`]: "$color-primary",
     [`boxShadow-thumb-${COMP$p}--hover`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
     [`backgroundColor-thumb-${COMP$p}--active`]: "$color-primary-400",
@@ -36220,8 +36600,8 @@ const CarouselComponent = forwardRef(function CarouselComponent2({
     },
     plugins
   );
-  const prevIconName = prevIcon || orientation === "horizontal" ? "arrowleft" : "arrowup";
-  const nextIconName = nextIcon || orientation === "horizontal" ? "arrowright" : "arrowdown";
+  const prevIconName = prevIcon || (orientation === "horizontal" ? "arrowleft" : "arrowup");
+  const nextIconName = nextIcon || (orientation === "horizontal" ? "arrowright" : "arrowdown");
   useEffect(() => {
     if (autoplay) {
       setPlugins([
@@ -40642,7 +41022,8 @@ function PieChart({
   labelListPosition = defaultProps$5.labelListPosition,
   innerRadius = defaultProps$5.innerRadius,
   children,
-  outerRadius = "60%",
+  outerRadius,
+  // no default; we'll compute when undefined or "auto"
   showLegend = defaultProps$5.showLegend
 }) {
   const { getThemeVar } = useTheme();
@@ -40694,37 +41075,73 @@ function PieChart({
     }));
   }, [colorValues, data]);
   const chartContextValue = useChartContextValue({ dataKey, nameKey });
+  const wrapperRef = useRef(null);
+  const [box, setBox] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    if (!wrapperRef.current || typeof window === "undefined" || !window.ResizeObserver)
+      return;
+    const ro = new window.ResizeObserver((entries) => {
+      var _a2;
+      const cr = (_a2 = entries[0]) == null ? void 0 : _a2.contentRect;
+      if (cr) setBox({ width: cr.width, height: cr.height });
+    });
+    ro.observe(wrapperRef.current);
+    return () => ro.disconnect();
+  }, []);
+  const RING_PADDING = 8;
+  const LABEL_GUTTER_OUTSIDE = 16;
+  const LABEL_GUTTER_INSIDE = 6;
+  const MIN_RING_THICKNESS = 12;
+  const labelsOutside = !!showLabel || showLabelList && labelListPosition === "outside";
+  const resolvedOuterRadius = useMemo(() => {
+    const wantsAuto = outerRadius === void 0 || typeof outerRadius === "string" && outerRadius.toLowerCase() === "auto";
+    if (!wantsAuto) return outerRadius;
+    const base2 = Math.min(box.width, box.height) / 2;
+    const gutter2 = labelsOutside ? LABEL_GUTTER_OUTSIDE : LABEL_GUTTER_INSIDE;
+    const inner = Number(innerRadius) || 0;
+    const derived = Math.max(inner + MIN_RING_THICKNESS, base2 - gutter2 - RING_PADDING);
+    if (!Number.isFinite(derived) || derived <= 0) {
+      return labelsOutside ? "72%" : "88%";
+    }
+    return derived;
+  }, [outerRadius, box.width, box.height, labelsOutside, innerRadius]);
   return /* @__PURE__ */ jsxs(ChartProvider, { value: chartContextValue, children: [
     children,
-    /* @__PURE__ */ jsx("div", { className: classnames(styles$7.wrapper, className), style: style2, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(PieChart$1, { children: [
-      /* @__PURE__ */ jsx(Tooltip$2, { content: /* @__PURE__ */ jsx(TooltipContent, {}) }),
-      /* @__PURE__ */ jsx(
-        Pie,
-        {
-          data: chartData,
-          dataKey,
-          nameKey,
-          innerRadius,
-          outerRadius,
-          paddingAngle: 1,
-          activeShape: renderActiveShape,
-          label: showLabel ? renderCustomizedLabel : false,
-          labelLine: showLabel,
-          children: chartContextValue.labelList ? chartContextValue.labelList : showLabelList && /* @__PURE__ */ jsx(
-            LabelList$1,
+    /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: classnames(styles$7.wrapper, className), style: style2, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 0, children: /* @__PURE__ */ jsxs(
+      PieChart$1,
+      {
+        margin: { top: 8, right: 8, bottom: labelsOutside ? 16 : 8, left: 8 },
+        children: [
+          /* @__PURE__ */ jsx(Tooltip$2, { content: /* @__PURE__ */ jsx(TooltipContent, {}) }),
+          /* @__PURE__ */ jsx(
+            Pie,
             {
-              position: labelListPosition,
-              dataKey: nameKey,
-              className: styles$7.labelList,
-              stroke: "none",
-              fill: "currentColor",
-              fontSize: 12
+              data: chartData,
+              dataKey,
+              nameKey,
+              innerRadius,
+              outerRadius: resolvedOuterRadius,
+              paddingAngle: 1,
+              activeShape: renderActiveShape,
+              label: showLabel ? renderCustomizedLabel : false,
+              labelLine: showLabel,
+              children: chartContextValue.labelList ? chartContextValue.labelList : showLabelList && /* @__PURE__ */ jsx(
+                LabelList$1,
+                {
+                  position: labelListPosition,
+                  dataKey: nameKey,
+                  className: styles$7.labelList,
+                  stroke: "none",
+                  fill: "currentColor",
+                  fontSize: 12
+                }
+              )
             }
-          )
-        }
-      ),
-      chartContextValue.legend ? chartContextValue.legend : showLegend && /* @__PURE__ */ jsx(Legend$1, {})
-    ] }) }) })
+          ),
+          chartContextValue.legend ? chartContextValue.legend : showLegend && /* @__PURE__ */ jsx(Legend$1, {})
+        ]
+      }
+    ) }) })
   ] });
 }
 const COMP$8 = "DonutChart";
@@ -41952,21 +42369,23 @@ class ComponentRegistry {
       (_a3 = extension.components) == null ? void 0 : _a3.forEach((c) => {
         if ("type" in c) {
           this.registerComponentRenderer(c, extension.namespace);
+        } else if ("compoundComponentDef" in c) {
+          this.registerCompoundComponentRenderer(c, extension.namespace);
         }
       });
     };
-    this.registerCoreComponent = (component) => {
-      if ("compoundComponentDef" in component) {
-        this.registerCompoundComponentRenderer(component, CORE_NS);
+    this.registerCoreComponent = (component2) => {
+      if ("compoundComponentDef" in component2) {
+        this.registerCompoundComponentRenderer(component2, CORE_NS);
       } else {
-        this.registerComponentRenderer(component, CORE_NS);
+        this.registerComponentRenderer(component2, CORE_NS);
       }
     };
-    this.registerAppComponent = (component) => {
-      if ("compoundComponentDef" in component) {
-        this.registerCompoundComponentRenderer(component, APP_NS);
+    this.registerAppComponent = (component2) => {
+      if ("compoundComponentDef" in component2) {
+        this.registerCompoundComponentRenderer(component2, APP_NS);
       } else {
-        this.registerComponentRenderer(component, APP_NS);
+        this.registerComponentRenderer(component2, APP_NS);
       }
     };
     this.registerComponentRenderer = ({
@@ -41975,7 +42394,7 @@ class ComponentRegistry {
       metadata,
       isCompoundComponent
     }, namespace) => {
-      const component = {
+      const component2 = {
         renderer,
         descriptor: metadata,
         isCompoundComponent
@@ -41984,7 +42403,7 @@ class ComponentRegistry {
       if (!this.pool.has(namespace)) {
         this.pool.set(namespace, /* @__PURE__ */ new Map());
       }
-      this.pool.get(namespace).set(type, component);
+      this.pool.get(namespace).set(type, component2);
       this.namePool.set(fullName, { name: type, namespace });
       if (metadata == null ? void 0 : metadata.themeVars) {
         Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
@@ -42517,14 +42936,14 @@ class ComponentRegistry {
   }
   // --- Registers a compound component using its definition and metadata
   registerCompoundComponentRenderer({ compoundComponentDef, metadata }, namespace) {
-    const component = {
+    const component2 = {
       type: compoundComponentDef.name,
       renderer: (rendererContext) => {
         return /* @__PURE__ */ jsx(
           CompoundComponent,
           {
             api: compoundComponentDef.api,
-            scriptCollected: compoundComponentDef.scriptCollected,
+            scriptCollected: compoundComponentDef.component.scriptCollected,
             compound: compoundComponentDef.component,
             ...rendererContext
           }
@@ -42533,7 +42952,7 @@ class ComponentRegistry {
       isCompoundComponent: true,
       metadata
     };
-    this.registerComponentRenderer(component, namespace);
+    this.registerComponentRenderer(component2, namespace);
   }
   // --- Registers an action function using its definition
   registerActionFn({ actionName: functionName, actionFn }) {
@@ -43421,7 +43840,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.13";
+const version = "0.10.15";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -46360,16 +46779,23 @@ function ApiBoundComponent({
     function generateloaderUid(key) {
       return `${node.uid}_data_${key}`;
     }
-    const loaders = [...node.loaders || []];
-    const events = { ...node.events || {} };
-    const props = { ...node.props || {} };
-    const vars2 = { ...node.vars || {} };
-    const api = { ...node.api || {} };
-    apiBoundEvents.forEach((key) => {
-      const { type } = node.events[key];
+    function generateEventHandler(actionComponent) {
+      const { type } = actionComponent;
+      const prepareEvent = (eventData) => {
+        if (!eventData) {
+          return "undefined";
+        }
+        if (typeof eventData === "string") {
+          return `"${eventData}"`;
+        }
+        if (typeof eventData.type === "string") {
+          return generateEventHandler(eventData);
+        }
+        return JSON.stringify(eventData);
+      };
+      const { success, error: error2, progress, beforeRequest } = actionComponent.events || {};
       switch (type) {
         case "FileUpload": {
-          const actionComponent = node.events[key];
           const {
             invalidates,
             asForm,
@@ -46382,8 +46808,7 @@ function ApiBoundComponent({
             method,
             file
           } = actionComponent.props;
-          const { success, error: error2 } = actionComponent.events || {};
-          events[key] = `(eventArgs) => {
+          return `(eventArgs) => {
             return Actions.upload({
               asForm: ${JSON.stringify(asForm)}, 
               formParams: ${JSON.stringify(formParams)}, 
@@ -46395,17 +46820,15 @@ function ApiBoundComponent({
               method: ${JSON.stringify(method)}, 
               file: ${JSON.stringify(file)}, 
               params: { '$param': eventArgs }, 
-              onError: ${JSON.stringify(error2)}, 
-              onSuccess: ${JSON.stringify(success)}, 
+              onError: ${prepareEvent(error2)}, 
+              onSuccess: ${prepareEvent(success)}, 
               onProgress: eventArgs.onProgress, 
               invalidates: ${invalidates === void 0 ? void 0 : JSON.stringify(invalidates)}  }, { resolveBindingExpressions: true });
           }`;
-          break;
         }
         case "FileDownload": {
-          const actionComponent = node.events[key];
           const { url, queryParams, rawBody, body, headers, method, fileName } = actionComponent.props;
-          events[key] = `(eventArgs) => {
+          return `(eventArgs) => {
             return Actions.download({
               queryParams: ${JSON.stringify(queryParams)}, 
               rawBody: ${JSON.stringify(rawBody)}, 
@@ -46417,10 +46840,8 @@ function ApiBoundComponent({
               params: { '$param': eventArgs },
             }, { resolveBindingExpressions: true });
           }`;
-          break;
         }
         case "APICall": {
-          const actionComponent = node.events[key];
           const { when, uid: uid2 } = actionComponent;
           const {
             confirmTitle,
@@ -46441,8 +46862,7 @@ function ApiBoundComponent({
             rawBody,
             body
           } = actionComponent.props;
-          const { success, error: error2, progress, beforeRequest } = actionComponent.events || {};
-          events[key] = `(eventArgs, options) => {
+          return `(eventArgs, options) => {
             return Actions.callApi({
               uid: ${JSON.stringify(uid2)},
               headers: ${JSON.stringify(headers)}, 
@@ -46458,10 +46878,10 @@ function ApiBoundComponent({
               completedNotificationMessage: ${JSON.stringify(completedNotificationMessage)}, 
               errorNotificationMessage: ${JSON.stringify(errorNotificationMessage)}, 
               params: { '$param': eventArgs }, 
-              onError: ${JSON.stringify(error2)}, 
-              onProgress: ${JSON.stringify(progress)}, 
-              onBeforeRequest: ${JSON.stringify(beforeRequest)}, 
-              onSuccess: ${JSON.stringify(success)}, 
+              onError: ${prepareEvent(error2)}, 
+              onProgress: ${prepareEvent(progress)}, 
+              onBeforeRequest: ${prepareEvent(beforeRequest)}, 
+              onSuccess: ${prepareEvent(success)}, 
               updates: ${JSON.stringify(updates)}, 
               optimisticValue: ${JSON.stringify(optimisticValue)}, 
               payloadType: ${JSON.stringify(payloadType)}, 
@@ -46469,12 +46889,20 @@ function ApiBoundComponent({
               invalidates: ${invalidates === void 0 ? void 0 : JSON.stringify(invalidates)}, 
               when: ${when === void 0 ? void 0 : JSON.stringify(when)} }, { resolveBindingExpressions: true });
           }`;
-          break;
         }
         default: {
           throw new Error("Unknown event handler component type: ", type);
         }
       }
+    }
+    const loaders = [...node.loaders || []];
+    const events = { ...node.events || {} };
+    const props = { ...node.props || {} };
+    const vars2 = { ...node.vars || {} };
+    const api = { ...node.api || {} };
+    apiBoundEvents.forEach((key) => {
+      const actionComponent = node.events[key];
+      events[key] = generateEventHandler(actionComponent);
     });
     apiBoundProps.forEach((key) => {
       var _a2, _b, _c;
@@ -46837,6 +47265,126 @@ const Animation$1 = forwardRef(function Animation2({
   }, [animateWhenInView, animationStyles, children, springs, rest]);
   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: 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) => {
+    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 generatedId2 = useId();
+    return /* @__PURE__ */ jsx(
+      ItemWithLabel,
+      {
+        id: componentNode.uid || generatedId2,
+        labelPosition,
+        label: label2,
+        labelWidth,
+        labelBreak: labelBreak2,
+        required: required2,
+        enabled: enabled2,
+        style: style2,
+        className,
+        shrinkToLabel: shrinkToLabel2,
+        testId: componentNode.testId,
+        children: node
+      }
+    );
+  }
+};
+const BehaviorContext = createContext(
+  void 0
+);
+const BehaviorsProvider = ({ children }) => {
+  const behaviors = useMemo(() => /* @__PURE__ */ new Map(), []);
+  const getBehaviors = () => {
+    return Array.from(behaviors.values());
+  };
+  const registerBehavior = (behavior) => {
+    behaviors.set(behavior.name, behavior);
+  };
+  const unregisterBehavior = (name) => {
+    behaviors.delete(name);
+  };
+  useMemo(() => {
+    if (process.env.VITE_USED_BEHAVIORS_Animation !== "false") {
+      registerBehavior(animationBehavior);
+    }
+    if (process.env.VITE_USED_BEHAVIORS_Tooltip !== "false") {
+      registerBehavior(tooltipBehavior);
+    }
+    if (process.env.VITE_USED_BEHAVIORS_Label !== "false") {
+      registerBehavior(labelBehavior);
+    }
+  }, []);
+  const contextValue2 = useMemo(
+    () => ({
+      behaviors,
+      registerBehavior,
+      unregisterBehavior,
+      getBehaviors
+    }),
+    [behaviors]
+  );
+  return /* @__PURE__ */ jsx(BehaviorContext.Provider, { value: contextValue2, children });
+};
+const useBehaviors = () => {
+  const context = useContext(BehaviorContext);
+  if (!context) {
+    throw new Error("useBehaviors must be used within a BehaviorsProvider");
+  }
+  return context;
+};
 const ComponentAdapter = forwardRef(function ComponentAdapter2({
   node,
   state,
@@ -46962,63 +47510,28 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
       mediaSize: appContext.mediaSize
     });
   }, [appContext.mediaSize, layoutContextRef, safeNode.props, valueExtractor]);
-  const tooltipText = useMemo(
-    () => {
-      var _a3;
-      return valueExtractor((_a3 = safeNode.props) == null ? void 0 : _a3.tooltip, true);
-    },
-    [safeNode.props, valueExtractor]
-  );
-  const tooltipMarkdown = useMemo(
-    () => {
-      var _a3;
-      return valueExtractor((_a3 = safeNode.props) == null ? void 0 : _a3.tooltipMarkdown, true);
-    },
-    [safeNode.props, valueExtractor]
-  );
-  const tooltipOptions = useMemo(
-    () => {
-      var _a3;
-      return valueExtractor((_a3 = safeNode.props) == null ? void 0 : _a3.tooltipOptions, true);
-    },
-    [safeNode.props, valueExtractor]
-  );
-  const animation = useMemo(
-    () => {
-      var _a3;
-      return valueExtractor((_a3 = safeNode.props) == null ? void 0 : _a3.animation, true);
-    },
-    [safeNode.props, valueExtractor]
-  );
-  const animationOptions = useMemo(
-    () => {
-      var _a3;
-      return valueExtractor((_a3 = safeNode.props) == null ? void 0 : _a3.animationOptions, true);
-    },
-    [safeNode.props, valueExtractor]
-  );
   const stableLayoutCss = useShallowCompareMemoize(cssProps);
   const className = useComponentStyle(stableLayoutCss);
   const { inspectId, refreshInspection } = useInspector(safeNode, uid);
+  const rendererContext = {
+    node: safeNode,
+    state: state[uid] || EMPTY_OBJECT,
+    updateState: memoedUpdateState,
+    appContext,
+    extractValue: valueExtractor,
+    lookupEventHandler: memoedLookupEventHandler,
+    lookupAction: memoedLookupAction,
+    lookupSyncCallback: memoedLookupSyncCallback,
+    extractResourceUrl,
+    renderChild: memoedRenderChild,
+    registerComponentApi: memoedRegisterComponentApi,
+    className,
+    layoutContext: layoutContextRef == null ? void 0 : layoutContextRef.current,
+    uid
+  };
   let renderedNode = null;
   let renderingError = null;
   try {
-    const rendererContext = {
-      node: safeNode,
-      state: state[uid] || EMPTY_OBJECT,
-      updateState: memoedUpdateState,
-      appContext,
-      extractValue: valueExtractor,
-      lookupEventHandler: memoedLookupEventHandler,
-      lookupAction: memoedLookupAction,
-      lookupSyncCallback: memoedLookupSyncCallback,
-      extractResourceUrl,
-      renderChild: memoedRenderChild,
-      registerComponentApi: memoedRegisterComponentApi,
-      className,
-      layoutContext: layoutContextRef == null ? void 0 : layoutContextRef.current,
-      uid
-    };
     if (safeNode.type === "Slot") {
       renderedNode = slotRenderer(rendererContext, parentRenderContext);
     } else {
@@ -47105,23 +47618,20 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
   } else {
     nodeToRender = React__default.isValidElement(renderedNode) && !!children ? cloneElement(renderedNode, null, children) : renderedNode;
   }
-  const applyWrappers = (node2) => {
-    if (animation && (tooltipMarkdown || tooltipText)) {
-      const parsedOptions = parseTooltipOptions(tooltipOptions);
-      const parsedAnimationOptions = parseAnimationOptions(animationOptions);
-      return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, markdown: tooltipMarkdown, ...parsedOptions, children: /* @__PURE__ */ jsx(Animation$1, { animation: parseAnimation(animation), ...parsedAnimationOptions, children: node2 }) });
-    }
-    if (animation) {
-      const parsedAnimationOptions = parseAnimationOptions(animationOptions);
-      return /* @__PURE__ */ jsx(Animation$1, { animation: parseAnimation(animation), ...parsedAnimationOptions, children: node2 });
-    }
-    if (tooltipMarkdown || tooltipText) {
-      const parsedOptions = parseTooltipOptions(tooltipOptions);
-      return /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, markdown: tooltipMarkdown, ...parsedOptions, children: node2 });
+  const { getBehaviors } = useBehaviors();
+  const applyBehaviors = (node2) => {
+    const behaviors = getBehaviors();
+    let wrappedNode = node2;
+    if (!isCompoundComponent) {
+      for (const behavior of behaviors) {
+        if (behavior.canAttach(rendererContext.node, descriptor)) {
+          wrappedNode = behavior.attach(rendererContext, wrappedNode);
+        }
+      }
     }
-    return node2;
+    return wrappedNode;
   };
-  return applyWrappers(nodeToRender);
+  return applyBehaviors(nodeToRender);
 });
 function slotRenderer({ node, extractValue, renderChild: renderChild2, lookupAction, layoutContext }, parentRenderContext) {
   const templateName = extractValue.asOptionalString(node.props.name);
@@ -48087,8 +48597,8 @@ const ComponentViewer = () => {
     if (!projectCompilation) {
       return [];
     }
-    return projectCompilation.components.map((component) => {
-      return component.markupSource;
+    return projectCompilation.components.map((component2) => {
+      return component2.markupSource;
     });
   }, [projectCompilation]);
   const value = useMemo(() => {
@@ -48277,7 +48787,7 @@ function AppRoot({
     ...globalProps,
     isNested
   }), [globalProps, isNested]);
-  return /* @__PURE__ */ jsx(ComponentProvider, { contributes, extensionManager, children: /* @__PURE__ */ jsx(StyleProvider, { children: /* @__PURE__ */ jsx(DebugViewProvider, { debugConfig: globalProps == null ? void 0 : globalProps.debug, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ComponentProvider, { contributes, extensionManager, children: /* @__PURE__ */ jsx(StyleProvider, { children: /* @__PURE__ */ jsx(BehaviorsProvider, { children: /* @__PURE__ */ jsx(DebugViewProvider, { debugConfig: globalProps == null ? void 0 : globalProps.debug, children: /* @__PURE__ */ jsx(
     AppWrapper,
     {
       projectCompilation,
@@ -48299,7 +48809,7 @@ function AppRoot({
       onInit,
       children
     }
-  ) }) }) });
+  ) }) }) }) });
 }
 function getTransitiveDependencies(directCompDepNames, components) {
   const allDepsByCompName = components.reduce(
@@ -48331,23 +48841,23 @@ function checkXmlUiMarkup(rootDef, components, metadataHandler, devMode) {
     visitComponent(rootDef, null, componentDefVisitor, continuation, metadataHandler);
   }
   if (!continuation.abort) {
-    for (const component of components) {
-      if (!isValidIdentifier(component.name)) {
-        reportError("M007", "Component", component.name);
+    for (const component2 of components) {
+      if (!isValidIdentifier(component2.name)) {
+        reportError("M007", "Component", component2.name);
       }
-      if (component.name === "Component") {
-        reportError("M008", "Component", component.name);
+      if (component2.name === "Component") {
+        reportError("M008", "Component", component2.name);
       }
-      if (metadataHandler.componentRegistered(component.name)) {
-        reportError("M009", "Component", component.name);
+      if (metadataHandler.componentRegistered(component2.name)) {
+        reportError("M009", "Component", component2.name);
       }
-      if (compoundIdsCollected.has(component.name)) {
-        reportError("M010", "Component", component.name);
+      if (compoundIdsCollected.has(component2.name)) {
+        reportError("M010", "Component", component2.name);
       } else {
-        compoundIdsCollected.add(component.name);
+        compoundIdsCollected.add(component2.name);
       }
       componentIdsCollected.clear();
-      visitComponent(component.component, null, componentDefVisitor, continuation, metadataHandler);
+      visitComponent(component2.component, null, componentDefVisitor, continuation, metadataHandler);
     }
   }
   return errorsCollected;
@@ -48530,8 +49040,8 @@ class StandaloneExtensionManager {
    */
   subscribeToRegistrations(cb) {
     this.subscriptions.add(cb);
-    this.registeredExtensions.forEach((component) => {
-      cb(component);
+    this.registeredExtensions.forEach((component2) => {
+      cb(component2);
     });
   }
   /**
@@ -48543,11 +49053,11 @@ class StandaloneExtensionManager {
   unSubscribeFromRegistrations(cb) {
     this.subscriptions.delete(cb);
   }
-  registerExtension(component) {
-    (Array.isArray(component) ? component : [component]).forEach((component2) => {
-      this.registeredExtensions.push(component2);
+  registerExtension(component2) {
+    (Array.isArray(component2) ? component2 : [component2]).forEach((component22) => {
+      this.registeredExtensions.push(component22);
       this.subscriptions.forEach((cb) => {
-        cb(component2);
+        cb(component22);
       });
     });
   }
@@ -48941,16 +49451,16 @@ async function parseComponentMarkupResponse(response) {
   }
   const code = await response.text();
   const fileId = response.url;
-  let { component, errors, erroneousCompoundComponentName } = xmlUiMarkupToComponent(code, fileId);
+  let { component: component2, errors, erroneousCompoundComponentName } = xmlUiMarkupToComponent(code, fileId);
   if (errors.length > 0) {
     const compName = erroneousCompoundComponentName ?? response.url.substring(
       response.url.lastIndexOf("/") + 1,
       response.url.length - ".xmlui".length
     );
-    component = errReportComponent(errors, fileId, compName);
+    component2 = errReportComponent(errors, fileId, compName);
   }
   return {
-    component,
+    component: component2,
     src: code,
     file: fileId,
     hasError: errors.length > 0
@@ -49571,70 +50081,106 @@ function discoverCompilationDependencies({
 function discoverDirectComponentDependencies(entrypoint, registry) {
   return discoverDirectComponentDependenciesHelp(entrypoint, registry, /* @__PURE__ */ new Set());
 }
-function discoverDirectComponentDependenciesHelp(component, registry, deps) {
-  if (!component) {
+function discoverDirectComponentDependenciesHelp(component2, registry, deps) {
+  if (!component2) {
     return deps;
   }
-  const compName = component.type;
+  const compName = component2.type;
   if (!registry.hasComponent(compName)) {
     deps.add(compName);
   }
-  if (!component.children) {
+  if (!component2.children) {
     return deps;
   }
-  for (const child of component.children) {
+  for (const child of component2.children) {
     discoverDirectComponentDependenciesHelp(child, registry, deps);
   }
   return deps;
 }
 export {
-  AppRoot as A,
-  Button as B,
-  Spinner as C,
-  useThemes as D,
-  ErrorBoundary as E,
-  builtInThemes as F,
-  Text as G,
-  TextBox as H,
-  Icon as I,
-  ToneChangerButton as J,
-  Logo as K,
-  LinkNative as L,
-  Breakout as M,
-  NestedApp as N,
-  useSearchContextContent as O,
-  useAppLayoutContext as P,
-  StyleProvider as Q,
-  StyleRegistry as R,
+  Icon as $,
+  dInitialValue as A,
+  dInternal as B,
+  dLabel as C,
+  dLabelBreak as D,
+  dLabelPosition as E,
+  dLabelWidth as F,
+  dLostFocus as G,
+  dMaxLength as H,
+  dMulti as I,
+  dOrientation as J,
+  dPlaceholder as K,
+  dReadonly as L,
+  dRequired as M,
+  dStartIcon as N,
+  dStartText as O,
+  dSetValueApi as P,
+  dTriggerTemplate as Q,
+  dValidationStatus as R,
   StandaloneApp as S,
   ThrowStatementError as T,
-  useEvent as U,
-  VisuallyHidden as V,
-  StandaloneComponent as W,
+  dValue as U,
+  dValueApi as V,
+  parseScssVar as W,
+  startApp as X,
+  useTheme as Y,
+  AppRoot as Z,
+  ErrorBoundary as _,
   dateFunctions as a,
+  Stack as a0,
+  Button as a1,
+  Splitter as a2,
+  getColor as a3,
+  TabItemComponent as a4,
+  Tabs as a5,
+  useColors as a6,
+  toCssVar$1 as a7,
+  useDevTools as a8,
+  useLogger as a9,
+  errReportComponent as aa,
+  xmlUiMarkupToComponent as ab,
+  ApiInterceptorProvider as ac,
+  Spinner as ad,
+  useThemes as ae,
+  builtInThemes as af,
+  Text as ag,
+  TextBox as ah,
+  NestedApp as ai,
+  VisuallyHidden as aj,
+  LinkNative as ak,
+  ToneChangerButton as al,
+  Logo as am,
+  Breakout as an,
+  useSearchContextContent as ao,
+  useAppLayoutContext as ap,
+  StyleProvider as aq,
+  StyleRegistry as ar,
+  useEvent as as,
+  StandaloneComponent as at,
+  Theme as au,
   StandaloneExtensionManager as b,
   createComponentRenderer as c,
   delay$1 as d,
-  createMetadata as e,
-  d as f,
+  createUserDefinedComponentRenderer as e,
+  createMetadata as f,
   getDate as g,
-  dComponent as h,
-  Stack as i,
-  Splitter as j,
-  getColor as k,
-  TabItemComponent as l,
+  d as h,
+  dComponent as i,
+  dAutoFocus as j,
+  dClick as k,
+  dCollapse as l,
   miscellaneousUtils as m,
-  Tabs as n,
+  dDidChange as n,
   orderBy as o,
-  parseScssVar as p,
-  useColors as q,
+  dDidClose as p,
+  dDidOpen as q,
   runEventHandlerCode as r,
-  startApp as s,
-  toCssVar$1 as t,
-  useTheme as u,
-  useDevTools as v,
-  useLogger as w,
-  errReportComponent as x,
-  xmlUiMarkupToComponent as y,
-  ApiInterceptorProvider as z
+  dEnabled as s,
+  dFocus as t,
+  dEndIcon as u,
+  dEndText as v,
+  dExpanded as w,
+  dExpand as x,
+  dGotFocus as y,
+  dIndeterminate as z
 };