xmlui 0.7.15 → 0.7.16

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.7.15",
+    "version": "0.7.16",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

package/dist/scripts/src/components/Backdrop/BackdropNative.js

@@ -9,6 +9,6 @@ const react_1 = require("react");
 const Backdrop_module_scss_1 = __importDefault(require("./Backdrop.module.scss"));
 exports.Backdrop = (0, react_1.forwardRef)(function Backdrop({ style, children, overlayTemplate, backgroundColor = "black", opacity = "0.1" }, forwardedRef) {
     var _a;
-    const styleWithoutDims = { width: undefined };
-    return ((0, jsx_runtime_1.jsxs)("div", { className: Backdrop_module_scss_1.default.backdropContainer, style: Object.assign({ width: (_a = style.width) !== null && _a !== void 0 ? _a : "fit-content" }, style), ref: forwardedRef, children: [children, (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.backdrop, style: Object.assign(Object.assign({}, styleWithoutDims), { backgroundColor, opacity }) }), overlayTemplate && (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.overlay, children: overlayTemplate })] }));
+    const styleWithoutDims = Object.assign(Object.assign({}, style), { width: undefined });
+    return ((0, jsx_runtime_1.jsxs)("div", { className: Backdrop_module_scss_1.default.backdropContainer, style: { width: (_a = style.width) !== null && _a !== void 0 ? _a : "fit-content" }, ref: forwardedRef, children: [children, (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.backdrop, style: Object.assign(Object.assign({}, styleWithoutDims), { backgroundColor, opacity }) }), overlayTemplate && (0, jsx_runtime_1.jsx)("div", { className: Backdrop_module_scss_1.default.overlay, children: overlayTemplate })] }));
 });

package/dist/scripts/src/components/Card/CardNative.js

@@ -22,5 +22,5 @@ exports.Card = (0, react_1.forwardRef)(function Card({ children, orientation = e
             [Card_module_scss_1.default.isClickable]: !!onClick,
             [Card_module_scss_1.default.vertical]: orientation === "vertical",
             [Card_module_scss_1.default.horizontal]: orientation === "horizontal",
-        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", layout: { gap: "1rem" }, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", children: subtitle })] })] })), children] }));
+        }), style: style, onClick: onClick, children: [[title, subtitle, avatarUrl, showAvatar].some(Boolean) && ((0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", verticalAlignment: "center", style: { gap: "1rem" }, children: [showAvatar && (0, jsx_runtime_1.jsx)(AvatarNative_1.Avatar, { url: avatarUrl, name: title }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", children: [linkTo ? (title ? ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, { to: linkTo + "", children: (0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title })) })) : null) : title ? ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({}, titleProps, { children: title }))) : null, subtitle !== undefined && (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "small", children: subtitle })] })] })), children] }));
 });

package/dist/scripts/src/components/Footer/FooterNative.js

@@ -14,7 +14,7 @@ const AppLayoutContext_1 = require("@components/App/AppLayoutContext");
 exports.Footer = (0, react_1.forwardRef)(function Footer({ children, style, className, }, forwardedRef) {
     const { layout } = (0, AppLayoutContext_1.useAppLayoutContext)() || {};
     const canRestrictContentWidth = layout !== "vertical-full-header";
-    return ((0, jsx_runtime_1.jsx)("div", { className: Footer_module_scss_1.default.outerWrapper, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Footer_module_scss_1.default.wrapper, className, {
+    return ((0, jsx_runtime_1.jsx)("div", { className: Footer_module_scss_1.default.outerWrapper, ref: forwardedRef, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(Footer_module_scss_1.default.wrapper, className, {
                 [Footer_module_scss_1.default.full]: !canRestrictContentWidth,
-            }), style: style, children: children }) }));
+            }), children: children }) }));
 });

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

@@ -85,5 +85,5 @@ exports.FormMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.formComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.FormMd, ({ node, renderChild, extractValue, layoutCss, lookupEventHandler, registerComponentApi }) => {
-    return ((0, jsx_runtime_1.jsx)(FormNative_1.FormWithContextVar, { node: node, renderChild: renderChild, extractValue: extractValue, lookupEventHandler: lookupEventHandler, layoutCss: layoutCss, registerComponentApi: registerComponentApi }));
+    return ((0, jsx_runtime_1.jsx)(FormNative_1.FormWithContextVar, { node: node, renderChild: renderChild, extractValue: extractValue, lookupEventHandler: lookupEventHandler, style: layoutCss, registerComponentApi: registerComponentApi }));
 });

package/dist/scripts/src/components/Form/FormNative.js

@@ -290,10 +290,10 @@ const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialVal
             reset: doReset,
         });
     }, [doReset, registerComponentApi]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: formRef, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", layout: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", layout: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: formRef, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialogNative_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "vertical", style: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(TextNative_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
 });
 Form.displayName = "Form";
-function FormWithContextVar({ node, renderChild, extractValue, layoutCss, lookupEventHandler, registerComponentApi, }) {
+function FormWithContextVar({ node, renderChild, extractValue, style, lookupEventHandler, registerComponentApi, }) {
     const [formState, dispatch] = (0, react_2.useReducer)(formReducer, initialState);
     const nodeWithItem = (0, react_2.useMemo)(() => {
         return {
@@ -308,7 +308,7 @@ function FormWithContextVar({ node, renderChild, extractValue, layoutCss, lookup
     const submitMethod = extractValue.asOptionalString(node.props.submitMethod) || (initialValue ? "put" : "post");
     const submitUrl = extractValue.asOptionalString(node.props.submitUrl) ||
         extractValue.asOptionalString(node.props._data_url);
-    return ((0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), formState: formState, dispatch: dispatch, id: node.uid, style: layoutCss, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
+    return ((0, jsx_runtime_1.jsx)(Form, { keepModalOpenOnSubmit: extractValue.asOptionalBoolean(node.props.keepModalOpenOnSubmit), itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), formState: formState, dispatch: dispatch, id: node.uid, style: style, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), saveInProgressLabel: extractValue(node.props.saveInProgressLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit", {
             defaultHandler: submitUrl
                 ? `(eventArgs)=> Actions.callApi({ url: "${submitUrl}", method: "${submitMethod}", body: eventArgs })`
                 : undefined,

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

@@ -184,7 +184,7 @@ exports.H6Md = (0, ComponentDefs_1.createMetadata)({
 });
 function renderHeading({ node, extractValue, layoutCss, level, renderChild }) {
     var _a;
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(node.props.maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(node.props.preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(node.props.ellipses, true), layout: layoutCss, children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: node.uid, level: ((_a = extractValue.asOptionalString(level)) !== null && _a !== void 0 ? _a : "h1"), maxLines: extractValue.asOptionalNumber(node.props.maxLines), preserveLinebreaks: extractValue.asOptionalBoolean(node.props.preserveLinebreaks, false), ellipses: extractValue.asOptionalBoolean(node.props.ellipses, true), style: layoutCss, children: extractValue.asDisplayText(node.props.value) || renderChild(node.children) }));
 }
 exports.headingComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.HeadingMd, ({ node, extractValue, layoutCss, layoutNonCss, renderChild }) => {
     return renderHeading({

package/dist/scripts/src/components/Heading/HeadingNative.js

@@ -6,27 +6,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_2 = require("react");
 const Heading_module_scss_1 = __importDefault(require("./Heading.module.scss"));
 const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
 const css_utils_1 = require("@components-core/utils/css-utils");
 const TableOfContentsContext_1 = require("@components-core/TableOfContentsContext");
+const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
 const HeadingLevelKeys = ["h1", "h2", "h3", "h4", "h5", "h6"];
-const Heading = ({ uid, level = "h1", children, sx, layout, title, maxLines = 0, preserveLinebreaks, ellipses = true, className, }) => {
+exports.Heading = (0, react_1.forwardRef)(function Heading({ uid, level = "h1", children, sx, style, title, maxLines = 0, preserveLinebreaks, ellipses = true, className, }, forwardedRef) {
     const Element = level === null || level === void 0 ? void 0 : level.toLowerCase();
-    const elementRef = (0, react_1.useRef)(null);
-    const [anchorId, setAnchorId] = (0, react_1.useState)(null);
-    const anchorRef = (0, react_1.useRef)(null);
-    const tableOfContentsContext = (0, react_1.useContext)(TableOfContentsContext_1.TableOfContentsContext);
+    const elementRef = (0, react_2.useRef)(null);
+    const [anchorId, setAnchorId] = (0, react_2.useState)(null);
+    const anchorRef = (0, react_2.useRef)(null);
+    const tableOfContentsContext = (0, react_2.useContext)(TableOfContentsContext_1.TableOfContentsContext);
     const registerHeading = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.registerHeading;
     const observeIntersection = tableOfContentsContext === null || tableOfContentsContext === void 0 ? void 0 : tableOfContentsContext.observeIntersection;
-    (0, react_1.useEffect)(() => {
+    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(elementRef, forwardedRef) : elementRef;
+    (0, react_2.useEffect)(() => {
         var _a, _b, _c, _d;
         if (observeIntersection && elementRef.current) {
             const newAnchorId = (_d = (_c = (_b = (_a = elementRef.current.textContent) === null || _a === void 0 ? void 0 : _a.trim()) === null || _b === void 0 ? void 0 : _b.replace(/[^\w\s-]/g, "")) === null || _c === void 0 ? void 0 : _c.replace(/\s+/g, "-")) === null || _d === void 0 ? void 0 : _d.toLowerCase();
             setAnchorId(newAnchorId || null);
         }
     }, [observeIntersection]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (observeIntersection && elementRef.current && anchorId) {
             return registerHeading === null || registerHeading === void 0 ? void 0 : registerHeading({
                 id: anchorId,
@@ -36,10 +39,9 @@ const Heading = ({ uid, level = "h1", children, sx, layout, title, maxLines = 0,
             });
         }
     }, [anchorId, observeIntersection, registerHeading, level]);
-    return ((0, jsx_runtime_1.jsxs)(Element, { ref: elementRef, id: uid, title: title, style: Object.assign(Object.assign(Object.assign({}, sx), layout), (0, css_utils_1.getMaxLinesStyle)(maxLines)), className: (0, classnames_1.default)(Heading_module_scss_1.default.heading, Heading_module_scss_1.default[Element], className || "", {
+    return ((0, jsx_runtime_1.jsxs)(Element, { ref: ref, id: uid, title: title, style: Object.assign(Object.assign(Object.assign({}, sx), style), (0, css_utils_1.getMaxLinesStyle)(maxLines)), className: (0, classnames_1.default)(Heading_module_scss_1.default.heading, Heading_module_scss_1.default[Element], className || "", {
             [Heading_module_scss_1.default.truncateOverflow]: maxLines > 0,
             [Heading_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks,
             [Heading_module_scss_1.default.noEllipsis]: !ellipses,
-        }), children: [anchorId && observeIntersection && (0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, style: { width: 0, height: 0 } }), children] }));
-};
-exports.Heading = Heading;
+        }), children: [anchorId && observeIntersection && ((0, jsx_runtime_1.jsx)("span", { ref: anchorRef, id: anchorId, style: { width: 0, height: 0 } })), children] }));
+});

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

@@ -28,5 +28,5 @@ exports.IconMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.iconComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.IconMd, ({ node, extractValue, layoutCss }) => {
-    return ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: extractValue.asOptionalString(node.props.name), size: extractValue(node.props.size), layout: layoutCss, fallback: extractValue.asOptionalString(node.props.fallback) }));
+    return ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: extractValue.asOptionalString(node.props.name), size: extractValue(node.props.size), style: layoutCss, fallback: extractValue.asOptionalString(node.props.fallback) }));
 });

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

@@ -25,14 +25,14 @@ const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     var _b;
-    var { name, fallback, layout, className } = _a, restProps = __rest(_a, ["name", "fallback", "layout", "className"]);
+    var { name, fallback, style, className } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className"]);
     const iconRenderer = useFindIconRenderer(name, fallback);
     const computedSize = typeof (restProps === null || restProps === void 0 ? void 0 : restProps.size) === "string" ? mapSizeToIconPack(restProps.size) : restProps === null || restProps === void 0 ? void 0 : restProps.size;
     const width = computedSize || restProps.width;
     const height = computedSize || restProps.height;
     const computedProps = Object.assign(Object.assign({ 
         // className is needed to apply a default color to the icon, thus other component classes can override this one
-        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, layout), { "--icon-width": width, "--icon-height": height }) });
+        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }) });
     // ---
     const customIconUrl = useCustomIconUrl(name);
     if (customIconUrl) {

package/dist/scripts/src/components/Input/InputAdornment.js

@@ -10,5 +10,5 @@ const TextNative_1 = require("../Text/TextNative");
 const InputAdornment_module_scss_1 = __importDefault(require("./InputAdornment.module.scss"));
 const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
 function Adornment({ iconName, text, className }) {
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className), children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, layout: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { layout: { fontSize: "inherit" }, children: text }) }))] })) : null }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iconName || text ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(InputAdornment_module_scss_1.default.wrapper, className), children: [(0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: iconName, style: { color: "inherit" } }), text && ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", userSelect: "none" }, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { style: { fontSize: "inherit" }, children: text }) }))] })) : null }));
 }

package/dist/scripts/src/components/Link/LinkNative.js

@@ -7,20 +7,20 @@ exports.LocalLink = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@remix-run/react");
 const react_2 = require("react");
+const react_3 = require("react");
 const Link_module_scss_1 = __importDefault(require("./Link.module.scss"));
 const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
 const IconNative_1 = require("@components/Icon/IconNative");
 const component_utils_1 = require("@components/component-utils");
-const LocalLink = ({ to, children, icon, active, onClick, target, disabled, style }) => {
+exports.LocalLink = (0, react_2.forwardRef)(function LocalLink({ to, children, icon, active, onClick, target, disabled, style }, forwardedRef) {
     const iconLink = !!icon && !children;
-    const smartTo = (0, react_2.useMemo)(() => {
+    const smartTo = (0, react_3.useMemo)(() => {
         return (0, component_utils_1.createUrlWithQueryParams)(to);
     }, [to]);
     const Node = !to ? "div" : react_1.Link;
-    return ((0, jsx_runtime_1.jsxs)(Node, { to: smartTo, style: style, target: target, onClick: onClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
+    return ((0, jsx_runtime_1.jsxs)(Node, { ref: forwardedRef, to: smartTo, style: style, target: target, onClick: onClick, className: (0, classnames_1.default)(Link_module_scss_1.default.container, {
             [Link_module_scss_1.default.iconLink]: iconLink,
             [Link_module_scss_1.default.active]: active,
             [Link_module_scss_1.default.disabled]: disabled,
         }), children: [icon && ((0, jsx_runtime_1.jsx)("div", { className: Link_module_scss_1.default.iconWrapper, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: icon }) })), children] }));
-};
-exports.LocalLink = LocalLink;
+});

package/dist/scripts/src/components/Logo/LogoNative.js

@@ -4,12 +4,12 @@ exports.Logo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ImageNative_1 = require("@components/Image/ImageNative");
 const AppHeaderNative_1 = require("@components/AppHeader/AppHeaderNative");
-const Logo = ({ style }) => {
+const react_1 = require("react");
+exports.Logo = (0, react_1.forwardRef)(function Logo({ style, }, forwardedRef) {
     const logoUrl = (0, AppHeaderNative_1.useLogoUrl)();
     if (!logoUrl) {
         return null;
     }
     //width auto for safari
-    return ((0, jsx_runtime_1.jsx)(ImageNative_1.Image, { src: logoUrl, alt: "Logo", style: Object.assign({ width: "auto", boxShadow: "none" }, style) }));
-};
-exports.Logo = Logo;
+    return ((0, jsx_runtime_1.jsx)(ImageNative_1.Image, { ref: forwardedRef, src: logoUrl, alt: "Logo", style: Object.assign({ width: "auto", boxShadow: "none" }, style) }));
+});

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

@@ -41,5 +41,5 @@ exports.MarkdownMd = (0, ComponentDefs_1.createMetadata)({
 });
 exports.markdownComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.MarkdownMd, ({ node, extractValue, renderChild, layoutCss }) => {
     const content = extractValue.asString(node.props.content);
-    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { layout: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, false), children: content || renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(MarkdownNative_1.Markdown, { style: layoutCss, removeIndents: extractValue.asOptionalBoolean(node.props.removeIndents, false), children: content || renderChild(node.children) }));
 });

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

@@ -12,15 +12,15 @@ const HeadingNative_1 = require("@components/Heading/HeadingNative");
 const TextNative_1 = require("../Text/TextNative");
 const LinkNative_1 = require("@components/Link/LinkNative");
 const ImageNative_1 = require("@components/Image/ImageNative");
-exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false, children, layout }) {
+exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false, children, style }) {
     if (typeof children !== "string") {
         return null;
     }
     children = removeIndents ? removeTextIndents(children) : children;
-    const textLayoutToUse = { textAlign: layout === null || layout === void 0 ? void 0 : layout.textAlign };
+    const textLayoutToUse = { textAlign: style === null || style === void 0 ? void 0 : style.textAlign };
     return ((0, jsx_runtime_1.jsx)(react_markdown_1.default, { components: {
             h1({ id, children }) {
-                return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, layout: textLayoutToUse, level: "h1", sx: { lineHeight: "initial" }, children: children }));
+                return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, style: textLayoutToUse, level: "h1", sx: { lineHeight: "initial" }, children: children }));
             },
             h2({ id, children }) {
                 return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h2", sx: { lineHeight: "initial" }, children: children }));
@@ -38,7 +38,7 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false,
                 return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, { uid: id, level: "h6", sx: { lineHeight: "initial" }, children: children }));
             },
             p({ id, children }) {
-                return (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, layout: textLayoutToUse, children: children });
+                return (0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, style: textLayoutToUse, children: children });
             },
             code({ id, children }) {
                 return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "code", children: children }));
@@ -53,16 +53,16 @@ exports.Markdown = (0, react_1.memo)(function Markdown({ removeIndents = false,
                 return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, { uid: id, variant: "em", children: children }));
             },
             blockquote({ children }) {
-                return (0, jsx_runtime_1.jsx)(Blockquote, { layout: textLayoutToUse, children: children });
+                return (0, jsx_runtime_1.jsx)(Blockquote, { style: textLayoutToUse, children: children });
             },
             ol({ children }) {
-                return (0, jsx_runtime_1.jsx)(OrderedList, { layout: textLayoutToUse, children: children });
+                return (0, jsx_runtime_1.jsx)(OrderedList, { style: textLayoutToUse, children: children });
             },
             ul({ children }) {
-                return (0, jsx_runtime_1.jsx)(UnorderedList, { layout: textLayoutToUse, children: children });
+                return (0, jsx_runtime_1.jsx)(UnorderedList, { style: textLayoutToUse, children: children });
             },
             li({ children }) {
-                return (0, jsx_runtime_1.jsx)(ListItem, { layout: textLayoutToUse, children: children });
+                return (0, jsx_runtime_1.jsx)(ListItem, { style: textLayoutToUse, children: children });
             },
             // This needs a parser plugin for the ~ and ~~ signs that are available via react-markdown-gfm
             // or we implement our own parser?
@@ -93,15 +93,15 @@ function removeTextIndents(input) {
 const HorizontalRule = () => {
     return (0, jsx_runtime_1.jsx)("hr", { className: Markdown_module_scss_1.default.horizontalRule });
 };
-const Blockquote = ({ children, layout }) => {
-    return (0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: layout, children: children });
+const Blockquote = ({ children, style }) => {
+    return (0, jsx_runtime_1.jsx)("blockquote", { className: Markdown_module_scss_1.default.blockquote, style: style, children: children });
 };
-const UnorderedList = ({ children, layout }) => {
-    return (0, jsx_runtime_1.jsx)("ul", { className: Markdown_module_scss_1.default.unorderedList, style: layout, children: children });
+const UnorderedList = ({ children, style }) => {
+    return (0, jsx_runtime_1.jsx)("ul", { className: Markdown_module_scss_1.default.unorderedList, style: style, children: children });
 };
-const OrderedList = ({ children, layout }) => {
-    return (0, jsx_runtime_1.jsx)("ol", { className: Markdown_module_scss_1.default.orderedList, style: layout, children: children });
+const OrderedList = ({ children, style }) => {
+    return (0, jsx_runtime_1.jsx)("ol", { className: Markdown_module_scss_1.default.orderedList, style: style, children: children });
 };
-const ListItem = ({ children, layout }) => {
-    return (0, jsx_runtime_1.jsx)("li", { className: Markdown_module_scss_1.default.listItem, style: layout, children: children });
+const ListItem = ({ children, style }) => {
+    return (0, jsx_runtime_1.jsx)("li", { className: Markdown_module_scss_1.default.listItem, style: style, children: children });
 };

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

@@ -107,7 +107,7 @@ const ConfirmationModalContextProvider = ({ children }) => {
             confirm: handleShow,
         };
     }, [handleShow]);
-    return ((0, jsx_runtime_1.jsxs)(ConfirmationModalContext.Provider, { value: contextValue, children: [children, showConfirmationModal && ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: title, description: message, isOpen: true, onClose: handleCancel, buttons: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", layout: { width: "100%", gap: "1em" }, ref: buttonsRef, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", size: "sm", onClick: handleCancel, children: "Cancel" }), buttons.length > 1 ? (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }) : undefined, buttons.map(({ label, value, variant = "solid", themeColor = "attention" }, index) => {
+    return ((0, jsx_runtime_1.jsxs)(ConfirmationModalContext.Provider, { value: contextValue, children: [children, showConfirmationModal && ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { title: title, description: message, isOpen: true, onClose: handleCancel, buttons: (0, jsx_runtime_1.jsxs)(StackNative_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", style: { width: "100%", gap: "1em" }, ref: buttonsRef, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "ghost", themeColor: "secondary", size: "sm", onClick: handleCancel, children: "Cancel" }), buttons.length > 1 ? (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } }) : undefined, buttons.map(({ label, value, variant = "solid", themeColor = "attention" }, index) => {
                             return ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: variant, themeColor: themeColor, size: "sm", type: "submit", onClick: () => {
                                     handleOk(value);
                                 }, children: label }, index));

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

@@ -7,7 +7,7 @@ exports.NoResult = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const IconNative_1 = require("@components/Icon/IconNative");
 const NoResult_module_scss_1 = __importDefault(require("./NoResult.module.scss"));
-const NoResult = ({ label, icon, hideIcon = false, style }) => {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: NoResult_module_scss_1.default.wrapper, style: style, children: [!hideIcon && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: icon !== null && icon !== void 0 ? icon : "noresult", className: NoResult_module_scss_1.default.icon }), label] }));
-};
-exports.NoResult = NoResult;
+const react_1 = require("react");
+exports.NoResult = (0, react_1.forwardRef)(function NoResult({ label, icon, hideIcon = false, style }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: NoResult_module_scss_1.default.wrapper, style: style, ref: forwardedRef, children: [!hideIcon && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: icon !== null && icon !== void 0 ? icon : "noresult", className: NoResult_module_scss_1.default.icon }), label] }));
+});

package/dist/scripts/src/components/NumberBox/NumberBoxNative.js

@@ -48,7 +48,7 @@ const ButtonNative_1 = require("@components/Button/ButtonNative");
 const misc_1 = require("@components-core/utils/misc");
 const ItemWithLabel_1 = require("@components/FormItem/ItemWithLabel");
 const numberbox_abstractions_1 = require("./numberbox-abstractions");
-const NumberBox = ({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }) => {
+exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
     var _a;
     // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
     min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);
@@ -278,7 +278,7 @@ const NumberBox = ({ id, value, initialValue, style, enabled = true, placeholder
             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, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(NumberBox_module_scss_1.default.inputRoot, {
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(NumberBox_module_scss_1.default.inputRoot, {
                 [NumberBox_module_scss_1.default.readOnly]: readOnly,
                 [NumberBox_module_scss_1.default.disabled]: !enabled,
                 [NumberBox_module_scss_1.default.noSpinBox]: !hasSpinBox,
@@ -289,8 +289,7 @@ const NumberBox = ({ id, value, initialValue, style, enabled = true, placeholder
                 var _a;
                 (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
             }, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: NumberBox_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("input", { id: id, type: "text", inputMode: "numeric", className: (0, classnames_1.default)(NumberBox_module_scss_1.default.input, { [NumberBox_module_scss_1.default.readOnly]: readOnly }), disabled: !enabled, value: valueStrRep, step: step, placeholder: placeholder, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, onBeforeInput: handleOnBeforeInput, onKeyDown: handleOnKey, readOnly: readOnly, ref: inputRef, autoFocus: autoFocus, maxLength: maxLength, required: required, "aria-required": required }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: NumberBox_module_scss_1.default.adornment }), hasSpinBox && ((0, jsx_runtime_1.jsxs)("div", { className: NumberBox_module_scss_1.default.spinnerBox, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "up", type: "button", variant: "ghost", themeColor: "secondary", tabIndex: -1, className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: upButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevronup", size: "sm" }) }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { "data-spinner": "down", type: "button", tabIndex: -1, variant: "ghost", themeColor: "secondary", className: NumberBox_module_scss_1.default.spinnerButton, disabled: !enabled || readOnly, ref: downButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "chevrondown", size: "sm" }) })] }))] }) }));
-};
-exports.NumberBox = NumberBox;
+});
 function applyStep(valueStrRep, step, min, max, integersOnly) {
     const currentValue = (0, numberbox_abstractions_1.toUsableNumber)(valueStrRep, integersOnly);
     if ((0, numberbox_abstractions_1.isEmptyLike)(currentValue)) {

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

@@ -7,6 +7,6 @@ exports.ProgressBar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ProgressBar_module_scss_1 = __importDefault(require("./ProgressBar.module.scss"));
 const react_1 = require("react");
-exports.ProgressBar = (0, react_1.forwardRef)(function ProgressBar({ value = 0, style }, ref) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: ProgressBar_module_scss_1.default.wrapper, style: style, ref: ref, children: (0, jsx_runtime_1.jsx)("div", { style: { width: `${value * 100}%` }, className: ProgressBar_module_scss_1.default.bar }) }));
+exports.ProgressBar = (0, react_1.forwardRef)(function ProgressBar({ value = 0, style }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: ProgressBar_module_scss_1.default.wrapper, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("div", { style: { width: `${value * 100}%` }, className: ProgressBar_module_scss_1.default.bar }) }));
 });

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

@@ -64,5 +64,5 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.radioGroupRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.RadioGroupMd, ({ node, extractValue, layoutCss, state, updateState, lookupEventHandler, renderChild, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { enabled: extractValue.asOptionalBoolean(node.props.enabled), layout: layoutCss, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, { enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, updateState: updateState, validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, label: extractValue.asOptionalString(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), children: renderChild(node.children) }));
 });

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

@@ -49,7 +49,7 @@ const OptionTypeProvider_1 = __importDefault(require("@components/Option/OptionT
 const RadioGroupValidationStatusContext = (0, react_1.createContext)({
     status: "none",
 });
-const RadioGroup = ({ id, value = "", initialValue = "", enabled = true, validationStatus = "none", label, labelPosition, labelWidth, labelBreak, required = false, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, }) => {
+exports.RadioGroup = (0, react_1.forwardRef)(function RadioGroup({ id, value = "", initialValue = "", enabled = true, validationStatus = "none", label, labelPosition, labelWidth, labelBreak, required = false, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, children, registerComponentApi, style, }, forwardedRef) {
     const [focused, setFocused] = react_1.default.useState(false);
     // --- Initialize the related field with the input's initial value
     (0, react_1.useEffect)(() => {
@@ -84,12 +84,11 @@ const RadioGroup = ({ id, value = "", initialValue = "", enabled = true, validat
     const contextValue = (0, react_1.useMemo)(() => {
         return { value, status: validationStatus };
     }, [value, validationStatus]);
-    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, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupValidationStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: exports.RadioGroupOption, children: (0, jsx_runtime_1.jsx)(RadioGroupValidationStatusContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(InnerRadioGroup.Root, { id: id, onBlur: handleOnBlur, onFocus: handleOnFocus, onValueChange: onInputChange, value: value, disabled: !enabled, className: (0, classnames_1.default)(RadioGroup_module_scss_1.default.radioGroupContainer, {
                         [RadioGroup_module_scss_1.default.focused]: focused,
                         [RadioGroup_module_scss_1.default.disabled]: !enabled,
                     }), children: children }) }) }) }));
-};
-exports.RadioGroup = RadioGroup;
+});
 const RadioGroupOption = ({ value, label, enabled = true }) => {
     const id = (0, react_1.useId)();
     const validationContext = (0, react_1.useContext)(RadioGroupValidationStatusContext);

package/dist/scripts/src/components/Range/RangeNative.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Range = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Range = ({}) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: "orangered", color: "white", padding: 2 }, children: "Range component is not implemented yet" }));
-};
-exports.Range = Range;
+const react_1 = require("react");
+exports.Range = (0, react_1.forwardRef)(function Range({ style }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, style: Object.assign({ backgroundColor: "orangered", color: "white", padding: 2 }, style), children: "Range component is not implemented yet" }));
+});

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

@@ -84,7 +84,7 @@ exports.SelectMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.selectComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SelectMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: extractValue.asOptionalBoolean(node.props.multiSelect), layout: layoutCss, updateState: updateState, searchable: extractValue.asOptionalBoolean(node.props.searchable), initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), optionLabelRenderer: node.props.optionLabelTemplate
+    return ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, { multiSelect: extractValue.asOptionalBoolean(node.props.multiSelect), style: layoutCss, updateState: updateState, searchable: extractValue.asOptionalBoolean(node.props.searchable), initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required), optionLabelRenderer: node.props.optionLabelTemplate
             ? (item) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionLabelTemplate, item: item, renderChild: renderChild }));
             }

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

@@ -71,7 +71,7 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
                         [Select_module_scss_1.default.valid]: validationStatus === "valid",
                     }), ref: ref, autoFocus: autoFocus, children: [(0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.selectValue, children: (0, jsx_runtime_1.jsx)(react_select_1.Value, { placeholder: placeholder }) }), (0, jsx_runtime_1.jsx)(react_select_1.Icon, { asChild: true, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }), (0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsxs)(react_select_1.Content, { className: Select_module_scss_1.default.selectContent, position: "popper", style: { height: height }, children: [(0, jsx_runtime_1.jsx)(react_select_1.ScrollUpButton, { className: Select_module_scss_1.default.selectScrollUpButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup" }) }), (0, jsx_runtime_1.jsx)(react_select_1.Viewport, { className: (0, classnames_1.default)(Select_module_scss_1.default.selectViewport), children: children }), (0, jsx_runtime_1.jsx)(react_select_1.ScrollDownButton, { className: Select_module_scss_1.default.selectScrollDownButton, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] }) })] }) }));
 });
-exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, valueRenderer, layout, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, }, ref) {
+exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, value, enabled = true, placeholder, updateState = constants_1.noop, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, emptyListTemplate, optionLabelRenderer, valueRenderer, style, dropdownHeight, children, autoFocus = false, searchable = false, multiSelect = false, label, labelPosition, labelWidth, labelBreak, required = false, }, ref) {
     var _a;
     const [referenceElement, setReferenceElement] = (0, react_2.useState)(null);
     const [open, setOpen] = (0, react_2.useState)(false);
@@ -155,7 +155,7 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
         optionLabelRenderer,
         onChange: toggleOption,
     }), [multiSelect, toggleOption, value, optionLabelRenderer]);
-    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption, children: [children, (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: layout, children: (0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { id: id, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
+    return ((0, jsx_runtime_1.jsx)(SelectContext_1.SelectContext.Provider, { value: selectContextValue, children: (0, jsx_runtime_1.jsx)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: searchable || multiSelect ? ((0, jsx_runtime_1.jsxs)(OptionTypeProvider_1.default, { Component: HiddenOption, children: [children, (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: ref, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)("button", { id: id, ref: setReferenceElement, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, "aria-expanded": open, onClick: () => setOpen((prev) => !prev), className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, Select_module_scss_1.default[validationStatus], {
                                             [Select_module_scss_1.default.disabled]: !enabled,
                                             [Select_module_scss_1.default.multi]: multiSelect,
                                         }), autoFocus: autoFocus, children: [multiSelect ? (Array.isArray(value) && value.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeListContainer, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.badgeList, children: value.map((v) => {
@@ -176,18 +176,17 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                 return 0;
                                             }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                 // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                                (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) })] }) })] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { ref: ref, value: value, options: options, onValueChange: toggleOption, id: id, style: layout, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: children || emptyListNode })) }) }));
+                                                (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { value: value, label: label, enabled: enabled, keywords: keywords }, value))), (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) })] }) })] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { ref: ref, value: value, options: options, onValueChange: toggleOption, id: id, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: children || emptyListNode })) }) }));
 });
-const ComboboxOption = (option) => {
+exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_2.useId)();
     const { label, value, enabled = true, keywords } = option;
     const { value: selectedValue, onChange, multi, optionLabelRenderer } = (0, SelectContext_1.useSelect)();
     const selected = Array.isArray(selectedValue) && multi ? selectedValue.includes(value) : selectedValue === value;
-    return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, disabled: !enabled, value: value, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
+    return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, ref: forwardedRef, disabled: !enabled, value: value, className: Select_module_scss_1.default.multiComboboxOption, onSelect: () => {
             onChange(value);
         }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] }, id));
-};
-exports.ComboboxOption = ComboboxOption;
+});
 function HiddenOption(option) {
     const { onOptionRemove, onOptionAdd } = (0, OptionContext_1.useOption)();
     const [node, setNode] = (0, react_2.useState)(null);

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

@@ -50,5 +50,5 @@ exports.SliderMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.sliderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SliderMd, ({ node, extractValue, lookupEventHandler, layoutCss }) => {
-    return (0, jsx_runtime_1.jsx)(SliderNative_1.Slider, {});
+    return (0, jsx_runtime_1.jsx)(SliderNative_1.Slider, { style: layoutCss });
 });

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Slider = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Slider = ({}) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: { backgroundColor: "orangered", color: "white", padding: 2 }, children: "Slider component is not implemented yet" }));
-};
-exports.Slider = Slider;
+const react_1 = require("react");
+exports.Slider = (0, react_1.forwardRef)(function Slider({ style }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: forwardedRef, style: Object.assign({ backgroundColor: "orangered", color: "white", padding: 2 }, style), children: "Slider component is not implemented yet" }));
+});

package/dist/scripts/src/components/Spinner/SpinnerNative.js

@@ -3,14 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Spinner = Spinner;
+exports.Spinner = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Spinner_module_scss_1 = __importDefault(require("./Spinner.module.scss"));
 const react_1 = require("react");
+const react_2 = require("react");
 // source https://loading.io/css/
-function Spinner({ delay = 400, fullScreen = false, style }) {
-    const [pastDelay, setPastDelay] = (0, react_1.useState)(delay === 0);
-    (0, react_1.useEffect)(() => {
+exports.Spinner = (0, react_1.forwardRef)(function Spinner({ delay = 400, fullScreen = false, style }, forwardedRef) {
+    const [pastDelay, setPastDelay] = (0, react_2.useState)(delay === 0);
+    (0, react_2.useEffect)(() => {
         const timeout = setTimeout(() => {
             setPastDelay(true);
         }, delay);
@@ -18,7 +19,7 @@ function Spinner({ delay = 400, fullScreen = false, style }) {
             clearTimeout(timeout);
         };
     }, [delay]);
-    const spinner = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: Spinner_module_scss_1.default["lds-ring"], style: style, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }) }));
+    const spinner = ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: Spinner_module_scss_1.default["lds-ring"], style: style, ref: forwardedRef, children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("div", {})] }) }));
     if (!pastDelay) {
         return null;
     }
@@ -28,4 +29,4 @@ function Spinner({ delay = 400, fullScreen = false, style }) {
         }
         return spinner;
     }
-}
+});

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

@@ -53,7 +53,7 @@ function renderSplitter(_a) {
     if (!(0, misc_1.isComponentDefChildren)(node.children)) {
         throw new EngineError_1.NotAComponentDefError();
     }
-    return ((0, jsx_runtime_1.jsx)(SplitterNative_1.Splitter, { layout: layoutCss, swapped: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.swapped), orientation: orientation, splitterTemplate: renderChild((_d = node.props) === null || _d === void 0 ? void 0 : _d.splitterTemplate), initialPrimarySize: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.initialPrimarySize), minPrimarySize: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.minPrimarySize), maxPrimarySize: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.maxPrimarySize), floating: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.floating), resize: lookupEventHandler("resize"), children: renderChild(node.children) }));
+    return ((0, jsx_runtime_1.jsx)(SplitterNative_1.Splitter, { style: layoutCss, swapped: extractValue.asOptionalBoolean((_c = node.props) === null || _c === void 0 ? void 0 : _c.swapped), orientation: orientation, splitterTemplate: renderChild((_d = node.props) === null || _d === void 0 ? void 0 : _d.splitterTemplate), initialPrimarySize: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.initialPrimarySize), minPrimarySize: extractValue((_f = node.props) === null || _f === void 0 ? void 0 : _f.minPrimarySize), maxPrimarySize: extractValue((_g = node.props) === null || _g === void 0 ? void 0 : _g.maxPrimarySize), floating: extractValue.asOptionalBoolean((_h = node.props) === null || _h === void 0 ? void 0 : _h.floating), resize: lookupEventHandler("resize"), children: renderChild(node.children) }));
 }
 exports.splitterComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.SplitterMd, ({ node, extractValue, renderChild, layoutCss, layoutNonCss, lookupEventHandler }) => {
     return renderSplitter({