@starlightcms/react-sdk 0.1.1 → 0.3.1

package/dist/cjs/VisualContent/blocks/HTML.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+declare const HTML: FC<VisualDataBlock<HTMLBlock>>;
+export default HTML;
+//# sourceMappingURL=HTML.d.ts.map

package/dist/cjs/VisualContent/blocks/HTML.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEjE,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAOxC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/cjs/VisualContent/blocks/HTML.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const HTML = ({ data }) => {
+    return (react_1.default.createElement("div", { className: "sl-content-block sl-html test", dangerouslySetInnerHTML: { __html: data.html } }));
+};
+exports.default = HTML;
+//# sourceMappingURL=HTML.js.map

package/dist/cjs/VisualContent/blocks/HTML.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,CACL,uCACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst HTML: FC<VisualDataBlock<HTMLBlock>> = ({ data }) => {\n  return (\n    <div\n      className=\"sl-content-block sl-html test\"\n      dangerouslySetInnerHTML={{ __html: data.html }}\n    />\n  )\n}\n\nexport default HTML\n"]}

package/dist/cjs/VisualContent/blocks/Header.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { FC } from 'react';
 import { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk';
-declare const _default: React.NamedExoticComponent<VisualDataBlock<HeaderBlock>>;
-export default _default;
+declare const Header: FC<VisualDataBlock<HeaderBlock>>;
+export default Header;
 //# sourceMappingURL=Header.d.ts.map

package/dist/cjs/VisualContent/blocks/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;;AAcnE,wBAA2B"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEnE,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CAS5C,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/cjs/VisualContent/blocks/Header.js

@@ -1,43 +1,12 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Header = ({ data }) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const HeaderComponent = (_a) => {
-        var { children } = _a, props = __rest(_a, ["children"]);
-        return (0, react_1.createElement)(`h${data.level}`, props, children);
-    };
-    return (react_1.default.createElement(HeaderComponent, { className: "sl-content-block sl-header" }, data.text));
+    const HeaderComponent = `h${data.level}`;
+    return (react_1.default.createElement(HeaderComponent, { className: "sl-content-block sl-header", dangerouslySetInnerHTML: { __html: data.text } }));
 };
-exports.default = (0, react_1.memo)(Header);
+exports.default = Header;
 //# sourceMappingURL=Header.js.map

package/dist/cjs/VisualContent/blocks/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AAGtD,MAAM,MAAM,GAAqC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5D,8DAA8D;IAC9D,MAAM,eAAe,GAAY,CAAC,EAAsB,EAAE,EAAE;YAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,cAApB,YAAsB,CAAF;QACpD,OAAA,IAAA,qBAAa,EAAC,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KAAA,CAAA;IAElD,OAAO,CACL,8BAAC,eAAe,IAAC,SAAS,EAAC,4BAA4B,IACpD,IAAI,CAAC,IAAI,CACM,CACnB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAA,YAAI,EAAC,MAAM,CAAC,CAAA","sourcesContent":["import React, { createElement, FC, memo } from 'react'\nimport { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Header: FC<VisualDataBlock<HeaderBlock>> = ({ data }) => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const HeaderComponent: FC<any> = ({ children, ...props }) =>\n    createElement(`h${data.level}`, props, children)\n\n  return (\n    <HeaderComponent className=\"sl-content-block sl-header\">\n      {data.text}\n    </HeaderComponent>\n  )\n}\n\nexport default memo(Header)\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC,MAAM,MAAM,GAAqC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5D,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,8BAAC,eAAe,IACd,SAAS,EAAC,4BAA4B,EACtC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,MAAM,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Header: FC<VisualDataBlock<HeaderBlock>> = ({ data }) => {\n  const HeaderComponent = `h${data.level}` as 'h1'\n\n  return (\n    <HeaderComponent\n      className=\"sl-content-block sl-header\"\n      dangerouslySetInnerHTML={{ __html: data.text }}\n    />\n  )\n}\n\nexport default Header\n"]}

package/dist/cjs/VisualContent/blocks/Image.d.ts

@@ -1,5 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk';
-declare const _default: React.NamedExoticComponent<VisualDataBlock<ImageBlock>>;
-export default _default;
+declare type ImageOptions = {
+    sizes?: string;
+};
+declare const Image: FC<VisualDataBlock<ImageBlock> & ImageOptions>;
+export default Image;
 //# sourceMappingURL=Image.d.ts.map

package/dist/cjs/VisualContent/blocks/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;;AAMlE,wBAA0B"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE,aAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CA8CzD,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/cjs/VisualContent/blocks/Image.js

@@ -20,8 +20,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
-const Image = ({ data }) => {
-    return react_1.default.createElement("img", { className: "sl-content-block sl-image", src: data.url, alt: "" });
+const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
+    const { url, files, alt = '', caption, href } = data;
+    const [target, setTarget] = (0, react_1.useState)('_self');
+    const [srcSet, setSrcSet] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        if (!href)
+            return;
+        setTarget(new URL(href).origin === window.location.origin ? '_self' : '_blank');
+    }, [href]);
+    (0, react_1.useEffect)(() => {
+        if (!files || !files.length)
+            return;
+        setSrcSet(files.map((file) => `${file.url} ${file.width}w`).join(', '));
+    }, [files]);
+    return (react_1.default.createElement("figure", null,
+        href ? (react_1.default.createElement("a", { href: href, target: target },
+            react_1.default.createElement("img", { className: "sl-content-block sl-image", src: url, alt: alt, srcSet: srcSet, sizes: srcSet ? sizes : undefined }))) : (react_1.default.createElement("img", { className: "sl-content-block sl-image", src: url, alt: alt, srcSet: srcSet, sizes: srcSet ? sizes : undefined })),
+        caption && react_1.default.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })));
 };
-exports.default = (0, react_1.memo)(Image);
+exports.default = Image;
 //# sourceMappingURL=Image.js.map

package/dist/cjs/VisualContent/blocks/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAGvC,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,uCAAK,SAAS,EAAC,2BAA2B,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAC,EAAE,GAAG,CAAA;AAC5E,CAAC,CAAA;AAED,kBAAe,IAAA,YAAI,EAAC,KAAK,CAAC,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Image: FC<VisualDataBlock<ImageBlock>> = ({ data }) => {\n  return <img className=\"sl-content-block sl-image\" src={data.url} alt=\"\" />\n}\n\nexport default memo(Image)\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AAOtD,MAAM,KAAK,GAAmD,CAAC,EAC7D,IAAI,EACJ,KAAK,GAAG,+BAA+B,GACxC,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;IACpD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,OAAO,CAAC,CAAA;IAC7C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAA;IAExC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAM;QAEjB,SAAS,CACP,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CACrE,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAM;QAEnC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACzE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL;QACG,IAAI,CAAC,CAAC,CAAC,CACN,qCAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM;YAC3B,uCACE,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GACjC,CACA,CACL,CAAC,CAAC,CAAC,CACF,uCACE,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GACjC,CACH;QACA,OAAO,IAAI,8CAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CACjE,CACV,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\ntype ImageOptions = {\n  sizes?: string\n}\n\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n  data,\n  sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n  const { url, files, alt = '', caption, href } = data\n  const [target, setTarget] = useState('_self')\n  const [srcSet, setSrcSet] = useState('')\n\n  useEffect(() => {\n    if (!href) return\n\n    setTarget(\n      new URL(href).origin === window.location.origin ? '_self' : '_blank'\n    )\n  }, [href])\n\n  useEffect(() => {\n    if (!files || !files.length) return\n\n    setSrcSet(files.map((file) => `${file.url} ${file.width}w`).join(', '))\n  }, [files])\n\n  return (\n    <figure>\n      {href ? (\n        <a href={href} target={target}>\n          <img\n            className=\"sl-content-block sl-image\"\n            src={url}\n            alt={alt}\n            srcSet={srcSet}\n            sizes={srcSet ? sizes : undefined}\n          />\n        </a>\n      ) : (\n        <img\n          className=\"sl-content-block sl-image\"\n          src={url}\n          alt={alt}\n          srcSet={srcSet}\n          sizes={srcSet ? sizes : undefined}\n        />\n      )}\n      {caption && <figcaption dangerouslySetInnerHTML={{ __html: caption }} />}\n    </figure>\n  )\n}\n\nexport default Image\n"]}

package/dist/cjs/VisualContent/blocks/List.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ListBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+declare const List: FC<VisualDataBlock<ListBlock>>;
+export default List;
+//# sourceMappingURL=List.d.ts.map

package/dist/cjs/VisualContent/blocks/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/List.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAuB3E,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAUxC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/cjs/VisualContent/blocks/List.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const SubList = ({ item, Wrapper }) => {
+    return (react_1.default.createElement("li", null,
+        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: item.content } }),
+        item.items && item.items.length ? (react_1.default.createElement(Wrapper, null, item.items &&
+            item.items.map((subItem, index) => (react_1.default.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
+};
+const List = ({ data }) => {
+    const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul';
+    return (react_1.default.createElement(ListWrapper, { className: "sl-content-block sl-list sl-list__root" }, data.items.map((item, index) => (react_1.default.createElement(SubList, { key: index, item: item, Wrapper: ListWrapper })))));
+};
+exports.default = List;
+//# sourceMappingURL=List.js.map

package/dist/cjs/VisualContent/blocks/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/List.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAQjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IACtD,OAAO,CACL;QACE,wCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;QAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,8BAAC,OAAO,QACL,IAAI,CAAC,KAAK;YACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,8BAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC,CACI,CACX,CAAC,CAAC,CAAC,IAAI,CACL,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE1D,OAAO,CACL,8BAAC,WAAW,IAAC,SAAS,EAAC,wCAAwC,IAC5D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,8BAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,CAC1D,CAAC,CACU,CACf,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\n\ntype SubListProps = {\n  item: ListItem\n  Wrapper: 'ul' | 'ol'\n}\n\nconst SubList: FC<SubListProps> = ({ item, Wrapper }) => {\n  return (\n    <li>\n      <span dangerouslySetInnerHTML={{ __html: item.content }} />\n      {item.items && item.items.length ? (\n        <Wrapper>\n          {item.items &&\n            item.items.map((subItem, index) => (\n              <SubList key={index} item={subItem} Wrapper={Wrapper} />\n            ))}\n        </Wrapper>\n      ) : null}\n    </li>\n  )\n}\n\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n  const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul'\n\n  return (\n    <ListWrapper className=\"sl-content-block sl-list sl-list__root\">\n      {data.items.map((item, index) => (\n        <SubList key={index} item={item} Wrapper={ListWrapper} />\n      ))}\n    </ListWrapper>\n  )\n}\n\nexport default List\n"]}

package/dist/cjs/VisualContent/blocks/Paragraph.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { FC } from 'react';
 import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk';
-declare const _default: React.NamedExoticComponent<VisualDataBlock<ParagraphBlock>>;
-export default _default;
+declare const Paragraph: FC<VisualDataBlock<ParagraphBlock>>;
+export default Paragraph;
 //# sourceMappingURL=Paragraph.d.ts.map

package/dist/cjs/VisualContent/blocks/Paragraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;;AAMtE,wBAA8B"}
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAOlD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/cjs/VisualContent/blocks/Paragraph.js

@@ -1,27 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Paragraph = ({ data }) => {
-    return react_1.default.createElement("p", { className: "sl-content-block sl-paragraph" }, data.text);
+    return (react_1.default.createElement("p", { className: "sl-content-block sl-paragraph", dangerouslySetInnerHTML: { __html: data.text } }));
 };
-exports.default = (0, react_1.memo)(Paragraph);
+exports.default = Paragraph;
 //# sourceMappingURL=Paragraph.js.map

package/dist/cjs/VisualContent/blocks/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAGvC,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,qCAAG,SAAS,EAAC,+BAA+B,IAAE,IAAI,CAAC,IAAI,CAAK,CAAA;AACrE,CAAC,CAAA;AAED,kBAAe,IAAA,YAAI,EAAC,SAAS,CAAC,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n  return <p className=\"sl-content-block sl-paragraph\">{data.text}</p>\n}\n\nexport default memo(Paragraph)\n"]}
+{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,CACL,qCACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n  return (\n    <p\n      className=\"sl-content-block sl-paragraph\"\n      dangerouslySetInnerHTML={{ __html: data.text }}\n    />\n  )\n}\n\nexport default Paragraph\n"]}

package/dist/cjs/VisualContent/blocks/Quote.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { FC } from 'react';
 import { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk';
-declare const _default: React.NamedExoticComponent<VisualDataBlock<QuoteBlock>>;
-export default _default;
+declare const Quote: FC<VisualDataBlock<QuoteBlock>>;
+export default Quote;
 //# sourceMappingURL=Quote.d.ts.map

package/dist/cjs/VisualContent/blocks/Quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;;AAQlE,wBAA0B"}
+{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAI1C,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/cjs/VisualContent/blocks/Quote.js

@@ -1,27 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const Quote = ({ data }) => {
     return (react_1.default.createElement("blockquote", { className: "sl-content-block sl-quote" }, data.text));
 };
-exports.default = (0, react_1.memo)(Quote);
+exports.default = Quote;
 //# sourceMappingURL=Quote.js.map

package/dist/cjs/VisualContent/blocks/Quote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAGvC,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,8CAAY,SAAS,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAc,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAA,YAAI,EAAC,KAAK,CAAC,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Quote: FC<VisualDataBlock<QuoteBlock>> = ({ data }) => {\n  return (\n    <blockquote className=\"sl-content-block sl-quote\">{data.text}</blockquote>\n  )\n}\n\nexport default memo(Quote)\n"]}
+{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,8CAAY,SAAS,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAc,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Quote: FC<VisualDataBlock<QuoteBlock>> = ({ data }) => {\n  return (\n    <blockquote className=\"sl-content-block sl-quote\">{data.text}</blockquote>\n  )\n}\n\nexport default Quote\n"]}

package/dist/cjs/VisualContent/index.d.ts

@@ -1,5 +1,12 @@
-import React from 'react';
+import { FC } from 'react';
 import { VisualContentProps } from './types';
-declare const _default: React.NamedExoticComponent<VisualContentProps>;
-export default _default;
+import Paragraph from './blocks/Paragraph';
+import Header from './blocks/Header';
+import Quote from './blocks/Quote';
+import Image from './blocks/Image';
+import HTML from './blocks/HTML';
+import List from './blocks/List';
+declare const VisualContent: FC<VisualContentProps>;
+export default VisualContent;
+export { Paragraph, Header, Quote, Image, HTML, List };
 //# sourceMappingURL=index.d.ts.map

package/dist/cjs/VisualContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;;AAoC7D,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+BzC,CAAA;AAED,eAAe,aAAa,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}

package/dist/cjs/VisualContent/index.js

@@ -22,26 +22,39 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = exports.HTML = exports.Image = exports.Quote = exports.Header = exports.Paragraph = void 0;
 const react_1 = __importStar(require("react"));
 const Paragraph_1 = __importDefault(require("./blocks/Paragraph"));
+exports.Paragraph = Paragraph_1.default;
 const Header_1 = __importDefault(require("./blocks/Header"));
+exports.Header = Header_1.default;
 const Quote_1 = __importDefault(require("./blocks/Quote"));
+exports.Quote = Quote_1.default;
 const Image_1 = __importDefault(require("./blocks/Image"));
+exports.Image = Image_1.default;
+const HTML_1 = __importDefault(require("./blocks/HTML"));
+exports.HTML = HTML_1.default;
+const List_1 = __importDefault(require("./blocks/List"));
+exports.List = List_1.default;
 const defaultComponents = {
     paragraph: Paragraph_1.default,
     header: Header_1.default,
     quote: Quote_1.default,
     image: Image_1.default,
+    raw: HTML_1.default,
+    list: List_1.default,
 };
 const VisualContent = ({ content, components = {}, }) => {
-    const componentList = Object.assign({}, defaultComponents, components);
+    const componentList = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
     if (!content) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block, index) => {
+    return (react_1.default.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block) => {
         const Component = componentList[block.type];
-        return (react_1.default.createElement(Component, { key: index, type: block.type, data: block.data }));
+        if (!Component)
+            return null;
+        return (react_1.default.createElement(Component, { key: block.id, id: block.id, type: block.type, data: block.data }));
     })));
 };
-exports.default = (0, react_1.memo)(VisualContent);
+exports.default = VisualContent;
 //# sourceMappingURL=index.js.map

package/dist/cjs/VisualContent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AAEvC,mEAA0C;AAC1C,6DAAoC;AACpC,2DAAkC;AAClC,2DAAkC;AAElC,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,mBAAS;IACpB,MAAM,EAAE,gBAAM;IACd,KAAK,EAAE,eAAK;IACZ,KAAK,EAAE,eAAK;CACb,CAAA;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,UAAU,GAAG,EAAE,GAChB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAA;IAEtE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,OAAO,CACL,8BAAC,SAAS,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAa,GAAI,CACvE,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAA,YAAI,EAAC,aAAa,CAAC,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n}\n\nconst VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n}) => {\n  const componentList = Object.assign({}, defaultComponents, components)\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div className=\"sl-visual-content\">\n      {content.blocks.map((block, index) => {\n        const Component = componentList[block.type]\n\n        return (\n          <Component key={index} type={block.type} data={block.data as never} />\n        )\n      })}\n    </div>\n  )\n}\n\nexport default memo(VisualContent)\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,mEAA0C;AAmDjC,oBAnDF,mBAAS,CAmDE;AAlDlB,6DAAoC;AAkDhB,iBAlDb,gBAAM,CAkDa;AAjD1B,2DAAkC;AAiDN,gBAjDrB,eAAK,CAiDqB;AAhDjC,2DAAkC;AAgDC,gBAhD5B,eAAK,CAgD4B;AA/CxC,yDAAgC;AA+CU,eA/CnC,cAAI,CA+CmC;AA9C9C,yDAAgC;AA8CgB,eA9CzC,cAAI,CA8CyC;AA5CpD,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,mBAAS;IACpB,MAAM,EAAE,gBAAM;IACd,KAAK,EAAE,eAAK;IACZ,KAAK,EAAE,eAAK;IACZ,GAAG,EAAE,cAAI;IACT,IAAI,EAAE,cAAI;CACX,CAAA;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,UAAU,GAAG,EAAE,GAChB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,uCAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAA;QAE3B,OAAO,CACL,8BAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAa,GACzB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,aAAa,CAAA","sourcesContent":["import React, { FC, useMemo } from 'react'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n}\n\nconst VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n}) => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div className=\"sl-visual-content\">\n      {content.blocks.map((block) => {\n        const Component = componentList[block.type]\n\n        if (!Component) return null\n\n        return (\n          <Component\n            key={block.id}\n            id={block.id}\n            type={block.type}\n            data={block.data as never}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport default VisualContent\n\nexport { Paragraph, Header, Quote, Image, HTML, List }\n"]}

package/dist/cjs/VisualContent/types.d.ts

@@ -1,11 +1,13 @@
 import { ComponentType } from 'react';
-import { HeaderBlock, ImageBlock, ParagraphBlock, QuoteBlock, VisualData, VisualDataBlock, BlockType } from '@starlightcms/js-sdk';
+import { HeaderBlock, ImageBlock, ParagraphBlock, QuoteBlock, VisualData, VisualDataBlock, BlockType, HTMLBlock, ListBlock } from '@starlightcms/js-sdk';
 declare type Implements<T, U extends T> = Record<string, unknown>;
 export interface BlockComponents extends Implements<Record<BlockType, unknown>, BlockComponents> {
     paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>;
     header: ComponentType<VisualDataBlock<HeaderBlock>>;
     quote: ComponentType<VisualDataBlock<QuoteBlock>>;
     image: ComponentType<VisualDataBlock<ImageBlock>>;
+    raw: ComponentType<VisualDataBlock<HTMLBlock>>;
+    list: ComponentType<VisualDataBlock<ListBlock>>;
 }
 export declare type VisualContentProps = {
     content?: VisualData;

package/dist/cjs/VisualContent/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACV,MAAM,sBAAsB,CAAA;AAG7B,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC/D,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;CAClD;AAED,oBAAY,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CACtC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,sBAAsB,CAAA;AAG7B,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC/D,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,GAAG,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9C,IAAI,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;CAChD;AAED,oBAAY,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CACtC,CAAA"}

package/dist/cjs/VisualContent/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n  HTMLBlock,\n  ListBlock,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n  raw: ComponentType<VisualDataBlock<HTMLBlock>>\n  list: ComponentType<VisualDataBlock<ListBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n}\n"]}

package/dist/esm/VisualContent/blocks/HTML.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+declare const HTML: FC<VisualDataBlock<HTMLBlock>>;
+export default HTML;
+//# sourceMappingURL=HTML.d.ts.map

package/dist/esm/VisualContent/blocks/HTML.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEjE,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAOxC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/esm/VisualContent/blocks/HTML.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const HTML = ({ data }) => {
+    return (React.createElement("div", { className: "sl-content-block sl-html test", dangerouslySetInnerHTML: { __html: data.html } }));
+};
+export default HTML;
+//# sourceMappingURL=HTML.js.map

package/dist/esm/VisualContent/blocks/HTML.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,CACL,6BACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst HTML: FC<VisualDataBlock<HTMLBlock>> = ({ data }) => {\n  return (\n    <div\n      className=\"sl-content-block sl-html test\"\n      dangerouslySetInnerHTML={{ __html: data.html }}\n    />\n  )\n}\n\nexport default HTML\n"]}

package/dist/esm/VisualContent/blocks/Header.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { FC } from 'react';
 import { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk';
-declare const _default: React.NamedExoticComponent<VisualDataBlock<HeaderBlock>>;
-export default _default;
+declare const Header: FC<VisualDataBlock<HeaderBlock>>;
+export default Header;
 //# sourceMappingURL=Header.d.ts.map

package/dist/esm/VisualContent/blocks/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;;AAcnE,wBAA2B"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEnE,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,eAAe,CAAC,WAAW,CAAC,CAS5C,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/esm/VisualContent/blocks/Header.js

@@ -1,22 +1,7 @@
-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;
-};
-import React, { createElement, memo } from 'react';
+import React from 'react';
 const Header = ({ data }) => {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const HeaderComponent = (_a) => {
-        var { children } = _a, props = __rest(_a, ["children"]);
-        return createElement(`h${data.level}`, props, children);
-    };
-    return (React.createElement(HeaderComponent, { className: "sl-content-block sl-header" }, data.text));
+    const HeaderComponent = `h${data.level}`;
+    return (React.createElement(HeaderComponent, { className: "sl-content-block sl-header", dangerouslySetInnerHTML: { __html: data.text } }));
 };
-export default memo(Header);
+export default Header;
 //# sourceMappingURL=Header.js.map

package/dist/esm/VisualContent/blocks/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AAGtD,MAAM,MAAM,GAAqC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5D,8DAA8D;IAC9D,MAAM,eAAe,GAAY,CAAC,EAAsB,EAAE,EAAE;YAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,cAApB,YAAsB,CAAF;QACpD,OAAA,aAAa,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAA;KAAA,CAAA;IAElD,OAAO,CACL,oBAAC,eAAe,IAAC,SAAS,EAAC,4BAA4B,IACpD,IAAI,CAAC,IAAI,CACM,CACnB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,MAAM,CAAC,CAAA","sourcesContent":["import React, { createElement, FC, memo } from 'react'\nimport { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Header: FC<VisualDataBlock<HeaderBlock>> = ({ data }) => {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const HeaderComponent: FC<any> = ({ children, ...props }) =>\n    createElement(`h${data.level}`, props, children)\n\n  return (\n    <HeaderComponent className=\"sl-content-block sl-header\">\n      {data.text}\n    </HeaderComponent>\n  )\n}\n\nexport default memo(Header)\n"]}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC,MAAM,MAAM,GAAqC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC5D,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,oBAAC,eAAe,IACd,SAAS,EAAC,4BAA4B,EACtC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Header: FC<VisualDataBlock<HeaderBlock>> = ({ data }) => {\n  const HeaderComponent = `h${data.level}` as 'h1'\n\n  return (\n    <HeaderComponent\n      className=\"sl-content-block sl-header\"\n      dangerouslySetInnerHTML={{ __html: data.text }}\n    />\n  )\n}\n\nexport default Header\n"]}

package/dist/esm/VisualContent/blocks/Image.d.ts

@@ -1,5 +1,8 @@
-import React from 'react';
+import { FC } from 'react';
 import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk';
-declare const _default: React.NamedExoticComponent<VisualDataBlock<ImageBlock>>;
-export default _default;
+declare type ImageOptions = {
+    sizes?: string;
+};
+declare const Image: FC<VisualDataBlock<ImageBlock> & ImageOptions>;
+export default Image;
 //# sourceMappingURL=Image.d.ts.map

package/dist/esm/VisualContent/blocks/Image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;;AAMlE,wBAA0B"}
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AACtD,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE,aAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CA8CzD,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/esm/VisualContent/blocks/Image.js

@@ -1,6 +1,22 @@
-import React, { memo } from 'react';
-const Image = ({ data }) => {
-    return React.createElement("img", { className: "sl-content-block sl-image", src: data.url, alt: "" });
+import React, { useEffect, useState } from 'react';
+const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
+    const { url, files, alt = '', caption, href } = data;
+    const [target, setTarget] = useState('_self');
+    const [srcSet, setSrcSet] = useState('');
+    useEffect(() => {
+        if (!href)
+            return;
+        setTarget(new URL(href).origin === window.location.origin ? '_self' : '_blank');
+    }, [href]);
+    useEffect(() => {
+        if (!files || !files.length)
+            return;
+        setSrcSet(files.map((file) => `${file.url} ${file.width}w`).join(', '));
+    }, [files]);
+    return (React.createElement("figure", null,
+        href ? (React.createElement("a", { href: href, target: target },
+            React.createElement("img", { className: "sl-content-block sl-image", src: url, alt: alt, srcSet: srcSet, sizes: srcSet ? sizes : undefined }))) : (React.createElement("img", { className: "sl-content-block sl-image", src: url, alt: alt, srcSet: srcSet, sizes: srcSet ? sizes : undefined })),
+        caption && React.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })));
 };
-export default memo(Image);
+export default Image;
 //# sourceMappingURL=Image.js.map

package/dist/esm/VisualContent/blocks/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AAGvC,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,6BAAK,SAAS,EAAC,2BAA2B,EAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAC,EAAE,GAAG,CAAA;AAC5E,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Image: FC<VisualDataBlock<ImageBlock>> = ({ data }) => {\n  return <img className=\"sl-content-block sl-image\" src={data.url} alt=\"\" />\n}\n\nexport default memo(Image)\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAOtD,MAAM,KAAK,GAAmD,CAAC,EAC7D,IAAI,EACJ,KAAK,GAAG,+BAA+B,GACxC,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,GAAG,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;IACpD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC7C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAM;QAEjB,SAAS,CACP,IAAI,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CACrE,CAAA;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAM;QAEnC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,GAAG,IAAI,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACzE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,OAAO,CACL;QACG,IAAI,CAAC,CAAC,CAAC,CACN,2BAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM;YAC3B,6BACE,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GACjC,CACA,CACL,CAAC,CAAC,CAAC,CACF,6BACE,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GACjC,CACH;QACA,OAAO,IAAI,oCAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CACjE,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\ntype ImageOptions = {\n  sizes?: string\n}\n\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n  data,\n  sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n  const { url, files, alt = '', caption, href } = data\n  const [target, setTarget] = useState('_self')\n  const [srcSet, setSrcSet] = useState('')\n\n  useEffect(() => {\n    if (!href) return\n\n    setTarget(\n      new URL(href).origin === window.location.origin ? '_self' : '_blank'\n    )\n  }, [href])\n\n  useEffect(() => {\n    if (!files || !files.length) return\n\n    setSrcSet(files.map((file) => `${file.url} ${file.width}w`).join(', '))\n  }, [files])\n\n  return (\n    <figure>\n      {href ? (\n        <a href={href} target={target}>\n          <img\n            className=\"sl-content-block sl-image\"\n            src={url}\n            alt={alt}\n            srcSet={srcSet}\n            sizes={srcSet ? sizes : undefined}\n          />\n        </a>\n      ) : (\n        <img\n          className=\"sl-content-block sl-image\"\n          src={url}\n          alt={alt}\n          srcSet={srcSet}\n          sizes={srcSet ? sizes : undefined}\n        />\n      )}\n      {caption && <figcaption dangerouslySetInnerHTML={{ __html: caption }} />}\n    </figure>\n  )\n}\n\nexport default Image\n"]}

package/dist/esm/VisualContent/blocks/List.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { ListBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+declare const List: FC<VisualDataBlock<ListBlock>>;
+export default List;
+//# sourceMappingURL=List.d.ts.map

package/dist/esm/VisualContent/blocks/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/List.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,SAAS,EAAY,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAuB3E,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAUxC,CAAA;AAED,eAAe,IAAI,CAAA"}

package/dist/esm/VisualContent/blocks/List.js

@@ -0,0 +1,13 @@
+import React from 'react';
+const SubList = ({ item, Wrapper }) => {
+    return (React.createElement("li", null,
+        React.createElement("span", { dangerouslySetInnerHTML: { __html: item.content } }),
+        item.items && item.items.length ? (React.createElement(Wrapper, null, item.items &&
+            item.items.map((subItem, index) => (React.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
+};
+const List = ({ data }) => {
+    const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul';
+    return (React.createElement(ListWrapper, { className: "sl-content-block sl-list sl-list__root" }, data.items.map((item, index) => (React.createElement(SubList, { key: index, item: item, Wrapper: ListWrapper })))));
+};
+export default List;
+//# sourceMappingURL=List.js.map

package/dist/esm/VisualContent/blocks/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAQjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IACtD,OAAO,CACL;QACE,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;QAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,oBAAC,OAAO,QACL,IAAI,CAAC,KAAK;YACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC,CACI,CACX,CAAC,CAAC,CAAC,IAAI,CACL,CACN,CAAA;AACH,CAAC,CAAA;AAED,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE1D,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAC,wCAAwC,IAC5D,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,CAC1D,CAAC,CACU,CACf,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\n\ntype SubListProps = {\n  item: ListItem\n  Wrapper: 'ul' | 'ol'\n}\n\nconst SubList: FC<SubListProps> = ({ item, Wrapper }) => {\n  return (\n    <li>\n      <span dangerouslySetInnerHTML={{ __html: item.content }} />\n      {item.items && item.items.length ? (\n        <Wrapper>\n          {item.items &&\n            item.items.map((subItem, index) => (\n              <SubList key={index} item={subItem} Wrapper={Wrapper} />\n            ))}\n        </Wrapper>\n      ) : null}\n    </li>\n  )\n}\n\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n  const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul'\n\n  return (\n    <ListWrapper className=\"sl-content-block sl-list sl-list__root\">\n      {data.items.map((item, index) => (\n        <SubList key={index} item={item} Wrapper={ListWrapper} />\n      ))}\n    </ListWrapper>\n  )\n}\n\nexport default List\n"]}

package/dist/esm/VisualContent/blocks/Paragraph.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { FC } from 'react';
 import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk';
-declare const _default: React.NamedExoticComponent<VisualDataBlock<ParagraphBlock>>;
-export default _default;
+declare const Paragraph: FC<VisualDataBlock<ParagraphBlock>>;
+export default Paragraph;
 //# sourceMappingURL=Paragraph.d.ts.map

package/dist/esm/VisualContent/blocks/Paragraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;;AAMtE,wBAA8B"}
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAOlD,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/esm/VisualContent/blocks/Paragraph.js

@@ -1,6 +1,6 @@
-import React, { memo } from 'react';
+import React from 'react';
 const Paragraph = ({ data }) => {
-    return React.createElement("p", { className: "sl-content-block sl-paragraph" }, data.text);
+    return (React.createElement("p", { className: "sl-content-block sl-paragraph", dangerouslySetInnerHTML: { __html: data.text } }));
 };
-export default memo(Paragraph);
+export default Paragraph;
 //# sourceMappingURL=Paragraph.js.map

package/dist/esm/VisualContent/blocks/Paragraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AAGvC,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,2BAAG,SAAS,EAAC,+BAA+B,IAAE,IAAI,CAAC,IAAI,CAAK,CAAA;AACrE,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,SAAS,CAAC,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n  return <p className=\"sl-content-block sl-paragraph\">{data.text}</p>\n}\n\nexport default memo(Paragraph)\n"]}
+{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,OAAO,CACL,2BACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n  return (\n    <p\n      className=\"sl-content-block sl-paragraph\"\n      dangerouslySetInnerHTML={{ __html: data.text }}\n    />\n  )\n}\n\nexport default Paragraph\n"]}

package/dist/esm/VisualContent/blocks/Quote.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { FC } from 'react';
 import { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk';
-declare const _default: React.NamedExoticComponent<VisualDataBlock<QuoteBlock>>;
-export default _default;
+declare const Quote: FC<VisualDataBlock<QuoteBlock>>;
+export default Quote;
 //# sourceMappingURL=Quote.d.ts.map

package/dist/esm/VisualContent/blocks/Quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;;AAQlE,wBAA0B"}
+{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAI1C,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/esm/VisualContent/blocks/Quote.js

@@ -1,6 +1,6 @@
-import React, { memo } from 'react';
+import React from 'react';
 const Quote = ({ data }) => {
     return (React.createElement("blockquote", { className: "sl-content-block sl-quote" }, data.text));
 };
-export default memo(Quote);
+export default Quote;
 //# sourceMappingURL=Quote.js.map

package/dist/esm/VisualContent/blocks/Quote.js.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AAGvC,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,oCAAY,SAAS,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAc,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,KAAK,CAAC,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Quote: FC<VisualDataBlock<QuoteBlock>> = ({ data }) => {\n  return (\n    <blockquote className=\"sl-content-block sl-quote\">{data.text}</blockquote>\n  )\n}\n\nexport default memo(Quote)\n"]}
+{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,oCAAY,SAAS,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAc,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\nconst Quote: FC<VisualDataBlock<QuoteBlock>> = ({ data }) => {\n  return (\n    <blockquote className=\"sl-content-block sl-quote\">{data.text}</blockquote>\n  )\n}\n\nexport default Quote\n"]}

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

@@ -1,5 +1,12 @@
-import React from 'react';
+import { FC } from 'react';
 import { VisualContentProps } from './types';
-declare const _default: React.NamedExoticComponent<VisualContentProps>;
-export default _default;
+import Paragraph from './blocks/Paragraph';
+import Header from './blocks/Header';
+import Quote from './blocks/Quote';
+import Image from './blocks/Image';
+import HTML from './blocks/HTML';
+import List from './blocks/List';
+declare const VisualContent: FC<VisualContentProps>;
+export default VisualContent;
+export { Paragraph, Header, Quote, Image, HTML, List };
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/VisualContent/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AACvC,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;;AAoC7D,wBAAkC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+BzC,CAAA;AAED,eAAe,aAAa,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}

package/dist/esm/VisualContent/index.js

@@ -1,23 +1,30 @@
-import React, { memo } from 'react';
+import React, { useMemo } from 'react';
 import Paragraph from './blocks/Paragraph';
 import Header from './blocks/Header';
 import Quote from './blocks/Quote';
 import Image from './blocks/Image';
+import HTML from './blocks/HTML';
+import List from './blocks/List';
 const defaultComponents = {
     paragraph: Paragraph,
     header: Header,
     quote: Quote,
     image: Image,
+    raw: HTML,
+    list: List,
 };
 const VisualContent = ({ content, components = {}, }) => {
-    const componentList = Object.assign({}, defaultComponents, components);
+    const componentList = useMemo(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
     if (!content) {
         return null;
     }
-    return (React.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block, index) => {
+    return (React.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block) => {
         const Component = componentList[block.type];
-        return (React.createElement(Component, { key: index, type: block.type, data: block.data }));
+        if (!Component)
+            return null;
+        return (React.createElement(Component, { key: block.id, id: block.id, type: block.type, data: block.data }));
     })));
 };
-export default memo(VisualContent);
+export default VisualContent;
+export { Paragraph, Header, Quote, Image, HTML, List };
 //# sourceMappingURL=index.js.map

package/dist/esm/VisualContent/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,IAAI,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;CACb,CAAA;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,UAAU,GAAG,EAAE,GAChB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAA;IAEtE,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QACnC,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,OAAO,CACL,oBAAC,SAAS,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,IAAa,GAAI,CACvE,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAC,aAAa,CAAC,CAAA","sourcesContent":["import React, { FC, memo } from 'react'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n}\n\nconst VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n}) => {\n  const componentList = Object.assign({}, defaultComponents, components)\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div className=\"sl-visual-content\">\n      {content.blocks.map((block, index) => {\n        const Component = componentList[block.type]\n\n        return (\n          <Component key={index} type={block.type} data={block.data as never} />\n        )\n      })}\n    </div>\n  )\n}\n\nexport default memo(VisualContent)\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAEhC,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;CACX,CAAA;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,UAAU,GAAG,EAAE,GAChB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAA;QAE3B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAa,GACzB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,aAAa,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA","sourcesContent":["import React, { FC, useMemo } from 'react'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n}\n\nconst VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n}) => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div className=\"sl-visual-content\">\n      {content.blocks.map((block) => {\n        const Component = componentList[block.type]\n\n        if (!Component) return null\n\n        return (\n          <Component\n            key={block.id}\n            id={block.id}\n            type={block.type}\n            data={block.data as never}\n          />\n        )\n      })}\n    </div>\n  )\n}\n\nexport default VisualContent\n\nexport { Paragraph, Header, Quote, Image, HTML, List }\n"]}

package/dist/esm/VisualContent/types.d.ts

@@ -1,11 +1,13 @@
 import { ComponentType } from 'react';
-import { HeaderBlock, ImageBlock, ParagraphBlock, QuoteBlock, VisualData, VisualDataBlock, BlockType } from '@starlightcms/js-sdk';
+import { HeaderBlock, ImageBlock, ParagraphBlock, QuoteBlock, VisualData, VisualDataBlock, BlockType, HTMLBlock, ListBlock } from '@starlightcms/js-sdk';
 declare type Implements<T, U extends T> = Record<string, unknown>;
 export interface BlockComponents extends Implements<Record<BlockType, unknown>, BlockComponents> {
     paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>;
     header: ComponentType<VisualDataBlock<HeaderBlock>>;
     quote: ComponentType<VisualDataBlock<QuoteBlock>>;
     image: ComponentType<VisualDataBlock<ImageBlock>>;
+    raw: ComponentType<VisualDataBlock<HTMLBlock>>;
+    list: ComponentType<VisualDataBlock<ListBlock>>;
 }
 export declare type VisualContentProps = {
     content?: VisualData;

package/dist/esm/VisualContent/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACV,MAAM,sBAAsB,CAAA;AAG7B,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC/D,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;CAClD;AAED,oBAAY,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CACtC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,sBAAsB,CAAA;AAG7B,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC/D,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,GAAG,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9C,IAAI,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;CAChD;AAED,oBAAY,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CACtC,CAAA"}

package/dist/esm/VisualContent/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n  HTMLBlock,\n  ListBlock,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n  raw: ComponentType<VisualDataBlock<HTMLBlock>>\n  list: ComponentType<VisualDataBlock<ListBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starlightcms/react-sdk",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "description": "The Starlight SDK for React",
   "main": "dist/cjs/index.js",
   "exports": {
@@ -11,7 +11,8 @@
     "build": "rimraf dist && npm run build:cjs && npm run build:esm",
     "build:esm": "tsc --module esnext --outDir dist/esm",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
-    "dev": "tsc --watch",
+    "dev": "tsc --watch --module esnext --outDir dist/esm",
+    "dev:cjs": "tsc --watch --module commonjs --outDir dist/cjs",
     "prepare": "husky install",
     "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -53,7 +54,9 @@
     ]
   },
   "dependencies": {
-    "@starlightcms/js-sdk": "^0.4.1",
-    "react": "^17.0.2"
+    "@starlightcms/js-sdk": "^0.6.1"
+  },
+  "peerDependencies": {
+    "react": ">=16.0.0"
   }
 }