xmlui 0.11.19 → 0.11.20

package/dist/lib/{index-CtiJg1j6.js → index-BQKYtkKU.js}

@@ -7,12 +7,13 @@ 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, isString, isPlainObject, noop as noop$2, isEmpty, isEqual, union, uniq, orderBy as orderBy$1, isObject, isArray, groupBy, sortBy, omit, isNumber, set, isNaN as isNaN$1, cloneDeep, merge, defaultTo, capitalize, unset, setWith, keyBy, pick } from "lodash-es";
+import { throttle, get, isNil, omitBy, isUndefined, isString, isPlainObject, noop as noop$2, isEmpty, isEqual, union, uniq, orderBy as orderBy$1, isObject, isArray, groupBy, sortBy, omit, isNumber, set, cloneDeep, isNaN as isNaN$1, 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 classnames from "classnames";
 import { c as PART_LABELED_ITEM, d as PART_LABEL, b as PART_INPUT, e as PART_ICON, P as PART_START_ADORNMENT, a as PART_END_ADORNMENT, x as xmlUiMarkupToComponent, f as errReportComponent, g as errReportMessage, h as errReportScriptError, i as errReportModuleErrors } from "./xmlui-parser-9Yk-asFP.js";
 import Color from "color";
-import { Popover, PopoverTrigger, Portal, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { DropdownMenu as DropdownMenu$1, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuSub, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuSubContent as DropdownMenuSubContent$1 } from "@radix-ui/react-dropdown-menu";
 import * as VisuallyHidden$1 from "@radix-ui/react-visually-hidden";
 import { VisuallyHidden as VisuallyHidden$2 } from "@radix-ui/react-visually-hidden";
 import TextareaAutosize from "react-textarea-autosize";
@@ -22,13 +23,13 @@ import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { useContextSelector, createContext as createContext$1 } from "use-context-selector";
 import { F as Parser, G as T_CALCULATED_MEMBER_ACCESS_EXPRESSION, H as T_MEMBER_ACCESS_EXPRESSION, I as T_IDENTIFIER, J as T_PREFIX_OP_EXPRESSION, K as T_FUNCTION_DECLARATION, L as T_ARROW_EXPRESSION, M as createXmlUiTreeNodeId, O as T_EMPTY_STATEMENT, Q as T_SWITCH_STATEMENT, R as T_TRY_STATEMENT, V as T_THROW_STATEMENT, W as T_FOR_OF_STATEMENT, X as T_FOR_IN_STATEMENT, Y as T_FOR_STATEMENT, Z as T_EXPRESSION_STATEMENT, _ as T_BREAK_STATEMENT, $ as T_CONTINUE_STATEMENT, a0 as T_DO_WHILE_STATEMENT, a1 as T_WHILE_STATEMENT, a2 as T_RETURN_STATEMENT, a3 as T_IF_STATEMENT, a4 as T_CONST_STATEMENT, a5 as T_LET_STATEMENT, a6 as T_ARROW_EXPRESSION_STATEMENT, a7 as T_BLOCK_STATEMENT, a8 as T_VAR_STATEMENT, a9 as T_ASSIGNMENT_EXPRESSION, aa as T_LITERAL, ab as T_SPREAD_EXPRESSION, ac as T_FUNCTION_INVOCATION_EXPRESSION, ad as T_POSTFIX_OP_EXPRESSION, ae as T_CONDITIONAL_EXPRESSION, af as T_BINARY_EXPRESSION, ag as T_UNARY_EXPRESSION, ah as T_OBJECT_LITERAL, ai as T_ARRAY_LITERAL, aj as T_SEQUENCE_EXPRESSION, ak as T_TEMPLATE_LITERAL_EXPRESSION, al as T_VAR_DECLARATION, am as T_DESTRUCTURE, an as PARSED_MARK_PROP, ao as collectCodeBehindFromSource, ap as removeCodeBehindTokensFromTree } from "./transform-CQ_6R-43.js";
 import memoizeOne from "memoize-one";
-import { DropdownMenu as DropdownMenu$1, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent as DropdownMenuContent$1, DropdownMenuItem as DropdownMenuItem$1, DropdownMenuSub, DropdownMenuSubTrigger as DropdownMenuSubTrigger$1, DropdownMenuSubContent as DropdownMenuSubContent$1 } from "@radix-ui/react-dropdown-menu";
 import { Virtualizer } from "virtua";
 import { useReactTable, getPaginationRowModel, getCoreRowModel, flexRender } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { RenderPropSticky } from "react-sticky-el";
 import * as dropzone from "react-dropzone";
 import toast, { Toaster, ToastBar } from "react-hot-toast";
+import { Popover, PopoverTrigger, Portal, PopoverContent, PopoverPortal } from "@radix-ui/react-popover";
 import * as InnerRadioGroup from "@radix-ui/react-radio-group";
 import { DayPicker } from "react-day-picker";
 import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
@@ -3416,36 +3417,8 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
     setOpen(false);
   }, []);
   const contentRef = useRef(null);
-  const handleKeyDown = useCallback((event) => {
-    if (event.key === "Escape") {
-      setOpen(false);
-      return;
-    }
-    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      const content2 = contentRef.current;
-      if (!content2) return;
-      const menuItems = Array.from(
-        content2.querySelectorAll('[role="menuitem"]:not([class*="disabled"])')
-      );
-      if (menuItems.length === 0) return;
-      const currentIndex = menuItems.findIndex((item2) => item2 === document.activeElement);
-      let nextIndex;
-      if (currentIndex === -1) {
-        nextIndex = event.key === "ArrowDown" ? 0 : menuItems.length - 1;
-      } else if (event.key === "ArrowDown") {
-        nextIndex = currentIndex < menuItems.length - 1 ? currentIndex + 1 : 0;
-      } else {
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : menuItems.length - 1;
-      }
-      menuItems[nextIndex]?.focus();
-    }
-    if (event.key === "Enter" || event.key === " ") {
-      return;
-    }
-  }, []);
   return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: { closeMenu }, children: /* @__PURE__ */ jsxs(
-    Popover,
+    DropdownMenuPrimitive.Root,
     {
       open,
       onOpenChange: async (isOpen) => {
@@ -3469,31 +3442,20 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
       },
       modal,
       children: [
-        /* @__PURE__ */ jsx(
-          PopoverTrigger,
+        /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ...rest, asChild: true, disabled: disabled2, ref, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
+          Button,
           {
-            ...rest,
-            asChild: true,
+            icon: /* @__PURE__ */ jsx(Icon, { name: triggerButtonIcon, fallback: "chevrondown" }),
+            iconPosition: triggerButtonIconPosition,
+            type: "button",
+            variant: triggerButtonVariant,
+            themeColor: triggerButtonThemeColor,
             disabled: disabled2,
-            ref,
-            "aria-haspopup": "menu",
-            "aria-expanded": open,
-            children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
-              Button,
-              {
-                icon: /* @__PURE__ */ jsx(Icon, { name: triggerButtonIcon, fallback: "chevrondown" }),
-                iconPosition: triggerButtonIconPosition,
-                type: "button",
-                variant: triggerButtonVariant,
-                themeColor: triggerButtonThemeColor,
-                disabled: disabled2,
-                children: label2
-              }
-            )
+            children: label2
           }
-        ),
-        /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
-          PopoverContent,
+        ) }),
+        /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: root2, children: /* @__PURE__ */ jsx(
+          DropdownMenuPrimitive.Content,
           {
             ref: contentRef,
             align: alignment,
@@ -3501,13 +3463,8 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
             className: classnames(styles$1i.DropdownMenuContent, className, {
               [styles$1i.compact]: compact2
             }),
-            onOpenAutoFocus: (e) => {
-              e.preventDefault();
-              contentRef.current?.focus();
-            },
-            onKeyDownCapture: handleKeyDown,
-            role: "menu",
             tabIndex: -1,
+            loop: true,
             children
           }
         ) })
@@ -3541,25 +3498,8 @@ const MenuItem = forwardRef(function MenuItem2({
     },
     [enabled2, onClick, context]
   );
-  const handleKeyDown = useCallback(
-    (event) => {
-      if (!enabled2) return;
-      if (event.key === "Enter") {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-        context?.closeMenu();
-      } else if (event.key === " ") {
-        event.preventDefault();
-        event.stopPropagation();
-        onClick(event);
-        context?.closeMenu();
-      }
-    },
-    [enabled2, onClick, context]
-  );
   return /* @__PURE__ */ jsxs(
-    "div",
+    DropdownMenuPrimitive.Item,
     {
       style: style2,
       className: classnames(className, styles$1i.DropdownMenuItem, {
@@ -3569,7 +3509,6 @@ const MenuItem = forwardRef(function MenuItem2({
       }),
       ref,
       onClick: handleClick,
-      onKeyDown: handleKeyDown,
       role: "menuitem",
       tabIndex: enabled2 ? 0 : -1,
       children: [
@@ -3583,28 +3522,14 @@ const MenuItem = forwardRef(function MenuItem2({
 const SubMenuItem = forwardRef(function SubMenuItem2({ children, label: label2, triggerTemplate }, ref) {
   const { root: root2 } = useTheme();
   const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, modal: false, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: styles$1i.DropdownMenuSubTrigger,
-        role: "menuitem",
-        tabIndex: 0,
-        ref,
-        onMouseEnter: () => setOpen(true),
-        onMouseLeave: () => setOpen(false),
-        children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 })
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
-      PopoverContent,
+  return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.Sub, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubTrigger, { ref, className: styles$1i.DropdownMenuSubTrigger, asChild: true, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx("div", { children: label2 }) }),
+    /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { container: root2, children: /* @__PURE__ */ jsx(
+      DropdownMenuPrimitive.SubContent,
       {
         className: styles$1i.DropdownMenuSubContent,
-        side: "right",
-        align: "start",
-        onMouseEnter: () => setOpen(true),
-        onMouseLeave: () => setOpen(false),
-        onOpenAutoFocus: (e) => e.preventDefault(),
+        sideOffset: 2,
+        loop: true,
         children
       }
     ) })
@@ -8723,37 +8648,20 @@ const localLinkComponentRenderer = createComponentRenderer(
 const MemoizedItem = memo(
   ({
     node,
-    item: item2,
-    context,
     renderChild: renderChild2,
     layoutContext,
-    contextVars = EMPTY_OBJECT,
-    itemKey = "$item",
-    contextKey = "$context"
+    contextVars = EMPTY_OBJECT
   }) => {
     const shallowMemoedContextVars = useShallowCompareMemoize(contextVars);
-    const nodeWithItem = useMemo(() => {
-      if (itemKey === contextKey) {
-        return {
-          type: "Container",
-          contextVars: {
-            [itemKey]: { ...item2, ...context },
-            ...shallowMemoedContextVars
-          },
-          children: Array.isArray(node) ? node : [node]
-        };
-      }
-      return {
+    const nodeWithContextVars = useMemo(
+      () => ({
         type: "Container",
-        contextVars: {
-          [itemKey]: item2,
-          [contextKey]: context,
-          ...shallowMemoedContextVars
-        },
+        contextVars: shallowMemoedContextVars,
         children: Array.isArray(node) ? node : [node]
-      };
-    }, [context, item2, node, shallowMemoedContextVars, itemKey, contextKey]);
-    return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(nodeWithItem, layoutContext) });
+      }),
+      [node, shallowMemoedContextVars]
+    );
+    return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(nodeWithContextVars, layoutContext) });
   }
 );
 MemoizedItem.displayName = "MemoizedItem";
@@ -10481,7 +10389,7 @@ const treeComponentRenderer = createComponentRenderer(
             // - All original source data properties (custom fields)
             ...flatTreeNode
           };
-          return node.props.itemTemplate ? /* @__PURE__ */ jsx(MemoizedItem, { node: node.props.itemTemplate, item: itemContext, renderChild: renderChild2 }) : /* @__PURE__ */ jsx(MemoizedItem, { node: defaultItemTemplate, item: itemContext, renderChild: renderChild2 });
+          return node.props.itemTemplate ? /* @__PURE__ */ jsx(MemoizedItem, { node: node.props.itemTemplate, contextVars: { $item: itemContext }, renderChild: renderChild2 }) : /* @__PURE__ */ jsx(MemoizedItem, { node: defaultItemTemplate, contextVars: { $item: itemContext }, renderChild: renderChild2 });
         }
       }
     );
@@ -11905,7 +11813,7 @@ const defaultCompResult = {
   cssProps: {},
   issues: /* @__PURE__ */ new Set()
 };
-function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
+function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext, disableInlineStyle) {
   const result = {
     cssProps: {},
     issues: /* @__PURE__ */ new Set()
@@ -11913,128 +11821,128 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
   if (!!getOrientation(layoutContext)) {
     result.cssProps.flexShrink = 0;
   }
-  collectCss("width");
+  collectCss("width", false);
   const horizontalStarSize = getHorizontalStarSize(result.cssProps.width, layoutContext);
   if (horizontalStarSize !== null) {
     result.cssProps.flex = horizontalStarSize;
     result.cssProps.flexShrink = 1;
   }
-  collectCss("minWidth");
-  collectCss("maxWidth");
-  collectCss("height");
+  collectCss("minWidth", false);
+  collectCss("maxWidth", false);
+  collectCss("height", false);
   const verticalStarSize = getVerticalStarSize(result.cssProps.height, layoutContext);
   if (verticalStarSize !== null) {
     result.cssProps.flex = verticalStarSize;
     result.cssProps.flexShrink = 1;
   }
-  collectCss("minHeight");
-  collectCss("maxHeight");
-  collectCss("top");
-  collectCss("right");
-  collectCss("bottom");
-  collectCss("left");
-  collectCss("gap");
-  collectCss("padding");
+  collectCss("minHeight", false);
+  collectCss("maxHeight", false);
+  collectCss("top", disableInlineStyle);
+  collectCss("right", disableInlineStyle);
+  collectCss("bottom", disableInlineStyle);
+  collectCss("left", disableInlineStyle);
+  collectCss("gap", disableInlineStyle);
+  collectCss("padding", disableInlineStyle);
   const paddingHorizontal = transformLayoutValue("paddingHorizontal");
   if (paddingHorizontal) {
     result.cssProps.paddingLeft = paddingHorizontal;
     result.cssProps.paddingRight = paddingHorizontal;
   }
-  collectCss("paddingRight");
-  collectCss("paddingLeft");
+  collectCss("paddingRight", disableInlineStyle);
+  collectCss("paddingLeft", disableInlineStyle);
   const paddingVertical = transformLayoutValue("paddingVertical");
   if (paddingVertical) {
     result.cssProps.paddingTop = paddingVertical;
     result.cssProps.paddingBottom = paddingVertical;
   }
-  collectCss("paddingTop");
-  collectCss("paddingBottom");
-  collectCss("margin");
+  collectCss("paddingTop", disableInlineStyle);
+  collectCss("paddingBottom", disableInlineStyle);
+  collectCss("margin", disableInlineStyle);
   const marginHorizontal = transformLayoutValue("marginHorizontal");
   if (marginHorizontal) {
     result.cssProps.marginLeft = marginHorizontal;
     result.cssProps.marginRight = marginHorizontal;
   }
-  collectCss("marginRight");
-  collectCss("marginLeft");
+  collectCss("marginRight", disableInlineStyle);
+  collectCss("marginLeft", disableInlineStyle);
   const marginVertical = transformLayoutValue("marginVertical");
   if (marginVertical) {
     result.cssProps.marginTop = marginVertical;
     result.cssProps.marginBottom = marginVertical;
   }
-  collectCss("marginTop");
-  collectCss("marginBottom");
-  collectCss("border");
+  collectCss("marginTop", disableInlineStyle);
+  collectCss("marginBottom", disableInlineStyle);
+  collectCss("border", disableInlineStyle);
   const horizontalBorder = transformLayoutValue("borderHorizontal");
   if (horizontalBorder) {
     result.cssProps.borderLeft = horizontalBorder;
     result.cssProps.borderRight = horizontalBorder;
   }
-  collectCss("borderRight");
-  collectCss("borderLeft");
+  collectCss("borderRight", disableInlineStyle);
+  collectCss("borderLeft", disableInlineStyle);
   const verticalBorder = transformLayoutValue("borderVertical");
   if (verticalBorder) {
     result.cssProps.borderTop = verticalBorder;
     result.cssProps.borderBottom = verticalBorder;
   }
-  collectCss("borderTop");
-  collectCss("borderBottom");
-  collectCss("borderColor");
-  collectCss("borderStyle");
-  collectCss("borderWidth");
-  collectCss("borderRadius");
-  collectCss("radiusTopLeft", "borderTopLeftRadius");
-  collectCss("radiusTopRight", "borderTopRightRadius");
-  collectCss("radiusBottomLeft", "borderBottomLeftRadius");
-  collectCss("radiusBottomRight", "borderBottomRightRadius");
-  collectCss("color");
-  collectCss("fontFamily");
-  collectCss("fontSize");
-  collectCss("fontWeight");
-  collectCss("fontStyle");
-  collectCss("fontVariant");
-  collectCss("lineBreak");
-  collectCss("textDecoration");
-  collectCss("textDecorationLine");
-  collectCss("textDecorationColor");
-  collectCss("textDecorationStyle");
-  collectCss("textDecorationThickness");
-  collectCss("textIndent");
-  collectCss("textShadow");
-  collectCss("textUnderlineOffset");
-  collectCss("userSelect");
-  collectCss("letterSpacing");
-  collectCss("textTransform");
-  collectCss("lineHeight");
-  collectCss("textAlign");
-  collectCss("textAlignLast");
-  collectCss("textWrap");
-  collectCss("wordBreak");
-  collectCss("wordSpacing");
-  collectCss("wordWrap");
-  collectCss("writingMode");
-  collectCss("backgroundColor");
-  collectCss("background");
-  collectCss("boxShadow");
-  collectCss("direction");
-  collectCss("overflowX");
-  collectCss("overflowY");
-  collectCss("zIndex");
-  collectCss("opacity");
-  collectCss("zoom");
-  collectCss("cursor");
-  collectCss("whiteSpace");
-  collectCss("transform");
-  collectCss("outline");
-  collectCss("outlineWidth");
-  collectCss("outlineColor");
-  collectCss("outlineStyle");
-  collectCss("outlineOffset");
+  collectCss("borderTop", disableInlineStyle);
+  collectCss("borderBottom", disableInlineStyle);
+  collectCss("borderColor", disableInlineStyle);
+  collectCss("borderStyle", disableInlineStyle);
+  collectCss("borderWidth", disableInlineStyle);
+  collectCss("borderRadius", disableInlineStyle);
+  collectCss("radiusTopLeft", disableInlineStyle, "borderTopLeftRadius");
+  collectCss("radiusTopRight", disableInlineStyle, "borderTopRightRadius");
+  collectCss("radiusBottomLeft", disableInlineStyle, "borderBottomLeftRadius");
+  collectCss("radiusBottomRight", disableInlineStyle, "borderBottomRightRadius");
+  collectCss("color", disableInlineStyle);
+  collectCss("fontFamily", disableInlineStyle);
+  collectCss("fontSize", disableInlineStyle);
+  collectCss("fontWeight", disableInlineStyle);
+  collectCss("fontStyle", disableInlineStyle);
+  collectCss("fontVariant", disableInlineStyle);
+  collectCss("lineBreak", disableInlineStyle);
+  collectCss("textDecoration", disableInlineStyle);
+  collectCss("textDecorationLine", disableInlineStyle);
+  collectCss("textDecorationColor", disableInlineStyle);
+  collectCss("textDecorationStyle", disableInlineStyle);
+  collectCss("textDecorationThickness", disableInlineStyle);
+  collectCss("textIndent", disableInlineStyle);
+  collectCss("textShadow", disableInlineStyle);
+  collectCss("textUnderlineOffset", disableInlineStyle);
+  collectCss("userSelect", disableInlineStyle);
+  collectCss("letterSpacing", disableInlineStyle);
+  collectCss("textTransform", disableInlineStyle);
+  collectCss("lineHeight", disableInlineStyle);
+  collectCss("textAlign", disableInlineStyle);
+  collectCss("textAlignLast", disableInlineStyle);
+  collectCss("textWrap", disableInlineStyle);
+  collectCss("wordBreak", disableInlineStyle);
+  collectCss("wordSpacing", disableInlineStyle);
+  collectCss("wordWrap", disableInlineStyle);
+  collectCss("writingMode", disableInlineStyle);
+  collectCss("backgroundColor", disableInlineStyle);
+  collectCss("background", disableInlineStyle);
+  collectCss("boxShadow", disableInlineStyle);
+  collectCss("direction", disableInlineStyle);
+  collectCss("overflowX", disableInlineStyle);
+  collectCss("overflowY", disableInlineStyle);
+  collectCss("zIndex", disableInlineStyle);
+  collectCss("opacity", disableInlineStyle);
+  collectCss("zoom", disableInlineStyle);
+  collectCss("cursor", disableInlineStyle);
+  collectCss("whiteSpace", disableInlineStyle);
+  collectCss("transform", disableInlineStyle);
+  collectCss("outline", disableInlineStyle);
+  collectCss("outlineWidth", disableInlineStyle);
+  collectCss("outlineColor", disableInlineStyle);
+  collectCss("outlineStyle", disableInlineStyle);
+  collectCss("outlineOffset", disableInlineStyle);
   const wrapContent = transformLayoutValue("wrapContent");
   if (wrapContent) {
     result.cssProps.flexWrap = wrapContent === "true" ? "wrap" : "nowrap";
   }
-  collectCss("canShrink", "flexShrink");
+  collectCss("canShrink", disableInlineStyle, "flexShrink");
   const canShrink = transformLayoutValue("canShrink");
   if (canShrink) {
     result.cssProps.flexShrink = canShrink === "true" ? 1 : 0;
@@ -12108,7 +12016,8 @@ function resolveLayoutProps(layoutProps = EMPTY_OBJECT, layoutContext) {
       return value;
     }
   }
-  function collectCss(prop, propCssName = "") {
+  function collectCss(prop, disableInlineStyle2 = false, propCssName = "") {
+    if (disableInlineStyle2) return;
     const value = transformLayoutValue(prop);
     if (value) {
       result.cssProps[propCssName || prop] = value;
@@ -12607,33 +12516,36 @@ const fragmentComponentRenderer = createComponentRenderer(
   }
 );
 const themeVars$L = `'{"textColor-pagination-Table": "var(--xmlui-textColor-pagination-Table)", "backgroundColor-Table": "var(--xmlui-backgroundColor-Table)", "textColor-Table": "var(--xmlui-textColor-Table)", "backgroundColor-row-Table": "var(--xmlui-backgroundColor-row-Table)", "backgroundColor-row-Table--hover": "var(--xmlui-backgroundColor-row-Table--hover)", "backgroundColor-selected-Table": "var(--xmlui-backgroundColor-selected-Table)", "backgroundColor-selected-Table--hover": "var(--xmlui-backgroundColor-selected-Table--hover)", "backgroundColor-heading-Table": "var(--xmlui-backgroundColor-heading-Table)", "backgroundColor-heading-Table--hover": "var(--xmlui-backgroundColor-heading-Table--hover)", "backgroundColor-heading-Table--active": "var(--xmlui-backgroundColor-heading-Table--active)", "padding-heading-Table": "var(--xmlui-padding-heading-Table)", "paddingHorizontal-heading-Table": "var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table))", "paddingVertical-heading-Table": "var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table))", "paddingLeft-heading-Table": "var(--xmlui-paddingLeft-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingRight-heading-Table": "var(--xmlui-paddingRight-heading-Table, var(--xmlui-paddingHorizontal-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingTop-heading-Table": "var(--xmlui-paddingTop-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "paddingBottom-heading-Table": "var(--xmlui-paddingBottom-heading-Table, var(--xmlui-paddingVertical-heading-Table, var(--xmlui-padding-heading-Table)))", "padding-cell-Table": "var(--xmlui-padding-cell-Table)", "paddingHorizontal-cell-Table": "var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table))", "paddingVertical-cell-Table": "var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table))", "paddingLeft-cell-Table": "var(--xmlui-paddingLeft-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingRight-cell-Table": "var(--xmlui-paddingRight-cell-Table, var(--xmlui-paddingHorizontal-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingTop-cell-Table": "var(--xmlui-paddingTop-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingBottom-cell-Table": "var(--xmlui-paddingBottom-cell-Table, var(--xmlui-paddingVertical-cell-Table, var(--xmlui-padding-cell-Table)))", "paddingHorizontal-cell-first-Table": "var(--xmlui-paddingHorizontal-cell-first-Table)", "paddingHorizontal-cell-last-Table": "var(--xmlui-paddingHorizontal-cell-last-Table)", "border-cell-Table": "var(--xmlui-border-cell-Table)", "borderHorizontal-cell-Table": "var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table))", "borderVertical-cell-Table": "var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table))", "borderLeft-cell-Table": "var(--xmlui-borderLeft-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderRight-cell-Table": "var(--xmlui-borderRight-cell-Table, var(--xmlui-borderHorizontal-cell-Table, var(--xmlui-border-cell-Table)))", "borderTop-cell-Table": "var(--xmlui-borderTop-cell-Table, var(--xmlui-borderVertical-cell-Table, var(--xmlui-border-cell-Table)))", "borderBottom-cell-Table": "var(--xmlui-borderBottom-cell-Table)", "borderWidth-cell-Table": "var(--xmlui-borderWidth-cell-Table)", "borderHorizontalWidth-cell-Table": "var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderLeftWidth-cell-Table": "var(--xmlui-borderLeftWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderRightWidth-cell-Table": "var(--xmlui-borderRightWidth-cell-Table, var(--xmlui-borderHorizontalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderVerticalWidth-cell-Table": "var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table))", "borderTopWidth-cell-Table": "var(--xmlui-borderTopWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderBottomWidth-cell-Table": "var(--xmlui-borderBottomWidth-cell-Table, var(--xmlui-borderVerticalWidth-cell-Table, var(--xmlui-borderWidth-cell-Table)))", "borderStyle-cell-Table": "var(--xmlui-borderStyle-cell-Table)", "borderHorizontalStyle-cell-Table": "var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderLeftStyle-cell-Table": "var(--xmlui-borderLeftStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderRightStyle-cell-Table": "var(--xmlui-borderRightStyle-cell-Table, var(--xmlui-borderHorizontalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderVerticalStyle-cell-Table": "var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table))", "borderTopStyle-cell-Table": "var(--xmlui-borderTopStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderBottomStyle-cell-Table": "var(--xmlui-borderBottomStyle-cell-Table, var(--xmlui-borderVerticalStyle-cell-Table, var(--xmlui-borderStyle-cell-Table)))", "borderColor-cell-Table": "var(--xmlui-borderColor-cell-Table)", "borderHorizontalColor-cell-Table": "var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderLeftColor-cell-Table": "var(--xmlui-borderLeftColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderRightColor-cell-Table": "var(--xmlui-borderRightColor-cell-Table, var(--xmlui-borderHorizontalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderVerticalColor-cell-Table": "var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table))", "borderTopColor-cell-Table": "var(--xmlui-borderTopColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderBottomColor-cell-Table": "var(--xmlui-borderBottomColor-cell-Table, var(--xmlui-borderVerticalColor-cell-Table, var(--xmlui-borderColor-cell-Table)))", "borderStartStartRadius-cell-Table": "var(--xmlui-borderStartStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderStartEndRadius-cell-Table": "var(--xmlui-borderStartEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndStartRadius-cell-Table": "var(--xmlui-borderEndStartRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "borderEndEndRadius-cell-Table": "var(--xmlui-borderEndEndRadius-cell-Table, var(--xmlui-borderRadius-cell-Table))", "border-Table": "var(--xmlui-border-Table)", "borderHorizontal-Table": "var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table))", "borderVertical-Table": "var(--xmlui-borderVertical-Table, var(--xmlui-border-Table))", "borderLeft-Table": "var(--xmlui-borderLeft-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderRight-Table": "var(--xmlui-borderRight-Table, var(--xmlui-borderHorizontal-Table, var(--xmlui-border-Table)))", "borderTop-Table": "var(--xmlui-borderTop-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderBottom-Table": "var(--xmlui-borderBottom-Table, var(--xmlui-borderVertical-Table, var(--xmlui-border-Table)))", "borderWidth-Table": "var(--xmlui-borderWidth-Table)", "borderHorizontalWidth-Table": "var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table))", "borderLeftWidth-Table": "var(--xmlui-borderLeftWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderRightWidth-Table": "var(--xmlui-borderRightWidth-Table, var(--xmlui-borderHorizontalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderVerticalWidth-Table": "var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table))", "borderTopWidth-Table": "var(--xmlui-borderTopWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderBottomWidth-Table": "var(--xmlui-borderBottomWidth-Table, var(--xmlui-borderVerticalWidth-Table, var(--xmlui-borderWidth-Table)))", "borderStyle-Table": "var(--xmlui-borderStyle-Table)", "borderHorizontalStyle-Table": "var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table))", "borderLeftStyle-Table": "var(--xmlui-borderLeftStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderRightStyle-Table": "var(--xmlui-borderRightStyle-Table, var(--xmlui-borderHorizontalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderVerticalStyle-Table": "var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table))", "borderTopStyle-Table": "var(--xmlui-borderTopStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderBottomStyle-Table": "var(--xmlui-borderBottomStyle-Table, var(--xmlui-borderVerticalStyle-Table, var(--xmlui-borderStyle-Table)))", "borderColor-Table": "var(--xmlui-borderColor-Table)", "borderHorizontalColor-Table": "var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table))", "borderLeftColor-Table": "var(--xmlui-borderLeftColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderRightColor-Table": "var(--xmlui-borderRightColor-Table, var(--xmlui-borderHorizontalColor-Table, var(--xmlui-borderColor-Table)))", "borderVerticalColor-Table": "var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table))", "borderTopColor-Table": "var(--xmlui-borderTopColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderBottomColor-Table": "var(--xmlui-borderBottomColor-Table, var(--xmlui-borderVerticalColor-Table, var(--xmlui-borderColor-Table)))", "borderStartStartRadius-Table": "var(--xmlui-borderStartStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderStartEndRadius-Table": "var(--xmlui-borderStartEndRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndStartRadius-Table": "var(--xmlui-borderEndStartRadius-Table, var(--xmlui-borderRadius-Table))", "borderEndEndRadius-Table": "var(--xmlui-borderEndEndRadius-Table, var(--xmlui-borderRadius-Table))", "backgroundColor-pagination-Table": "var(--xmlui-backgroundColor-pagination-Table)", "textColor-heading-Table": "var(--xmlui-textColor-heading-Table)", "fontWeight-row-Table": "var(--xmlui-fontWeight-row-Table)", "fontSize-row-Table": "var(--xmlui-fontSize-row-Table)", "fontWeight-heading-Table": "var(--xmlui-fontWeight-heading-Table)", "fontSize-heading-Table": "var(--xmlui-fontSize-heading-Table)", "textTransform-heading-Table": "var(--xmlui-textTransform-heading-Table)", "borderRadius-Table": "var(--xmlui-borderRadius-Table)", "outlineWidth-heading-Table--focus": "var(--xmlui-outlineWidth-heading-Table--focus)", "outlineColor-heading-Table--focus": "var(--xmlui-outlineColor-heading-Table--focus)", "outlineStyle-heading-Table--focus": "var(--xmlui-outlineStyle-heading-Table--focus)", "outlineOffset-heading-Table--focus": "var(--xmlui-outlineOffset-heading-Table--focus)", "borderBottom-last-row-Table": "var(--xmlui-borderBottom-last-row-Table)"}'`;
-const wrapper$i = "_wrapper_fw2wb_14";
-const noScroll = "_noScroll_fw2wb_42";
-const headerWrapper$1 = "_headerWrapper_fw2wb_45";
-const tableBody = "_tableBody_fw2wb_46";
-const clickableHeader = "_clickableHeader_fw2wb_51";
-const headerContent = "_headerContent_fw2wb_65";
-const headerRow = "_headerRow_fw2wb_97";
-const columnCell = "_columnCell_fw2wb_101";
-const cell = "_cell_fw2wb_102";
-const alignTop = "_alignTop_fw2wb_110";
-const alignCenter$1 = "_alignCenter_fw2wb_114";
-const alignBottom = "_alignBottom_fw2wb_118";
-const table = "_table_fw2wb_46";
-const row$1 = "_row_fw2wb_126";
-const checkBoxWrapper = "_checkBoxWrapper_fw2wb_133";
-const showInHeader = "_showInHeader_fw2wb_138";
-const selected$1 = "_selected_fw2wb_142";
-const allSelected = "_allSelected_fw2wb_142";
-const cellContent = "_cellContent_fw2wb_173";
-const focused$1 = "_focused_fw2wb_200";
-const disabled$8 = "_disabled_fw2wb_212";
-const noBottomBorder = "_noBottomBorder_fw2wb_219";
-const noRows$1 = "_noRows_fw2wb_244";
-const loadingWrapper$1 = "_loadingWrapper_fw2wb_283";
-const forceHoverWrapper = "_forceHoverWrapper_fw2wb_296";
-const resizer$1 = "_resizer_fw2wb_299";
-const isResizing = "_isResizing_fw2wb_320";
+const wrapper$i = "_wrapper_17ovr_14";
+const noScroll = "_noScroll_17ovr_42";
+const headerWrapper$1 = "_headerWrapper_17ovr_45";
+const tableBody = "_tableBody_17ovr_46";
+const clickableHeader = "_clickableHeader_17ovr_51";
+const headerContent = "_headerContent_17ovr_65";
+const orderingIndicator = "_orderingIndicator_17ovr_68";
+const activeOrdering = "_activeOrdering_17ovr_73";
+const alwaysShow = "_alwaysShow_17ovr_73";
+const headerRow = "_headerRow_17ovr_111";
+const columnCell = "_columnCell_17ovr_115";
+const cell = "_cell_17ovr_116";
+const alignTop = "_alignTop_17ovr_124";
+const alignCenter$1 = "_alignCenter_17ovr_128";
+const alignBottom = "_alignBottom_17ovr_132";
+const table = "_table_17ovr_46";
+const row$1 = "_row_17ovr_140";
+const checkBoxWrapper = "_checkBoxWrapper_17ovr_147";
+const showInHeader = "_showInHeader_17ovr_152";
+const selected$1 = "_selected_17ovr_156";
+const allSelected = "_allSelected_17ovr_156";
+const cellContent = "_cellContent_17ovr_187";
+const focused$1 = "_focused_17ovr_214";
+const disabled$8 = "_disabled_17ovr_226";
+const noBottomBorder = "_noBottomBorder_17ovr_233";
+const noRows$1 = "_noRows_17ovr_258";
+const loadingWrapper$1 = "_loadingWrapper_17ovr_297";
+const forceHoverWrapper = "_forceHoverWrapper_17ovr_310";
+const resizer$1 = "_resizer_17ovr_313";
+const isResizing = "_isResizing_17ovr_334";
 const styles$13 = {
   themeVars: themeVars$L,
   wrapper: wrapper$i,
@@ -12642,6 +12554,9 @@ const styles$13 = {
   tableBody,
   clickableHeader,
   headerContent,
+  orderingIndicator,
+  activeOrdering,
+  alwaysShow,
   headerRow,
   columnCell,
   cell,
@@ -14512,6 +14427,7 @@ const Table = forwardRef(
     hideHeader = defaultProps$$.hideHeader,
     hideNoDataView = defaultProps$$.hideNoDataView,
     alwaysShowSelectionHeader = defaultProps$$.alwaysShowSelectionHeader,
+    alwaysShowSortingIndicator = defaultProps$$.alwaysShowSortingIndicator,
     registerComponentApi,
     onSelectionDidChange,
     noBottomBorder: noBottomBorder2 = defaultProps$$.noBottomBorder,
@@ -15004,13 +14920,22 @@ const Table = forwardRef(
                                 header2.column.columnDef.header,
                                 header2.getContext()
                               ),
-                              header2.column.columnDef.enableSorting && /* @__PURE__ */ jsx("span", { style: { display: "inline-flex", maxWidth: 16 }, children: /* @__PURE__ */ jsx(
-                                ColumnOrderingIndicator,
+                              header2.column.columnDef.enableSorting && /* @__PURE__ */ jsx(Part, { partId: "orderIndicator", children: /* @__PURE__ */ jsx(
+                                "span",
                                 {
-                                  iconSortAsc,
-                                  iconSortDesc,
-                                  iconNoSort,
-                                  direction: header2.column.columnDef.meta?.accessorKey === _sortBy ? _sortingDirection : void 0
+                                  className: classnames(styles$13.orderingIndicator, {
+                                    [styles$13.activeOrdering]: header2.column.columnDef.meta?.accessorKey === _sortBy,
+                                    [styles$13.alwaysShow]: alwaysShowSortingIndicator
+                                  }),
+                                  children: /* @__PURE__ */ jsx(
+                                    ColumnOrderingIndicator,
+                                    {
+                                      iconSortAsc,
+                                      iconSortDesc,
+                                      iconNoSort,
+                                      direction: header2.column.columnDef.meta?.accessorKey === _sortBy ? _sortingDirection : void 0
+                                    }
+                                  )
                                 }
                               ) })
                             ] })
@@ -15197,6 +15122,7 @@ const defaultProps$$ = {
   hideHeader: false,
   hideNoDataView: false,
   alwaysShowSelectionHeader: false,
+  alwaysShowSortingIndicator: false,
   noBottomBorder: false,
   paginationControlsLocation: "bottom",
   cellVerticalAlign: "center",
@@ -15326,12 +15252,17 @@ const TableMd = createMetadata({
     alwaysShowSelectionHeader: {
       description: "This property indicates when the row selection header is displayed. When the value is `true,` the selection header is always visible. Otherwise, it is displayed only when hovered.",
       valueType: "boolean",
-      defaultValue: false
+      defaultValue: defaultProps$$.alwaysShowSelectionHeader
+    },
+    alwaysShowSortingIndicator: {
+      description: `This property indicates whether the sorting indicator is always visible in the column headers. When set to \`true\`, the sorting indicator is always visible. Otherwise, it is visible only when the user hovers over/focuses the column header or the column is sorted.`,
+      valueType: "boolean",
+      defaultValue: defaultProps$$.alwaysShowSortingIndicator
     },
     noBottomBorder: {
       description: `This property indicates whether the table should have a bottom border. When set to \`true\`, the table does not have a bottom border. Otherwise, it has a bottom border.`,
       valueType: "boolean",
-      defaultValue: false
+      defaultValue: defaultProps$$.noBottomBorder
     },
     paginationControlsLocation: {
       description: `This property determines the location of the pagination controls. It can be set to \`top\`, \`bottom\`, or \`both\`.`,
@@ -15343,7 +15274,7 @@ const TableMd = createMetadata({
       description: `This property controls the vertical alignment of cell content. It can be set to \`top\`, \`center\`, or \`bottom\`.`,
       valueType: "string",
       availableValues: ["top", "center", "bottom"],
-      defaultValue: "center"
+      defaultValue: defaultProps$$.cellVerticalAlign
     },
     checkboxTolerance: {
       description: `This property controls the tolerance area around checkboxes for easier interaction. This property only has an effect when the rowsSelectable property is set to \`true\`. \`none\` provides no tolerance (0px), \`compact\` provides minimal tolerance (8px), \`comfortable\` provides medium tolerance (12px), and \`spacious\` provides generous tolerance (16px) for improved accessibility.`,
@@ -15398,6 +15329,7 @@ const TableMd = createMetadata({
     [`outlineWidth-heading-${COMP$1n}--focus`]: "$outlineWidth--focus",
     [`outlineStyle-heading-${COMP$1n}--focus`]: "$outlineStyle--focus",
     [`outlineOffset-heading-${COMP$1n}--focus`]: "$outlineOffset--focus",
+    [`outlineColor-heading-${COMP$1n}--focus`]: "$outlineColor--focus",
     [`fontSize-heading-${COMP$1n}`]: "$fontSize-tiny",
     [`fontWeight-heading-${COMP$1n}`]: "$fontWeight-bold",
     [`textTransform-heading-${COMP$1n}`]: "uppercase",
@@ -15406,7 +15338,6 @@ const TableMd = createMetadata({
     // [`backgroundColor-row-${COMP}`]: "inherit",
     [`backgroundColor-selected-${COMP$1n}--hover`]: `$backgroundColor-row-${COMP$1n}--hover`,
     [`backgroundColor-pagination-${COMP$1n}`]: `$backgroundColor-${COMP$1n}`,
-    [`outlineColor-heading-${COMP$1n}--focus`]: "$outlineColor--focus",
     [`textColor-pagination-${COMP$1n}`]: "$color-secondary",
     [`backgroundColor-row-${COMP$1n}--hover`]: "$color-primary-50",
     [`backgroundColor-selected-${COMP$1n}`]: "$color-primary-100",
@@ -15527,6 +15458,9 @@ const TableWithColumns = memo(
             alwaysShowSelectionHeader: extractValue.asOptionalBoolean(
               node.props.alwaysShowSelectionHeader
             ),
+            alwaysShowSortingIndicator: extractValue.asOptionalBoolean(
+              node.props.alwaysShowSortingIndicator
+            ),
             noBottomBorder: extractValue.asOptionalBoolean(node.props.noBottomBorder),
             paginationControlsLocation: extractValue.asOptionalString(
               node.props.paginationControlsLocation
@@ -16188,7 +16122,7 @@ const FlowLayoutContext = createContext({
 const FlowItemBreak = ({ force }) => /* @__PURE__ */ jsx("div", { className: classnames(styles$X.break, { [styles$X.forceBreak]: force }) });
 const FlowItemWrapper = forwardRef(function FlowItemWrapper2({ children, forceBreak: forceBreak2, ...restProps }, ref) {
   const { rowGap, columnGap, setNumberOfChildren } = useContext(FlowLayoutContext);
-  const { mediaSize } = useAppContext();
+  const { mediaSize, appGlobals } = useAppContext();
   useIsomorphicLayoutEffect(() => {
     setNumberOfChildren((prev) => prev + 1);
     return () => {
@@ -16212,10 +16146,11 @@ const FlowItemWrapper = forwardRef(function FlowItemWrapper2({ children, forceBr
         {
           type: "Stack",
           orientation: "horizontal"
-        }
+        },
+        appGlobals?.disableInlineStyle
       ).cssProps || {}
     );
-  }, [_maxWidth, _minWidth, _width]);
+  }, [_maxWidth, _minWidth, _width, appGlobals]);
   const resolvedWidth = useMemo(() => {
     if (width && typeof width === "string" && width.startsWith("var(")) {
       if (!resolvedCssVars[width]) {
@@ -18819,11 +18754,8 @@ function MemoizedSection({
     {
       node,
       renderChild: renderChild2,
-      item: item2,
-      context: sectionContext,
-      itemKey: "$group",
-      contextKey: "$group",
       contextVars: {
+        $group: { ...item2, ...sectionContext },
         ...contextVars,
         $isFirst: item2.index === 0,
         $isLast: item2.index === item2.count - 1
@@ -18976,10 +18908,10 @@ const dynamicHeightListComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: itemTemplate,
-              item: item2,
               renderChild: renderChild2,
               layoutContext,
               contextVars: {
+                $item: item2,
                 $itemIndex: rowIndex,
                 $isFirst: rowIndex === 0,
                 $isLast: rowIndex === count - 1
@@ -19001,10 +18933,10 @@ const dynamicHeightListComponentRenderer = createComponentRenderer(
           MemoizedItem,
           {
             node: node.props.groupFooterTemplate ?? { type: "Fragment" },
-            item: item2,
             renderChild: renderChild2,
-            itemKey: "$group",
-            contextKey: "$group"
+            contextVars: {
+              $group: item2
+            }
           },
           key
         ) : null : void 0
@@ -21271,9 +21203,10 @@ const SelectTriggerActions = ({
 }) => {
   const hasValue = multiSelect ? Array.isArray(value) && value.length > 0 : value !== void 0 && value !== null && value !== "";
   return /* @__PURE__ */ jsxs("div", { className: styles$K.actions, children: [
-    hasValue && enabled2 && !readOnly2 && clearable && /* @__PURE__ */ jsx(Part, { partId: PART_CLEAR_BUTTON$1, children: /* @__PURE__ */ jsx(
+    hasValue && enabled2 && !readOnly2 && clearable && /* @__PURE__ */ jsx(
       "span",
       {
+        "data-part-id": PART_CLEAR_BUTTON$1,
         className: styles$K.action,
         onClick: (event) => {
           event.stopPropagation();
@@ -21281,7 +21214,7 @@ const SelectTriggerActions = ({
         },
         children: /* @__PURE__ */ jsx(Icon, { name: "close" })
       }
-    ) }),
+    ),
     showChevron && /* @__PURE__ */ jsx("span", { className: styles$K.action, children: /* @__PURE__ */ jsx(Icon, { name: "chevrondown" }) })
   ] });
 };
@@ -21550,7 +21483,7 @@ const Select = forwardRef(function Select2({
         },
         modal,
         children: [
-          /* @__PURE__ */ jsx(Part, { partId: PART_LIST_WRAPPER$1, children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsxs(
             PopoverTrigger,
             {
               ...rest,
@@ -21562,6 +21495,7 @@ const Select = forwardRef(function Select2({
               onBlur,
               disabled: !enabled2,
               "aria-expanded": open,
+              "data-part-id": PART_LIST_WRAPPER$1,
               className: classnames(className, styles$K.selectTrigger, styles$K[validationStatus], {
                 [styles$K.disabled]: !enabled2,
                 [styles$K.multi]: multiSelect
@@ -21614,7 +21548,7 @@ const Select = forwardRef(function Select2({
                 )
               ]
             }
-          ) }),
+          ),
           open && /* @__PURE__ */ jsx(Portal, { container: root2, children: /* @__PURE__ */ jsx(
             PopoverContent,
             {
@@ -23039,18 +22973,26 @@ const Form = forwardRef(function({
       children: cancelLabel
     },
     "cancel"
-  ) });
+  ) }, PART_CANCEL_BUTTON);
   const submitButton = useMemo(
-    () => /* @__PURE__ */ jsx(Part, { partId: PART_SUBMIT_BUTTON, children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !isEnabled2 || !enableSubmit, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit") }),
+    () => /* @__PURE__ */ jsx(Part, { partId: PART_SUBMIT_BUTTON, children: /* @__PURE__ */ jsx(Button, { type: "submit", disabled: !isEnabled2 || !enableSubmit, children: formState.submitInProgress ? saveInProgressLabel : saveLabel }, "submit") }, PART_SUBMIT_BUTTON),
     [isEnabled2, enableSubmit, formState.submitInProgress, saveInProgressLabel, saveLabel]
   );
+  const getData = useCallback(() => {
+    return cloneDeep(cleanUpSubject(formState.subject, formState.noSubmitFields));
+  }, [formState.subject, formState.noSubmitFields]);
+  const getIsDirtyFlag = useCallback(() => {
+    return isDirty;
+  }, [isDirty]);
   useEffect(() => {
     registerComponentApi?.({
       reset: doReset,
       update: updateData,
-      validate: doValidate
+      validate: doValidate,
+      getData,
+      isDirty: getIsDirtyFlag
     });
-  }, [doReset, updateData, doValidate, registerComponentApi]);
+  }, [doReset, updateData, doValidate, getData, registerComponentApi, getIsDirtyFlag]);
   let safeButtonRow = /* @__PURE__ */ jsx(Fragment, { children: buttonRow2 || /* @__PURE__ */ jsxs("div", { className: styles$H.buttonRow, children: [
     swapCancelAndSave && [submitButton, cancelButton],
     !swapCancelAndSave && [cancelButton, submitButton]
@@ -23112,7 +23054,8 @@ const FormWithContextVar = forwardRef(function({
   style: style2,
   className,
   lookupEventHandler,
-  registerComponentApi
+  registerComponentApi,
+  appContext
 }, ref) {
   const [formState, dispatch] = useReducer(formReducer, initialState);
   const $data = useMemo(() => {
@@ -23148,7 +23091,7 @@ const FormWithContextVar = forwardRef(function({
   const errorNotificationMessage = extractValue.asOptionalString(node.props.errorNotificationMessage) || "";
   const submitUrl = extractValue.asOptionalString(node.props.submitUrl) || extractValue.asOptionalString(node.props._data_url);
   const itemLabelWidth = extractValue.asOptionalString(node.props.itemLabelWidth);
-  const { cssProps: itemLabelWidthCssProps } = resolveLayoutProps({ width: itemLabelWidth });
+  const { cssProps: itemLabelWidthCssProps } = resolveLayoutProps({ width: itemLabelWidth }, void 0, appContext?.appGlobals?.disableInlineStyle);
   return /* @__PURE__ */ jsx(Slot, { ref, style: style2, children: /* @__PURE__ */ jsx(
     Form,
     {
@@ -24770,7 +24713,7 @@ function ApiInterceptorProvider({
       return;
     }
     void (async () => {
-      const { initMock } = await import("./initMock-B4QMy8Go.js");
+      const { initMock } = await import("./initMock-DoewYSkg.js");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -24787,7 +24730,7 @@ function ApiInterceptorProvider({
           if (process.env.VITE_MOCK_ENABLED) {
             const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
               useWorker ? import("./apiInterceptorWorker-dwrAyq6l.js") : Promise.resolve({ createApiInterceptorWorker: () => null }),
-              import("./initMock-B4QMy8Go.js")
+              import("./initMock-DoewYSkg.js")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -24824,7 +24767,7 @@ function ApiInterceptorProvider({
         void (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-dwrAyq6l.js"),
-            import("./initMock-B4QMy8Go.js")
+            import("./initMock-DoewYSkg.js")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -27206,7 +27149,7 @@ const FormItem = memo(function FormItem2({
   const initialValueFromSubject = useFormContextPart(
     (value2) => getByPath(value2?.originalSubject, formItemId)
   );
-  const initialValue = initialValueFromSubject === void 0 ? initialValueFromProps : initialValueFromSubject;
+  const initialValue = initialValueFromSubject === void 0 || initialValueFromSubject === null ? initialValueFromProps : initialValueFromSubject;
   const value = useFormContextPart((value2) => getByPath(value2?.subject, formItemId));
   const validationResult = useFormContextPart((value2) => value2?.validationResults[formItemId]);
   const dispatch = useFormContextPart((value2) => value2?.dispatch);
@@ -28711,6 +28654,11 @@ const FormMd = createMetadata({
       description: "This method triggers validation on all form fields without submitting the form. It displays validation errors and returns the validation result along with the cleaned form data. This is useful for implementing custom submit buttons or performing operations that require validated data without actually submitting the form.",
       signature: "validate(): Promise<{ isValid: boolean, data: Record<string, any>, errors: ValidationResult[], warnings: ValidationResult[], validationResults: Record<string, ValidationResult> }>",
       returns: "A promise that resolves to an object containing validation status, cleaned data, and detailed validation results."
+    },
+    getData: {
+      description: "This method returns a deep clone of the current form data object. Changes to the returned object do not affect the form's internal state.",
+      signature: "getData(): Record<string, any>",
+      returns: "A deep clone of the current form data object."
     }
   },
   themeVars: parseScssVar(styles$H.themeVars),
@@ -28735,7 +28683,7 @@ const FormMd = createMetadata({
 const formComponentRenderer = createComponentRenderer(
   COMP$Z,
   FormMd,
-  ({ node, renderChild: renderChild2, extractValue, className, lookupEventHandler, registerComponentApi }) => {
+  ({ node, renderChild: renderChild2, extractValue, className, lookupEventHandler, registerComponentApi, appContext }) => {
     return /* @__PURE__ */ jsx(
       FormWithContextVar,
       {
@@ -28744,7 +28692,8 @@ const formComponentRenderer = createComponentRenderer(
         extractValue,
         lookupEventHandler,
         className,
-        registerComponentApi
+        registerComponentApi,
+        appContext
       }
     );
   }
@@ -31444,10 +31393,10 @@ const selectComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               contextVars: {
+                $item: item2,
                 $itemContext: { removeItem }
               },
               node: node.props.valueTemplate,
-              item: item2,
               renderChild: renderChild2
             }
           );
@@ -31457,8 +31406,8 @@ const selectComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.optionTemplate,
-              item: item2,
               contextVars: {
+                $item: item2,
                 $selectedValue: val,
                 $inTrigger: inTrigger
               },
@@ -33815,6 +33764,7 @@ function Theme({
   id,
   isRoot = defaultProps$n.isRoot,
   applyIf,
+  disableInlineStyle,
   renderChild: renderChild2,
   node,
   tone,
@@ -33911,7 +33861,8 @@ function Theme({
       themeStyles: themeCssVars,
       themeVars: allThemeVarsWithResolvedHierarchicalVars,
       getResourceUrl,
-      getThemeVar
+      getThemeVar,
+      disableInlineStyle
     };
     return themeVal;
   }, [
@@ -33922,7 +33873,8 @@ function Theme({
     getResourceUrl,
     getThemeVar,
     themeCssVars,
-    themeTone
+    themeTone,
+    disableInlineStyle
   ]);
   const { indexing } = useIndexerContext();
   const rootClasses = useMemo(() => {
@@ -34017,6 +33969,11 @@ const ThemeMd = createMetadata({
       void 0,
       "boolean",
       true
+    ),
+    disableInlineStyle: d(
+      `This property controls whether inline styles are disabled for components within this theme. When undefined, uses the appGlobals.disableInlineStyle setting.`,
+      void 0,
+      "boolean"
     )
   },
   opaque: true
@@ -34037,6 +33994,7 @@ const themeComponentRenderer = createComponentRenderer(
         id: extractValue.asOptionalString(node.props.themeId),
         isRoot: extractValue.asOptionalBoolean(node.props.root),
         applyIf: extractValue.asOptionalBoolean(node.props.applyIf),
+        disableInlineStyle: extractValue.asOptionalBoolean(node.props.disableInlineStyle),
         layoutContext,
         renderChild: renderChild2,
         tone: themeTone,
@@ -34060,8 +34018,8 @@ function Column({ nodeChildren, renderChild: renderChild2, ...columnMetadata })
         MemoizedItem,
         {
           node: nodeChildren,
-          item: row2,
           contextVars: {
+            $item: row2,
             $rowIndex: rowIndex,
             $colIndex: colIndex,
             $row: row2,
@@ -39313,7 +39271,6 @@ const tabsComponentRenderer = createComponentRenderer(
           MemoizedItem,
           {
             node: node.props.headerTemplate,
-            itemKey: "$header",
             contextVars: {
               $header: item2
             },
@@ -40068,7 +40025,6 @@ const tabItemComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.headerTemplate,
-              itemKey: "$header",
               contextVars: {
                 $header: {
                   id: item2.id,
@@ -40215,7 +40171,9 @@ const accordionItemComponentRenderer = createComponentRenderer(
           MemoizedItem,
           {
             node: node.props.headerTemplate ?? { type: "Fragment" },
-            item: item2,
+            contextVars: {
+              $item: item2
+            },
             renderChild: renderChild2
           }
         ) : void 0,
@@ -40853,12 +40811,51 @@ const carouselItemComponentRenderer = createComponentRenderer(
     return /* @__PURE__ */ jsx(CarouselItemComponent, { children: renderChild2(node.children) });
   }
 );
-const breakout = "_breakout_puy20_2";
+const breakout = "_breakout_z3cnt_2";
 const styles$g = {
   breakout
 };
 const Breakout = ({ children, style: style2, ...rest }) => {
-  return /* @__PURE__ */ jsx("div", { ...rest, style: style2, className: styles$g.breakout, children });
+  const ref = useRef(null);
+  const [breakoutStyle, setBreakoutStyle] = useState({});
+  const calculatedRef = useRef(false);
+  useLayoutEffect(() => {
+    const updateBreakoutStyle = () => {
+      if (!ref.current) return;
+      const currentMarginLeft = ref.current.style.marginLeft;
+      const currentMarginRight = ref.current.style.marginRight;
+      const currentWidth = ref.current.style.width;
+      ref.current.style.marginLeft = "0px";
+      ref.current.style.marginRight = "0px";
+      ref.current.style.width = "auto";
+      const rect = ref.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      ref.current.style.marginLeft = currentMarginLeft;
+      ref.current.style.marginRight = currentMarginRight;
+      ref.current.style.width = currentWidth;
+      const offsetLeft = rect.left;
+      const offsetRight = viewportWidth - rect.right;
+      const newStyle = {
+        marginLeft: `-${offsetLeft}px`,
+        marginRight: `-${offsetRight}px`,
+        width: `${viewportWidth}px`
+      };
+      setBreakoutStyle(newStyle);
+      calculatedRef.current = true;
+    };
+    if (!calculatedRef.current) {
+      updateBreakoutStyle();
+    }
+    const handleResize = () => {
+      calculatedRef.current = false;
+      updateBreakoutStyle();
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ...rest, ref, style: { ...breakoutStyle, ...style2 }, className: styles$g.breakout, children });
 };
 const COMP$n = "Breakout";
 const BreakoutMd = createMetadata({
@@ -41391,8 +41388,8 @@ const autoCompleteComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.optionTemplate,
-              item: item2,
-              context: {
+              contextVars: {
+                $item: item2,
                 $selectedValue: val,
                 $inTrigger: inTrigger
               },
@@ -44419,7 +44416,6 @@ const areaChartComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.tooltipTemplate,
-              item: tooltipData,
               contextVars: {
                 $tooltip: tooltipData
               },
@@ -44888,7 +44884,6 @@ const barChartComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.tooltipTemplate,
-              item: tooltipData,
               contextVars: {
                 $tooltip: tooltipData
               },
@@ -45669,7 +45664,6 @@ const lineChartComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.tooltipTemplate,
-              item: tooltipData,
               contextVars: {
                 $tooltip: tooltipData
               },
@@ -45970,7 +45964,6 @@ const radarChartComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: node.props.tooltipTemplate,
-              item: tooltipData,
               contextVars: {
                 $tooltip: tooltipData
               },
@@ -46357,8 +46350,6 @@ const toastComponentRenderer = createComponentRenderer(
             MemoizedItem,
             {
               node: template || node.children,
-              itemKey: "$_TEMP",
-              contextKey: "$_TEMP",
               contextVars: {
                 $param: context
               },
@@ -47895,7 +47886,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.11.19";
+const version = "0.11.20";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -51201,7 +51192,7 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
     memoedLookupEventHandler,
     descriptor?.nonVisual || isApiBound || isCompoundComponent
   );
-  const { getResourceUrl } = useTheme();
+  const { getResourceUrl, disableInlineStyle: themeDisableInlineStyle } = useTheme();
   const extractResourceUrl = useCallback(
     (url) => {
       const extractedUrl = valueExtractor(url);
@@ -51219,10 +51210,14 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
         resolvedLayoutProps[key] = valueExtractor(safeNode.props[key], true);
       }
     });
-    return resolveLayoutProps(resolvedLayoutProps, {
-      ...layoutContextRef?.current,
-      mediaSize: appContext.mediaSize
-    });
+    return resolveLayoutProps(
+      resolvedLayoutProps,
+      {
+        ...layoutContextRef?.current,
+        mediaSize: appContext.mediaSize
+      },
+      themeDisableInlineStyle ?? appContext.appGlobals?.disableInlineStyle
+    );
   }, [appContext.mediaSize, layoutContextRef, safeNode.props, valueExtractor]);
   const stableLayoutCss = useShallowCompareMemoize(cssProps);
   const className = useComponentStyle(stableLayoutCss);