xmlui 0.9.2 → 0.9.4

package/dist/scripts/src/components/App/AppNative.js

@@ -33,7 +33,7 @@ const AppHeaderNative_1 = require("../../components/AppHeader/AppHeaderNative");
 const AppLayoutContext_1 = require("./AppLayoutContext");
 function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollbarGutters = false, onReady = lodash_es_1.noop, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, renderChild, name, }) {
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
-    const { setActiveThemeTone, setActiveThemeId } = (0, ThemeContext_1.useThemes)();
+    const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);
     const layoutWithDefaultValue = layout || getThemeVar("layout-App") || "condensed-sticky";
     const safeLayout = layoutWithDefaultValue === null || layoutWithDefaultValue === void 0 ? void 0 : layoutWithDefaultValue.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all – (–) and — (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
@@ -60,7 +60,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
         return () => {
             mounted.current = false;
         };
-    }, [defaultTone, defaultTheme, setActiveThemeTone, setActiveThemeId]);
+    }, [defaultTone, defaultTheme, setActiveThemeTone, setActiveThemeId, themes]);
     (0, react_1.useEffect)(() => {
         onReady();
     }, [onReady]);

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

@@ -338,12 +338,17 @@ exports.HtmlDetailsMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         open: (0, ComponentDefs_1.d)("Specifies that the details are visible (open)"),
     },
+    themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsDetails),
+    defaultThemeVars: {
+        "marginTop-HtmlDetails": "1rem",
+        "marginBottom-HtmlDetails": "1rem",
+    }
 });
 exports.htmlDetailsTagRenderer = (0, renderers_1.createComponentRenderer)("details", exports.HtmlDetailsMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
     const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
     const { open } = p.asOptionalBoolean("open");
     const props = p.asRest();
-    return ((0, jsx_runtime_1.jsx)("details", Object.assign({ style: layoutCss, open: open !== null && open !== void 0 ? open : false }, props, { children: renderChild(node.children) })));
+    return ((0, jsx_runtime_1.jsx)("details", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlDetails, open: open !== null && open !== void 0 ? open : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDfnMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1392,6 +1397,11 @@ exports.HtmlVideoMd = (0, ComponentDefs_1.createMetadata)({
         src: (0, ComponentDefs_1.d)("Specifies the URL of the video file"),
         width: (0, ComponentDefs_1.d)("Specifies the width of the video player"),
     },
+    themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsVideo),
+    defaultThemeVars: {
+        "marginTop-HtmlVideo": "1rem",
+        "marginBottom-HtmlVideo": "1rem",
+    },
 });
 exports.htmlVideoTagRenderer = (0, renderers_1.createComponentRenderer)("video", exports.HtmlVideoMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
     const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markdownComponentRenderer = exports.MarkdownMd = void 0;
+exports.Markdown = exports.markdownComponentRenderer = exports.MarkdownMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Markdown_module_scss_1 = __importDefault(require("./Markdown.module.scss"));
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
@@ -12,7 +12,7 @@ const themeVars_1 = require("../../components-core/theming/themeVars");
 const MarkdownNative_1 = require("./MarkdownNative");
 const COMP = "Markdown";
 exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
-    description: `\`${COMP}\` displays plain text styled with markdown syntax.`,
+    description: `\`${COMP}\` displays plain text styled using markdown syntax.`,
     themeVars: (0, themeVars_1.parseScssVar)(Markdown_module_scss_1.default.themeVars),
     props: {
         content: (0, ComponentDefs_1.d)("This property sets the markdown content to display."),
@@ -22,19 +22,21 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
                 "indent found at the start of the content lines is removed from the " +
                 "beginning of every line.",
             valueType: "boolean",
-            defaultValue: MarkdownNative_1.defaultProps.removeIndents,
+            defaultValue: true,
         },
     },
     defaultThemeVars: {
-        "borderColor-HorizontalRule": "$borderColor",
-        "borderWidth-HorizontalRule": "1px",
-        "borderStyle-HorizontalRule": "solid",
-        "accent-Blockquote": "$color-primary",
-        "padding-Blockquote": "$space-2 $space-6",
-        "margin-Blockquote": "$space-2",
-        "paddingLeft-UnorderedList": "$space-6",
-        "paddingLeft-OrderedList": "$space-6",
-        "paddingLeft-ListItem": "$space-1",
+        "borderRadius-Admonition": "$space-4",
+        "iconSize-Admonition": "1.5rem",
+        "padding-Admonition": "1rem",
+        "marginBottom-Admonition": "1rem",
+        "marginLeft-Admonition-content": ".5rem",
+        "accentWidth-Blockquote": "3px",
+        "accentColor-Blockquote": "$color-surface-500",
+        "padding-Blockquote": ".5rem",
+        "marginBottom-Blockquote": "1rem",
+        "marginBottom-Text-codefence": ".5rem",
+        "marginBottom-Text-markdown": ".5rem",
         light: {
         // --- No light-specific theme vars
         },
@@ -63,5 +65,7 @@ exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)(COM
             }
         });
     }
-    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, MarkdownNative_1.defaultProps.removeIndents), extractValue: extractValue, children: renderedChildren }));
+    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, true), extractValue: extractValue, children: renderedChildren }));
 });
+var MarkdownNative_2 = require("./MarkdownNative");
+Object.defineProperty(exports, "Markdown", { enumerable: true, get: function () { return MarkdownNative_2.Markdown; } });

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

@@ -1,51 +1,69 @@
 "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.Markdown = exports.defaultProps = void 0;
+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 rehype_raw_1 = __importDefault(require("rehype-raw"));
 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");
 const Toggle_1 = require("../Toggle/Toggle");
 const ScriptingSourceTree_1 = require("../../abstractions/scripting/ScriptingSourceTree");
-exports.defaultProps = {
-    removeIndents: true,
-};
-exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeIndents = exports.defaultProps.removeIndents, children, style, }) {
+exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeIndents = true, children, style, }) {
     if (typeof children !== "string") {
         return null;
     }
-    const _children = removeIndents ? removeTextIndents(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: {
+    children = removeIndents ? removeTextIndents(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 }]], rehypePlugins: [rehype_raw_1.default], components: {
+                details(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("details", Object.assign({ className: HtmlTags_module_scss_1.default.htmlDetails }, props, { children: children }));
+                },
+                video(_a) {
+                    var { children, node } = _a, props = __rest(_a, ["children", "node"]);
+                    return (0, jsx_runtime_1.jsx)("video", Object.assign({ className: HtmlTags_module_scss_1.default.htmlVideo }, props, { children: children }));
+                },
                 h1({ children }) {
-                    return (0, jsx_runtime_1.jsx)("h1", { className: HtmlTags_module_scss_1.default.htmlH1, children: children });
+                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h1", children: children });
                 },
                 h2({ children }) {
-                    return (0, jsx_runtime_1.jsx)("h2", { className: HtmlTags_module_scss_1.default.htmlH2, children: children });
+                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h2", children: children });
                 },
                 h3({ children }) {
-                    return (0, jsx_runtime_1.jsx)("h3", { className: HtmlTags_module_scss_1.default.htmlH3, children: children });
+                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h3", children: children });
                 },
                 h4({ children }) {
-                    return (0, jsx_runtime_1.jsx)("h4", { className: HtmlTags_module_scss_1.default.htmlH4, children: children });
+                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h4", children: children });
                 },
                 h5({ children }) {
-                    return (0, jsx_runtime_1.jsx)("h5", { className: HtmlTags_module_scss_1.default.htmlH5, children: children });
+                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h5", children: children });
                 },
                 h6({ children }) {
-                    return (0, jsx_runtime_1.jsx)("h6", { className: HtmlTags_module_scss_1.default.htmlH6, children: children });
+                    return (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { level: "h6", children: children });
                 },
                 p({ id, children }) {
-                    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, children: children }));
+                    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "markdown", children: children }));
                 },
                 code({ id, children }) {
                     return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "code", children: children }));
@@ -77,8 +95,10 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                 hr() {
                     return (0, jsx_runtime_1.jsx)(HorizontalRule, {});
                 },
-                a({ href, children }) {
-                    return (0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: href || "/", children: children });
+                a(_a) {
+                    var { children, href } = _a, props = __rest(_a, ["children", "href"]);
+                    const allowedProps = ['style', 'disabled', 'active', 'icon', 'onClick'];
+                    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, Object.assign({ to: href }, allowedProps, { children: children })));
                 },
                 img({ src, alt }) {
                     return (0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: src, alt: alt });
@@ -108,7 +128,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ extractValue, removeInd
                 tfoot({ children }) {
                     return (0, jsx_runtime_1.jsx)("tfoot", { className: HtmlTags_module_scss_1.default.htmlTfoot, children: children });
                 },
-            }, children: _children }) }));
+            }, children: children }) }));
 });
 function removeTextIndents(input) {
     if (!input) {
@@ -184,8 +204,7 @@ const Blockquote = ({ children, style }) => {
         // 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 }));
+    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 }) }));
 };
 const UnorderedList = ({ children, style }) => {
     return ((0, jsx_runtime_1.jsx)("ul", { className: Markdown_module_scss_1.default.unorderedList, style: style, children: children }));

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

@@ -32,7 +32,9 @@ exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
         rangeStyle: (0, ComponentDefs_1.d)(`This property allows you to apply custom styles to the range element of the slider.`),
-        thumbStyle: (0, ComponentDefs_1.d)(`This property allows yout top apply custom styles to the thumb elements of the slider.`)
+        thumbStyle: (0, ComponentDefs_1.d)(`This property allows you to apply custom styles to the thumb elements of the slider.`),
+        showValues: (0, ComponentDefs_1.d)(`This property controls whether the slider shows the current values of the thumbs.`, null, "boolean", true),
+        valueFormat: (0, ComponentDefs_1.d)(`This property allows you to customize how the values are displayed.`, null, "any")
     },
     events: {
         didChange: (0, metadata_helpers_1.dDidChange)(COMP),
@@ -53,11 +55,28 @@ exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
         [`borderColor-thumb-${COMP}`]: "$color-surface-50",
         [`backgroundColor-thumb-${COMP}`]: "$color-primary",
         [`boxShadow-thumb-${COMP}`]: "$boxShadow-md",
-        [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-300",
-        [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-400",
+        [`boxShadow-thumb-${COMP}--hover`]: "$boxShadow-lg",
+        [`boxShadow-thumb-${COMP}--focus`]: "$boxShadow-xl",
+        [`borderRadius-${COMP}-default`]: "$borderRadius",
+        [`borderColor-${COMP}-default`]: "transparent",
+        [`borderWidth-${COMP}-default`]: "0",
+        [`borderStyle-${COMP}-default`]: "solid",
+        [`boxShadow-${COMP}-default`]: "none",
+        light: {
+            [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-300",
+            [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-400",
+            [`backgroundColor-thumb-${COMP}`]: "$color-primary-500",
+            [`borderColor-thumb-${COMP}`]: "$color-surface-50",
+        },
+        dark: {
+            [`backgroundColor-track-${COMP}--disabled`]: "$color-surface-600",
+            [`backgroundColor-range-${COMP}--disabled`]: "$color-surface-800",
+            [`backgroundColor-thumb-${COMP}`]: "$color-primary-400",
+            [`borderColor-thumb-${COMP}`]: "$color-surface-950",
+        },
     },
 });
-exports.sliderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SliderMd, ({ node, extractValue, lookupEventHandler, layoutCss, updateState, state, registerComponentApi, }) => {
-    var _a, _b, _c, _d, _e, _f, _g;
-    return ((0, jsx_runtime_1.jsx)(SliderNative_1.Slider, { validationStatus: extractValue(node.props.validationStatus), minStepsBetweenThumbs: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.minStepsBetweenThumbs), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, style: layoutCss, step: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.step), min: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.minValue), max: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.maxValue), enabled: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), rangeStyle: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.rangeStyle), thumbStyle: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.thumbStyle) }));
+exports.sliderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SliderMd, ({ node, extractValue, lookupEventHandler, lookupSyncCallback, layoutCss, updateState, state, registerComponentApi, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    return ((0, jsx_runtime_1.jsx)(SliderNative_1.Slider, { validationStatus: extractValue(node.props.validationStatus), minStepsBetweenThumbs: extractValue((_a = node.props) === null || _a === void 0 ? void 0 : _a.minStepsBetweenThumbs), value: state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, style: layoutCss, step: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.step), min: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.minValue), max: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.maxValue), enabled: extractValue.asOptionalBoolean((_e = node.props) === null || _e === void 0 ? void 0 : _e.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue.asOptionalString(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), rangeStyle: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.rangeStyle), thumbStyle: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.thumbStyle), showValues: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.showValues), valueFormat: lookupSyncCallback((_j = node.props) === null || _j === void 0 ? void 0 : _j.valueFormat) }));
 });

package/dist/scripts/src/components/Slider/SliderNative.js

@@ -46,33 +46,80 @@ const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const classnames_1 = __importDefault(require("classnames"));
-exports.Slider = (0, react_2.forwardRef)(({ style, step = 1, min, max, inverted, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = true, value, autoFocus, readOnly, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = "none", initialValue, minStepsBetweenThumbs, rangeStyle, thumbStyle, }, forwardedRef) => {
+// Helper function to ensure value is properly formatted
+const formatValue = (val, defaultVal = 0) => {
+    if (val === undefined) {
+        return [defaultVal];
+    }
+    if (typeof val === "number") {
+        return [val];
+    }
+    if (Array.isArray(val) && val.length > 0) {
+        return val;
+    }
+    return [defaultVal];
+};
+exports.Slider = (0, react_2.forwardRef)(({ style, step = 1, min = 0, max = 10, inverted, updateState, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, enabled = true, value, autoFocus, readOnly, tabIndex = -1, label, labelPosition, labelWidth, labelBreak, required, validationStatus = "none", initialValue, minStepsBetweenThumbs, rangeStyle, thumbStyle, showValues = true, valueFormat = (value) => value.toString(), }, forwardedRef) => {
     const inputRef = (0, react_1.useRef)(null);
+    // Initialize localValue properly
     const [localValue, setLocalValue] = react_1.default.useState([]);
+    // Process initialValue on mount
     (0, react_1.useEffect)(() => {
-        if (typeof value === "object") {
-            setLocalValue(value);
+        let initialVal;
+        if (typeof initialValue === "string") {
+            try {
+                // Try to parse as JSON first (for arrays)
+                initialVal = JSON.parse(initialValue);
+            }
+            catch (e) {
+                // If not JSON, try to parse as number
+                const num = parseFloat(initialValue);
+                if (!isNaN(num)) {
+                    initialVal = num;
+                }
+            }
         }
-        else if (typeof value === "number") {
-            setLocalValue([value]);
+        else {
+            initialVal = initialValue;
         }
-    }, [value]);
+        // Format the value properly
+        const formattedValue = formatValue(initialVal, min);
+        setLocalValue(formattedValue);
+        // Notify parent component
+        if (updateState) {
+            updateState({
+                value: formattedValue.length === 1 ? formattedValue[0] : formattedValue
+            }, { initial: true });
+        }
+    }, [initialValue, min, updateState]);
+    // Sync with external value changes
     (0, react_1.useEffect)(() => {
-        updateState({ value: initialValue }, { initial: true });
-    }, [initialValue, updateState]);
+        if (value !== undefined) {
+            const formattedValue = formatValue(value, min);
+            setLocalValue(formattedValue);
+        }
+    }, [value, min]);
     const updateValue = (0, react_1.useCallback)((value) => {
-        updateState({ value });
+        if (updateState) {
+            updateState({ value });
+        }
+        // Call onDidChange without extra arguments to maintain type compatibility
         onDidChange(value);
     }, [onDidChange, updateState]);
     const onInputChange = (0, react_1.useCallback)((value) => {
+        setLocalValue(value);
+        // 👇 Force the DOM element to reflect the latest value synchronously
+        if (inputRef.current) {
+            inputRef.current.value = value;
+        }
         if (value.length > 1) {
-            updateValue(value);
+            updateValue(value); // calls updateState + onDidChange
         }
         else if (value.length === 1) {
             updateValue(value[0]);
         }
     }, [updateValue]);
-    // --- Manage obtaining and losing the focus
+    // Component APIs
     const handleOnFocus = (0, react_1.useCallback)(() => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus();
     }, [onFocus]);
@@ -92,12 +139,25 @@ exports.Slider = (0, react_2.forwardRef)(({ style, step = 1, min, max, inverted,
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRoot), style: style, max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, "aria-required": required, value: localValue, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
-                        [Slider_module_scss_1.default.disabled]: !enabled,
-                        [Slider_module_scss_1.default.readOnly]: readOnly,
-                        [Slider_module_scss_1.default.error]: validationStatus === "error",
-                        [Slider_module_scss_1.default.warning]: validationStatus === "warning",
-                        [Slider_module_scss_1.default.valid]: validationStatus === "valid",
-                    }), children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { className: Slider_module_scss_1.default.sliderRange, style: rangeStyle }) }), localValue === null || localValue === void 0 ? void 0 : localValue.map((_, index) => ((0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { className: Slider_module_scss_1.default.sliderThumb, style: thumbStyle }, index)))] }) }));
+    // Ensure we always have at least one thumb
+    const displayValue = localValue.length > 0 ? localValue : [min];
+    // Format the current values as a string
+    const valuesText = displayValue.map(v => valueFormat(v)).join(', ');
+    // Create a custom label that includes the current values
+    const displayLabel = label ? (showValues ? `${label} ${valuesText}` : label) : (showValues ? valuesText : '');
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPosition, label: displayLabel, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("div", { className: Slider_module_scss_1.default.sliderContainer, children: (0, jsx_runtime_1.jsxs)(react_slider_1.Root, { minStepsBetweenThumbs: minStepsBetweenThumbs || 1, ref: inputRef, tabIndex: tabIndex, "aria-readonly": readOnly, className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRoot, {
+                    [Slider_module_scss_1.default.disabled]: !enabled,
+                    [Slider_module_scss_1.default.readOnly]: readOnly
+                }), style: style, max: max, min: min, inverted: inverted, step: step, disabled: !enabled, onFocus: handleOnFocus, onBlur: handleOnBlur, onValueChange: onInputChange, "aria-required": required, value: displayValue, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)(react_slider_1.Track, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderTrack, {
+                            [Slider_module_scss_1.default.disabled]: !enabled,
+                            [Slider_module_scss_1.default.readOnly]: readOnly,
+                            [Slider_module_scss_1.default.error]: validationStatus === "error",
+                            [Slider_module_scss_1.default.warning]: validationStatus === "warning",
+                            [Slider_module_scss_1.default.valid]: validationStatus === "valid",
+                        }), style: rangeStyle ? Object.assign({}, rangeStyle) : undefined, children: (0, jsx_runtime_1.jsx)(react_slider_1.Range, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderRange, {
+                                [Slider_module_scss_1.default.disabled]: !enabled
+                            }) }) }), displayValue.map((_, index) => ((0, jsx_runtime_1.jsx)(react_slider_1.Thumb, { className: (0, classnames_1.default)(Slider_module_scss_1.default.sliderThumb, {
+                            [Slider_module_scss_1.default.disabled]: !enabled
+                        }), style: thumbStyle ? Object.assign({}, thumbStyle) : undefined }, index)))] }) }) }));
 });
 exports.Slider.displayName = react_slider_1.Root.displayName;

package/dist/scripts/src/components/Theme/ThemeNative.js

@@ -122,7 +122,7 @@ function Theme({ id, isRoot = false, renderChild, node, tone, toastDuration = 50
     }, [devToolsEnabled, devToolsSide, devToolsSize]);
     if (isRoot) {
         const faviconUrl = getResourceUrl("resource:favicon") || "/resources/favicon.ico";
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `:root {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent), ref: (el) => {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_helmet_async_1.Helmet, { children: [!!faviconUrl && (0, jsx_runtime_1.jsx)("link", { rel: "icon", type: "image/svg+xml", href: faviconUrl }), fontLinks === null || fontLinks === void 0 ? void 0 : fontLinks.map((fontLink) => (0, jsx_runtime_1.jsx)("link", { href: fontLink, rel: "stylesheet" }, fontLink))] }), (0, jsx_runtime_1.jsx)("style", { type: "text/css", children: `.${className}  {${css}}` }), (0, jsx_runtime_1.jsxs)("div", { style: inspectStyle, id: "_ui-engine-theme-root", className: (0, classnames_1.default)(Theme_module_scss_1.default.baseRootComponent, className), ref: (el) => {
                         if (el) {
                             setRoot(el);
                         }

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

@@ -16,7 +16,7 @@ const classnames_1 = __importDefault(require("classnames"));
 const ButtonNative_1 = require("../components/Button/ButtonNative");
 const IconNative_1 = __importDefault(require("../components/Icon/IconNative"));
 const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton.module.scss"));
-const DevTools_1 = require("./DevTools");
+const DevTools_1 = require("./devtools/DevTools");
 // --- The context object that is used to store the inspector information.
 exports.InspectorContext = (0, react_1.createContext)(null);
 function InspectorProvider({ children, sources, }) {

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

@@ -115,7 +115,9 @@ class RestApiProxy {
                         //we can't access content-disposition header if it's a CORS request: The suggested workaround was adding Access-Control-Expose-Headers:Content-Disposition to the response header on the server.
                         // more info here: https://github.com/matthew-andrews/isomorphic-fetch/issues/67
                         let fileName = operation.fileName || "unknown";
-                        if (response.headers && response.headers.get && typeof response.headers.get === "function") {
+                        if (response.headers &&
+                            response.headers.get &&
+                            typeof response.headers.get === "function") {
                             const contentDisposition = (_a = response.headers.get("Content-Disposition")) === null || _a === void 0 ? void 0 : _a.toString();
                             if (contentDisposition) {
                                 const fileNameMatch = contentDisposition.match(/filename="(.+)"/);
@@ -123,7 +125,9 @@ class RestApiProxy {
                                     fileName = fileNameMatch[1];
                             }
                         }
-                        return isAxiosResponse(response) ? response.data : new File([yield response.clone().blob()], fileName);
+                        return isAxiosResponse(response)
+                            ? response.data
+                            : new File([yield response.clone().blob()], fileName);
                     })
                     : undefined,
                 transactionId,
@@ -213,7 +217,8 @@ class RestApiProxy {
                     };
                     (0, process_statement_sync_1.processStatementQueue)([arrowStmt], evalContext);
                     if ((_b = (_a = evalContext.mainThread) === null || _a === void 0 ? void 0 : _a.blocks) === null || _b === void 0 ? void 0 : _b.length) {
-                        return evalContext.mainThread.blocks[evalContext.mainThread.blocks.length - 1].returnValue;
+                        return evalContext.mainThread.blocks[evalContext.mainThread.blocks.length - 1]
+                            .returnValue;
                     }
                     return undefined;
                 }
@@ -260,7 +265,7 @@ class RestApiProxy {
                 method: method,
                 headers: aggregatedHeaders,
                 signal: abortSignal,
-                body: requestBody
+                body: requestBody,
             };
             if (onUploadProgress) {
                 console.log("Falling back to axios. Reason: onUploadProgress specified");
@@ -300,7 +305,9 @@ class RestApiProxy {
                 //poor man's axios response type guard
                 try {
                     return new EngineError_1.GenericBackendError(this.config.errorResponseTransform
-                        ? this.extractParam(true, this.config.errorResponseTransform, { $response: response.data })
+                        ? this.extractParam(true, this.config.errorResponseTransform, {
+                            $response: response.data,
+                        })
                         : response.data, response.status);
                 }
                 catch (_a) { }
@@ -323,13 +330,16 @@ class RestApiProxy {
         const conf = (appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) || { apiUrl: "" };
         const { apiUrl, errorResponseTransform } = conf;
         this.appContext = appContext;
-        const xsrfHeaders = {
-            "X-XSRF-TOKEN": (0, misc_1.readCookie)('XSRF-TOKEN')
-        };
+        const xsrfToken = (0, misc_1.readCookie)("XSRF-TOKEN");
+        const xsrfHeaders = xsrfToken
+            ? {
+                "X-XSRF-TOKEN": (0, misc_1.readCookie)("XSRF-TOKEN"),
+            }
+            : {};
         this.config = {
             apiUrl,
             errorResponseTransform,
-            headers: Object.assign(Object.assign({}, (_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.headers), xsrfHeaders)
+            headers: Object.assign(Object.assign({}, (_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.headers), xsrfHeaders),
         };
     }
     generateFullApiUrl(relativePath, queryParams) {