xmlui 0.9.38 → 0.9.40

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.38",
+    "version": "0.9.40",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -21,7 +21,7 @@
         "prepare-docs-data": "npm run build:xmlui-metadata",
         "generate-all-docs": "npm run build:xmlui-metadata && npm run build:ext-meta && npm run generate-docs",
         "export-themes": "npm run prepare-docs-data && node scripts/generate-docs/create-theme-files.mjs",
-        "generate-langserver-metadata": "node scripts/get-langserver-metadata.mjs > src/language-server/xmlui-metadata-generated.mjs"
+        "gen:langserver-metadata": "node scripts/get-langserver-metadata.mjs > src/language-server/xmlui-metadata-generated.mjs"
     },
     "dependencies": {
         "@eslint-community/regexpp": "4.10.0",
@@ -73,7 +73,7 @@
         "react": "18.2.0",
         "react-currency-input-field": "3.6.9",
         "react-datepicker": "4.25.0",
-        "react-day-picker": "9.6.7",
+        "react-day-picker": "9.7.0",
         "react-dom": "18.2.0",
         "react-dropzone": "14.2.3",
         "react-helmet-async": "1.3.0",
@@ -213,8 +213,8 @@
             "import": "./src/components-core/theming/_themes.scss"
         },
         "./vite-xmlui-plugin": {
-            "import": "./dist/scripts/bin/vite-xmlui-plugin.js",
-            "require": "./dist/scripts/bin/vite-xmlui-plugin.js"
+            "import": "./bin/vite-xmlui-plugin.ts",
+            "require": "./bin/vite-xmlui-plugin.ts"
         },
         "./language-server": {
             "import": "./src/language-server/server.ts",

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

@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlock = CodeBlock;
+exports.isBrowser = isBrowser;
+exports.decodeValue = decodeValue;
 exports.markdownCodeBlockParser = markdownCodeBlockParser;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CodeBlock_module_scss_1 = __importDefault(require("./CodeBlock.module.scss"));
@@ -24,6 +26,27 @@ function CodeBlock({ children, meta, textToCopy, style }) {
                                 react_hot_toast_1.default.success("Code copied!");
                             } }) })] })] }));
 }
+/*
+ * Check if global object window is defined
+ */
+function isBrowser() {
+    return typeof window !== 'undefined';
+}
+/*
+ * Decode base64 value, returns string
+ * @Params: string
+ */
+function decodeValue(value) {
+    if (!value) {
+        return null;
+    }
+    const valueToString = value.toString();
+    if (isBrowser()) {
+        return window.btoa(valueToString);
+    }
+    const buff = Buffer.from(valueToString, 'ascii');
+    return buff.toString('base64');
+}
 function markdownCodeBlockParser() {
     return function transformer(tree) {
         (0, unist_util_visit_1.visit)(tree, "code", visitor);
@@ -56,7 +79,7 @@ function markdownCodeBlockParser() {
             if (item.indexOf("=") === -1) {
                 if (item.startsWith("/") && item.endsWith("/")) {
                     const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data];
-                    const newItemBase64 = window.btoa(item.substring(1, item.length - 1));
+                    const newItemBase64 = decodeValue(item.substring(1, item.length - 1));
                     if (!unparsedSubstrings) {
                         acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] = newItemBase64;
                     }

package/dist/scripts/src/components/CodeBlock/highlight-code.js

@@ -12,10 +12,27 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeHighlighterMetaKeysData = exports.CodeHighlighterMetaKeys = void 0;
+exports.encodeValue = encodeValue;
 exports.parseMetaAndHighlightCode = parseMetaAndHighlightCode;
+exports.isCodeHighlighter = isCodeHighlighter;
 const react_1 = require("react");
 const highlightRowsClass = "codeBlockHighlightRow";
 const highlightSubstringsClass = "codeBlockHighlightString";
+/*
+ * Encode string, returns base64 value
+ * @Params: string
+ */
+function encodeValue(value) {
+    if (!value) {
+        return null;
+    }
+    const valueToString = value.toString();
+    if (typeof window !== 'undefined') {
+        return window.atob(valueToString);
+    }
+    const buff = Buffer.from(valueToString, 'base64');
+    return buff.toString('ascii');
+}
 /**
  * This function handles two things:
  * 1. The extraction of meta information from code blocks and exposing them as data-meta attributes
@@ -172,7 +189,7 @@ function parseSubstringHighlights(code, str) {
         return [];
     return str
         .split(" ")
-        .map((item) => window.atob(item))
+        .map((item) => encodeValue(item))
         .reduce((acc, item) => acc.concat(findAllNonOverlappingSubstrings(code, item)), []);
     function findAllNonOverlappingSubstrings(str, code) {
         const result = [];
@@ -192,6 +209,9 @@ function parseSubstringHighlights(code, str) {
         return result;
     }
 }
+function isCodeHighlighter(obj) {
+    return obj && obj.highlight && typeof obj.highlight === "function" && obj.availableLangs;
+}
 exports.CodeHighlighterMetaKeys = {
     language: { data: "data-language", prop: "language" },
     copy: { data: "data-copy", prop: "copy" },

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

@@ -377,17 +377,19 @@ class ComponentRegistry {
             this.registerCoreComponent(Tabs_1.tabsComponentRenderer);
             this.registerCoreComponent(Bookmark_1.bookmarkComponentRenderer);
             this.registerCoreComponent(TableOfContents_1.tableOfContentsRenderer);
-            this.registerCoreComponent(Breakout_1.breakoutComponentRenderer);
             this.registerCoreComponent(CodeBlock_1.codeBlockComponentRenderer);
-        }
+            // --- Nested app and related components
+            this.registerCoreComponent(NestedApp_1.nestedAppComponentRenderer);
+            // --- New Bootstrap-inspired components
+            this.registerCoreComponent(Carousel_1.carouselComponentRenderer);
+            this.registerCoreComponent(Accordion_1.accordionComponentRenderer);
+            this.registerCoreComponent(Slider_1.sliderComponentRenderer);
+            this.registerCoreComponent(Backdrop_1.backdropComponentRenderer);
+        }
+        this.registerCoreComponent(Breakout_1.breakoutComponentRenderer);
         this.registerCoreComponent(Theme_1.themeComponentRenderer);
         this.registerCoreComponent(AppState_1.appStateComponentRenderer);
         this.registerCoreComponent(APICall_2.apiCallRenderer);
-        // --- New Bootstrap-inspired components
-        this.registerCoreComponent(Carousel_1.carouselComponentRenderer);
-        this.registerCoreComponent(Accordion_1.accordionComponentRenderer);
-        this.registerCoreComponent(Slider_1.sliderComponentRenderer);
-        this.registerCoreComponent(Backdrop_1.backdropComponentRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlAddressTagRenderer);
@@ -488,8 +490,6 @@ class ComponentRegistry {
         this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
-        // --- Nested app and related components
-        this.registerCoreComponent(NestedApp_1.nestedAppComponentRenderer);
         this.registerActionFn(APICall_1.apiAction);
         this.registerActionFn(FileDownloadAction_1.downloadAction);
         this.registerActionFn(FileUploadAction_1.uploadAction);

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

@@ -111,6 +111,7 @@ exports.DatePickerMd = (0, ComponentDefs_1.createMetadata)({
         [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
         [`textColor-value-${COMP}`]: "$textColor-primary",
+        [`borderColor-selectedItem-${COMP}`]: "$color-primary-200",
         [`backgroundColor-menu-${COMP}`]: "$color-surface-50",
         [`backgroundColor-item-${COMP}--hover`]: "$color-surface-100",
         [`backgroundColor-item-${COMP}--active`]: "$color-surface-200",

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

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DatePicker = exports.defaultProps = exports.dateFormats = exports.WeekDays = exports.DatePickerModeValues = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = require("react");
 const react_day_picker_1 = require("react-day-picker");
 const date_fns_1 = require("date-fns");
 const ReactDropdownMenu = __importStar(require("@radix-ui/react-dropdown-menu"));
@@ -49,7 +50,7 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
-require("react-day-picker/dist/style.css");
+const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 exports.DatePickerModeValues = ["single", "range"];
 var WeekDays;
 (function (WeekDays) {
@@ -81,13 +82,15 @@ exports.defaultProps = {
     weekStartsOn: WeekDays.Sunday,
     disabledDates: [],
 };
-exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, fromDate, toDate, disabledDates = exports.defaultProps.disabledDates, style, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, }, forwardedRef) {
+exports.DatePicker = (0, react_2.forwardRef)(function DatePicker({ id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, fromDate, toDate, disabledDates = exports.defaultProps.disabledDates, style, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, label, labelPosition, labelWidth, labelBreak, inProgress, inProgressNotificationMessage, readOnly, required, }, forwardedRef) {
     const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
-    const [isButtonFocused, setIsButtonFocused] = (0, react_1.useState)(false);
-    const [isMenuFocused, setIsMenuFocused] = (0, react_1.useState)(false);
-    const referenceElement = (0, react_1.useRef)(null);
+    const [isButtonFocused, setIsButtonFocused] = (0, react_2.useState)(false);
+    const [isMenuFocused, setIsMenuFocused] = (0, react_2.useState)(false);
+    const referenceElement = (0, react_2.useRef)(null);
     const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(referenceElement, forwardedRef) : referenceElement;
-    const selected = (0, react_1.useMemo)(() => {
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
+    const selected = (0, react_2.useMemo)(() => {
         if (mode === "single" && typeof value === "string") {
             return parseISODate(value) || parseDate(value);
         }
@@ -99,21 +102,21 @@ exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialVa
         }
         return undefined;
     }, [value, mode]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (!exports.dateFormats.includes(dateFormat)) {
             throw new Error(`Invalid dateFormat: ${dateFormat}. Supported formats are: ${exports.dateFormats.join(", ")}`);
         }
     }, [dateFormat]);
-    const startDate = (0, react_1.useMemo)(() => {
+    const startDate = (0, react_2.useMemo)(() => {
         return fromDate ? (0, date_fns_1.parse)(fromDate, dateFormat, new Date()) : undefined;
     }, [fromDate, dateFormat]);
-    const endDate = (0, react_1.useMemo)(() => {
+    const endDate = (0, react_2.useMemo)(() => {
         return toDate ? (0, date_fns_1.parse)(toDate, dateFormat, new Date()) : undefined;
     }, [toDate, dateFormat]);
-    const disabled = (0, react_1.useMemo)(() => {
+    const disabled = (0, react_2.useMemo)(() => {
         return disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.map((date) => (0, date_fns_1.parse)(date, dateFormat, new Date()));
     }, [disabledDates, dateFormat]);
-    const [open, setOpen] = (0, react_1.useState)(false);
+    const [open, setOpen] = (0, react_2.useState)(false);
     const { root } = (0, ThemeContext_1.useTheme)();
     const handleOnButtonFocus = () => {
         setIsButtonFocused(true);
@@ -128,7 +131,7 @@ exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialVa
         setIsMenuFocused(false);
     };
     // Register component API for external interactions
-    const focus = (0, react_1.useCallback)(() => {
+    const focus = (0, react_2.useCallback)(() => {
         var _a;
         (_a = referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current) === null || _a === void 0 ? void 0 : _a.focus();
     }, [referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current]);
@@ -136,13 +139,13 @@ exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialVa
         const parsedDate = parseDate(newValue);
         handleSelect(parsedDate);
     });
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
             focus,
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (!isButtonFocused && !isMenuFocused) {
             onBlur === null || onBlur === void 0 ? void 0 : onBlur();
         }
@@ -150,10 +153,10 @@ exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialVa
             onFocus === null || onFocus === void 0 ? void 0 : onFocus();
         }
     }, [isButtonFocused, isMenuFocused, onFocus, onBlur]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
-    const handleSelect = (0, react_1.useCallback)((dateOrRange) => {
+    const handleSelect = (0, react_2.useCallback)((dateOrRange) => {
         if (!dateOrRange) {
             updateState({ value: undefined });
             onDidChange("");
@@ -177,12 +180,12 @@ exports.DatePicker = (0, react_1.forwardRef)(function DatePicker({ id, initialVa
             setOpen(false);
         }
     }, [onDidChange, updateState, mode, dateFormat]);
-    return inline ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) }) })) : ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { disabled: !enabled, id: id, ref: ref, style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
-                        [DatePicker_module_scss_1.default.disabled]: !enabled,
-                        [DatePicker_module_scss_1.default.error]: validationStatus === "error",
-                        [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
-                        [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
-                    }), onFocus: handleOnButtonFocus, onBlur: handleOnButtonBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, fixedWeeks: true, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] }));
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: inline ? ((0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) })) : ((0, jsx_runtime_1.jsxs)(ReactDropdownMenu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(ReactDropdownMenu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { disabled: !enabled, id: id, style: style, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
+                            [DatePicker_module_scss_1.default.disabled]: !enabled,
+                            [DatePicker_module_scss_1.default.error]: validationStatus === "error",
+                            [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
+                            [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
+                        }), onFocus: handleOnButtonFocus, onBlur: handleOnButtonBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }) }), (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(ReactDropdownMenu.Content, { align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, animate: true, fixedWeeks: true, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: !inline, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] })) }));
 });
 const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
 const parseISODate = (dateString) => {

package/dist/scripts/src/components/Icon/AdmonitionDanger.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdmonitionDangerIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const admonition_danger_svg_react_1 = __importDefault(require("./svg/admonition_danger.svg?react"));
+const AdmonitionDangerIcon = (props) => (0, jsx_runtime_1.jsx)(admonition_danger_svg_react_1.default, Object.assign({}, props));
+exports.AdmonitionDangerIcon = AdmonitionDangerIcon;

package/dist/scripts/src/components/Icon/AdmonitionInfo.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdmonitionInfoIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const admonition_info_svg_react_1 = __importDefault(require("./svg/admonition_info.svg?react"));
+const AdmonitionInfoIcon = (props) => (0, jsx_runtime_1.jsx)(admonition_info_svg_react_1.default, Object.assign({}, props));
+exports.AdmonitionInfoIcon = AdmonitionInfoIcon;

package/dist/scripts/src/components/Icon/AdmonitionNote.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdmonitionNoteIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const admonition_note_svg_react_1 = __importDefault(require("./svg/admonition_note.svg?react"));
+const AdmonitionNoteIcon = (props) => (0, jsx_runtime_1.jsx)(admonition_note_svg_react_1.default, Object.assign({}, props));
+exports.AdmonitionNoteIcon = AdmonitionNoteIcon;

package/dist/scripts/src/components/Icon/AdmonitionTip.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdmonitionTipIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const admonition_tip_svg_react_1 = __importDefault(require("./svg/admonition_tip.svg?react"));
+const AdmonitionTipIcon = (props) => (0, jsx_runtime_1.jsx)(admonition_tip_svg_react_1.default, Object.assign({}, props));
+exports.AdmonitionTipIcon = AdmonitionTipIcon;

package/dist/scripts/src/components/Icon/AdmonitionWarning.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AdmonitionWarningIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const admonition_warning_svg_react_1 = __importDefault(require("./svg/admonition_warning.svg?react"));
+const AdmonitionWarningIcon = (props) => (0, jsx_runtime_1.jsx)(admonition_warning_svg_react_1.default, Object.assign({}, props));
+exports.AdmonitionWarningIcon = AdmonitionWarningIcon;

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

@@ -83,6 +83,11 @@ const MoonIcon_1 = require("./Icon/MoonIcon");
 const StarsIcon_1 = require("./Icon/StarsIcon");
 const LightToDark_1 = require("./Icon/LightToDark");
 const DarkToLightIcon_1 = require("./Icon/DarkToLightIcon");
+const AdmonitionInfo_1 = require("./Icon/AdmonitionInfo");
+const AdmonitionWarning_1 = require("./Icon/AdmonitionWarning");
+const AdmonitionDanger_1 = require("./Icon/AdmonitionDanger");
+const AdmonitionNote_1 = require("./Icon/AdmonitionNote");
+const AdmonitionTip_1 = require("./Icon/AdmonitionTip");
 const pool = new Map();
 function registerIconRenderer(name, renderer) {
     if (typeof name === "object") {
@@ -212,6 +217,11 @@ registerIconRenderer("trending-level", (props) => (0, jsx_runtime_1.jsx)(Trendin
 registerIconRenderer("sortasc", (props) => (0, jsx_runtime_1.jsx)(SortAscendingIcon_1.SortAscendingIcon, Object.assign({}, props)));
 registerIconRenderer("sortdesc", (props) => (0, jsx_runtime_1.jsx)(SortDescendingIcon_1.SortDescendingIcon, Object.assign({}, props)));
 registerIconRenderer("nosort", (props) => (0, jsx_runtime_1.jsx)(NoSortIcon_1.NoSortIcon, Object.assign({}, props)));
+registerIconRenderer("admonition_info", (props) => (0, jsx_runtime_1.jsx)(AdmonitionInfo_1.AdmonitionInfoIcon, Object.assign({}, props)));
+registerIconRenderer("admonition_warning", (props) => (0, jsx_runtime_1.jsx)(AdmonitionWarning_1.AdmonitionWarningIcon, Object.assign({}, props)));
+registerIconRenderer("admonition_danger", (props) => (0, jsx_runtime_1.jsx)(AdmonitionDanger_1.AdmonitionDangerIcon, Object.assign({}, props)));
+registerIconRenderer("admonition_note", (props) => (0, jsx_runtime_1.jsx)(AdmonitionNote_1.AdmonitionNoteIcon, Object.assign({}, props)));
+registerIconRenderer("admonition_tip", (props) => (0, jsx_runtime_1.jsx)(AdmonitionTip_1.AdmonitionTipIcon, Object.assign({}, props)));
 // --- IDE extras (temporary)
 registerIconRenderer("arrowdown", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsArrowDownShort, Object.assign({}, props)));
 registerIconRenderer("square", (props) => (0, jsx_runtime_1.jsx)(bs_1.BsSquare, Object.assign({}, props)));

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

@@ -30,16 +30,28 @@ const Toggle_1 = require("../Toggle/Toggle");
 const NestedAppNative_1 = require("../NestedApp/NestedAppNative");
 const highlight_code_1 = require("../CodeBlock/highlight-code");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
+const AppContext_1 = require("../../components-core/AppContext");
 const CodeBlockNative_1 = require("../CodeBlock/CodeBlockNative");
 const classnames_1 = __importDefault(require("classnames"));
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 function PreTagComponent({ id, children, codeHighlighter }) {
     // TEMP: After ironing out theming for syntax highlighting, this should be removed
     const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
+    const { appGlobals } = (0, AppContext_1.useAppContext)();
+    let _codeHighlighter = null;
+    if (codeHighlighter) {
+        _codeHighlighter = codeHighlighter;
+    }
+    else {
+        _codeHighlighter = (0, highlight_code_1.isCodeHighlighter)(appGlobals.codeHighlighter)
+            ? appGlobals.codeHighlighter
+            : null;
+    }
     const defaultCodefence = ((0, jsx_runtime_1.jsx)(CodeBlockNative_1.CodeBlock, { children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "codefence", children: children }) }));
-    if (!codeHighlighter) {
+    if (!_codeHighlighter) {
         return defaultCodefence;
     }
-    const highlighterResult = (0, highlight_code_1.parseMetaAndHighlightCode)(children, codeHighlighter, activeThemeTone);
+    const highlighterResult = (0, highlight_code_1.parseMetaAndHighlightCode)(children, _codeHighlighter, activeThemeTone);
     if (!highlighterResult) {
         return defaultCodefence;
     }
@@ -190,13 +202,12 @@ const Blockquote = ({ children, style }) => {
     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: "💬",
+        const iconMap = {
+            info: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_info" }),
+            warning: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_warning" }),
+            danger: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_danger" }),
+            note: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_note" }),
+            tip: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_tip" }),
         };
         // Process children to remove the admonition marker
         const processNode = (node) => {
@@ -229,7 +240,7 @@ const Blockquote = ({ children, style }) => {
                 [Markdown_module_scss_1.default.danger]: type === "danger",
                 [Markdown_module_scss_1.default.note]: type === "note",
                 [Markdown_module_scss_1.default.tip]: type === "tip",
-            }), 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 })] }) }));
+            }), 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: iconMap[type] || (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "admonition_info" }) }), (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.admonitionContent, children: processedChildren })] }) }));
     }
     return ((0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: Markdown_module_scss_1.default.blockquoteContainer, children: children }) }));
 };

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

@@ -27,19 +27,9 @@ const NavPanelNative_1 = require("../NavPanel/NavPanelNative");
 exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
     var { 
     /* eslint-disable react/prop-types */
-    uid, children, disabled, to, sx = {}, displayActive = true, forceActive, vertical, style, onClick, icon } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "forceActive", "vertical", "style", "onClick", "icon"]);
+    uid, children, disabled, to, sx = {}, displayActive = true, vertical, style, onClick, icon, forceActive } = _a, rest = __rest(_a, ["uid", "children", "disabled", "to", "sx", "displayActive", "vertical", "style", "onClick", "icon", "forceActive"]);
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
     const navPanelContext = (0, react_1.useContext)(NavPanelNative_1.NavPanelContext);
-    // This is for applying the active indicator for the button
-    //
-    // NOTE: there is a bug if you use Actions.navigate in the onClick handler, the indicator is not removed after click
-    // The issue needs to be resolved by either using contextual state (the NavLink knows it is active or not)
-    // or by rethinking the component and removing the <button> -> Discuss!
-    const [isClicked, setIsClicked] = (0, react_1.useState)(false);
-    const onClickForButton = (0, react_1.useCallback)((event) => {
-        setIsClicked((last) => !last);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    }, [onClick]);
     let safeVertical = vertical;
     if (appLayoutContext && safeVertical === undefined) {
         safeVertical =
@@ -51,20 +41,20 @@ exports.NavLink = (0, react_1.forwardRef)(function NavLink(_a, ref) {
         }
     }, [to]);
     const styleObj = Object.assign(Object.assign({}, sx), style);
-    const sharedClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.linkWrapper, {
+    const baseClasses = (0, classnames_1.default)(NavLink_module_scss_1.default.content, NavLink_module_scss_1.default.base, {
         [NavLink_module_scss_1.default.disabled]: disabled,
         [NavLink_module_scss_1.default.vertical]: safeVertical,
-        [NavLink_module_scss_1.default.displayIndicator]: displayActive,
+        [NavLink_module_scss_1.default.includeHoverIndicator]: displayActive,
+        [NavLink_module_scss_1.default.navItemActive]: displayActive && forceActive,
     });
-    let content = null;
+    let content;
     if (disabled || !smartTo) {
-        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({ id: uid }, rest, { ref: ref, onClick: onClickForButton, className: (0, classnames_1.default)(sharedClasses, {
-                [NavLink_module_scss_1.default.active]: displayActive && (isClicked || forceActive),
-            }), style: styleObj, disabled: disabled, children: [icon, children] })));
+        content = ((0, jsx_runtime_1.jsxs)("button", Object.assign({}, rest, { ref: ref, onClick: onClick, className: baseClasses, style: styleObj, disabled: disabled, children: [icon, children] })));
     }
     else {
-        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(sharedClasses, {
-                [NavLink_module_scss_1.default.active]: displayActive && (isActive || forceActive),
+        content = ((0, jsx_runtime_1.jsxs)(react_2.NavLink, Object.assign({ id: uid }, rest, { ref: ref, to: smartTo, style: styleObj, onClick: onClick, className: ({ isActive }) => (0, classnames_1.default)(baseClasses, {
+                [NavLink_module_scss_1.default.displayActive]: displayActive,
+                [NavLink_module_scss_1.default.navItemActive]: displayActive && (isActive || forceActive),
             }), children: [icon, children] })));
     }
     return content;

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

@@ -120,7 +120,6 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         window.open(useHashBasedRouting ? `/#/playground#${appQueryString}` : `/playground#${appQueryString}`, "_blank");
     }), [app, components, title, activeTheme, activeTone, useHashBasedRouting]);
     (0, react_1.useEffect)(() => {
-        var _a;
         if (!shadowRef.current && rootRef.current) {
             // Clone existing style and link tags
             shadowRef.current = rootRef.current.attachShadow({ mode: "open" });
@@ -160,11 +159,14 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
                     compoundComponents,
                     themes: config === null || config === void 0 ? void 0 : config.themes,
                 }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }, `app-${nestedAppId}-${refreshVersion}`) }));
-        (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: apiWorker, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
-                                            openPlayground();
-                                        }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "Edit code in new window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
-                                            setRefreshVersion(refreshVersion + 1);
-                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), nestedAppRoot] })) : (nestedAppRoot) }) }));
+        (0, react_1.startTransition)(() => {
+            var _a;
+            (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: (0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: apiWorker, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                                openPlayground();
+                                            }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "Edit code in new window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                                setRefreshVersion(refreshVersion + 1);
+                                            }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] }), nestedAppRoot] })) : (nestedAppRoot) }) }));
+        });
     }, [
         activeTheme,
         allowPlaygroundPopup,

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

@@ -20,7 +20,6 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        maxLength: (0, metadata_helpers_1.dMaxLength)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
         readOnly: (0, metadata_helpers_1.dReadonly)(),

package/dist/scripts/src/components-core/XmluiCodeHighlighter.js

@@ -54,7 +54,7 @@ const ThemeContext_1 = require("./theming/ThemeContext");
 const classnames_1 = __importDefault(require("classnames"));
 const renderers_1 = require("./renderers");
 let highlighter = null;
-function XmluiCodeHighlighter({ value }) {
+function XmluiCodeHighlighter({ value, style }) {
     const { activeThemeTone } = (0, ThemeContext_1.useTheme)();
     const [initialized, setInitialized] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -101,10 +101,10 @@ function XmluiCodeHighlighter({ value }) {
     return ((0, jsx_runtime_1.jsx)("div", { className: XmluiCodeHighlighter_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(XmluiCodeHighlighter_module_scss_1.default.innerWrapper, {
                 [XmluiCodeHighlighter_module_scss_1.default.dark]: activeThemeTone === "dark",
                 [XmluiCodeHighlighter_module_scss_1.default.light]: activeThemeTone === "light",
-            }), dangerouslySetInnerHTML: {
+            }), style: style, dangerouslySetInnerHTML: {
                 __html: html,
             } }) }));
 }
-exports.codeComponentRenderer = (0, renderers_1.createComponentRenderer)("XmluiCodehighlighter", {}, ({ node, renderChild }) => {
-    return (0, jsx_runtime_1.jsx)(XmluiCodeHighlighter, { value: renderChild(node.children) });
+exports.codeComponentRenderer = (0, renderers_1.createComponentRenderer)("XmluiCodehighlighter", {}, ({ node, renderChild, layoutCss }) => {
+    return (0, jsx_runtime_1.jsx)(XmluiCodeHighlighter, { value: renderChild(node.children), style: layoutCss });
 });

package/dist/scripts/src/components-core/rendering/AppWrapper.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AppWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
 const react_query_1 = require("@tanstack/react-query");
 const react_helmet_async_1 = require("react-helmet-async");
@@ -41,10 +42,6 @@ const AppWrapper = ({ node, previewMode = false, routerBaseName: baseName = "",
     // --- Select the router type for the app
     const Router = previewMode ? react_router_dom_1.MemoryRouter : useHashBasedRouting ? react_router_dom_1.HashRouter : react_router_dom_1.BrowserRouter;
     const shouldSkipClientRouter = previewMode ? false : (typeof window === "undefined" || process.env.VITE_REMIX);
-    return (
-    // <React.StrictMode>
-    (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: AppRoot_1.queryClient, children: [!!shouldSkipClientRouter && dynamicChildren, !shouldSkipClientRouter && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) })
-    // </React.StrictMode>
-    );
+    return ((0, jsx_runtime_1.jsx)(react_1.default.StrictMode, { children: (0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: node, location: "root-outer", children: (0, jsx_runtime_1.jsxs)(react_query_1.QueryClientProvider, { client: AppRoot_1.queryClient, children: [!!shouldSkipClientRouter && dynamicChildren, !shouldSkipClientRouter && ((0, jsx_runtime_1.jsx)(Router, { basename: Router === react_router_dom_1.HashRouter ? undefined : baseName, children: dynamicChildren }))] }) }) }));
 };
 exports.AppWrapper = AppWrapper;