xmlui 0.9.23 → 0.9.30

package/dist/scripts/src/components/Markdown/parse-binding-expr.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseBindingExpression = parseBindingExpression;
+const ScriptingSourceTree_1 = require("../../abstractions/scripting/ScriptingSourceTree");
+/**
+ * Finds and evaluates given binding expressions in markdown text.
+ * The binding expressions are of the form `@{...}`.
+ * @param text The markdown text
+ * @param extractValue The function to resolve binding expressions
+ * @returns the parsed text with resolved binding expressions
+ */
+function parseBindingExpression(text, extractValue) {
+    // Remove empty @{} expressions first
+    text = text.replaceAll(/(?<!\\)\@\{\s*\}/g, "");
+    // The (?<!\\) is a "negative lookbehind" in regex that ensures that
+    // if escaping the @{...} expression like this: \@{...}, we don't match it
+    const regex = /(?<!\\)\@\{((?:[^{}]|\{(?:[^{}]|\{(?:[^{}]|\{[^{}]*\})*\})*\})*)\}/g;
+    const result = text.replace(regex, (_, expr) => {
+        const extracted = extractValue(`{${expr}}`);
+        const resultExpr = mapByType(extracted);
+        // The result expression might be an object, in that case we stringify it here,
+        // at the last step, so that there are no unnecessary apostrophes
+        return typeof resultExpr === "object" && resultExpr !== null
+            ? JSON.stringify(resultExpr)
+            : resultExpr;
+    });
+    return result;
+    // ---
+    function mapByType(extracted) {
+        if (extracted === null) {
+            return null;
+        }
+        else if (extracted === undefined || typeof extracted === "undefined") {
+            return undefined;
+        }
+        else if (typeof extracted === "object") {
+            const arrowFuncResult = parseArrowFunc(extracted);
+            if (arrowFuncResult) {
+                return arrowFuncResult;
+            }
+            if (Array.isArray(extracted)) {
+                return extracted;
+            }
+            return Object.fromEntries(Object.entries(extracted).map(([key, value]) => {
+                return [key, mapByType(value)];
+            }));
+        }
+        else {
+            return extracted;
+        }
+    }
+    function parseArrowFunc(extracted) {
+        if (extracted.hasOwnProperty("type") &&
+            extracted.type === ScriptingSourceTree_1.T_ARROW_EXPRESSION &&
+            (extracted === null || extracted === void 0 ? void 0 : extracted._ARROW_EXPR_)) {
+            return "[xmlui function]";
+        }
+        return "";
+    }
+}

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

@@ -0,0 +1,282 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observePlaygroundPattern = observePlaygroundPattern;
+exports.parseSegmentProps = parseSegmentProps;
+exports.parsePlaygroundPattern = parsePlaygroundPattern;
+exports.convertPlaygroundPatternToMarkdown = convertPlaygroundPatternToMarkdown;
+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 "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];
+    }
+    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;
+    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 };
+    // --- Extract optional playground attributes
+    if (pattern.default.height) {
+        pgContent.height = pattern.default.height;
+    }
+    if (pattern.default.name) {
+        pgContent.name = pattern.default.name;
+    }
+    // --- Iterate through segments
+    for (let i = 0; i <= maxOrder; i++) {
+        let segment;
+        let type = "";
+        if (((_e = pattern.app) === null || _e === void 0 ? void 0 : _e.order) === i) {
+            segment = pattern.app;
+            type = "app";
+        }
+        else if (((_f = pattern.config) === null || _f === void 0 ? void 0 : _f.order) === i) {
+            segment = pattern.config;
+            type = "config";
+        }
+        else if (((_g = pattern.api) === null || _g === void 0 ? void 0 : _g.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}"` : ""}`;
+        if (segment.highlights && segment.highlights.length > 0) {
+            const highlights = segment.highlights
+                .map((highlight) => Array.isArray(highlight) ? `${highlight[0]}-${highlight[1]}` : highlight)
+                .join(",");
+            segmentAttrs += `{${highlights}}`;
+        }
+        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";
+                }
+                (_h = pgContent.components) !== null && _h !== void 0 ? _h : (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 base64String = btoa(jsonString);
+    markdownContent += '<samp data-pg-content="' + base64String + '"></samp>\n\n';
+    return markdownContent;
+}

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

@@ -0,0 +1,116 @@
+"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;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+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) => __awaiter(void 0, void 0, void 0, function* () { return 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) => __awaiter(void 0, void 0, void 0, function* () {
+        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) => {
+        resolver.current && resolver.current(value);
+        setShowConfirmationModal(false);
+    }, []);
+    const handleCancel = (0, react_1.useCallback)(() => {
+        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

@@ -0,0 +1,20 @@
+"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/NavGroup/NavGroupNative.js

@@ -18,8 +18,8 @@ const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 exports.defaultProps = {
     iconHorizontalExpanded: "chevronleft",
     iconHorizontalCollapsed: "chevronright",
-    iconVerticalExpanded: "chevronup",
-    iconVerticalCollapsed: "chevrondown",
+    iconVerticalExpanded: "chevrondown",
+    iconVerticalCollapsed: "chevronright",
 };
 const NavGroupContext = (0, react_1.createContext)({
     level: -1,

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

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nestedAppComponentRenderer = exports.NestedAppMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const NestedAppNative_1 = require("./NestedAppNative");
+const COMP = "NestedApp";
+exports.NestedAppMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The ${COMP} component allows you to nest an entire xmlui app into another one.
+`,
+    props: {
+        app: {
+            description: "The source markup of the app to be nested",
+        },
+        api: {
+            description: "This property defines an optional emulated API to be used with the nested app.",
+        },
+        components: {
+            description: "This property defines an optional list of components to be used with the nested app.",
+        },
+        config: {
+            description: "You can define the nested app's configuration with this property.",
+        },
+        activeTheme: {
+            description: "This property defines the active theme for the nested app.",
+        },
+        activeTone: {
+            description: "This property defines the active tone for the nested app.",
+        },
+        title: {
+            description: "The title of the nested app.",
+        },
+        height: {
+            description: "The height of the nested app.",
+        },
+        allowPlaygroundPopup: {
+            description: "This property defines whether the nested app can be opened in the xmlui playground.",
+        },
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(NestedApp_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        [`marginTop-${COMP}`]: "$space-3",
+        [`marginBottom-${COMP}`]: "$space-3",
+        [`padding-${COMP}`]: "$space-4",
+        [`paddingTop-${COMP}`]: "$space-3",
+        [`borderRadius-${COMP}`]: "$space-4",
+        [`backgroundColor-frame-${COMP}`]: "$color-primary-100",
+        [`gap-frame-${COMP}`]: "$space-4",
+        [`fontWeight-header-${COMP}`]: "$fontWeight-bold",
+    },
+});
+exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ((0, jsx_runtime_1.jsx)(NestedAppNative_1.NestedApp, { app: (_a = node.props) === null || _a === void 0 ? void 0 : _a.app, api: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.api), components: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.components), config: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.config), activeTheme: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.activeTheme), activeTone: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.activeTone), title: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.title), height: extractValue((_h = node.props) === null || _h === void 0 ? void 0 : _h.height), allowPlaygroundPopup: extractValue.asOptionalBoolean((_j = node.props) === null || _j === void 0 ? void 0 : _j.allowPlaygroundPopup) }));
+});