xmlui 0.10.14 → 0.10.15

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

@@ -9,7 +9,7 @@ import { useQuery, useInfiniteQuery, QueryClientProvider, QueryClient } from "@t
 import produce, { createDraft, finishDraft, enableMapSet } from "immer";
 import { throttle, get, isNil, omitBy, isUndefined, noop as noop$2, isPlainObject, isEqual, isEmpty, union, uniq, orderBy as orderBy$1, isObject, isArray, groupBy, sortBy, omit, isNumber, isString as isString$1, set, isNaN as isNaN$1, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
 import { 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";
@@ -864,6 +864,7 @@ const defaultProps$1f = {
 const numberRegex = /^[0-9]+$/;
 const ItemWithLabel = forwardRef(function ItemWithLabel2({
   id,
+  testId,
   labelPosition = "top",
   style: style2 = {},
   className,
@@ -902,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",
       {
@@ -946,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 })
         ]
       }
     ),
@@ -1057,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).`
@@ -1111,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}\`.`,
@@ -3423,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,
@@ -5487,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
     };
   }, [
@@ -5496,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,
@@ -5522,6 +5561,7 @@ const NavGroup = forwardRef(function NavGroup2({
       renderChild: renderChild2,
       ref,
       to,
+      initiallyExpanded,
       disabled: disabled2
     }
   ) });
@@ -5572,7 +5612,6 @@ const ExpandableNavGroup = forwardRef(function ExpandableNavGroup2({
     /* @__PURE__ */ jsx(
       "div",
       {
-        "data-testid": "nav-group-content",
         "aria-hidden": !expanded2,
         className: classnames(styles$18.groupContent, {
           [styles$18.expanded]: expanded2
@@ -5589,6 +5628,7 @@ const DropDownNavGroup = forwardRef(function DropDownNavGroup2({
   node,
   to,
   disabled: disabled2 = false,
+  initiallyExpanded = false,
   ...rest
 }, ref) {
   const {
@@ -5607,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,
@@ -6421,6 +6473,9 @@ const treeDisplayComponentRenderer = createComponentRenderer(
     );
   }
 );
+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",
@@ -6558,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,
       {
@@ -6576,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
       }
     );
   }
@@ -9601,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])
     );
@@ -9616,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(() => {
@@ -9868,6 +9926,7 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
   collectCss("zoom");
   collectCss("cursor");
   collectCss("whiteSpace");
+  collectCss("transform");
   collectCss("outline");
   collectCss("outlineWidth");
   collectCss("outlineColor");
@@ -10074,6 +10133,7 @@ const layoutPatterns = {
   textDecorationStyle: [],
   textDecorationThickness: [],
   textUnderlineOffset: [],
+  transform: [],
   // --- Outline
   outline: [],
   outlineWidth: [],
@@ -10969,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) {
@@ -11611,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,
@@ -11679,7 +11851,9 @@ const Table = forwardRef(
       rowsSelectable,
       enableMultiRowSelection,
       rowDisabledPredicate,
-      onSelectionDidChange
+      onSelectionDidChange,
+      initiallySelected,
+      syncWithAppState
     });
     const dataWithOrder = useMemo(() => {
       return safeData.map((item2, index) => {
@@ -12180,6 +12354,7 @@ const defaultProps$Z = {
   loading: false,
   rowsSelectable: false,
   enableMultiRowSelection: true,
+  initiallySelected: EMPTY_ARRAY,
   pageSizeOptions: [5, 10, 15],
   sortingDirection: "ascending",
   autoFocus: false,
@@ -12217,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.`
     ),
@@ -12498,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)
         }
       )
     ] });
@@ -17478,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;
@@ -17544,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
+          }
+        )
+      ]
     }
   );
 });
@@ -22094,7 +22256,7 @@ function ApiInterceptorProvider({
       return;
     }
     (async () => {
-      const { initMock } = await import("./initMock-CAXdczCj.mjs");
+      const { initMock } = await import("./initMock-BoTWMs19.mjs");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -22111,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-CAXdczCj.mjs")
+              import("./initMock-BoTWMs19.mjs")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -22148,7 +22310,7 @@ function ApiInterceptorProvider({
         (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-DPgtUtdA.mjs"),
-            import("./initMock-CAXdczCj.mjs")
+            import("./initMock-BoTWMs19.mjs")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -24408,15 +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,
-                      autoFocus,
-                      "aria-required": required2
+                      autoFocus
                     }
                   )
                 },
@@ -25351,10 +25513,6 @@ const TextBoxMd = createMetadata({
       ...dInitialValue(),
       defaultValue: defaultProps$I.initialValue
     },
-    label: dLabel(),
-    labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$Y),
-    labelBreak: dLabelBreak(COMP$Y),
     maxLength: dMaxLength(),
     autoFocus: dAutoFocus(),
     required: dRequired(),
@@ -25467,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),
@@ -25572,7 +25726,6 @@ function shouldReturnAsArrayBuffer(contentType) {
     "application/x-tar",
     "application/gzip",
     "application/x-7z-compressed",
-    "application/octet-stream",
     "application/x-binary"
   ];
   return arrayBufferTypes.some((type) => contentType.toLowerCase().includes(type.toLowerCase()));
@@ -30288,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",
@@ -33694,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({
@@ -33727,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,
@@ -34158,6 +34305,7 @@ const TimeInputNative = forwardRef(function TimeInputNative2({
             /* @__PURE__ */ jsx(
               HourInput,
               {
+                id,
                 amPm,
                 autoFocus,
                 disabled: !enabled2,
@@ -34254,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({
@@ -34635,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",
@@ -34776,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),
@@ -35416,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);
@@ -35428,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.`,
@@ -35457,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
@@ -35464,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")
       }
     );
   }
@@ -40846,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();
@@ -40898,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";
@@ -43627,7 +43840,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.14";
+const version = "0.10.15";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -46566,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,
@@ -46588,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)}, 
@@ -46601,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)}, 
@@ -46623,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,
@@ -46647,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)}, 
@@ -46664,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)}, 
@@ -46675,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;
@@ -47043,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,
@@ -47168,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 {
@@ -47311,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);
@@ -48483,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,
@@ -48505,7 +48809,7 @@ function AppRoot({
       onInit,
       children
     }
-  ) }) }) });
+  ) }) }) }) });
 }
 function getTransitiveDependencies(directCompDepNames, components) {
   const allDepsByCompName = components.reduce(
@@ -49794,31 +50098,66 @@ function discoverDirectComponentDependenciesHelp(component2, registry, deps) {
   return deps;
 }
 export {
-  AppRoot as A,
-  Button as B,
-  ApiInterceptorProvider as C,
-  Spinner as D,
-  ErrorBoundary as E,
-  useThemes as F,
-  builtInThemes as G,
-  Text as H,
-  Icon as I,
-  TextBox as J,
-  ToneChangerButton as K,
-  LinkNative as L,
-  Logo as M,
-  NestedApp as N,
-  Breakout as O,
-  useSearchContextContent as P,
-  useAppLayoutContext as Q,
-  StyleProvider 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,
-  StyleRegistry as U,
-  VisuallyHidden as V,
-  useEvent as W,
-  StandaloneComponent as X,
+  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,
@@ -49827,21 +50166,21 @@ export {
   getDate as g,
   d as h,
   dComponent as i,
-  Stack as j,
-  Splitter as k,
-  getColor as l,
+  dAutoFocus as j,
+  dClick as k,
+  dCollapse as l,
   miscellaneousUtils as m,
-  TabItemComponent as n,
+  dDidChange as n,
   orderBy as o,
-  parseScssVar as p,
-  Tabs as q,
+  dDidClose as p,
+  dDidOpen as q,
   runEventHandlerCode as r,
-  startApp as s,
-  useColors as t,
-  useTheme as u,
-  toCssVar$1 as v,
-  useDevTools as w,
-  useLogger as x,
-  errReportComponent as y,
-  xmlUiMarkupToComponent 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
 };