xmlui 0.7.33 → 0.8.0

package/dist/scripts/src/components/List/ListNative.js

@@ -49,12 +49,12 @@ exports.ListNative = exports.ListContext = void 0;
 exports.useListData = useListData;
 exports.MemoizedSection = MemoizedSection;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const lodash_es_1 = require("lodash-es");
 const constants_1 = require("../../components-core/constants");
 const CardNative_1 = require("../Card/CardNative");
 const virtua_1 = require("virtua");
+const hooks_1 = require("../../components-core/utils/hooks");
 const ScrollContext_1 = require("../../components-core/ScrollContext");
 const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const List_module_scss_1 = __importDefault(require("./List.module.scss"));
@@ -63,7 +63,7 @@ const misc_1 = require("../../components-core/utils/misc");
 const SpinnerNative_1 = require("../Spinner/SpinnerNative");
 const TextNative_1 = require("../Text/TextNative");
 const container_helpers_1 = require("../container-helpers");
-exports.ListContext = react_2.default.createContext({
+exports.ListContext = react_1.default.createContext({
     isExpanded: (id) => false,
     toggleExpanded: (id, isExpanded) => { },
 });
@@ -74,7 +74,7 @@ var RowType;
     RowType["ITEM"] = "ITEM";
 })(RowType || (RowType = {}));
 function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EMPTY_OBJECT, items, limit, groupBy, orderBy, availableGroups, defaultGroups = constants_1.EMPTY_ARRAY, }) {
-    const sortedItems = (0, react_2.useMemo)(() => {
+    const sortedItems = (0, react_1.useMemo)(() => {
         if (!orderBy) {
             return items;
         }
@@ -90,19 +90,19 @@ function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EM
         const fieldDirectionsToOrderBy = arrayOrderBy.map((ob) => ob.direction);
         return (0, lodash_es_1.orderBy)(items, fieldSelectorsToOrderBy, fieldDirectionsToOrderBy);
     }, [items, orderBy]);
-    const cappedItems = (0, react_2.useMemo)(() => {
+    const cappedItems = (0, react_1.useMemo)(() => {
         if (!limit) {
             return sortedItems;
         }
         return sortedItems.slice(0, limit - 1);
     }, [sortedItems, limit]);
-    const sectionedItems = (0, react_2.useMemo)(() => {
+    const sectionedItems = (0, react_1.useMemo)(() => {
         if (groupBy === undefined) {
             return constants_1.EMPTY_OBJECT;
         }
         return (0, lodash_es_1.groupBy)(cappedItems, (item) => item[groupBy]);
     }, [cappedItems, groupBy]);
-    const sections = (0, react_2.useMemo)(() => {
+    const sections = (0, react_1.useMemo)(() => {
         if (groupBy === undefined) {
             return constants_1.EMPTY_ARRAY;
         }
@@ -114,7 +114,7 @@ function useListData({ groupsInitiallyExpanded = true, expanded = constants_1.EM
         }
         return foundSectionKeys;
     }, [groupBy, sectionedItems, defaultGroups, availableGroups]);
-    const rows = (0, react_2.useMemo)(() => {
+    const rows = (0, react_1.useMemo)(() => {
         if (groupBy === undefined) {
             return cappedItems;
         }
@@ -171,8 +171,8 @@ const defaultItemRenderer = (item, id) => {
     return (0, jsx_runtime_1.jsx)(CardNative_1.Card, { title: title, subtitle: subtitle });
 };
 // eslint-disable-next-line react/display-name
-const Item = (0, react_2.forwardRef)(({ children, style, index }, forwardedRef) => {
-    const getItemType = (0, react_2.useContext)(ListItemTypeContext);
+const Item = (0, react_1.forwardRef)(({ children, style, index }, forwardedRef) => {
+    const getItemType = (0, react_1.useContext)(ListItemTypeContext);
     const itemType = getItemType(index) || RowType.ITEM;
     return ((0, jsx_runtime_1.jsx)("div", { style: style, ref: forwardedRef, className: (0, classnames_1.default)({
             [List_module_scss_1.default.row]: itemType === RowType.ITEM,
@@ -180,7 +180,7 @@ const Item = (0, react_2.forwardRef)(({ children, style, index }, forwardedRef)
             [List_module_scss_1.default.sectionFooter]: itemType === RowType.SECTION_FOOTER,
         }), "data-list-item-type": itemType, "data-index": index, children: children }));
 });
-const ListItemTypeContext = (0, react_2.createContext)((index) => RowType.ITEM);
+const ListItemTypeContext = (0, react_1.createContext)((index) => RowType.ITEM);
 /**
  * Virtua's `shift` prop helps maintain scroll position when prepending items (like message history).
  * Unfortunately it's finicky and must only be `true` when the beginning of the list changes, otherwise
@@ -195,8 +195,8 @@ const ListItemTypeContext = (0, react_2.createContext)((index) => RowType.ITEM);
  */
 const useShift = (listData, idKey) => {
     var _a, _b, _c;
-    const previousListData = (0, react_2.useRef)();
-    const shouldShift = (0, react_2.useRef)();
+    const previousListData = (0, react_1.useRef)();
+    const shouldShift = (0, react_1.useRef)();
     if (listData !== previousListData.current) {
         if (((_a = listData === null || listData === void 0 ? void 0 : listData[0]) === null || _a === void 0 ? void 0 : _a[idKey]) !== ((_c = (_b = previousListData.current) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c[idKey])) {
             shouldShift.current = true;
@@ -208,23 +208,26 @@ const useShift = (listData, idKey) => {
     }
     return shouldShift.current;
 };
-exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = "id", style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = true, }, ref) {
-    var _a, _b;
-    const virtualizerRef = (0, react_2.useRef)(null);
-    const scrollRef = (0, react_2.useContext)(ScrollContext_1.ScrollContext);
-    const parentRef = (0, react_2.useRef)(null);
+exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items = constants_1.EMPTY_ARRAY, itemRenderer = defaultItemRenderer, sectionRenderer, sectionFooterRenderer, loading, limit, groupBy, orderBy, availableGroups, scrollAnchor = "top", requestFetchPrevPage = lodash_es_1.noop, requestFetchNextPage = lodash_es_1.noop, pageInfo, idKey = "id", style, emptyListPlaceholder, groupsInitiallyExpanded = true, defaultGroups = constants_1.EMPTY_ARRAY, registerComponentApi, borderCollapse = true, }, ref) {
+    var _a;
+    const virtualizerRef = (0, react_1.useRef)(null);
+    const scrollRef = (0, react_1.useContext)(ScrollContext_1.ScrollContext);
+    const parentRef = (0, react_1.useRef)(null);
     const rootRef = ref ? (0, react_compose_refs_1.composeRefs)(parentRef, ref) : parentRef;
+    const offsetsRef = (0, react_1.useRef)({
+        offsetTop: 0,
+    });
     const hasOutsideScroll = scrollRef &&
         (style === null || style === void 0 ? void 0 : style.maxHeight) === undefined &&
         (style === null || style === void 0 ? void 0 : style.height) === undefined &&
         (style === null || style === void 0 ? void 0 : style.flex) === undefined;
     const scrollElementRef = hasOutsideScroll ? scrollRef : parentRef;
-    const shouldStickToBottom = (0, react_2.useRef)(scrollAnchor === "bottom");
-    const [expanded, setExpanded] = (0, react_2.useState)(constants_1.EMPTY_OBJECT);
-    const toggleExpanded = (0, react_2.useCallback)((id, isExpanded) => {
+    const shouldStickToBottom = (0, react_1.useRef)(scrollAnchor === "bottom");
+    const [expanded, setExpanded] = (0, react_1.useState)(constants_1.EMPTY_OBJECT);
+    const toggleExpanded = (0, react_1.useCallback)((id, isExpanded) => {
         setExpanded((prev) => (Object.assign(Object.assign({}, prev), { [id]: isExpanded })));
     }, []);
-    const expandContextValue = (0, react_2.useMemo)(() => {
+    const expandContextValue = (0, react_1.useMemo)(() => {
         return {
             isExpanded: (id) => expanded[id] || (expanded[id] === undefined && groupsInitiallyExpanded),
             toggleExpanded,
@@ -241,8 +244,8 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
         availableGroups,
     });
     const shift = useShift(rows, idKey);
-    const initiallyScrolledToBottom = (0, react_2.useRef)(false);
-    (0, react_2.useEffect)(() => {
+    const initiallyScrolledToBottom = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
         if (rows.length && scrollAnchor === "bottom" && !initiallyScrolledToBottom.current) {
             initiallyScrolledToBottom.current = true;
             requestAnimationFrame(() => {
@@ -253,7 +256,7 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             });
         }
     }, [rows.length, scrollAnchor]);
-    (0, react_2.useEffect)(() => {
+    (0, react_1.useEffect)(() => {
         if (!virtualizerRef.current)
             return;
         if (!shouldStickToBottom.current)
@@ -265,8 +268,8 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             });
         });
     }, [rows]);
-    const isFetchingPrevPage = (0, react_2.useRef)(false);
-    const tryToFetchPrevPage = (0, react_2.useCallback)(() => {
+    const isFetchingPrevPage = (0, react_1.useRef)(false);
+    const tryToFetchPrevPage = (0, react_1.useCallback)(() => {
         if (virtualizerRef.current &&
             virtualizerRef.current.findStartIndex() < 10 &&
             pageInfo &&
@@ -286,8 +289,8 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             })();
         }
     }, [pageInfo, requestFetchPrevPage]);
-    const isFetchingNextPage = (0, react_2.useRef)(false);
-    const tryToFetchNextPage = (0, react_2.useCallback)(() => {
+    const isFetchingNextPage = (0, react_1.useRef)(false);
+    const tryToFetchNextPage = (0, react_1.useCallback)(() => {
         if (virtualizerRef.current &&
             virtualizerRef.current.findEndIndex() + 10 > rows.length &&
             pageInfo &&
@@ -307,14 +310,14 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             })();
         }
     }, [rows.length, pageInfo, requestFetchNextPage]);
-    const initiallyFetchedExtraPages = (0, react_2.useRef)(false);
-    (0, react_2.useEffect)(() => {
+    const initiallyFetchedExtraPages = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
         if (rows.length && !initiallyFetchedExtraPages.current) {
             initiallyFetchedExtraPages.current = true;
             tryToFetchPrevPage();
         }
     }, [rows.length, tryToFetchNextPage, tryToFetchPrevPage]);
-    const onScroll = (0, react_2.useCallback)((offset) => {
+    const onScroll = (0, react_1.useCallback)((offset) => {
         if (!virtualizerRef.current)
             return;
         if (scrollAnchor === "bottom") {
@@ -335,13 +338,17 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
     });
     const scrollToTop = (0, misc_1.useEvent)(() => {
         var _a;
+        const scrollPaddingTop = parseInt(getComputedStyle(scrollRef.current).scrollPaddingTop, 10) || 0;
         if (rows.length) {
-            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(0);
+            (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(0, { align: "start", offset: -scrollPaddingTop });
         }
     });
     const scrollToIndex = (0, misc_1.useEvent)((index) => {
         var _a;
-        (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index);
+        const scrollPaddingTop = parseInt(getComputedStyle(scrollRef.current).scrollPaddingTop, 10) || 0;
+        (_a = virtualizerRef.current) === null || _a === void 0 ? void 0 : _a.scrollToIndex(index, {
+            offset: -scrollPaddingTop,
+        });
     });
     const scrollToId = (0, misc_1.useEvent)((id) => {
         const index = rows === null || rows === void 0 ? void 0 : rows.findIndex((row) => row[idKey] === id);
@@ -349,7 +356,14 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             scrollToIndex(index);
         }
     });
-    (0, react_2.useLayoutEffect)(() => {
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (parentRef.current && hasOutsideScroll && scrollRef.current) {
+            offsetsRef.current.offsetTop =
+                parentRef.current.getBoundingClientRect().top -
+                    scrollRef.current.getBoundingClientRect().top;
+        }
+    }, [hasOutsideScroll]);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             scrollToBottom,
             scrollToTop,
@@ -357,7 +371,7 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
             scrollToId,
         });
     }, [registerComponentApi, scrollToBottom, scrollToId, scrollToIndex, scrollToTop]);
-    const rowTypeContextValue = (0, react_2.useCallback)((index) => rows[index]._row_type, [rows]);
+    const rowTypeContextValue = (0, react_1.useCallback)((index) => rows[index]._row_type, [rows]);
     return ((0, jsx_runtime_1.jsx)(ListItemTypeContext.Provider, { value: rowTypeContextValue, children: (0, jsx_runtime_1.jsx)(exports.ListContext.Provider, { value: expandContextValue, children: (0, jsx_runtime_1.jsxs)("div", { ref: rootRef, style: style, className: (0, classnames_1.default)(List_module_scss_1.default.outerWrapper, {
                     [List_module_scss_1.default.hasOutsideScroll]: hasOutsideScroll,
                 }), children: [loading && rows.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: List_module_scss_1.default.loadingWrapper, children: (0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, {}) })), !loading &&
@@ -366,7 +380,7 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
                             [List_module_scss_1.default.reverse]: scrollAnchor === "bottom",
                             [List_module_scss_1.default.borderCollapse]: borderCollapse,
                             [List_module_scss_1.default.sectioned]: groupBy !== undefined,
-                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: !hasOutsideScroll ? 0 : ((_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.offsetTop) || 0, item: Item, count: (_b = rows.length) !== null && _b !== void 0 ? _b : 0, children: (rowIndex) => {
+                        }), "data-list-container": true, children: (0, jsx_runtime_1.jsx)(virtua_1.Virtualizer, { ref: virtualizerRef, scrollRef: scrollElementRef, shift: shift, onScroll: onScroll, startMargin: offsetsRef.current.offsetTop, item: Item, count: (_a = rows.length) !== null && _a !== void 0 ? _a : 0, children: (rowIndex) => {
                                 const row = rows[rowIndex];
                                 const key = row[idKey];
                                 switch (row._row_type) {
@@ -381,10 +395,10 @@ exports.ListNative = (0, react_2.forwardRef)(function DynamicHeightList({ items
 });
 // --- Helper function for List item rendering
 function MemoizedSection({ node, renderChild, item, }) {
-    const { isExpanded, toggleExpanded } = (0, react_2.useContext)(exports.ListContext);
+    const { isExpanded, toggleExpanded } = (0, react_1.useContext)(exports.ListContext);
     const id = item.id;
     const expanded = isExpanded(id);
-    const sectionContext = (0, react_2.useMemo)(() => {
+    const sectionContext = (0, react_1.useMemo)(() => {
         return {
             isExpanded: expanded,
             toggle: () => {

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

@@ -26,15 +26,15 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
         },
     },
     defaultThemeVars: {
-        "color-border-HorizontalRule": "$color-border",
-        "thickness-border-HorizontalRule": "1px",
-        "style-border-HorizontalRule": "solid",
+        "borderColor-HorizontalRule": "$borderColor",
+        "borderWidth-HorizontalRule": "1px",
+        "borderStyle-HorizontalRule": "solid",
         "accent-Blockquote": "$color-primary",
         "padding-Blockquote": "$space-2 $space-6",
         "margin-Blockquote": "$space-2",
-        "padding-left-UnorderedList": "$space-6",
-        "padding-left-OrderedList": "$space-6",
-        "padding-left-ListItem": "$space-1",
+        "paddingLeft-UnorderedList": "$space-6",
+        "paddingLeft-OrderedList": "$space-6",
+        "paddingLeft-ListItem": "$space-1",
         light: {
         // --- No light-specific theme vars
         },

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = __importDefault(require("react"));
 const react_markdown_1 = __importDefault(require("react-markdown"));
 const remark_gfm_1 = __importDefault(require("remark-gfm"));
 const unist_util_visit_1 = require("unist-util-visit");
 const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
 const HtmlTags_module_scss_1 = __importDefault(require("../HtmlTags/HtmlTags.module.scss"));
-const HeadingNative_1 = require("../Heading/HeadingNative");
 const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("../Link/LinkNative");
 const ImageNative_1 = require("../Image/ImageNative");
@@ -21,24 +21,24 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, [bindingExpression, { extractValue }]], components: {
-                h1({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h1", sx: { lineHeight: "initial" }, children: children }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.markdownContent, style: Object.assign({}, style), children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, { remarkPlugins: [remark_gfm_1.default, [bindingExpression, { extractValue }]], components: {
+                h1({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h1", { className: HtmlTags_module_scss_1.default.htmlH1, children: children });
                 },
-                h2({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h2", sx: { lineHeight: "initial" }, children: children }));
+                h2({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h2", { className: HtmlTags_module_scss_1.default.htmlH2, children: children });
                 },
-                h3({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h3", sx: { lineHeight: "initial" }, children: children }));
+                h3({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h3", { className: HtmlTags_module_scss_1.default.htmlH3, children: children });
                 },
-                h4({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h4", sx: { lineHeight: "initial" }, children: children }));
+                h4({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h4", { className: HtmlTags_module_scss_1.default.htmlH4, children: children });
                 },
-                h5({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h5", sx: { lineHeight: "initial" }, children: children }));
+                h5({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h5", { className: HtmlTags_module_scss_1.default.htmlH5, children: children });
                 },
-                h6({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h6", sx: { lineHeight: "initial" }, children: children }));
+                h6({ children }) {
+                    return (0, jsx_runtime_1.jsx)("h6", { className: HtmlTags_module_scss_1.default.htmlH6, children: children });
                 },
                 p({ id, children }) {
                     return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, children: children }));
@@ -62,13 +62,13 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                     return (0, jsx_runtime_1.jsx)(Blockquote, { children: children });
                 },
                 ol({ children }) {
-                    return (0, jsx_runtime_1.jsx)(OrderedList, { children: children });
+                    return (0, jsx_runtime_1.jsx)("ol", { className: HtmlTags_module_scss_1.default.htmlOl, children: children });
                 },
                 ul({ children }) {
-                    return (0, jsx_runtime_1.jsx)(UnorderedList, { children: children });
+                    return (0, jsx_runtime_1.jsx)("ul", { className: HtmlTags_module_scss_1.default.htmlUl, children: children });
                 },
                 li({ children }) {
-                    return (0, jsx_runtime_1.jsx)(ListItem, { children: children });
+                    return (0, jsx_runtime_1.jsx)("li", { children: children }); // No custom styling for li elements
                 },
                 hr() {
                     return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
@@ -122,6 +122,62 @@ const HorizontalRule = () => {
     return (0, jsx_runtime_1.jsx)("hr", { className: Markdown_module_scss_1.default.horizontalRule });
 };
 const Blockquote = ({ children, style }) => {
+    // Helper function to extract text content from React nodes
+    const extractTextContent = (node) => {
+        if (typeof node === 'string') {
+            return node;
+        }
+        if (react_2.default.isValidElement(node) && node.props && node.props.children) {
+            if (Array.isArray(node.props.children)) {
+                return node.props.children.map(extractTextContent).join('');
+            }
+            return extractTextContent(node.props.children);
+        }
+        return '';
+    };
+    // Extract all text content
+    const allText = react_2.default.Children.toArray(children).map(extractTextContent).join('');
+    // Check for admonition pattern
+    const match = allText.match(/\[!([A-Z]+)\]/);
+    const isAdmonition = !!match;
+    if (isAdmonition && match && match[1]) {
+        const type = match[1].toLowerCase();
+        // Map admonition type to emoji
+        const emojiMap = {
+            info: '💡',
+            warning: '⚠️',
+            danger: '🚫',
+            note: '📝',
+            tip: '💬'
+        };
+        // Process children to remove the admonition marker
+        const processNode = (node) => {
+            if (typeof node === 'string') {
+                return node.replace(/\[!([A-Z]+)\]\s*/, '');
+            }
+            if (react_2.default.isValidElement(node)) {
+                // Handle React elements with children
+                if (node.props && node.props.children) {
+                    let newChildren;
+                    if (Array.isArray(node.props.children)) {
+                        newChildren = node.props.children.map(processNode);
+                    }
+                    else {
+                        newChildren = processNode(node.props.children);
+                    }
+                    return react_2.default.cloneElement(node, node.props, newChildren);
+                }
+                // Element without children, return as is
+                return node;
+            }
+            // Other node types (null, undefined, etc.)
+            return node;
+        };
+        const processedChildren = react_2.default.Children.map(children, processNode);
+        // Render admonition blockquote with the updated structure
+        return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.admonitionBlockquote, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: Markdown_module_scss_1.default.admonitionContainer, children: [(0, jsx_runtime_1.jsx)("div", { className: `${Markdown_module_scss_1.default.admonitionIcon} ${Markdown_module_scss_1.default[type] || ''}`, children: emojiMap[type] || '💡' }), (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.admonitionContent, children: processedChildren })] }) }));
+    }
+    // Render regular blockquote
     return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: children }));
 };
 const UnorderedList = ({ children, style }) => {

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

@@ -51,8 +51,8 @@ exports.ModalDialogMd = (0, ComponentDefs_1.createMetadata)({
             "second (and so on) parameters. \`$param\` is the same as \`$params[0]\`."),
     },
     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" })), { [`color-bg-${COMP}`]: "$color-bg-primary", [`color-bg-overlay-${COMP}`]: "$color-bg-overlay", [`color-text-${COMP}`]: "$color-text-primary", [`radius-${COMP}`]: "$radius", [`font-family-${COMP}`]: "$font-family", [`max-width-${COMP}`]: "450px", [`margin-bottom-title-${COMP}`]: "0", dark: {
-            [`color-bg-${COMP}`]: "$color-bg-primary",
+    defaultThemeVars: Object.assign(Object.assign({}, (0, base_utils_1.paddingSubject)(COMP, { all: "$space-7" })), { [`backgroundColor-${COMP}`]: "$backgroundColor-primary", [`backgroundColor-overlay-${COMP}`]: "$backgroundColor-overlay", [`color-${COMP}`]: "$textColor-primary", [`borderRadius-${COMP}`]: "$borderRadius", [`fontFamily-${COMP}`]: "$fontFamily", [`maxWidth-${COMP}`]: "450px", [`marginBottom-title-${COMP}`]: "0", dark: {
+            [`backgroundColor-${COMP}`]: "$backgroundColor-primary",
         } }),
 });
 exports.modalViewComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.ModalDialogMd, ({ node, extractValue, layoutCss, renderChild, lookupEventHandler, registerComponentApi, layoutContext, }) => {

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

@@ -24,9 +24,9 @@ exports.NavGroupMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-dropdown-${COMP}`]: "$color-bg-primary",
-        [`radius-dropdown-${COMP}`]: "$radius",
-        [`shadow-dropdown-${COMP}`]: "$shadow-spread",
+        [`backgroundColor-dropdown-${COMP}`]: "$backgroundColor-primary",
+        [`borderRadius-dropdown-${COMP}`]: "$borderRadius",
+        [`boxShadow-dropdown-${COMP}`]: "$boxShadow-spread",
     },
 });
 exports.navGroupComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NavGroupMd, ({ node, extractValue, renderChild }) => {

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

@@ -53,33 +53,36 @@ exports.NavLinkMd = (0, ComponentDefs_1.createMetadata)({
         click: (0, metadata_helpers_1.dClick)(COMP),
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavLink_module_scss_1.default.themeVars),
+    themeVarDescriptions: {
+        [`color-indicator-${COMP}`]: "Provides the following states: `--hover`, `--active`, `--pressed`",
+    },
     defaultThemeVars: {
-        [`border-NavLink`]: "0px solid $color-border",
-        "radius-NavLink": "$radius",
-        "color-bg-NavLink": "transparent",
-        "padding-horizontal-NavLink": "$space-4",
-        "padding-vertical-NavLink": "$space-2",
-        "font-size-NavLink": "$font-size-small",
-        "font-weight-NavLink": "$font-weight-normal",
-        "font-family-NavLink": "$font-family",
-        "color-text-NavLink": "$color-text-primary",
-        "font-weight-NavLink--pressed": "$font-weight-normal",
-        "thickness-indicator-NavLink": "$space-0_5",
-        "color-outline-NavLink--focus": "$color-outline--focus",
-        "thickness-outline-NavLink--focus": "$thickness-outline--focus",
-        "style-outline-NavLink--focus": "$style-outline--focus",
-        "offset-outline-NavLink--focus": "-1px",
-        "radius-indicator-NavLink": "$radius",
+        [`border-${COMP}`]: "0px solid $borderColor",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`backgroundColor-${COMP}`]: "transparent",
+        [`paddingHorizontal-${COMP}`]: "$space-4",
+        [`paddingVertical-${COMP}`]: "$space-2",
+        [`fontSize-${COMP}`]: "$fontSize-small",
+        [`fontWeight-${COMP}`]: "$fontWeight-normal",
+        [`fontFamily-${COMP}`]: "$fontFamily",
+        [`color-${COMP}`]: "$textColor-primary",
+        [`fontWeight-${COMP}--pressed`]: "$fontWeight-normal",
+        [`thickness-indicator-${COMP}`]: "$space-0_5",
+        [`outlineColor-${COMP}--focus`]: "$outlineColor--focus",
+        [`outlineWidth-${COMP}--focus`]: "$outlineWidth--focus",
+        [`outlineStyle-${COMP}--focus`]: "$outlineStyle--focus",
+        [`outlineOffset-${COMP}--focus`]: "-1px",
+        [`borderRadius-indicator-${COMP}`]: "$borderRadius",
         light: {
-            "color-icon-NavLink": "$color-surface-500",
-            "color-indicator-NavLink--active": "$color-primary-500",
-            "color-indicator-NavLink--pressed": "$color-primary-500",
-            "color-indicator-NavLink--hover": "$color-primary-600",
+            [`color-icon-${COMP}`]: "$color-surface-500",
+            [`color-indicator-${COMP}--active`]: "$color-primary-500",
+            [`color-indicator-${COMP}--pressed`]: "$color-primary-500",
+            [`color-indicator-${COMP}--hover`]: "$color-primary-600",
         },
         dark: {
-            "color-indicator-NavLink--active": "$color-primary-500",
-            "color-indicator-NavLink--pressed": "$color-primary-500",
-            "color-indicator-NavLink--hover": "$color-primary-400",
+            [`color-indicator-${COMP}--active`]: "$color-primary-500",
+            [`color-indicator-${COMP}--pressed`]: "$color-primary-500",
+            [`color-indicator-${COMP}--hover`]: "$color-primary-400",
         },
     },
 });

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

@@ -20,17 +20,17 @@ exports.NavPanelMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NavPanel_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`color-bg-${COMP}`]: "transparent",
-        [`border-${COMP}`]: '0px solid $color-border',
-        [`padding-horizontal-${COMP}`]: "$space-4",
-        [`padding-vertical-logo-${COMP}`]: "$space-4",
-        [`padding-horizontal-logo-${COMP}`]: "$space-4",
-        [`margin-bottom-logo-${COMP}`]: "$space-4",
+        [`backgroundColor-${COMP}`]: "transparent",
+        [`border-${COMP}`]: '0px solid $borderColor',
+        [`paddingHorizontal-${COMP}`]: "$space-4",
+        [`paddingVertical-logo-${COMP}`]: "$space-4",
+        [`paddingHorizontal-logo-${COMP}`]: "$space-4",
+        [`marginBottom-logo-${COMP}`]: "$space-4",
         light: {
-            [`shadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
+            [`boxShadow-${COMP}-vertical`]: "4px 0 4px 0 rgb(0 0 0 / 10%)",
         },
         dark: {
-            [`shadow-${COMP}-vertical`]: "4px 0 6px 0 rgba(0, 0, 0, 0.2)",
+            [`boxShadow-${COMP}-vertical`]: "4px 0 6px 0 rgba(0, 0, 0, 0.2)",
         },
     },
 });

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

@@ -26,8 +26,8 @@ exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(NoResult_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`border-${COMP}`]: "0px solid $color-border",
-        [`padding-vertical-${COMP}`]: "$space-2",
+        [`border-${COMP}`]: "0px solid $borderColor",
+        [`paddingVertical-${COMP}`]: "$space-2",
         [`gap-icon-${COMP}`]: "$space-2",
         [`size-icon-${COMP}`]: "$space-8",
         light: {

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

@@ -43,11 +43,11 @@ exports.OffCanvasMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "width-OffCanvas": "600px",
         "padding-OffCanvas": "$padding-tight",
-        "padding-vertical-OffCanvas": "$padding-tight",
-        "padding-horizontal-OffCanvas": "$padding-normal",
-        "color-bg-OffCanvas": "$color-bg",
-        "shadow-horizontal-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
-        "shadow-vertical-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
+        "paddingVertical-OffCanvas": "$padding-tight",
+        "paddingHorizontal-OffCanvas": "$padding-normal",
+        "backgroundColor-OffCanvas": "$backgroundColor",
+        "boxShadow-horizontal-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
+        "boxShadow-vertical-OffCanvas": "0 2px 10px rgba(0, 0, 0, 0.2)",
         light: {},
         dark: {},
     },

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

@@ -22,15 +22,15 @@ exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
     },
     themeVars: (0, themeVars_1.parseScssVar)(ProgressBar_module_scss_1.default.themeVars),
     defaultThemeVars: {
-        [`radius-${COMP}`]: "$radius",
-        [`radius-indicator-${COMP}`]: "0px",
+        [`borderRadius-${COMP}`]: "$borderRadius",
+        [`borderRadius-indicator-${COMP}`]: "0px",
         [`thickness-${COMP}`]: "$space-2",
         light: {
-            [`color-bg-${COMP}`]: "$color-surface-200",
+            [`backgroundColor-${COMP}`]: "$color-surface-200",
             [`color-indicator-${COMP}`]: "$color-primary-500",
         },
         dark: {
-            [`color-bg-${COMP}`]: "$color-surface-700",
+            [`backgroundColor-${COMP}`]: "$color-surface-700",
             [`color-indicator-${COMP}`]: "$color-primary-500",
         },
     },

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

@@ -39,27 +39,27 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     themeVars: (0, themeVars_1.parseScssVar)(RadioGroup_module_scss_1.default.themeVars),
     defaultThemeVars: {
         [`gap-${RGOption}`]: "$space-1_5",
-        [`thickness-border-${RGOption}`]: "2px",
-        [`color-bg-checked-${RGOption}--disabled]`]: `$color-border-${RGOption}--disabled`,
-        [`color-bg-checked-${RGOption}-error`]: `$color-border-${RGOption}-error`,
-        [`color-bg-checked-${RGOption}-warning`]: `$color-border-${RGOption}-warning`,
-        [`color-bg-checked-${RGOption}-success`]: `$color-border-${RGOption}-success`,
-        [`font-size-${RGOption}`]: "$font-size-small",
-        [`font-weight-${RGOption}`]: "$font-weight-bold",
-        [`color-text-${RGOption}-error`]: `$color-border-${RGOption}-error`,
-        [`color-text-${RGOption}-warning`]: `$color-border-${RGOption}-warning`,
-        [`color-text-${RGOption}-success`]: `$color-border-${RGOption}-success`,
+        [`borderWidth-${RGOption}`]: "2px",
+        [`backgroundColor-checked-${RGOption}--disabled]`]: `$borderColor-${RGOption}--disabled`,
+        [`backgroundColor-checked-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
+        [`backgroundColor-checked-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
+        [`backgroundColor-checked-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
+        [`fontSize-${RGOption}`]: "$fontSize-small",
+        [`fontWeight-${RGOption}`]: "$fontWeight-bold",
+        [`color-${RGOption}-error`]: `$borderColor-${RGOption}-error`,
+        [`color-${RGOption}-warning`]: `$borderColor-${RGOption}-warning`,
+        [`color-${RGOption}-success`]: `$borderColor-${RGOption}-success`,
         light: {
-            [`color-bg-checked-${RGOption}-default`]: "$color-primary-500",
-            [`color-border-${RGOption}-default`]: "$color-surface-500",
-            [`color-border-${RGOption}-default--hover`]: "$color-surface-700",
-            [`color-border-${RGOption}-default--active`]: "$color-primary-500",
+            [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
+            [`borderColor-${RGOption}-default`]: "$color-surface-500",
+            [`borderColor-${RGOption}-default--hover`]: "$color-surface-700",
+            [`borderColor-${RGOption}-default--active`]: "$color-primary-500",
         },
         dark: {
-            [`color-bg-checked-${RGOption}-default`]: "$color-primary-500",
-            [`color-border-${RGOption}-default`]: "$color-surface-500",
-            [`color-border-${RGOption}-default--hover`]: "$color-surface-300",
-            [`color-border-${RGOption}-default--active`]: "$color-primary-400",
+            [`backgroundColor-checked-${RGOption}-default`]: "$color-primary-500",
+            [`borderColor-${RGOption}-default`]: "$color-surface-500",
+            [`borderColor-${RGOption}-default--hover`]: "$color-surface-300",
+            [`borderColor-${RGOption}-default--active`]: "$color-primary-400",
         },
     },
 });