xmlui 0.10.12 → 0.10.13

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

@@ -860,6 +860,7 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
   labelStyle,
   validationResult,
   isInputTemplateUsed = false,
+  onLabelClick,
   ...rest
 }, ref) {
   if (rest.layoutContext !== void 0) {
@@ -898,10 +899,10 @@ const ItemWithLabel = forwardRef(function ItemWithLabel2({
             {
               "data-part-id": PART_LABEL,
               htmlFor: inputId,
-              onClick: () => {
+              onClick: onLabelClick || (() => {
                 var _a2;
                 return (_a2 = document.getElementById(inputId)) == null ? void 0 : _a2.focus();
-              },
+              }),
               style: {
                 ...labelStyle,
                 width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth,
@@ -1431,7 +1432,7 @@ const Stack = forwardRef(function Stack2({
     }
   );
 });
-const COMP$1y = "Stack";
+const COMP$1x = "Stack";
 const HORIZONTAL_ALIGNMENT = {
   description: "Manages the horizontal content alignment for each child element in the Stack.",
   availableValues: alignmentOptionValues,
@@ -1481,7 +1482,7 @@ const stackMd = createMetadata({
     }
   },
   events: {
-    click: dClick(COMP$1y),
+    click: dClick(COMP$1x),
     mounted: dInternal("Reserved for future use")
   },
   themeVars: parseScssVar(styles$1l.themeVars)
@@ -1494,7 +1495,7 @@ const StackMd = {
 };
 const VStackMd = {
   ...StackMd,
-  specializedFrom: COMP$1y,
+  specializedFrom: COMP$1x,
   description: `This component represents a stack rendering its contents vertically.`,
   props: {
     ...stackMd.props
@@ -1502,7 +1503,7 @@ const VStackMd = {
 };
 const HStackMd = {
   ...StackMd,
-  specializedFrom: COMP$1y,
+  specializedFrom: COMP$1x,
   description: `This component represents a stack rendering its contents horizontally.`,
   props: {
     ...stackMd.props
@@ -1510,12 +1511,12 @@ const HStackMd = {
 };
 const CVStackMd = {
   ...StackMd,
-  specializedFrom: COMP$1y,
+  specializedFrom: COMP$1x,
   description: `This component represents a stack that renders its contents vertically and aligns that in the center along both axes.`
 };
 const CHStackMd = {
   ...StackMd,
-  specializedFrom: COMP$1y,
+  specializedFrom: COMP$1x,
   description: `This component represents a stack that renders its contents horizontally and aligns that in the center along both axes.`
 };
 function renderStack({
@@ -1551,7 +1552,7 @@ function renderStack({
   );
 }
 const stackComponentRenderer = createComponentRenderer(
-  COMP$1y,
+  COMP$1x,
   StackMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
     var _a2, _b, _c;
@@ -1655,14 +1656,14 @@ const styles$1i = {
   overflowDropdown
 };
 const themeVars$Y = `'{"backgroundColor-DropdownMenu": "var(--xmlui-backgroundColor-DropdownMenu)", "borderRadius-DropdownMenu": "var(--xmlui-borderRadius-DropdownMenu)", "boxShadow-DropdownMenu": "var(--xmlui-boxShadow-DropdownMenu)", "borderColor-DropdownMenu-content": "var(--xmlui-borderColor-DropdownMenu-content)", "borderWidth-DropdownMenu-content": "var(--xmlui-borderWidth-DropdownMenu-content)", "borderStyle-DropdownMenu-content": "var(--xmlui-borderStyle-DropdownMenu-content)", "minWidth-DropdownMenu": "var(--xmlui-minWidth-DropdownMenu)", "backgroundColor-MenuItem": "var(--xmlui-backgroundColor-MenuItem)", "color-MenuItem": "var(--xmlui-color-MenuItem)", "fontFamily-MenuItem": "var(--xmlui-fontFamily-MenuItem)", "gap-MenuItem": "var(--xmlui-gap-MenuItem)", "fontSize-MenuItem": "var(--xmlui-fontSize-MenuItem)", "paddingVertical-MenuItem": "var(--xmlui-paddingVertical-MenuItem)", "paddingHorizontal-MenuItem": "var(--xmlui-paddingHorizontal-MenuItem)", "backgroundColor-MenuItem--hover": "var(--xmlui-backgroundColor-MenuItem--hover)", "backgroundColor-MenuItem--active": "var(--xmlui-backgroundColor-MenuItem--active)", "backgroundColor-MenuItem--active--hover": "var(--xmlui-backgroundColor-MenuItem--active--hover)", "color-MenuItem--hover": "var(--xmlui-color-MenuItem--hover)", "color-MenuItem--active": "var(--xmlui-color-MenuItem--active)", "color-MenuItem--active--hover": "var(--xmlui-color-MenuItem--active--hover)", "color-MenuItem--disabled": "var(--xmlui-color-MenuItem--disabled)", "marginTop-MenuSeparator": "var(--xmlui-marginTop-MenuSeparator)", "marginBottom-MenuSeparator": "var(--xmlui-marginBottom-MenuSeparator)", "width-MenuSeparator": "var(--xmlui-width-MenuSeparator)", "height-MenuSeparator": "var(--xmlui-height-MenuSeparator)", "color-MenuSeparator": "var(--xmlui-color-MenuSeparator)"}'`;
-const DropdownMenuContent = "_DropdownMenuContent_1uu36_14";
-const DropdownMenuSubContent = "_DropdownMenuSubContent_1uu36_15";
-const DropdownMenuItem = "_DropdownMenuItem_1uu36_26";
-const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_1uu36_27";
-const active$3 = "_active_1uu36_50";
-const disabled$a = "_disabled_1uu36_60";
-const wrapper$m = "_wrapper_1uu36_71";
-const DropdownMenuSeparator = "_DropdownMenuSeparator_1uu36_75";
+const DropdownMenuContent = "_DropdownMenuContent_iu9k6_14";
+const DropdownMenuSubContent = "_DropdownMenuSubContent_iu9k6_19";
+const DropdownMenuItem = "_DropdownMenuItem_iu9k6_29";
+const DropdownMenuSubTrigger = "_DropdownMenuSubTrigger_iu9k6_30";
+const active$3 = "_active_iu9k6_53";
+const disabled$a = "_disabled_iu9k6_63";
+const wrapper$m = "_wrapper_iu9k6_74";
+const DropdownMenuSeparator = "_DropdownMenuSeparator_iu9k6_78";
 const styles$1h = {
   themeVars: themeVars$Y,
   DropdownMenuContent,
@@ -3333,7 +3334,7 @@ const DropdownMenu = forwardRef(function DropdownMenu2({
         }
       },
       children: [
-        /* @__PURE__ */ jsx(ReactDropdownMenu.Trigger, { ...rest, asChild: true, disabled: disabled2, ref, children: triggerTemplate ? /* @__PURE__ */ jsx("div", { children: triggerTemplate }) : /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(ReactDropdownMenu.Trigger, { ...rest, asChild: true, disabled: disabled2, ref, children: triggerTemplate ? triggerTemplate : /* @__PURE__ */ jsx(
           Button,
           {
             icon: /* @__PURE__ */ jsx(Icon, { name: triggerButtonIcon, fallback: "chevrondown" }),
@@ -3708,11 +3709,11 @@ const ResponsiveBar = forwardRef(function ResponsiveBar2({
     }
   );
 });
-const COMP$1x = "ResponsiveBar";
+const COMP$1w = "ResponsiveBar";
 const ResponsiveBarMd = createMetadata({
   status: "stable",
   description: "`ResponsiveBar` is a layout container that automatically manages child component overflow by moving items that don't fit into a dropdown menu. It supports both horizontal and vertical orientations and provides a space-efficient way to display navigation items, toolbar buttons, or other components that need to adapt to varying container dimensions while maintaining full functionality.",
-  docFolder: COMP$1x,
+  docFolder: COMP$1w,
   props: {
     orientation: {
       description: "Layout direction of the responsive bar. In horizontal mode, items are arranged left-to-right and overflow is based on container width. In vertical mode, items are arranged top-to-bottom and overflow is based on container height.",
@@ -3732,20 +3733,20 @@ const ResponsiveBarMd = createMetadata({
     }
   },
   events: {
-    click: dClick(COMP$1x)
+    click: dClick(COMP$1w)
   },
   apis: {},
   contextVars: {},
   themeVars: parseScssVar(styles$1i.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`backgroundColor-${COMP$1x}`]: "transparent",
-    [`padding-${COMP$1x}`]: "0",
-    [`margin-${COMP$1x}`]: "0"
+    [`backgroundColor-${COMP$1w}`]: "transparent",
+    [`padding-${COMP$1w}`]: "0",
+    [`margin-${COMP$1w}`]: "0"
   }
 });
 const responsiveBarComponentRenderer = createComponentRenderer(
-  COMP$1x,
+  COMP$1w,
   ResponsiveBarMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
     var _a2, _b, _c;
@@ -3769,13 +3770,13 @@ const styles$1e = {
   spacer
 };
 const SpaceFiller = () => /* @__PURE__ */ jsx("div", { className: styles$1e.spacer });
-const COMP$1w = "SpaceFiller";
+const COMP$1v = "SpaceFiller";
 const SpaceFillerMd = createMetadata({
   status: "stable",
   description: "`SpaceFiller` works well in layout containers to fill remaining (unused) space. Its behavior depends on the layout container in which it is used.",
   themeVars: parseScssVar(styles$1e.themeVars)
 });
-const spaceFillerComponentRenderer = createComponentRenderer(COMP$1w, SpaceFillerMd, () => /* @__PURE__ */ jsx(SpaceFiller, {}));
+const spaceFillerComponentRenderer = createComponentRenderer(COMP$1v, SpaceFillerMd, () => /* @__PURE__ */ jsx(SpaceFiller, {}));
 const themeVars$U = `'{"padding-TextArea": "var(--xmlui-padding-TextArea)", "paddingHorizontal-TextArea": "var(--xmlui-paddingHorizontal-TextArea, var(--xmlui-padding-TextArea))", "paddingVertical-TextArea": "var(--xmlui-paddingVertical-TextArea, var(--xmlui-padding-TextArea))", "paddingLeft-TextArea": "var(--xmlui-paddingLeft-TextArea, var(--xmlui-paddingHorizontal-TextArea, var(--xmlui-padding-TextArea)))", "paddingRight-TextArea": "var(--xmlui-paddingRight-TextArea, var(--xmlui-paddingHorizontal-TextArea, var(--xmlui-padding-TextArea)))", "paddingTop-TextArea": "var(--xmlui-paddingTop-TextArea, var(--xmlui-paddingVertical-TextArea, var(--xmlui-padding-TextArea)))", "paddingBottom-TextArea": "var(--xmlui-paddingBottom-TextArea, var(--xmlui-paddingVertical-TextArea, var(--xmlui-padding-TextArea)))", "Input:borderRadius-TextArea-default": "var(--xmlui-borderRadius-TextArea-default)", "Input:borderColor-TextArea-default": "var(--xmlui-borderColor-TextArea-default)", "Input:borderWidth-TextArea-default": "var(--xmlui-borderWidth-TextArea-default)", "Input:borderStyle-TextArea-default": "var(--xmlui-borderStyle-TextArea-default)", "Input:fontSize-TextArea-default": "var(--xmlui-fontSize-TextArea-default)", "Input:backgroundColor-TextArea-default": "var(--xmlui-backgroundColor-TextArea-default)", "Input:boxShadow-TextArea-default": "var(--xmlui-boxShadow-TextArea-default)", "Input:textColor-TextArea-default": "var(--xmlui-textColor-TextArea-default)", "Input:borderColor-TextArea-default--hover": "var(--xmlui-borderColor-TextArea-default--hover)", "Input:backgroundColor-TextArea-default--hover": "var(--xmlui-backgroundColor-TextArea-default--hover)", "Input:boxShadow-TextArea-default--hover": "var(--xmlui-boxShadow-TextArea-default--hover)", "Input:textColor-TextArea-default--hover": "var(--xmlui-textColor-TextArea-default--hover)", "Input:borderColor-TextArea-default--focus": "var(--xmlui-borderColor-TextArea-default--focus)", "Input:backgroundColor-TextArea-default--focus": "var(--xmlui-backgroundColor-TextArea-default--focus)", "Input:boxShadow-TextArea-default--focus": "var(--xmlui-boxShadow-TextArea-default--focus)", "Input:textColor-TextArea-default--focus": "var(--xmlui-textColor-TextArea-default--focus)", "Input:outlineWidth-TextArea-default--focus": "var(--xmlui-outlineWidth-TextArea-default--focus)", "Input:outlineColor-TextArea-default--focus": "var(--xmlui-outlineColor-TextArea-default--focus)", "Input:outlineStyle-TextArea-default--focus": "var(--xmlui-outlineStyle-TextArea-default--focus)", "Input:outlineOffset-TextArea-default--focus": "var(--xmlui-outlineOffset-TextArea-default--focus)", "Input:textColor-placeholder-TextArea-default": "var(--xmlui-textColor-placeholder-TextArea-default)", "Input:fontSize-placeholder-TextArea-default": "var(--xmlui-fontSize-placeholder-TextArea-default)", "Input:borderRadius-TextArea-error": "var(--xmlui-borderRadius-TextArea-error)", "Input:borderColor-TextArea-error": "var(--xmlui-borderColor-TextArea-error)", "Input:borderWidth-TextArea-error": "var(--xmlui-borderWidth-TextArea-error)", "Input:borderStyle-TextArea-error": "var(--xmlui-borderStyle-TextArea-error)", "Input:fontSize-TextArea-error": "var(--xmlui-fontSize-TextArea-error)", "Input:backgroundColor-TextArea-error": "var(--xmlui-backgroundColor-TextArea-error)", "Input:boxShadow-TextArea-error": "var(--xmlui-boxShadow-TextArea-error)", "Input:textColor-TextArea-error": "var(--xmlui-textColor-TextArea-error)", "Input:borderColor-TextArea-error--hover": "var(--xmlui-borderColor-TextArea-error--hover)", "Input:backgroundColor-TextArea-error--hover": "var(--xmlui-backgroundColor-TextArea-error--hover)", "Input:boxShadow-TextArea-error--hover": "var(--xmlui-boxShadow-TextArea-error--hover)", "Input:textColor-TextArea-error--hover": "var(--xmlui-textColor-TextArea-error--hover)", "Input:borderColor-TextArea-error--focus": "var(--xmlui-borderColor-TextArea-error--focus)", "Input:backgroundColor-TextArea-error--focus": "var(--xmlui-backgroundColor-TextArea-error--focus)", "Input:boxShadow-TextArea-error--focus": "var(--xmlui-boxShadow-TextArea-error--focus)", "Input:textColor-TextArea-error--focus": "var(--xmlui-textColor-TextArea-error--focus)", "Input:outlineWidth-TextArea-error--focus": "var(--xmlui-outlineWidth-TextArea-error--focus)", "Input:outlineColor-TextArea-error--focus": "var(--xmlui-outlineColor-TextArea-error--focus)", "Input:outlineStyle-TextArea-error--focus": "var(--xmlui-outlineStyle-TextArea-error--focus)", "Input:outlineOffset-TextArea-error--focus": "var(--xmlui-outlineOffset-TextArea-error--focus)", "Input:textColor-placeholder-TextArea-error": "var(--xmlui-textColor-placeholder-TextArea-error)", "Input:fontSize-placeholder-TextArea-error": "var(--xmlui-fontSize-placeholder-TextArea-error)", "Input:borderRadius-TextArea-warning": "var(--xmlui-borderRadius-TextArea-warning)", "Input:borderColor-TextArea-warning": "var(--xmlui-borderColor-TextArea-warning)", "Input:borderWidth-TextArea-warning": "var(--xmlui-borderWidth-TextArea-warning)", "Input:borderStyle-TextArea-warning": "var(--xmlui-borderStyle-TextArea-warning)", "Input:fontSize-TextArea-warning": "var(--xmlui-fontSize-TextArea-warning)", "Input:backgroundColor-TextArea-warning": "var(--xmlui-backgroundColor-TextArea-warning)", "Input:boxShadow-TextArea-warning": "var(--xmlui-boxShadow-TextArea-warning)", "Input:textColor-TextArea-warning": "var(--xmlui-textColor-TextArea-warning)", "Input:borderColor-TextArea-warning--hover": "var(--xmlui-borderColor-TextArea-warning--hover)", "Input:backgroundColor-TextArea-warning--hover": "var(--xmlui-backgroundColor-TextArea-warning--hover)", "Input:boxShadow-TextArea-warning--hover": "var(--xmlui-boxShadow-TextArea-warning--hover)", "Input:textColor-TextArea-warning--hover": "var(--xmlui-textColor-TextArea-warning--hover)", "Input:borderColor-TextArea-warning--focus": "var(--xmlui-borderColor-TextArea-warning--focus)", "Input:backgroundColor-TextArea-warning--focus": "var(--xmlui-backgroundColor-TextArea-warning--focus)", "Input:boxShadow-TextArea-warning--focus": "var(--xmlui-boxShadow-TextArea-warning--focus)", "Input:textColor-TextArea-warning--focus": "var(--xmlui-textColor-TextArea-warning--focus)", "Input:outlineWidth-TextArea-warning--focus": "var(--xmlui-outlineWidth-TextArea-warning--focus)", "Input:outlineColor-TextArea-warning--focus": "var(--xmlui-outlineColor-TextArea-warning--focus)", "Input:outlineStyle-TextArea-warning--focus": "var(--xmlui-outlineStyle-TextArea-warning--focus)", "Input:outlineOffset-TextArea-warning--focus": "var(--xmlui-outlineOffset-TextArea-warning--focus)", "Input:textColor-placeholder-TextArea-warning": "var(--xmlui-textColor-placeholder-TextArea-warning)", "Input:fontSize-placeholder-TextArea-warning": "var(--xmlui-fontSize-placeholder-TextArea-warning)", "Input:borderRadius-TextArea-success": "var(--xmlui-borderRadius-TextArea-success)", "Input:borderColor-TextArea-success": "var(--xmlui-borderColor-TextArea-success)", "Input:borderWidth-TextArea-success": "var(--xmlui-borderWidth-TextArea-success)", "Input:borderStyle-TextArea-success": "var(--xmlui-borderStyle-TextArea-success)", "Input:fontSize-TextArea-success": "var(--xmlui-fontSize-TextArea-success)", "Input:backgroundColor-TextArea-success": "var(--xmlui-backgroundColor-TextArea-success)", "Input:boxShadow-TextArea-success": "var(--xmlui-boxShadow-TextArea-success)", "Input:textColor-TextArea-success": "var(--xmlui-textColor-TextArea-success)", "Input:borderColor-TextArea-success--hover": "var(--xmlui-borderColor-TextArea-success--hover)", "Input:backgroundColor-TextArea-success--hover": "var(--xmlui-backgroundColor-TextArea-success--hover)", "Input:boxShadow-TextArea-success--hover": "var(--xmlui-boxShadow-TextArea-success--hover)", "Input:textColor-TextArea-success--hover": "var(--xmlui-textColor-TextArea-success--hover)", "Input:borderColor-TextArea-success--focus": "var(--xmlui-borderColor-TextArea-success--focus)", "Input:backgroundColor-TextArea-success--focus": "var(--xmlui-backgroundColor-TextArea-success--focus)", "Input:boxShadow-TextArea-success--focus": "var(--xmlui-boxShadow-TextArea-success--focus)", "Input:textColor-TextArea-success--focus": "var(--xmlui-textColor-TextArea-success--focus)", "Input:outlineWidth-TextArea-success--focus": "var(--xmlui-outlineWidth-TextArea-success--focus)", "Input:outlineColor-TextArea-success--focus": "var(--xmlui-outlineColor-TextArea-success--focus)", "Input:outlineStyle-TextArea-success--focus": "var(--xmlui-outlineStyle-TextArea-success--focus)", "Input:outlineOffset-TextArea-success--focus": "var(--xmlui-outlineOffset-TextArea-success--focus)", "Input:textColor-placeholder-TextArea-success": "var(--xmlui-textColor-placeholder-TextArea-success)", "Input:fontSize-placeholder-TextArea-success": "var(--xmlui-fontSize-placeholder-TextArea-success)", "Input:backgroundColor-TextArea--disabled": "var(--xmlui-backgroundColor-TextArea--disabled)", "Input:textColor-TextArea--disabled": "var(--xmlui-textColor-TextArea--disabled)", "Input:borderColor-TextArea--disabled": "var(--xmlui-borderColor-TextArea--disabled)"}'`;
 const textarea = "_textarea_9c161_14";
 const error$d = "_error_9c161_59";
@@ -3915,6 +3916,14 @@ const TextArea = forwardRef(function TextArea2({
   useEffect(() => {
     updateState({ value: initialValue }, { initial: true });
   }, [initialValue, updateState]);
+  useEffect(() => {
+    if (autoFocus) {
+      setTimeout(() => {
+        var _a2;
+        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      }, 0);
+    }
+  }, [autoFocus, inputRef.current]);
   const handleCopy = (event) => {
     if (allowCopy) {
       return true;
@@ -4003,7 +4012,6 @@ const TextArea = forwardRef(function TextArea2({
     style: style2,
     value: controlled ? value || "" : void 0,
     disabled: !enabled2,
-    autoFocus,
     name: id,
     placeholder: placeholder2,
     required: required2,
@@ -4107,7 +4115,7 @@ const TextArea = forwardRef(function TextArea2({
     }
   );
 });
-const COMP$1v = "TextArea";
+const COMP$1u = "TextArea";
 const resizeOptionsMd = [
   { value: "(undefined)", description: "No resizing" },
   { value: "horizontal", description: "Can only resize horizontally" },
@@ -4138,15 +4146,15 @@ const TextAreaMd = createMetadata({
       defaultValue: defaultProps$1c.enterSubmits
     },
     escResets: {
-      description: `This boolean property indicates whether the ${COMP$1v} contents should be reset when pressing the ESC key.`,
+      description: `This boolean property indicates whether the ${COMP$1u} contents should be reset when pressing the ESC key.`,
       valueType: "boolean",
       defaultValue: false
     },
     maxRows: d(
-      `This optional property sets the maximum number of text rows the \`${COMP$1v}\` can grow. If not set, the number of rows is unlimited.`
+      `This optional property sets the maximum number of text rows the \`${COMP$1u}\` can grow. If not set, the number of rows is unlimited.`
     ),
     minRows: d(
-      `This optional property sets the minimum number of text rows the \`${COMP$1v}\` can shrink. If not set, the minimum number of rows is 1.`
+      `This optional property sets the minimum number of text rows the \`${COMP$1u}\` can shrink. If not set, the minimum number of rows is 1.`
     ),
     rows: {
       description: `Specifies the number of rows the component initially has.`,
@@ -4154,7 +4162,7 @@ const TextAreaMd = createMetadata({
       defaultValue: defaultProps$1c.rows
     },
     autoSize: {
-      description: `If set to \`true\`, this boolean property enables the \`${COMP$1v}\` to resize automatically based on the number of lines inside it.`,
+      description: `If set to \`true\`, this boolean property enables the \`${COMP$1u}\` to resize automatically based on the number of lines inside it.`,
       valueType: "boolean",
       defaultValue: false
     },
@@ -4162,8 +4170,8 @@ const TextAreaMd = createMetadata({
     initialValue: dInitialValue(),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$1v),
-    labelBreak: dLabelBreak(COMP$1v),
+    labelWidth: dLabelWidth(COMP$1u),
+    labelBreak: dLabelBreak(COMP$1u),
     maxLength: dMaxLength(),
     autoFocus: dAutoFocus(),
     required: dRequired(),
@@ -4176,13 +4184,13 @@ const TextAreaMd = createMetadata({
     }
   },
   events: {
-    gotFocus: dGotFocus(COMP$1v),
-    lostFocus: dLostFocus(COMP$1v),
-    didChange: dDidChange(COMP$1v)
+    gotFocus: dGotFocus(COMP$1u),
+    lostFocus: dLostFocus(COMP$1u),
+    didChange: dDidChange(COMP$1u)
   },
   apis: {
     focus: {
-      description: `This method sets the focus on the \`${COMP$1v}\` component.`,
+      description: `This method sets the focus on the \`${COMP$1u}\` component.`,
       signature: "focus(): void"
     },
     value: {
@@ -4193,12 +4201,12 @@ const TextAreaMd = createMetadata({
   },
   themeVars: parseScssVar(styles$1d.themeVars),
   defaultThemeVars: {
-    [`paddingVertical-${COMP$1v}`]: "$space-2",
-    [`paddingHorizontal-${COMP$1v}`]: "$space-2"
+    [`paddingVertical-${COMP$1u}`]: "$space-2",
+    [`paddingHorizontal-${COMP$1u}`]: "$space-2"
   }
 });
 const textAreaComponentRenderer = createComponentRenderer(
-  COMP$1v,
+  COMP$1u,
   TextAreaMd,
   ({
     node,
@@ -4415,13 +4423,13 @@ function extractPaddings(extractValue, props) {
   };
 }
 const themeVars$R = `'{"maxWidth-Drawer": "var(--xmlui-maxWidth-Drawer)"}'`;
-const overlay$3 = "_overlay_wqzkg_39";
-const sheetContent = "_sheetContent_wqzkg_55";
-const top = "_top_wqzkg_70";
-const bottom = "_bottom_wqzkg_76";
-const left = "_left_wqzkg_82";
-const right = "_right_wqzkg_91";
-const close = "_close_wqzkg_101";
+const overlay$3 = "_overlay_12sgv_39";
+const sheetContent = "_sheetContent_12sgv_55";
+const top = "_top_12sgv_70";
+const bottom = "_bottom_12sgv_76";
+const left = "_left_12sgv_82";
+const right = "_right_12sgv_91";
+const close = "_close_12sgv_101";
 const drawerStyles = {
   themeVars: themeVars$R,
   overlay: overlay$3,
@@ -5695,7 +5703,7 @@ const NavLink = forwardRef(function NavLink2({
   }
   return content2;
 });
-const COMP$1u = "NavLink";
+const COMP$1t = "NavLink";
 const NavLinkMd = createMetadata({
   status: "stable",
   description: "`NavLink` creates interactive navigation items that connect users to different destinations within an app or external URLs. It automatically indicates active states, supports custom icons and labels, and can execute custom actions instead of navigation when needed.",
@@ -5714,7 +5722,7 @@ const NavLinkMd = createMetadata({
     },
     label: dLabel(),
     vertical: {
-      description: `This property sets how the active status is displayed on the \`${COMP$1u}\` component. If set to true, the indicator is displayed on the side which lends itself to a vertically aligned navigation menu. By default, it displays a horizontal indicator.`,
+      description: `This property sets how the active status is displayed on the \`${COMP$1t}\` component. If set to true, the indicator is displayed on the side which lends itself to a vertically aligned navigation menu. By default, it displays a horizontal indicator.`,
       valueType: "boolean"
     },
     displayActive: {
@@ -5727,37 +5735,37 @@ const NavLinkMd = createMetadata({
     )
   },
   events: {
-    click: dClick(COMP$1u)
+    click: dClick(COMP$1t)
   },
   themeVars: parseScssVar(navLinkStyles.themeVars),
   themeVarDescriptions: {
-    [`color-indicator-${COMP$1u}`]: "Provides the following states: `--hover`, `--active`, `--pressed`"
+    [`color-indicator-${COMP$1t}`]: "Provides the following states: `--hover`, `--active`, `--pressed`"
   },
   defaultThemeVars: {
-    [`border-${COMP$1u}`]: "0px solid $borderColor",
-    [`borderRadius-${COMP$1u}`]: "$borderRadius",
-    [`backgroundColor-${COMP$1u}`]: "transparent",
-    [`paddingHorizontal-${COMP$1u}`]: "$space-4",
-    [`paddingVertical-${COMP$1u}`]: "$space-2",
-    [`fontSize-${COMP$1u}`]: "$fontSize-sm",
-    [`fontWeight-${COMP$1u}`]: "$fontWeight-normal",
-    [`fontFamily-${COMP$1u}`]: "$fontFamily",
-    [`textColor-${COMP$1u}`]: "$textColor-primary",
-    [`fontWeight-${COMP$1u}--pressed`]: "$fontWeight-normal",
-    [`thickness-indicator-${COMP$1u}`]: "$space-0_5",
-    [`outlineColor-${COMP$1u}--focus`]: "$outlineColor--focus",
-    [`outlineWidth-${COMP$1u}--focus`]: "$outlineWidth--focus",
-    [`outlineStyle-${COMP$1u}--focus`]: "$outlineStyle--focus",
-    [`outlineOffset-${COMP$1u}--focus`]: "-1px",
-    [`borderRadius-indicator-${COMP$1u}`]: "$borderRadius",
-    [`color-icon-${COMP$1u}`]: "$color-surface-500",
-    [`color-indicator-${COMP$1u}--active`]: "$color-primary-500",
-    [`color-indicator-${COMP$1u}--pressed`]: "$color-primary-500",
-    [`color-indicator-${COMP$1u}--hover`]: "$color-primary-600"
+    [`border-${COMP$1t}`]: "0px solid $borderColor",
+    [`borderRadius-${COMP$1t}`]: "$borderRadius",
+    [`backgroundColor-${COMP$1t}`]: "transparent",
+    [`paddingHorizontal-${COMP$1t}`]: "$space-4",
+    [`paddingVertical-${COMP$1t}`]: "$space-2",
+    [`fontSize-${COMP$1t}`]: "$fontSize-sm",
+    [`fontWeight-${COMP$1t}`]: "$fontWeight-normal",
+    [`fontFamily-${COMP$1t}`]: "$fontFamily",
+    [`textColor-${COMP$1t}`]: "$textColor-primary",
+    [`fontWeight-${COMP$1t}--pressed`]: "$fontWeight-normal",
+    [`thickness-indicator-${COMP$1t}`]: "$space-0_5",
+    [`outlineColor-${COMP$1t}--focus`]: "$outlineColor--focus",
+    [`outlineWidth-${COMP$1t}--focus`]: "$outlineWidth--focus",
+    [`outlineStyle-${COMP$1t}--focus`]: "$outlineStyle--focus",
+    [`outlineOffset-${COMP$1t}--focus`]: "-1px",
+    [`borderRadius-indicator-${COMP$1t}`]: "$borderRadius",
+    [`color-icon-${COMP$1t}`]: "$color-surface-500",
+    [`color-indicator-${COMP$1t}--active`]: "$color-primary-500",
+    [`color-indicator-${COMP$1t}--pressed`]: "$color-primary-500",
+    [`color-indicator-${COMP$1t}--hover`]: "$color-primary-600"
   }
 });
 const navLinkComponentRenderer = createComponentRenderer(
-  COMP$1u,
+  COMP$1t,
   NavLinkMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     var _a2;
@@ -5842,7 +5850,7 @@ function specifyTypes(props) {
     referrerPolicy
   };
 }
-const COMP$1t = "Link";
+const COMP$1s = "Link";
 const LinkMd = createMetadata({
   status: "stable",
   description: "`Link` creates clickable navigation elements for internal app routes or external URLs. You can use the `label` and `icon` properties for simple text links, or embed custom components like buttons, cards, or complex layouts for rich interactive link presentations.",
@@ -5857,7 +5865,7 @@ const LinkMd = createMetadata({
       defaultValue: defaultProps$14.active
     },
     target: {
-      description: `This property specifies where to open the link represented by the \`${COMP$1t}\`. This property accepts the following values (in accordance with the HTML standard):`,
+      description: `This property specifies where to open the link represented by the \`${COMP$1s}\`. This property accepts the following values (in accordance with the HTML standard):`,
       availableValues: LinkTargetMd,
       type: "string"
     },
@@ -5873,37 +5881,37 @@ const LinkMd = createMetadata({
   },
   themeVars: parseScssVar(styles$17.themeVars),
   themeVarDescriptions: {
-    [`gap-icon-${COMP$1t}`]: "This property defines the size of the gap between the icon and the label."
+    [`gap-icon-${COMP$1s}`]: "This property defines the size of the gap between the icon and the label."
   },
   defaultThemeVars: {
-    [`border-${COMP$1t}`]: "0px solid $borderColor",
-    [`textColor-${COMP$1t}`]: "$color-primary-500",
-    [`textDecorationColor-${COMP$1t}`]: `textDecorationColor-${COMP$1t}`,
-    [`textColor-${COMP$1t}--hover`]: `$color-primary-400`,
-    [`textDecorationColor-${COMP$1t}--hover`]: `textColor-${COMP$1t}--hover`,
-    [`textColor-${COMP$1t}--active`]: "$color-primary-400",
-    [`textDecorationColor-${COMP$1t}--active`]: `textColor-${COMP$1t}--active`,
-    [`textColor-${COMP$1t}--hover--active`]: `$textColor-${COMP$1t}--active`,
-    [`textUnderlineOffset-${COMP$1t}`]: "$space-1",
-    [`textDecorationLine-${COMP$1t}`]: "underline",
-    [`textDecorationStyle-${COMP$1t}`]: "solid",
-    [`outlineColor-${COMP$1t}--focus`]: "$outlineColor--focus",
-    [`outlineWidth-${COMP$1t}--focus`]: "$outlineWidth--focus",
-    [`outlineStyle-${COMP$1t}--focus`]: "$outlineStyle--focus",
-    [`outlineOffset-${COMP$1t}--focus`]: "$outlineOffset--focus",
-    [`fontSize-${COMP$1t}`]: "inherit",
-    [`fontWeight-${COMP$1t}--active`]: "$fontWeight-bold",
-    [`gap-icon-${COMP$1t}`]: "$gap-tight",
-    [`padding-icon-${COMP$1t}`]: "$space-0_5",
+    [`border-${COMP$1s}`]: "0px solid $borderColor",
+    [`textColor-${COMP$1s}`]: "$color-primary-500",
+    [`textDecorationColor-${COMP$1s}`]: `textDecorationColor-${COMP$1s}`,
+    [`textColor-${COMP$1s}--hover`]: `$color-primary-400`,
+    [`textDecorationColor-${COMP$1s}--hover`]: `textColor-${COMP$1s}--hover`,
+    [`textColor-${COMP$1s}--active`]: "$color-primary-400",
+    [`textDecorationColor-${COMP$1s}--active`]: `textColor-${COMP$1s}--active`,
+    [`textColor-${COMP$1s}--hover--active`]: `$textColor-${COMP$1s}--active`,
+    [`textUnderlineOffset-${COMP$1s}`]: "$space-1",
+    [`textDecorationLine-${COMP$1s}`]: "underline",
+    [`textDecorationStyle-${COMP$1s}`]: "solid",
+    [`outlineColor-${COMP$1s}--focus`]: "$outlineColor--focus",
+    [`outlineWidth-${COMP$1s}--focus`]: "$outlineWidth--focus",
+    [`outlineStyle-${COMP$1s}--focus`]: "$outlineStyle--focus",
+    [`outlineOffset-${COMP$1s}--focus`]: "$outlineOffset--focus",
+    [`fontSize-${COMP$1s}`]: "inherit",
+    [`fontWeight-${COMP$1s}--active`]: "$fontWeight-bold",
+    [`gap-icon-${COMP$1s}`]: "$gap-tight",
+    [`padding-icon-${COMP$1s}`]: "$space-0_5",
     dark: {
-      [`textColor-${COMP$1t}`]: "$color-primary-600",
-      [`textColor-${COMP$1t}--hover`]: `$color-primary-500`,
-      [`textColor-${COMP$1t}--active`]: "$color-primary-500"
+      [`textColor-${COMP$1s}`]: "$color-primary-600",
+      [`textColor-${COMP$1s}--hover`]: `$color-primary-500`,
+      [`textColor-${COMP$1s}--active`]: "$color-primary-500"
     }
   }
 });
 const localLinkComponentRenderer = createComponentRenderer(
-  COMP$1t,
+  COMP$1s,
   LinkMd,
   ({ node, extractValue, renderChild: renderChild2, lookupEventHandler, className }) => {
     var _a2;
@@ -6097,10 +6105,10 @@ function TreeComponent({
     }
   ) }) });
 }
-const COMP$1s = "Tree";
+const COMP$1r = "Tree";
 const TreeMd = createMetadata({
   status: "in progress",
-  description: `The \`${COMP$1s}\` component is a virtualized tree component that displays hierarchical data.`,
+  description: `The \`${COMP$1r}\` component is a virtualized tree component that displays hierarchical data.`,
   props: {
     data: {
       description: `The data source of the tree.`,
@@ -6113,7 +6121,7 @@ const TreeMd = createMetadata({
   }
 });
 const treeComponentRenderer = createComponentRenderer(
-  COMP$1s,
+  COMP$1r,
   TreeMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     return /* @__PURE__ */ jsx(
@@ -6320,10 +6328,10 @@ const TreeDisplay = forwardRef(function TreeDisplay2({ style: style2, className,
   const treeNodes = useMemo(() => parseTreeContent(contentString), [contentString]);
   return /* @__PURE__ */ jsx("div", { className: classnames(styles$15.treeDisplay, className), style: style2, ref: forwardedRef, children: /* @__PURE__ */ jsx("div", { className: styles$15.content, children: treeNodes.map((node, index) => renderTreeNode(node, index, itemHeight, 0, [])) }) });
 });
-const COMP$1r = "TreeDisplay";
+const COMP$1q = "TreeDisplay";
 const TreeDisplayMd = createMetadata({
   status: "stable",
-  description: `The \`${COMP$1r}\` component displays hierarchical data in a tree structure. It accepts an indented text format where each line is an entry in the tree, and the number of leading spaces determines the nesting level. The component renders the tree with SVG lines and continuous vertical guides to clearly visualize parent-child relationships in the hierarchy.`,
+  description: `The \`${COMP$1q}\` component displays hierarchical data in a tree structure. It accepts an indented text format where each line is an entry in the tree, and the number of leading spaces determines the nesting level. The component renders the tree with SVG lines and continuous vertical guides to clearly visualize parent-child relationships in the hierarchy.`,
   props: {
     content: {
       description: "The indented text content to display as a tree structure. Each level of indentation (using spaces) represents one level in the tree hierarchy.",
@@ -6338,21 +6346,21 @@ const TreeDisplayMd = createMetadata({
   },
   themeVars: parseScssVar(styles$15.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$1r}`]: "$backgroundColor-CodeBlock",
-    [`borderRadius-${COMP$1r}`]: "8px",
-    [`padding-${COMP$1r}`]: "$space-4",
-    [`paddingLeft-${COMP$1r}`]: "$space-2",
-    [`fontSize-${COMP$1r}`]: "$fontSize-code",
-    [`fontWeight-${COMP$1r}`]: "$fontWeight-normal",
-    [`fontFamily-${COMP$1r}`]: "$fontFamily-monospace",
-    [`color-${COMP$1r}`]: "$textColor-primary",
-    [`color-connect-${COMP$1r}`]: "$color-surface-200",
-    [`boxShadow-${COMP$1r}`]: "none",
-    [`border-${COMP$1r}`]: "0.5px solid $borderColor"
+    [`backgroundColor-${COMP$1q}`]: "$backgroundColor-CodeBlock",
+    [`borderRadius-${COMP$1q}`]: "8px",
+    [`padding-${COMP$1q}`]: "$space-4",
+    [`paddingLeft-${COMP$1q}`]: "$space-2",
+    [`fontSize-${COMP$1q}`]: "$fontSize-code",
+    [`fontWeight-${COMP$1q}`]: "$fontWeight-normal",
+    [`fontFamily-${COMP$1q}`]: "$fontFamily-monospace",
+    [`color-${COMP$1q}`]: "$textColor-primary",
+    [`color-connect-${COMP$1q}`]: "$color-surface-200",
+    [`boxShadow-${COMP$1q}`]: "none",
+    [`border-${COMP$1q}`]: "0.5px solid $borderColor"
   }
 });
 const treeDisplayComponentRenderer = createComponentRenderer(
-  COMP$1r,
+  COMP$1q,
   TreeDisplayMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     return /* @__PURE__ */ jsx(
@@ -6366,7 +6374,7 @@ const treeDisplayComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$1q = "Button";
+const COMP$1p = "Button";
 const ButtonMd = createMetadata({
   status: "stable",
   description: "`Button` is the primary interactive component for triggering actions like form submissions, navigation, opening modals, and API calls. It supports multiple visual styles and sizes to match different UI contexts and importance levels.",
@@ -6399,11 +6407,11 @@ const ButtonMd = createMetadata({
       defaultValue: defaultProps$1d.size
     },
     label: {
-      description: `This property is an optional string to set a label for the ${COMP$1q}. If no label is specified and an icon is set, the ${COMP$1q} will modify its styling to look like a small icon button. When the ${COMP$1q} has nested children, it will display them and ignore the value of the \`label\` prop.`,
+      description: `This property is an optional string to set a label for the ${COMP$1p}. If no label is specified and an icon is set, the ${COMP$1p} will modify its styling to look like a small icon button. When the ${COMP$1p} has nested children, it will display them and ignore the value of the \`label\` prop.`,
       type: "string"
     },
     type: {
-      description: `This optional string describes how the ${COMP$1q} appears in an HTML context. You rarely need to set this property explicitly.`,
+      description: `This optional string describes how the ${COMP$1p} appears in an HTML context. You rarely need to set this property explicitly.`,
       availableValues: buttonTypesMd,
       valueType: "string",
       defaultValue: defaultProps$1d.type
@@ -6415,86 +6423,86 @@ const ButtonMd = createMetadata({
     },
     orientation: dOrientation(defaultProps$1d.orientation),
     icon: {
-      description: `This string value denotes an icon name. The framework will render an icon if XMLUI recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP$1q} displays only that icon.`,
+      description: `This string value denotes an icon name. The framework will render an icon if XMLUI recognizes the icon by its name. If no label is specified and an icon is set, the ${COMP$1p} displays only that icon.`,
       type: "string"
     },
     iconPosition: {
-      description: `This optional string determines the location of the icon in the ${COMP$1q}.`,
+      description: `This optional string determines the location of the icon in the ${COMP$1p}.`,
       availableValues: iconPositionMd,
       type: "string",
       defaultValue: defaultProps$1d.iconPosition
     },
     contentPosition: {
-      description: `This optional value determines how the label and icon (or nested children) should be placedinside the ${COMP$1q} component.`,
+      description: `This optional value determines how the label and icon (or nested children) should be placedinside the ${COMP$1p} component.`,
       availableValues: alignmentOptionMd,
       type: "string",
       defaultValue: defaultProps$1d.contentPosition
     },
     contextualLabel: {
-      description: `This optional value is used to provide an accessible name for the ${COMP$1q} in the context of its usage.`,
+      description: `This optional value is used to provide an accessible name for the ${COMP$1p} in the context of its usage.`,
       type: "string"
     }
   },
   events: {
-    click: dClick(COMP$1q),
-    gotFocus: dGotFocus(COMP$1q),
-    lostFocus: dLostFocus(COMP$1q)
+    click: dClick(COMP$1p),
+    gotFocus: dGotFocus(COMP$1p),
+    lostFocus: dLostFocus(COMP$1p)
   },
   themeVars: parseScssVar(styles$1g.themeVars),
   defaultThemeVars: {
-    [`width-${COMP$1q}`]: "fit-content",
-    [`height-${COMP$1q}`]: "fit-content",
-    [`borderRadius-${COMP$1q}`]: "$borderRadius",
-    [`fontSize-${COMP$1q}`]: "$fontSize-sm",
-    [`fontWeight-${COMP$1q}`]: "$fontWeight-medium",
-    [`backgroundColor-${COMP$1q}-primary`]: "$color-primary-500",
-    [`backgroundColor-${COMP$1q}-attention`]: "$backgroundColor-attention",
-    [`borderColor-${COMP$1q}-attention`]: "$color-attention",
-    [`backgroundColor-${COMP$1q}--disabled`]: "$backgroundColor--disabled",
-    [`borderColor-${COMP$1q}--disabled`]: "$borderColor--disabled",
-    [`borderStyle-${COMP$1q}`]: "solid",
-    [`textColor-${COMP$1q}--disabled`]: "$textColor--disabled",
-    [`outlineColor-${COMP$1q}--focus`]: "$outlineColor--focus",
-    [`borderWidth-${COMP$1q}`]: "1px",
-    [`outlineWidth-${COMP$1q}--focus`]: "$outlineWidth--focus",
-    [`outlineStyle-${COMP$1q}--focus`]: "$outlineStyle--focus",
-    [`outlineOffset-${COMP$1q}--focus`]: "$outlineOffset--focus",
-    [`paddingHorizontal-${COMP$1q}-xs`]: "$space-1",
-    [`paddingVertical-${COMP$1q}-xs`]: "$space-0_5",
-    [`paddingHorizontal-${COMP$1q}-sm`]: "$space-4",
-    [`paddingVertical-${COMP$1q}-sm`]: "$space-2",
-    [`paddingHorizontal-${COMP$1q}-md`]: "$space-4",
-    [`paddingVertical-${COMP$1q}-md`]: "$space-3",
-    [`paddingHorizontal-${COMP$1q}-lg`]: "$space-5",
-    [`paddingVertical-${COMP$1q}-lg`]: "$space-4",
-    [`textColor-${COMP$1q}`]: "$color-surface-950",
-    [`textColor-${COMP$1q}-solid`]: "$const-color-surface-50",
-    [`borderColor-${COMP$1q}-primary`]: "$color-primary-500",
-    [`backgroundColor-${COMP$1q}-primary--hover`]: "$color-primary-400",
-    [`backgroundColor-${COMP$1q}-primary--active`]: "$color-primary-500",
-    [`backgroundColor-${COMP$1q}-primary-outlined--hover`]: "$color-primary-50",
-    [`backgroundColor-${COMP$1q}-primary-outlined--active`]: "$color-primary-100",
-    [`borderColor-${COMP$1q}-primary-outlined`]: "$color-primary-600",
-    [`borderColor-${COMP$1q}-primary-outlined--hover`]: "$color-primary-500",
-    [`textColor-${COMP$1q}-primary-outlined`]: "$color-primary-900",
-    [`textColor-${COMP$1q}-primary-outlined--hover`]: "$color-primary-950",
-    [`textColor-${COMP$1q}-primary-outlined--active`]: "$color-primary-900",
-    [`backgroundColor-${COMP$1q}-primary-ghost--hover`]: "$color-primary-50",
-    [`backgroundColor-${COMP$1q}-primary-ghost--active`]: "$color-primary-100",
-    [`borderColor-${COMP$1q}-secondary`]: "$color-secondary-100",
-    [`backgroundColor-${COMP$1q}-secondary`]: "$color-secondary-500",
-    [`backgroundColor-${COMP$1q}-secondary--hover`]: "$color-secondary-400",
-    [`backgroundColor-${COMP$1q}-secondary--active`]: "$color-secondary-500",
-    [`backgroundColor-${COMP$1q}-secondary-outlined--hover`]: "$color-secondary-50",
-    [`backgroundColor-${COMP$1q}-secondary-outlined--active`]: "$color-secondary-100",
-    [`backgroundColor-${COMP$1q}-secondary-ghost--hover`]: "$color-secondary-100",
-    [`backgroundColor-${COMP$1q}-secondary-ghost--active`]: "$color-secondary-100",
-    [`backgroundColor-${COMP$1q}-attention--hover`]: "$color-danger-400",
-    [`backgroundColor-${COMP$1q}-attention--active`]: "$color-danger-500",
-    [`backgroundColor-${COMP$1q}-attention-outlined--hover`]: "$color-danger-50",
-    [`backgroundColor-${COMP$1q}-attention-outlined--active`]: "$color-danger-100",
-    [`backgroundColor-${COMP$1q}-attention-ghost--hover`]: "$color-danger-50",
-    [`backgroundColor-${COMP$1q}-attention-ghost--active`]: "$color-danger-100"
+    [`width-${COMP$1p}`]: "fit-content",
+    [`height-${COMP$1p}`]: "fit-content",
+    [`borderRadius-${COMP$1p}`]: "$borderRadius",
+    [`fontSize-${COMP$1p}`]: "$fontSize-sm",
+    [`fontWeight-${COMP$1p}`]: "$fontWeight-medium",
+    [`backgroundColor-${COMP$1p}-primary`]: "$color-primary-500",
+    [`backgroundColor-${COMP$1p}-attention`]: "$backgroundColor-attention",
+    [`borderColor-${COMP$1p}-attention`]: "$color-attention",
+    [`backgroundColor-${COMP$1p}--disabled`]: "$backgroundColor--disabled",
+    [`borderColor-${COMP$1p}--disabled`]: "$borderColor--disabled",
+    [`borderStyle-${COMP$1p}`]: "solid",
+    [`textColor-${COMP$1p}--disabled`]: "$textColor--disabled",
+    [`outlineColor-${COMP$1p}--focus`]: "$outlineColor--focus",
+    [`borderWidth-${COMP$1p}`]: "1px",
+    [`outlineWidth-${COMP$1p}--focus`]: "$outlineWidth--focus",
+    [`outlineStyle-${COMP$1p}--focus`]: "$outlineStyle--focus",
+    [`outlineOffset-${COMP$1p}--focus`]: "$outlineOffset--focus",
+    [`paddingHorizontal-${COMP$1p}-xs`]: "$space-1",
+    [`paddingVertical-${COMP$1p}-xs`]: "$space-0_5",
+    [`paddingHorizontal-${COMP$1p}-sm`]: "$space-4",
+    [`paddingVertical-${COMP$1p}-sm`]: "$space-2",
+    [`paddingHorizontal-${COMP$1p}-md`]: "$space-4",
+    [`paddingVertical-${COMP$1p}-md`]: "$space-3",
+    [`paddingHorizontal-${COMP$1p}-lg`]: "$space-5",
+    [`paddingVertical-${COMP$1p}-lg`]: "$space-4",
+    [`textColor-${COMP$1p}`]: "$color-surface-950",
+    [`textColor-${COMP$1p}-solid`]: "$const-color-surface-50",
+    [`borderColor-${COMP$1p}-primary`]: "$color-primary-500",
+    [`backgroundColor-${COMP$1p}-primary--hover`]: "$color-primary-400",
+    [`backgroundColor-${COMP$1p}-primary--active`]: "$color-primary-500",
+    [`backgroundColor-${COMP$1p}-primary-outlined--hover`]: "$color-primary-50",
+    [`backgroundColor-${COMP$1p}-primary-outlined--active`]: "$color-primary-100",
+    [`borderColor-${COMP$1p}-primary-outlined`]: "$color-primary-600",
+    [`borderColor-${COMP$1p}-primary-outlined--hover`]: "$color-primary-500",
+    [`textColor-${COMP$1p}-primary-outlined`]: "$color-primary-900",
+    [`textColor-${COMP$1p}-primary-outlined--hover`]: "$color-primary-950",
+    [`textColor-${COMP$1p}-primary-outlined--active`]: "$color-primary-900",
+    [`backgroundColor-${COMP$1p}-primary-ghost--hover`]: "$color-primary-50",
+    [`backgroundColor-${COMP$1p}-primary-ghost--active`]: "$color-primary-100",
+    [`borderColor-${COMP$1p}-secondary`]: "$color-secondary-100",
+    [`backgroundColor-${COMP$1p}-secondary`]: "$color-secondary-500",
+    [`backgroundColor-${COMP$1p}-secondary--hover`]: "$color-secondary-400",
+    [`backgroundColor-${COMP$1p}-secondary--active`]: "$color-secondary-500",
+    [`backgroundColor-${COMP$1p}-secondary-outlined--hover`]: "$color-secondary-50",
+    [`backgroundColor-${COMP$1p}-secondary-outlined--active`]: "$color-secondary-100",
+    [`backgroundColor-${COMP$1p}-secondary-ghost--hover`]: "$color-secondary-100",
+    [`backgroundColor-${COMP$1p}-secondary-ghost--active`]: "$color-secondary-100",
+    [`backgroundColor-${COMP$1p}-attention--hover`]: "$color-danger-400",
+    [`backgroundColor-${COMP$1p}-attention--active`]: "$color-danger-500",
+    [`backgroundColor-${COMP$1p}-attention-outlined--hover`]: "$color-danger-50",
+    [`backgroundColor-${COMP$1p}-attention-outlined--active`]: "$color-danger-100",
+    [`backgroundColor-${COMP$1p}-attention-ghost--hover`]: "$color-danger-50",
+    [`backgroundColor-${COMP$1p}-attention-ghost--active`]: "$color-danger-100"
   }
 });
 const buttonComponentRenderer = createComponentRenderer(
@@ -8702,9 +8710,9 @@ class PropsTrasform {
     return this.mapValues(filteredKeys, this.extractValue);
   }
 }
-const COMP$1p = "Heading";
+const COMP$1o = "Heading";
 const VALUE_DESC = d(
-  `This property determines the text displayed in the heading. \`${COMP$1p}\` also accepts nested text instead of specifying the \`value\`. If both \`value\` and a nested text are used, the \`value\` will be displayed.`
+  `This property determines the text displayed in the heading. \`${COMP$1o}\` also accepts nested text instead of specifying the \`value\`. If both \`value\` and a nested text are used, the \`value\` will be displayed.`
 );
 const MAX_LINES_DESC = d(
   "This optional property determines the maximum number of lines the component can wrap to. If there is not enough space for all of the text, the component wraps the text up to as many lines as specified. If the value is not specified, there is no limit on the number of displayed lines."
@@ -8761,13 +8769,13 @@ const HeadingMd = createMetadata({
   themeVars: parseScssVar(styles$14.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`fontFamily-${COMP$1p}`]: "$fontFamily",
-    [`textColor-${COMP$1p}`]: "inherit",
-    [`fontWeight-${COMP$1p}`]: "$fontWeight-bold",
-    [`letterSpacing-${COMP$1p} `]: "0",
-    [`color-anchor-${COMP$1p} `]: "$color-surface-400",
-    [`gap-anchor-${COMP$1p} `]: "$space-2",
-    [`textDecorationLine-anchor-${COMP$1p} `]: "underline",
+    [`fontFamily-${COMP$1o}`]: "$fontFamily",
+    [`textColor-${COMP$1o}`]: "inherit",
+    [`fontWeight-${COMP$1o}`]: "$fontWeight-bold",
+    [`letterSpacing-${COMP$1o} `]: "0",
+    [`color-anchor-${COMP$1o} `]: "$color-surface-400",
+    [`gap-anchor-${COMP$1o} `]: "$space-2",
+    [`textDecorationLine-anchor-${COMP$1o} `]: "underline",
     light: {
       // --- No light-specific theme vars
     },
@@ -8780,7 +8788,7 @@ const H1 = "H1";
 const H1Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(1),
-  specializedFrom: COMP$1p,
+  specializedFrom: COMP$1o,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8793,11 +8801,9 @@ const H1Md = createMetadata({
   themeVars: parseScssVar(styles$14.themeVars),
   defaultThemeVars: {
     [`fontSize-${H1}`]: "$fontSize-2xl",
-    [`lineHeight-${H1}`]: "$lineHeight-2xl",
     [`marginTop-${H1}`]: "0",
     [`marginBottom-${H1}`]: "0",
     [`fontSize-${H1}-markdown`]: "$fontSize-2xl",
-    [`lineHeight-${H1}-markdown`]: "$lineHeight-2xl",
     [`marginTop-${H1}-markdown`]: "0",
     [`marginBottom-${H1}-markdown`]: "$space-6",
     light: {
@@ -8812,7 +8818,7 @@ const H2 = "H2";
 const H2Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(2),
-  specializedFrom: COMP$1p,
+  specializedFrom: COMP$1o,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8825,11 +8831,9 @@ const H2Md = createMetadata({
   themeVars: parseScssVar(styles$14.themeVars),
   defaultThemeVars: {
     [`fontSize-${H2}`]: "$fontSize-xl",
-    [`lineHeight-${H2}`]: "$lineHeight-xl",
     [`marginTop-${H2}`]: "0",
     [`marginBottom-${H2}`]: "0",
     [`fontSize-${H2}-markdown`]: "$fontSize-xl",
-    [`lineHeight-${H2}-markdown`]: "$lineHeight-xl",
     [`marginTop-${H2}-markdown`]: "$space-10",
     [`marginBottom-${H2}-markdown`]: "$space-3",
     light: {
@@ -8844,7 +8848,7 @@ const H3 = "H3";
 const H3Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(3),
-  specializedFrom: COMP$1p,
+  specializedFrom: COMP$1o,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8857,11 +8861,9 @@ const H3Md = createMetadata({
   themeVars: parseScssVar(styles$14.themeVars),
   defaultThemeVars: {
     [`fontSize-${H3}`]: "$fontSize-lg",
-    [`lineHeight-${H3}`]: "$lineHeight-lg",
     [`marginTop-${H3}`]: "0",
     [`marginBottom-${H3}`]: "0",
     [`fontSize-${H3}-markdown`]: "$fontSize-lg",
-    [`lineHeight-${H3}-markdown`]: "$lineHeight-lg",
     [`marginTop-${H3}-markdown`]: "$space-6",
     [`marginBottom-${H3}-markdown`]: "$space-2",
     light: {
@@ -8876,7 +8878,7 @@ const H4 = "H4";
 const H4Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(4),
-  specializedFrom: COMP$1p,
+  specializedFrom: COMP$1o,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8889,11 +8891,9 @@ const H4Md = createMetadata({
   themeVars: parseScssVar(styles$14.themeVars),
   defaultThemeVars: {
     [`fontSize-${H4}`]: "$fontSize-base",
-    [`lineHeight-${H4}`]: "$lineHeight-base",
     [`marginTop-${H4}`]: "0",
     [`marginBottom-${H4}`]: "0",
     [`fontSize-${H4}-markdown`]: "$fontSize-base",
-    [`lineHeight-${H4}-markdown`]: "$lineHeight-base",
     [`marginTop-${H4}-markdown`]: "$space-5",
     [`marginBottom-${H4}-markdown`]: "$space-1",
     light: {
@@ -8908,7 +8908,7 @@ const H5 = "H5";
 const H5Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(5),
-  specializedFrom: COMP$1p,
+  specializedFrom: COMP$1o,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8921,11 +8921,9 @@ const H5Md = createMetadata({
   themeVars: parseScssVar(styles$14.themeVars),
   defaultThemeVars: {
     [`fontSize-${H5}`]: "$fontSize-sm",
-    [`lineHeight-${H5}`]: "$lineHeight-sm",
     [`marginTop-${H5}`]: "0",
     [`marginBottom-${H5}`]: "0",
     [`fontSize-${H5}-markdown`]: "$fontSize-sm",
-    [`lineHeight-${H5}-markdown`]: "$lineHeight-sm",
     [`marginTop-${H5}-markdown`]: "0",
     [`marginBottom-${H5}-markdown`]: "$space-0",
     light: {
@@ -8940,7 +8938,7 @@ const H6 = "H6";
 const H6Md = createMetadata({
   status: "stable",
   description: LEVEL_DESC(6),
-  specializedFrom: COMP$1p,
+  specializedFrom: COMP$1o,
   props: {
     value: VALUE_DESC,
     maxLines: MAX_LINES_DESC,
@@ -8953,11 +8951,9 @@ const H6Md = createMetadata({
   themeVars: parseScssVar(styles$14.themeVars),
   defaultThemeVars: {
     [`fontSize-${H6}`]: "$fontSize-xs",
-    [`lineHeight-${H6}`]: "$lineHeight-xs",
     [`marginTop-${H6}`]: "0",
     [`marginBottom-${H6}`]: "0",
     [`fontSize-${H6}-markdown`]: "$fontSize-xs",
-    [`lineHeight-${H6}-markdown`]: "$lineHeight-xs",
     [`marginTop-${H6}-markdown`]: "0",
     [`marginBottom-${H6}-markdown`]: "$space-0",
     light: {
@@ -8998,7 +8994,7 @@ function renderHeading({
   );
 }
 const headingComponentRenderer = createComponentRenderer(
-  COMP$1p,
+  COMP$1o,
   HeadingMd,
   ({ node, extractValue, className, renderChild: renderChild2, registerComponentApi }) => {
     return renderHeading({
@@ -9282,13 +9278,13 @@ const Text = forwardRef(function Text2({
     }
   );
 });
-const COMP$1o = "Text";
+const COMP$1n = "Text";
 const TextMd = createMetadata({
   status: "stable",
-  description: `The \`${COMP$1o}\` component displays textual information in a number of optional styles and variants.`,
+  description: `The \`${COMP$1n}\` component displays textual information in a number of optional styles and variants.`,
   props: {
     value: d(
-      `The text to be displayed. This value can also be set via nesting the text into the \`${COMP$1o}\` component.`
+      `The text to be displayed. This value can also be set via nesting the text into the \`${COMP$1n}\` component.`
     ),
     variant: {
       description: "An optional string value that provides named presets for text variants with a unique combination of font style, weight, size, color, and other parameters. If not defined, the text uses the current style of its context.",
@@ -9348,89 +9344,76 @@ const TextMd = createMetadata({
   },
   themeVars: parseScssVar(styles$13.themeVars),
   defaultThemeVars: {
-    [`borderRadius-${COMP$1o}`]: "$borderRadius",
-    [`borderStyle-${COMP$1o}`]: "solid",
-    [`fontSize-${COMP$1o}`]: "$fontSize-sm",
-    [`lineHeight-${COMP$1o}`]: "$lineHeight-sm",
-    [`borderWidth-${COMP$1o}`]: "$space-0",
-    [`lineHeight-${COMP$1o}-codefence`]: "1.5",
-    [`fontWeight-${COMP$1o}-abbr`]: "$fontWeight-bold",
-    [`textTransform-${COMP$1o}-abbr`]: "uppercase",
-    [`fontSize-${COMP$1o}-secondary`]: "$fontSize-sm",
-    [`lineHeight-${COMP$1o}-secondary`]: "$lineHeight-sm",
-    [`fontStyle-${COMP$1o}-cite`]: "italic",
-    [`textColor-${COMP$1o}`]: "$textColor-primary",
-    [`fontFamily-${COMP$1o}`]: "$fontFamily",
-    [`fontWeight-${COMP$1o}`]: "$fontWeight-normal",
-    [`fontSize-${COMP$1o}-codefence`]: "$fontSize-code",
-    [`fontFamily-${COMP$1o}-code`]: "$fontFamily-monospace",
-    [`fontSize-${COMP$1o}-code`]: "$fontSize-sm",
-    [`lineHeight-${COMP$1o}-code`]: "$lineHeight-xs",
-    [`borderWidth-${COMP$1o}-code`]: "1px",
-    [`borderStyle-${COMP$1o}-code`]: "solid",
-    [`borderRadius-${COMP$1o}-code`]: "4px",
-    [`paddingHorizontal-${COMP$1o}-code`]: "$space-0_5",
-    [`paddingBottom-${COMP$1o}-code`]: "2px",
-    [`textDecorationLine-${COMP$1o}-deleted`]: "line-through",
-    [`textDecorationLine-${COMP$1o}-inserted`]: "underline",
-    [`fontFamily-${COMP$1o}-keyboard`]: "$fontFamily-monospace",
-    [`fontSize-${COMP$1o}-keyboard`]: "$fontSize-sm",
-    [`lineHeight-${COMP$1o}-keyboard`]: "$lineHeight-sm",
-    [`fontWeight-${COMP$1o}-keyboard`]: "$fontWeight-bold",
-    [`borderWidth-${COMP$1o}-keyboard`]: "1px",
-    [`paddingHorizontal-${COMP$1o}-keyboard`]: "$space-1",
-    [`fontFamily-${COMP$1o}-sample`]: "$fontFamily-monospace",
-    [`fontSize-${COMP$1o}-sample`]: "$fontSize-sm",
-    [`lineHeight-${COMP$1o}-sample`]: "$lineHeight-sm",
-    [`fontSize-${COMP$1o}-sup`]: "$fontSize-xs",
-    [`lineHeight-${COMP$1o}-sup`]: "$lineHeight-xs",
-    [`verticalAlignment-${COMP$1o}-sup`]: "super",
-    [`fontSize-${COMP$1o}-sub`]: "$fontSize-xs",
-    [`lineHeight-${COMP$1o}-sub`]: "$lineHeight-xs",
-    [`verticalAlignment-${COMP$1o}-sub`]: "sub",
-    [`fontStyle-${COMP$1o}-var`]: "italic",
-    [`fontStyle-${COMP$1o}-em`]: "italic",
-    [`fontFamily-${COMP$1o}-mono`]: "$fontFamily-monospace",
-    [`fontSize-${COMP$1o}-title`]: "$fontSize-2xl",
-    [`lineHeight-${COMP$1o}-title`]: "$lineHeight-2xl",
-    [`fontSize-${COMP$1o}-subtitle`]: "$fontSize-xl",
-    [`lineHeight-${COMP$1o}-subtitle`]: "$lineHeight-xl",
-    [`fontSize-${COMP$1o}-small`]: "$fontSize-sm",
-    [`lineHeight-${COMP$1o}-small`]: "$lineHeight-sm",
-    [`letterSpacing-${COMP$1o}-caption`]: "0.05rem",
-    [`fontSize-${COMP$1o}-placeholder`]: "$fontSize-xs",
-    [`lineHeight-${COMP$1o}-placeholder`]: "$lineHeight-xs",
-    [`fontFamily-${COMP$1o}-codefence`]: "$fontFamily-monospace",
-    [`paddingHorizontal-${COMP$1o}-codefence`]: "$space-4",
-    [`paddingVertical-${COMP$1o}-codefence`]: "$space-3",
-    [`paddingVertical-${COMP$1o}-paragraph`]: "$space-1",
-    [`fontSize-${COMP$1o}-subheading`]: "$fontSize-H6",
-    [`lineHeight-${COMP$1o}-subheading`]: "$lineHeight-sm",
-    [`fontWeight-${COMP$1o}-subheading`]: "$fontWeight-bold",
-    [`letterSpacing-${COMP$1o}-subheading`]: "0.04em",
-    [`textTransform-${COMP$1o}-subheading`]: "uppercase",
-    [`marginTop-${COMP$1o}-tableheading`]: "$space-1",
-    [`marginBottom-${COMP$1o}-tableheading`]: "$space-4",
-    [`paddingHorizontal-${COMP$1o}-tableheading`]: "$space-1",
-    [`fontSize-${COMP$1o}-tableheading`]: "$fontSize-H6",
-    [`lineHeight-${COMP$1o}-tableheading`]: "$lineHeight-sm",
-    [`fontWeight-${COMP$1o}-tableheading`]: "$fontWeight-bold",
-    [`backgroundColor-${COMP$1o}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
-    [`borderColor-${COMP$1o}-code`]: "$color-surface-100",
-    [`backgroundColor-${COMP$1o}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
-    [`borderColor-${COMP$1o}-keyboard`]: "$color-surface-300",
-    [`backgroundColor-${COMP$1o}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",
-    [`color-${COMP$1o}-placeholder`]: "$color-surface-500",
-    [`color-${COMP$1o}-codefence`]: "$color-surface-900",
-    [`color-${COMP$1o}-subheading`]: "$textColor-secondary",
-    [`color-${COMP$1o}-secondary`]: "$textColor-secondary",
+    [`borderRadius-${COMP$1n}`]: "$borderRadius",
+    [`borderStyle-${COMP$1n}`]: "solid",
+    [`fontSize-${COMP$1n}`]: "$fontSize-sm",
+    [`borderWidth-${COMP$1n}`]: "$space-0",
+    [`lineHeight-${COMP$1n}-codefence`]: "1.5",
+    [`fontWeight-${COMP$1n}-abbr`]: "$fontWeight-bold",
+    [`textTransform-${COMP$1n}-abbr`]: "uppercase",
+    [`fontSize-${COMP$1n}-secondary`]: "$fontSize-sm",
+    [`fontStyle-${COMP$1n}-cite`]: "italic",
+    [`textColor-${COMP$1n}`]: "$textColor-primary",
+    [`fontFamily-${COMP$1n}`]: "$fontFamily",
+    [`fontWeight-${COMP$1n}`]: "$fontWeight-normal",
+    [`fontSize-${COMP$1n}-codefence`]: "$fontSize-code",
+    [`fontFamily-${COMP$1n}-code`]: "$fontFamily-monospace",
+    [`fontSize-${COMP$1n}-code`]: "$fontSize-sm",
+    [`borderWidth-${COMP$1n}-code`]: "1px",
+    [`borderStyle-${COMP$1n}-code`]: "solid",
+    [`borderRadius-${COMP$1n}-code`]: "4px",
+    [`paddingHorizontal-${COMP$1n}-code`]: "$space-0_5",
+    [`paddingBottom-${COMP$1n}-code`]: "2px",
+    [`textDecorationLine-${COMP$1n}-deleted`]: "line-through",
+    [`textDecorationLine-${COMP$1n}-inserted`]: "underline",
+    [`fontFamily-${COMP$1n}-keyboard`]: "$fontFamily-monospace",
+    [`fontSize-${COMP$1n}-keyboard`]: "$fontSize-sm",
+    [`fontWeight-${COMP$1n}-keyboard`]: "$fontWeight-bold",
+    [`borderWidth-${COMP$1n}-keyboard`]: "1px",
+    [`paddingHorizontal-${COMP$1n}-keyboard`]: "$space-1",
+    [`fontFamily-${COMP$1n}-sample`]: "$fontFamily-monospace",
+    [`fontSize-${COMP$1n}-sample`]: "$fontSize-sm",
+    [`fontSize-${COMP$1n}-sup`]: "$fontSize-xs",
+    [`verticalAlignment-${COMP$1n}-sup`]: "super",
+    [`fontSize-${COMP$1n}-sub`]: "$fontSize-xs",
+    [`verticalAlignment-${COMP$1n}-sub`]: "sub",
+    [`fontStyle-${COMP$1n}-var`]: "italic",
+    [`fontStyle-${COMP$1n}-em`]: "italic",
+    [`fontFamily-${COMP$1n}-mono`]: "$fontFamily-monospace",
+    [`fontSize-${COMP$1n}-title`]: "$fontSize-2xl",
+    [`fontSize-${COMP$1n}-subtitle`]: "$fontSize-xl",
+    [`fontSize-${COMP$1n}-small`]: "$fontSize-sm",
+    [`letterSpacing-${COMP$1n}-caption`]: "0.05rem",
+    [`fontSize-${COMP$1n}-placeholder`]: "$fontSize-xs",
+    [`fontFamily-${COMP$1n}-codefence`]: "$fontFamily-monospace",
+    [`paddingHorizontal-${COMP$1n}-codefence`]: "$space-4",
+    [`paddingVertical-${COMP$1n}-codefence`]: "$space-3",
+    [`paddingVertical-${COMP$1n}-paragraph`]: "$space-1",
+    [`fontSize-${COMP$1n}-subheading`]: "$fontSize-H6",
+    [`fontWeight-${COMP$1n}-subheading`]: "$fontWeight-bold",
+    [`letterSpacing-${COMP$1n}-subheading`]: "0.04em",
+    [`textTransform-${COMP$1n}-subheading`]: "uppercase",
+    [`marginTop-${COMP$1n}-tableheading`]: "$space-1",
+    [`marginBottom-${COMP$1n}-tableheading`]: "$space-4",
+    [`paddingHorizontal-${COMP$1n}-tableheading`]: "$space-1",
+    [`fontSize-${COMP$1n}-tableheading`]: "$fontSize-H6",
+    [`fontWeight-${COMP$1n}-tableheading`]: "$fontWeight-bold",
+    [`backgroundColor-${COMP$1n}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
+    [`borderColor-${COMP$1n}-code`]: "$color-surface-100",
+    [`backgroundColor-${COMP$1n}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",
+    [`borderColor-${COMP$1n}-keyboard`]: "$color-surface-300",
+    [`backgroundColor-${COMP$1n}-marked`]: "rgb(from $color-primary-200 r g b / 0.4)",
+    [`color-${COMP$1n}-placeholder`]: "$color-surface-500",
+    [`color-${COMP$1n}-codefence`]: "$color-surface-900",
+    [`color-${COMP$1n}-subheading`]: "$textColor-secondary",
+    [`color-${COMP$1n}-secondary`]: "$textColor-secondary",
     dark: {
-      [`backgroundColor-${COMP$1o}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)"
+      [`backgroundColor-${COMP$1n}-marked`]: "rgb(from $color-primary-400 r g b / 0.4)"
     }
   }
 });
 const textComponentRenderer = createComponentRenderer(
-  COMP$1o,
+  COMP$1n,
   TextMd,
   ({ node, extractValue, className, renderChild: renderChild2, registerComponentApi }) => {
     const {
@@ -9466,7 +9449,7 @@ const textComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$1n = "Fragment";
+const COMP$1m = "Fragment";
 const FragmentMd = createMetadata({
   status: "stable",
   description: "`Fragment` provides conditional rendering. You can use `when=` on any component to render it conditionally, use `Fragment` to apply `when` to a group of components.",
@@ -9476,39 +9459,43 @@ const FragmentMd = createMetadata({
   }
 });
 const fragmentComponentRenderer = createComponentRenderer(
-  COMP$1n,
+  COMP$1m,
   FragmentMd,
   ({ node, extractValue, renderChild: renderChild2, layoutContext }) => {
-    return /* @__PURE__ */ jsx(Fragment$1, { children: renderChild2(node.children, layoutContext) }, extractValue(node.uid));
+    let renderedChild = renderChild2(node.children, layoutContext);
+    if (Array.isArray(renderedChild)) {
+      return /* @__PURE__ */ jsx(Fragment$1, { children: renderedChild }, extractValue(node.uid));
+    }
+    return renderedChild;
   }
 );
-const themeVars$I = `'{"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))", "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)", "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)"}'`;
-const wrapper$i = "_wrapper_1cz91_14";
-const noScroll = "_noScroll_1cz91_20";
-const headerWrapper = "_headerWrapper_1cz91_23";
-const tableBody = "_tableBody_1cz91_24";
-const clickableHeader = "_clickableHeader_1cz91_29";
-const headerContent = "_headerContent_1cz91_43";
-const headerRow = "_headerRow_1cz91_75";
-const columnCell = "_columnCell_1cz91_79";
-const cell = "_cell_1cz91_80";
-const alignTop = "_alignTop_1cz91_88";
-const alignCenter = "_alignCenter_1cz91_92";
-const alignBottom = "_alignBottom_1cz91_96";
-const table = "_table_1cz91_24";
-const row$1 = "_row_1cz91_104";
-const checkBoxWrapper = "_checkBoxWrapper_1cz91_111";
-const showInHeader = "_showInHeader_1cz91_116";
-const selected$1 = "_selected_1cz91_120";
-const allSelected = "_allSelected_1cz91_120";
-const cellContent = "_cellContent_1cz91_151";
-const focused$1 = "_focused_1cz91_178";
-const disabled$7 = "_disabled_1cz91_190";
-const noBottomBorder = "_noBottomBorder_1cz91_194";
-const noRows$1 = "_noRows_1cz91_219";
-const loadingWrapper$1 = "_loadingWrapper_1cz91_258";
-const resizer$1 = "_resizer_1cz91_271";
-const isResizing = "_isResizing_1cz91_292";
+const themeVars$I = `'{"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_uqop0_14";
+const noScroll = "_noScroll_uqop0_42";
+const headerWrapper = "_headerWrapper_uqop0_45";
+const tableBody = "_tableBody_uqop0_46";
+const clickableHeader = "_clickableHeader_uqop0_51";
+const headerContent = "_headerContent_uqop0_65";
+const headerRow = "_headerRow_uqop0_97";
+const columnCell = "_columnCell_uqop0_101";
+const cell = "_cell_uqop0_102";
+const alignTop = "_alignTop_uqop0_110";
+const alignCenter = "_alignCenter_uqop0_114";
+const alignBottom = "_alignBottom_uqop0_118";
+const table = "_table_uqop0_46";
+const row$1 = "_row_uqop0_126";
+const checkBoxWrapper = "_checkBoxWrapper_uqop0_133";
+const showInHeader = "_showInHeader_uqop0_138";
+const selected$1 = "_selected_uqop0_142";
+const allSelected = "_allSelected_uqop0_142";
+const cellContent = "_cellContent_uqop0_173";
+const focused$1 = "_focused_uqop0_200";
+const disabled$7 = "_disabled_uqop0_212";
+const noBottomBorder = "_noBottomBorder_uqop0_219";
+const noRows$1 = "_noRows_uqop0_244";
+const loadingWrapper$1 = "_loadingWrapper_uqop0_283";
+const resizer$1 = "_resizer_uqop0_296";
+const isResizing = "_isResizing_uqop0_317";
 const styles$12 = {
   themeVars: themeVars$I,
   wrapper: wrapper$i,
@@ -11971,7 +11958,6 @@ const Table = forwardRef(
             {
               className: styles$12.table,
               ref: tableRef,
-              style: { borderRight: "1px solid transparent" },
               children: [
                 !hideHeader && /* @__PURE__ */ jsx("thead", { style: { height: headerHeight }, className: styles$12.headerWrapper, children: table2.getHeaderGroups().map((headerGroup, headerGroupIndex) => /* @__PURE__ */ jsx(
                   "tr",
@@ -12163,7 +12149,7 @@ const defaultProps$Z = {
   pageSizeSelectorPosition: "start",
   pageInfoPosition: "end"
 };
-const COMP$1m = "Table";
+const COMP$1l = "Table";
 const TableMd = createMetadata({
   status: "stable",
   description: "`Table` presents structured data for viewing, sorting, selection, and interaction.",
@@ -12175,7 +12161,7 @@ const TableMd = createMetadata({
       `The component receives data via this property. The \`data\` property is a list of items that the \`Table\` can display.`
     ),
     isPaginated: {
-      description: `This property adds pagination controls to the \`${COMP$1m}\`.`,
+      description: `This property adds pagination controls to the \`${COMP$1l}\`.`,
       valueType: "boolean",
       defaultValue: defaultProps$Z.isPaginated
     },
@@ -12245,13 +12231,13 @@ const TableMd = createMetadata({
       defaultValue: defaultProps$Z.hideHeader
     },
     iconNoSort: d(
-      `Allows setting an alternate icon displayed in the ${COMP$1m} column header when sorting is enabled, but the column remains unsorted. You can change the default icon for all ${COMP$1m} instances with the "icon.nosort:Table" declaration in the app configuration file.`
+      `Allows setting an alternate icon displayed in the ${COMP$1l} column header when sorting is enabled, but the column remains unsorted. You can change the default icon for all ${COMP$1l} instances with the "icon.nosort:Table" declaration in the app configuration file.`
     ),
     iconSortAsc: d(
-      `Allows setting an alernate icon displayed in the ${COMP$1m} column header when sorting is enabled, and the column is sorted in ascending order. You can change the default icon for all ${COMP$1m} instances with the "icon.sortasc:Table" declaration in the app configuration file.`
+      `Allows setting an alernate icon displayed in the ${COMP$1l} column header when sorting is enabled, and the column is sorted in ascending order. You can change the default icon for all ${COMP$1l} instances with the "icon.sortasc:Table" declaration in the app configuration file.`
     ),
     iconSortDesc: d(
-      `Allows setting an alternate icon displayed in the ${COMP$1m} column header when sorting is enabled, and the column is sorted in descending order. You can change the default icon for all ${COMP$1m} instances with the "icon.sortdesc:Table" declaration in the app configuration file.`
+      `Allows setting an alternate icon displayed in the ${COMP$1l} column header when sorting is enabled, and the column is sorted in descending order. You can change the default icon for all ${COMP$1l} instances with the "icon.sortdesc:Table" declaration in the app configuration file.`
     ),
     enableMultiRowSelection: {
       description: `This boolean property indicates whether you can select multiple rows in the table. This property only has an effect when the rowsSelectable property is set. Setting it to \`false\` limits selection to a single row.`,
@@ -12319,33 +12305,36 @@ const TableMd = createMetadata({
   },
   themeVars: parseScssVar(styles$12.themeVars),
   defaultThemeVars: {
-    [`padding-heading-${COMP$1m}`]: `$space-2 $space-0 $space-2 $space-2`,
-    [`padding-cell-${COMP$1m}`]: "$space-2 $space-0 $space-2 $space-2",
-    [`paddingHorizontal-cell-first-${COMP$1m}`]: "$space-5",
-    [`paddingHorizontal-cell-last-${COMP$1m}`]: "$space-0",
-    [`border-cell-${COMP$1m}`]: "1px solid $borderColor",
-    [`outlineWidth-heading-${COMP$1m}--focus`]: "$outlineWidth--focus",
-    [`outlineStyle-heading-${COMP$1m}--focus`]: "$outlineStyle--focus",
-    [`outlineOffset-heading-${COMP$1m}--focus`]: "$outlineOffset--focus",
-    [`fontSize-heading-${COMP$1m}`]: "$fontSize-tiny",
-    [`fontWeight-heading-${COMP$1m}`]: "$fontWeight-bold",
-    [`textTransform-heading-${COMP$1m}`]: "uppercase",
-    [`fontSize-row-${COMP$1m}`]: "$fontSize-sm",
+    [`padding-heading-${COMP$1l}`]: `$space-2 $space-1 $space-2 $space-2`,
+    [`padding-cell-${COMP$1l}`]: "$space-2 $space-1 $space-2 $space-2",
+    [`paddingHorizontal-cell-first-${COMP$1l}`]: "$space-5",
+    [`paddingHorizontal-cell-last-${COMP$1l}`]: "$space-1",
+    [`border-cell-${COMP$1l}`]: "1px solid $borderColor",
+    [`outlineWidth-heading-${COMP$1l}--focus`]: "$outlineWidth--focus",
+    [`outlineStyle-heading-${COMP$1l}--focus`]: "$outlineStyle--focus",
+    [`outlineOffset-heading-${COMP$1l}--focus`]: "$outlineOffset--focus",
+    [`fontSize-heading-${COMP$1l}`]: "$fontSize-tiny",
+    [`fontWeight-heading-${COMP$1l}`]: "$fontWeight-bold",
+    [`textTransform-heading-${COMP$1l}`]: "uppercase",
+    [`fontSize-row-${COMP$1l}`]: "$fontSize-sm",
     // [`backgroundColor-${COMP}`]: "transparent",
     // [`backgroundColor-row-${COMP}`]: "inherit",
-    [`backgroundColor-selected-${COMP$1m}--hover`]: `$backgroundColor-row-${COMP$1m}--hover`,
-    [`backgroundColor-pagination-${COMP$1m}`]: `$backgroundColor-${COMP$1m}`,
-    [`outlineColor-heading-${COMP$1m}--focus`]: "$outlineColor--focus",
-    [`textColor-pagination-${COMP$1m}`]: "$color-secondary",
-    [`backgroundColor-row-${COMP$1m}--hover`]: "$color-primary-50",
-    [`backgroundColor-selected-${COMP$1m}`]: "$color-primary-100",
-    [`backgroundColor-heading-${COMP$1m}--hover`]: "$color-surface-200",
-    [`backgroundColor-heading-${COMP$1m}--active`]: "$color-surface-300",
-    [`backgroundColor-heading-${COMP$1m}`]: "$color-surface-100",
-    [`textColor-heading-${COMP$1m}`]: "$color-surface-500"
-  }
-});
-const TableWithColumns = forwardRef(
+    [`backgroundColor-selected-${COMP$1l}--hover`]: `$backgroundColor-row-${COMP$1l}--hover`,
+    [`backgroundColor-pagination-${COMP$1l}`]: `$backgroundColor-${COMP$1l}`,
+    [`outlineColor-heading-${COMP$1l}--focus`]: "$outlineColor--focus",
+    [`textColor-pagination-${COMP$1l}`]: "$color-secondary",
+    [`backgroundColor-row-${COMP$1l}--hover`]: "$color-primary-50",
+    [`backgroundColor-selected-${COMP$1l}`]: "$color-primary-100",
+    [`backgroundColor-heading-${COMP$1l}--hover`]: "$color-surface-200",
+    [`backgroundColor-heading-${COMP$1l}--active`]: "$color-surface-300",
+    [`backgroundColor-heading-${COMP$1l}`]: "$color-surface-100",
+    [`textColor-heading-${COMP$1l}`]: "$color-surface-500",
+    [`border-${COMP$1l}`]: "0px solid transparent",
+    [`borderBottom-last-row-${COMP$1l}`]: `$borderBottom-cell-${COMP$1l}`,
+    [`borderRadius-${COMP$1l}`]: "$borderRadius"
+  }
+});
+const TableWithColumns = memo(forwardRef(
   ({
     extractValue,
     node,
@@ -12471,10 +12460,10 @@ const TableWithColumns = forwardRef(
     }
     return tableContent;
   }
-);
+));
 TableWithColumns.displayName = "TableWithColumns";
 const tableComponentRenderer = createComponentRenderer(
-  COMP$1m,
+  COMP$1l,
   TableMd,
   ({
     extractValue,
@@ -12558,7 +12547,7 @@ function StickyBox({ children, uid, style: style2, to = defaultProps$Y.to, class
     )
   ] });
 }
-const COMP$1l = "StickyBox";
+const COMP$1k = "StickyBox";
 const StickyBoxMd = createMetadata({
   status: "stable",
   description: "`StickyBox` remains fixed at the top or bottom of the screen as the user scrolls.",
@@ -12572,11 +12561,11 @@ const StickyBoxMd = createMetadata({
   },
   themeVars: parseScssVar(styles$$.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$1l}`]: "$backgroundColor"
+    [`backgroundColor-${COMP$1k}`]: "$backgroundColor"
   }
 });
 const stickyBoxComponentRenderer = createComponentRenderer(
-  COMP$1l,
+  COMP$1k,
   StickyBoxMd,
   ({ node, renderChild: renderChild2, extractValue, className }) => {
     var _a2;
@@ -12619,7 +12608,7 @@ const Badge = forwardRef(function Badge2({ children, color, variant = defaultPro
     }
   );
 });
-const COMP$1k = "Badge";
+const COMP$1j = "Badge";
 const BadgeMd = createMetadata({
   status: "stable",
   description: "`Badge` displays small text labels with colored backgrounds, commonly used for status indicators, categories, tags, and counts. It supports dynamic color mapping based on content values, useful for status systems and data categorization.",
@@ -12636,7 +12625,7 @@ const BadgeMd = createMetadata({
       defaultValue: defaultProps$X.variant
     },
     colorMap: {
-      description: `The \`${COMP$1k}\` component supports the mapping of a list of colors using the \`value\` prop as the key. If this property is not set, no color mapping is used.`
+      description: `The \`${COMP$1j}\` component supports the mapping of a list of colors using the \`value\` prop as the key. If this property is not set, no color mapping is used.`
     },
     themeColor: dInternal(`(**NOT IMPLEMENTED YET**) The theme color of the component.`),
     indicatorText: dInternal(
@@ -12651,18 +12640,18 @@ const BadgeMd = createMetadata({
   events: {},
   themeVars: parseScssVar(styles$_.themeVars),
   defaultThemeVars: {
-    [`padding-${COMP$1k}`]: `$space-0_5 $space-2`,
-    [`border-${COMP$1k}`]: `0px solid $borderColor`,
-    [`padding-${COMP$1k}-pill`]: `$space-0_5 $space-2`,
-    [`borderRadius-${COMP$1k}`]: "4px",
-    [`fontSize-${COMP$1k}`]: "0.8em",
-    [`fontSize-${COMP$1k}-pill`]: "0.8em",
-    [`backgroundColor-${COMP$1k}`]: "rgb(from $color-secondary-500 r g b / 0.6)",
-    [`textColor-${COMP$1k}`]: "$const-color-surface-0"
+    [`padding-${COMP$1j}`]: `$space-0_5 $space-2`,
+    [`border-${COMP$1j}`]: `0px solid $borderColor`,
+    [`padding-${COMP$1j}-pill`]: `$space-0_5 $space-2`,
+    [`borderRadius-${COMP$1j}`]: "4px",
+    [`fontSize-${COMP$1j}`]: "0.8em",
+    [`fontSize-${COMP$1j}-pill`]: "0.8em",
+    [`backgroundColor-${COMP$1j}`]: "rgb(from $color-secondary-500 r g b / 0.6)",
+    [`textColor-${COMP$1j}`]: "$const-color-surface-0"
   }
 });
 const badgeComponentRenderer = createComponentRenderer(
-  COMP$1k,
+  COMP$1j,
   BadgeMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     var _a2;
@@ -12762,23 +12751,23 @@ function abbrevName(name) {
   }
   return null;
 }
-const COMP$1j = "Avatar";
+const COMP$1i = "Avatar";
 const AvatarMd = createMetadata({
   status: "stable",
   description: "`Avatar` displays a user or entity's profile picture as a circular image, with automatic fallback to initials when no image is provided. It's commonly used in headers, user lists, comments, and anywhere you need to represent a person or organization.",
   props: {
     size: {
-      description: `This property defines the display size of the ${COMP$1j}.`,
+      description: `This property defines the display size of the ${COMP$1i}.`,
       availableValues: sizeMd,
       valueType: "string",
       defaultValue: defaultProps$W.size
     },
     name: {
-      description: `This property sets the name value the ${COMP$1j} uses to display initials. If neither this property nor \`url\` is defined, an empty avatar is displayed.`,
+      description: `This property sets the name value the ${COMP$1i} uses to display initials. If neither this property nor \`url\` is defined, an empty avatar is displayed.`,
       valueType: "string"
     },
     url: {
-      description: `This property specifies the URL of the image to display in the ${COMP$1j}. If neither this property nor \`name\` is defined, an empty avatar is displayed.`,
+      description: `This property specifies the URL of the image to display in the ${COMP$1i}. If neither this property nor \`name\` is defined, an empty avatar is displayed.`,
       valueType: "string"
     }
   },
@@ -12787,16 +12776,16 @@ const AvatarMd = createMetadata({
   },
   themeVars: parseScssVar(styles$Z.themeVars),
   defaultThemeVars: {
-    [`borderRadius-${COMP$1j}`]: "4px",
-    [`boxShadow-${COMP$1j}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
-    [`textColor-${COMP$1j}`]: "$textColor-secondary",
-    [`fontWeight-${COMP$1j}`]: "$fontWeight-bold",
-    [`border-${COMP$1j}`]: "0px solid $color-surface-400A80",
-    [`backgroundColor-${COMP$1j}`]: "$color-surface-100"
+    [`borderRadius-${COMP$1i}`]: "4px",
+    [`boxShadow-${COMP$1i}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
+    [`textColor-${COMP$1i}`]: "$textColor-secondary",
+    [`fontWeight-${COMP$1i}`]: "$fontWeight-bold",
+    [`border-${COMP$1i}`]: "0px solid $color-surface-400A80",
+    [`backgroundColor-${COMP$1i}`]: "$color-surface-100"
   }
 });
 const avatarComponentRenderer = createComponentRenderer(
-  COMP$1j,
+  COMP$1i,
   AvatarMd,
   ({ node, extractValue, lookupEventHandler, className, extractResourceUrl }) => {
     var _a2;
@@ -12849,7 +12838,7 @@ const ContentSeparator = forwardRef(
     );
   }
 );
-const COMP$1i = "ContentSeparator";
+const COMP$1h = "ContentSeparator";
 const ContentSeparatorMd = createMetadata({
   status: "stable",
   description: "`ContentSeparator` creates visual dividers between content sections using horizontal or vertical lines. It's essential for improving readability by breaking up dense content, separating list items, or creating clear boundaries between different UI sections.",
@@ -12867,8 +12856,8 @@ const ContentSeparatorMd = createMetadata({
   },
   themeVars: parseScssVar(styles$Y.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$1i}`]: "$color-surface-200",
-    [`size-${COMP$1i}`]: "1px",
+    [`backgroundColor-${COMP$1h}`]: "$color-surface-200",
+    [`size-${COMP$1h}`]: "1px",
     light: {
       // --- No light-specific theme vars
     },
@@ -12878,7 +12867,7 @@ const ContentSeparatorMd = createMetadata({
   }
 });
 const contentSeparatorComponentRenderer = createComponentRenderer(
-  COMP$1i,
+  COMP$1h,
   ContentSeparatorMd,
   ({ node, className, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -12958,13 +12947,13 @@ const Card = forwardRef(function Card2({
     }
   );
 });
-const COMP$1h = "Card";
+const COMP$1g = "Card";
 const CardMd = createMetadata({
   status: "stable",
   description: "`Card` is a versatile container that groups related content with a visual boundary, typically featuring background color, padding, borders, and rounded corners. It's ideal for organizing information, creating sections, and establishing visual hierarchy in your interface.",
   props: {
     avatarUrl: {
-      description: `The url for an avarar image. If not specified, but [\`showAvatar\`](#showAvatar) is true, ${COMP$1h} will show the first letters of the [\`title\`](#title).`,
+      description: `The url for an avarar image. If not specified, but [\`showAvatar\`](#showAvatar) is true, ${COMP$1g} will show the first letters of the [\`title\`](#title).`,
       type: "string"
     },
     showAvatar: {
@@ -12990,33 +12979,33 @@ const CardMd = createMetadata({
       valueType: "string"
     },
     orientation: {
-      description: `An optional property that governs the ${COMP$1h}'s orientation (whether the ${COMP$1h} lays out its children in a row or a column). If the orientation is set to \`horizontal\`, the ${COMP$1h} will display its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`,
+      description: `An optional property that governs the ${COMP$1g}'s orientation (whether the ${COMP$1g} lays out its children in a row or a column). If the orientation is set to \`horizontal\`, the ${COMP$1g} will display its children in a row, except for its [\`title\`](#title) and [\`subtitle\`](#subtitle).`,
       availableValues: orientationOptionMd,
       valueType: "string",
       defaultValue: defaultProps$U.orientation
     }
   },
   events: {
-    click: dClick(COMP$1h)
+    click: dClick(COMP$1g)
   },
   themeVars: parseScssVar(styles$X.themeVars),
   defaultThemeVars: {
-    [`padding-${COMP$1h}`]: "$space-4",
-    [`border-${COMP$1h}`]: "1px solid $borderColor",
-    [`borderRadius-${COMP$1h}`]: "$borderRadius",
-    [`boxShadow-${COMP$1h}`]: "none",
-    [`backgroundColor-${COMP$1h}`]: "$color-surface-raised",
-    [`gap-${COMP$1h}`]: "var(--stack-gap-default)",
-    [`gap-title-${COMP$1h}`]: "$gap-none",
-    [`gap-avatar-${COMP$1h}`]: "$gap-normal",
-    [`verticalAlignment-title-${COMP$1h}`]: "center"
+    [`padding-${COMP$1g}`]: "$space-4",
+    [`border-${COMP$1g}`]: "1px solid $borderColor",
+    [`borderRadius-${COMP$1g}`]: "$borderRadius",
+    [`boxShadow-${COMP$1g}`]: "none",
+    [`backgroundColor-${COMP$1g}`]: "$color-surface-raised",
+    [`gap-${COMP$1g}`]: "var(--stack-gap-default)",
+    [`gap-title-${COMP$1g}`]: "$gap-none",
+    [`gap-avatar-${COMP$1g}`]: "$gap-normal",
+    [`verticalAlignment-title-${COMP$1g}`]: "center"
   },
   themeVarDescriptions: {
-    [`gap-${COMP$1h}`]: "The gap between the component's children.",
-    [`gap-title-${COMP$1h}`]: "The gap between the title and the subtitle",
-    [`gap-avatar-${COMP$1h}`]: "The gap between the avatar and the title panel",
-    [`horizontalAlignment-title-${COMP$1h}`]: "The horizontal alignment of panel with the title and subtitle",
-    [`verticalAlignment-title-${COMP$1h}`]: "The vertical alignment of the title and subtitle to the avatar"
+    [`gap-${COMP$1g}`]: "The gap between the component's children.",
+    [`gap-title-${COMP$1g}`]: "The gap between the title and the subtitle",
+    [`gap-avatar-${COMP$1g}`]: "The gap between the avatar and the title panel",
+    [`horizontalAlignment-title-${COMP$1g}`]: "The horizontal alignment of panel with the title and subtitle",
+    [`verticalAlignment-title-${COMP$1g}`]: "The vertical alignment of the title and subtitle to the avatar"
   }
 });
 const cardComponentRenderer = createComponentRenderer(
@@ -13187,13 +13176,13 @@ const FlowLayout = forwardRef(function FlowLayout2({ style: style2, className, c
   }, [_columnGap, _rowGap]);
   return /* @__PURE__ */ jsx(FlowLayoutContext.Provider, { value: flowLayoutContextValue, children: /* @__PURE__ */ jsx("div", { style: style2, className, ref: forwardedRef, ...rest, children: /* @__PURE__ */ jsx("div", { className: styles$W.outer, children: /* @__PURE__ */ jsx("div", { className: classnames(styles$W.flowContainer, styles$W.horizontal), style: innerStyle, children }) }) }) });
 });
-const COMP$1g = "FlowLayout";
+const COMP$1f = "FlowLayout";
 const FlowLayoutMd = createMetadata({
   status: "stable",
   description: "`FlowLayout` positions content in rows with automatic wrapping. When items exceed the available horizontal space, they automatically wrap to a new line.",
   props: {
     gap: {
-      description: `This property defines the gap between items in the same row and between rows. The ${COMP$1g} component creates a new row when an item is about to overflow the current row.`,
+      description: `This property defines the gap between items in the same row and between rows. The ${COMP$1f} component creates a new row when an item is about to overflow the current row.`,
       type: "string",
       defaultValue: "$gap-normal"
     },
@@ -13202,14 +13191,14 @@ const FlowLayoutMd = createMetadata({
       defaultValue: defaultProps$T.columnGap
     },
     rowGap: {
-      description: `The \`rowGap\` property specifies the space between the ${COMP$1g} rows; it overrides the \`gap\` value.`,
+      description: `The \`rowGap\` property specifies the space between the ${COMP$1f} rows; it overrides the \`gap\` value.`,
       defaultValue: defaultProps$T.rowGap
     }
   },
   themeVars: parseScssVar(styles$W.themeVars)
 });
 const flowLayoutComponentRenderer = createComponentRenderer(
-  COMP$1g,
+  COMP$1f,
   FlowLayoutMd,
   ({ node, renderChild: renderChild2, className, extractValue }) => {
     var _a2, _b, _c, _d;
@@ -13419,7 +13408,7 @@ const ModalDialog = React__default.forwardRef(
         "data-part-id": PART_CONTENT,
         className: classnames(styles$V.content, className),
         onPointerDownOutside: (event) => {
-          if (event.target instanceof Element && event.target.closest("._debug-inspect-button") !== null) {
+          if (event.target instanceof Element && (event.target.closest("._debug-inspect-button") !== null || event.target.localName === "com-1password-button")) {
             event.preventDefault();
           }
         },
@@ -13472,7 +13461,7 @@ const ModalDialog = React__default.forwardRef(
   }
 );
 ModalDialog.displayName = "ModalDialog";
-const COMP$1f = "ModalDialog";
+const COMP$1e = "ModalDialog";
 const ModalDialogMd = createMetadata({
   status: "stable",
   description: "`ModalDialog` creates overlay dialogs that appear on top of the main interface, ideal for forms, confirmations, detailed views, or any content that requires focused user attention. Dialogs are programmatically opened using the `open()` method and can receive parameters for dynamic content.",
@@ -13499,15 +13488,15 @@ const ModalDialogMd = createMetadata({
   },
   events: {
     open: d(
-      `This event is fired when the \`${COMP$1f}\` is opened either via a \`when\` or an imperative API call (\`open()\`).`
+      `This event is fired when the \`${COMP$1e}\` is opened either via a \`when\` or an imperative API call (\`open()\`).`
     ),
     close: d(
-      `This event is fired when the close button is pressed or the user clicks outside the \`${COMP$1f}\`.`
+      `This event is fired when the close button is pressed or the user clicks outside the \`${COMP$1e}\`.`
     )
   },
   apis: {
     close: {
-      description: `This method is used to close the \`${COMP$1f}\`. Invoke it using \`modalId.close()\` where \`modalId\` refers to a \`ModalDialog\` component.`,
+      description: `This method is used to close the \`${COMP$1e}\`. Invoke it using \`modalId.close()\` where \`modalId\` refers to a \`ModalDialog\` component.`,
       signature: "close(): void"
     },
     open: {
@@ -13526,18 +13515,18 @@ const ModalDialogMd = createMetadata({
   },
   themeVars: parseScssVar(styles$V.themeVars),
   defaultThemeVars: {
-    ...paddingSubject(COMP$1f, { all: "$space-7" }),
-    [`backgroundColor-${COMP$1f}`]: "$backgroundColor-primary",
-    [`backgroundColor-overlay-${COMP$1f}`]: "$backgroundColor-overlay",
-    [`textColor-${COMP$1f}`]: "$textColor-primary",
-    [`borderRadius-${COMP$1f}`]: "$borderRadius",
-    [`fontFamily-${COMP$1f}`]: "$fontFamily",
-    [`maxWidth-${COMP$1f}`]: "450px",
-    [`marginBottom-title-${COMP$1f}`]: "0"
+    ...paddingSubject(COMP$1e, { all: "$space-7" }),
+    [`backgroundColor-${COMP$1e}`]: "$backgroundColor-primary",
+    [`backgroundColor-overlay-${COMP$1e}`]: "$backgroundColor-overlay",
+    [`textColor-${COMP$1e}`]: "$textColor-primary",
+    [`borderRadius-${COMP$1e}`]: "$borderRadius",
+    [`fontFamily-${COMP$1e}`]: "$fontFamily",
+    [`maxWidth-${COMP$1e}`]: "450px",
+    [`marginBottom-title-${COMP$1e}`]: "0"
   }
 });
 const modalViewComponentRenderer = createComponentRenderer(
-  COMP$1f,
+  COMP$1e,
   ModalDialogMd,
   ({
     node,
@@ -13553,7 +13542,7 @@ const modalViewComponentRenderer = createComponentRenderer(
       return /* @__PURE__ */ jsx(
         ModalDialogFrame,
         {
-          isInitiallyOpen: node.when !== void 0,
+          isInitiallyOpen: extractValue(node.when) !== void 0,
           registerComponentApi,
           onClose: lookupEventHandler("close"),
           onOpen: lookupEventHandler("open"),
@@ -13617,7 +13606,7 @@ const NoResult = forwardRef(function NoResult2({
     }
   );
 });
-const COMP$1e = "NoResult";
+const COMP$1d = "NoResult";
 const NoResultMd = createMetadata({
   status: "stable",
   description: "`NoResult` displays a visual indication that a query or search returned nothing.",
@@ -13636,10 +13625,10 @@ const NoResultMd = createMetadata({
   },
   themeVars: parseScssVar(styles$U.themeVars),
   defaultThemeVars: {
-    [`border-${COMP$1e}`]: "0px solid $borderColor",
-    [`paddingVertical-${COMP$1e}`]: "$space-2",
-    [`gap-icon-${COMP$1e}`]: "$space-2",
-    [`size-icon-${COMP$1e}`]: "$space-8",
+    [`border-${COMP$1d}`]: "0px solid $borderColor",
+    [`paddingVertical-${COMP$1d}`]: "$space-2",
+    [`gap-icon-${COMP$1d}`]: "$space-2",
+    [`size-icon-${COMP$1d}`]: "$space-8",
     light: {
       // --- No light-specific theme vars
     },
@@ -13649,7 +13638,7 @@ const NoResultMd = createMetadata({
   }
 });
 const noResultComponentRenderer = createComponentRenderer(
-  COMP$1e,
+  COMP$1d,
   NoResultMd,
   ({ node, extractValue, className }) => {
     return /* @__PURE__ */ jsx(
@@ -13762,7 +13751,7 @@ const FileUploadDropZone = forwardRef(function FileUploadDropZone2({
     onPaste: handleOnPaste
   });
   const rootRef = getComposedRef(ref, forwardedRef);
-  return /* @__PURE__ */ jsxs("div", { ...rootProps, ref: rootRef, children: [
+  return /* @__PURE__ */ jsxs("div", { ...rootProps, "data-drop-enabled": !disabled2, ref: rootRef, children: [
     /* @__PURE__ */ jsx("input", { ...getInputProps() }),
     children,
     isDragActive && isDragAccept && /* @__PURE__ */ jsxs("div", { className: styles$T.dropPlaceholder, children: [
@@ -13771,7 +13760,7 @@ const FileUploadDropZone = forwardRef(function FileUploadDropZone2({
     ] })
   ] });
 });
-const COMP$1d = "FileUploadDropZone";
+const COMP$1c = "FileUploadDropZone";
 const FileUploadDropZoneMd = createMetadata({
   status: "stable",
   description: "`FileUploadDropZone` enables users to upload files by dragging and dropping files from their local file system onto a designated area within the UI.",
@@ -13815,7 +13804,7 @@ const FileUploadDropZoneMd = createMetadata({
   }
 });
 const fileUploadDropZoneComponentRenderer = createComponentRenderer(
-  COMP$1d,
+  COMP$1c,
   FileUploadDropZoneMd,
   ({ node, extractValue, updateState, renderChild: renderChild2, lookupEventHandler, registerComponentApi, className }) => {
     return /* @__PURE__ */ jsx(
@@ -13836,7 +13825,7 @@ const fileUploadDropZoneComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$1c = "Icon";
+const COMP$1b = "Icon";
 const IconMd = createMetadata({
   status: "stable",
   description: "`Icon` displays scalable vector icons from XMLUI's built-in icon registry using simple name references. Icons are commonly used in buttons, navigation elements, and status indicators.",
@@ -13845,7 +13834,7 @@ const IconMd = createMetadata({
       "This string property specifies the name of the icon to display. All icons have unique, case-sensitive names identifying them. If the icon name is not set, the `fallback` value is used."
     ),
     size: {
-      description: `This property defines the size of the \`${COMP$1c}\`. Note that setting the \`height\` and/or the \`width\` of the component will override this property. You can use az explicit size value (e.g., 32px) or one of these predefined values: \`xs\`, \`sm\`, \`md\`, \`lg\`.`,
+      description: `This property defines the size of the \`${COMP$1b}\`. Note that setting the \`height\` and/or the \`width\` of the component will override this property. You can use az explicit size value (e.g., 32px) or one of these predefined values: \`xs\`, \`sm\`, \`md\`, \`lg\`.`,
       availableValues: ["xs", "sm", "md", "lg"]
     },
     fallback: d(
@@ -13857,11 +13846,11 @@ const IconMd = createMetadata({
   },
   themeVars: parseScssVar(styles$1f.themeVars),
   defaultThemeVars: {
-    [`size-${COMP$1c}`]: "1.25em"
+    [`size-${COMP$1b}`]: "1.25em"
   }
 });
 const iconComponentRenderer = createComponentRenderer(
-  COMP$1c,
+  COMP$1b,
   IconMd,
   ({ node, extractValue, className, lookupEventHandler }) => {
     return /* @__PURE__ */ jsx(
@@ -13933,7 +13922,7 @@ const IFrame = memo(forwardRef(function IFrame2({
     }
   );
 }));
-const COMP$1b = "IFrame";
+const COMP$1a = "IFrame";
 const IFrameMd = createMetadata({
   status: "stable",
   description: "`IFrame` embeds external content from another HTML document into the current page. It provides security controls through sandbox and allow attributes, and supports features like fullscreen display and referrer policy configuration.",
@@ -13970,7 +13959,7 @@ const IFrameMd = createMetadata({
   },
   events: {
     load: {
-      description: `This event is triggered when the ${COMP$1b} content has finished loading.`
+      description: `This event is triggered when the ${COMP$1a} content has finished loading.`
     }
   },
   apis: {
@@ -13993,14 +13982,14 @@ const IFrameMd = createMetadata({
   },
   themeVars: parseScssVar(styles$S.themeVars),
   defaultThemeVars: {
-    [`width-${COMP$1b}`]: "100%",
-    [`height-${COMP$1b}`]: "300px",
-    [`borderRadius-${COMP$1b}`]: "$borderRadius",
-    [`border-${COMP$1b}`]: "1px solid $borderColor"
+    [`width-${COMP$1a}`]: "100%",
+    [`height-${COMP$1a}`]: "300px",
+    [`borderRadius-${COMP$1a}`]: "$borderRadius",
+    [`border-${COMP$1a}`]: "1px solid $borderColor"
   }
 });
 const iframeComponentRenderer = createComponentRenderer(
-  COMP$1b,
+  COMP$1a,
   IFrameMd,
   ({ node, extractValue, className, extractResourceUrl, lookupEventHandler, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
@@ -14048,7 +14037,7 @@ function Items({ items, renderItem, reverse: reverse2 = defaultProps$P.reverse }
     ) }, index);
   }) });
 }
-const COMP$1a = "Items";
+const COMP$19 = "Items";
 const ItemsMd = createMetadata({
   status: "stable",
   description: "`Items` renders data arrays without built-in layout or styling, providing a lightweight alternative to `List`. Unlike `List`, it provides no virtualization, grouping, or visual formatting — just pure data iteration.",
@@ -14075,7 +14064,7 @@ const ItemsMd = createMetadata({
   },
   opaque: true
 });
-const itemsComponentRenderer = createComponentRenderer(COMP$1a, ItemsMd, (rendererContext) => {
+const itemsComponentRenderer = createComponentRenderer(COMP$19, ItemsMd, (rendererContext) => {
   const { node, renderChild: renderChild2, extractValue, layoutContext } = rendererContext;
   return /* @__PURE__ */ jsx(
     Items,
@@ -14097,10 +14086,10 @@ const itemsComponentRenderer = createComponentRenderer(COMP$1a, ItemsMd, (render
     }
   );
 });
-const COMP$19 = "SelectionStore";
+const COMP$18 = "SelectionStore";
 const SelectionStoreMd = createMetadata({
   status: "deprecated",
-  description: `The \`${COMP$19}\` is a non-visual component that may wrap components (items) and manage their selection state to accommodate the usage of other actions.`,
+  description: `The \`${COMP$18}\` is a non-visual component that may wrap components (items) and manage their selection state to accommodate the usage of other actions.`,
   props: {
     idKey: {
       description: `The selected items in the selection store needs to have a unique ID to use as an unambiguous key for that particular item. This property uniquely identifies the selected object item via a given property. By default, the key attribute is \`"id"\`.`,
@@ -14109,7 +14098,7 @@ const SelectionStoreMd = createMetadata({
   }
 });
 const selectionStoreComponentRenderer = createComponentRenderer(
-  COMP$19,
+  COMP$18,
   SelectionStoreMd,
   (rendererContext) => {
     const { node, state, updateState, renderChild: renderChild2, registerComponentApi } = rendererContext;
@@ -14125,7 +14114,7 @@ const selectionStoreComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$18 = "Image";
+const COMP$17 = "Image";
 const ImageMd = createMetadata({
   status: "stable",
   description: "`Image` displays pictures from URLs or local sources with built-in responsive sizing, aspect ratio control, and accessibility features. It handles different image formats and provides options for lazy loading and click interactions.",
@@ -14155,12 +14144,12 @@ const ImageMd = createMetadata({
     animation: dInternal(`The optional animation object to be applied to the component`)
   },
   events: {
-    click: dClick(COMP$18)
+    click: dClick(COMP$17)
   },
   themeVars: parseScssVar(styles$1a.themeVars)
 });
 const imageComponentRenderer = createComponentRenderer(
-  COMP$18,
+  COMP$17,
   ImageMd,
   ({ node, extractValue, className, extractResourceUrl }) => {
     return /* @__PURE__ */ jsx(
@@ -14184,7 +14173,7 @@ const defaultProps$O = {
 const PageMetaTitle = ({ title: title2 = defaultProps$O.title }) => {
   return /* @__PURE__ */ jsx(Helmet, { title: title2 });
 };
-const COMP$17 = "PageMetaTitle";
+const COMP$16 = "PageMetaTitle";
 const PageMetaTitleMd = createMetadata({
   status: "stable",
   description: "`PageMetaTitle` dynamically sets or updates the browser tab title, enabling pages and components to override the default application name with context-specific titles.",
@@ -14196,7 +14185,7 @@ const PageMetaTitleMd = createMetadata({
   }
 });
 const pageMetaTitleComponentRenderer = createComponentRenderer(
-  COMP$17,
+  COMP$16,
   PageMetaTitleMd,
   ({ node, extractValue, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(PageMetaTitle, { title: extractValue(node.props.value) || renderChild2(node.children) });
@@ -14235,7 +14224,7 @@ const ProgressBar = forwardRef(function ProgressBar2({ value = defaultProps$N.va
     }
   );
 });
-const COMP$16 = "ProgressBar";
+const COMP$15 = "ProgressBar";
 const ProgressBarMd = createMetadata({
   status: "stable",
   description: "`ProgressBar` provides a visual indicator showing the completion percentage of tasks, processes, or any measurable progress. It displays as a horizontal bar that fills from left to right based on the provided value between 0 (empty) and 1 (complete).",
@@ -14248,15 +14237,15 @@ const ProgressBarMd = createMetadata({
   },
   themeVars: parseScssVar(styles$R.themeVars),
   defaultThemeVars: {
-    [`borderRadius-${COMP$16}`]: "$borderRadius",
-    [`borderRadius-indicator-${COMP$16}`]: "0px",
-    [`thickness-${COMP$16}`]: "$space-2",
-    [`backgroundColor-${COMP$16}`]: "$color-surface-200",
-    [`color-indicator-${COMP$16}`]: "$color-primary-500"
+    [`borderRadius-${COMP$15}`]: "$borderRadius",
+    [`borderRadius-indicator-${COMP$15}`]: "0px",
+    [`thickness-${COMP$15}`]: "$space-2",
+    [`backgroundColor-${COMP$15}`]: "$color-surface-200",
+    [`color-indicator-${COMP$15}`]: "$color-primary-500"
   }
 });
 const progressBarComponentRenderer = createComponentRenderer(
-  COMP$16,
+  COMP$15,
   ProgressBarMd,
   ({ node, extractValue, className }) => {
     return /* @__PURE__ */ jsx(
@@ -14485,13 +14474,13 @@ const Splitter = ({
     }
   );
 };
-const COMP$15 = "Splitter";
+const COMP$14 = "Splitter";
 const baseSplitterMd = createMetadata({
   status: "stable",
   description: "`Splitter` component divides a container into two resizable sections. These are are identified by their names: primary and secondary. They have a draggable bar between them.",
   props: {
     swapped: {
-      description: `This optional booelan property indicates whether the \`${COMP$15}\` sections are layed out as primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
+      description: `This optional booelan property indicates whether the \`${COMP$14}\` sections are layed out as primary and secondary (\`false\`) or secondary and primary (\`true\`) from left to right.`,
       valueType: "boolean",
       defaultValue: defaultProps$M.swapped
     },
@@ -14530,10 +14519,10 @@ const baseSplitterMd = createMetadata({
   },
   themeVars: parseScssVar(styles$Q.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-resizer-${COMP$15}`]: "$color-surface-100",
-    [`thickness-resizer-${COMP$15}`]: "5px",
-    [`cursor-resizer-horizontal-${COMP$15}`]: "ew-resize",
-    [`cursor-resizer-vertical-${COMP$15}`]: "ns-resize"
+    [`backgroundColor-resizer-${COMP$14}`]: "$color-surface-100",
+    [`thickness-resizer-${COMP$14}`]: "5px",
+    [`cursor-resizer-horizontal-${COMP$14}`]: "ew-resize",
+    [`cursor-resizer-vertical-${COMP$14}`]: "ns-resize"
   }
 });
 const SplitterMd = {
@@ -14542,8 +14531,8 @@ const SplitterMd = {
     ...baseSplitterMd.props
   }
 };
-const HSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$15 };
-const VSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$15 };
+const HSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$14 };
+const VSplitterMd = { ...baseSplitterMd, specializedFrom: COMP$14 };
 const DEFAULT_ORIENTATION = "vertical";
 function renderSplitter({
   node,
@@ -14574,7 +14563,7 @@ function renderSplitter({
   );
 }
 const splitterComponentRenderer = createComponentRenderer(
-  COMP$15,
+  COMP$14,
   SplitterMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
     return renderSplitter({
@@ -14941,7 +14930,7 @@ function Queue({
   }, [doComplete, doSingle, prevQueue, queue]);
   return null;
 }
-const COMP$14 = "Queue";
+const COMP$13 = "Queue";
 const QueueMd = createMetadata({
   status: "stable",
   description: "`Queue` manages sequential processing of items in FIFO (first-in, first-out) order. It is a non-visual component but provides UI progress reporting and result display.",
@@ -15014,7 +15003,7 @@ const QueueMd = createMetadata({
   }
 });
 const queueComponentRenderer = createComponentRenderer(
-  COMP$14,
+  COMP$13,
   QueueMd,
   ({ node, registerComponentApi, lookupEventHandler, renderChild: renderChild2, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -15069,7 +15058,13 @@ const CompoundComponent = forwardRef(
     extractValue,
     layoutContext,
     uid,
-    updateState
+    updateState,
+    registerComponentApi,
+    extractResourceUrl,
+    appContext,
+    state,
+    lookupAction,
+    ...restProps
   }, forwardedRef) => {
     const resolvedPropsInner = useMemo(() => {
       const resolvedProps2 = {};
@@ -15152,7 +15147,11 @@ const CompoundComponent = forwardRef(
     const ret = renderChild2(nodeWithPropsAndEvents, safeLayoutContext, memoedParentRenderContext);
     if (forwardedRef && ret && isValidElement(ret)) {
       return React__default.cloneElement(ret, {
-        ref: composeRefs(forwardedRef, ret.ref)
+        ref: composeRefs(forwardedRef, ret.ref),
+        ...mergeProps(
+          ret.props,
+          restProps
+        )
       });
     }
     return React__default.isValidElement(ret) ? ret : /* @__PURE__ */ jsx(Fragment, { children: ret });
@@ -15601,7 +15600,7 @@ function MemoizedSection({
     }
   );
 }
-const COMP$13 = "List";
+const COMP$12 = "List";
 const ListMd = createMetadata({
   status: "stable",
   description: "`List` is a high-performance, virtualized container for rendering large datasets with built-in grouping, sorting, and visual formatting. It only renders visible items in the viewport, making it ideal for displaying thousands of records while maintaining smooth scrolling performance.",
@@ -15616,7 +15615,7 @@ const ListMd = createMetadata({
       `This property delays the rendering of children until it is set to \`false\`, or the component receives usable list items via the [\`data\`](#data) property.`
     ),
     limit: d(
-      `This property limits the number of items displayed in the \`${COMP$13}\`. If not set, all items are displayed.`
+      `This property limits the number of items displayed in the \`${COMP$12}\`. If not set, all items are displayed.`
     ),
     scrollAnchor: {
       description: `This property pins the scroll position to a specified location of the list. Available values are shown below.`,
@@ -15631,7 +15630,7 @@ const ListMd = createMetadata({
       `This optioanl property enables the ordering of list items by specifying an attribute in the data.`
     ),
     availableGroups: d(
-      `This property is an array of group names that the \`${COMP$13}\` will display. If not set, all groups in the data are displayed.`
+      `This property is an array of group names that the \`${COMP$12}\` will display. If not set, all groups in the data are displayed.`
     ),
     groupHeaderTemplate: dComponent(
       `Enables the customization of how the groups are displayed, similarly to the [\`itemTemplate\`](#itemtemplate). You can use the \`$item\` context variable to access an item group and map its individual attributes.`
@@ -15646,7 +15645,7 @@ const ListMd = createMetadata({
       `This property defines the template to display when the list is empty.`
     ),
     pageInfo: d(
-      `This property contains the current page information. Setting this property also enures the \`${COMP$13}\` uses pagination.`
+      `This property contains the current page information. Setting this property also enures the \`${COMP$12}\` uses pagination.`
     ),
     idKey: {
       description: "Denotes which attribute of an item acts as the ID or key of the item",
@@ -15660,7 +15659,7 @@ const ListMd = createMetadata({
       defaultProps$K.groupsInitiallyExpanded
     ),
     defaultGroups: d(
-      `This property adds an optional list of default groups for the \`${COMP$13}\` and displays the group headers in the specified order. If the data contains group headers not in this list, those headers are also displayed (after the ones in this list); however, their order is not deterministic.`
+      `This property adds an optional list of default groups for the \`${COMP$12}\` and displays the group headers in the specified order. If the data contains group headers not in this list, those headers are also displayed (after the ones in this list); however, their order is not deterministic.`
     ),
     hideEmptyGroups: {
       description: "This boolean property indicates if empty groups should be hidden (no header and footer are displayed).",
@@ -15708,7 +15707,7 @@ const ListMd = createMetadata({
   themeVars: parseScssVar(styles$P.themeVars)
 });
 const dynamicHeightListComponentRenderer = createComponentRenderer(
-  COMP$13,
+  COMP$12,
   ListMd,
   ({
     node,
@@ -15811,7 +15810,7 @@ function PositionedContainer({
     }
   );
 }
-const COMP$12 = "PositionedContainer";
+const COMP$11 = "PositionedContainer";
 const PositionedContainerMd = createMetadata({
   status: "deprecated",
   description: "(**OBSOLETE**) This component was created for the ChatEngine app.",
@@ -15821,7 +15820,7 @@ const PositionedContainerMd = createMetadata({
   themeVars: parseScssVar(styles$O.themeVars)
 });
 const positionedContainerComponentRenderer = createComponentRenderer(
-  COMP$12,
+  COMP$11,
   PositionedContainerMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     return /* @__PURE__ */ jsx(
@@ -15857,7 +15856,7 @@ function ChangeListener({ listenTo, onChange, throttleWaitInMs = defaultProps$J.
   }, [listenTo, throttledOnChange, prevValue]);
   return null;
 }
-const COMP$11 = "ChangeListener";
+const COMP$10 = "ChangeListener";
 const ChangeListenerMd = createMetadata({
   status: "stable",
   description: "`ChangeListener` is an invisible component that watches for changes in values and triggers actions in response. It's essential for creating reactive behavior when you need to respond to data changes, state updates, or component property modifications outside of normal event handlers.",
@@ -15873,11 +15872,11 @@ const ChangeListenerMd = createMetadata({
     }
   },
   events: {
-    didChange: dDidChange(COMP$11)
+    didChange: dDidChange(COMP$10)
   }
 });
 const changeListenerComponentRenderer = createComponentRenderer(
-  COMP$11,
+  COMP$10,
   ChangeListenerMd,
   ({ node, lookupEventHandler, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -17580,11 +17579,11 @@ const TextBox = forwardRef(function TextBox2({
   );
 });
 const themeVars$q = `'{"Input:borderRadius-FileInput--focus": "var(--xmlui-borderRadius-FileInput--focus)", "Input:borderColor-FileInput--focus": "var(--xmlui-borderColor-FileInput--focus)", "Input:backgroundColor-FileInput--focus": "var(--xmlui-backgroundColor-FileInput--focus)", "Input:boxShadow-FileInput--focus": "var(--xmlui-boxShadow-FileInput--focus)", "Input:textColor-FileInput--focus": "var(--xmlui-textColor-FileInput--focus)", "Input:outlineWidth-FileInput--focus": "var(--xmlui-outlineWidth-FileInput--focus)", "Input:outlineColor-FileInput--focus": "var(--xmlui-outlineColor-FileInput--focus)", "Input:outlineStyle-FileInput--focus": "var(--xmlui-outlineStyle-FileInput--focus)", "Input:outlineOffset-FileInput--focus": "var(--xmlui-outlineOffset-FileInput--focus)"}'`;
-const container = "_container_wjqmf_14";
-const buttonStart = "_buttonStart_wjqmf_22";
-const buttonEnd = "_buttonEnd_wjqmf_25";
-const textBoxWrapper = "_textBoxWrapper_wjqmf_28";
-const button$1 = "_button_wjqmf_22";
+const container = "_container_fnmi1_14";
+const buttonStart = "_buttonStart_fnmi1_22";
+const buttonEnd = "_buttonEnd_fnmi1_25";
+const textBoxWrapper = "_textBoxWrapper_fnmi1_28";
+const button$1 = "_button_fnmi1_22";
 const styles$L = {
   themeVars: themeVars$q,
   container,
@@ -17655,8 +17654,15 @@ const FileInput = ({
   useEffect(() => {
     updateState({ value: _initialValue }, { initial: true });
   }, [_initialValue, updateState]);
-  const handleOnBlur = useCallback(() => {
-    onBlur == null ? void 0 : onBlur();
+  const handleOnFocus = useCallback((e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      onFocus == null ? void 0 : onFocus();
+    }
+  }, [onFocus]);
+  const handleOnBlur = useCallback((e) => {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      onBlur == null ? void 0 : onBlur();
+    }
   }, [onBlur]);
   const focus = useCallback(() => {
     var _a2;
@@ -17679,9 +17685,6 @@ const FileInput = ({
     noDragEventsBubbling: true,
     useFsAccessApi: directory === false
   });
-  const handleOnFocus = useCallback(() => {
-    onFocus == null ? void 0 : onFocus();
-  }, [onFocus]);
   const doOpen = useEvent(() => {
     open();
   });
@@ -17702,8 +17705,6 @@ const FileInput = ({
       labelBreak: labelBreak2,
       required: required2,
       enabled: enabled2,
-      onFocus,
-      onBlur,
       style: style2,
       className,
       isInputTemplateUsed: true,
@@ -17714,6 +17715,9 @@ const FileInput = ({
             [styles$L.buttonStart]: buttonPosition === "start",
             [styles$L.buttonEnd]: buttonPosition === "end"
           }),
+          onFocus: handleOnFocus,
+          onBlur: handleOnBlur,
+          tabIndex: -1,
           children: [
             /* @__PURE__ */ jsxs(
               "button",
@@ -17721,8 +17725,6 @@ const FileInput = ({
                 id,
                 ...getRootProps({
                   tabIndex: 0,
-                  onFocus: handleOnFocus,
-                  onBlur: handleOnBlur,
                   disabled: !enabled2,
                   className: styles$L.textBoxWrapper,
                   onClick: open,
@@ -18373,41 +18375,41 @@ function useLongPress(elementRef, action2, delay2 = 500) {
   }, [elementRef, action2, delay2]);
 }
 const themeVars$o = `'{"padding-item-Select": "var(--xmlui-padding-item-Select)", "paddingHorizontal-item-Select": "var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select))", "paddingVertical-item-Select": "var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select))", "paddingLeft-item-Select": "var(--xmlui-paddingLeft-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingRight-item-Select": "var(--xmlui-paddingRight-item-Select, var(--xmlui-paddingHorizontal-item-Select, var(--xmlui-padding-item-Select)))", "paddingTop-item-Select": "var(--xmlui-paddingTop-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "paddingBottom-item-Select": "var(--xmlui-paddingBottom-item-Select, var(--xmlui-paddingVertical-item-Select, var(--xmlui-padding-item-Select)))", "padding-Select": "var(--xmlui-padding-Select)", "paddingHorizontal-Select": "var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select))", "paddingVertical-Select": "var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select))", "paddingLeft-Select": "var(--xmlui-paddingLeft-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingRight-Select": "var(--xmlui-paddingRight-Select, var(--xmlui-paddingHorizontal-Select, var(--xmlui-padding-Select)))", "paddingTop-Select": "var(--xmlui-paddingTop-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "paddingBottom-Select": "var(--xmlui-paddingBottom-Select, var(--xmlui-paddingVertical-Select, var(--xmlui-padding-Select)))", "Input:fontSize-Select-default": "var(--xmlui-fontSize-Select-default)", "Input:textColor-placeholder-Select-default": "var(--xmlui-textColor-placeholder-Select-default)", "Input:textColor-Select-default": "var(--xmlui-textColor-Select-default)", "Input:fontSize-Select-error": "var(--xmlui-fontSize-Select-error)", "Input:textColor-placeholder-Select-error": "var(--xmlui-textColor-placeholder-Select-error)", "Input:textColor-Select-error": "var(--xmlui-textColor-Select-error)", "Input:fontSize-Select-warning": "var(--xmlui-fontSize-Select-warning)", "Input:textColor-placeholder-Select-warning": "var(--xmlui-textColor-placeholder-Select-warning)", "Input:textColor-Select-warning": "var(--xmlui-textColor-Select-warning)", "Input:fontSize-Select-success": "var(--xmlui-fontSize-Select-success)", "Input:textColor-placeholder-Select-success": "var(--xmlui-textColor-placeholder-Select-success)", "Input:textColor-Select-success": "var(--xmlui-textColor-Select-success)", "Input:borderRadius-Select-default": "var(--xmlui-borderRadius-Select-default)", "Input:borderColor-Select-default": "var(--xmlui-borderColor-Select-default)", "Input:borderWidth-Select-default": "var(--xmlui-borderWidth-Select-default)", "Input:borderStyle-Select-default": "var(--xmlui-borderStyle-Select-default)", "Input:backgroundColor-Select-default": "var(--xmlui-backgroundColor-Select-default)", "Input:boxShadow-Select-default": "var(--xmlui-boxShadow-Select-default)", "Input:borderColor-Select-default--hover": "var(--xmlui-borderColor-Select-default--hover)", "Input:backgroundColor-Select-default--hover": "var(--xmlui-backgroundColor-Select-default--hover)", "Input:boxShadow-Select-default--hover": "var(--xmlui-boxShadow-Select-default--hover)", "Input:textColor-Select-default--hover": "var(--xmlui-textColor-Select-default--hover)", "Input:outlineWidth-Select-default--focus": "var(--xmlui-outlineWidth-Select-default--focus)", "Input:outlineColor-Select-default--focus": "var(--xmlui-outlineColor-Select-default--focus)", "Input:outlineStyle-Select-default--focus": "var(--xmlui-outlineStyle-Select-default--focus)", "Input:outlineOffset-Select-default--focus": "var(--xmlui-outlineOffset-Select-default--focus)", "Input:fontSize-placeholder-Select-default": "var(--xmlui-fontSize-placeholder-Select-default)", "Input:borderRadius-Select-error": "var(--xmlui-borderRadius-Select-error)", "Input:borderColor-Select-error": "var(--xmlui-borderColor-Select-error)", "Input:borderWidth-Select-error": "var(--xmlui-borderWidth-Select-error)", "Input:borderStyle-Select-error": "var(--xmlui-borderStyle-Select-error)", "Input:backgroundColor-Select-error": "var(--xmlui-backgroundColor-Select-error)", "Input:boxShadow-Select-error": "var(--xmlui-boxShadow-Select-error)", "Input:borderColor-Select-error--hover": "var(--xmlui-borderColor-Select-error--hover)", "Input:backgroundColor-Select-error--hover": "var(--xmlui-backgroundColor-Select-error--hover)", "Input:boxShadow-Select-error--hover": "var(--xmlui-boxShadow-Select-error--hover)", "Input:textColor-Select-error--hover": "var(--xmlui-textColor-Select-error--hover)", "Input:outlineWidth-Select-error--focus": "var(--xmlui-outlineWidth-Select-error--focus)", "Input:outlineColor-Select-error--focus": "var(--xmlui-outlineColor-Select-error--focus)", "Input:outlineStyle-Select-error--focus": "var(--xmlui-outlineStyle-Select-error--focus)", "Input:outlineOffset-Select-error--focus": "var(--xmlui-outlineOffset-Select-error--focus)", "Input:fontSize-placeholder-Select-error": "var(--xmlui-fontSize-placeholder-Select-error)", "Input:borderRadius-Select-warning": "var(--xmlui-borderRadius-Select-warning)", "Input:borderColor-Select-warning": "var(--xmlui-borderColor-Select-warning)", "Input:borderWidth-Select-warning": "var(--xmlui-borderWidth-Select-warning)", "Input:borderStyle-Select-warning": "var(--xmlui-borderStyle-Select-warning)", "Input:backgroundColor-Select-warning": "var(--xmlui-backgroundColor-Select-warning)", "Input:boxShadow-Select-warning": "var(--xmlui-boxShadow-Select-warning)", "Input:borderColor-Select-warning--hover": "var(--xmlui-borderColor-Select-warning--hover)", "Input:backgroundColor-Select-warning--hover": "var(--xmlui-backgroundColor-Select-warning--hover)", "Input:boxShadow-Select-warning--hover": "var(--xmlui-boxShadow-Select-warning--hover)", "Input:textColor-Select-warning--hover": "var(--xmlui-textColor-Select-warning--hover)", "Input:outlineWidth-Select-warning--focus": "var(--xmlui-outlineWidth-Select-warning--focus)", "Input:outlineColor-Select-warning--focus": "var(--xmlui-outlineColor-Select-warning--focus)", "Input:outlineStyle-Select-warning--focus": "var(--xmlui-outlineStyle-Select-warning--focus)", "Input:outlineOffset-Select-warning--focus": "var(--xmlui-outlineOffset-Select-warning--focus)", "Input:fontSize-placeholder-Select-warning": "var(--xmlui-fontSize-placeholder-Select-warning)", "Input:borderRadius-Select-success": "var(--xmlui-borderRadius-Select-success)", "Input:borderColor-Select-success": "var(--xmlui-borderColor-Select-success)", "Input:borderWidth-Select-success": "var(--xmlui-borderWidth-Select-success)", "Input:borderStyle-Select-success": "var(--xmlui-borderStyle-Select-success)", "Input:backgroundColor-Select-success": "var(--xmlui-backgroundColor-Select-success)", "Input:boxShadow-Select-success": "var(--xmlui-boxShadow-Select-success)", "Input:borderColor-Select-success--hover": "var(--xmlui-borderColor-Select-success--hover)", "Input:backgroundColor-Select-success--hover": "var(--xmlui-backgroundColor-Select-success--hover)", "Input:boxShadow-Select-success--hover": "var(--xmlui-boxShadow-Select-success--hover)", "Input:textColor-Select-success--hover": "var(--xmlui-textColor-Select-success--hover)", "Input:outlineWidth-Select-success--focus": "var(--xmlui-outlineWidth-Select-success--focus)", "Input:outlineColor-Select-success--focus": "var(--xmlui-outlineColor-Select-success--focus)", "Input:outlineStyle-Select-success--focus": "var(--xmlui-outlineStyle-Select-success--focus)", "Input:outlineOffset-Select-success--focus": "var(--xmlui-outlineOffset-Select-success--focus)", "Input:fontSize-placeholder-Select-success": "var(--xmlui-fontSize-placeholder-Select-success)", "opacity-Select--disabled": "var(--xmlui-opacity-Select--disabled)", "Input:backgroundColor-Select--disabled": "var(--xmlui-backgroundColor-Select--disabled)", "Input:textColor-Select--disabled": "var(--xmlui-textColor-Select--disabled)", "Input:borderColor-Select--disabled": "var(--xmlui-borderColor-Select--disabled)", "paddingVertical-Select-badge": "var(--xmlui-paddingVertical-Select-badge)", "paddingHorizontal-Select-badge": "var(--xmlui-paddingHorizontal-Select-badge)", "borderRadius-Select-badge": "var(--xmlui-borderRadius-Select-badge)", "Input:fontSize-Select-badge": "var(--xmlui-fontSize-Select-badge)", "Input:backgroundColor-Select-badge": "var(--xmlui-backgroundColor-Select-badge)", "Input:textColor-Select-badge": "var(--xmlui-textColor-Select-badge)", "Input:backgroundColor-Select-badge--hover": "var(--xmlui-backgroundColor-Select-badge--hover)", "Input:textColor-Select-badge--hover": "var(--xmlui-textColor-Select-badge--hover)", "Input:backgroundColor-Select-badge--active": "var(--xmlui-backgroundColor-Select-badge--active)", "Input:textColor-Select-badge--active": "var(--xmlui-textColor-Select-badge--active)", "Input:textColor-placeholder-Select": "var(--xmlui-textColor-placeholder-Select)", "Input:backgroundColor-menu-Select": "var(--xmlui-backgroundColor-menu-Select)", "Input:borderRadius-menu-Select": "var(--xmlui-borderRadius-menu-Select)", "Input:boxShadow-menu-Select": "var(--xmlui-boxShadow-menu-Select)", "Input:borderWidth-menu-Select": "var(--xmlui-borderWidth-menu-Select)", "Input:borderColor-menu-Select": "var(--xmlui-borderColor-menu-Select)", "backgroundColor-item-Select": "var(--xmlui-backgroundColor-item-Select)", "backgroundColor-item-Select--hover": "var(--xmlui-backgroundColor-item-Select--hover)", "opacity-text-item-Select--disabled": "var(--xmlui-opacity-text-item-Select--disabled)", "fontSize-Select": "var(--xmlui-fontSize-Select)", "backgroundColor-item-Select--active": "var(--xmlui-backgroundColor-item-Select--active)", "textColor-indicator-Select": "var(--xmlui-textColor-indicator-Select)"}'`;
-const selectValue = "_selectValue_hlbr6_14";
-const error$9 = "_error_hlbr6_22";
-const warning$a = "_warning_hlbr6_30";
-const valid$9 = "_valid_hlbr6_38";
-const selectTrigger = "_selectTrigger_hlbr6_46";
-const badgeListContainer = "_badgeListContainer_hlbr6_176";
-const badgeList$1 = "_badgeList_hlbr6_176";
-const badge$1 = "_badge_hlbr6_176";
-const actions$1 = "_actions_hlbr6_213";
-const placeholder$1 = "_placeholder_hlbr6_218";
-const emptyList = "_emptyList_hlbr6_222";
-const selectScrollUpButton = "_selectScrollUpButton_hlbr6_231";
-const selectScrollDownButton = "_selectScrollDownButton_hlbr6_239";
-const command$1 = "_command_hlbr6_247";
-const commandInputContainer = "_commandInputContainer_hlbr6_256";
-const commandInput$1 = "_commandInput_hlbr6_256";
-const commandList$1 = "_commandList_hlbr6_279";
-const selectContent = "_selectContent_hlbr6_283";
-const fadeIn = "_fadeIn_hlbr6_1";
-const zoomIn = "_zoomIn_hlbr6_1";
-const fadeOut = "_fadeOut_hlbr6_1";
-const zoomOut = "_zoomOut_hlbr6_1";
-const slideInFromTop = "_slideInFromTop_hlbr6_1";
-const slideInFromRight = "_slideInFromRight_hlbr6_1";
-const slideInFromLeft = "_slideInFromLeft_hlbr6_1";
-const slideInFromBottom = "_slideInFromBottom_hlbr6_1";
-const multiComboboxOption = "_multiComboboxOption_hlbr6_324";
-const multiComboboxOptionContent = "_multiComboboxOptionContent_hlbr6_324";
-const selectItem = "_selectItem_hlbr6_348";
-const selectItemContent = "_selectItemContent_hlbr6_363";
-const selectItemIndicator = "_selectItemIndicator_hlbr6_382";
-const selectViewport = "_selectViewport_hlbr6_392";
-const selectEmpty = "_selectEmpty_hlbr6_397";
-const loading = "_loading_hlbr6_407";
-const srOnly = "_srOnly_hlbr6_410";
+const selectValue = "_selectValue_1gf24_14";
+const error$9 = "_error_1gf24_22";
+const warning$a = "_warning_1gf24_30";
+const valid$9 = "_valid_1gf24_38";
+const selectTrigger = "_selectTrigger_1gf24_46";
+const badgeListContainer = "_badgeListContainer_1gf24_176";
+const badgeList$1 = "_badgeList_1gf24_176";
+const badge$1 = "_badge_1gf24_176";
+const actions$1 = "_actions_1gf24_213";
+const placeholder$1 = "_placeholder_1gf24_218";
+const emptyList = "_emptyList_1gf24_222";
+const selectScrollUpButton = "_selectScrollUpButton_1gf24_231";
+const selectScrollDownButton = "_selectScrollDownButton_1gf24_239";
+const command$1 = "_command_1gf24_247";
+const commandInputContainer = "_commandInputContainer_1gf24_256";
+const commandInput$1 = "_commandInput_1gf24_256";
+const commandList$1 = "_commandList_1gf24_279";
+const selectContent = "_selectContent_1gf24_283";
+const fadeIn = "_fadeIn_1gf24_1";
+const zoomIn = "_zoomIn_1gf24_1";
+const fadeOut = "_fadeOut_1gf24_1";
+const zoomOut = "_zoomOut_1gf24_1";
+const slideInFromTop = "_slideInFromTop_1gf24_1";
+const slideInFromRight = "_slideInFromRight_1gf24_1";
+const slideInFromLeft = "_slideInFromLeft_1gf24_1";
+const slideInFromBottom = "_slideInFromBottom_1gf24_1";
+const multiComboboxOption = "_multiComboboxOption_1gf24_324";
+const multiComboboxOptionContent = "_multiComboboxOptionContent_1gf24_324";
+const selectItem = "_selectItem_1gf24_348";
+const selectItemContent = "_selectItemContent_1gf24_363";
+const selectItemIndicator = "_selectItemIndicator_1gf24_382";
+const selectViewport = "_selectViewport_1gf24_392";
+const selectEmpty = "_selectEmpty_1gf24_397";
+const loading = "_loading_1gf24_407";
+const srOnly = "_srOnly_1gf24_410";
 const styles$J = {
   themeVars: themeVars$o,
   selectValue,
@@ -19063,15 +19065,6 @@ const defaultProps$D = {
   checked: false,
   value: ""
 };
-const RadioItem = ({
-  checked = defaultProps$D.checked,
-  style: style2,
-  value = defaultProps$D.value,
-  onDidChange = noop$1
-}) => {
-  const id = useId();
-  return /* @__PURE__ */ jsx("div", { className: styles$I.radioOptionContainer, style: style2, children: /* @__PURE__ */ jsx(UnwrappedRadioItem, { id, checked, value, onDidChange }) }, id);
-};
 const UnwrappedRadioItem = ({
   id,
   checked = defaultProps$D.checked,
@@ -19147,6 +19140,19 @@ const RadioGroup = forwardRef(function RadioGroup2({
       }
     }
   }, [autofocus]);
+  const focusActiveOption = useCallback(() => {
+    if (radioGroupRef.current) {
+      const selectedRadio = radioGroupRef.current.querySelector('[role="radio"][aria-checked="true"]');
+      if (selectedRadio) {
+        selectedRadio.focus();
+        return;
+      }
+      const firstRadio = radioGroupRef.current.querySelector('[role="radio"]');
+      if (firstRadio) {
+        firstRadio.focus();
+      }
+    }
+  }, []);
   const updateValue = useCallback(
     (value2) => {
       updateState({ value: value2 });
@@ -19206,6 +19212,7 @@ const RadioGroup = forwardRef(function RadioGroup2({
       onBlur,
       style: style2,
       className,
+      onLabelClick: focusActiveOption,
       children: /* @__PURE__ */ jsx(
         InnerRadioGroup.Root,
         {
@@ -19796,9 +19803,9 @@ const parseDate = (dateString) => {
   }
   return void 0;
 };
-const themeVars$l = `'{"gap-Form": "var(--xmlui-gap-Form)", "gap-buttonRow-Form": "var(--xmlui-gap-buttonRow-Form)"}'`;
-const wrapper$a = "_wrapper_1ekne_14";
-const buttonRow = "_buttonRow_1ekne_19";
+const themeVars$l = `'{"gap-Form": "var(--xmlui-gap-Form)", "gap-buttonRow-Form": "var(--xmlui-gap-buttonRow-Form)", "marginTop-buttonRow-Form": "var(--xmlui-marginTop-buttonRow-Form)"}'`;
+const wrapper$a = "_wrapper_1frqo_14";
+const buttonRow = "_buttonRow_1frqo_19";
 const styles$G = {
   themeVars: themeVars$l,
   wrapper: wrapper$a,
@@ -20076,7 +20083,8 @@ const defaultProps$z = {
   itemLabelPosition: "top",
   itemLabelBreak: true,
   keepModalOpenOnSubmit: false,
-  swapCancelAndSave: false
+  swapCancelAndSave: false,
+  hideButtonRowUntilDirty: false
 };
 function cleanUpSubject(subject) {
   return Object.entries(subject || {}).reduce(
@@ -20112,6 +20120,7 @@ const Form = forwardRef(function({
   itemLabelWidth,
   itemLabelPosition = defaultProps$z.itemLabelPosition,
   keepModalOpenOnSubmit = defaultProps$z.keepModalOpenOnSubmit,
+  hideButtonRowUntilDirty,
   ...rest
 }, ref) {
   const formRef = useRef(null);
@@ -20119,6 +20128,14 @@ const Form = forwardRef(function({
   const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = useState(false);
   const requestModalFormClose = useModalFormClose();
   const isEnabled2 = enabled2 && !formState.submitInProgress;
+  const isDirty = useMemo(() => {
+    return Object.entries(formState.interactionFlags).some(([key, flags]) => {
+      if (flags.isDirty) {
+        return true;
+      }
+      return false;
+    });
+  }, [formState.interactionFlags]);
   const formContextValue = useMemo(() => {
     return {
       itemLabelBreak,
@@ -20258,6 +20275,10 @@ const Form = forwardRef(function({
       update: updateData
     });
   }, [doReset, updateData, registerComponentApi]);
+  let safeButtonRow = /* @__PURE__ */ jsx(Fragment, { children: buttonRow2 || /* @__PURE__ */ jsxs("div", { className: styles$G.buttonRow, children: [
+    swapCancelAndSave && [submitButton, cancelButton],
+    !swapCancelAndSave && [cancelButton, submitButton]
+  ] }) });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ createElement(
       "form",
@@ -20273,10 +20294,7 @@ const Form = forwardRef(function({
       },
       /* @__PURE__ */ jsx(ValidationSummary, { generalValidationResults: formState.generalValidationResults }),
       /* @__PURE__ */ jsx(FormContext.Provider, { value: formContextValue, children }),
-      buttonRow2 || /* @__PURE__ */ jsxs("div", { className: styles$G.buttonRow, children: [
-        swapCancelAndSave && [submitButton, cancelButton],
-        !swapCancelAndSave && [cancelButton, submitButton]
-      ] })
+      (!hideButtonRowUntilDirty || isDirty) && safeButtonRow
     ),
     confirmSubmitModalVisible && /* @__PURE__ */ jsx(
       ModalDialog,
@@ -20360,6 +20378,7 @@ function FormWithContextVar({
       itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition),
       itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak),
       itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth),
+      hideButtonRowUntilDirty: extractValue.asOptionalBoolean(node.props.hideButtonRowUntilDirty),
       formState,
       dispatch,
       id: node.uid,
@@ -22024,7 +22043,7 @@ function ApiInterceptorProvider({
       return;
     }
     (async () => {
-      const { initMock } = await import("./initMock-BAV9RKui.mjs");
+      const { initMock } = await import("./initMock-B9LtmFJG.mjs");
       const apiInstance2 = await initMock(interceptor);
       setApiInstance(apiInstance2);
       setInitialized(true);
@@ -22041,7 +22060,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-BAV9RKui.mjs")
+              import("./initMock-B9LtmFJG.mjs")
             ]);
             if (interceptor || forceInitialize) {
               const apiInstance2 = await initMock(interceptor || {});
@@ -22078,7 +22097,7 @@ function ApiInterceptorProvider({
         (async () => {
           const [{ createApiInterceptorWorker }, { initMock }] = await Promise.all([
             import("./apiInterceptorWorker-DPgtUtdA.mjs"),
-            import("./initMock-BAV9RKui.mjs")
+            import("./initMock-B9LtmFJG.mjs")
           ]);
           const apiInstance2 = await initMock(interceptor);
           await createApiInterceptorWorker(apiInstance2, parentInterceptorWorker);
@@ -23828,7 +23847,7 @@ function convertTreeDisplayToMarkdown(content2) {
 `;
   }
 }
-const COMP$10 = "Markdown";
+const COMP$$ = "Markdown";
 const MarkdownMd = createMetadata({
   status: "stable",
   description: "`Markdown` renders formatted text using markdown syntax. Use [Text](/working-with-text) for simple, styled text content, and `Markdown` when you need [rich formatting](/working-with-markdown).",
@@ -23895,7 +23914,7 @@ const MarkdownMd = createMetadata({
   }
 });
 const markdownComponentRenderer = createComponentRenderer(
-  COMP$10,
+  COMP$$,
   MarkdownMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     let renderedChildren = "";
@@ -24333,7 +24352,8 @@ const defaultProps$t = {
   initialValue: "#000000",
   value: "#000000",
   enabled: true,
-  validationStatus: "none"
+  validationStatus: "none",
+  debounceDelayInMs: 200
 };
 const ColorPicker = forwardRef(
   ({
@@ -24345,9 +24365,10 @@ const ColorPicker = forwardRef(
     onBlur = noop$1,
     registerComponentApi,
     enabled: enabled2 = defaultProps$t.enabled,
+    readOnly: readOnly2,
     value = defaultProps$t.value,
     autoFocus,
-    tabIndex = -1,
+    tabIndex = 0,
     label: label2,
     labelPosition,
     labelWidth,
@@ -24355,9 +24376,11 @@ const ColorPicker = forwardRef(
     required: required2,
     validationStatus = defaultProps$t.validationStatus,
     initialValue = defaultProps$t.initialValue,
+    debounceDelayInMs = defaultProps$t.debounceDelayInMs,
     ...rest
   }, forwardedRef) => {
     const inputRef = useRef(null);
+    const debounceTimeoutRef = useRef(null);
     const updateValue = useCallback(
       (value2) => {
         updateState({ value: value2 });
@@ -24365,19 +24388,45 @@ const ColorPicker = forwardRef(
       },
       [onDidChange, updateState]
     );
+    const debouncedUpdateValue = useCallback(
+      (value2, immediate = false) => {
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current);
+        }
+        if (immediate) {
+          updateValue(value2);
+        } else {
+          debounceTimeoutRef.current = setTimeout(() => {
+            updateValue(value2);
+          }, debounceDelayInMs);
+        }
+      },
+      [updateValue, debounceDelayInMs]
+    );
     const onInputChange = useCallback(
       (event) => {
-        updateValue(event.target.value);
+        debouncedUpdateValue(event.target.value);
       },
-      [updateValue]
+      [debouncedUpdateValue]
     );
     useEffect(() => {
       updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
+    useEffect(() => {
+      return () => {
+        if (debounceTimeoutRef.current) {
+          clearTimeout(debounceTimeoutRef.current);
+        }
+      };
+    }, []);
     const handleOnFocus = useCallback(() => {
       onFocus == null ? void 0 : onFocus();
     }, [onFocus]);
     const handleOnBlur = useCallback(() => {
+      if (debounceTimeoutRef.current) {
+        clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
       onBlur == null ? void 0 : onBlur();
     }, [onBlur]);
     const focus = useCallback(() => {
@@ -24385,7 +24434,7 @@ const ColorPicker = forwardRef(
       (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
     }, []);
     const setValue = useEvent((newValue) => {
-      updateValue(newValue);
+      debouncedUpdateValue(newValue, true);
     });
     useEffect(() => {
       registerComponentApi == null ? void 0 : registerComponentApi({
@@ -24420,14 +24469,15 @@ const ColorPicker = forwardRef(
             disabled: !enabled2,
             onFocus: handleOnFocus,
             onChange: onInputChange,
+            readOnly: readOnly2,
             autoFocus,
+            tabIndex,
             onBlur: handleOnBlur,
             required: required2,
             type: "color",
             inputMode: "text",
             ref: inputRef,
-            value,
-            tabIndex
+            value
           }
         )
       }
@@ -24933,7 +24983,7 @@ function CustomFormItem({
   }, [bindTo, dispatch, node.children, node.vars, validationResult, value]);
   return /* @__PURE__ */ jsx(Fragment, { children: renderChild2(decoratedMetadata) });
 }
-const COMP$$ = "FormItem";
+const COMP$_ = "FormItem";
 const filteredValidationSeverityValues = validationSeverityValues.filter(
   (value) => value !== "none"
 );
@@ -24948,7 +24998,7 @@ const FormItemMd = createMetadata({
     autoFocus: dAutoFocus(),
     label: dLabel(),
     labelPosition: dLabelPosition(),
-    labelWidth: dLabelWidth(COMP$$),
+    labelWidth: dLabelWidth(COMP$_),
     labelBreak: {
       description: `This boolean value indicates if the label can be split into multiple lines if it would overflow the available label width.`,
       type: "boolean",
@@ -25087,7 +25137,7 @@ const FormItemMd = createMetadata({
   }
 });
 const formItemComponentRenderer = createComponentRenderer(
-  COMP$$,
+  COMP$_,
   FormItemMd,
   ({
     node,
@@ -25198,7 +25248,7 @@ const formItemComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$_ = "TextBox";
+const COMP$Z = "TextBox";
 const TextBoxMd = createMetadata({
   status: "stable",
   description: "`TextBox` captures user text input for forms, search fields, and data entry with support for validation, icons, and formatting hints.",
@@ -25225,8 +25275,8 @@ const TextBoxMd = createMetadata({
     },
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$_),
-    labelBreak: dLabelBreak(COMP$_),
+    labelWidth: dLabelWidth(COMP$Z),
+    labelBreak: dLabelBreak(COMP$Z),
     maxLength: dMaxLength(),
     autoFocus: dAutoFocus(),
     required: dRequired(),
@@ -25262,13 +25312,13 @@ const TextBoxMd = createMetadata({
     }
   },
   events: {
-    gotFocus: dGotFocus(COMP$_),
-    lostFocus: dLostFocus(COMP$_),
-    didChange: dDidChange(COMP$_)
+    gotFocus: dGotFocus(COMP$Z),
+    lostFocus: dLostFocus(COMP$Z),
+    didChange: dDidChange(COMP$Z)
   },
   apis: {
     focus: {
-      description: `This method sets the focus on the \`${COMP$_}\` component.`,
+      description: `This method sets the focus on the \`${COMP$Z}\` component.`,
       signature: "focus(): void"
     },
     value: {
@@ -25276,7 +25326,7 @@ const TextBoxMd = createMetadata({
       signature: "get value(): string | undefined"
     },
     setValue: {
-      description: `This API sets the value of the \`${COMP$_}\`. You can use it to programmatically change the value.`,
+      description: `This API sets the value of the \`${COMP$Z}\`. You can use it to programmatically change the value.`,
       signature: "setValue(value: string): void",
       parameters: {
         value: "The new value to set. If the value is empty, it will clear the input."
@@ -25291,8 +25341,8 @@ const TextBoxMd = createMetadata({
     "backgroundColor-Input--disabled": "$backgroundColor--disabled",
     "borderWidth-Input": "1px",
     "minHeight-Input": "39px",
-    [`paddingHorizontal-${COMP$_}`]: "$space-2",
-    [`paddingVertical-${COMP$_}`]: "$space-2",
+    [`paddingHorizontal-${COMP$Z}`]: "$space-2",
+    [`paddingVertical-${COMP$Z}`]: "$space-2",
     "gap-adornment-Input": "$space-2",
     "borderStyle-Input": "solid",
     "borderColor-Input--disabled": "$borderColor--disabled",
@@ -25351,7 +25401,7 @@ function renderTextBox(className, state, updateState, extractValue, node, lookup
   );
 }
 const textBoxComponentRenderer = createComponentRenderer(
-  COMP$_,
+  COMP$Z,
   TextBoxMd,
   ({
     node,
@@ -25641,8 +25691,9 @@ class RestApiProxy {
       const includeClientTxId = method && method !== "get" && !!transactionId;
       const headersWithoutContentType = { ...this.getHeaders(), ["Content-Type"]: void 0 };
       let url = this.generateFullApiUrl(relativePath, queryParams);
+      const hasBody = body !== void 0;
       const aggregatedHeaders = omitBy(
-        { ...body ? this.getHeaders() : headersWithoutContentType, ...headers },
+        { ...hasBody ? this.getHeaders() : headersWithoutContentType, ...headers },
         isUndefined
       );
       if (includeClientTxId) {
@@ -25655,7 +25706,7 @@ class RestApiProxy {
         }
       }
       let requestBody;
-      if (rawBody) {
+      if (rawBody !== void 0) {
         requestBody = rawBody;
       } else {
         if (payloadType === "multipart-form" || payloadType === "form") {
@@ -25671,7 +25722,7 @@ class RestApiProxy {
             aggregatedHeaders["Content-Type"] = "application/x-www-form-urlencoded";
           }
         } else {
-          requestBody = body ? JSON.stringify(body) : void 0;
+          requestBody = hasBody ? JSON.stringify(body) : void 0;
         }
       }
       const options2 = {
@@ -25894,7 +25945,7 @@ function RealTimeAdapter({ url, onEvent }) {
   }, [appContext, onEvent, url]);
   return null;
 }
-const COMP$Z = "RealTimeAdapter";
+const COMP$Y = "RealTimeAdapter";
 const RealTimeAdapterMd = createMetadata({
   status: "experimental",
   description: "`RealTimeAdapter` is a non-visual component that listens to real-time events.",
@@ -25909,7 +25960,7 @@ const RealTimeAdapterMd = createMetadata({
   }
 });
 const realTimeAdapterComponentRenderer = createComponentRenderer(
-  COMP$Z,
+  COMP$Y,
   RealTimeAdapterMd,
   ({ node, lookupEventHandler, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -25921,7 +25972,7 @@ const realTimeAdapterComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$Y = "Form";
+const COMP$X = "Form";
 const FormMd = createMetadata({
   status: "stable",
   description: "`Form` provides a structured container for collecting and validating user input, with built-in data binding, validation, and submission handling. It automatically manages form state and provides context for nested form controls to work together.",
@@ -25972,6 +26023,11 @@ const FormMd = createMetadata({
       type: "boolean",
       defaultValue: defaultProps$z.swapCancelAndSave
     },
+    hideButtonRowUntilDirty: {
+      description: `This property hides the button row until the form data is modified (dirty).`,
+      type: "boolean",
+      defaultValue: defaultProps$z.hideButtonRowUntilDirty
+    },
     submitUrl: d(`URL to submit the form data.`),
     submitMethod: {
       description: "This property sets the HTTP method to use when submitting the form data. If not defined, `put` is used when the form has initial data; otherwise, `post`."
@@ -26023,11 +26079,12 @@ const FormMd = createMetadata({
     "textColor-ValidationDisplay-error": "$color-error",
     "textColor-ValidationDisplay-warning": "$color-warning",
     "textColor-ValidationDisplay-info": "$color-info",
-    "textColor-ValidationDisplay-valid": "$color-valid"
+    "textColor-ValidationDisplay-valid": "$color-valid",
+    "marginTop-buttonRow-Form": "$space-4"
   }
 });
 const formComponentRenderer = createComponentRenderer(
-  COMP$Y,
+  COMP$X,
   FormMd,
   ({ node, renderChild: renderChild2, extractValue, className, lookupEventHandler, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
@@ -26078,7 +26135,7 @@ const EmojiSelector = forwardRef(
     }
   )
 );
-const COMP$X = "EmojiSelector";
+const COMP$W = "EmojiSelector";
 const EmojiSelectorMd = createMetadata({
   status: "experimental",
   description: "`EmojiSelector` enables users to browse, search and select emojis from their system's native emoji set.",
@@ -26093,7 +26150,7 @@ const EmojiSelectorMd = createMetadata({
   }
 });
 const emojiSelectorRenderer = createComponentRenderer(
-  COMP$X,
+  COMP$W,
   EmojiSelectorMd,
   ({ node, lookupEventHandler, extractValue }) => {
     const onActionSelect = lookupEventHandler("select");
@@ -26108,7 +26165,7 @@ const emojiSelectorRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$W = "NumberBox";
+const COMP$V = "NumberBox";
 const NumberBoxMd = createMetadata({
   status: "stable",
   description: "`NumberBox` provides a specialized input field for numeric values with built-in validation, spinner buttons, and flexible formatting options. It supports both integer and floating-point numbers, handles empty states as null values, and integrates seamlessly with form validation.",
@@ -26131,8 +26188,8 @@ const NumberBoxMd = createMetadata({
     initialValue: dInitialValue(),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$W),
-    labelBreak: dLabelBreak(COMP$W),
+    labelWidth: dLabelWidth(COMP$V),
+    labelBreak: dLabelBreak(COMP$V),
     maxLength: dMaxLength(),
     autoFocus: dAutoFocus(),
     required: dRequired(),
@@ -26152,10 +26209,10 @@ const NumberBoxMd = createMetadata({
       defaultValue: defaultProps$G.hasSpinBox
     },
     spinnerUpIcon: d(
-      `Allows setting an alternate icon displayed in the ${COMP$W} spinner for incrementing values. You can change the default icon for all ${COMP$W} instances with the "icon.spinnerUp:NumberBox" declaration in the app configuration file.`
+      `Allows setting an alternate icon displayed in the ${COMP$V} spinner for incrementing values. You can change the default icon for all ${COMP$V} instances with the "icon.spinnerUp:NumberBox" declaration in the app configuration file.`
     ),
     spinnerDownIcon: d(
-      `Allows setting an alternate icon displayed in the ${COMP$W} spinner for decrementing values. You can change the default icon for all ${COMP$W} instances with the "icon.spinnerDown:NumberBox" declaration in the app configuration file.`
+      `Allows setting an alternate icon displayed in the ${COMP$V} spinner for decrementing values. You can change the default icon for all ${COMP$V} instances with the "icon.spinnerDown:NumberBox" declaration in the app configuration file.`
     ),
     step: {
       description: `This prop governs how big the step when clicking on the spinner of the field.`,
@@ -26182,32 +26239,32 @@ const NumberBoxMd = createMetadata({
     }
   },
   events: {
-    gotFocus: dGotFocus(COMP$W),
-    lostFocus: dLostFocus(COMP$W),
-    didChange: dDidChange(COMP$W)
+    gotFocus: dGotFocus(COMP$V),
+    lostFocus: dLostFocus(COMP$V),
+    didChange: dDidChange(COMP$V)
   },
   apis: {
     focus: {
-      description: `This API focuses the input field of the \`${COMP$W}\`. You can use it to programmatically focus the field.`,
+      description: `This API focuses the input field of the \`${COMP$V}\`. You can use it to programmatically focus the field.`,
       signature: "focus(): void"
     },
     value: {
-      description: `This API retrieves the current value of the \`${COMP$W}\`. You can use it to get the value programmatically.`,
+      description: `This API retrieves the current value of the \`${COMP$V}\`. You can use it to get the value programmatically.`,
       signature: "get value(): number | undefined"
     },
     setValue: {
-      description: `This API sets the value of the \`${COMP$W}\`. You can use it to programmatically change the value.`,
+      description: `This API sets the value of the \`${COMP$V}\`. You can use it to programmatically change the value.`,
       signature: "setValue(value: number | undefined): void"
     }
   },
   themeVars: parseScssVar(styles$K.themeVars),
   defaultThemeVars: {
-    [`paddingVertical-${COMP$W}`]: "$space-2",
-    [`paddingHorizontal-${COMP$W}`]: "$space-2"
+    [`paddingVertical-${COMP$V}`]: "$space-2",
+    [`paddingHorizontal-${COMP$V}`]: "$space-2"
   }
 });
 const numberBoxComponentRenderer = createComponentRenderer(
-  COMP$W,
+  COMP$V,
   NumberBoxMd,
   ({
     node,
@@ -26268,7 +26325,7 @@ const HoverCardComponent = ({ triggerTemplate, children }) => {
     /* @__PURE__ */ jsx(HoverCard.Portal, { container: root2, children: /* @__PURE__ */ jsx(HoverCard.Content, { side: "bottom", sideOffset: 5, children }) })
   ] });
 };
-const COMP$V = "HoverCard";
+const COMP$U = "HoverCard";
 const HoverCardMd = createMetadata({
   status: "deprecated",
   description: "(**OBSOLETE**) This component displays some content when its parent component is hovered.",
@@ -26277,13 +26334,13 @@ const HoverCardMd = createMetadata({
   }
 });
 const hoverCardComponentRenderer = createComponentRenderer(
-  COMP$V,
+  COMP$U,
   HoverCardMd,
   ({ node, extractValue, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(HoverCardComponent, { triggerTemplate: renderChild2(extractValue(node.props.triggerTemplate)), children: renderChild2(node.children) });
   }
 );
-const COMP$U = "App";
+const COMP$T = "App";
 const AppMd = createMetadata({
   status: "stable",
   description: "The `App` component is the root container that defines your application's overall structure and layout. It provides a complete UI framework with built-in navigation, header, footer, and content areas that work together seamlessly.",
@@ -26342,10 +26399,10 @@ const AppMd = createMetadata({
   },
   events: {
     ready: {
-      description: `This event fires when the \`${COMP$U}\` component finishes rendering on the page.`
+      description: `This event fires when the \`${COMP$T}\` component finishes rendering on the page.`
     },
     messageReceived: {
-      description: `This event fires when the \`${COMP$U}\` component receives a message from another window or iframe via the window.postMessage API.`
+      description: `This event fires when the \`${COMP$T}\` component receives a message from another window or iframe via the window.postMessage API.`
     }
   },
   themeVars: { ...parseScssVar(styles$1c.themeVars), ...parseScssVar(drawerStyles.themeVars) },
@@ -26358,11 +26415,11 @@ const AppMd = createMetadata({
   },
   defaultThemeVars: {
     "maxWidth-Drawer": "100%",
-    [`width-navPanel-${COMP$U}`]: "$space-64",
-    [`backgroundColor-navPanel-${COMP$U}`]: "$backgroundColor",
-    [`maxWidth-content-${COMP$U}`]: "$maxWidth-content",
-    [`boxShadow-header-${COMP$U}`]: "none",
-    [`boxShadow-navPanel-${COMP$U}`]: "$boxShadow-spread",
+    [`width-navPanel-${COMP$T}`]: "$space-64",
+    [`backgroundColor-navPanel-${COMP$T}`]: "$backgroundColor",
+    [`maxWidth-content-${COMP$T}`]: "$maxWidth-content",
+    [`boxShadow-header-${COMP$T}`]: "none",
+    [`boxShadow-navPanel-${COMP$T}`]: "$boxShadow-spread",
     [`scroll-padding-block-Pages`]: "$space-4",
     [`backgroundColor-content-App`]: "$backgroundColor",
     light: {
@@ -26718,7 +26775,7 @@ function PageIndexer({
   return /* @__PURE__ */ jsx("div", { ref: contentRef, children: renderChild2(Page.children) });
 }
 const appRenderer = createComponentRenderer(
-  COMP$U,
+  COMP$T,
   AppMd,
   ({ node, extractValue, renderChild: renderChild2, className, lookupEventHandler }) => {
     return /* @__PURE__ */ jsx(
@@ -26829,7 +26886,7 @@ function extractNavPanelFromPages(Pages2, NavPanel3, processedNavRef, extractVal
   });
   return extraNavs;
 }
-const COMP$T = "NavPanel";
+const COMP$S = "NavPanel";
 const NavPanelMd = createMetadata({
   status: "stable",
   description: "`NavPanel` defines the navigation structure within an App, serving as a container for NavLink and NavGroup components that create your application's primary navigation menu. Its appearance and behavior automatically adapt based on the App's layout configuration.",
@@ -26846,15 +26903,15 @@ const NavPanelMd = createMetadata({
   themeVars: parseScssVar(styles$19.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`horizontalAlignment-logo-${COMP$T}`]: "center",
-    [`backgroundColor-${COMP$T}`]: "$backgroundColor",
-    [`backgroundColor-${COMP$T}-horizontal`]: "$backgroundColor-AppHeader",
-    [`border-${COMP$T}`]: "0px solid $borderColor",
-    [`paddingHorizontal-${COMP$T}`]: "0",
-    [`paddingVertical-logo-${COMP$T}`]: "$space-4",
-    [`paddingHorizontal-logo-${COMP$T}`]: "$space-4",
-    [`marginBottom-logo-${COMP$T}`]: "$space-4",
-    [`boxShadow-${COMP$T}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)"
+    [`horizontalAlignment-logo-${COMP$S}`]: "center",
+    [`backgroundColor-${COMP$S}`]: "$backgroundColor",
+    [`backgroundColor-${COMP$S}-horizontal`]: "$backgroundColor-AppHeader",
+    [`border-${COMP$S}`]: "0px solid $borderColor",
+    [`paddingHorizontal-${COMP$S}`]: "0",
+    [`paddingVertical-logo-${COMP$S}`]: "$space-4",
+    [`paddingHorizontal-logo-${COMP$S}`]: "$space-4",
+    [`marginBottom-logo-${COMP$S}`]: "$space-4",
+    [`boxShadow-${COMP$S}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)"
   }
 });
 function NavPanelWithBuiltNavHierarchy({
@@ -26880,7 +26937,7 @@ function NavPanelWithBuiltNavHierarchy({
   );
 }
 const navPanelRenderer = createComponentRenderer(
-  COMP$T,
+  COMP$S,
   NavPanelMd,
   ({ node, renderChild: renderChild2, className, layoutContext, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -26996,7 +27053,7 @@ const pageRenderer = createComponentRenderer(
     ) });
   }
 );
-const COMP$S = "Pages";
+const COMP$R = "Pages";
 const PagesMd = createMetadata({
   status: "stable",
   description: "`Pages` serves as the routing coordinator within an [App](/components/App), managing which [Page](/components/Page)  displays based on the current URL.",
@@ -27008,7 +27065,7 @@ const PagesMd = createMetadata({
   }
 });
 const pagesRenderer = createComponentRenderer(
-  COMP$S,
+  COMP$R,
   PagesMd,
   ({ node, extractValue, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(
@@ -27050,22 +27107,22 @@ const Footer = forwardRef(function Footer2({
     }
   ) });
 });
-const COMP$R = "Footer";
+const COMP$Q = "Footer";
 const FooterMd = createMetadata({
   status: "stable",
   description: "`Footer` provides a designated area at the bottom of your application for footer content such as branding, copyright notices, or utility controls like theme toggles.",
   themeVars: parseScssVar(styles$q.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`backgroundColor-${COMP$R}`]: "$backgroundColor-AppHeader",
-    [`verticalAlignment-${COMP$R}`]: "center",
-    [`fontSize-${COMP$R}`]: "$fontSize-sm",
-    [`textColor-${COMP$R}`]: "$textColor-secondary",
-    [`maxWidth-content-${COMP$R}`]: "$maxWidth-content",
-    [`borderTop-${COMP$R}`]: `1px solid $borderColor`,
-    [`padding-${COMP$R}`]: "$space-2 $space-4",
-    [`gap-${COMP$R}`]: "$space-normal",
-    [`margin-${COMP$R}`]: `0 auto`,
+    [`backgroundColor-${COMP$Q}`]: "$backgroundColor-AppHeader",
+    [`verticalAlignment-${COMP$Q}`]: "center",
+    [`fontSize-${COMP$Q}`]: "$fontSize-sm",
+    [`textColor-${COMP$Q}`]: "$textColor-secondary",
+    [`maxWidth-content-${COMP$Q}`]: "$maxWidth-content",
+    [`borderTop-${COMP$Q}`]: `1px solid $borderColor`,
+    [`padding-${COMP$Q}`]: "$space-2 $space-4",
+    [`gap-${COMP$Q}`]: "$space-normal",
+    [`margin-${COMP$Q}`]: `0 auto`,
     light: {
       // --- No light-specific theme vars
     },
@@ -27075,7 +27132,7 @@ const FooterMd = createMetadata({
   }
 });
 const footerRenderer = createComponentRenderer(
-  COMP$R,
+  COMP$Q,
   FooterMd,
   ({ node, renderChild: renderChild2, className, layoutContext }) => {
     return /* @__PURE__ */ jsx(Footer, { className: classnames(layoutContext == null ? void 0 : layoutContext.themeClassName, className), children: renderChild2(node.children, {
@@ -27084,7 +27141,7 @@ const footerRenderer = createComponentRenderer(
     }) });
   }
 );
-const COMP$Q = "NavGroup";
+const COMP$P = "NavGroup";
 const NavGroupMd = createMetadata({
   status: "stable",
   description: "`NavGroup` creates collapsible containers for organizing related navigation items into hierarchical menu structures. It groups `NavLink` components and other `NavGroup` components, providing expandable submenus with customizable icons and states.",
@@ -27099,7 +27156,7 @@ const NavGroupMd = createMetadata({
       valueType: "string"
     },
     icon: {
-      description: `This property defines an optional icon to display along with the \`${COMP$Q}\` label.`,
+      description: `This property defines an optional icon to display along with the \`${COMP$P}\` label.`,
       valueType: "string"
     },
     iconHorizontalExpanded: {
@@ -27125,13 +27182,13 @@ const NavGroupMd = createMetadata({
   },
   themeVars: parseScssVar(styles$18.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-dropdown-${COMP$Q}`]: "$backgroundColor-primary",
-    [`borderRadius-dropdown-${COMP$Q}`]: "$borderRadius",
-    [`boxShadow-dropdown-${COMP$Q}`]: "$boxShadow-spread"
+    [`backgroundColor-dropdown-${COMP$P}`]: "$backgroundColor-primary",
+    [`borderRadius-dropdown-${COMP$P}`]: "$borderRadius",
+    [`boxShadow-dropdown-${COMP$P}`]: "$boxShadow-spread"
   }
 });
 const navGroupComponentRenderer = createComponentRenderer(
-  COMP$Q,
+  COMP$P,
   NavGroupMd,
   ({ node, extractValue, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(
@@ -27152,7 +27209,7 @@ const navGroupComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$P = "Logo";
+const COMP$O = "Logo";
 const LogoMd = createMetadata({
   status: "stable",
   description: "`Logo` displays your application's brand symbol by automatically loading logo images defined in the app manifest. While logos are typically configured using App-level properties (`logo`, `logo-dark`), this component provides direct control when you need custom logo placement or templating.",
@@ -27170,7 +27227,7 @@ const LogoMd = createMetadata({
   }
 });
 const logoComponentRenderer = createComponentRenderer(
-  COMP$P,
+  COMP$O,
   LogoMd,
   ({ node, className, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -27183,7 +27240,7 @@ const logoComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$O = "RadioGroup";
+const COMP$N = "RadioGroup";
 const RGOption = `RadioGroupOption`;
 const RadioGroupMd = createMetadata({
   status: "stable",
@@ -27212,13 +27269,13 @@ const RadioGroupMd = createMetadata({
     ),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$O),
-    labelBreak: dLabelBreak(COMP$O)
+    labelWidth: dLabelWidth(COMP$N),
+    labelBreak: dLabelBreak(COMP$N)
   },
   events: {
-    gotFocus: dGotFocus(COMP$O),
-    lostFocus: dLostFocus(COMP$O),
-    didChange: dDidChange(COMP$O)
+    gotFocus: dGotFocus(COMP$N),
+    lostFocus: dLostFocus(COMP$N),
+    didChange: dDidChange(COMP$N)
   },
   themeVars: parseScssVar(styles$I.themeVars),
   defaultThemeVars: {
@@ -27240,7 +27297,7 @@ const RadioGroupMd = createMetadata({
   }
 });
 const radioGroupRenderer = createComponentRenderer(
-  COMP$O,
+  COMP$N,
   RadioGroupMd,
   ({
     node,
@@ -27277,7 +27334,7 @@ const radioGroupRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$N = "Slot";
+const COMP$M = "Slot";
 const SlotMd = createMetadata({
   status: "experimental",
   description: "Placeholder in a reusable component. Signs the slot where the component's injected children should be rendered.",
@@ -27287,8 +27344,8 @@ const SlotMd = createMetadata({
   allowArbitraryProps: true,
   opaque: true
 });
-const SlotHolder = createPropHolderComponent(COMP$N, SlotMd);
-const COMP$M = "FileInput";
+const SlotHolder = createPropHolderComponent(COMP$M, SlotMd);
+const COMP$L = "FileInput";
 const DEFAULT_ICON = "browse:FileInput";
 const FileInputMd = createMetadata({
   status: "stable",
@@ -27303,12 +27360,12 @@ const FileInputMd = createMetadata({
     validationStatus: dValidationStatus(),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$M),
-    labelBreak: dLabelBreak(COMP$M),
+    labelWidth: dLabelWidth(COMP$L),
+    labelBreak: dLabelBreak(COMP$L),
     buttonVariant: d("The button variant to use", buttonVariantNames),
     buttonLabel: d(`This property is an optional string to set a label for the button part.`),
     buttonIcon: d(
-      `The ID of the icon to display in the button. You can change the default icon for all ${COMP$M} instances with the "icon.browse:FileInput" declaration in the app configuration file.`
+      `The ID of the icon to display in the button. You can change the default icon for all ${COMP$L} instances with the "icon.browse:FileInput" declaration in the app configuration file.`
     ),
     buttonIconPosition: d(
       `This optional string determines the location of the button icon.`,
@@ -27351,9 +27408,9 @@ const FileInputMd = createMetadata({
     )
   },
   events: {
-    didChange: dDidChange(COMP$M),
-    gotFocus: dGotFocus(COMP$M),
-    lostFocus: dLostFocus(COMP$M)
+    didChange: dDidChange(COMP$L),
+    gotFocus: dGotFocus(COMP$L),
+    lostFocus: dLostFocus(COMP$L)
   },
   apis: {
     value: {
@@ -27379,7 +27436,7 @@ const FileInputMd = createMetadata({
   themeVars: parseScssVar(styles$L.themeVars)
 });
 const fileInputRenderer = createComponentRenderer(
-  COMP$M,
+  COMP$L,
   FileInputMd,
   ({ node, state, updateState, extractValue, lookupEventHandler, registerComponentApi, className }) => {
     const iconName = extractValue.asOptionalString(node.props.buttonIcon) || DEFAULT_ICON;
@@ -27417,7 +27474,7 @@ const fileInputRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$L = "Spinner";
+const COMP$K = "Spinner";
 const SpinnerMd = createMetadata({
   status: "stable",
   description: "`Spinner` is an animated indicator that represents an action in progress with no deterministic progress value.",
@@ -27435,13 +27492,13 @@ const SpinnerMd = createMetadata({
   },
   themeVars: parseScssVar(styles$1j.themeVars),
   defaultThemeVars: {
-    [`size-${COMP$L}`]: "$space-10",
-    [`thickness-${COMP$L}`]: "$space-0_5",
-    [`borderColor-${COMP$L}`]: "$color-surface-400"
+    [`size-${COMP$K}`]: "$space-10",
+    [`thickness-${COMP$K}`]: "$space-0_5",
+    [`borderColor-${COMP$K}`]: "$color-surface-400"
   }
 });
 const spinnerComponentRenderer = createComponentRenderer(
-  COMP$L,
+  COMP$K,
   SpinnerMd,
   ({ node, className, extractValue }) => {
     return /* @__PURE__ */ jsx(
@@ -27454,7 +27511,7 @@ const spinnerComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$K = "Select";
+const COMP$J = "Select";
 const SelectMd = createMetadata({
   status: "stable",
   description: "`Select` provides a dropdown interface for choosing from a list of options, supporting both single and multiple selection modes. It offers extensive customization capabilities including search functionality, custom templates, and comprehensive form integration.",
@@ -27491,9 +27548,9 @@ const SelectMd = createMetadata({
     },
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$K),
+    labelWidth: dLabelWidth(COMP$J),
     labelBreak: {
-      ...dLabelBreak(COMP$K),
+      ...dLabelBreak(COMP$J),
       defaultValue: defaultProps$F.labelBreak
     },
     optionLabelTemplate: dComponent(
@@ -27529,24 +27586,24 @@ const SelectMd = createMetadata({
     }
   },
   events: {
-    gotFocus: dGotFocus(COMP$K),
-    lostFocus: dLostFocus(COMP$K),
-    didChange: dDidChange(COMP$K)
+    gotFocus: dGotFocus(COMP$J),
+    lostFocus: dLostFocus(COMP$J),
+    didChange: dDidChange(COMP$J)
   },
   apis: {
     focus: {
-      description: `This method focuses the \`${COMP$K}\` component. You can use it to programmatically focus the component.`,
+      description: `This method focuses the \`${COMP$J}\` component. You can use it to programmatically focus the component.`,
       signature: "focus(): void"
     },
     setValue: {
-      description: `This API sets the value of the \`${COMP$K}\`. You can use it to programmatically change the value.`,
+      description: `This API sets the value of the \`${COMP$J}\`. You can use it to programmatically change the value.`,
       signature: "setValue(value: string | string[] | undefined): void",
       parameters: {
         value: "The new value to set. Can be a single value or an array of values for multi-select."
       }
     },
     value: {
-      description: `This API retrieves the current value of the \`${COMP$K}\`. You can use it to get the value programmatically.`,
+      description: `This API retrieves the current value of the \`${COMP$J}\`. You can use it to get the value programmatically.`,
       signature: "get value(): string | string[] | undefined"
     },
     reset: {
@@ -27560,35 +27617,35 @@ const SelectMd = createMetadata({
   },
   themeVars: parseScssVar(styles$J.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-menu-${COMP$K}`]: "$color-surface-raised",
-    [`boxShadow-menu-${COMP$K}`]: "$boxShadow-md",
-    [`borderRadius-menu-${COMP$K}`]: "$borderRadius",
-    [`borderWidth-menu-${COMP$K}`]: "1px",
-    [`borderColor-menu-${COMP$K}`]: "$borderColor",
-    [`backgroundColor-${COMP$K}-badge`]: "$color-primary-500",
-    [`fontSize-${COMP$K}-badge`]: "$fontSize-sm",
-    [`paddingHorizontal-${COMP$K}-badge`]: "$space-2_5",
-    [`paddingVertical-${COMP$K}-badge`]: "$space-0_5",
-    [`borderRadius-${COMP$K}-badge`]: "$borderRadius",
-    [`paddingHorizontal-item-${COMP$K}`]: "$space-2",
-    [`paddingVertical-item-${COMP$K}`]: "$space-2",
-    [`paddingHorizontal-${COMP$K}`]: "$space-2",
-    [`paddingVertical-${COMP$K}`]: "$space-2",
-    [`opacity-text-item-${COMP$K}--disabled`]: "0.5",
-    [`opacity-${COMP$K}--disabled`]: "0.5",
-    [`backgroundColor-${COMP$K}-badge--hover`]: "$color-primary-400",
-    [`backgroundColor-${COMP$K}-badge--active`]: "$color-primary-500",
-    [`textColor-item-${COMP$K}--disabled`]: "$color-surface-200",
-    [`textColor-${COMP$K}-badge`]: "$color-surface-50",
-    [`backgroundColor-item-${COMP$K}`]: "$backgroundColor-dropdown-item",
-    [`backgroundColor-item-${COMP$K}--hover`]: "$backgroundColor-dropdown-item--hover",
-    [`backgroundColor-item-${COMP$K}--active`]: "$backgroundColor-dropdown-item--active",
+    [`backgroundColor-menu-${COMP$J}`]: "$color-surface-raised",
+    [`boxShadow-menu-${COMP$J}`]: "$boxShadow-md",
+    [`borderRadius-menu-${COMP$J}`]: "$borderRadius",
+    [`borderWidth-menu-${COMP$J}`]: "1px",
+    [`borderColor-menu-${COMP$J}`]: "$borderColor",
+    [`backgroundColor-${COMP$J}-badge`]: "$color-primary-500",
+    [`fontSize-${COMP$J}-badge`]: "$fontSize-sm",
+    [`paddingHorizontal-${COMP$J}-badge`]: "$space-2_5",
+    [`paddingVertical-${COMP$J}-badge`]: "$space-0_5",
+    [`borderRadius-${COMP$J}-badge`]: "$borderRadius",
+    [`paddingHorizontal-item-${COMP$J}`]: "$space-2",
+    [`paddingVertical-item-${COMP$J}`]: "$space-2",
+    [`paddingHorizontal-${COMP$J}`]: "$space-2",
+    [`paddingVertical-${COMP$J}`]: "$space-2",
+    [`opacity-text-item-${COMP$J}--disabled`]: "0.5",
+    [`opacity-${COMP$J}--disabled`]: "0.5",
+    [`backgroundColor-${COMP$J}-badge--hover`]: "$color-primary-400",
+    [`backgroundColor-${COMP$J}-badge--active`]: "$color-primary-500",
+    [`textColor-item-${COMP$J}--disabled`]: "$color-surface-200",
+    [`textColor-${COMP$J}-badge`]: "$color-surface-50",
+    [`backgroundColor-item-${COMP$J}`]: "$backgroundColor-dropdown-item",
+    [`backgroundColor-item-${COMP$J}--hover`]: "$backgroundColor-dropdown-item--hover",
+    [`backgroundColor-item-${COMP$J}--active`]: "$backgroundColor-dropdown-item--active",
     // Default borderColor-Input--disabled is too light so the disabled component is barely visible
-    [`borderColor-${COMP$K}--disabled`]: "initial"
+    [`borderColor-${COMP$J}--disabled`]: "initial"
   }
 });
 const selectComponentRenderer = createComponentRenderer(
-  COMP$K,
+  COMP$J,
   SelectMd,
   ({
     node,
@@ -27671,7 +27728,7 @@ function compoundComponentDefFromSource(name, componentSource2) {
   }
   return compoundComponentDef;
 }
-const COMP$J = "FormSection";
+const COMP$I = "FormSection";
 const FormSectionMd = createMetadata({
   status: "experimental",
   description: "`FormSection` groups elements within a `Form`. Child components are placed in a [FlowLayout](/components/FlowLayout).",
@@ -27741,14 +27798,14 @@ const componentSource = `
 </Component>
 `;
 const formSectionRenderer = {
-  compoundComponentDef: compoundComponentDefFromSource(COMP$J, componentSource),
+  compoundComponentDef: compoundComponentDefFromSource(COMP$I, componentSource),
   metadata: FormSectionMd
 };
 const defaultProps$o = {
   ...defaultProps$$,
   labelPosition: "end"
 };
-const COMP$I = "Checkbox";
+const COMP$H = "Checkbox";
 const CheckboxMd = createMetadata({
   status: "stable",
   description: "`Checkbox` allows users to make binary choices with a clickable box that shows checked/unchecked states. It's essential for settings, preferences, multi-select lists, and accepting terms or conditions.",
@@ -27764,8 +27821,8 @@ const CheckboxMd = createMetadata({
     indeterminate: dIndeterminate(defaultProps$$.indeterminate),
     label: dLabel(),
     labelPosition: dLabelPosition(defaultProps$o.labelPosition),
-    labelWidth: dLabelWidth(COMP$I),
-    labelBreak: dLabelBreak(COMP$I),
+    labelWidth: dLabelWidth(COMP$H),
+    labelBreak: dLabelBreak(COMP$H),
     required: dRequired(),
     initialValue: dInitialValue(defaultProps$$.initialValue),
     autoFocus: dAutoFocus(),
@@ -27773,24 +27830,24 @@ const CheckboxMd = createMetadata({
     enabled: dEnabled(),
     validationStatus: dValidationStatus(defaultProps$$.validationStatus),
     description: dInternal(
-      `(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description of the ${COMP$I} besides its label.`
+      `(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description of the ${COMP$H} besides its label.`
     ),
     inputTemplate: dComponent("This property is used to define a custom checkbox input template")
   },
   childrenAsTemplate: "inputTemplate",
   events: {
-    click: dClick(COMP$I),
-    gotFocus: dGotFocus(COMP$I),
-    lostFocus: dLostFocus(COMP$I),
-    didChange: dDidChange(COMP$I)
+    click: dClick(COMP$H),
+    gotFocus: dGotFocus(COMP$H),
+    lostFocus: dLostFocus(COMP$H),
+    didChange: dDidChange(COMP$H)
   },
   apis: {
     value: {
-      description: `This method returns the current value of the ${COMP$I}.`,
+      description: `This method returns the current value of the ${COMP$H}.`,
       signature: "get value(): boolean"
     },
     setValue: {
-      description: `This method sets the current value of the ${COMP$I}.`,
+      description: `This method sets the current value of the ${COMP$H}.`,
       signature: "set value(value: boolean): void",
       parameters: {
         value: "The new value to set for the checkbox."
@@ -27800,20 +27857,20 @@ const CheckboxMd = createMetadata({
   themeVars: parseScssVar(styles$11.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`borderColor-checked-${COMP$I}-error`]: `$borderColor-${COMP$I}-error`,
-    [`backgroundColor-checked-${COMP$I}-error`]: `$borderColor-${COMP$I}-error`,
-    [`borderColor-checked-${COMP$I}-warning`]: `$borderColor-${COMP$I}-warning`,
-    [`backgroundColor-checked-${COMP$I}-warning`]: `$borderColor-${COMP$I}-warning`,
-    [`borderColor-checked-${COMP$I}-success`]: `$borderColor-${COMP$I}-success`,
-    [`backgroundColor-checked-${COMP$I}-success`]: `$borderColor-${COMP$I}-success`,
-    [`backgroundColor-indicator-${COMP$I}`]: "$backgroundColor-primary",
-    [`borderColor-checked-${COMP$I}`]: "$color-primary-500",
-    [`backgroundColor-checked-${COMP$I}`]: "$color-primary-500",
-    [`backgroundColor-${COMP$I}--disabled`]: "$color-surface-200"
+    [`borderColor-checked-${COMP$H}-error`]: `$borderColor-${COMP$H}-error`,
+    [`backgroundColor-checked-${COMP$H}-error`]: `$borderColor-${COMP$H}-error`,
+    [`borderColor-checked-${COMP$H}-warning`]: `$borderColor-${COMP$H}-warning`,
+    [`backgroundColor-checked-${COMP$H}-warning`]: `$borderColor-${COMP$H}-warning`,
+    [`borderColor-checked-${COMP$H}-success`]: `$borderColor-${COMP$H}-success`,
+    [`backgroundColor-checked-${COMP$H}-success`]: `$borderColor-${COMP$H}-success`,
+    [`backgroundColor-indicator-${COMP$H}`]: "$backgroundColor-primary",
+    [`borderColor-checked-${COMP$H}`]: "$color-primary-500",
+    [`backgroundColor-checked-${COMP$H}`]: "$color-primary-500",
+    [`backgroundColor-${COMP$H}--disabled`]: "$color-surface-200"
   }
 });
 const checkboxComponentRenderer = createComponentRenderer(
-  COMP$I,
+  COMP$H,
   CheckboxMd,
   ({
     node,
@@ -27865,7 +27922,7 @@ const checkboxComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$H = "Switch";
+const COMP$G = "Switch";
 const SwitchMd = createMetadata({
   status: "stable",
   description: "`Switch` enables users to toggle between two states: on and off.",
@@ -27880,8 +27937,8 @@ const SwitchMd = createMetadata({
   props: {
     label: dLabel(),
     labelPosition: dLabelPosition("end"),
-    labelWidth: dLabelWidth(COMP$H),
-    labelBreak: dLabelBreak(COMP$H),
+    labelWidth: dLabelWidth(COMP$G),
+    labelBreak: dLabelBreak(COMP$G),
     required: dRequired(),
     initialValue: dInitialValue(defaultProps$$.initialValue),
     autoFocus: dAutoFocus(),
@@ -27889,22 +27946,22 @@ const SwitchMd = createMetadata({
     enabled: dEnabled(),
     validationStatus: dValidationStatus(defaultProps$$.validationStatus),
     description: dInternal(
-      `(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description of the ${COMP$H} besides its label.`
+      `(*** NOT IMPLEMENTED YET ***) This optional property displays an alternate description of the ${COMP$G} besides its label.`
     )
   },
   events: {
-    click: dClick(COMP$H),
-    gotFocus: dGotFocus(COMP$H),
-    lostFocus: dLostFocus(COMP$H),
-    didChange: dDidChange(COMP$H)
+    click: dClick(COMP$G),
+    gotFocus: dGotFocus(COMP$G),
+    lostFocus: dLostFocus(COMP$G),
+    didChange: dDidChange(COMP$G)
   },
   apis: {
     value: {
-      description: `This property holds the current value of the ${COMP$H}, which can be either "true" (on) or "false" (off).`,
+      description: `This property holds the current value of the ${COMP$G}, which can be either "true" (on) or "false" (off).`,
       signature: "get value():boolean"
     },
     setValue: {
-      description: `This API sets the value of the \`${COMP$H}\`. You can use it to programmatically change the value.`,
+      description: `This API sets the value of the \`${COMP$G}\`. You can use it to programmatically change the value.`,
       signature: "setValue(value: boolean): void",
       parameters: {
         value: "The new value to set. Can be either true (on) or false (off)."
@@ -27914,28 +27971,28 @@ const SwitchMd = createMetadata({
   themeVars: parseScssVar(styles$11.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`borderColor-checked-${COMP$H}-error`]: `$borderColor-${COMP$H}-error`,
-    [`backgroundColor-checked-${COMP$H}-error`]: `$borderColor-${COMP$H}-error`,
-    [`borderColor-checked-${COMP$H}-warning`]: `$borderColor-${COMP$H}-warning`,
-    [`backgroundColor-checked-${COMP$H}-warning`]: `$borderColor-${COMP$H}-warning`,
-    [`borderColor-checked-${COMP$H}-success`]: `$borderColor-${COMP$H}-success`,
-    [`backgroundColor-checked-${COMP$H}-success`]: `$borderColor-${COMP$H}-success`,
-    [`backgroundColor-${COMP$H}`]: "$color-surface-0",
-    [`borderColor-${COMP$H}`]: "$color-surface-200",
-    [`borderWidth-${COMP$H}`]: "1px",
-    [`backgroundColor-indicator-${COMP$H}`]: "$color-surface-400",
-    [`backgroundColor-${COMP$H}-indicator--disabled`]: "$backgroundColor-primary",
-    [`backgroundColor-indicator-checked-${COMP$H}`]: "$backgroundColor-primary",
-    [`borderColor-checked-${COMP$H}`]: "$color-primary-500",
-    [`backgroundColor-checked-${COMP$H}`]: "$color-primary-500",
-    [`backgroundColor-${COMP$H}--disabled`]: "$color-surface-200",
+    [`borderColor-checked-${COMP$G}-error`]: `$borderColor-${COMP$G}-error`,
+    [`backgroundColor-checked-${COMP$G}-error`]: `$borderColor-${COMP$G}-error`,
+    [`borderColor-checked-${COMP$G}-warning`]: `$borderColor-${COMP$G}-warning`,
+    [`backgroundColor-checked-${COMP$G}-warning`]: `$borderColor-${COMP$G}-warning`,
+    [`borderColor-checked-${COMP$G}-success`]: `$borderColor-${COMP$G}-success`,
+    [`backgroundColor-checked-${COMP$G}-success`]: `$borderColor-${COMP$G}-success`,
+    [`backgroundColor-${COMP$G}`]: "$color-surface-0",
+    [`borderColor-${COMP$G}`]: "$color-surface-200",
+    [`borderWidth-${COMP$G}`]: "1px",
+    [`backgroundColor-indicator-${COMP$G}`]: "$color-surface-400",
+    [`backgroundColor-${COMP$G}-indicator--disabled`]: "$backgroundColor-primary",
+    [`backgroundColor-indicator-checked-${COMP$G}`]: "$backgroundColor-primary",
+    [`borderColor-checked-${COMP$G}`]: "$color-primary-500",
+    [`backgroundColor-checked-${COMP$G}`]: "$color-primary-500",
+    [`backgroundColor-${COMP$G}--disabled`]: "$color-surface-200",
     dark: {
-      [`backgroundColor-indicator-${COMP$H}`]: "$color-surface-500"
+      [`backgroundColor-indicator-${COMP$G}`]: "$color-surface-500"
     }
   }
 });
 const switchComponentRenderer = createComponentRenderer(
-  COMP$H,
+  COMP$G,
   SwitchMd,
   ({
     node,
@@ -27993,13 +28050,13 @@ const SlotItem = memo(
   }
 );
 SlotItem.displayName = "SlotItem";
-const COMP$G = "AppHeader";
+const COMP$F = "AppHeader";
 const AppHeaderMd = createMetadata({
   status: "stable",
   description: "`AppHeader` defines the top navigation bar of your application within the [`App`](/components/App) component. It automatically handles logo placement, application title, and user profile areas with built-in responsive behavior.",
   props: {
     profileMenuTemplate: dComponent(
-      `This property makes the profile menu slot of the \`${COMP$G}\` component customizable.`
+      `This property makes the profile menu slot of the \`${COMP$F}\` component customizable.`
     ),
     logoTemplate: dComponent(
       "This property defines the template to use for the logo. With this property, you can construct your custom logo instead of using a single image."
@@ -28019,23 +28076,23 @@ const AppHeaderMd = createMetadata({
   },
   themeVars: parseScssVar(styles$1b.themeVars),
   themeVarDescriptions: {
-    [`padding‑logo‑${COMP$G}`]: "This theme variable sets the padding of the logo in the app header (including all `padding` variants, such as `paddingLeft-logo-AppHeader` and others).",
-    [`width‑logo‑${COMP$G}`]: "Sets the width of the displayed logo"
+    [`padding‑logo‑${COMP$F}`]: "This theme variable sets the padding of the logo in the app header (including all `padding` variants, such as `paddingLeft-logo-AppHeader` and others).",
+    [`width‑logo‑${COMP$F}`]: "Sets the width of the displayed logo"
   },
   defaultThemeVars: {
-    [`padding-drawerToggle-${COMP$G}`]: "$space-0_5",
-    [`height-${COMP$G}`]: "$space-14",
-    [`maxWidth-content-${COMP$G}`]: "$maxWidth-content-App",
-    [`maxWidth-${COMP$G}`]: "$maxWidth-App",
-    [`borderBottom-${COMP$G}`]: "1px solid $borderColor",
-    ...paddingSubject(`logo-${COMP$G}`, { horizontal: "$space-0", vertical: "$space-0" }),
-    ...paddingSubject(COMP$G, { horizontal: "$space-4", vertical: "$space-0" }),
-    [`borderRadius-${COMP$G}`]: "0px",
-    [`backgroundColor-${COMP$G}`]: "$color-surface-raised"
+    [`padding-drawerToggle-${COMP$F}`]: "$space-0_5",
+    [`height-${COMP$F}`]: "$space-14",
+    [`maxWidth-content-${COMP$F}`]: "$maxWidth-content-App",
+    [`maxWidth-${COMP$F}`]: "$maxWidth-App",
+    [`borderBottom-${COMP$F}`]: "1px solid $borderColor",
+    ...paddingSubject(`logo-${COMP$F}`, { horizontal: "$space-0", vertical: "$space-0" }),
+    ...paddingSubject(COMP$F, { horizontal: "$space-4", vertical: "$space-0" }),
+    [`borderRadius-${COMP$F}`]: "0px",
+    [`backgroundColor-${COMP$F}`]: "$color-surface-raised"
   }
 });
 const appHeaderComponentRenderer = createComponentRenderer(
-  COMP$G,
+  COMP$F,
   AppHeaderMd,
   ({ node, renderChild: renderChild2, className, layoutContext, extractValue }) => {
     var _a2, _b;
@@ -28279,7 +28336,7 @@ const MenuSeparatorMd = createMetadata({
 const menuSeparatorRenderer = createComponentRenderer(MSEP, MenuSeparatorMd, () => {
   return /* @__PURE__ */ jsx(MenuSeparator, {});
 });
-const COMP$F = "ExpandableItem";
+const COMP$E = "ExpandableItem";
 const ExpandableItemMd = createMetadata({
   status: "stable",
   description: "`ExpandableItem` creates expandable/collapsible section, similar to the HTML details disclosure element. When the user clicks on the `summary` the content expands or collapses.",
@@ -28343,28 +28400,28 @@ const ExpandableItemMd = createMetadata({
   themeVars: parseScssVar(styles$y.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`backgroundColor-${COMP$F}`]: "transparent",
-    [`color-${COMP$F}`]: "$textColor-primary",
-    [`color-${COMP$F}--disabled`]: "$textColor--disabled",
-    [`fontFamily-${COMP$F}`]: "$fontFamily",
-    [`borderColor-${COMP$F}`]: "$borderColor",
-    [`borderWidth-${COMP$F}`]: "0",
-    [`borderBottomWidth-${COMP$F}`]: "1px",
-    [`borderStyle-${COMP$F}`]: "solid",
-    [`borderRadius-${COMP$F}`]: "0",
-    [`paddingTop-${COMP$F}`]: "$space-2",
-    [`paddingBottom-${COMP$F}`]: "$space-2",
-    [`paddingLeft-${COMP$F}`]: "$space-0",
-    [`paddingRight-${COMP$F}`]: "$space-0",
-    [`gap-${COMP$F}`]: "$space-2",
-    [`paddingLeft-content-${COMP$F}`]: "$space-3",
-    [`paddingRight-content-${COMP$F}`]: "$space-3",
-    [`paddingVertical-content-${COMP$F}`]: "$space-2",
-    [`transition-${COMP$F}`]: "0.2s ease"
+    [`backgroundColor-${COMP$E}`]: "transparent",
+    [`color-${COMP$E}`]: "$textColor-primary",
+    [`color-${COMP$E}--disabled`]: "$textColor--disabled",
+    [`fontFamily-${COMP$E}`]: "$fontFamily",
+    [`borderColor-${COMP$E}`]: "$borderColor",
+    [`borderWidth-${COMP$E}`]: "0",
+    [`borderBottomWidth-${COMP$E}`]: "1px",
+    [`borderStyle-${COMP$E}`]: "solid",
+    [`borderRadius-${COMP$E}`]: "0",
+    [`paddingTop-${COMP$E}`]: "$space-2",
+    [`paddingBottom-${COMP$E}`]: "$space-2",
+    [`paddingLeft-${COMP$E}`]: "$space-0",
+    [`paddingRight-${COMP$E}`]: "$space-0",
+    [`gap-${COMP$E}`]: "$space-2",
+    [`paddingLeft-content-${COMP$E}`]: "$space-3",
+    [`paddingRight-content-${COMP$E}`]: "$space-3",
+    [`paddingVertical-content-${COMP$E}`]: "$space-2",
+    [`transition-${COMP$E}`]: "0.2s ease"
   }
 });
 const expandableItemComponentRenderer = createComponentRenderer(
-  COMP$F,
+  COMP$E,
   ExpandableItemMd,
   ({ node, renderChild: renderChild2, lookupEventHandler, registerComponentApi, extractValue, className }) => {
     var _a2, _b, _c;
@@ -28566,7 +28623,7 @@ const RootThemeDefinition = {
     "outlineStyle--focus": "solid",
     "outlineOffset--focus": "0",
     // --- The app's default font family
-    "fontFamily": "$fontFamily-sans-serif",
+    fontFamily: "$fontFamily-sans-serif",
     // --- Various font sizes (relative to the current context)
     "fontSize-tiny": "0.625rem",
     "fontSize-xs": "0.75rem",
@@ -28583,32 +28640,16 @@ const RootThemeDefinition = {
     "fontSize-7xl": "4.5rem",
     "fontSize-8xl": "6rem",
     "fontSize-9xl": "8rem",
-    // --- Various line height values
-    "lineHeight-tiny": "calc(0.85 / 0.625)",
-    // 1.36
-    "lineHeight-xs": "calc(1 / 0.75)",
-    // 1.33
-    "lineHeight-sm": "calc(1.25 / 0.875)",
-    // 1.43
-    "lineHeight-base": "calc(1.5 / 1)",
-    // 1.5
-    "lineHeight-lg": "calc(1.75 / 1.125)",
-    // 1.56
-    "lineHeight-xl": "calc(1.75 / 1.25)",
-    // 1.4
-    "lineHeight-2xl": "calc(2 / 1.5)",
-    // 1.33
-    "lineHeight-3xl": "calc(2.25 / 1.875)",
-    // 1.2
-    "lineHeight-4xl": "calc(2.5 / 2.25)",
-    // 1.11
-    "lineHeight-5xl": "1",
-    "lineHeight-6xl": "1",
-    "lineHeight-7xl": "1",
-    "lineHeight-8xl": "1",
-    "lineHeight-9xl": "1",
     // --- The default font size
-    "fontSize": "$fontSize-base",
+    fontSize: "$fontSize-base",
+    // --- Various line height values
+    // --- Default line height values (relative to the base unit, "space-base")
+    "lineHeight-none": "1",
+    "lineHeight-tight": "1.25",
+    "lineHeight-snug": "1.375",
+    "lineHeight-normal": "1.5",
+    "lineHeight-relaxed": "1.625",
+    "lineHeight-loose": "2",
     // --- Predefined gap sizes
     "gap-none": "$space-0",
     "gap-tight": "$space-2",
@@ -28625,7 +28666,7 @@ const RootThemeDefinition = {
     "space-normal": "$space-4",
     "space-loose": "$space-8",
     // --- Font used for body
-    "fontWeight": "$fontWeight-normal",
+    fontWeight: "$fontWeight-normal",
     // --- Various default values (review them)
     "borderColor-dropdown-item": "$borderColor",
     // --- Various predefined shadow values
@@ -28639,14 +28680,14 @@ const RootThemeDefinition = {
     // --- The default maximum content width
     "maxWidth-content": "1320px",
     // --- Background colors
-    "backgroundColor": "$color-surface-subtle",
+    backgroundColor: "$color-surface-subtle",
     "backgroundColor-overlay": "rgba(0, 0, 0, 0.2)",
     "backgroundColor-dropdown-item--hover": $colorSurface50,
     "backgroundColor-dropdown-item--active": $colorSurface100,
     "backgroundColor-dropdown-item--active-hover": $colorSurface50,
     "backgroundColor-tree-row--selected--before": $colorPrimary50,
     // --- Border colors
-    "borderColor": "rgb(from $color-surface-900 r g b / 0.1)",
+    borderColor: "rgb(from $color-surface-900 r g b / 0.1)",
     "borderColor--disabled": $colorSurface100,
     // --- Text colors
     "textColor-secondary": $colorSurface600,
@@ -29890,6 +29931,7 @@ const TOASTER_CONTAINER_STYLE = {
 let toasterMounted = false;
 const NotificationToast = ({ toastDuration }) => {
   const [shouldRender, setShouldRender] = useState(false);
+  const { root: root2 } = useTheme();
   useEffect(() => {
     if (!toasterMounted) {
       toasterMounted = true;
@@ -29897,17 +29939,20 @@ const NotificationToast = ({ toastDuration }) => {
     }
   }, []);
   if (!shouldRender) return null;
-  return /* @__PURE__ */ jsx(
-    Toaster,
-    {
-      position: "top-right",
-      containerStyle: TOASTER_CONTAINER_STYLE,
-      toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration },
-      children: (t) => /* @__PURE__ */ jsx("div", { onClick: () => toast.dismiss(t.id), children: /* @__PURE__ */ jsx(ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon: icon2, message }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon2,
-        message
-      ] }) }) })
-    }
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      Toaster,
+      {
+        position: "top-right",
+        containerStyle: TOASTER_CONTAINER_STYLE,
+        toastOptions: { style: { padding: "12px 16px" }, duration: toastDuration },
+        children: (t) => /* @__PURE__ */ jsx("div", { onClick: () => toast.dismiss(t.id), children: /* @__PURE__ */ jsx(ToastBar, { position: t.position, toast: t, style: { wordBreak: "break-word" }, children: ({ icon: icon2, message }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon2,
+          message
+        ] }) }) })
+      }
+    ),
+    root2
   );
 };
 const defaultProps$n = {
@@ -30091,7 +30136,7 @@ function RootClasses({ classNames = EMPTY_ARRAY }) {
   registry.addRootClasses(classNames);
   return null;
 }
-const COMP$E = "Theme";
+const COMP$D = "Theme";
 const ThemeMd = createMetadata({
   status: "stable",
   description: "`Theme` creates styling contexts to customize the appearance of nested components without using CSS.",
@@ -30114,7 +30159,7 @@ const ThemeMd = createMetadata({
   opaque: true
 });
 const themeComponentRenderer = createComponentRenderer(
-  COMP$E,
+  COMP$D,
   ThemeMd,
   ({ node, extractValue, renderChild: renderChild2, layoutContext, appContext }) => {
     var _a2, _b;
@@ -30185,7 +30230,7 @@ function Column({ nodeChildren, renderChild: renderChild2, ...columnMetadata })
   }, [id, unRegisterColumn]);
   return null;
 }
-const COMP$D = "Column";
+const COMP$C = "Column";
 const ColumnMd = createMetadata({
   status: "stable",
   description: "`Column` defines the structure and behavior of individual table columns within a [`Table`](/components/Table) component. Each Column controls data binding, header display, sorting capabilities, sizing, and can contain any XMLUI components for rich cell content.",
@@ -30248,7 +30293,7 @@ const ColumnMd = createMetadata({
   }
 });
 const columnComponentRenderer = createComponentRenderer(
-  COMP$D,
+  COMP$C,
   ColumnMd,
   (rendererContext) => {
     const { node, renderChild: renderChild2, extractValue, className } = rendererContext;
@@ -31748,7 +31793,7 @@ const dataLoaderRenderer = createLoaderRenderer(
   },
   DataLoaderMd
 );
-const COMP$C = "DatePicker";
+const COMP$B = "DatePicker";
 const DatePickerMd = createMetadata({
   status: "experimental",
   description: "`DatePicker` provides an interactive calendar interface for selecting single dates or date ranges, with customizable formatting and validation options. It displays a text input that opens a calendar popup when clicked, offering both keyboard and mouse interaction.",
@@ -31761,8 +31806,8 @@ const DatePickerMd = createMetadata({
     validationStatus: dValidationStatus(defaultProps$B.validationStatus),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$C),
-    labelBreak: dLabelBreak(COMP$C),
+    labelWidth: dLabelWidth(COMP$B),
+    labelBreak: dLabelBreak(COMP$B),
     mode: {
       description: "The mode of the datepicker (single or range)",
       valueType: "string",
@@ -31838,13 +31883,13 @@ const DatePickerMd = createMetadata({
     endIcon: dEndIcon()
   },
   events: {
-    didChange: dDidChange(COMP$C),
-    gotFocus: dGotFocus(COMP$C),
-    lostFocus: dLostFocus(COMP$C)
+    didChange: dDidChange(COMP$B),
+    gotFocus: dGotFocus(COMP$B),
+    lostFocus: dLostFocus(COMP$B)
   },
   apis: {
     focus: {
-      description: `Focus the ${COMP$C} component.`,
+      description: `Focus the ${COMP$B} component.`,
       signature: "focus(): void"
     },
     value: {
@@ -31852,7 +31897,7 @@ const DatePickerMd = createMetadata({
       signature: "get value(): any"
     },
     setValue: {
-      description: `This method sets the current value of the ${COMP$C}.`,
+      description: `This method sets the current value of the ${COMP$B}.`,
       signature: "set value(value: any): void",
       parameters: {
         value: "The new value to set for the date picker."
@@ -31861,19 +31906,19 @@ const DatePickerMd = createMetadata({
   },
   themeVars: parseScssVar(styles$H.themeVars),
   defaultThemeVars: {
-    [`boxShadow-menu-${COMP$C}`]: "$boxShadow-md",
-    [`borderRadius-menu-${COMP$C}`]: "$borderRadius",
-    [`textColor-value-${COMP$C}`]: "$textColor-primary",
-    [`borderColor-selectedItem-${COMP$C}`]: "$color-primary-200",
-    [`backgroundColor-menu-${COMP$C}`]: "$color-surface-50",
-    [`backgroundColor-item-${COMP$C}--hover`]: "$color-surface-100",
-    [`backgroundColor-item-${COMP$C}--active`]: "$color-surface-200",
-    [`paddingVertical-${COMP$C}`]: "$space-2",
-    [`paddingHorizontal-${COMP$C}`]: "$space-2"
+    [`boxShadow-menu-${COMP$B}`]: "$boxShadow-md",
+    [`borderRadius-menu-${COMP$B}`]: "$borderRadius",
+    [`textColor-value-${COMP$B}`]: "$textColor-primary",
+    [`borderColor-selectedItem-${COMP$B}`]: "$color-primary-200",
+    [`backgroundColor-menu-${COMP$B}`]: "$color-surface-50",
+    [`backgroundColor-item-${COMP$B}--hover`]: "$color-surface-100",
+    [`backgroundColor-item-${COMP$B}--active`]: "$color-surface-200",
+    [`paddingVertical-${COMP$B}`]: "$space-2",
+    [`paddingHorizontal-${COMP$B}`]: "$space-2"
   }
 });
 const datePickerComponentRenderer = createComponentRenderer(
-  COMP$C,
+  COMP$B,
   DatePickerMd,
   ({
     node,
@@ -32921,7 +32966,7 @@ function isYearInvalid(value) {
   if (isNaN(num)) return true;
   return num < MIN_YEAR || num > MAX_YEAR;
 }
-const COMP$B = "DateInput";
+const COMP$A = "DateInput";
 const DateInputMd = createMetadata({
   status: "experimental",
   description: "`DateInput` provides a text-based date input interface for selecting single dates or date ranges, with direct keyboard input similar to TimeInput. It offers customizable formatting and validation options without dropdown calendars.",
@@ -32947,8 +32992,8 @@ const DateInputMd = createMetadata({
     validationStatus: dValidationStatus(defaultProps$l.validationStatus),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$B),
-    labelBreak: dLabelBreak(COMP$B),
+    labelWidth: dLabelWidth(COMP$A),
+    labelBreak: dLabelBreak(COMP$A),
     mode: {
       description: "The mode of the date input (single or range)",
       valueType: "string",
@@ -33052,13 +33097,13 @@ const DateInputMd = createMetadata({
     endIcon: dEndIcon()
   },
   events: {
-    didChange: dDidChange(COMP$B),
-    gotFocus: dGotFocus(COMP$B),
-    lostFocus: dLostFocus(COMP$B)
+    didChange: dDidChange(COMP$A),
+    gotFocus: dGotFocus(COMP$A),
+    lostFocus: dLostFocus(COMP$A)
   },
   apis: {
     focus: {
-      description: `Focus the ${COMP$B} component.`,
+      description: `Focus the ${COMP$A} component.`,
       signature: "focus(): void"
     },
     value: {
@@ -33066,7 +33111,7 @@ const DateInputMd = createMetadata({
       signature: "get value(): any"
     },
     setValue: {
-      description: `This method sets the current value of the ${COMP$B}.`,
+      description: `This method sets the current value of the ${COMP$A}.`,
       signature: "set value(value: any): void",
       parameters: {
         value: "The new value to set for the date input."
@@ -33080,30 +33125,30 @@ const DateInputMd = createMetadata({
   themeVars: parseScssVar(styles$o.themeVars),
   defaultThemeVars: {
     // DateInput specific theme variables (matching TimeInput structure)
-    [`paddingHorizontal-${COMP$B}`]: "$space-2",
-    [`paddingVertical-${COMP$B}`]: "$space-2",
-    [`color-divider-${COMP$B}`]: "$textColor-secondary",
-    [`spacing-divider-${COMP$B}`]: "1px 0",
-    [`width-input-${COMP$B}`]: "1.8em",
-    [`minWidth-input-${COMP$B}`]: "0.54em",
-    [`padding-input-${COMP$B}`]: "0 2px",
-    [`textAlign-input-${COMP$B}`]: "center",
-    [`fontSize-input-${COMP$B}`]: "inherit",
-    [`borderRadius-input-${COMP$B}`]: "$borderRadius",
-    [`backgroundColor-input-${COMP$B}-invalid`]: "rgba(220, 53, 69, 0.15)",
-    [`padding-button-${COMP$B}`]: "4px 6px",
-    [`borderRadius-button-${COMP$B}`]: "$borderRadius",
-    [`hoverColor-button-${COMP$B}`]: "$color-surface-800",
-    [`disabledColor-button-${COMP$B}`]: "$textColor-disabled",
-    [`outlineColor-button-${COMP$B}--focused`]: "$color-accent-500",
-    [`outlineWidth-button-${COMP$B}--focused`]: "2px",
-    [`outlineOffset-button-${COMP$B}--focused`]: "2px",
-    [`minWidth-ampm-${COMP$B}`]: "2em",
-    [`fontSize-ampm-${COMP$B}`]: "inherit"
+    [`paddingHorizontal-${COMP$A}`]: "$space-2",
+    [`paddingVertical-${COMP$A}`]: "$space-2",
+    [`color-divider-${COMP$A}`]: "$textColor-secondary",
+    [`spacing-divider-${COMP$A}`]: "1px 0",
+    [`width-input-${COMP$A}`]: "1.8em",
+    [`minWidth-input-${COMP$A}`]: "0.54em",
+    [`padding-input-${COMP$A}`]: "0 2px",
+    [`textAlign-input-${COMP$A}`]: "center",
+    [`fontSize-input-${COMP$A}`]: "inherit",
+    [`borderRadius-input-${COMP$A}`]: "$borderRadius",
+    [`backgroundColor-input-${COMP$A}-invalid`]: "rgba(220, 53, 69, 0.15)",
+    [`padding-button-${COMP$A}`]: "4px 6px",
+    [`borderRadius-button-${COMP$A}`]: "$borderRadius",
+    [`hoverColor-button-${COMP$A}`]: "$color-surface-800",
+    [`disabledColor-button-${COMP$A}`]: "$textColor-disabled",
+    [`outlineColor-button-${COMP$A}--focused`]: "$color-accent-500",
+    [`outlineWidth-button-${COMP$A}--focused`]: "2px",
+    [`outlineOffset-button-${COMP$A}--focused`]: "2px",
+    [`minWidth-ampm-${COMP$A}`]: "2em",
+    [`fontSize-ampm-${COMP$A}`]: "inherit"
   }
 });
 const dateInputComponentRenderer = createComponentRenderer(
-  COMP$B,
+  COMP$A,
   DateInputMd,
   ({
     node,
@@ -34361,7 +34406,7 @@ function isMinuteOrSecondInvalid(value) {
   const invalid2 = num < 0 || num > 59;
   return invalid2;
 }
-const COMP$A = "TimeInput";
+const COMP$z = "TimeInput";
 const TimeInputMd = createMetadata({
   status: "experimental",
   description: "`TimeInput` provides time input with support for 12-hour and 24-hour formats and configurable precision for hours, minutes, and seconds.",
@@ -34390,8 +34435,8 @@ const TimeInputMd = createMetadata({
     validationStatus: dValidationStatus(defaultProps$k.validationStatus),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$A),
-    labelBreak: dLabelBreak(COMP$A),
+    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",
@@ -34444,14 +34489,14 @@ const TimeInputMd = createMetadata({
     }
   },
   events: {
-    didChange: dDidChange(COMP$A),
-    gotFocus: dGotFocus(COMP$A),
-    lostFocus: dLostFocus(COMP$A),
+    didChange: dDidChange(COMP$z),
+    gotFocus: dGotFocus(COMP$z),
+    lostFocus: dLostFocus(COMP$z),
     invalidTime: d("Fired when the user enters an invalid time")
   },
   apis: {
     focus: {
-      description: `Focus the ${COMP$A} component.`,
+      description: `Focus the ${COMP$z} component.`,
       signature: "focus(): void"
     },
     value: {
@@ -34459,7 +34504,7 @@ const TimeInputMd = createMetadata({
       signature: "get value(): any"
     },
     setValue: {
-      description: `This method sets the current value of the ${COMP$A}.`,
+      description: `This method sets the current value of the ${COMP$z}.`,
       signature: "set value(value: any): void",
       parameters: {
         value: "The new time value to set for the time picker."
@@ -34473,30 +34518,30 @@ const TimeInputMd = createMetadata({
   themeVars: parseScssVar(styles$l.themeVars),
   defaultThemeVars: {
     // TimeInput specific theme variables
-    [`paddingHorizontal-${COMP$A}`]: "$space-2",
-    [`paddingVertical-${COMP$A}`]: "$space-2",
-    [`color-divider-${COMP$A}`]: "$textColor-secondary",
-    [`spacing-divider-${COMP$A}`]: "1px 0",
-    [`width-input-${COMP$A}`]: "1.8em",
-    [`minWidth-input-${COMP$A}`]: "0.54em",
-    [`padding-input-${COMP$A}`]: "0 2px",
-    [`textAlign-input-${COMP$A}`]: "center",
-    [`fontSize-input-${COMP$A}`]: "inherit",
-    [`borderRadius-input-${COMP$A}`]: "$borderRadius",
-    [`backgroundColor-input-${COMP$A}-invalid`]: "rgba(220, 53, 69, 0.15)",
-    [`padding-button-${COMP$A}`]: "4px 4px",
-    [`borderRadius-button-${COMP$A}`]: "$borderRadius",
-    [`hoverColor-button-${COMP$A}`]: "$color-surface-800",
-    [`disabledColor-button-${COMP$A}`]: "$textColor-disabled",
-    [`outlineColor-button-${COMP$A}--focused`]: "$color-accent-500",
-    [`outlineWidth-button-${COMP$A}--focused`]: "2px",
-    [`outlineOffset-button-${COMP$A}--focused`]: "0",
-    [`minWidth-ampm-${COMP$A}`]: "2.2em",
-    [`fontSize-ampm-${COMP$A}`]: "inherit"
+    [`paddingHorizontal-${COMP$z}`]: "$space-2",
+    [`paddingVertical-${COMP$z}`]: "$space-2",
+    [`color-divider-${COMP$z}`]: "$textColor-secondary",
+    [`spacing-divider-${COMP$z}`]: "1px 0",
+    [`width-input-${COMP$z}`]: "1.8em",
+    [`minWidth-input-${COMP$z}`]: "0.54em",
+    [`padding-input-${COMP$z}`]: "0 2px",
+    [`textAlign-input-${COMP$z}`]: "center",
+    [`fontSize-input-${COMP$z}`]: "inherit",
+    [`borderRadius-input-${COMP$z}`]: "$borderRadius",
+    [`backgroundColor-input-${COMP$z}-invalid`]: "rgba(220, 53, 69, 0.15)",
+    [`padding-button-${COMP$z}`]: "4px 4px",
+    [`borderRadius-button-${COMP$z}`]: "$borderRadius",
+    [`hoverColor-button-${COMP$z}`]: "$color-surface-800",
+    [`disabledColor-button-${COMP$z}`]: "$textColor-disabled",
+    [`outlineColor-button-${COMP$z}--focused`]: "$color-accent-500",
+    [`outlineWidth-button-${COMP$z}--focused`]: "2px",
+    [`outlineOffset-button-${COMP$z}--focused`]: "0",
+    [`minWidth-ampm-${COMP$z}`]: "2.2em",
+    [`fontSize-ampm-${COMP$z}`]: "inherit"
   }
 });
 const timeInputComponentRenderer = createComponentRenderer(
-  COMP$A,
+  COMP$z,
   TimeInputMd,
   ({
     node,
@@ -34700,7 +34745,7 @@ const Timer = forwardRef(function Timer2({
     }
   );
 });
-const COMP$z = "Timer";
+const COMP$y = "Timer";
 const TimerMd = createMetadata({
   status: "stable",
   description: "`Timer` is a non-visual component that fires events at regular intervals. It can be enabled or disabled and ensures that the timer event handler completes before firing the next event.",
@@ -34751,7 +34796,7 @@ const TimerMd = createMetadata({
   }
 });
 const timerComponentRenderer = createComponentRenderer(
-  COMP$z,
+  COMP$y,
   TimerMd,
   ({ node, extractValue, lookupEventHandler, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
@@ -34767,7 +34812,7 @@ const timerComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$y = "Redirect";
+const COMP$x = "Redirect";
 const defaultProps$i = {
   to: ""
 };
@@ -34786,7 +34831,7 @@ const RedirectMd = createMetadata({
   }
 });
 const redirectRenderer = createComponentRenderer(
-  COMP$y,
+  COMP$x,
   RedirectMd,
   ({ node, extractValue }) => {
     return /* @__PURE__ */ jsx(Navigate, { to: createUrlWithQueryParams(extractValue(node.props.to)), replace: extractValue.asOptionalBoolean(node.props.replace) });
@@ -34978,7 +35023,7 @@ const Tabs = forwardRef(function Tabs2({
     }
   ) });
 });
-const COMP$x = "Tabs";
+const COMP$w = "Tabs";
 const TabsMd = createMetadata({
   status: "experimental",
   description: "`Tabs` enables users to switch among content panels using clickable tab headers. It provides an efficient way to present multiple related sections in a single interface area, with each tab containing distinct content defined by [TabItem](/components/TabItem) components.",
@@ -34997,7 +35042,7 @@ const TabsMd = createMetadata({
     }
   },
   events: {
-    didChange: dDidChange(COMP$x)
+    didChange: dDidChange(COMP$w)
   },
   apis: {
     next: {
@@ -35020,19 +35065,19 @@ const TabsMd = createMetadata({
   themeVars: parseScssVar(styles$k.themeVars),
   defaultThemeVars: {
     // [`backgroundColor-${COMP}`]: "transparent",
-    [`borderStyle-${COMP$x}`]: "solid",
-    [`borderColor-${COMP$x}`]: "$borderColor",
-    [`borderColor-active-${COMP$x}`]: "$color-primary",
-    [`borderWidth-${COMP$x}`]: "2px",
+    [`borderStyle-${COMP$w}`]: "solid",
+    [`borderColor-${COMP$w}`]: "$borderColor",
+    [`borderColor-active-${COMP$w}`]: "$color-primary",
+    [`borderWidth-${COMP$w}`]: "2px",
     // [`backgroundColor-trigger-${COMP}`]: "transparent",
-    [`backgroundColor-trigger-${COMP$x}--hover`]: "$color-surface-100",
-    [`padding-trigger-${COMP$x}`]: "$space-4"
+    [`backgroundColor-trigger-${COMP$w}--hover`]: "$color-surface-100",
+    [`padding-trigger-${COMP$w}`]: "$space-4"
     // [`backgroundColor-list-${COMP}`]: "$color-primary-50",
     // [`textColor-trigger-${COMP}`]: "$color-primary-100",
   }
 });
 const tabsComponentRenderer = createComponentRenderer(
-  COMP$x,
+  COMP$w,
   TabsMd,
   ({ extractValue, node, renderChild: renderChild2, className, registerComponentApi, lookupEventHandler }) => {
     var _a2, _b, _c;
@@ -35109,7 +35154,7 @@ const Bookmark = ({
   }, [uid, observeIntersection, registerHeading, level, title2, omitFromToc]);
   return /* @__PURE__ */ jsx("span", { ...rest, ref: elementRef, id: uid, "data-anchor": true, className: styles$j.anchorRef, children });
 };
-const COMP$w = "Bookmark";
+const COMP$v = "Bookmark";
 const BookmarkMd = createMetadata({
   status: "stable",
   description: "As its name suggests, this component places a bookmark into its parent component's view. The component has an `id` that you can use in links to navigate (scroll to) the bookmark's location.",
@@ -35142,7 +35187,7 @@ const BookmarkMd = createMetadata({
   }
 });
 const bookmarkComponentRenderer = createComponentRenderer(
-  COMP$w,
+  COMP$v,
   BookmarkMd,
   (rendererContext) => {
     const { node, renderChild: renderChild2, extractValue, layoutContext } = rendererContext;
@@ -35189,18 +35234,18 @@ function AppState({
   }, [bucket, registerComponentApi, update]);
   return null;
 }
-const COMP$v = "AppState";
+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.",
   props: {
     bucket: {
-      description: `This property is the identifier of the bucket to which the \`${COMP$v}\` instance is bound. Multiple \`${COMP$v}\` 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.`,
+      description: `This property is the identifier of the bucket to which the \`${COMP$u}\` instance is bound. Multiple \`${COMP$u}\` instances with the same bucket will share the same state object: any of them updating the state will cause the other instances to view the new, updated state.`,
       valueType: "string",
       defaultValue: defaultProps$f.bucket
     },
     initialValue: {
-      description: `This property contains the initial state value. Though you can use multiple \`${COMP$v}\`component instances for the same bucket with their \`initialValue\` set, it may result in faulty app logic. When xmlui instantiates an \`${COMP$v}\` with an explicit initial value, that value is immediately set. Multiple initial values may result in undesired initialization. By default, the bucked's initial state is undefined.`
+      description: `This property contains the initial state value. Though you can use multiple \`${COMP$u}\`component instances for the same bucket with their \`initialValue\` set, it may result in faulty app logic. When xmlui instantiates an \`${COMP$u}\` with an explicit initial value, that value is immediately set. Multiple initial values may result in undesired initialization. By default, the bucked's initial state is undefined.`
     }
   },
   apis: {
@@ -35215,7 +35260,7 @@ const AppStateMd = createMetadata({
   nonVisual: true
 });
 const appStateComponentRenderer = createComponentRenderer(
-  COMP$v,
+  COMP$u,
   AppStateMd,
   ({ node, extractValue, updateState, registerComponentApi }) => {
     return /* @__PURE__ */ jsx(
@@ -35347,7 +35392,7 @@ const TableOfContents = forwardRef(function TableOfContents2({
     }
   );
 });
-const COMP$u = "TableOfContents";
+const COMP$t = "TableOfContents";
 const COMP_CHILD = "TableOfContentsItem";
 const TableOfContentsMd = createMetadata({
   status: "stable",
@@ -35371,7 +35416,7 @@ const TableOfContentsMd = createMetadata({
   },
   themeVars: parseScssVar(styles$i.themeVars),
   defaultThemeVars: {
-    [`padding-${COMP$u}`]: "$space-2",
+    [`padding-${COMP$t}`]: "$space-2",
     [`textColor-${COMP_CHILD}`]: "$color-secondary-500",
     [`textColor-${COMP_CHILD}--hover`]: "$textColor-primary",
     [`fontSize-${COMP_CHILD}`]: "$fontSize-sm",
@@ -35400,7 +35445,7 @@ function IndexAwareTableOfContents(props) {
   return /* @__PURE__ */ jsx(TableOfContents, { ...props });
 }
 const tableOfContentsRenderer = createComponentRenderer(
-  COMP$u,
+  COMP$t,
   TableOfContentsMd,
   ({ className, node, extractValue }) => {
     var _a2, _b, _c;
@@ -35579,10 +35624,10 @@ const AccordionComponent = forwardRef(function AccordionComponent2({
     }
   ) });
 });
-const COMP$t = "Accordion";
+const COMP$s = "Accordion";
 const AccordionMd = createMetadata({
   status: "in progress",
-  description: `(**NOT IMPLEMENTED YET**) The \`${COMP$t}\` component is a collapsible container that toggles the display of content sections. It helps organize information by expanding or collapsing it based on user interaction.`,
+  description: `(**NOT IMPLEMENTED YET**) The \`${COMP$s}\` component is a collapsible container that toggles the display of content sections. It helps organize information by expanding or collapsing it based on user interaction.`,
   props: {
     triggerPosition: {
       description: `This property indicates the position where the trigger icon should be displayed. The \`start\` value signs the trigger is before the header text (template), and \`end\` indicates that it follows the header.`,
@@ -35611,7 +35656,7 @@ const AccordionMd = createMetadata({
     }
   },
   events: {
-    displayDidChange: dDidChange(COMP$t)
+    displayDidChange: dDidChange(COMP$s)
   },
   apis: {
     expanded: {
@@ -35627,32 +35672,32 @@ const AccordionMd = createMetadata({
       signature: "collapse()"
     },
     toggle: {
-      description: `This method toggles the state of the ${COMP$t} between expanded and collapsed.`,
+      description: `This method toggles the state of the ${COMP$s} between expanded and collapsed.`,
       signature: "toggle()"
     },
-    focus: dFocus(COMP$t)
+    focus: dFocus(COMP$s)
   },
   themeVars: parseScssVar(styles$h.themeVars),
   defaultThemeVars: {
-    [`paddingHorizontal-header-${COMP$t}`]: "$space-3",
-    [`paddingVertical-header-${COMP$t}`]: "$space-3",
-    [`verticalAlignment-header-${COMP$t}`]: "center",
-    [`fontSize-header-${COMP$t}`]: "$fontSize-base",
-    [`fontWeight-header-${COMP$t}`]: "$fontWeight-normal",
-    [`fontFamily-header-${COMP$t}`]: "$fontFamily",
-    [`border-${COMP$t}`]: "0px solid $borderColor",
-    [`width-icon-${COMP$t}`]: "",
-    [`height-icon-${COMP$t}`]: "",
-    [`backgroundColor-header-${COMP$t}`]: "$color-primary-500",
-    [`backgroundColor-header-${COMP$t}-hover`]: "$color-primary-400",
-    [`color-header-${COMP$t}`]: "$color-surface-50",
-    [`color-content-${COMP$t}`]: "$textColor-primary",
-    [`backgroundColor-content-${COMP$t}`]: "transparent",
-    [`color-icon-${COMP$t}`]: "$color-surface-50"
+    [`paddingHorizontal-header-${COMP$s}`]: "$space-3",
+    [`paddingVertical-header-${COMP$s}`]: "$space-3",
+    [`verticalAlignment-header-${COMP$s}`]: "center",
+    [`fontSize-header-${COMP$s}`]: "$fontSize-base",
+    [`fontWeight-header-${COMP$s}`]: "$fontWeight-normal",
+    [`fontFamily-header-${COMP$s}`]: "$fontFamily",
+    [`border-${COMP$s}`]: "0px solid $borderColor",
+    [`width-icon-${COMP$s}`]: "",
+    [`height-icon-${COMP$s}`]: "",
+    [`backgroundColor-header-${COMP$s}`]: "$color-primary-500",
+    [`backgroundColor-header-${COMP$s}-hover`]: "$color-primary-400",
+    [`color-header-${COMP$s}`]: "$color-surface-50",
+    [`color-content-${COMP$s}`]: "$textColor-primary",
+    [`backgroundColor-content-${COMP$s}`]: "transparent",
+    [`color-icon-${COMP$s}`]: "$color-surface-50"
   }
 });
 const accordionComponentRenderer = createComponentRenderer(
-  COMP$t,
+  COMP$s,
   AccordionMd,
   ({ node, renderChild: renderChild2, extractValue, lookupEventHandler, registerComponentApi, className }) => {
     var _a2;
@@ -35708,7 +35753,7 @@ const TabItemComponent = forwardRef(function TabItemComponent2({ children, label
     children
   );
 });
-const COMP$s = "TabItem";
+const COMP$r = "TabItem";
 const TabItemMd = createMetadata({
   status: "stable",
   description: "`TabItem` defines individual tabs within a [Tabs](/components/Tabs) component, providing both the tab header label and the content that displays when the tab is selected. As a non-visual structural component, it serves as a container that organizes content into distinct, switchable sections.",
@@ -35729,7 +35774,7 @@ const TabItemMd = createMetadata({
   }
 });
 const tabItemComponentRenderer = createComponentRenderer(
-  COMP$s,
+  COMP$r,
   TabItemMd,
   (rendererContext) => {
     const { node, renderChild: renderChild2, extractValue, lookupEventHandler } = rendererContext;
@@ -35856,10 +35901,10 @@ const AccordionItemComponent = forwardRef(function AccordionItemComponent2({
     itemId
   );
 });
-const COMP$r = "AccordionItem";
+const COMP$q = "AccordionItem";
 const AccordionItemMd = createMetadata({
   status: "in progress",
-  description: `\`${COMP$r}\` is a non-visual component describing a tab. Tabs component may use nested ${COMP$r} instances from which the user can select.`,
+  description: `\`${COMP$q}\` is a non-visual component describing a tab. Tabs component may use nested ${COMP$q} instances from which the user can select.`,
   props: {
     header: {
       description: "This property declares the text used in the component's header. If not provided, the header will be empty.",
@@ -35869,14 +35914,14 @@ const AccordionItemMd = createMetadata({
       "This property describes the template to use as the component's header."
     ),
     initiallyExpanded: {
-      description: `This property indicates if the ${COMP$r} is expanded (\`true\`) or collapsed (\`false\`).`,
+      description: `This property indicates if the ${COMP$q} is expanded (\`true\`) or collapsed (\`false\`).`,
       valueType: "boolean",
       defaultValue: defaultProps$c.initiallyExpanded
     }
   }
 });
 const accordionItemComponentRenderer = createComponentRenderer(
-  COMP$r,
+  COMP$q,
   AccordionItemMd,
   (rendererContext) => {
     const { node, renderChild: renderChild2, extractValue, className } = rendererContext;
@@ -35900,7 +35945,7 @@ const accordionItemComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$q = "Slider";
+const COMP$p = "Slider";
 const SliderMd = createMetadata({
   status: "stable",
   description: "`Slider` provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.\n\nHover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip.",
@@ -35908,8 +35953,8 @@ const SliderMd = createMetadata({
     initialValue: dInitialValue(),
     label: dLabel(),
     labelPosition: dLabelPosition("top"),
-    labelWidth: dLabelWidth(COMP$q),
-    labelBreak: dLabelBreak(COMP$q),
+    labelWidth: dLabelWidth(COMP$p),
+    labelBreak: dLabelBreak(COMP$p),
     minValue: {
       description: `This property specifies the minimum value of the allowed input range.`,
       valueType: "number",
@@ -35956,9 +36001,9 @@ const SliderMd = createMetadata({
     }
   },
   events: {
-    didChange: dDidChange(COMP$q),
-    gotFocus: dGotFocus(COMP$q),
-    lostFocus: dLostFocus(COMP$q)
+    didChange: dDidChange(COMP$p),
+    gotFocus: dGotFocus(COMP$p),
+    lostFocus: dLostFocus(COMP$p)
   },
   apis: {
     focus: {
@@ -35966,11 +36011,11 @@ const SliderMd = createMetadata({
       signature: "focus(): void"
     },
     value: {
-      description: `This API retrieves the current value of the \`${COMP$q}\`. You can use it to get the value programmatically.`,
+      description: `This API retrieves the current value of the \`${COMP$p}\`. You can use it to get the value programmatically.`,
       signature: "get value(): number | [number, number] | undefined"
     },
     setValue: {
-      description: `This API sets the value of the \`${COMP$q}\`. You can use it to programmatically change the value.`,
+      description: `This API sets the value of the \`${COMP$p}\`. You can use it to programmatically change the value.`,
       signature: "setValue(value: number | [number, number] | undefined): void",
       parameters: {
         value: "The new value to set. Can be a single value or an array of values for range sliders."
@@ -35979,37 +36024,37 @@ const SliderMd = createMetadata({
   },
   themeVars: parseScssVar(styles$D.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-track-${COMP$q}`]: "$color-surface-200",
-    [`backgroundColor-range-${COMP$q}`]: "$color-primary",
-    [`borderWidth-thumb-${COMP$q}`]: "2px",
-    [`borderStyle-thumb-${COMP$q}`]: "solid",
-    [`borderColor-thumb-${COMP$q}`]: "$color-surface-50",
-    [`backgroundColor-thumb-${COMP$q}`]: "$color-primary",
-    [`backgroundColor-thumb-${COMP$q}--hover`]: "$color-primary",
-    [`boxShadow-thumb-${COMP$q}--hover`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
-    [`backgroundColor-thumb-${COMP$q}--active`]: "$color-primary-400",
-    [`boxShadow-thumb-${COMP$q}--active`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
-    [`borderRadius-${COMP$q}-default`]: "$borderRadius",
-    [`borderColor-${COMP$q}-default`]: "transparent",
-    [`borderWidth-${COMP$q}-default`]: "0",
-    [`borderStyle-${COMP$q}-default`]: "solid",
-    [`boxShadow-${COMP$q}-default`]: "none",
+    [`backgroundColor-track-${COMP$p}`]: "$color-surface-200",
+    [`backgroundColor-range-${COMP$p}`]: "$color-primary",
+    [`borderWidth-thumb-${COMP$p}`]: "2px",
+    [`borderStyle-thumb-${COMP$p}`]: "solid",
+    [`borderColor-thumb-${COMP$p}`]: "$color-surface-50",
+    [`backgroundColor-thumb-${COMP$p}`]: "$color-primary",
+    [`backgroundColor-thumb-${COMP$p}--hover`]: "$color-primary",
+    [`boxShadow-thumb-${COMP$p}--hover`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
+    [`backgroundColor-thumb-${COMP$p}--active`]: "$color-primary-400",
+    [`boxShadow-thumb-${COMP$p}--active`]: "0 0 0 6px rgb(from $color-primary r g b / 0.4)",
+    [`borderRadius-${COMP$p}-default`]: "$borderRadius",
+    [`borderColor-${COMP$p}-default`]: "transparent",
+    [`borderWidth-${COMP$p}-default`]: "0",
+    [`borderStyle-${COMP$p}-default`]: "solid",
+    [`boxShadow-${COMP$p}-default`]: "none",
     light: {
-      [`backgroundColor-track-${COMP$q}--disabled`]: "$color-surface-300",
-      [`backgroundColor-range-${COMP$q}--disabled`]: "$color-surface-400",
-      [`backgroundColor-thumb-${COMP$q}`]: "$color-primary-500",
-      [`borderColor-thumb-${COMP$q}`]: "$color-surface-50"
+      [`backgroundColor-track-${COMP$p}--disabled`]: "$color-surface-300",
+      [`backgroundColor-range-${COMP$p}--disabled`]: "$color-surface-400",
+      [`backgroundColor-thumb-${COMP$p}`]: "$color-primary-500",
+      [`borderColor-thumb-${COMP$p}`]: "$color-surface-50"
     },
     dark: {
-      [`backgroundColor-track-${COMP$q}--disabled`]: "$color-surface-600",
-      [`backgroundColor-range-${COMP$q}--disabled`]: "$color-surface-800",
-      [`backgroundColor-thumb-${COMP$q}`]: "$color-primary-400",
-      [`borderColor-thumb-${COMP$q}`]: "$color-surface-950"
+      [`backgroundColor-track-${COMP$p}--disabled`]: "$color-surface-600",
+      [`backgroundColor-range-${COMP$p}--disabled`]: "$color-surface-800",
+      [`backgroundColor-thumb-${COMP$p}`]: "$color-primary-400",
+      [`borderColor-thumb-${COMP$p}`]: "$color-surface-950"
     }
   }
 });
 const sliderComponentRenderer = createComponentRenderer(
-  COMP$q,
+  COMP$p,
   SliderMd,
   ({
     node,
@@ -36350,7 +36395,7 @@ const CarouselComponent = forwardRef(function CarouselComponent2({
     }
   ) });
 });
-const COMP$p = "Carousel";
+const COMP$o = "Carousel";
 const CarouselMd = createMetadata({
   status: "stable",
   description: `This component displays a slideshow by cycling through elements (images, text, or custom slides) like a carousel.`,
@@ -36411,7 +36456,7 @@ const CarouselMd = createMetadata({
     }
   },
   events: {
-    displayDidChange: dDidChange(COMP$p)
+    displayDidChange: dDidChange(COMP$o)
   },
   apis: {
     canScrollPrev: {
@@ -36440,31 +36485,31 @@ const CarouselMd = createMetadata({
   },
   themeVars: parseScssVar(styles$g.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-control-${COMP$p}`]: "$color-primary",
-    [`textColor-control-${COMP$p}`]: "$textColor",
-    [`backgroundColor-control-hover-${COMP$p}`]: "$color-primary",
-    [`textColor-control-hover-${COMP$p}`]: "$textColor",
-    [`backgroundColor-control-active-${COMP$p}`]: "$color-primary",
-    [`backgroundColor-control-disabled-${COMP$p}`]: "$color-surface-200",
-    [`textColor-control-disabled-${COMP$p}`]: "$textColor-disabled",
-    [`textColor-control-active-${COMP$p}`]: "$color-primary",
-    [`backgroundColor-indicator-${COMP$p}`]: "$color-surface-200",
-    [`backgroundColor-indicator-active-${COMP$p}`]: "$color-primary",
-    [`textColor-indicator-${COMP$p}`]: "$color-primary",
-    [`textColor-indicator-active-${COMP$p}`]: "$color-primary",
-    [`backgroundColor-indicator-hover-${COMP$p}`]: "$color-surface-200",
-    [`textColor-indicator-hover-${COMP$p}`]: "$color-primary",
-    [`width-indicator-${COMP$p}`]: "25px",
-    [`height-indicator-${COMP$p}`]: "6px",
-    [`height-control-${COMP$p}`]: "36px",
-    [`width-control-${COMP$p}`]: "36px",
-    [`borderRadius-control-${COMP$p}`]: "50%",
-    [`height-${COMP$p}`]: "100%",
-    [`width-${COMP$p}`]: "100%"
+    [`backgroundColor-control-${COMP$o}`]: "$color-primary",
+    [`textColor-control-${COMP$o}`]: "$textColor",
+    [`backgroundColor-control-hover-${COMP$o}`]: "$color-primary",
+    [`textColor-control-hover-${COMP$o}`]: "$textColor",
+    [`backgroundColor-control-active-${COMP$o}`]: "$color-primary",
+    [`backgroundColor-control-disabled-${COMP$o}`]: "$color-surface-200",
+    [`textColor-control-disabled-${COMP$o}`]: "$textColor-disabled",
+    [`textColor-control-active-${COMP$o}`]: "$color-primary",
+    [`backgroundColor-indicator-${COMP$o}`]: "$color-surface-200",
+    [`backgroundColor-indicator-active-${COMP$o}`]: "$color-primary",
+    [`textColor-indicator-${COMP$o}`]: "$color-primary",
+    [`textColor-indicator-active-${COMP$o}`]: "$color-primary",
+    [`backgroundColor-indicator-hover-${COMP$o}`]: "$color-surface-200",
+    [`textColor-indicator-hover-${COMP$o}`]: "$color-primary",
+    [`width-indicator-${COMP$o}`]: "25px",
+    [`height-indicator-${COMP$o}`]: "6px",
+    [`height-control-${COMP$o}`]: "36px",
+    [`width-control-${COMP$o}`]: "36px",
+    [`borderRadius-control-${COMP$o}`]: "50%",
+    [`height-${COMP$o}`]: "100%",
+    [`width-${COMP$o}`]: "100%"
   }
 });
 const carouselComponentRenderer = createComponentRenderer(
-  COMP$p,
+  COMP$o,
   CarouselMd,
   ({ node, renderChild: renderChild2, className, extractValue, lookupEventHandler, registerComponentApi }) => {
     var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
@@ -36516,12 +36561,12 @@ const CarouselItemComponent = forwardRef(function CarouselItemComponent2({ child
     /* @__PURE__ */ jsx("div", { className: styles$g.innerWrapper, ref: forwardedRef, style: style2, children })
   );
 });
-const COMP$o = "CarouselItem";
+const COMP$n = "CarouselItem";
 const CarouselItemMd = createMetadata({
   status: "in progress"
 });
 const carouselItemComponentRenderer = createComponentRenderer(
-  COMP$o,
+  COMP$n,
   CarouselItemMd,
   (rendererContext) => {
     const { node, renderChild: renderChild2 } = rendererContext;
@@ -36535,19 +36580,19 @@ const styles$f = {
 const Breakout = ({ children, style: style2, ...rest }) => {
   return /* @__PURE__ */ jsx("div", { ...rest, style: style2, className: styles$f.breakout, children });
 };
-const COMP$n = "Breakout";
+const COMP$m = "Breakout";
 const BreakoutMd = createMetadata({
   status: "stable",
-  description: `The \`${COMP$n}\` component creates a breakout section. It allows its child to occupy the entire width of the UI even if the app or the parent container constrains the maximum content width.`
+  description: `The \`${COMP$m}\` component creates a breakout section. It allows its child to occupy the entire width of the UI even if the app or the parent container constrains the maximum content width.`
 });
 const breakoutComponentRenderer = createComponentRenderer(
-  COMP$n,
+  COMP$m,
   BreakoutMd,
   ({ node, renderChild: renderChild2 }) => {
     return /* @__PURE__ */ jsx(Breakout, { children: renderChild2(node.children) });
   }
 );
-const COMP$m = "ToneChangerButton";
+const COMP$l = "ToneChangerButton";
 const LIGHT_TO_DARK_ICON = "lightToDark:ToneChangerButton";
 const DARK_TO_LIGHT_ICON = "darkToLight:ToneChangerButton";
 const defaultProps$a = {
@@ -36560,16 +36605,16 @@ const ToneChangerButtonMd = createMetadata({
   description: "`ToneChangerButton` enables the user to switch between light and dark modes.",
   props: {
     lightToDarkIcon: {
-      description: `The icon displayed when the theme is in light mode and will switch to dark. You can change the default icon for all ${COMP$m} instances with the "icon.lightToDark:ToneChangerButton" declaration in the app configuration file.`,
+      description: `The icon displayed when the theme is in light mode and will switch to dark. You can change the default icon for all ${COMP$l} instances with the "icon.lightToDark:ToneChangerButton" declaration in the app configuration file.`,
       defaultValue: defaultProps$a.lightToDarkIcon
     },
     darkToLightIcon: {
-      description: `The icon displayed when the theme is in dark mode and will switch to light. You can change the default icon for all ${COMP$m} instances with the "icon.darkToLight:ToneChangerButton" declaration in the app configuration file.`,
+      description: `The icon displayed when the theme is in dark mode and will switch to light. You can change the default icon for all ${COMP$l} instances with the "icon.darkToLight:ToneChangerButton" declaration in the app configuration file.`,
       defaultValue: defaultProps$a.darkToLightIcon
     }
   },
   events: {
-    click: dClick(COMP$m)
+    click: dClick(COMP$l)
   }
 });
 function ToneChangerButton({
@@ -36599,7 +36644,7 @@ function ToneChangerButton({
   );
 }
 const toneChangerButtonComponentRenderer = createComponentRenderer(
-  COMP$m,
+  COMP$l,
   ToneChangerButtonMd,
   ({ node, extractValue, lookupEventHandler }) => {
     return /* @__PURE__ */ jsx(
@@ -36660,7 +36705,7 @@ const ToneSwitch = forwardRef(function ToneSwitch2({
     }
   ) });
 });
-const COMP$l = "ToneSwitch";
+const COMP$k = "ToneSwitch";
 const ToneSwitchMd = createMetadata({
   status: "stable",
   description: "`ToneSwitch` enables the user to switch between light and dark modes using a switch control.",
@@ -36679,22 +36724,22 @@ const ToneSwitchMd = createMetadata({
   themeVars: parseScssVar(styles$e.themeVars),
   limitThemeVarsToComponent: true,
   defaultThemeVars: {
-    [`backgroundColor-${COMP$l}-light`]: "$color-surface-200",
-    [`color-${COMP$l}-light`]: "$color-text-primary",
-    [`backgroundColor-${COMP$l}-dark`]: "$color-primary-500",
-    [`color-${COMP$l}-dark`]: "$color-surface-0",
-    [`borderColor-${COMP$l}`]: "$color-surface-200",
-    [`borderColor-${COMP$l}--hover`]: "$color-surface-300",
+    [`backgroundColor-${COMP$k}-light`]: "$color-surface-200",
+    [`color-${COMP$k}-light`]: "$color-text-primary",
+    [`backgroundColor-${COMP$k}-dark`]: "$color-primary-500",
+    [`color-${COMP$k}-dark`]: "$color-surface-0",
+    [`borderColor-${COMP$k}`]: "$color-surface-200",
+    [`borderColor-${COMP$k}--hover`]: "$color-surface-300",
     dark: {
-      [`backgroundColor-${COMP$l}-light`]: "$color-surface-700",
-      [`color-${COMP$l}-light`]: "$color-text-primary",
-      [`borderColor-${COMP$l}`]: "$color-surface-600",
-      [`borderColor-${COMP$l}--hover`]: "$color-surface-500"
+      [`backgroundColor-${COMP$k}-light`]: "$color-surface-700",
+      [`color-${COMP$k}-light`]: "$color-text-primary",
+      [`borderColor-${COMP$k}`]: "$color-surface-600",
+      [`borderColor-${COMP$k}--hover`]: "$color-surface-500"
     }
   }
 });
 const toneSwitchComponentRenderer = createComponentRenderer(
-  COMP$l,
+  COMP$k,
   ToneSwitchMd,
   ({ node, extractValue, className }) => {
     return /* @__PURE__ */ jsx(
@@ -36741,7 +36786,7 @@ function APICallNative({ registerComponentApi, node, uid }) {
   }, [execute, registerComponentApi]);
   return null;
 }
-const COMP$k = "APICall";
+const COMP$j = "APICall";
 const APICallMd = createMetadata({
   status: "stable",
   description: "`APICall` creates, updates or deletes data on the backend, versus [`DataSource`](/components/DataSource) which fetches data. Unlike DataSource, APICall doesn't automatically execute - you must trigger it manually with the `execute()` method, typically from form submissions or button clicks.",
@@ -36772,15 +36817,15 @@ const APICallMd = createMetadata({
       description: "You can optionally define request header values as key-value pairs, where the key is the ID of the particular header and the value is that header's corresponding value."
     },
     confirmTitle: {
-      description: `This optional string sets the title in the confirmation dialog that is displayed before the \`${COMP$k}\` is executed.`,
+      description: `This optional string sets the title in the confirmation dialog that is displayed before the \`${COMP$j}\` is executed.`,
       valueType: "string"
     },
     confirmMessage: {
-      description: `This optional string sets the message in the confirmation dialog that is displayed before the \`${COMP$k}\` is executed.`,
+      description: `This optional string sets the message in the confirmation dialog that is displayed before the \`${COMP$j}\` is executed.`,
       valueType: "string"
     },
     confirmButtonLabel: {
-      description: `This optional string property enables the customization of the submit button in the confirmation dialog that is displayed before the \`${COMP$k}\` is executed.`,
+      description: `This optional string property enables the customization of the submit button in the confirmation dialog that is displayed before the \`${COMP$j}\` is executed.`,
       valueType: "string"
     },
     inProgressNotificationMessage: {
@@ -36839,13 +36884,13 @@ const APICallMd = createMetadata({
   }
 });
 const apiCallRenderer = createComponentRenderer(
-  COMP$k,
+  COMP$j,
   APICallMd,
   ({ node, registerComponentApi, uid }) => {
     return /* @__PURE__ */ jsx(APICallNative, { registerComponentApi, node, uid });
   }
 );
-const COMP$j = "Option";
+const COMP$i = "Option";
 const OptionMd = createMetadata({
   status: "stable",
   description: "`Option` defines selectable items for choice-based components, providing both the underlying value and display text for selection interfaces. It serves as a non-visual data structure that describes individual choices within [Select](/components/Select), [AutoComplete](/components/AutoComplete), and other selection components.",
@@ -36864,7 +36909,7 @@ const OptionMd = createMetadata({
   }
 });
 const optionComponentRenderer = createComponentRenderer(
-  COMP$j,
+  COMP$i,
   OptionMd,
   ({ node, extractValue, className, renderChild: renderChild2, layoutContext }) => {
     var _a2, _b;
@@ -36896,7 +36941,7 @@ const optionComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$i = "AutoComplete";
+const COMP$h = "AutoComplete";
 const AutoCompleteMd = createMetadata({
   status: "experimental",
   description: "`AutoComplete` is a searchable dropdown input that allows users to type and filter through options, with support for single or multiple selections. Unlike a basic [`Select`](/components/Select), it provides type-ahead functionality and can allow users to create new options.",
@@ -36941,8 +36986,8 @@ const AutoCompleteMd = createMetadata({
       ...dLabelPosition(),
       defaultValue: defaultProps$y.labelPosition
     },
-    labelWidth: dLabelWidth(COMP$i),
-    labelBreak: dLabelBreak(COMP$i),
+    labelWidth: dLabelWidth(COMP$h),
+    labelBreak: dLabelBreak(COMP$h),
     dropdownHeight: d("This property sets the height of the dropdown list."),
     multi: {
       ...dMulti(),
@@ -36956,16 +37001,16 @@ const AutoCompleteMd = createMetadata({
     )
   },
   events: {
-    gotFocus: dGotFocus(COMP$i),
-    lostFocus: dLostFocus(COMP$i),
-    didChange: dDidChange(COMP$i),
+    gotFocus: dGotFocus(COMP$h),
+    lostFocus: dLostFocus(COMP$h),
+    didChange: dDidChange(COMP$h),
     itemCreated: {
       description: "This event is triggered when a new item is created by the user (if `creatable` is enabled)."
     }
   },
   apis: {
     focus: {
-      description: `This method focuses the ${COMP$i} component.`,
+      description: `This method focuses the ${COMP$h} component.`,
       signature: "focus()"
     },
     value: {
@@ -36987,30 +37032,30 @@ const AutoCompleteMd = createMetadata({
   },
   themeVars: parseScssVar(styles$E.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-menu-${COMP$i}`]: "$backgroundColor-primary",
-    [`boxShadow-menu-${COMP$i}`]: "$boxShadow-md",
-    [`borderRadius-menu-${COMP$i}`]: "$borderRadius",
-    [`borderWidth-menu-${COMP$i}`]: "1px",
-    [`borderColor-menu-${COMP$i}`]: "$borderColor",
-    [`backgroundColor-item-${COMP$i}`]: "$backgroundColor-dropdown-item",
-    [`backgroundColor-item-${COMP$i}--hover`]: "$backgroundColor-dropdown-item--active",
-    [`backgroundColor-item-${COMP$i}--active`]: "$backgroundColor-dropdown-item--active",
+    [`backgroundColor-menu-${COMP$h}`]: "$backgroundColor-primary",
+    [`boxShadow-menu-${COMP$h}`]: "$boxShadow-md",
+    [`borderRadius-menu-${COMP$h}`]: "$borderRadius",
+    [`borderWidth-menu-${COMP$h}`]: "1px",
+    [`borderColor-menu-${COMP$h}`]: "$borderColor",
+    [`backgroundColor-item-${COMP$h}`]: "$backgroundColor-dropdown-item",
+    [`backgroundColor-item-${COMP$h}--hover`]: "$backgroundColor-dropdown-item--active",
+    [`backgroundColor-item-${COMP$h}--active`]: "$backgroundColor-dropdown-item--active",
     [`minHeight-Input`]: "39px",
-    [`backgroundColor-${COMP$i}-badge`]: "$color-primary-500",
-    [`fontSize-${COMP$i}-badge`]: "$fontSize-sm",
-    [`borderRadius-${COMP$i}-badge`]: "$borderRadius",
-    [`paddingHorizontal-${COMP$i}-badge`]: "$space-2",
-    [`paddingVertical-${COMP$i}-badge`]: "$space-1",
-    [`paddingHorizontal-${COMP$i}`]: "$space-1",
-    [`paddingVertical-${COMP$i}`]: "$space-2",
-    [`backgroundColor-${COMP$i}-badge--hover`]: "$color-primary-400",
-    [`backgroundColor-${COMP$i}-badge--active`]: "$color-primary-500",
-    [`textColor-item-${COMP$i}--disabled`]: "$color-surface-200",
-    [`textColor-${COMP$i}-badge`]: "$const-color-surface-50"
+    [`backgroundColor-${COMP$h}-badge`]: "$color-primary-500",
+    [`fontSize-${COMP$h}-badge`]: "$fontSize-sm",
+    [`borderRadius-${COMP$h}-badge`]: "$borderRadius",
+    [`paddingHorizontal-${COMP$h}-badge`]: "$space-2",
+    [`paddingVertical-${COMP$h}-badge`]: "$space-1",
+    [`paddingHorizontal-${COMP$h}`]: "$space-1",
+    [`paddingVertical-${COMP$h}`]: "$space-2",
+    [`backgroundColor-${COMP$h}-badge--hover`]: "$color-primary-400",
+    [`backgroundColor-${COMP$h}-badge--active`]: "$color-primary-500",
+    [`textColor-item-${COMP$h}--disabled`]: "$color-surface-200",
+    [`textColor-${COMP$h}-badge`]: "$const-color-surface-50"
   }
 });
 const autoCompleteComponentRenderer = createComponentRenderer(
-  COMP$i,
+  COMP$h,
   AutoCompleteMd,
   ({
     node,
@@ -37101,10 +37146,10 @@ const Backdrop = forwardRef(function Backdrop2({
     }
   );
 });
-const COMP$h = "Backdrop";
+const COMP$g = "Backdrop";
 const BackdropMd = createMetadata({
   status: "stable",
-  description: `The \`${COMP$h}\` component is a semi-transparent overlay that appears on top of its child component to obscure or highlight the content behind it.`,
+  description: `The \`${COMP$g}\` component is a semi-transparent overlay that appears on top of its child component to obscure or highlight the content behind it.`,
   props: {
     overlayTemplate: dComponent(
       "This property defines the component template for an optional overlay to display over the component."
@@ -37120,12 +37165,12 @@ const BackdropMd = createMetadata({
   },
   themeVars: parseScssVar(styles$d.themeVars),
   defaultThemeVars: {
-    [`backgroundColor-${COMP$h}`]: "black",
-    [`opacity-${COMP$h}`]: "0.1"
+    [`backgroundColor-${COMP$g}`]: "black",
+    [`opacity-${COMP$g}`]: "0.1"
   }
 });
 const backdropComponentRenderer = createComponentRenderer(
-  COMP$h,
+  COMP$g,
   BackdropMd,
   ({ node, extractValue, renderChild: renderChild2, className }) => {
     var _a2;
@@ -39066,7 +39111,7 @@ const htmlWbrTagRenderer = createComponentRenderer(
     return /* @__PURE__ */ jsx("wbr", { className, ...props, children: renderChild2(node.children) });
   }
 );
-const COMP$g = "ColorPicker";
+const COMP$f = "ColorPicker";
 const ColorPickerMd = createMetadata({
   status: "stable",
   description: "`ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values.",
@@ -39074,8 +39119,8 @@ const ColorPickerMd = createMetadata({
     initialValue: dInitialValue(),
     label: dLabel(),
     labelPosition: dLabelPosition(),
-    labelWidth: dLabelWidth(COMP$g),
-    labelBreak: dLabelBreak(COMP$g),
+    labelWidth: dLabelWidth(COMP$f),
+    labelBreak: dLabelBreak(COMP$f),
     enabled: dEnabled(),
     autoFocus: dAutoFocus(),
     required: dRequired(),
@@ -39083,21 +39128,21 @@ const ColorPickerMd = createMetadata({
     validationStatus: dValidationStatus(defaultProps$t.validationStatus)
   },
   events: {
-    didChange: dDidChange(COMP$g),
-    gotFocus: dGotFocus(COMP$g),
-    lostFocus: dLostFocus(COMP$g)
+    didChange: dDidChange(COMP$f),
+    gotFocus: dGotFocus(COMP$f),
+    lostFocus: dLostFocus(COMP$f)
   },
   apis: {
     focus: {
-      description: `Focus the ${COMP$g} component.`,
+      description: `Focus the ${COMP$f} component.`,
       signature: "focus(): void"
     },
     value: {
-      description: `This method returns the current value of the ${COMP$g}.`,
+      description: `This method returns the current value of the ${COMP$f}.`,
       signature: "get value(): string"
     },
     setValue: {
-      description: `This method sets the current value of the ${COMP$g}.`,
+      description: `This method sets the current value of the ${COMP$f}.`,
       signature: "set value(value: string): void",
       parameters: {
         value: "The new value to set for the color picker."
@@ -39119,8 +39164,8 @@ const colorPickerComponentRenderer = createComponentRenderer(
     updateState
   }) => {
     var _a2, _b, _c, _d, _e, _f, _g, _h;
-    const enabled2 = extractValue.asOptionalBoolean((_a2 = node.props) == null ? void 0 : _a2.enabled, true);
-    const readonly = extractValue.asOptionalBoolean((_b = node.props) == null ? void 0 : _b.readOnly, false);
+    const readOnly2 = extractValue.asOptionalBoolean((_a2 = node.props) == null ? void 0 : _a2.readOnly, false);
+    const enabled2 = extractValue.asOptionalBoolean((_b = node.props) == null ? void 0 : _b.enabled, true);
     return /* @__PURE__ */ jsx(
       ColorPicker,
       {
@@ -39134,7 +39179,8 @@ const colorPickerComponentRenderer = createComponentRenderer(
         registerComponentApi,
         className,
         required: extractValue.asOptionalBoolean((_c = node.props) == null ? void 0 : _c.required),
-        enabled: enabled2 && !readonly,
+        enabled: enabled2 && !readOnly2,
+        readOnly: readOnly2,
         autoFocus: extractValue.asOptionalBoolean((_d = node.props) == null ? void 0 : _d.autoFocus),
         label: extractValue((_e = node.props) == null ? void 0 : _e.label),
         labelPosition: extractValue((_f = node.props) == null ? void 0 : _f.labelPosition),
@@ -39144,38 +39190,6 @@ const colorPickerComponentRenderer = createComponentRenderer(
     );
   }
 );
-const COMP$f = "RadioItem";
-const RadioItemMd = createMetadata({
-  status: "experimental",
-  description: `The \`${COMP$f}\` component is a radio button that is part of a group of radio buttons.`,
-  props: {
-    checked: {
-      description: "This property specifies whether the radio button is checked.",
-      defaultValue: defaultProps$D.checked
-    },
-    value: {
-      description: "This property specifies the value of the radio button.",
-      defaultValue: defaultProps$D.value
-    }
-  },
-  events: {
-    didChange: dDidChange(COMP$f)
-  }
-});
-const radioItemComponentRenderer = createComponentRenderer(
-  COMP$f,
-  RadioItemMd,
-  ({ node, extractValue, lookupEventHandler }) => {
-    return /* @__PURE__ */ jsx(
-      RadioItem,
-      {
-        checked: extractValue(node.props.checked),
-        value: extractValue(node.props.value),
-        onDidChange: lookupEventHandler("didChange")
-      }
-    );
-  }
-);
 const wrapper$3 = "_wrapper_1r5nz_13";
 const inspectableNode = "_inspectableNode_1r5nz_28";
 const inspectOverlay = "_inspectOverlay_1r5nz_38";
@@ -42120,9 +42134,6 @@ class ComponentRegistry {
     if (process.env.VITE_USED_COMPONENTS_CarouselItem !== "false") {
       this.registerCoreComponent(carouselItemComponentRenderer);
     }
-    if (process.env.VITE_USED_COMPONENTS_RadioItem !== "false") {
-      this.registerCoreComponent(radioItemComponentRenderer);
-    }
     if (process.env.VITE_USED_COMPONENTS_FileUploadDropZone !== "false") {
       this.registerCoreComponent(fileUploadDropZoneComponentRenderer);
     }
@@ -43410,7 +43421,7 @@ function IconProvider({ children }) {
     /* @__PURE__ */ jsx("svg", { style: { display: "none" }, ref: spriteRootRef })
   ] });
 }
-const version = "0.10.12";
+const version = "0.10.13";
 const miscellaneousUtils = {
   capitalize,
   pluralize: pluralize$1,
@@ -43713,7 +43724,7 @@ function createContainerReducer(debugView) {
           let tempValueInLocalVars = localVars;
           setWith(state, path, value, (nsValue, key, nsObject) => {
             tempValueInLocalVars = tempValueInLocalVars == null ? void 0 : tempValueInLocalVars[key];
-            if (nsValue === void 0 && tempValueInLocalVars === void 0 && isPlainObject(target2)) {
+            if (nsValue === void 0 && isPlainObject(tempValueInLocalVars) && isPlainObject(target2)) {
               const next = Object(nsValue);
               return next;
             }
@@ -45229,7 +45240,8 @@ const Container = memo(
     memoedVarsRef,
     isImplicit,
     uidInfoRef: parentUidInfoRef,
-    children
+    children,
+    ...rest
   }, ref) {
     var _a2;
     const { apiBoundContainer } = node;
@@ -45575,7 +45587,7 @@ const Container = memo(
       delete fnsRef.current[uid];
     });
     const stableRenderChild = useCallback(
-      (childNode, lc, pRenderContext, uidInfoRef2, ref2) => {
+      (childNode, lc, pRenderContext, uidInfoRef2, ref2, rest2) => {
         if (typeof childNode === "string") {
           throw Error("should be resolved for now");
         }
@@ -45620,7 +45632,8 @@ const Container = memo(
         });
         if (renderedChildren2.length === 1) {
           return ref2 && renderedChildren2[0] && isValidElement(renderedChildren2[0]) ? React__default.cloneElement(renderedChildren2[0], {
-            ref: composeRefs(ref2, renderedChildren2[0].ref)
+            ref: composeRefs(ref2, renderedChildren2[0].ref),
+            ...mergeProps(renderedChildren2[0].props, rest2)
           }) : renderedChildren2[0];
         }
         return renderedChildren2;
@@ -45651,7 +45664,8 @@ const Container = memo(
       layoutContextRef == null ? void 0 : layoutContextRef.current,
       parentRenderContext,
       uidInfoRef,
-      ref
+      ref,
+      rest
     );
     const renderedLoaders = renderLoaders({
       uidInfo,
@@ -46920,7 +46934,7 @@ const ComponentAdapter = forwardRef(function ComponentAdapter2({
   );
   const mouseEventHandlers = useMouseEventHandlers(
     memoedLookupEventHandler,
-    (descriptor == null ? void 0 : descriptor.nonVisual) || isApiBound
+    (descriptor == null ? void 0 : descriptor.nonVisual) || isApiBound || isCompoundComponent
   );
   const { getResourceUrl } = useTheme();
   const extractResourceUrl = useCallback(