xmlui 0.7.28 → 0.7.30

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

@@ -1,4 +1,15 @@
 "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 };
 };
@@ -32,27 +43,31 @@ exports.HtmlAMd = (0, ComponentDefs_1.createMetadata)({
         disabled: (0, ComponentDefs_1.d)("Specifies that the link should be disabled"),
     },
 });
-exports.htmlATagRenderer = (0, renderers_1.createComponentRenderer)("a", exports.HtmlAMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, Object.assign({ to: extractValue(node.props.href), disabled: !extractValue.asOptionalBoolean(node.props.disabled, true), style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlATagRenderer = (0, renderers_1.createComponentRenderer)("a", exports.HtmlAMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { disabled } = p.asOptionalBoolean("disabled");
+    const _a = p.asRest(), { href } = _a, rest = __rest(_a, ["href"]);
+    return ((0, jsx_runtime_1.jsx)(LinkNative_1.LocalLink, Object.assign({ to: href, disabled: disabled !== null && disabled !== void 0 ? disabled : false, style: layoutCss }, rest, { children: renderChild(node.children) })));
 });
 exports.HtmlAbbrMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `abbr` tag.",
     isHtmlTag: true,
 });
-exports.htmlAbbrTagRenderer = (0, renderers_1.createComponentRenderer)("abbr", exports.HtmlAbbrMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "abbr", children: renderChild(node.children) })));
+exports.htmlAbbrTagRenderer = (0, renderers_1.createComponentRenderer)("abbr", exports.HtmlAbbrMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "abbr", children: renderChild(node.children) })));
 });
 exports.HtmlAddressMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `address` tag.",
     isHtmlTag: true,
 });
-exports.htmlAddressTagRenderer = (0, renderers_1.createComponentRenderer)("address", exports.HtmlAddressMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("address", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlAddressTagRenderer = (0, renderers_1.createComponentRenderer)("address", exports.HtmlAddressMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("address", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlAreaMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -71,27 +86,30 @@ exports.HtmlAreaMd = (0, ComponentDefs_1.createMetadata)({
         media: (0, ComponentDefs_1.d)("Specifies a media query for the linked resource"),
     },
 });
-exports.htmlAreaTagRenderer = (0, renderers_1.createComponentRenderer)("area", exports.HtmlAreaMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("area", Object.assign({ style: layoutCss, alt: extractValue(node.props.alt), coords: extractValue(node.props.coords), download: extractValue(node.props.download), href: extractValue(node.props.href), hrefLang: extractValue(node.props.hrefLang), referrerPolicy: extractValue(node.props.referrerPolicy), rel: extractValue(node.props.rel), shape: extractValue(node.props.shape), target: extractValue(node.props.target), media: extractValue(node.props.media) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlAreaTagRenderer = (0, renderers_1.createComponentRenderer)("area", exports.HtmlAreaMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("area", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlArticleMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `article` tag.",
     isHtmlTag: true,
 });
-exports.htmlArticleTagRenderer = (0, renderers_1.createComponentRenderer)("article", exports.HtmlArticleMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("article", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlArticleTagRenderer = (0, renderers_1.createComponentRenderer)("article", exports.HtmlArticleMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("article", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlAsideMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `aside` tag.",
     isHtmlTag: true,
 });
-exports.htmlAsideTagRenderer = (0, renderers_1.createComponentRenderer)("aside", exports.HtmlAsideMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("aside", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlAsideTagRenderer = (0, renderers_1.createComponentRenderer)("aside", exports.HtmlAsideMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("aside", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlAudioMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -107,27 +125,31 @@ exports.HtmlAudioMd = (0, ComponentDefs_1.createMetadata)({
         src: (0, ComponentDefs_1.d)("Specifies the URL of the audio file"),
     },
 });
-exports.htmlAudioTagRenderer = (0, renderers_1.createComponentRenderer)("audio", exports.HtmlAudioMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("audio", Object.assign({ style: layoutCss, autoPlay: extractValue.asOptionalBoolean(node.props.autoPlay, false), controls: extractValue.asOptionalBoolean(node.props.controls, false), crossOrigin: extractValue(node.props.crossOrigin), loop: extractValue.asOptionalBoolean(node.props.loop, false), muted: extractValue.asOptionalBoolean(node.props.muted, false), preload: extractValue(node.props.preload), src: extractValue(node.props.src) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlAudioTagRenderer = (0, renderers_1.createComponentRenderer)("audio", exports.HtmlAudioMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { autoPlay, controls, loop, muted } = p.asOptionalBoolean("autoPlay", "controls", "loop", "muted");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("audio", Object.assign({ style: layoutCss, autoPlay: autoPlay !== null && autoPlay !== void 0 ? autoPlay : false, controls: controls !== null && controls !== void 0 ? controls : false, loop: loop !== null && loop !== void 0 ? loop : false, muted: muted !== null && muted !== void 0 ? muted : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlBMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `b` tag.",
     isHtmlTag: true,
 });
-exports.htmlBTagRenderer = (0, renderers_1.createComponentRenderer)("b", exports.HtmlBMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("b", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlBTagRenderer = (0, renderers_1.createComponentRenderer)("b", exports.HtmlBMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("b", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlBdiMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `bdi` tag.",
     isHtmlTag: true,
 });
-exports.htmlBdiTagRenderer = (0, renderers_1.createComponentRenderer)("bdi", exports.HtmlBdiMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("bdi", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlBdiTagRenderer = (0, renderers_1.createComponentRenderer)("bdi", exports.HtmlBdiMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("bdi", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlBdoMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -137,9 +159,10 @@ exports.HtmlBdoMd = (0, ComponentDefs_1.createMetadata)({
         dir: (0, ComponentDefs_1.d)("Specifies the text direction override"),
     },
 });
-exports.htmlBdoTagRenderer = (0, renderers_1.createComponentRenderer)("bdo", exports.HtmlBdoMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("bdo", Object.assign({ style: layoutCss, dir: extractValue(node.props.dir) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlBdoTagRenderer = (0, renderers_1.createComponentRenderer)("bdo", exports.HtmlBdoMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("bdo", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlBlockquoteMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -149,18 +172,20 @@ exports.HtmlBlockquoteMd = (0, ComponentDefs_1.createMetadata)({
         cite: (0, ComponentDefs_1.d)("Specifies the source of the quotation"),
     },
 });
-exports.htmlBlockquoteTagRenderer = (0, renderers_1.createComponentRenderer)("blockquote", exports.HtmlBlockquoteMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("blockquote", Object.assign({ style: layoutCss, cite: extractValue(node.props.cite) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlBlockquoteTagRenderer = (0, renderers_1.createComponentRenderer)("blockquote", exports.HtmlBlockquoteMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("blockquote", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlBrMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `br` tag.",
     isHtmlTag: true,
 });
-exports.htmlBrTagRenderer = (0, renderers_1.createComponentRenderer)("br", exports.HtmlBrMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("br", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlBrTagRenderer = (0, renderers_1.createComponentRenderer)("br", exports.HtmlBrMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("br", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlButtonMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -180,9 +205,11 @@ exports.HtmlButtonMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)("Specifies the value associated with the button"),
     },
 });
-exports.htmlButtonTagRenderer = (0, renderers_1.createComponentRenderer)("button", exports.HtmlButtonMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ style: layoutCss, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, false), disabled: extractValue.asOptionalBoolean(node.props.disabled, false), form: extractValue(node.props.form), formAction: extractValue(node.props.formAction), formEncType: extractValue(node.props.formEncType), formMethod: extractValue(node.props.formMethod), formNoValidate: extractValue.asOptionalBoolean(node.props.formNoValidate, false), formTarget: extractValue(node.props.formTarget), name: extractValue(node.props.name), type: extractValue(node.props.type), value: extractValue(node.props.value) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlButtonTagRenderer = (0, renderers_1.createComponentRenderer)("button", exports.HtmlButtonMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { autoFocus, disabled, formNoValidate } = p.asOptionalBoolean("autoFocus", "disabled", "formNoValidate");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ style: layoutCss, autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : false, disabled: disabled !== null && disabled !== void 0 ? disabled : false, formNoValidate: formNoValidate !== null && formNoValidate !== void 0 ? formNoValidate : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlCanvasMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -193,36 +220,41 @@ exports.HtmlCanvasMd = (0, ComponentDefs_1.createMetadata)({
         height: (0, ComponentDefs_1.d)("Specifies the height of the canvas"),
     },
 });
-exports.htmlCanvasTagRenderer = (0, renderers_1.createComponentRenderer)("canvas", exports.HtmlCanvasMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("canvas", Object.assign({ style: layoutCss, width: extractValue.asOptionalNumber(node.props.width), height: extractValue.asOptionalNumber(node.props.height) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlCanvasTagRenderer = (0, renderers_1.createComponentRenderer)("canvas", exports.HtmlCanvasMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const sizeProps = p.asOptionalNumber("width", "height");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("canvas", Object.assign({ style: layoutCss }, sizeProps, props, { children: renderChild(node.children) })));
 });
 exports.HtmlCaptionMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `caption` tag.",
     isHtmlTag: true,
 });
-exports.htmlCaptionTagRenderer = (0, renderers_1.createComponentRenderer)("caption", exports.HtmlCaptionMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("caption", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlCaptionTagRenderer = (0, renderers_1.createComponentRenderer)("caption", exports.HtmlCaptionMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("caption", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlCiteMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `cite` tag.",
     isHtmlTag: true,
 });
-exports.htmlCiteTagRenderer = (0, renderers_1.createComponentRenderer)("cite", exports.HtmlCiteMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "cite", children: renderChild(node.children) })));
+exports.htmlCiteTagRenderer = (0, renderers_1.createComponentRenderer)("cite", exports.HtmlCiteMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "cite", children: renderChild(node.children) })));
 });
 exports.HtmlCodeMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `code` tag.",
     isHtmlTag: true,
 });
-exports.htmlCodeTagRenderer = (0, renderers_1.createComponentRenderer)("code", exports.HtmlCodeMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "code", children: renderChild(node.children) })));
+exports.htmlCodeTagRenderer = (0, renderers_1.createComponentRenderer)("code", exports.HtmlCodeMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "code", children: renderChild(node.children) })));
 });
 exports.HtmlColMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -232,9 +264,11 @@ exports.HtmlColMd = (0, ComponentDefs_1.createMetadata)({
         span: (0, ComponentDefs_1.d)("Specifies the number of columns a `col` element should span"),
     },
 });
-exports.htmlColTagRenderer = (0, renderers_1.createComponentRenderer)("col", exports.HtmlColMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("col", Object.assign({ style: layoutCss, span: extractValue.asOptionalNumber(node.props.span) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlColTagRenderer = (0, renderers_1.createComponentRenderer)("col", exports.HtmlColMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { span } = p.asOptionalNumber("span");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("col", Object.assign({ style: layoutCss, span: span }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlColgroupMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -244,9 +278,11 @@ exports.HtmlColgroupMd = (0, ComponentDefs_1.createMetadata)({
         span: (0, ComponentDefs_1.d)("Specifies the number of columns in a `colgroup`"),
     },
 });
-exports.htmlColgroupTagRenderer = (0, renderers_1.createComponentRenderer)("colgroup", exports.HtmlColgroupMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("colgroup", Object.assign({ style: layoutCss, span: extractValue.asOptionalNumber(node.props.span) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlColgroupTagRenderer = (0, renderers_1.createComponentRenderer)("colgroup", exports.HtmlColgroupMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { span } = p.asOptionalNumber("span");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("colgroup", Object.assign({ style: layoutCss, span: span }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDataMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -256,27 +292,30 @@ exports.HtmlDataMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)("Specifies the machine-readable value of the element"),
     },
 });
-exports.htmlDataTagRenderer = (0, renderers_1.createComponentRenderer)("data", exports.HtmlDataMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("data", Object.assign({ style: layoutCss, value: extractValue(node.props.value) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlDataTagRenderer = (0, renderers_1.createComponentRenderer)("data", exports.HtmlDataMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("data", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDatalistMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `datalist` tag.",
     isHtmlTag: true,
 });
-exports.htmlDatalistTagRenderer = (0, renderers_1.createComponentRenderer)("datalist", exports.HtmlDatalistMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("datalist", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlDatalistTagRenderer = (0, renderers_1.createComponentRenderer)("datalist", exports.HtmlDatalistMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("datalist", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDdMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `dd` tag.",
     isHtmlTag: true,
 });
-exports.htmlDdTagRenderer = (0, renderers_1.createComponentRenderer)("dd", exports.HtmlDdMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("dd", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlDdTagRenderer = (0, renderers_1.createComponentRenderer)("dd", exports.HtmlDdMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("dd", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDelMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -287,9 +326,10 @@ exports.HtmlDelMd = (0, ComponentDefs_1.createMetadata)({
         dateTime: (0, ComponentDefs_1.d)("Specifies the date and time of the edit"),
     },
 });
-exports.htmlDelTagRenderer = (0, renderers_1.createComponentRenderer)("del", exports.HtmlDelMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss, cite: extractValue(node.props.cite), dateTime: extractValue(node.props.dateTime) }, renderedProps, { variant: "deleted", children: renderChild(node.children) })));
+exports.htmlDelTagRenderer = (0, renderers_1.createComponentRenderer)("del", exports.HtmlDelMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "deleted", children: renderChild(node.children) })));
 });
 exports.HtmlDetailsMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -299,18 +339,21 @@ exports.HtmlDetailsMd = (0, ComponentDefs_1.createMetadata)({
         open: (0, ComponentDefs_1.d)("Specifies that the details are visible (open)"),
     },
 });
-exports.htmlDetailsTagRenderer = (0, renderers_1.createComponentRenderer)("details", exports.HtmlDetailsMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("details", Object.assign({ style: layoutCss, open: extractValue.asOptionalBoolean(node.props.open, false) }, renderedProps, { children: renderChild(node.children) })));
+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) })));
 });
 exports.HtmlDfnMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `dfn` tag.",
     isHtmlTag: true,
 });
-exports.htmlDfnTagRenderer = (0, renderers_1.createComponentRenderer)("dfn", exports.HtmlDfnMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("dfn", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlDfnTagRenderer = (0, renderers_1.createComponentRenderer)("dfn", exports.HtmlDfnMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("dfn", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDialogMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -320,45 +363,51 @@ exports.HtmlDialogMd = (0, ComponentDefs_1.createMetadata)({
         open: (0, ComponentDefs_1.d)("Specifies that the dialog is open"),
     },
 });
-exports.htmlDialogTagRenderer = (0, renderers_1.createComponentRenderer)("dialog", exports.HtmlDialogMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("dialog", Object.assign({ style: layoutCss, open: extractValue.asOptionalBoolean(node.props.open, false) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlDialogTagRenderer = (0, renderers_1.createComponentRenderer)("dialog", exports.HtmlDialogMd, ({ 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)("dialog", Object.assign({ style: layoutCss, open: open !== null && open !== void 0 ? open : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDivMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `div` tag.",
     isHtmlTag: true,
 });
-exports.htmlDivTagRenderer = (0, renderers_1.createComponentRenderer)("div", exports.HtmlDivMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlDivTagRenderer = (0, renderers_1.createComponentRenderer)("div", exports.HtmlDivMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDlMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `dl` tag.",
     isHtmlTag: true,
 });
-exports.htmlDlTagRenderer = (0, renderers_1.createComponentRenderer)("dl", exports.HtmlDlMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("dl", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlDlTagRenderer = (0, renderers_1.createComponentRenderer)("dl", exports.HtmlDlMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("dl", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlDtMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `dt` tag.",
     isHtmlTag: true,
 });
-exports.htmlDtTagRenderer = (0, renderers_1.createComponentRenderer)("dt", exports.HtmlDtMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("dt", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlDtTagRenderer = (0, renderers_1.createComponentRenderer)("dt", exports.HtmlDtMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("dt", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlEMMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `em` tag.",
     isHtmlTag: true,
 });
-exports.htmlEMTagRenderer = (0, renderers_1.createComponentRenderer)("em", exports.HtmlEMMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "em", children: renderChild(node.children) })));
+exports.htmlEMTagRenderer = (0, renderers_1.createComponentRenderer)("em", exports.HtmlEMMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "em", children: renderChild(node.children) })));
 });
 exports.HtmlEmbedMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -372,8 +421,10 @@ exports.HtmlEmbedMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.htmlEmbedTagRenderer = (0, renderers_1.createComponentRenderer)("embed", exports.HtmlEmbedMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("embed", Object.assign({ style: layoutCss, src: extractResourceUrl(node.props.src), type: extractValue(node.props.type), width: extractValue(node.props.width), height: extractValue(node.props.height) }, renderedProps, { children: renderChild(node.children) })));
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { src } = p.asUrlResource("src");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("embed", Object.assign({ style: layoutCss, src: src }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlFieldsetMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -385,36 +436,41 @@ exports.HtmlFieldsetMd = (0, ComponentDefs_1.createMetadata)({
         name: (0, ComponentDefs_1.d)("Specifies a name for the fieldset"),
     },
 });
-exports.htmlFieldsetTagRenderer = (0, renderers_1.createComponentRenderer)("fieldset", exports.HtmlFieldsetMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("fieldset", Object.assign({ style: layoutCss, disabled: extractValue.asOptionalBoolean(node.props.disabled, false), form: extractValue(node.props.form), name: extractValue(node.props.name) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlFieldsetTagRenderer = (0, renderers_1.createComponentRenderer)("fieldset", exports.HtmlFieldsetMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { disabled } = p.asOptionalBoolean("disabled");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("fieldset", Object.assign({ style: layoutCss, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlFigcaptionMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `figcaption` tag.",
     isHtmlTag: true,
 });
-exports.htmlFigcaptionTagRenderer = (0, renderers_1.createComponentRenderer)("figcaption", exports.HtmlFigcaptionMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("figcaption", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlFigcaptionTagRenderer = (0, renderers_1.createComponentRenderer)("figcaption", exports.HtmlFigcaptionMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("figcaption", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlFigureMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `figure` tag.",
     isHtmlTag: true,
 });
-exports.htmlFigureTagRenderer = (0, renderers_1.createComponentRenderer)("figure", exports.HtmlFigureMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("figure", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlFigureTagRenderer = (0, renderers_1.createComponentRenderer)("figure", exports.HtmlFigureMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("figure", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlFooterMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `footer` tag.",
     isHtmlTag: true,
 });
-exports.htmlFooterTagRenderer = (0, renderers_1.createComponentRenderer)("footer", exports.HtmlFooterMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("footer", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlFooterTagRenderer = (0, renderers_1.createComponentRenderer)("footer", exports.HtmlFooterMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("footer", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlFormMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -431,90 +487,101 @@ exports.HtmlFormMd = (0, ComponentDefs_1.createMetadata)({
         target: (0, ComponentDefs_1.d)("Specifies where to display the response after submitting the form"),
     },
 });
-exports.htmlFormTagRenderer = (0, renderers_1.createComponentRenderer)("form", exports.HtmlFormMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("form", Object.assign({ style: layoutCss, acceptCharset: extractValue(node.props.acceptCharset), action: extractValue(node.props.action), autoComplete: extractValue(node.props.autoComplete), encType: extractValue(node.props.encType), method: extractValue(node.props.method), name: extractValue(node.props.name), noValidate: extractValue.asOptionalBoolean(node.props.noValidate, false), target: extractValue(node.props.target) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlFormTagRenderer = (0, renderers_1.createComponentRenderer)("form", exports.HtmlFormMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { noValidate } = p.asOptionalBoolean("noValidate");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("form", Object.assign({ style: layoutCss, noValidate: noValidate !== null && noValidate !== void 0 ? noValidate : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlH1Md = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `h1` tag.",
     isHtmlTag: true,
 });
-exports.htmlH1TagRenderer = (0, renderers_1.createComponentRenderer)("h1", exports.HtmlH1Md, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, renderedProps, { level: "h1", children: renderChild(node.children) })));
+exports.htmlH1TagRenderer = (0, renderers_1.createComponentRenderer)("h1", exports.HtmlH1Md, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, props, { level: "h1", children: renderChild(node.children) })));
 });
 exports.HtmlH2Md = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `h2` tag.",
     isHtmlTag: true,
 });
-exports.htmlH2TagRenderer = (0, renderers_1.createComponentRenderer)("h2", exports.HtmlH2Md, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, renderedProps, { level: "h2", children: renderChild(node.children) })));
+exports.htmlH2TagRenderer = (0, renderers_1.createComponentRenderer)("h2", exports.HtmlH2Md, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, props, { level: "h2", children: renderChild(node.children) })));
 });
 exports.HtmlH3Md = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `h3` tag.",
     isHtmlTag: true,
 });
-exports.htmlH3TagRenderer = (0, renderers_1.createComponentRenderer)("h3", exports.HtmlH3Md, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, renderedProps, { level: "h3", children: renderChild(node.children) })));
+exports.htmlH3TagRenderer = (0, renderers_1.createComponentRenderer)("h3", exports.HtmlH3Md, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, props, { level: "h3", children: renderChild(node.children) })));
 });
 exports.HtmlH4Md = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `h4` tag.",
     isHtmlTag: true,
 });
-exports.htmlH4TagRenderer = (0, renderers_1.createComponentRenderer)("h4", exports.HtmlH4Md, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, renderedProps, { level: "h4", children: renderChild(node.children) })));
+exports.htmlH4TagRenderer = (0, renderers_1.createComponentRenderer)("h4", exports.HtmlH4Md, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, props, { level: "h4", children: renderChild(node.children) })));
 });
 exports.HtmlH5Md = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `h5` tag.",
     isHtmlTag: true,
 });
-exports.htmlH5TagRenderer = (0, renderers_1.createComponentRenderer)("h5", exports.HtmlH5Md, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, renderedProps, { level: "h5", children: renderChild(node.children) })));
+exports.htmlH5TagRenderer = (0, renderers_1.createComponentRenderer)("h5", exports.HtmlH5Md, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, props, { level: "h5", children: renderChild(node.children) })));
 });
 exports.HtmlH6Md = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `h6` tag.",
     isHtmlTag: true,
 });
-exports.htmlH6TagRenderer = (0, renderers_1.createComponentRenderer)("h6", exports.HtmlH6Md, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, renderedProps, { level: "h6", children: renderChild(node.children) })));
+exports.htmlH6TagRenderer = (0, renderers_1.createComponentRenderer)("h6", exports.HtmlH6Md, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(HeadingNative_1.Heading, Object.assign({ style: layoutCss }, props, { level: "h6", children: renderChild(node.children) })));
 });
 exports.HtmlHeaderMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `header` tag.",
     isHtmlTag: true,
 });
-exports.htmlHeaderTagRenderer = (0, renderers_1.createComponentRenderer)("header", exports.HtmlHeaderMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("header", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlHeaderTagRenderer = (0, renderers_1.createComponentRenderer)("header", exports.HtmlHeaderMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("header", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlHrMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `hr` tag.",
     isHtmlTag: true,
 });
-exports.htmlHrTagRenderer = (0, renderers_1.createComponentRenderer)("hr", exports.HtmlHrMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("hr", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlHrTagRenderer = (0, renderers_1.createComponentRenderer)("hr", exports.HtmlHrMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("hr", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlIMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `i` tag.",
     isHtmlTag: true,
 });
-exports.htmlITagRenderer = (0, renderers_1.createComponentRenderer)("i", exports.HtmlIMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("i", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlITagRenderer = (0, renderers_1.createComponentRenderer)("i", exports.HtmlIMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("i", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlIframeMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -534,8 +601,11 @@ exports.HtmlIframeMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.htmlIframeTagRenderer = (0, renderers_1.createComponentRenderer)("iframe", exports.HtmlIframeMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("iframe", Object.assign({ style: layoutCss, src: extractResourceUrl(node.props.src), srcDoc: extractValue(node.props.srcDoc), name: extractValue(node.props.name), sandbox: extractValue(node.props.sandbox), allow: extractValue(node.props.allow), allowFullScreen: extractValue.asOptionalBoolean(node.props.allowFullScreen, false), width: extractValue(node.props.width), height: extractValue(node.props.height), loading: extractValue(node.props.loading), referrerPolicy: extractValue(node.props.referrerPolicy) }, renderedProps, { children: renderChild(node.children) })));
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { src } = p.asUrlResource("src");
+    const { allowFullScreen } = p.asOptionalBoolean("allowFullScreen");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("iframe", Object.assign({ style: layoutCss, src: src, allowFullScreen: allowFullScreen !== null && allowFullScreen !== void 0 ? allowFullScreen : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlImgMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -553,8 +623,10 @@ exports.HtmlImgMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.htmlImgTagRenderer = (0, renderers_1.createComponentRenderer)("img", exports.HtmlImgMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ style: layoutCss, alt: extractValue(node.props.alt), height: extractValue(node.props.height), width: node.props.width, src: extractResourceUrl(node.props.src), useMap: extractValue(node.props.useMap), loading: extractValue(node.props.loading), referrerPolicy: extractValue(node.props.referrerPolicy), sizes: extractValue(node.props.sizes) }, renderedProps, { children: renderChild(node.children) })));
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { src } = p.asUrlResource("src");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ style: layoutCss, src: src }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlInputMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -582,9 +654,12 @@ exports.HtmlInputMd = (0, ComponentDefs_1.createMetadata)({
         step: (0, ComponentDefs_1.d)("Specifies the legal number intervals for an input"),
     },
 });
-exports.htmlInputTagRenderer = (0, renderers_1.createComponentRenderer)("input", exports.HtmlInputMd, ({ node, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("input", Object.assign({ style: layoutCss, type: extractValue(node.props.type), value: extractValue(node.props.value), placeholder: extractValue(node.props.placeholder), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, false), checked: extractValue.asOptionalBoolean(node.props.checked, false), disabled: extractValue.asOptionalBoolean(node.props.disabled, false), form: extractValue(node.props.form), name: extractValue(node.props.name), list: extractValue(node.props.list), max: extractValue(node.props.max), maxLength: extractValue.asOptionalNumber(node.props.maxLength), min: extractValue(node.props.min), minLength: extractValue.asOptionalNumber(node.props.minLength), multiple: extractValue.asOptionalBoolean(node.props.multiple, false), pattern: extractValue(node.props.pattern), readOnly: extractValue.asOptionalBoolean(node.props.readOnly, false), required: extractValue.asOptionalBoolean(node.props.required, false), size: extractValue.asOptionalNumber(node.props.size), step: extractValue(node.props.step) }, renderedProps)));
+exports.htmlInputTagRenderer = (0, renderers_1.createComponentRenderer)("input", exports.HtmlInputMd, ({ node, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { autoFocus, checked, disabled, readOnly, required, multiple } = p.asOptionalBoolean("autoFocus", "checked", "disabled", "readOnly", "required", "multiple");
+    const numberProps = p.asOptionalNumber("maxLength", "minLength", "size");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({ style: layoutCss, autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : false, checked: checked !== null && checked !== void 0 ? checked : false, disabled: disabled !== null && disabled !== void 0 ? disabled : false, multiple: multiple !== null && multiple !== void 0 ? multiple : false, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : false, required: required !== null && required !== void 0 ? required : false }, numberProps, props)));
 });
 exports.HtmlInsMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -595,18 +670,20 @@ exports.HtmlInsMd = (0, ComponentDefs_1.createMetadata)({
         dateTime: (0, ComponentDefs_1.d)("Specifies the date and time when the text was inserted"),
     },
 });
-exports.htmlInsTagRenderer = (0, renderers_1.createComponentRenderer)("ins", exports.HtmlInsMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss, cite: extractValue(node.props.cite), dateTime: extractValue(node.props.dateTime) }, renderedProps, { variant: "inserted", children: renderChild(node.children) })));
+exports.htmlInsTagRenderer = (0, renderers_1.createComponentRenderer)("ins", exports.HtmlInsMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "inserted", children: renderChild(node.children) })));
 });
 exports.HtmlKbdMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `kbd` tag.",
     isHtmlTag: true,
 });
-exports.htmlKbdTagRenderer = (0, renderers_1.createComponentRenderer)("kbd", exports.HtmlKbdMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "keyboard", children: renderChild(node.children) })));
+exports.htmlKbdTagRenderer = (0, renderers_1.createComponentRenderer)("kbd", exports.HtmlKbdMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "keyboard", children: renderChild(node.children) })));
 });
 exports.HtmlLabelMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -616,18 +693,20 @@ exports.HtmlLabelMd = (0, ComponentDefs_1.createMetadata)({
         htmlFor: (0, ComponentDefs_1.d)("Specifies which form element a label is bound to"),
     },
 });
-exports.htmlLabelTagRenderer = (0, renderers_1.createComponentRenderer)("label", exports.HtmlLabelMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("label", Object.assign({ style: layoutCss, htmlFor: extractValue(node.props.htmlFor) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlLabelTagRenderer = (0, renderers_1.createComponentRenderer)("label", exports.HtmlLabelMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("label", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlLegendMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `legend` tag.",
     isHtmlTag: true,
 });
-exports.htmlLegendTagRenderer = (0, renderers_1.createComponentRenderer)("legend", exports.HtmlLegendMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("legend", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlLegendTagRenderer = (0, renderers_1.createComponentRenderer)("legend", exports.HtmlLegendMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("legend", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlLiMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -637,18 +716,21 @@ exports.HtmlLiMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)("Specifies the value of the list item (if the parent is an ordered list)"),
     },
 });
-exports.htmlLiTagRenderer = (0, renderers_1.createComponentRenderer)("li", exports.HtmlLiMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ style: layoutCss, value: extractValue.asOptionalNumber(node.props.value) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlLiTagRenderer = (0, renderers_1.createComponentRenderer)("li", exports.HtmlLiMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { value } = p.asOptionalNumber("value");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("li", Object.assign({ style: layoutCss, value: value }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlMainMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `main` tag.",
     isHtmlTag: true,
 });
-exports.htmlMainTagRenderer = (0, renderers_1.createComponentRenderer)("main", exports.HtmlMainMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("main", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlMainTagRenderer = (0, renderers_1.createComponentRenderer)("main", exports.HtmlMainMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("main", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlMapMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -658,18 +740,20 @@ exports.HtmlMapMd = (0, ComponentDefs_1.createMetadata)({
         name: (0, ComponentDefs_1.d)("Specifies the name of the map"),
     },
 });
-exports.htmlMapTagRenderer = (0, renderers_1.createComponentRenderer)("map", exports.HtmlMapMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("map", Object.assign({ style: layoutCss, name: extractValue(node.props.name) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlMapTagRenderer = (0, renderers_1.createComponentRenderer)("map", exports.HtmlMapMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("map", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlMarkMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `mark` tag.",
     isHtmlTag: true,
 });
-exports.htmlMarkTagRenderer = (0, renderers_1.createComponentRenderer)("mark", exports.HtmlMarkMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "marked", children: renderChild(node.children) })));
+exports.htmlMarkTagRenderer = (0, renderers_1.createComponentRenderer)("mark", exports.HtmlMarkMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "marked", children: renderChild(node.children) })));
 });
 exports.HtmlMenuMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -679,9 +763,10 @@ exports.HtmlMenuMd = (0, ComponentDefs_1.createMetadata)({
         type: (0, ComponentDefs_1.d)("Specifies the type of the menu"),
     },
 });
-exports.htmlMenuTagRenderer = (0, renderers_1.createComponentRenderer)("menu", exports.HtmlMenuMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("menu", Object.assign({ style: layoutCss, type: extractValue(node.props.type) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlMenuTagRenderer = (0, renderers_1.createComponentRenderer)("menu", exports.HtmlMenuMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("menu", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlMeterMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -696,18 +781,21 @@ exports.HtmlMeterMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)("Specifies the current value"),
     },
 });
-exports.htmlMeterTagRenderer = (0, renderers_1.createComponentRenderer)("meter", exports.HtmlMeterMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("meter", Object.assign({ style: layoutCss, min: extractValue.asOptionalNumber(node.props.min), max: extractValue.asOptionalNumber(node.props.max), low: extractValue.asOptionalNumber(node.props.low), high: extractValue.asOptionalNumber(node.props.high), optimum: extractValue.asOptionalNumber(node.props.optimum), value: extractValue.asOptionalNumber(node.props.value) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlMeterTagRenderer = (0, renderers_1.createComponentRenderer)("meter", exports.HtmlMeterMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const numberProps = p.asOptionalNumber("value", "min", "max", "low", "high", "optimum");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("meter", Object.assign({ style: layoutCss }, numberProps, props, { children: renderChild(node.children) })));
 });
 exports.HtmlNavMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `nav` tag.",
     isHtmlTag: true,
 });
-exports.htmlNavTagRenderer = (0, renderers_1.createComponentRenderer)("nav", exports.HtmlNavMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("nav", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlNavTagRenderer = (0, renderers_1.createComponentRenderer)("nav", exports.HtmlNavMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("nav", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlObjectMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -722,9 +810,10 @@ exports.HtmlObjectMd = (0, ComponentDefs_1.createMetadata)({
         height: (0, ComponentDefs_1.d)("Specifies the height of the object"),
     },
 });
-exports.htmlObjectTagRenderer = (0, renderers_1.createComponentRenderer)("object", exports.HtmlObjectMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("object", Object.assign({ style: layoutCss, data: extractValue(node.props.data), type: extractValue(node.props.type), name: extractValue(node.props.name), form: extractValue(node.props.form), width: extractValue(node.props.width), height: extractValue(node.props.height) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlObjectTagRenderer = (0, renderers_1.createComponentRenderer)("object", exports.HtmlObjectMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("object", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlOlMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -736,9 +825,12 @@ exports.HtmlOlMd = (0, ComponentDefs_1.createMetadata)({
         type: (0, ComponentDefs_1.d)("Specifies the kind of marker to use in the list (e.g., '1', 'A', 'a', 'I', 'i')"),
     },
 });
-exports.htmlOlTagRenderer = (0, renderers_1.createComponentRenderer)("ol", exports.HtmlOlMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("ol", Object.assign({ style: layoutCss, reversed: extractValue.asOptionalBoolean(node.props.reversed, false), start: extractValue.asOptionalNumber(node.props.start, 1), type: extractValue(node.props.type) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlOlTagRenderer = (0, renderers_1.createComponentRenderer)("ol", exports.HtmlOlMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { reversed } = p.asOptionalBoolean("reversed");
+    const { start } = p.asOptionalNumber("start");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("ol", Object.assign({ style: layoutCss, reversed: reversed !== null && reversed !== void 0 ? reversed : false, start: start !== null && start !== void 0 ? start : 1 }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlOptgroupMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -749,9 +841,11 @@ exports.HtmlOptgroupMd = (0, ComponentDefs_1.createMetadata)({
         disabled: (0, ComponentDefs_1.d)("Specifies that the option group is disabled"),
     },
 });
-exports.htmlOptgroupTagRenderer = (0, renderers_1.createComponentRenderer)("optgroup", exports.HtmlOptgroupMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("optgroup", Object.assign({ style: layoutCss, label: extractValue(node.props.label), disabled: extractValue.asOptionalBoolean(node.props.disabled, false) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlOptgroupTagRenderer = (0, renderers_1.createComponentRenderer)("optgroup", exports.HtmlOptgroupMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { disabled } = p.asOptionalBoolean("disabled");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("optgroup", Object.assign({ style: layoutCss, disabled: disabled !== null && disabled !== void 0 ? disabled : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlOptionMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -764,9 +858,11 @@ exports.HtmlOptionMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)("Specifies the value of the option"),
     },
 });
-exports.htmlOptionTagRenderer = (0, renderers_1.createComponentRenderer)("option", exports.HtmlOptionMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("option", Object.assign({ style: layoutCss, disabled: extractValue.asOptionalBoolean(node.props.disabled, false), label: extractValue(node.props.label), selected: extractValue.asOptionalBoolean(node.props.selected, false), value: extractValue(node.props.value) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlOptionTagRenderer = (0, renderers_1.createComponentRenderer)("option", exports.HtmlOptionMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { disabled, selected } = p.asOptionalBoolean("disabled", "selected");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("option", Object.assign({ style: layoutCss, disabled: disabled !== null && disabled !== void 0 ? disabled : false, selected: selected !== null && selected !== void 0 ? selected : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlOutputMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -778,18 +874,20 @@ exports.HtmlOutputMd = (0, ComponentDefs_1.createMetadata)({
         name: (0, ComponentDefs_1.d)("Specifies the name of the output"),
     },
 });
-exports.htmlOutputTagRenderer = (0, renderers_1.createComponentRenderer)("output", exports.HtmlOutputMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("output", Object.assign({ style: layoutCss, form: extractValue(node.props.form), htmlFor: extractValue(node.props.htmlFor), name: extractValue(node.props.name) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlOutputTagRenderer = (0, renderers_1.createComponentRenderer)("output", exports.HtmlOutputMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("output", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlPMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `p` tag.",
     isHtmlTag: true,
 });
-exports.htmlPTagRenderer = (0, renderers_1.createComponentRenderer)("p", exports.HtmlPMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "paragraph", children: renderChild(node.children) })));
+exports.htmlPTagRenderer = (0, renderers_1.createComponentRenderer)("p", exports.HtmlPMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "paragraph", children: renderChild(node.children) })));
 });
 exports.HtmlParamMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -800,27 +898,30 @@ exports.HtmlParamMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)("Specifies the value of the parameter"),
     },
 });
-exports.htmlParamTagRenderer = (0, renderers_1.createComponentRenderer)("param", exports.HtmlParamMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("param", Object.assign({ style: layoutCss, name: extractValue(node.props.name), value: extractValue(node.props.value) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlParamTagRenderer = (0, renderers_1.createComponentRenderer)("param", exports.HtmlParamMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("param", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlPictureMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `picture` tag.",
     isHtmlTag: true,
 });
-exports.htmlPictureTagRenderer = (0, renderers_1.createComponentRenderer)("picture", exports.HtmlPictureMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("picture", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlPictureTagRenderer = (0, renderers_1.createComponentRenderer)("picture", exports.HtmlPictureMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("picture", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlPreMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `pre` tag.",
     isHtmlTag: true,
 });
-exports.htmlPreTagRenderer = (0, renderers_1.createComponentRenderer)("pre", exports.HtmlPreMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "codefence", children: renderChild(node.children) })));
+exports.htmlPreTagRenderer = (0, renderers_1.createComponentRenderer)("pre", exports.HtmlPreMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "codefence", children: renderChild(node.children) })));
 });
 exports.HtmlProgressMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -831,9 +932,11 @@ exports.HtmlProgressMd = (0, ComponentDefs_1.createMetadata)({
         value: (0, ComponentDefs_1.d)("Specifies the current value of the progress element"),
     },
 });
-exports.htmlProgressTagRenderer = (0, renderers_1.createComponentRenderer)("progress", exports.HtmlProgressMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("progress", Object.assign({ style: layoutCss, max: extractValue.asOptionalNumber(node.props.max), value: extractValue.asOptionalNumber(node.props.value) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlProgressTagRenderer = (0, renderers_1.createComponentRenderer)("progress", exports.HtmlProgressMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const numberProps = p.asOptionalNumber("max", "value");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("progress", Object.assign({ style: layoutCss }, numberProps, props, { children: renderChild(node.children) })));
 });
 exports.HtmlQMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -843,63 +946,70 @@ exports.HtmlQMd = (0, ComponentDefs_1.createMetadata)({
         cite: (0, ComponentDefs_1.d)("Specifies the source URL of the quotation"),
     },
 });
-exports.htmlQTagRenderer = (0, renderers_1.createComponentRenderer)("q", exports.HtmlQMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("q", Object.assign({ style: layoutCss, cite: extractValue(node.props.cite) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlQTagRenderer = (0, renderers_1.createComponentRenderer)("q", exports.HtmlQMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("q", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlRpMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `rp` tag.",
     isHtmlTag: true,
 });
-exports.htmlRpTagRenderer = (0, renderers_1.createComponentRenderer)("rp", exports.HtmlRpMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("rp", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlRpTagRenderer = (0, renderers_1.createComponentRenderer)("rp", exports.HtmlRpMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("rp", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlRtMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `rt` tag.",
     isHtmlTag: true,
 });
-exports.htmlRtTagRenderer = (0, renderers_1.createComponentRenderer)("rt", exports.HtmlRtMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("rt", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlRtTagRenderer = (0, renderers_1.createComponentRenderer)("rt", exports.HtmlRtMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("rt", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlRubyMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `ruby` tag.",
     isHtmlTag: true,
 });
-exports.htmlRubyTagRenderer = (0, renderers_1.createComponentRenderer)("ruby", exports.HtmlRubyMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("ruby", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlRubyTagRenderer = (0, renderers_1.createComponentRenderer)("ruby", exports.HtmlRubyMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("ruby", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlSMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `s` tag.",
     isHtmlTag: true,
 });
-exports.htmlSTagRenderer = (0, renderers_1.createComponentRenderer)("s", exports.HtmlSMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("s", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlSTagRenderer = (0, renderers_1.createComponentRenderer)("s", exports.HtmlSMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("s", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlSampMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `samp` tag.",
     isHtmlTag: true,
 });
-exports.htmlSampTagRenderer = (0, renderers_1.createComponentRenderer)("samp", exports.HtmlSampMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "sample", children: renderChild(node.children) })));
+exports.htmlSampTagRenderer = (0, renderers_1.createComponentRenderer)("samp", exports.HtmlSampMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "sample", children: renderChild(node.children) })));
 });
 exports.HtmlSectionMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `section` tag.",
     isHtmlTag: true,
 });
-exports.htmlSectionTagRenderer = (0, renderers_1.createComponentRenderer)("section", exports.HtmlSectionMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("section", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlSectionTagRenderer = (0, renderers_1.createComponentRenderer)("section", exports.HtmlSectionMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("section", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlSelectMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -915,18 +1025,22 @@ exports.HtmlSelectMd = (0, ComponentDefs_1.createMetadata)({
         size: (0, ComponentDefs_1.d)("Specifies the number of visible options in the select"),
     },
 });
-exports.htmlSelectTagRenderer = (0, renderers_1.createComponentRenderer)("select", exports.HtmlSelectMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("select", Object.assign({ style: layoutCss, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, false), disabled: extractValue.asOptionalBoolean(node.props.disabled, false), form: extractValue(node.props.form), multiple: extractValue.asOptionalBoolean(node.props.multiple, false), name: extractValue(node.props.name), required: extractValue.asOptionalBoolean(node.props.required, false), size: extractValue.asOptionalNumber(node.props.size) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlSelectTagRenderer = (0, renderers_1.createComponentRenderer)("select", exports.HtmlSelectMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { autoFocus, disabled, multiple, required } = p.asOptionalBoolean("autoFocus", "disabled", "multiple", "required");
+    const { size } = p.asOptionalNumber("size");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("select", Object.assign({ style: layoutCss, autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : false, disabled: disabled !== null && disabled !== void 0 ? disabled : false, multiple: multiple !== null && multiple !== void 0 ? multiple : false, required: required !== null && required !== void 0 ? required : false, size: size }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlSmallMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `small` tag.",
     isHtmlTag: true,
 });
-exports.htmlSmallTagRenderer = (0, renderers_1.createComponentRenderer)("small", exports.HtmlSmallMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "small", children: renderChild(node.children) })));
+exports.htmlSmallTagRenderer = (0, renderers_1.createComponentRenderer)("small", exports.HtmlSmallMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "small", children: renderChild(node.children) })));
 });
 exports.HtmlSourceMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -941,53 +1055,60 @@ exports.HtmlSourceMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.htmlSourceTagRenderer = (0, renderers_1.createComponentRenderer)("source", exports.HtmlSourceMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("source", Object.assign({ style: layoutCss, src: extractResourceUrl(node.props.src), type: extractValue(node.props.type), media: extractValue(node.props.media), srcSet: extractValue(node.props.srcSet), sizes: extractValue(node.props.sizes) }, renderedProps, { children: renderChild(node.children) })));
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { src } = p.asUrlResource("src");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("source", Object.assign({ style: layoutCss, src: src }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlSpanMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `span` tag.",
     isHtmlTag: true,
 });
-exports.htmlSpanTagRenderer = (0, renderers_1.createComponentRenderer)("span", exports.HtmlSpanMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlSpanTagRenderer = (0, renderers_1.createComponentRenderer)("span", exports.HtmlSpanMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlStrongMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `strong` tag.",
     isHtmlTag: true,
 });
-exports.htmlStrongTagRenderer = (0, renderers_1.createComponentRenderer)("strong", exports.HtmlStrongMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "strong", children: renderChild(node.children) })));
+exports.htmlStrongTagRenderer = (0, renderers_1.createComponentRenderer)("strong", exports.HtmlStrongMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "strong", children: renderChild(node.children) })));
 });
 exports.HtmlSubMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `sub` tag.",
     isHtmlTag: true,
 });
-exports.htmlSubTagRenderer = (0, renderers_1.createComponentRenderer)("sub", exports.HtmlSubMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "sub", children: renderChild(node.children) })));
+exports.htmlSubTagRenderer = (0, renderers_1.createComponentRenderer)("sub", exports.HtmlSubMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "sub", children: renderChild(node.children) })));
 });
 exports.HtmlSummaryMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `summary` tag.",
     isHtmlTag: true,
 });
-exports.htmlSummaryTagRenderer = (0, renderers_1.createComponentRenderer)("summary", exports.HtmlSummaryMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("summary", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlSummaryTagRenderer = (0, renderers_1.createComponentRenderer)("summary", exports.HtmlSummaryMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("summary", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlSupMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `sup` tag.",
     isHtmlTag: true,
 });
-exports.htmlSupTagRenderer = (0, renderers_1.createComponentRenderer)("sup", exports.HtmlSupMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "sup", children: renderChild(node.children) })));
+exports.htmlSupTagRenderer = (0, renderers_1.createComponentRenderer)("sup", exports.HtmlSupMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "sup", children: renderChild(node.children) })));
 });
 exports.HtmlTableMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1007,11 +1128,12 @@ exports.HtmlTableMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "color-bg-HtmlTable": "$color-bg",
         "border-HtmlTable": "1px solid $color-border",
-    }
+    },
 });
-exports.htmlTableTagRenderer = (0, renderers_1.createComponentRenderer)("table", exports.HtmlTableMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)("table", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTable, border: extractValue(node.props.border), cellPadding: extractValue(node.props.cellPadding), cellSpacing: extractValue(node.props.cellSpacing), summary: extractValue(node.props.summary), width: extractValue(node.props.width), align: extractValue(node.props.align) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTableTagRenderer = (0, renderers_1.createComponentRenderer)("table", exports.HtmlTableMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("table", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTable }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTbodyMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1019,9 +1141,10 @@ exports.HtmlTbodyMd = (0, ComponentDefs_1.createMetadata)({
     isHtmlTag: true,
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsTbody),
 });
-exports.htmlTbodyTagRenderer = (0, renderers_1.createComponentRenderer)("tbody", exports.HtmlTbodyMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)("tbody", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTbody }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTbodyTagRenderer = (0, renderers_1.createComponentRenderer)("tbody", exports.HtmlTbodyMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("tbody", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTbody }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTdMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1042,20 +1165,22 @@ exports.HtmlTdMd = (0, ComponentDefs_1.createMetadata)({
     defaultThemeVars: {
         "padding-HtmlTd": "$space-2",
         "border-bottom-HtmlTd": "1px solid $color-border",
-    }
+    },
 });
-exports.htmlTdTagRenderer = (0, renderers_1.createComponentRenderer)("td", exports.HtmlTdMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)("td", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTd, align: extractValue(node.props.align), colSpan: extractValue(node.props.colSpan), headers: extractValue(node.props.headers), rowSpan: extractValue(node.props.rowSpan), valign: extractValue(node.props.valign), scope: extractValue(node.props.scope), abbr: extractValue(node.props.abbr), height: extractValue(node.props.height), width: extractValue(node.props.width) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTdTagRenderer = (0, renderers_1.createComponentRenderer)("td", exports.HtmlTdMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("td", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTd }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTemplateMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `template` tag.",
     isHtmlTag: true,
 });
-exports.htmlTemplateTagRenderer = (0, renderers_1.createComponentRenderer)("template", exports.HtmlTemplateMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("template", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTemplateTagRenderer = (0, renderers_1.createComponentRenderer)("template", exports.HtmlTemplateMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("template", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTextareaMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1078,11 +1203,12 @@ exports.HtmlTextareaMd = (0, ComponentDefs_1.createMetadata)({
         wrap: (0, ComponentDefs_1.d)("Specifies how the text in a textarea is to be wrapped when submitted"),
     },
 });
-exports.htmlTextareaTagRenderer = (0, renderers_1.createComponentRenderer)("textarea", exports.HtmlTextareaMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ style: layoutCss, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus, false), cols: extractValue.asOptionalNumber(node.props.cols), 
-        /* dirName={extractValue(node.props.dirName)} // this will take effect when we handle i18n */
-        disabled: extractValue.asOptionalBoolean(node.props.disabled, false), form: extractValue(node.props.form), maxLength: extractValue.asOptionalNumber(node.props.maxLength), minLength: extractValue.asOptionalNumber(node.props.minLength), name: extractValue(node.props.name), placeholder: extractValue(node.props.placeholder), readOnly: extractValue.asOptionalBoolean(node.props.readOnly, false), required: extractValue.asOptionalBoolean(node.props.required, false), rows: extractValue.asOptionalNumber(node.props.rows), value: extractValue(node.props.value), wrap: extractValue(node.props.wrap) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTextareaTagRenderer = (0, renderers_1.createComponentRenderer)("textarea", exports.HtmlTextareaMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { autoFocus, disabled, readOnly, required } = p.asOptionalBoolean("autoFocus", "disabled", "readOnly", "required");
+    const numberProps = p.asOptionalNumber("cols", "rows", "maxLength", "minLength");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("textarea", Object.assign({ style: layoutCss, autoFocus: autoFocus !== null && autoFocus !== void 0 ? autoFocus : false, disabled: disabled !== null && disabled !== void 0 ? disabled : false, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : false, required: required !== null && required !== void 0 ? required : false }, numberProps, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTfootMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1090,9 +1216,10 @@ exports.HtmlTfootMd = (0, ComponentDefs_1.createMetadata)({
     isHtmlTag: true,
     themeVars: (0, themeVars_1.parseScssVar)(HtmlTags_module_scss_1.default.themeVarsTfoot),
 });
-exports.htmlTfootTagRenderer = (0, renderers_1.createComponentRenderer)("tfoot", exports.HtmlTfootMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)("tfoot", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTfoot }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTfootTagRenderer = (0, renderers_1.createComponentRenderer)("tfoot", exports.HtmlTfootMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("tfoot", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTfoot }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlThMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1117,11 +1244,12 @@ exports.HtmlThMd = (0, ComponentDefs_1.createMetadata)({
         dark: {
             "color-bg-HtmlTh--hover": "$color-surface-800",
         },
-    }
+    },
 });
-exports.htmlThTagRenderer = (0, renderers_1.createComponentRenderer)("th", exports.HtmlThMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)("th", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTh, abbr: extractValue(node.props.abbr), align: extractValue(node.props.align), colSpan: extractValue(node.props.colSpan), headers: extractValue(node.props.headers), rowSpan: extractValue(node.props.rowSpan), scope: extractValue(node.props.scope) }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlThTagRenderer = (0, renderers_1.createComponentRenderer)("th", exports.HtmlThMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("th", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTh }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTheadMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1136,12 +1264,13 @@ exports.HtmlTheadMd = (0, ComponentDefs_1.createMetadata)({
         },
         dark: {
             "color-bg-HtmlThead": "$color-surface-950",
-        }
-    }
+        },
+    },
 });
-exports.htmlTheadTagRenderer = (0, renderers_1.createComponentRenderer)("thead", exports.HtmlTheadMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)("thead", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlThead }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTheadTagRenderer = (0, renderers_1.createComponentRenderer)("thead", exports.HtmlTheadMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("thead", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlThead }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTimeMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1151,9 +1280,10 @@ exports.HtmlTimeMd = (0, ComponentDefs_1.createMetadata)({
         dateTime: (0, ComponentDefs_1.d)("Specifies the date and time in a machine-readable format"),
     },
 });
-exports.htmlTimeTagRenderer = (0, renderers_1.createComponentRenderer)("time", exports.HtmlTimeMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("time", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTimeTagRenderer = (0, renderers_1.createComponentRenderer)("time", exports.HtmlTimeMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("time", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTrMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1168,12 +1298,13 @@ exports.HtmlTrMd = (0, ComponentDefs_1.createMetadata)({
         },
         dark: {
             "color-bg-HtmlTr--hover": "$color-primary-900",
-        }
-    }
+        },
+    },
 });
-exports.htmlTrTagRenderer = (0, renderers_1.createComponentRenderer)("tr", exports.HtmlTrMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)("tr", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTr }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlTrTagRenderer = (0, renderers_1.createComponentRenderer)("tr", exports.HtmlTrMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("tr", Object.assign({ style: layoutCss, className: HtmlTags_module_scss_1.default.htmlTr }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlTrackMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1188,35 +1319,41 @@ exports.HtmlTrackMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.htmlTrackTagRenderer = (0, renderers_1.createComponentRenderer)("track", exports.HtmlTrackMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("track", Object.assign({ style: layoutCss, default: extractValue.asOptionalBoolean(node.props.default, false), kind: extractValue(node.props.kind), label: extractValue(node.props.label), src: extractResourceUrl(node.props.src), srcLang: extractValue(node.props.srcLang) }, renderedProps, { children: renderChild(node.children) })));
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { src } = p.asUrlResource("src");
+    const { default: defaultProp } = p.asOptionalBoolean("default");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("track", Object.assign({ style: layoutCss, default: defaultProp !== null && defaultProp !== void 0 ? defaultProp : false, src: src }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlUMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `u` tag.",
     isHtmlTag: true,
 });
-exports.htmlUTagRenderer = (0, renderers_1.createComponentRenderer)("u", exports.HtmlUMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("u", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlUTagRenderer = (0, renderers_1.createComponentRenderer)("u", exports.HtmlUMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("u", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlUlMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `ul` tag.",
     isHtmlTag: true,
 });
-exports.htmlUlTagRenderer = (0, renderers_1.createComponentRenderer)("ul", exports.HtmlUlMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlUlTagRenderer = (0, renderers_1.createComponentRenderer)("ul", exports.HtmlUlMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("ul", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlVarMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `var` tag.",
     isHtmlTag: true,
 });
-exports.htmlVarTagRenderer = (0, renderers_1.createComponentRenderer)("var", exports.HtmlCodeMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = (0, extractParam_1.resolveAndCleanProps)(node.props, extractValue, layoutCss);
-    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, renderedProps, { variant: "var", children: renderChild(node.children) })));
+exports.htmlVarTagRenderer = (0, renderers_1.createComponentRenderer)("var", exports.HtmlCodeMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)(TextNative_1.Text, Object.assign({ style: layoutCss }, props, { variant: "var", children: renderChild(node.children) })));
 });
 exports.HtmlVideoMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
@@ -1235,27 +1372,19 @@ exports.HtmlVideoMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.htmlVideoTagRenderer = (0, renderers_1.createComponentRenderer)("video", exports.HtmlVideoMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("video", Object.assign({ style: layoutCss, autoPlay: extractValue.asOptionalBoolean(node.props.autoPlay, false), controls: extractValue.asOptionalBoolean(node.props.controls, false), height: extractValue(node.props.height), loop: extractValue.asOptionalBoolean(node.props.loop, false), muted: extractValue.asOptionalBoolean(node.props.muted, false), poster: extractValue(node.props.poster), preload: extractValue(node.props.preload), src: extractResourceUrl(node.props.src), width: extractValue(node.props.width) }, renderedProps, { children: renderChild(node.children) })));
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const { src } = p.asUrlResource("src");
+    const { autoPlay, controls, loop, muted } = p.asOptionalBoolean("autoPlay", "controls", "loop", "muted");
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("video", Object.assign({ style: layoutCss, src: src, autoPlay: autoPlay !== null && autoPlay !== void 0 ? autoPlay : false, controls: controls !== null && controls !== void 0 ? controls : false, loop: loop !== null && loop !== void 0 ? loop : false, muted: muted !== null && muted !== void 0 ? muted : false }, props, { children: renderChild(node.children) })));
 });
 exports.HtmlWbrMd = (0, ComponentDefs_1.createMetadata)({
     status: "experimental",
     description: "This component renders an HTML `wbr` tag.",
     isHtmlTag: true,
 });
-exports.htmlWbrTagRenderer = (0, renderers_1.createComponentRenderer)("wbr", exports.HtmlWbrMd, ({ node, renderChild, extractValue, layoutCss }) => {
-    const renderedProps = resolveProps(node, extractValue);
-    return ((0, jsx_runtime_1.jsx)("wbr", Object.assign({ style: layoutCss }, renderedProps, { children: renderChild(node.children) })));
+exports.htmlWbrTagRenderer = (0, renderers_1.createComponentRenderer)("wbr", exports.HtmlWbrMd, ({ node, renderChild, extractValue, extractResourceUrl, layoutCss }) => {
+    const p = new extractParam_1.PropsTrasform(extractValue, extractResourceUrl, layoutCss, node.props);
+    const props = p.asRest();
+    return ((0, jsx_runtime_1.jsx)("wbr", Object.assign({ style: layoutCss }, props, { children: renderChild(node.children) })));
 });
-// --- Utils
-function resolveProps(node, extractValue, extractResourceUrl, resourceProps) {
-    return Object.keys(node.props).reduce((acc, propName) => {
-        if (resourceProps && resourceProps.includes(propName) && extractResourceUrl) {
-            acc[propName] = extractResourceUrl(node.props[propName]);
-        }
-        else {
-            acc[propName] = extractValue(node.props[propName]);
-        }
-        return acc;
-    }, {});
-}