xmlui 0.9.59 → 0.9.61

package/dist/scripts/src/components/CodeBlock/CodeBlock.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.codeBlockComponentRenderer = exports.CodeBlockMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CodeBlock_module_scss_1 = __importDefault(require("./CodeBlock.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const CodeBlockNative_1 = require("./CodeBlockNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "CodeBlock";
-exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
+exports.CodeBlockMd = (0, metadata_helpers_1.createMetadata)({
     description: `The \`${COMP}\` component displays code with optional syntax highlighting and meta information.`,
     status: "in progress",
     props: {},

package/dist/scripts/src/components/ColorPicker/ColorPicker.js

@@ -5,14 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.colorPickerComponentRenderer = exports.ColorPickerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const ColorPickerNative_1 = require("./ColorPickerNative");
 const metadata_helpers_1 = require("../metadata-helpers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const ColorPicker_module_scss_1 = __importDefault(require("./ColorPicker.module.scss"));
 const COMP = "ColorPicker";
-exports.ColorPickerMd = (0, ComponentDefs_1.createMetadata)({
+exports.ColorPickerMd = (0, metadata_helpers_1.createMetadata)({
     description: "`ColorPicker` enables users to choose colors by specifying RGB, HSL, or HEX values.",
     props: {
         initialValue: (0, metadata_helpers_1.dInitialValue)(),

package/dist/scripts/src/components/Column/Column.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.columnComponentRenderer = exports.ColumnMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
+const metadata_helpers_1 = require("../metadata-helpers");
 const ColumnNative_1 = require("./ColumnNative");
 const COMP = "Column";
-exports.ColumnMd = (0, ComponentDefs_1.createMetadata)({
+exports.ColumnMd = (0, metadata_helpers_1.createMetadata)({
     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 " +

package/dist/scripts/src/components/ContentSeparator/ContentSeparator.js

@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.contentSeparatorComponentRenderer = exports.ContentSeparatorMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ContentSeparator_module_scss_1 = __importDefault(require("./ContentSeparator.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const abstractions_1 = require("../abstractions");
 const ContentSeparatorNative_1 = require("./ContentSeparatorNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "ContentSeparator";
-exports.ContentSeparatorMd = (0, ComponentDefs_1.createMetadata)({
+exports.ContentSeparatorMd = (0, metadata_helpers_1.createMetadata)({
     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 " +

package/dist/scripts/src/components/DatePicker/DatePicker.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.datePickerComponentRenderer = exports.DatePickerMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DatePicker_module_scss_1 = __importDefault(require("./DatePicker.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const DatePickerNative_1 = require("./DatePickerNative");
 const COMP = "DatePicker";
-exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
+exports.DatePickerMd = (0, metadata_helpers_1.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 " +
@@ -112,7 +111,7 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
     },
     apis: {
         focus: (0, metadata_helpers_1.dFocus)(COMP),
-        value: (0, ComponentDefs_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
+        value: (0, metadata_helpers_1.d)(`You can query the component's value. If no value is set, it will retrieve \`undefined\`.`),
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
     themeVars: (0, themeVars_1.parseScssVar)(DatePicker_module_scss_1.default.themeVars),

package/dist/scripts/src/components/DropdownMenu/DropdownMenu.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.menuSeparatorRenderer = exports.MenuSeparatorMd = exports.subMenuItemRenderer = exports.SubMenuItemMd = exports.menuItemRenderer = exports.MenuItemMd = exports.dropdownMenuComponentRenderer = exports.DropdownMenuMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const DropdownMenu_module_scss_1 = __importDefault(require("./DropdownMenu.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const abstractions_1 = require("../abstractions");
@@ -14,7 +13,7 @@ const metadata_helpers_1 = require("../metadata-helpers");
 const IconNative_1 = require("../Icon/IconNative");
 const DropdownMenuNative_1 = require("./DropdownMenuNative");
 const DDMCOMP = "DropdownMenu";
-exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
+exports.DropdownMenuMd = (0, metadata_helpers_1.createMetadata)({
     description: "`DropdownMenu` provides a space-efficient way to present multiple options or " +
         "actions through a collapsible interface. When clicked, the trigger button reveals " +
         "a menu that can include items, separators, and nested submenus, making it ideal " +
@@ -60,10 +59,10 @@ exports.DropdownMenuMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     events: {
-        willOpen: (0, ComponentDefs_1.d)(`This event fires when the \`${DDMCOMP}\` component is opened.`),
+        willOpen: (0, metadata_helpers_1.d)(`This event fires when the \`${DDMCOMP}\` component is opened.`),
     },
     apis: {
-        close: (0, ComponentDefs_1.d)(`This method command closes the dropdown.`),
+        close: (0, metadata_helpers_1.d)(`This method command closes the dropdown.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(DropdownMenu_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
@@ -80,7 +79,7 @@ exports.dropdownMenuComponentRenderer = (0, renderers_1.createComponentRenderer)
     return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.DropdownMenu, { triggerTemplate: renderChild((_a = node.props) === null || _a === void 0 ? void 0 : _a.triggerTemplate), label: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.label), registerComponentApi: registerComponentApi, onWillOpen: lookupEventHandler("willOpen"), style: layoutCss, alignment: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.alignment), disabled: !extractValue.asOptionalBoolean(node.props.enabled, true), triggerButtonThemeColor: extractValue(node.props.triggerButtonThemeColor), triggerButtonVariant: extractValue(node.props.triggerButtonVariant), triggerButtonIcon: extractValue(node.props.triggerButtonIcon), triggerButtonIconPosition: extractValue(node.props.triggerButtonIconPosition), children: renderChild(node.children) }));
 });
 const MICOMP = "MenuItem";
-exports.MenuItemMd = (0, ComponentDefs_1.createMetadata)({
+exports.MenuItemMd = (0, metadata_helpers_1.createMetadata)({
     description: "`MenuItem` represents individual clickable items within dropdown menus and other " +
         "menu components. Each menu item can display text, icons, and respond to clicks " +
         "with either navigation or custom actions, making it the building block for " +
@@ -146,7 +145,7 @@ exports.menuItemRenderer = (0, renderers_1.createComponentRenderer)(MICOMP, expo
     return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.MenuItem, { onClick: clickHandler, label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), style: layoutCss, iconPosition: extractValue(node.props.iconPosition), icon: ((_b = node.props) === null || _b === void 0 ? void 0 : _b.icon) && ((0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: extractValue(node.props.icon), fallback: extractValue(node.props.icon) })), active: extractValue.asOptionalBoolean(node.props.active, false), enabled: extractValue.asOptionalBoolean(node.props.enabled, true), children: renderChild(node.children) }));
 });
 const SMCOMP = "SubMenuItem";
-exports.SubMenuItemMd = (0, ComponentDefs_1.createMetadata)({
+exports.SubMenuItemMd = (0, metadata_helpers_1.createMetadata)({
     description: "`SubMenuItem` creates hierarchical menu structures by acting as both a menu " +
         "item and a container for nested menu items. When clicked or hovered, it reveals " +
         "a submenu containing additional [MenuItem](/components/MenuItem), " +
@@ -164,7 +163,7 @@ exports.subMenuItemRenderer = (0, renderers_1.createComponentRenderer)(SMCOMP, e
     return ((0, jsx_runtime_1.jsx)(DropdownMenuNative_1.SubMenuItem, { label: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.label), triggerTemplate: renderChild((_b = node.props) === null || _b === void 0 ? void 0 : _b.triggerTemplate), children: renderChild(node.children) }));
 });
 const MSEP = "MenuSeparator";
-exports.MenuSeparatorMd = (0, ComponentDefs_1.createMetadata)({
+exports.MenuSeparatorMd = (0, metadata_helpers_1.createMetadata)({
     description: "`MenuSeparator` displays a separator line between menu items to group related " +
         "menu options within `DropdownMenu`.",
     docFolder: DDMCOMP,

package/dist/scripts/src/components/EmojiSelector/EmojiSelector.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.emojiSelectorRenderer = exports.EmojiSelectorMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const metadata_helpers_1 = require("../metadata-helpers");
 const EmojiSelectorNative_1 = require("./EmojiSelectorNative");
 const COMP = "EmojiSelector";
-exports.EmojiSelectorMd = (0, ComponentDefs_1.createMetadata)({
+exports.EmojiSelectorMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: "`EmojiSelector` enables users to browse, search and select emojis from " +
         "their system's native emoji set.",
@@ -16,7 +15,7 @@ exports.EmojiSelectorMd = (0, ComponentDefs_1.createMetadata)({
         autoFocus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dAutoFocus)()), { defaultValue: EmojiSelectorNative_1.defaultProps.autoFocus }),
     },
     events: {
-        select: (0, ComponentDefs_1.d)(`This event is fired when the user selects an emoticon from this component.`),
+        select: (0, metadata_helpers_1.d)(`This event is fired when the user selects an emoticon from this component.`),
     },
 });
 exports.emojiSelectorRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.EmojiSelectorMd, ({ node, lookupEventHandler, extractValue }) => {

package/dist/scripts/src/components/ExpandableItem/ExpandableItem.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.expandableItemComponentRenderer = exports.ExpandableItemMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ExpandableItem_module_scss_1 = __importDefault(require("./ExpandableItem.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const abstractions_1 = require("../abstractions");
 const metadata_helpers_1 = require("../../components/metadata-helpers");
 const ExpandableItemNative_1 = require("./ExpandableItemNative");
 const COMP = "ExpandableItem";
-exports.ExpandableItemMd = (0, ComponentDefs_1.createMetadata)({
+exports.ExpandableItemMd = (0, metadata_helpers_1.createMetadata)({
     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.",
@@ -52,13 +51,13 @@ exports.ExpandableItemMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     events: {
-        expandedChange: (0, ComponentDefs_1.d)(`This event fires when the expandable item is expanded or collapsed. It provides a boolean value indicating the new state.`),
+        expandedChange: (0, metadata_helpers_1.d)(`This event fires when the expandable item is expanded or collapsed. It provides a boolean value indicating the new state.`),
     },
     apis: {
-        expand: (0, ComponentDefs_1.d)(`This method expands the expandable item.`),
-        collapse: (0, ComponentDefs_1.d)(`This method collapses the expandable item.`),
-        toggle: (0, ComponentDefs_1.d)(`This method toggles the expandable item's expanded state.`),
-        isExpanded: (0, ComponentDefs_1.d)(`This method returns a boolean indicating whether the expandable item is currently expanded.`),
+        expand: (0, metadata_helpers_1.d)(`This method expands the expandable item.`),
+        collapse: (0, metadata_helpers_1.d)(`This method collapses the expandable item.`),
+        toggle: (0, metadata_helpers_1.d)(`This method toggles the expandable item's expanded state.`),
+        isExpanded: (0, metadata_helpers_1.d)(`This method returns a boolean indicating whether the expandable item is currently expanded.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(ExpandableItem_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,

package/dist/scripts/src/components/FileInput/FileInput.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fileInputRenderer = exports.FileInputMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FileInput_module_scss_1 = __importDefault(require("./FileInput.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../../components/metadata-helpers");
@@ -15,7 +14,7 @@ const IconNative_1 = require("../Icon/IconNative");
 const FileInputNative_1 = require("./FileInputNative");
 const COMP = "FileInput";
 const DEFAULT_ICON = "browse:FileInput";
-exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
+exports.FileInputMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`FileInput` enables users to select files from their device's file system for " +
         "upload or processing. It combines a text field displaying selected files with " +
@@ -33,23 +32,23 @@ exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
-        buttonVariant: (0, ComponentDefs_1.d)("The button variant to use", abstractions_1.buttonVariantNames),
-        buttonLabel: (0, ComponentDefs_1.d)(`This property is an optional string to set a label for the button part.`),
-        buttonIcon: (0, ComponentDefs_1.d)(`The ID of the icon to display in the button. You can change the default icon for all ${COMP} ` +
+        buttonVariant: (0, metadata_helpers_1.d)("The button variant to use", abstractions_1.buttonVariantNames),
+        buttonLabel: (0, metadata_helpers_1.d)(`This property is an optional string to set a label for the button part.`),
+        buttonIcon: (0, metadata_helpers_1.d)(`The ID of the icon to display in the button. You can change the default icon for all ${COMP} ` +
             `instances with the "icon.browse:FileInput" declaration in the app configuration file.`),
-        buttonIconPosition: (0, ComponentDefs_1.d)(`This optional string determines the location of the button icon.`, abstractions_1.iconPositionNames, "string", "start"),
-        acceptsFileType: (0, ComponentDefs_1.d)(`An optional list of file types the input controls accepts provided as a string array.`),
-        multiple: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
+        buttonIconPosition: (0, metadata_helpers_1.d)(`This optional string determines the location of the button icon.`, abstractions_1.iconPositionNames, "string", "start"),
+        acceptsFileType: (0, metadata_helpers_1.d)(`An optional list of file types the input controls accepts provided as a string array.`),
+        multiple: Object.assign(Object.assign({}, (0, metadata_helpers_1.d)(`This boolean property enables to add not just one (\`false\`), but multiple files to the field ` +
             `(\`true\`). This is done either by dragging onto the field or by selecting multiple files ` +
             `in the browser menu after clicking the input field button.`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.multiple }),
-        directory: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
+        directory: Object.assign(Object.assign({}, (0, metadata_helpers_1.d)(`This boolean property indicates whether the component allows selecting directories (\`true\`) ` +
             `or files only (\`false\`).`, null, "boolean")), { defaultValue: FileInputNative_1.defaultProps.directory }),
-        buttonPosition: Object.assign(Object.assign({}, (0, ComponentDefs_1.d)(`This property determines the position of the button relative to the input field.`, [
+        buttonPosition: Object.assign(Object.assign({}, (0, metadata_helpers_1.d)(`This property determines the position of the button relative to the input field.`, [
             "start",
             "end",
         ])), { defaultValue: FileInputNative_1.defaultProps.buttonPosition }),
-        buttonSize: (0, ComponentDefs_1.d)("The size of the button (small, medium, large)", abstractions_1.sizeMd),
-        buttonThemeColor: (0, ComponentDefs_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames, "string", FileInputNative_1.defaultProps.buttonThemeColor),
+        buttonSize: (0, metadata_helpers_1.d)("The size of the button (small, medium, large)", abstractions_1.sizeMd),
+        buttonThemeColor: (0, metadata_helpers_1.d)("The button color scheme (primary, secondary, attention)", abstractions_1.buttonThemeNames, "string", FileInputNative_1.defaultProps.buttonThemeColor),
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
@@ -57,12 +56,12 @@ exports.FileInputMd = (0, ComponentDefs_1.createMetadata)({
         lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
     },
     apis: {
-        value: (0, ComponentDefs_1.d)(`By setting an ID for the component, you can refer to the value of the field if set. ` +
+        value: (0, metadata_helpers_1.d)(`By setting an ID for the component, you can refer to the value of the field if set. ` +
             `If no value is set, the value will be undefined.`),
-        setValue: (0, ComponentDefs_1.d)(`(**NOT IMPLEMENTED YET**) You can use this method to set the component's ` +
+        setValue: (0, metadata_helpers_1.d)(`(**NOT IMPLEMENTED YET**) You can use this method to set the component's ` +
             `current value programmatically.`),
         focus: (0, metadata_helpers_1.dFocus)(COMP),
-        open: (0, ComponentDefs_1.d)(`This API command triggers the file browsing dialog to open.`),
+        open: (0, metadata_helpers_1.d)(`This API command triggers the file browsing dialog to open.`),
     },
     themeVars: (0, themeVars_1.parseScssVar)(FileInput_module_scss_1.default.themeVars),
 });

package/dist/scripts/src/components/FileUploadDropZone/FileUploadDropZone.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.fileUploadDropZoneComponentRenderer = exports.FileUploadDropZoneMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FileUploadDropZone_module_scss_1 = __importDefault(require("./FileUploadDropZone.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const FileUploadDropZoneNative_1 = require("./FileUploadDropZoneNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "FileUploadDropZone";
-exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
+exports.FileUploadDropZoneMd = (0, metadata_helpers_1.createMetadata)({
     description: "`FileUploadDropZone` enables users to upload files by dragging and dropping " +
         "files from their local file system onto a designated area within the UI.",
     props: {
@@ -28,10 +28,10 @@ exports.FileUploadDropZoneMd = (0, ComponentDefs_1.createMetadata)({
             type: "boolean",
             defaultValue: FileUploadDropZoneNative_1.defaultProps.allowPaste,
         },
-        enabled: (0, ComponentDefs_1.d)(`If set to \`false\`, the drop zone will be disabled and users will not be able to upload files.`, null, "boolean", true),
+        enabled: (0, metadata_helpers_1.d)(`If set to \`false\`, the drop zone will be disabled and users will not be able to upload files.`, null, "boolean", true),
     },
     events: {
-        upload: (0, ComponentDefs_1.d)(`This component accepts files for upload but does not perform the actual operation. It fires ` +
+        upload: (0, metadata_helpers_1.d)(`This component accepts files for upload but does not perform the actual operation. It fires ` +
             `the \`upload\` event and passes the list files to upload in the method's argument. You can ` +
             `use the passed file information to implement the upload (according to the protocol your ` +
             `backend supports).`),

package/dist/scripts/src/components/FlowLayout/FlowLayout.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.flowLayoutComponentRenderer = exports.FlowLayoutMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FlowLayout_module_scss_1 = __importDefault(require("./FlowLayout.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const misc_1 = require("../../components-core/utils/misc");
 const EngineError_1 = require("../../components-core/EngineError");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const FlowLayoutNative_1 = require("./FlowLayoutNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "FlowLayout";
-exports.FlowLayoutMd = (0, ComponentDefs_1.createMetadata)({
+exports.FlowLayoutMd = (0, metadata_helpers_1.createMetadata)({
     description: "`FlowLayout` positions content in rows with automatic wrapping. When items " +
         "exceed the available horizontal space, they automatically wrap to a new line.",
     props: {

package/dist/scripts/src/components/Footer/Footer.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.footerRenderer = exports.FooterMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Footer_module_scss_1 = __importDefault(require("./Footer.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const FooterNative_1 = require("./FooterNative");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Footer";
-exports.FooterMd = (0, ComponentDefs_1.createMetadata)({
+exports.FooterMd = (0, metadata_helpers_1.createMetadata)({
     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.",

package/dist/scripts/src/components/Form/Form.js

@@ -6,14 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.formComponentRenderer = exports.FormMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Form_module_scss_1 = __importDefault(require("./Form.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const abstractions_1 = require("../abstractions");
 const FormNative_1 = require("./FormNative");
 const COMP = "Form";
-exports.FormMd = (0, ComponentDefs_1.createMetadata)({
+exports.FormMd = (0, metadata_helpers_1.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 " +
@@ -74,32 +73,32 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
             type: "boolean",
             defaultValue: FormNative_1.defaultProps.swapCancelAndSave,
         },
-        submitUrl: (0, ComponentDefs_1.d)(`URL to submit the form data.`),
+        submitUrl: (0, metadata_helpers_1.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`.",
         },
-        inProgressNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form is being submitted."),
-        completedNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form is submitted successfully."),
-        errorNotificationMessage: (0, ComponentDefs_1.d)("This property sets the message to display when the form submission fails."),
+        inProgressNotificationMessage: (0, metadata_helpers_1.d)("This property sets the message to display when the form is being submitted."),
+        completedNotificationMessage: (0, metadata_helpers_1.d)("This property sets the message to display when the form is submitted successfully."),
+        errorNotificationMessage: (0, metadata_helpers_1.d)("This property sets the message to display when the form submission fails."),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         _data_url: (0, metadata_helpers_1.dInternal)("when we have an api bound data prop, we inject the url here"),
     },
     events: {
-        submit: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is submitted. The event argument ` +
+        submit: (0, metadata_helpers_1.d)(`The form infrastructure fires this event when the form is submitted. The event argument ` +
             `is the current \`data\` value to save.`),
-        success: (0, ComponentDefs_1.d)("The form infrastructure fires this event when the form is submitted successfully."),
-        cancel: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is canceled.`),
-        reset: (0, ComponentDefs_1.d)(`The form infrastructure fires this event when the form is reset.`),
+        success: (0, metadata_helpers_1.d)("The form infrastructure fires this event when the form is submitted successfully."),
+        cancel: (0, metadata_helpers_1.d)(`The form infrastructure fires this event when the form is canceled.`),
+        reset: (0, metadata_helpers_1.d)(`The form infrastructure fires this event when the form is reset.`),
     },
     contextVars: {
-        $data: (0, ComponentDefs_1.d)(`This property represents the value of the form data. You can access the fields of the form ` +
+        $data: (0, metadata_helpers_1.d)(`This property represents the value of the form data. You can access the fields of the form ` +
             `using the IDs in the \`bindTo\` property of nested \`FormItem\` instances. \`$data\` also ` +
             `provides an \`update\` method as a shortcut to the Form's exposed \`update\` method.`),
     },
     apis: {
-        reset: (0, ComponentDefs_1.d)(`Call this event to reset the form to its initial state.`),
-        update: (0, ComponentDefs_1.d)("You can pass a data object to update the form data. The properties in the passed data " +
+        reset: (0, metadata_helpers_1.d)(`Call this event to reset the form to its initial state.`),
+        update: (0, metadata_helpers_1.d)("You can pass a data object to update the form data. The properties in the passed data " +
             "object are updated to their values accordingly. Other form properties remain intact."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(Form_module_scss_1.default.themeVars),

package/dist/scripts/src/components/FormItem/FormItem.js

@@ -17,7 +17,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.formItemComponentRenderer = exports.FormItemMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const FormContext_1 = require("../Form/FormContext");
@@ -28,7 +27,7 @@ const container_helpers_1 = require("../container-helpers");
 const COMP = "FormItem";
 // NOTE: We need to filter the "none" value out so that it doesn't show up in the docs.
 const filteredValidationSeverityValues = FormContext_1.validationSeverityValues.filter((value) => value !== "none");
-exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
+exports.FormItemMd = (0, metadata_helpers_1.createMetadata)({
     status: "stable",
     description: "`FormItem` wraps individual input controls within a `Form`, providing data " +
         "binding, validation, labeling, and layout functionality. It connects form " +
@@ -167,19 +166,19 @@ exports.FormItemMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     events: {
-        validate: (0, ComponentDefs_1.d)(`This event is used to define a custom validation function.`),
+        validate: (0, metadata_helpers_1.d)(`This event is used to define a custom validation function.`),
     },
     apis: {
-        addItem: (0, ComponentDefs_1.d)("Adds a new item to the `FormItem` data where the particular form item holds " +
+        addItem: (0, metadata_helpers_1.d)("Adds a new item to the `FormItem` data where the particular form item holds " +
             "a list. The function has a single parameter, the data to add to the `FormItem`. " +
             "The new item is appended to the end of the list."),
-        removeItem: (0, ComponentDefs_1.d)("Removes the item specified by its index from the list held by the FormItem. " +
+        removeItem: (0, metadata_helpers_1.d)("Removes the item specified by its index from the list held by the FormItem. " +
             "The function has a single argument, the index to remove."),
     },
     contextVars: {
-        $value: (0, ComponentDefs_1.d)("Current value of the FormItem, accessible in expressions and code snippets"),
-        $setValue: (0, ComponentDefs_1.d)("Function to set the FormItem's value programmatically"),
-        $validationResult: (0, ComponentDefs_1.d)("Current validation state and error messages for this field"),
+        $value: (0, metadata_helpers_1.d)("Current value of the FormItem, accessible in expressions and code snippets"),
+        $setValue: (0, metadata_helpers_1.d)("Function to set the FormItem's value programmatically"),
+        $validationResult: (0, metadata_helpers_1.d)("Current validation state and error messages for this field"),
     },
     themeVars: (0, themeVars_1.parseScssVar)(FormItem_module_scss_1.default.themeVars),
     defaultThemeVars: {

package/dist/scripts/src/components/FormSection/FormSection.js

@@ -1,41 +1,19 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.formSectionRenderer = exports.FormSectionMd = void 0;
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const compound_utils_1 = require("../../components-core/utils/compound-utils");
-// --- We cannot use this with nextra
-// import componentSource from "./FormSection.xmlui?raw";
+const metadata_helpers_1 = require("../metadata-helpers");
+const FormSection_xmlui_raw_1 = __importDefault(require("./FormSection.xmlui?raw"));
 const COMP = "FormSection";
-exports.FormSectionMd = (0, ComponentDefs_1.createMetadata)({
+exports.FormSectionMd = (0, metadata_helpers_1.createMetadata)({
     status: "experimental",
     description: "`FormSection` groups elements within a `Form`. Child components are placed in " +
         "a [FlowLayout](/components/FlowLayout).",
 });
-const componentSource = `
-<Component name="FormSection">
-  <VStack paddingBottom="{$props.paddingBottom ?? '1rem'}" gap="0" width="100%">
-    <Heading 
-      when="{!!$props.heading}"
-      marginBottom="$space-tight"
-      level="{$props.headingLevel ?? 'h3'}"
-      fontWeight="{$props.headingWeight ?? 'bold'}"
-      value="{$props.heading}" />
-    <Text
-      when="{!!$props.info}"
-      fontSize="{$props.infoFontSize ?? '0.8rem'}"
-      paddingBottom="$space-normal"
-      value="{$props.info}" />
-    <FlowLayout 
-      width="100%"
-      paddingTop="{$props.paddingTop ?? '$space-normal'}"
-      columnGap="{$props.columnGap ?? '3rem'}"
-      rowGap="{$props.rowGap ?? '$space-normal'}" >
-      <Slot />
-    </FlowLayout>
-  </VStack>
-</Component>
-`;
 exports.formSectionRenderer = {
-    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
+    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, FormSection_xmlui_raw_1.default),
     metadata: exports.FormSectionMd,
 };

package/dist/scripts/src/components/Heading/Heading.js

@@ -17,16 +17,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.h6ComponentRenderer = exports.h5ComponentRenderer = exports.h4ComponentRenderer = exports.h3ComponentRenderer = exports.h2ComponentRenderer = exports.h1ComponentRenderer = exports.headingComponentRenderer = exports.H6Md = exports.H5Md = exports.H4Md = exports.H3Md = exports.H2Md = exports.H1Md = exports.HeadingMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Heading_module_scss_1 = __importDefault(require("./Heading.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const HeadingNative_1 = require("./HeadingNative");
 const extractParam_1 = require("../../components-core/utils/extractParam");
+const metadata_helpers_1 = require("../metadata-helpers");
 const COMP = "Heading";
-const VALUE_DESC = (0, ComponentDefs_1.d)(`This property determines the text displayed in the heading. \`${COMP}\` also accepts nested ` +
+const VALUE_DESC = (0, metadata_helpers_1.d)(`This property determines the text displayed in the heading. \`${COMP}\` 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 = (0, ComponentDefs_1.d)("This optional property determines the maximum number of lines the component can wrap to. " +
+const MAX_LINES_DESC = (0, metadata_helpers_1.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.");
@@ -36,14 +36,14 @@ const ELLIPSES_DESC = {
     type: "boolean",
     defaultValue: HeadingNative_1.defaultProps.ellipses,
 };
-const PRESERVE_DESC = (0, ComponentDefs_1.d)(`This property indicates whether linebreaks should be preserved when ` + `displaying text.`, undefined, "boolean", HeadingNative_1.defaultProps.preserveLinebreaks);
+const PRESERVE_DESC = (0, metadata_helpers_1.d)(`This property indicates whether linebreaks should be preserved when ` + `displaying text.`, undefined, "boolean", HeadingNative_1.defaultProps.preserveLinebreaks);
 const LEVEL_DESC = (level) => `Represents a heading level ${level} text`;
 const OMIT_FROM_TOC_DESC = {
     description: "If true, this heading will be excluded from the table of contents.",
     type: "boolean",
     defaultValue: HeadingNative_1.defaultProps.omitFromToc,
 };
-exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
+exports.HeadingMd = (0, metadata_helpers_1.createMetadata)({
     description: "`Heading` displays hierarchical text headings with semantic importance levels " +
         "from H1 to H6, following HTML heading standards. It provides text overflow " +
         "handling, anchor link generation, and integrates with " +
@@ -84,7 +84,7 @@ exports.HeadingMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 const H1 = "H1";
-exports.H1Md = (0, ComponentDefs_1.createMetadata)({
+exports.H1Md = (0, metadata_helpers_1.createMetadata)({
     description: LEVEL_DESC(1),
     specializedFrom: COMP,
     props: {
@@ -109,7 +109,7 @@ exports.H1Md = (0, ComponentDefs_1.createMetadata)({
     },
 });
 const H2 = "H2";
-exports.H2Md = (0, ComponentDefs_1.createMetadata)({
+exports.H2Md = (0, metadata_helpers_1.createMetadata)({
     description: LEVEL_DESC(2),
     specializedFrom: COMP,
     props: {
@@ -133,7 +133,7 @@ exports.H2Md = (0, ComponentDefs_1.createMetadata)({
     },
 });
 const H3 = "H3";
-exports.H3Md = (0, ComponentDefs_1.createMetadata)({
+exports.H3Md = (0, metadata_helpers_1.createMetadata)({
     description: LEVEL_DESC(3),
     specializedFrom: COMP,
     props: {
@@ -157,7 +157,7 @@ exports.H3Md = (0, ComponentDefs_1.createMetadata)({
     },
 });
 const H4 = "H4";
-exports.H4Md = (0, ComponentDefs_1.createMetadata)({
+exports.H4Md = (0, metadata_helpers_1.createMetadata)({
     description: LEVEL_DESC(4),
     specializedFrom: COMP,
     props: {
@@ -181,7 +181,7 @@ exports.H4Md = (0, ComponentDefs_1.createMetadata)({
     },
 });
 const H5 = "H5";
-exports.H5Md = (0, ComponentDefs_1.createMetadata)({
+exports.H5Md = (0, metadata_helpers_1.createMetadata)({
     description: LEVEL_DESC(5),
     specializedFrom: COMP,
     props: {
@@ -205,7 +205,7 @@ exports.H5Md = (0, ComponentDefs_1.createMetadata)({
     },
 });
 const H6 = "H6";
-exports.H6Md = (0, ComponentDefs_1.createMetadata)({
+exports.H6Md = (0, metadata_helpers_1.createMetadata)({
     description: LEVEL_DESC(6),
     specializedFrom: COMP,
     props: {

package/dist/scripts/src/components/HelloWorld/HelloWorld.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.helloWorldComponentRenderer = exports.HelloWorldMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const HelloWorld_module_scss_1 = __importDefault(require("./HelloWorld.module.scss"));
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
 const HelloWorldNative_1 = require("./HelloWorldNative");
 const COMP = "HelloWorld";
-exports.HelloWorldMd = (0, ComponentDefs_1.createMetadata)({
+exports.HelloWorldMd = (0, metadata_helpers_1.createMetadata)({
     description: "`HelloWorld` is a demonstration component that shows basic XMLUI patterns. " +
         "It displays a customizable greeting message with an interactive click counter.",
     status: "experimental",

package/dist/scripts/src/components/HoverCard/HoverCard.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.hoverCardComponentRenderer = exports.HoverCardMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const metadata_helpers_1 = require("../metadata-helpers");
 const HovercardNative_1 = require("./HovercardNative");
 const COMP = "HoverCard";
-exports.HoverCardMd = (0, ComponentDefs_1.createMetadata)({
+exports.HoverCardMd = (0, metadata_helpers_1.createMetadata)({
     status: "deprecated",
     description: "(**OBSOLETE**) This component displays some content when its parent component is hovered.",
     props: {