xmlui 0.11.4 → 0.11.7

package/dist/scripts/src/components/Markdown/utils.js

@@ -1,389 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.observePlaygroundPattern = observePlaygroundPattern;
-exports.parseSegmentProps = parseSegmentProps;
-exports.parsePlaygroundPattern = parsePlaygroundPattern;
-exports.convertPlaygroundPatternToMarkdown = convertPlaygroundPatternToMarkdown;
-exports.observeTreeDisplay = observeTreeDisplay;
-exports.convertTreeDisplayToMarkdown = convertTreeDisplayToMarkdown;
-const base64_utils_1 = require("../../components-core/utils/base64-utils");
-function observePlaygroundPattern(content) {
-    const startPattern = "```xmlui-pg";
-    const endPattern = "```";
-    const startIndex = content.indexOf(startPattern);
-    if (startIndex === -1) {
-        return null; // No match for the start pattern
-    }
-    // Find the end of the start pattern
-    const startContentIndex = content.indexOf("\n", startIndex);
-    if (startContentIndex === -1) {
-        return null; // Malformed pattern, no newline after start
-    }
-    // Search for the end pattern after the start content
-    let endIndex = startContentIndex;
-    while (endIndex !== -1) {
-        endIndex = content.indexOf(endPattern, endIndex + 1);
-        if (endIndex !== -1) {
-            // Check if the end pattern is not part of {pg-content} (escaped with backticks)
-            const precedingChar = content[endIndex - 1];
-            if (precedingChar !== "\\") {
-                return [
-                    startIndex,
-                    endIndex + endPattern.length,
-                    content.substring(startIndex, endIndex + endPattern.length),
-                ];
-            }
-        }
-    }
-    return null; // No valid end pattern found
-}
-function parseSegmentProps(input) {
-    const segment = {};
-    // --- Match the "display" flag
-    if (/\bdisplay\b/.test(input)) {
-        segment.display = true;
-    }
-    // --- Match the "copy" flag
-    if (/\bcopy\b/.test(input)) {
-        segment.copy = true;
-    }
-    // --- Match the "noPopup" flag
-    if (/\bnoPopup\b/.test(input)) {
-        segment.noPopup = true;
-    }
-    // --- Match the "noFrame" flag
-    if (/\bnoFrame\b/.test(input)) {
-        segment.noFrame = true;
-    }
-    // --- Match the "immediate" flag
-    if (/\bimmediate\b/.test(input)) {
-        segment.immediate = true;
-    }
-    // --- Match the "withSplashScreen" flag
-    if (/\bwithSplashScreen\b/.test(input)) {
-        segment.withSplashScreen = true;
-    }
-    // --- Match the "noHeader" flag
-    if (/\bnoHeader\b/.test(input)) {
-        segment.noHeader = true;
-    }
-    // --- Match the "splitView" flag
-    if (/\bsplitView\b/.test(input)) {
-        segment.splitView = true;
-    }
-    // --- Match the "initiallyShowCode" flag
-    if (/\binitiallyShowCode\b/.test(input)) {
-        segment.initiallyShowCode = true;
-    }
-    // Match the "highlights" pattern
-    const highlightsMatch = input.match(/\{([^\}]+)\}/);
-    if (highlightsMatch) {
-        const highlights = highlightsMatch[1].split(",").map((range) => {
-            if (range.includes("-")) {
-                const [start, end] = range.split("-").map(Number);
-                return [start, end]; // Represent ranges as [start, end]
-            }
-            return Number(range); // Represent single numbers as numbers
-        });
-        segment.highlights = highlights;
-    }
-    // Match the "filename" property
-    const filenameMatch = input.match(/\bfilename="([^"]+)"/);
-    if (filenameMatch) {
-        segment.filename = filenameMatch[1];
-    }
-    // Match the "name" property
-    const nameMatch = input.match(/\bname="([^"]+)"/);
-    if (nameMatch) {
-        segment.name = nameMatch[1];
-    }
-    // Match the "height" property
-    const heightMatch = input.match(/\bheight="([^"]+)"/);
-    if (heightMatch) {
-        segment.height = heightMatch[1];
-    }
-    // Match the "popOutUrl" property
-    const popOutUrlMatch = input.match(/\bpopOutUrl="([^"]+)"/);
-    if (popOutUrlMatch) {
-        segment.popOutUrl = popOutUrlMatch[1];
-    }
-    // Match patterns enclosed in /pattern/ format
-    const patternMatches = input.match(/\/([^\/]+)\//g);
-    if (patternMatches) {
-        segment.patterns = patternMatches.map((pattern) => 
-        // Remove the surrounding slashes
-        pattern.substring(1, pattern.length - 1));
-    }
-    // Match bordered patterns enclosed in !/pattern/ format
-    const borderedPatternMatches = input.match(/!\/(.[^\/]+)\//g);
-    if (borderedPatternMatches) {
-        segment.borderedPatterns = borderedPatternMatches.map((pattern) => 
-        // Remove the leading !/ and trailing /
-        pattern.substring(2, pattern.length - 1));
-    }
-    return segment;
-}
-function parsePlaygroundPattern(content) {
-    var _a, _b, _c, _d;
-    const pattern = {};
-    const match = observePlaygroundPattern(content);
-    if (!match) {
-        return pattern;
-    }
-    // --- Extract the pattern content
-    const [_startIndex, _endIndex, patternContent] = match;
-    const lines = patternContent.split("\n");
-    pattern.default = parseSegmentProps(lines[0].trim());
-    let segmentContent = "";
-    let currentMode = "";
-    let foundSegment = false;
-    let order = 0;
-    for (let i = 1; i < lines.length - 1; i++) {
-        const line = lines[i];
-        if (line.startsWith("---app")) {
-            const appSegment = parseSegmentProps(line);
-            pattern.app = Object.assign({}, appSegment);
-            closeCurrentMode("app");
-        }
-        else if (line.startsWith("---comp")) {
-            closeCurrentMode("comp");
-            const compSegment = parseSegmentProps(line);
-            (_a = pattern.components) !== null && _a !== void 0 ? _a : (pattern.components = []);
-            pattern.components.push(compSegment);
-        }
-        else if (line.startsWith("---config")) {
-            const configSegment = parseSegmentProps(line);
-            (_b = pattern.config) !== null && _b !== void 0 ? _b : (pattern.config = Object.assign({}, configSegment));
-            closeCurrentMode("config");
-        }
-        else if (line.startsWith("---api")) {
-            const apiSegment = parseSegmentProps(line);
-            (_c = pattern.api) !== null && _c !== void 0 ? _c : (pattern.api = Object.assign({}, apiSegment));
-            closeCurrentMode("api");
-        }
-        else if (line.startsWith("---desc")) {
-            closeCurrentMode("desc");
-            const descSegment = parseSegmentProps(line);
-            (_d = pattern.descriptions) !== null && _d !== void 0 ? _d : (pattern.descriptions = []);
-            pattern.descriptions.push(descSegment);
-        }
-        else {
-            // Append the line to the current segment content
-            segmentContent += line + "\n";
-        }
-    }
-    // --- Handle the last segment
-    if (foundSegment) {
-        closeCurrentMode("");
-    }
-    else {
-        pattern.app = Object.assign(Object.assign({}, pattern.default), { content: segmentContent, order });
-    }
-    return pattern;
-    function closeCurrentMode(newMode) {
-        foundSegment = true;
-        switch (currentMode) {
-            case "app":
-                pattern.app.content = segmentContent;
-                pattern.app.order = order++;
-                break;
-            case "comp":
-                pattern.components[pattern.components.length - 1].content = segmentContent;
-                pattern.components[pattern.components.length - 1].order = order++;
-                break;
-            case "config":
-                pattern.config.content = segmentContent;
-                pattern.config.order = order++;
-                break;
-            case "api":
-                pattern.api.content = segmentContent;
-                pattern.api.order = order++;
-                break;
-            case "desc":
-                pattern.descriptions[pattern.descriptions.length - 1].content = segmentContent;
-                pattern.descriptions[pattern.descriptions.length - 1].order = order++;
-                break;
-        }
-        segmentContent = "";
-        currentMode = newMode;
-    }
-}
-function convertPlaygroundPatternToMarkdown(content) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-    const pattern = parsePlaygroundPattern(content);
-    // --- Determine max order for segments
-    let maxOrder = 0;
-    if (((_a = pattern.app) === null || _a === void 0 ? void 0 : _a.order) > maxOrder) {
-        maxOrder = pattern.app.order;
-    }
-    if (((_b = pattern.config) === null || _b === void 0 ? void 0 : _b.order) > maxOrder) {
-        maxOrder = pattern.config.order;
-    }
-    if (((_c = pattern.api) === null || _c === void 0 ? void 0 : _c.order) > maxOrder) {
-        maxOrder = pattern.api.order;
-    }
-    if (pattern.descriptions) {
-        pattern.descriptions.forEach((desc) => {
-            if (desc.order > maxOrder) {
-                maxOrder = desc.order;
-            }
-        });
-    }
-    if (pattern.components) {
-        pattern.components.forEach((comp) => {
-            if (comp.order > maxOrder) {
-                maxOrder = comp.order;
-            }
-        });
-    }
-    // --- Assemble the final markdown content
-    let markdownContent = "";
-    const pgContent = {
-        noPopup: (_d = pattern.default) === null || _d === void 0 ? void 0 : _d.noPopup,
-        noFrame: (_e = pattern.default) === null || _e === void 0 ? void 0 : _e.noFrame,
-        noHeader: (_f = pattern.default) === null || _f === void 0 ? void 0 : _f.noHeader,
-        splitView: (_g = pattern.default) === null || _g === void 0 ? void 0 : _g.splitView,
-        initiallyShowCode: (_h = pattern.default) === null || _h === void 0 ? void 0 : _h.initiallyShowCode,
-        popOutUrl: (_j = pattern.default) === null || _j === void 0 ? void 0 : _j.popOutUrl,
-        immediate: (_k = pattern.default) === null || _k === void 0 ? void 0 : _k.immediate,
-        withSplashScreen: (_l = pattern.default) === null || _l === void 0 ? void 0 : _l.withSplashScreen,
-    };
-    // --- Extract optional playground attributes
-    if (pattern.default.height) {
-        pgContent.height = pattern.default.height;
-    }
-    if (pattern.default.name) {
-        pgContent.name = pattern.default.name;
-    }
-    if (pattern.default.popOutUrl) {
-        pgContent.popOutUrl = pattern.default.popOutUrl;
-    }
-    // --- Iterate through segments
-    for (let i = 0; i <= maxOrder; i++) {
-        let segment;
-        let type = "";
-        if (((_m = pattern.app) === null || _m === void 0 ? void 0 : _m.order) === i) {
-            segment = pattern.app;
-            type = "app";
-        }
-        else if (((_o = pattern.config) === null || _o === void 0 ? void 0 : _o.order) === i) {
-            segment = pattern.config;
-            type = "config";
-        }
-        else if (((_p = pattern.api) === null || _p === void 0 ? void 0 : _p.order) === i) {
-            segment = pattern.api;
-            type = "api";
-        }
-        if (!segment && pattern.descriptions) {
-            const descSegment = pattern.descriptions.find((desc) => desc.order === i);
-            if (descSegment) {
-                segment = descSegment;
-                type = "desc";
-            }
-        }
-        if (!segment && pattern.components) {
-            const compSegment = pattern.components.find((comp) => comp.order === i);
-            if (compSegment) {
-                segment = compSegment;
-                type = "comp";
-            }
-        }
-        if (segment === undefined) {
-            continue; // Skip if no segment found
-        }
-        // --- Assemble the app
-        // --- Assemble segment attributes
-        let segmentAttrs = `${segment.copy ? "copy" : ""} ` +
-            `${segment.filename ? `filename="${segment.filename}"` : ""} ` +
-            `${segment.name ? `name="${segment.name}"` : ""} ` +
-            `${segment.popOutUrl ? `popOutUrl="${segment.popOutUrl}"` : ""}`;
-        if (segment.highlights && segment.highlights.length > 0) {
-            const highlights = segment.highlights
-                .map((highlight) => Array.isArray(highlight) ? `${highlight[0]}-${highlight[1]}` : highlight)
-                .join(",");
-            segmentAttrs += `{${highlights}}`;
-        }
-        if (segment.patterns && segment.patterns.length > 0) {
-            segmentAttrs += " " + segment.patterns.map((p) => `/${p}/`).join(" ");
-        }
-        if (segment.borderedPatterns && segment.borderedPatterns.length > 0) {
-            segmentAttrs += " " + segment.borderedPatterns.map((p) => `!/` + p + `/`).join(" ");
-        }
-        segmentAttrs = segmentAttrs.trim().replace(/\s+/g, " ");
-        switch (type) {
-            case "app":
-                if (segment.display) {
-                    markdownContent += "```xmlui " + segmentAttrs + "\n" + segment.content + "```\n\n";
-                }
-                pgContent.app = segment.content;
-                break;
-            case "config":
-                if (segment.display) {
-                    markdownContent += "```json " + segmentAttrs + "\n" + segment.content + "```\n\n";
-                }
-                pgContent.config = segment.content;
-                break;
-            case "api":
-                // --- Never display API segments
-                pgContent.api = segment.content;
-                break;
-            case "comp":
-                if (segment.display) {
-                    markdownContent += "```xmlui " + segmentAttrs + "\n" + segment.content + "```\n\n";
-                }
-                (_q = pgContent.components) !== null && _q !== void 0 ? _q : (pgContent.components = []);
-                pgContent.components.push(segment.content);
-                break;
-            case "desc":
-                markdownContent += segment.content + "\n";
-                break;
-        }
-    }
-    // --- Convert the JSON representation of pgContent to a base64 string
-    const jsonString = JSON.stringify(pgContent);
-    const base64ContentString = (0, base64_utils_1.encodeToBase64)(jsonString);
-    const base64MarkdownString = (0, base64_utils_1.encodeToBase64)(markdownContent);
-    return ('<samp data-pg-content="' +
-        base64ContentString +
-        '" data-pg-markdown="' +
-        base64MarkdownString +
-        '"></samp>\n\n');
-}
-function observeTreeDisplay(content) {
-    const startPattern = "```xmlui-tree";
-    const endPattern = "```";
-    const startIndex = content.indexOf(startPattern);
-    if (startIndex === -1) {
-        return null; // No match for the start pattern
-    }
-    // Find the end of the start pattern
-    const startContentIndex = content.indexOf("\n", startIndex);
-    if (startContentIndex === -1) {
-        return null; // Malformed pattern, no newline after start
-    }
-    // Search for the end pattern after the start content
-    let endIndex = startContentIndex;
-    while (endIndex !== -1) {
-        endIndex = content.indexOf(endPattern, endIndex + 1);
-        if (endIndex !== -1) {
-            // Check if the end pattern is not escaped
-            const precedingChar = content[endIndex - 1];
-            if (precedingChar !== "\\") {
-                return [
-                    startIndex,
-                    endIndex + endPattern.length,
-                    content.substring(startIndex, endIndex + endPattern.length),
-                ];
-            }
-        }
-    }
-    return null; // No valid end pattern found
-}
-function convertTreeDisplayToMarkdown(content) {
-    if (content.startsWith("```xmlui-tree") && content.endsWith("```")) {
-        const treeContent = content
-            .slice("```xmlui-tree".length, content.indexOf("```", "```xmlui-tree".length))
-            .trim();
-        return `<section data-tree-content="${(0, base64_utils_1.encodeToBase64)(treeContent)}"></section>\n\n`;
-    }
-}

package/dist/scripts/src/components/ModalDialog/ConfirmationModalContextProvider.js

@@ -1,111 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfirmationModalContextProvider = exports.useConfirm = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const ButtonNative_1 = require("../Button/ButtonNative");
-const StackNative_1 = require("../Stack/StackNative");
-const Dialog_1 = require("./Dialog");
-const ConfirmationModalContext = react_1.default.createContext({
-    confirm: (title, message, actionLabel) => Promise.resolve(false),
-});
-const useConfirm = () => (0, react_1.useContext)(ConfirmationModalContext);
-exports.useConfirm = useConfirm;
-const ConfirmationModalContextProvider = ({ children }) => {
-    // State
-    const [showConfirmationModal, setShowConfirmationModal] = (0, react_1.useState)(false);
-    const [title, setTitle] = (0, react_1.useState)("Are you sure?");
-    const [message, setMessage] = (0, react_1.useState)();
-    const [buttons, setButtons] = (0, react_1.useState)([]);
-    // Refs and other
-    const resolver = (0, react_1.useRef)(null);
-    const buttonsRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (showConfirmationModal) {
-            setTimeout(() => {
-                var _a;
-                const focusable = (_a = buttonsRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("button");
-                if (focusable) {
-                    focusable[focusable.length - 1].focus();
-                }
-            }, 0);
-        }
-    }, [showConfirmationModal]);
-    const handleShow = (0, react_1.useCallback)((title, message, actionLabel) => {
-        if (typeof title === "string") {
-            setTitle(title);
-            setButtons([
-                {
-                    label: actionLabel || "Ok",
-                    value: true,
-                },
-            ]);
-            setMessage(message);
-        }
-        else {
-            setTitle(title.title);
-            setButtons(title.buttons);
-            setMessage(title.message);
-        }
-        setShowConfirmationModal(true);
-        return new Promise(function (resolve) {
-            resolver.current = resolve;
-        });
-    }, []);
-    const handleOk = (0, react_1.useCallback)((value) => {
-        if (resolver.current) {
-            resolver.current(value);
-        }
-        setShowConfirmationModal(false);
-    }, []);
-    const handleCancel = (0, react_1.useCallback)(() => {
-        if (resolver.current) {
-            resolver.current(false);
-        }
-        setShowConfirmationModal(false);
-    }, []);
-    const contextValue = (0, react_1.useMemo)(() => {
-        return {
-            confirm: handleShow,
-        };
-    }, [handleShow]);
-    return ((0, jsx_runtime_1.jsxs)(ConfirmationModalContext.Provider, { value: contextValue, children: [children, showConfirmationModal && ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: title, description: message, isOpen: true, onClose: handleCancel, buttons: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { width: "100%", gap: "1em" }, ref: buttonsRef, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", size: "sm", onClick: handleCancel, children: "Cancel" }), buttons.length > 1 ? (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }) : undefined, buttons.map(({ label, value, variant = "solid", themeColor = "attention" }, index) => {
-                            return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: variant, themeColor: themeColor, size: "sm", type: "submit", onClick: () => {
-                                    handleOk(value);
-                                }, children: label }, index));
-                        })] }) }))] }));
-};
-exports.ConfirmationModalContextProvider = ConfirmationModalContextProvider;

package/dist/scripts/src/components/ModalDialog/Dialog.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Dialog_module_scss_1 = __importDefault(require("./Dialog.module.scss"));
-const TextNative_1 = require("../Text/TextNative");
-const ModalDialogNative_1 = require("./ModalDialogNative");
-/**
- * Dialog component that is customizable with action buttons. The children prop accepts React elements.
- *
- * Note that clicking outside of the dialog or pressing Escape will call the onClose function.
- * Thus, if you want to stop that from firing, do so in the onClose function from outside.
- */
-const Dialog = ({ title, description, children, isOpen, onClose, buttons, }) => {
-    return ((0, jsx_runtime_1.jsxs)(ModalDialogNative_1.ModalDialog, { onClose: onClose, isInitiallyOpen: isOpen, title: title, children: [(0, jsx_runtime_1.jsxs)("div", { className: Dialog_module_scss_1.default.dialogContent, children: [(0, jsx_runtime_1.jsx)("div", { id: "dialogDesc", children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: description }) }), children] }), !!buttons && (0, jsx_runtime_1.jsx)("footer", { className: Dialog_module_scss_1.default.dialogActions, children: buttons })] }));
-};
-exports.Dialog = Dialog;

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

@@ -1,83 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.modalViewComponentRenderer = exports.ModalDialogMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ModalDialog_module_scss_1 = __importDefault(require("./ModalDialog.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const base_utils_1 = require("../../components-core/theming/themes/base-utils");
-const container_helpers_1 = require("../container-helpers");
-const ModalDialogNative_1 = require("./ModalDialogNative");
-const metadata_helpers_1 = require("../metadata-helpers");
-const COMP = "ModalDialog";
-exports.ModalDialogMd = (0, metadata_helpers_1.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.",
-    parts: {
-        content: {
-            description: "The main content area of the modal dialog.",
-        },
-        title: {
-            description: "The title area of the modal dialog.",
-        },
-    },
-    props: {
-        fullScreen: {
-            description: `Toggles whether the dialog encompasses the whole UI (\`true\`) or not and has a minimum ` +
-                `width and height (\`false\`).`,
-            valueType: "boolean",
-            defaultValue: ModalDialogNative_1.defaultProps.fullScreen,
-        },
-        title: (0, metadata_helpers_1.d)(`Provides a prestyled heading to display the intent of the dialog.`),
-        closeButtonVisible: {
-            description: `Shows (\`true\`) or hides (\`false\`) the visibility of the close button on the dialog.`,
-            valueType: "boolean",
-            defaultValue: ModalDialogNative_1.defaultProps.closeButtonVisible,
-        },
-    },
-    events: {
-        open: (0, metadata_helpers_1.d)(`This event is fired when the \`${COMP}\` is opened either via a \`when\` or an ` +
-            `imperative API call (\`open()\`).`),
-        close: (0, metadata_helpers_1.d)(`This event is fired when the close button is pressed or the user clicks outside ` +
-            `the \`${COMP}\`.`),
-    },
-    apis: {
-        close: {
-            description: `This method is used to close the \`${COMP}\`. Invoke it using \`modalId.close()\` ` +
-                `where \`modalId\` refers to a \`ModalDialog\` component.`,
-            signature: "close(): void",
-        },
-        open: {
-            description: "This method imperatively opens the modal dialog. You can pass an arbitrary number " +
-                "of parameters to the method. In the `ModalDialog` instance, you can access those " +
-                "with the `\$param` and `\$params` context values.",
-            signature: "open(...params: any[]): void",
-            parameters: {
-                params: "An arbitrary number of parameters that can be used to pass data to the dialog.",
-            },
-        },
-    },
-    contextVars: {
-        $param: (0, metadata_helpers_1.d)("First parameter passed to the `open()` method"),
-        $params: (0, metadata_helpers_1.d)("Array of all parameters passed to `open()` method (access with `$params[0]`, `$params[1]`, etc.)"),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(ModalDialog_module_scss_1.default.themeVars),
-    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`textColor-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0" }),
-});
-exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, contextVars, extractValue, className, renderChild, lookupEventHandler, registerComponentApi, layoutContext, }) => {
-    var _a, _b;
-    // --- If the ModalDialog is not inside a ModalDialogFrame, wrap it in one.
-    if (!(layoutContext === null || layoutContext === void 0 ? void 0 : layoutContext._insideModalFrame)) {
-        // --- Context variables are now directly available via contextVars parameter
-        return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialogFrame, { isInitiallyOpen: extractValue(node.when) !== undefined, registerComponentApi: registerComponentApi, onClose: lookupEventHandler("close"), onOpen: lookupEventHandler("open"), renderDialog: ({ openParams, ref }) => {
-                return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node, renderChild: renderChild, layoutContext: { _insideModalFrame: true }, contextVars: Object.assign(Object.assign({}, contextVars), { $param: openParams === null || openParams === void 0 ? void 0 : openParams[0], $params: openParams }) }));
-            } }));
-    }
-    return ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { className: className, fullScreen: extractValue.asOptionalBoolean((_a = node.props) === null || _a === void 0 ? void 0 : _a.fullScreen), title: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.title), closeButtonVisible: extractValue.asOptionalBoolean(node.props.closeButtonVisible), externalAnimation: extractValue.asOptionalBoolean(node.props.externalAnimation), children: renderChild(node.children, { type: "Stack" }) }));
-});