xmlui 0.4.0

package/dist/scripts/src/components/Table/useRowSelection.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = useRowSelection;
+const react_1 = require("react");
+const SelectionStore_1 = require("../SelectionStore/SelectionStore");
+const misc_1 = require("@components-core/utils/misc");
+const lodash_es_1 = require("lodash-es");
+const constants_1 = require("@components-core/constants");
+/**
+ * This React hook takes care of managing row selection in a table
+ * @param items Items (with a unique ID) that can be selected
+ * @return Operations to manage the selection
+ */
+function useRowSelection(items = constants_1.EMPTY_ARRAY) {
+    // --- The focused index in the row source (if there is any)
+    const [focusedIndex, setFocusedIndex] = (0, react_1.useState)(-1);
+    // --- The current selection interval
+    const [selectionInterval, setSelectionInterval] = (0, react_1.useState)(null);
+    // --- Access the selection context that stores the current state of selection
+    const { selectedItems, setSelectedRowIds, refreshSelection, idKey } = (0, SelectionStore_1.useSelectionContext)();
+    // --- Refresh the list of item IDs whenever the items in the selection change
+    const walkableList = (0, react_1.useMemo)(() => {
+        return items.map((item) => item[idKey]);
+    }, [idKey, items]);
+    (0, react_1.useEffect)(() => {
+        refreshSelection(items);
+    }, [refreshSelection, items]);
+    // --- If the focused item is not available set the focus to the first item
+    (0, react_1.useEffect)(() => {
+        if (focusedIndex !== -1 && !walkableList[focusedIndex] && walkableList[0]) {
+            setFocusedIndex(0);
+        }
+    }, [focusedIndex, setFocusedIndex, walkableList]);
+    // --- Handle the user event to change the current selection. The event function handles the SHIFT, CTRL,
+    // --- and META keys to decide how to change or extend the existing selection
+    const toggleRowIndex = (0, misc_1.useEvent)(
+    // targetIndex: the item affected by an event
+    // options: key event options
+    (targetIndex, options = {}) => {
+        const targetId = walkableList[targetIndex];
+        const { shiftKey, metaKey, ctrlKey } = options;
+        // --- This variable will hold the newest selection interval
+        let newSelectionInterval;
+        let newSelectedRowsIdsInOrder = [...(selectedItems.map(item => item[idKey]))];
+        if (shiftKey) {
+            // --- SHIFT is pressed, extend the current selection
+            let normalizedFromIdx;
+            let normalizedToIdx;
+            let from;
+            let to;
+            if (selectionInterval) {
+                // --- Get the selection boundaries and normalize them (from is less than or equal than to)
+                let oldFromIdx = walkableList.indexOf(selectionInterval.from);
+                let oldToIdx = walkableList.indexOf(selectionInterval.to);
+                let normalizedOldFromIdx = Math.min(oldFromIdx, oldToIdx);
+                let normalizedOldToIdx = Math.max(oldFromIdx, oldToIdx);
+                // --- Get the slice of selected IDs
+                const slice = walkableList.slice(normalizedOldFromIdx, normalizedOldToIdx + 1);
+                newSelectedRowsIdsInOrder = newSelectedRowsIdsInOrder.filter((item) => !slice.includes(item));
+                from = selectionInterval.from;
+                to = targetId;
+                let fromIdx = walkableList.indexOf(from);
+                let toIdx = walkableList.indexOf(to);
+                normalizedFromIdx = Math.min(fromIdx, toIdx);
+                normalizedToIdx = Math.max(fromIdx, toIdx);
+            }
+            else {
+                from = targetId;
+                to = targetId;
+                normalizedFromIdx = targetIndex;
+                normalizedToIdx = targetIndex;
+            }
+            const sl = walkableList.slice(normalizedFromIdx, normalizedToIdx + 1);
+            newSelectedRowsIdsInOrder = (0, lodash_es_1.union)(newSelectedRowsIdsInOrder, sl);
+            newSelectionInterval = {
+                from: from,
+                to: to,
+            };
+        }
+        else {
+            // --- SHIFT is not pressed, set the new interval to the newly focused item
+            newSelectionInterval = {
+                from: targetId,
+                to: targetId,
+            };
+            if (metaKey || ctrlKey) {
+                // --- If META key (Mac) or CTRL (Windows) is pressed, toggle the selection of the targeted item
+                if (newSelectedRowsIdsInOrder.includes(targetId)) {
+                    newSelectedRowsIdsInOrder = newSelectedRowsIdsInOrder.filter((item) => item !== targetId);
+                }
+                else {
+                    newSelectedRowsIdsInOrder.push(targetId);
+                }
+            }
+            else {
+                // --- The targeted item remains the only selection
+                newSelectedRowsIdsInOrder = [targetId];
+            }
+        }
+        // --- Update the state variables of the selection
+        setFocusedIndex(targetIndex);
+        setSelectedRowIds((0, lodash_es_1.uniq)(newSelectedRowsIdsInOrder));
+        setSelectionInterval(newSelectionInterval);
+    });
+    // --- This function handles the user event to change the current selection according to the row ID
+    // --- affected by the event
+    const toggleRow = (0, misc_1.useEvent)((item, options) => {
+        const targetIndex = walkableList.indexOf(item[idKey]);
+        toggleRowIndex(targetIndex, options);
+    });
+    // --- Handle the key events that may change the current selection
+    const onKeyDown = (0, misc_1.useEvent)((event) => {
+        if (event.key === "ArrowDown") {
+            // --- Move/extend the selection to the item below the focused one
+            event.preventDefault();
+            let newFocusIndex = Math.min(items.length - 1, focusedIndex + 1);
+            if (focusedIndex !== items.length - 1) {
+                toggleRowIndex(newFocusIndex, event);
+            }
+        }
+        if (event.key === "PageDown") {
+            // --- Move/extend the selection to the item 8 items below the focused one
+            event.preventDefault();
+            const newFocusIndex = Math.min(items.length - 1, focusedIndex + 8);
+            toggleRowIndex(newFocusIndex, event);
+        }
+        if (event.key === "ArrowUp") {
+            // --- Move/extend the selection to the item above the focused one
+            event.preventDefault();
+            let newFocusIndex = Math.max(0, focusedIndex - 1);
+            if (focusedIndex >= 0) {
+                toggleRowIndex(newFocusIndex, event);
+            }
+        }
+        if (event.key === "PageUp") {
+            // --- Move/extend the selection to the item 8 items above the focused one
+            event.preventDefault();
+            const newFocusIndex = Math.max(0, focusedIndex - 8);
+            toggleRowIndex(newFocusIndex, event);
+        }
+    });
+    /**
+     * This operation checks or clears all rows
+     */
+    const checkAllRows = (0, misc_1.useEvent)((checked) => {
+        setSelectedRowIds(checked ? walkableList : []);
+    });
+    /**
+     * This operation creates a hash object that indicates the selected status of selected row IDs
+     */
+    const selectedRowIdMap = (0, react_1.useMemo)(() => {
+        let rows = {};
+        selectedItems.forEach((item) => {
+            rows[item[idKey]] = true;
+        });
+        return rows;
+    }, [idKey, selectedItems]);
+    // --- Retrieve the selection management object
+    return {
+        onKeyDown,
+        focusedIndex,
+        toggleRowIndex,
+        toggleRow,
+        checkAllRows,
+        selectedRowIdMap,
+        selectedItems,
+        idKey
+    };
+}

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

@@ -0,0 +1,44 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tableColumnDefComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const renderers_1 = require("@components-core/renderers");
+const TableContext_1 = require("@components/TableColumnDef/TableContext");
+const react_1 = require("react");
+const container_helpers_1 = require("@components/container-helpers");
+function TableColumnDef(_a) {
+    var { nodeChildren, renderChild, index } = _a, columnMetadata = __rest(_a, ["nodeChildren", "renderChild", "index"]);
+    const id = (0, react_1.useId)();
+    const { registerColumn, unRegisterColumn } = (0, TableContext_1.useTableContext)();
+    const cellRenderer = (0, react_1.useCallback)((row) => {
+        return (0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: nodeChildren, item: row, renderChild: renderChild });
+    }, [nodeChildren, renderChild]);
+    const safeCellRenderer = (0, react_1.useMemo)(() => {
+        return nodeChildren ? cellRenderer : undefined;
+    }, [cellRenderer, nodeChildren]);
+    (0, react_1.useLayoutEffect)(() => {
+        registerColumn(Object.assign(Object.assign({}, columnMetadata), { cellRenderer: safeCellRenderer, id,
+            index }));
+    }, [index, columnMetadata, id, registerColumn, safeCellRenderer]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            unRegisterColumn(id);
+        };
+    }, [id, unRegisterColumn]);
+    return null;
+}
+exports.tableColumnDefComponentRenderer = (0, renderers_1.createComponentRenderer)("TableColumnDef", (rendererContext) => {
+    const { node, renderChild, extractValue, childIndex, layoutCss } = rendererContext;
+    return ((0, jsx_runtime_1.jsx)(TableColumnDef, { style: layoutCss, header: extractValue.asDisplayText(node.props.header), accessorKey: extractValue.asOptionalString(node.props.bindTo), canSort: extractValue.asOptionalBoolean(node.props.canSort), canResize: extractValue.asOptionalBoolean(node.props.canResize), pinTo: extractValue.asOptionalString(node.props.pinTo), width: extractValue(node.props.width), minWidth: extractValue(node.props.minWidth), maxWidth: extractValue(node.props.maxWidth), nodeChildren: node.children, renderChild: renderChild, index: childIndex || 0 }));
+});

package/dist/scripts/src/components/TableColumnDef/TableContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableContext = void 0;
+exports.useTableContext = useTableContext;
+const react_1 = require("react");
+exports.TableContext = (0, react_1.createContext)({
+    registerColumn: (col) => { },
+    unRegisterColumn: (id) => { },
+});
+function useTableContext() {
+    return (0, react_1.useContext)(exports.TableContext);
+}

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

@@ -0,0 +1,85 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tabsComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const RTabs = __importStar(require("@radix-ui/react-tabs"));
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const Tabs_module_scss_1 = __importDefault(require("./Tabs.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const container_helpers_1 = require("@components/container-helpers");
+const Tabs = ({ tabs = [], activeTab = 0, orientation = "vertical", tabRenderer, style }) => {
+    const _activeTab = activeTab < 0 ? 0 : activeTab > tabs.length - 1 ? tabs.length - 1 : activeTab;
+    const [currentTab, setCurrentTab] = (0, react_1.useState)(`${_activeTab}`);
+    return ((0, jsx_runtime_1.jsxs)(RTabs.Root, { className: Tabs_module_scss_1.default.tabs, value: `${currentTab}`, onValueChange: setCurrentTab, orientation: orientation, style: style, children: [(0, jsx_runtime_1.jsxs)(RTabs.List, { className: Tabs_module_scss_1.default.tabsList, children: [tabs.map((tab, index) => tabRenderer ? ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { value: `${index}`, children: tabRenderer({ label: tab.label, isActive: `${index}` === currentTab }) }, index)) : ((0, jsx_runtime_1.jsx)(RTabs.Trigger, { className: Tabs_module_scss_1.default.tabTrigger, value: `${index}`, children: tab.label }, index))), (0, jsx_runtime_1.jsx)("div", { className: Tabs_module_scss_1.default.filler, "data-orientation": orientation })] }), tabs.map((tab, index) => ((0, jsx_runtime_1.jsx)(RTabs.Content, { value: `${index}`, className: Tabs_module_scss_1.default.tabsContent, children: tab.content }, index)))] }));
+};
+const metadata = {
+    displayName: "Tabs",
+    description: "Tabs component",
+    props: {
+        tabs: (0, descriptorHelper_1.desc)("The tabs to be displayed in the tab component"),
+        activeTab: (0, descriptorHelper_1.desc)("The active tab index"),
+        orientation: (0, descriptorHelper_1.desc)("The orientation of the tabs"),
+        tabTemplate: (0, descriptorHelper_1.desc)("The template for the tab"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Tabs_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-bg-Tabs": "$color-bg-primary",
+        "style-border-Tabs": "solid",
+        "color-border-Tabs": "$color-border",
+        "color-border-active-Tabs": "$color-primary",
+        "thickness-border-Tabs": "2px",
+        "color-bg-trigger-Tabs": "$color-bg-primary",
+        light: {
+            "color-bg-trigger-Tabs--hover": "$color-primary-50",
+        },
+        dark: {
+            "color-bg-trigger-Tabs--hover": "$color-primary-800",
+        },
+    },
+};
+exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)("Tabs", ({ extractValue, node, renderChild, layoutCss }) => {
+    var _a, _b, _c;
+    const tabs = [];
+    if (Array.isArray(node.children)) {
+        node.children.forEach((child) => {
+            var _a;
+            if (child.type === "TabItem") {
+                tabs.push({
+                    label: (_a = child.props) === null || _a === void 0 ? void 0 : _a.label,
+                    content: renderChild(child.children),
+                });
+            }
+        });
+    }
+    return ((0, jsx_runtime_1.jsx)(Tabs, { style: layoutCss, tabRenderer: !!((_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.tabTemplate)
+            ? (item) => (0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.tabTemplate, item: item, renderChild: renderChild })
+            : undefined, tabs: tabs, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation) }));
+}, metadata);

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

@@ -0,0 +1,175 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textComponentRenderer = exports.Text = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const css_utils_1 = require("@components-core/utils/css-utils");
+// =====================================================================================================================
+// React Text component definition
+const TextVariantKeys = [
+    "abbr", // use <abbr>
+    "cite", // use <cite>
+    "code", // use <code>
+    "codefence", // use uniquely styled <![CDATA[
+    "deleted", // use <del>
+    "inserted", // use <ins>
+    "keyboard", // use <kbd>,
+    "marked", // use <mark>
+    "sample", // use <samp>
+    "sub", // use <sub>
+    "sup", // use <sup>
+    "var", // use <var>
+    "strong", // use <strong> element for content that is of greater importance (used in Markdown)
+    "em", // use <em> element changes the meaning of a sentence - as spoken emphasis does (used in Markdown)
+    "mono", // use monospace font with <![CDATA[
+    "title", // Title text in the particular context
+    "subtitle", // Subtitle text in the particular context
+    "small", // Small text in the particular context
+    "caption", // Caption text in the particular context
+    "placeholder", // Placeholder text in the particular context 
+    "paragraph", // use <p>  
+];
+const TextVariantElement = {
+    abbr: "abbr",
+    cite: "cite",
+    code: "code",
+    codefence: "pre",
+    deleted: "del",
+    inserted: "ins",
+    keyboard: "kbd",
+    marked: "mark",
+    sample: "samp",
+    sub: "sub",
+    sup: "sup",
+    var: "var",
+    mono: "pre",
+    strong: "strong",
+    em: "em",
+    title: "span",
+    subtitle: "span",
+    small: "span",
+    caption: "span",
+    placeholder: "span",
+    paragraph: "p",
+};
+const AbbreviationKeys = ["title"];
+const InsertedKeys = ["cite", "dateTime"];
+const VariantPropsKeys = [...AbbreviationKeys, ...InsertedKeys];
+const Text = (_a) => {
+    var { uid, variant, maxLines = 0, layout, children, preserveLinebreaks, ellipses = true } = _a, variantSpecificProps = __rest(_a, ["uid", "variant", "maxLines", "layout", "children", "preserveLinebreaks", "ellipses"]);
+    const ref = (0, react_1.useRef)(null);
+    const Element = (0, react_1.useMemo)(() => {
+        if (!variant || !TextVariantElement[variant])
+            return "div"; //todo illesg, could be a span?
+        return TextVariantElement[variant];
+    }, [variant]);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Element, Object.assign({}, variantSpecificProps, { ref: (node) => {
+                if (!node)
+                    return;
+                ref.current = node;
+            }, className: (0, classnames_1.default)([
+                Text_module_scss_1.default.text,
+                Text_module_scss_1.default[variant || "default"],
+                {
+                    [Text_module_scss_1.default.truncateOverflow]: maxLines > 0,
+                    [Text_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
+                    [Text_module_scss_1.default.noEllipsis]: !ellipses
+                },
+            ]), style: Object.assign(Object.assign({}, layout), (0, css_utils_1.getMaxLinesStyle)(maxLines)), children: children })) }));
+};
+exports.Text = Text;
+const metadata = {
+    displayName: "Text",
+    description: "Display a text with several variants (styles)",
+    props: {
+        value: (0, descriptorHelper_1.desc)("The text to display in the component - can be empty"),
+        variant: (0, descriptorHelper_1.desc)("Indicates the styling of the Text component, see stylesheet for details"),
+        maxLines: (0, descriptorHelper_1.desc)("Limits the number of lines the component can use"),
+        preserveLinebreaks: (0, descriptorHelper_1.desc)("Allow preserving linebreak information?"),
+        ellipses: (0, descriptorHelper_1.desc)("Indicates if ellipsis should be hidden from the end of the text"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Text_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "border-radius-Text": "$radius",
+        "style-border-Text": "solid",
+        "thickness-border-Text": "$space-0",
+        "font-weight-Text-abbr": "$font-weight-bold",
+        "transform-Text-abbr": "uppercase",
+        "font-size-Text-secondary": "$color-text-secondary",
+        "font-style-Text-cite": "italic",
+        "font-family-Text-code": "$font-family-monospace",
+        "font-size-Text-code": "$font-size-small",
+        "thickness-border-Text-code": "1px",
+        "padding-horizontal-Text-code": "$space-1",
+        "line-decoration-Text-deleted": "line-through",
+        "line-decoration-Text-inserted": "underline",
+        "font-family-Text-keyboard": "$font-family-monospace",
+        "font-size-Text-keyboard": "$font-size-small",
+        "font-weight-Text-keyboard": "$font-weight-bold",
+        "thickness-border-Text-keyboard": "1px",
+        "padding-horizontal-Text-keyboard": "$space-1",
+        "font-family-Text-sample": "$font-family-monospace",
+        "font-size-Text-sample": "$font-size-small",
+        "font-size-Text-sup": "$font-size-smaller",
+        "align-vertical-Text-sup": "super",
+        "font-size-Text-sub": "$font-size-smaller",
+        "align-vertical-Text-sub": "sub",
+        "font-style-Text-var": "italic",
+        "font-family-Text-mono": "$font-family-monospace",
+        "font-size-Text-title": "$font-size-large",
+        "font-size-Text-subtitle": "$font-size-medium",
+        "font-size-Text-small": "$font-size-small",
+        "letter-spacing-Text-caption": "0.05rem",
+        "font-size-Text-placeholder": "$font-size-small",
+        "font-family-Text-codefence": "$font-family-monospace",
+        "padding-horizontal-Text-codefence": "$space-3",
+        "padding-vertical-Text-codefence": "$space-2",
+        "padding-vertical-Text-paragraph": "$space-1",
+        light: {
+            "color-bg-Text-code": "$color-surface-100",
+            "color-border-Text-code": "$color-surface-200",
+            "color-bg-Text-keyboard": "$color-surface-200",
+            "color-border-Text-keyboard": "$color-surface-300",
+            "color-bg-Text-marked": "yellow",
+            "color-Text-placeholder": "$color-surface-500",
+            "color-bg-Text-codefence": "$color-primary-100",
+            "color-Text-codefence": "$color-surface-900",
+        },
+        dark: {
+            "color-bg-Text-code": "$color-surface-800",
+            "color-border-Text-code": "$color-surface-700",
+            "color-bg-Text-keyboard": "$color-surface-800",
+            "color-border-Text-keyboard": "$color-surface-700",
+            "color-bg-Text-marked": "orange",
+            "color-Text-placeholder": "$color-surface-500",
+            "color-bg-Text-codefence": "$color-primary-800",
+            "color-Text-codefence": "$color-surface-200",
+        },
+    },
+};
+exports.textComponentRenderer = (0, renderers_1.createComponentRenderer)("Text", ({ node, extractValue, layoutCss, renderChild }) => {
+    const _a = node.props, { variant, maxLines, preserveLinebreaks, ellipses, value } = _a, variantSpecific = __rest(_a, ["variant", "maxLines", "preserveLinebreaks", "ellipses", "value"]);
+    const variantSpecificProps = Object.fromEntries(Object.entries(variantSpecific)
+        .filter(([key, _]) => VariantPropsKeys.includes(key))
+        .map(([key, value]) => [key, extractValue(value)]));
+    return ((0, jsx_runtime_1.jsx)(exports.Text, Object.assign({ variant: extractValue(variant), maxLines: extractValue.asOptionalNumber(maxLines), layout: layoutCss, preserveLinebreaks: extractValue.asOptionalBoolean(preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(ellipses, true) }, variantSpecificProps, { children: extractValue.asDisplayText(value) || renderChild(node.children) })));
+}, metadata);