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

package/dist/esm/dist/components/Code/index.d.ts

@@ -3,5 +3,5 @@ import { RootCode } from './styled';
 export declare type CodeRootProps = React.ComponentPropsWithRef<typeof RootCode>;
 interface CodeProps extends CodeRootProps {
 }
-export declare const Code: (props: CodeProps) => JSX.Element;
+export declare const Code: ({ sx, ...props }: CodeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Container/index.d.ts

@@ -4,5 +4,5 @@ export declare type RootContainerProps = React.ComponentPropsWithRef<typeof Root
 interface ContainerProps extends RootContainerProps {
     stretched?: boolean;
 }
-export declare const Container: (props: ContainerProps) => JSX.Element;
+export declare const Container: ({ sx, ...props }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Delimiter/index.d.ts

@@ -3,5 +3,5 @@ import { RootDelimiter } from './styled';
 export declare type DelimiterRootProps = React.ComponentPropsWithRef<typeof RootDelimiter>;
 interface DelimiterProps extends Omit<DelimiterRootProps, 'children'> {
 }
-export declare const Delimiter: (props: DelimiterProps) => JSX.Element;
+export declare const Delimiter: ({ sx, ...props }: DelimiterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Embed/index.d.ts

@@ -3,5 +3,5 @@ import { RootEmbed } from './styled';
 export declare type EmbedRootProps = React.ComponentPropsWithRef<typeof RootEmbed>;
 interface EmbedProps extends EmbedRootProps {
 }
-export declare const Embed: (props: EmbedProps) => JSX.Element;
+export declare const Embed: ({ sx, ...props }: EmbedProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Header/index.d.ts

@@ -4,5 +4,5 @@ export declare type HeaderRootProps = React.ComponentPropsWithRef<typeof RootHea
 interface HeaderModel extends HeaderRootProps {
     level: 1 | 2 | 3 | 4 | 5 | 6;
 }
-export declare const Header: ({ level, ...props }: HeaderModel) => JSX.Element;
+export declare const Header: ({ level, sx, ...props }: HeaderModel) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Image/index.d.ts

@@ -7,5 +7,5 @@ interface ImageProps extends ImageRootProps {
     stretched?: boolean;
     withBackground?: boolean;
 }
-export declare const Image: ({ caption, withBorder, withBackground, stretched, ...props }: ImageProps) => JSX.Element;
+export declare const Image: ({ caption, withBorder, withBackground, stretched, sx, ...props }: ImageProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/InlineCode/index.d.ts

@@ -3,5 +3,5 @@ import { RootInlineCode } from './styled';
 declare type InlineCodeRootProps = React.ComponentPropsWithRef<typeof RootInlineCode>;
 interface CodeProps extends InlineCodeRootProps {
 }
-export declare const InlineCode: (props: CodeProps) => JSX.Element;
+export declare const InlineCode: ({ sx, ...props }: CodeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Italic/index.d.ts

@@ -3,5 +3,5 @@ import { RootItalic } from './styled';
 declare type ItalicRootProps = React.ComponentPropsWithRef<typeof RootItalic>;
 interface ItalicProps extends ItalicRootProps {
 }
-export declare const Italic: (props: ItalicProps) => JSX.Element;
+export declare const Italic: ({ sx, ...props }: ItalicProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Link/index.d.ts

@@ -7,5 +7,5 @@ interface LinkProps extends LinkRootProps {
     description?: string;
     siteName?: string;
 }
-export declare const Link: ({ id, image, title, description, siteName, ...props }: LinkProps) => JSX.Element;
+export declare const Link: ({ id, image, title, description, siteName, sx, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/List/index.d.ts

@@ -3,5 +3,5 @@ import { RootList } from './styled';
 export declare type ListRootProps = React.ComponentPropsWithRef<typeof RootList>;
 interface ListProps extends ListRootProps {
 }
-export declare const List: ({ ...props }: ListProps) => JSX.Element;
+export declare const List: ({ sx, ...props }: ListProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/ListItem/index.d.ts

@@ -3,5 +3,5 @@ import { RootListItem } from './styled';
 export declare type RootItemProps = React.ComponentPropsWithRef<typeof RootListItem>;
 interface ItemModel extends RootItemProps {
 }
-export declare const ListItem: (props: ItemModel) => JSX.Element;
+export declare const ListItem: ({ sx, ...props }: ItemModel) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Marker/index.d.ts

@@ -3,5 +3,5 @@ import { RootMarker } from './styled';
 declare type MarkerRootProps = React.ComponentPropsWithRef<typeof RootMarker>;
 interface MarkerProps extends MarkerRootProps {
 }
-export declare const Marker: (props: MarkerProps) => JSX.Element;
+export declare const Marker: ({ sx, ...props }: MarkerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Paragraph/index.d.ts

@@ -3,5 +3,5 @@ import { RootParagraph } from './styled';
 export declare type ParagraphRootProps = React.ComponentPropsWithRef<typeof RootParagraph>;
 interface ParagraphProps extends ParagraphRootProps {
 }
-export declare const Paragraph: (props: ParagraphProps) => JSX.Element;
+export declare const Paragraph: ({ sx, ...props }: ParagraphProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Quote/index.d.ts

@@ -3,5 +3,5 @@ import { RootQuote } from './styled';
 export declare type QuoteRootProps = React.ComponentPropsWithRef<typeof RootQuote>;
 interface QuoteProps extends QuoteRootProps {
 }
-export declare const Quote: (props: QuoteProps) => JSX.Element;
+export declare const Quote: ({ sx, ...props }: QuoteProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Raw/index.d.ts

@@ -3,5 +3,5 @@ import { RootRaw } from './styled';
 export declare type RawRootProps = React.ComponentPropsWithRef<typeof RootRaw>;
 interface RawProps extends RawRootProps {
 }
-export declare const Raw: (props: RawProps) => JSX.Element;
+export declare const Raw: ({ sx, ...props }: RawProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/Table/index.d.ts

@@ -3,5 +3,5 @@ import { RootTable } from './styled';
 export declare type TableRootProps = React.ComponentPropsWithRef<typeof RootTable>;
 interface TableProps extends TableRootProps {
 }
-export declare const Table: (props: TableProps) => JSX.Element;
+export declare const Table: ({ sx, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/TableCell/index.d.ts

@@ -3,5 +3,5 @@ import { RootTableCell } from './styled';
 export declare type TableCellRootProps = React.ComponentPropsWithRef<typeof RootTableCell>;
 interface TableCellProps extends TableCellRootProps {
 }
-export declare const TableCell: (props: TableCellProps) => JSX.Element;
+export declare const TableCell: ({ sx, ...props }: TableCellProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/components/TableRow/index.d.ts

@@ -3,5 +3,5 @@ import { RootTableRow } from './styled';
 export declare type TableRowRootProps = React.ComponentPropsWithRef<typeof RootTableRow>;
 interface TableRowProps extends TableRowRootProps {
 }
-export declare const TableRow: (props: TableRowProps) => JSX.Element;
+export declare const TableRow: ({ sx, ...props }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/helpers/RecursiveNode/index.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare type Props = {
     html: string;
     id: string;
 };
-export declare const RecursiveNode: ({ html, id }: Props) => JSX.Element;
+export declare const RecursiveNode: ({ html, id }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/dist/helpers/checklist/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataCheckList } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { CheckListRootProps } from '../../components/CheckList';
@@ -12,4 +11,4 @@ export interface CheckListNodeProps {
     CheckList?: CheckListRootProps;
     Item?: RootCheckListItemProps;
 }
-export declare const CheckListNode: ({ type, data, id, tunes, Container, CheckList, Item, }: CheckListNodeProps) => JSX.Element;
+export declare const CheckListNode: ({ type, data, id, tunes, Container, CheckList, Item, }: CheckListNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/code/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataCodeLang } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { CodeRootProps } from '../../components/Code';
@@ -9,4 +8,4 @@ export interface CodeNodeProps {
     Container?: RootContainerProps;
     Code?: CodeRootProps;
 }
-export declare const CodeNode: ({ type, data, id, Container, Code, }: CodeNodeProps) => JSX.Element;
+export declare const CodeNode: ({ type, data, id, Container, Code, }: CodeNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/delimiter/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataDelimiter } from '../../interfaces';
 import { DelimiterRootProps } from '../../components/Delimiter';
 import { RootContainerProps } from '../../components/Container';
@@ -9,4 +8,4 @@ export interface DelimiterNodeProps {
     Delimiter?: DelimiterRootProps;
     Container?: RootContainerProps;
 }
-export declare const DelimiterNode: ({ type, id, Delimiter, Container }: DelimiterNodeProps) => JSX.Element;
+export declare const DelimiterNode: ({ type, id, Delimiter, Container }: DelimiterNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/embed/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataEmbed } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { EmbedRootProps } from '../../components/Embed';
@@ -9,4 +8,4 @@ export interface EmbedNodeProps {
     Container?: RootContainerProps;
     Embed?: EmbedRootProps;
 }
-export declare const EmbedNode: ({ type, data, id, Container, Embed }: EmbedNodeProps) => JSX.Element;
+export declare const EmbedNode: ({ type, data, id, Container, Embed }: EmbedNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/header/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataHeader } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { HeaderRootProps } from '../../components/Header';
@@ -9,4 +8,4 @@ export interface HeaderNodeProps {
     Container?: RootContainerProps;
     Header?: HeaderRootProps;
 }
-export declare const HeaderNode: ({ type, data, id, Container, Header, }: HeaderNodeProps) => JSX.Element;
+export declare const HeaderNode: ({ type, data, id, Container, Header, }: HeaderNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/image/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RootContainerProps } from '../../components/Container';
 import { ImageRootProps } from '../../components/Image';
 import { DataImage } from '../../interfaces';
@@ -9,4 +8,4 @@ export interface ImageNodeProps {
     Container?: RootContainerProps;
     Image?: ImageRootProps;
 }
-export declare const ImageNode: ({ type, data, id, Container, Image }: ImageNodeProps) => JSX.Element;
+export declare const ImageNode: ({ type, data, id, Container, Image }: ImageNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/link/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataLinkTool } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { LinkRootProps } from '../../components/Link';
@@ -9,4 +8,4 @@ export interface LinkNodeProps {
     Container?: RootContainerProps;
     Link?: LinkRootProps;
 }
-export declare const LinkNode: ({ type, data, id, Container, Link }: LinkNodeProps) => JSX.Element;
+export declare const LinkNode: ({ type, data, id, Container, Link }: LinkNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/list/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataList } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { ListRootProps } from '../../components/List';
@@ -12,4 +11,4 @@ export interface ListNodeModel {
     List?: ListRootProps;
     Item?: RootItemProps;
 }
-export declare const ListNode: ({ type, data, id, tunes, Container, List, Item }: ListNodeModel) => JSX.Element;
+export declare const ListNode: ({ type, data, id, tunes, Container, List, Item }: ListNodeModel) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/paragraph/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataParagraph } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { ParagraphRootProps } from '../../components/Paragraph';
@@ -9,4 +8,4 @@ export interface ParagraphNodeProps {
     Container?: RootContainerProps;
     Paragraph?: ParagraphRootProps;
 }
-export declare const ParagraphNode: ({ type, data, id, Container, Paragraph, }: ParagraphNodeProps) => JSX.Element;
+export declare const ParagraphNode: ({ type, data, id, Container, Paragraph, }: ParagraphNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/quote/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataQuote } from '../../interfaces';
 import { QuoteRootProps } from '../../components/Quote';
 import { RootContainerProps } from '../../components/Container';
@@ -9,4 +8,4 @@ export interface QuoteNodeProps {
     Container?: RootContainerProps;
     Quote?: QuoteRootProps;
 }
-export declare const QuoteNode: ({ type, data, id, Container, Quote, }: QuoteNodeProps) => JSX.Element;
+export declare const QuoteNode: ({ type, data, id, Container, Quote, }: QuoteNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/raw/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataRawTool } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { RawRootProps } from '../../components/Raw';
@@ -9,4 +8,4 @@ export interface RawNodeProps {
     Container?: RootContainerProps;
     Raw?: RawRootProps;
 }
-export declare const RawNode: ({ type, data, id, Container, Raw }: RawNodeProps) => JSX.Element;
+export declare const RawNode: ({ type, data, id, Container, Raw }: RawNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/helpers/table/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DataTable } from '../../interfaces';
 import { RootContainerProps } from '../../components/Container';
 import { TableRowRootProps } from '../../components/TableRow';
@@ -13,4 +12,4 @@ export interface TableNodeProps {
     Row?: TableRowRootProps;
     Cell?: TableCellRootProps;
 }
-export declare const TableNode: ({ type, data, id, Container }: TableNodeProps) => JSX.Element;
+export declare const TableNode: ({ type, data, id, Container }: TableNodeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/dist/interfaces/index.d.ts

@@ -49,7 +49,9 @@ export interface DataEmbed {
     caption: string;
 }
 export interface DataImage {
-    url: string;
+    file: {
+        url: string;
+    };
     caption: string;
     withBorder: boolean;
     stretched: boolean;

package/dist/esm/index.js

@@ -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) {
@@ -1841,8 +1895,8 @@ 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;
+    return (jsxRuntime.exports.jsx(Container, __assign({ stretched: stretched }, Container$1, { 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) {