@wulperstudio/editor-render 0.0.8-beta → 0.0.10-beta

package/dist/esm/index.js

@@ -1363,7 +1363,7 @@ function requireReactJsxRuntime_development () {
 var RootContainer = styled('div', {
     name: 'RootContainer',
     label: 'root__container',
-    shouldForwardProp: function (prop) { return prop !== 'as' && prop !== 'stretched'; },
+    shouldForwardProp: function (prop) { return prop !== 'as' && prop !== 'stretched' && prop !== 'sx'; },
 })(function (_a) {
     var stretched = _a.stretched;
     return (__assign({ width: '100%', maxWidth: 700, height: 'auto', margin: '0 auto' }, (stretched && {
@@ -1371,7 +1371,10 @@ var RootContainer = styled('div', {
     })));
 });
 
-var Container = function (props) { return (jsxRuntime.exports.jsx(RootContainer, __assign({}, props))); };
+var Container = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return (jsxRuntime.exports.jsx(RootContainer, __assign({ sx: sx }, props)));
+};
 
 var RootParagraph = styled('p', {
     name: 'RootParagraph',
@@ -1381,7 +1384,10 @@ var RootParagraph = styled('p', {
     margin: 0,
 });
 
-var Paragraph = function (props) { return jsxRuntime.exports.jsx(RootParagraph, __assign({}, props)); };
+var Paragraph = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootParagraph, __assign({ sx: sx }, props));
+};
 
 var RootHeader = styled('h2', {
     name: 'RootHeader',
@@ -1400,8 +1406,8 @@ var HeaderLevel = {
     6: 'h6',
 };
 var Header = function (_a) {
-    var level = _a.level, props = __rest(_a, ["level"]);
-    return (jsxRuntime.exports.jsx(RootHeader, __assign({ as: HeaderLevel[level] }, props)));
+    var level = _a.level, sx = _a.sx, props = __rest(_a, ["level", "sx"]);
+    return (jsxRuntime.exports.jsx(RootHeader, __assign({ as: HeaderLevel[level], sx: sx }, props)));
 };
 
 var RootList = styled('div', {
@@ -1411,8 +1417,8 @@ var RootList = styled('div', {
 })({});
 
 var List = function (_a) {
-    var props = __rest(_a, []);
-    return jsxRuntime.exports.jsx(RootList, __assign({}, props));
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootList, __assign({ sx: sx }, props));
 };
 
 var RootListItem$1 = styled('div', {
@@ -1421,7 +1427,10 @@ var RootListItem$1 = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'as' && prop !== 'sx'; },
 })({});
 
-var ListItem = function (props) { return jsxRuntime.exports.jsx(RootListItem$1, __assign({}, props)); };
+var ListItem = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootListItem$1, __assign({ sx: sx }, props));
+};
 
 var RootInlineCode = styled('code', {
     name: 'RootInlineCode',
@@ -1429,7 +1438,10 @@ var RootInlineCode = styled('code', {
     shouldForwardProp: function (prop) { return prop !== 'as'; },
 })({});
 
-var InlineCode = function (props) { return jsxRuntime.exports.jsx(RootInlineCode, __assign({}, props)); };
+var InlineCode = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootInlineCode, __assign({ sx: sx }, props));
+};
 
 var RootBold = styled('b', {
     name: 'RootBold',
@@ -1437,7 +1449,10 @@ var RootBold = styled('b', {
     shouldForwardProp: function (prop) { return prop !== 'as' && prop !== 'sx'; },
 })({});
 
-var Bold = function (props) { return jsxRuntime.exports.jsx(RootBold, __assign({}, props)); };
+var Bold = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootBold, __assign({ sx: sx }, props));
+};
 
 var RootItalic = styled('i', {
     name: 'RootBold',
@@ -1445,7 +1460,10 @@ var RootItalic = styled('i', {
     shouldForwardProp: function (prop) { return prop !== 'as'; },
 })({});
 
-var Italic = function (props) { return jsxRuntime.exports.jsx(RootItalic, __assign({}, props)); };
+var Italic = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootItalic, __assign({ sx: sx }, props));
+};
 
 var RootMarker = styled('mark', {
     name: 'RootMarker',
@@ -1453,7 +1471,10 @@ var RootMarker = styled('mark', {
     shouldForwardProp: function (prop) { return prop !== 'as'; },
 })({});
 
-var Marker = function (props) { return jsxRuntime.exports.jsx(RootMarker, __assign({}, props)); };
+var Marker = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootMarker, __assign({ sx: sx }, props));
+};
 
 var RootAnchor = styled('a', {
     name: 'RootAnchor',
@@ -1461,7 +1482,10 @@ var RootAnchor = styled('a', {
     shouldForwardProp: function (prop) { return prop !== 'as' && prop !== 'sx'; },
 })({});
 
-var Anchor = function (props) { return jsxRuntime.exports.jsx(RootAnchor, __assign({}, props)); };
+var Anchor = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootAnchor, __assign({ sx: sx }, props));
+};
 
 var RootDelimiter = styled('div', {
     name: 'RootDelimiter',
@@ -1475,7 +1499,10 @@ var RootDelimiter = styled('div', {
     fontWeight: 700,
 });
 
-var Delimiter = function (props) { return (jsxRuntime.exports.jsx(RootDelimiter, __assign({}, props, { children: jsxRuntime.exports.jsx("span", { children: "\u2743 \u2743 \u2743" }) }))); };
+var Delimiter = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return (jsxRuntime.exports.jsx(RootDelimiter, __assign({ sx: sx }, props, { children: jsxRuntime.exports.jsx("span", { children: "\u2743 \u2743 \u2743" }) })));
+};
 
 var Root = styled('div', {
     name: 'Root',
@@ -1519,8 +1546,8 @@ var Caption = styled('span', {
 });
 
 var Image = function (_a) {
-    var caption = _a.caption, withBorder = _a.withBorder, withBackground = _a.withBackground, stretched = _a.stretched, props = __rest(_a, ["caption", "withBorder", "withBackground", "stretched"]);
-    return (jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(Root, __assign({ withBorder: withBorder, stretched: stretched, withBackground: withBackground }, { children: jsxRuntime.exports.jsx(RootImage, __assign({}, props, { withBackground: withBackground })) })), caption && jsxRuntime.exports.jsx(Caption, { children: caption })] }));
+    var caption = _a.caption, withBorder = _a.withBorder, withBackground = _a.withBackground, stretched = _a.stretched, sx = _a.sx, props = __rest(_a, ["caption", "withBorder", "withBackground", "stretched", "sx"]);
+    return (jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, { children: [jsxRuntime.exports.jsx(Root, __assign({ withBorder: withBorder, stretched: stretched, withBackground: withBackground }, { children: jsxRuntime.exports.jsx(RootImage, __assign({ sx: sx }, props, { withBackground: withBackground })) })), caption && jsxRuntime.exports.jsx(Caption, { children: caption })] }));
 };
 
 var RootTable = styled('div', {
@@ -1541,7 +1568,10 @@ var RootTable = styled('div', {
     });
 });
 
-var Table = function (props) { return jsxRuntime.exports.jsx(RootTable, __assign({}, props)); };
+var Table = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootTable, __assign({ sx: sx }, props));
+};
 
 var RootTableRow = styled('div', {
     name: 'RootTableRow',
@@ -1558,7 +1588,10 @@ var RootTableRow = styled('div', {
     });
 });
 
-var TableRow = function (props) { return jsxRuntime.exports.jsx(RootTableRow, __assign({}, props)); };
+var TableRow = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootTableRow, __assign({ sx: sx }, props));
+};
 
 var RootTableCell = styled('div', {
     name: 'RootTableRow',
@@ -1584,7 +1617,10 @@ var RootTableCell = styled('div', {
     });
 });
 
-var TableCell = function (props) { return jsxRuntime.exports.jsx(RootTableCell, __assign({}, props)); };
+var TableCell = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootTableCell, __assign({ sx: sx }, props));
+};
 
 var RootEmbed = styled('iframe', {
     name: 'RootEmbed',
@@ -1596,7 +1632,10 @@ var RootEmbed = styled('iframe', {
     borderRadius: 8,
 });
 
-var Embed = function (props) { return jsxRuntime.exports.jsx(RootEmbed, __assign({}, props)); };
+var Embed = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootEmbed, __assign({ sx: sx }, props));
+};
 
 var RootRaw = styled('div', {
     name: 'RootRaw',
@@ -1617,7 +1656,10 @@ var RootRaw = styled('div', {
     resize: 'vertical',
 });
 
-var Raw = function (props) { return jsxRuntime.exports.jsx(RootRaw, __assign({}, props)); };
+var Raw = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootRaw, __assign({ sx: sx }, props));
+};
 
 var RootQuote = styled('blockquote', {
     name: 'RootQuote',
@@ -1625,7 +1667,10 @@ var RootQuote = styled('blockquote', {
     shouldForwardProp: function (prop) { return prop !== 'as'; },
 })({});
 
-var Quote = function (props) { return jsxRuntime.exports.jsx(RootQuote, __assign({}, props)); };
+var Quote = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootQuote, __assign({ sx: sx }, props));
+};
 
 var RootCode = styled('div', {
     name: 'RootCode',
@@ -1649,7 +1694,10 @@ var RootCode = styled('div', {
     whiteSpace: 'pre-wrap',
 });
 
-var Code = function (props) { return jsxRuntime.exports.jsx(RootCode, __assign({}, props)); };
+var Code = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootCode, __assign({ sx: sx }, props));
+};
 
 var RootLink = styled('a', {
     name: 'RootLink',
@@ -1718,8 +1766,8 @@ var SiteName = styled('span')(function (_a) {
 });
 
 var Link = function (_a) {
-    var id = _a.id, image = _a.image, title = _a.title, description = _a.description, siteName = _a.siteName, props = __rest(_a, ["id", "image", "title", "description", "siteName"]);
-    return (jsxRuntime.exports.jsxs(RootLink, __assign({ id: id, target: "_blank", rel: "nofollow noindex noreferrer" }, props, { children: [jsxRuntime.exports.jsx(ImageFloat, { image: image }), jsxRuntime.exports.jsx(Title, { children: title }), jsxRuntime.exports.jsx(Description, { children: description }), jsxRuntime.exports.jsx(SiteName, { children: siteName })] }), id));
+    var id = _a.id, image = _a.image, title = _a.title, description = _a.description, siteName = _a.siteName, sx = _a.sx, props = __rest(_a, ["id", "image", "title", "description", "siteName", "sx"]);
+    return (jsxRuntime.exports.jsxs(RootLink, __assign({ id: id, target: "_blank", rel: "nofollow noindex noreferrer", sx: sx }, props, { children: [jsxRuntime.exports.jsx(ImageFloat, { image: image }), jsxRuntime.exports.jsx(Title, { children: title }), jsxRuntime.exports.jsx(Description, { children: description }), jsxRuntime.exports.jsx(SiteName, { children: siteName })] }), id));
 };
 
 var RootCheckList = styled('div', {
@@ -1734,7 +1782,10 @@ var RootCheckList = styled('div', {
     height: 'auto',
 });
 
-var CheckList = function (props) { return jsxRuntime.exports.jsx(RootCheckList, __assign({}, props)); };
+var CheckList = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootCheckList, __assign({ sx: sx }, props));
+};
 
 var RootListItem = styled('div', {
     name: 'RootListItem',
@@ -1742,11 +1793,14 @@ var RootListItem = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'as' && prop !== 'sx'; },
 })({});
 
-var CheckListItem = function (props) { return jsxRuntime.exports.jsx(RootListItem, __assign({}, props)); };
+var CheckListItem = function (_a) {
+    var sx = _a.sx, props = __rest(_a, ["sx"]);
+    return jsxRuntime.exports.jsx(RootListItem, __assign({ sx: sx }, props));
+};
 
 var CheckBox = function (_a) {
-    var checked = _a.checked, props = __rest(_a, ["checked"]);
-    return (jsxRuntime.exports.jsx(Checkbox, __assign({ size: "small", checked: checked, icon: (jsxRuntime.exports.jsx(Icon, { icon: "akar-icons:circle-fill", color: "inherit", width: "24px", height: "24px" })), checkedIcon: (jsxRuntime.exports.jsx(Icon, { icon: "akar-icons:circle-check-fill", color: "inherit", width: "24px", height: "24px" })) }, props)));
+    var checked = _a.checked, sx = _a.sx, props = __rest(_a, ["checked", "sx"]);
+    return (jsxRuntime.exports.jsx(Checkbox, __assign({ sx: sx, size: "small", checked: checked, icon: (jsxRuntime.exports.jsx(Icon, { icon: "akar-icons:circle-fill", color: "inherit", width: "24px", height: "24px" })), checkedIcon: (jsxRuntime.exports.jsx(Icon, { icon: "akar-icons:circle-check-fill", color: "inherit", width: "24px", height: "24px" })) }, props)));
 };
 
 var PurifyHtml = function (html) {
@@ -1810,13 +1864,15 @@ var RecursiveNode = function (_a) {
 var ParagraphNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container, Paragraph$1 = _a.Paragraph;
     var text = data.text;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Paragraph, __assign({ id: ForkIdWithType(id, type) }, Paragraph$1, { children: jsxRuntime.exports.jsx(RecursiveNode, { html: text, id: id }) })) }), id));
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Paragraph, __assign({ id: ForkIdWithType(id, type) }, Paragraph$1, { children: jsxRuntime.exports.jsx(RecursiveNode, { html: text, id: id }) })) }), id));
 };
 
 var HeaderNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container, Header$1 = _a.Header;
     var text = data.text;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Header, __assign({ id: ForkIdWithType(id, type), level: data.level }, Header$1, { children: jsxRuntime.exports.jsx(RecursiveNode, { html: text, id: id }) })) }), id));
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Header, __assign({ id: ForkIdWithType(id, type), level: data.level }, Header$1, { children: jsxRuntime.exports.jsx(RecursiveNode, { html: text, id: id }) })) }), id));
 };
 
 // SizeTypes = 'one-column' | 'two-columns' | 'three-columns';
@@ -1824,7 +1880,8 @@ var DEFAULT_GAP$1 = 20;
 var ListNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, tunes = _a.tunes, Container$1 = _a.Container, List$1 = _a.List, Item = _a.Item;
     var style = data.style;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(List, __assign({ id: ForkIdWithType(id, type) }, List$1, { sx: __assign({ display: 'flex', flexWrap: 'wrap', gap: "".concat(DEFAULT_GAP$1, "px") }, List$1 === null || List$1 === void 0 ? void 0 : List$1.sx) }, { children: data.items.map(function (item, idx) {
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(List, __assign({ id: ForkIdWithType(id, type) }, List$1, { sx: __assign({ display: 'flex', flexWrap: 'wrap', gap: "".concat(DEFAULT_GAP$1, "px") }, List$1 === null || List$1 === void 0 ? void 0 : List$1.sx) }, { children: data.items.map(function (item, idx) {
                 var _a, _b;
                 return (jsxRuntime.exports.jsxs(ListItem, __assign({}, Item, { sx: __assign(__assign(__assign(__assign(__assign({ padding: '20px', borderRadius: '25px', backgroundColor: function (_) { return _.palette.background.default; }, border: '1px solid #EFF3FE', display: 'flex', flexWrap: 'nowrap', alignItems: 'center', columnGap: '5px', flexGrow: 0 }, (style === 'ordered' && {
                         alignItems: 'center',
@@ -1841,14 +1898,16 @@ var ListNode = function (_a) {
 
 var ImageNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container, Image$1 = _a.Image;
-    var url = data.url, caption = data.caption, withBorder = data.withBorder, stretched = data.stretched, withBackground = data.withBackground;
-    return (jsxRuntime.exports.jsx(Container, __assign({ stretched: stretched }, Container$1, { children: jsxRuntime.exports.jsx(Image, __assign({ id: ForkIdWithType(id, type), src: url, alt: caption, caption: caption, withBorder: withBorder, stretched: stretched, withBackground: withBackground }, Image$1), ForkIdWithType(id, type)) }), id));
+    var file = data.file, caption = data.caption, withBorder = data.withBorder, stretched = data.stretched, withBackground = data.withBackground;
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ stretched: stretched, sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Image, __assign({ id: ForkIdWithType(id, type), src: file === null || file === void 0 ? void 0 : file.url, alt: caption, caption: caption, withBorder: withBorder, stretched: stretched, withBackground: withBackground }, Image$1), ForkIdWithType(id, type)) }), id));
 };
 
 var TableNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container;
     var content = data.content;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Table, __assign({ id: ForkIdWithType(id, type) }, { children: content.map(function (row, rowIdx) { return (
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Table, __assign({ id: ForkIdWithType(id, type) }, { children: content.map(function (row, rowIdx) { return (
             // eslint-disable-next-line react/no-array-index-key
             jsxRuntime.exports.jsx(TableRow, { children: row.map(function (cell, cellIdx) { return (
                 // eslint-disable-next-line react/no-array-index-key
@@ -1857,43 +1916,50 @@ var TableNode = function (_a) {
 
 var DelimiterNode = function (_a) {
     var type = _a.type, id = _a.id, Delimiter$1 = _a.Delimiter, Container$1 = _a.Container;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Delimiter, __assign({ id: ForkIdWithType(id, type) }, Delimiter$1)) }), id));
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Delimiter, __assign({ id: ForkIdWithType(id, type) }, Delimiter$1)) }), id));
 };
 
 var EmbedNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container, Embed$1 = _a.Embed;
     // eslint-disable-next-line no-unused-vars
     data.service; data.source; var embed = data.embed, width = data.width, height = data.height; data.caption;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Embed, __assign({ id: ForkIdWithType(id, type), src: embed, width: width, height: height }, Embed$1)) }), id));
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Embed, __assign({ id: ForkIdWithType(id, type), src: embed, width: width, height: height }, Embed$1)) }), id));
 };
 
 var RawNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container, Raw$1 = _a.Raw;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Raw, __assign({ id: ForkIdWithType(id, type) }, Raw$1, { children: data.html })) }), id));
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Raw, __assign({ id: ForkIdWithType(id, type) }, Raw$1, { children: data.html })) }), id));
 };
 
 var QuoteNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container, Quote$1 = _a.Quote;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Quote, __assign({ id: ForkIdWithType(id, type) }, Quote$1, { children: data.text })) }), id));
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Quote, __assign({ id: ForkIdWithType(id, type) }, Quote$1, { children: data.text })) }), id));
 };
 
 var CodeNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container, Code$1 = _a.Code;
     var code = data.code;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Code, __assign({ id: ForkIdWithType(id, type) }, Code$1, { children: code })) }), id));
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Code, __assign({ id: ForkIdWithType(id, type) }, Code$1, { children: code })) }), id));
 };
 
 var LinkNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, Container$1 = _a.Container, Link$1 = _a.Link;
     var _b = data.meta, image = _b.image, title = _b.title, description = _b.description, site_name = _b.site_name, link = data.link;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(Link, __assign({ id: ForkIdWithType(id, type), image: image.url, title: title, description: description, siteName: site_name, href: link }, Link$1)) }), id));
+    var _c = Container$1 || {}, sx = _c.sx, containerProps = __rest(_c, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(Link, __assign({ id: ForkIdWithType(id, type), image: image.url, title: title, description: description, siteName: site_name, href: link }, Link$1)) }), id));
 };
 
 var DEFAULT_GAP = 10;
 var CheckListNode = function (_a) {
     var type = _a.type, data = _a.data, id = _a.id, tunes = _a.tunes, Container$1 = _a.Container, CheckList$1 = _a.CheckList, Item = _a.Item;
     var items = data.items;
-    return (jsxRuntime.exports.jsx(Container, __assign({}, Container$1, { children: jsxRuntime.exports.jsx(CheckList, __assign({ id: ForkIdWithType(id, type) }, CheckList$1, { sx: __assign({ display: 'flex', flexWrap: 'wrap', gap: "".concat(DEFAULT_GAP, "px"), borderRadius: '25px', padding: '20px', backgroundColor: function (_) { return _.palette.background.default; }, border: '1px solid #EFF3FE' }, CheckList$1 === null || CheckList$1 === void 0 ? void 0 : CheckList$1.sx) }, { children: items.map(function (_a, idx) {
+    var _b = Container$1 || {}, sx = _b.sx, containerProps = __rest(_b, ["sx"]);
+    return (jsxRuntime.exports.jsx(Container, __assign({ sx: sx }, containerProps, { children: jsxRuntime.exports.jsx(CheckList, __assign({ id: ForkIdWithType(id, type) }, CheckList$1, { sx: __assign({ display: 'flex', flexWrap: 'wrap', gap: "".concat(DEFAULT_GAP, "px"), borderRadius: '25px', padding: '20px', backgroundColor: function (_) { return _.palette.background.default; }, border: '1px solid #EFF3FE' }, CheckList$1 === null || CheckList$1 === void 0 ? void 0 : CheckList$1.sx) }, { children: items.map(function (_a, idx) {
                 var _b, _c;
                 var checked = _a.checked, text = _a.text;
                 return (jsxRuntime.exports.jsxs(CheckListItem, __assign({}, Item, { sx: __assign(__assign(__assign({ display: 'flex', alignItems: 'center', flexWrap: 'nowrap', flexGrow: 0, columnGap: '5px', flexBasis: getFlexBasis(1, DEFAULT_GAP) }, (((_b = tunes === null || tunes === void 0 ? void 0 : tunes.columnTune) === null || _b === void 0 ? void 0 : _b.size) === 'two-columns' && {