@starlightcms/react-sdk 1.1.0 → 2.1.0

package/dist/cjs/VisualContent/index.js

@@ -26,22 +26,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ListComponent = exports.HTMLComponent = exports.ImageComponent = exports.QuoteComponent = exports.HeaderComponent = exports.ParagraphComponent = exports.VisualContentStyles = exports.VisualContent = void 0;
-const react_1 = __importStar(require("react"));
-const styles_1 = require("./styles");
-Object.defineProperty(exports, "VisualContentStyles", { enumerable: true, get: function () { return styles_1.VisualContentStyles; } });
+exports.VideoComponent = exports.ListComponent = exports.HTMLComponent = exports.ImageComponent = exports.QuoteComponent = exports.HeaderComponent = exports.ParagraphComponent = exports.VisualContent = void 0;
+const Image_1 = __importDefault(require("./blocks/Image"));
+exports.ImageComponent = Image_1.default;
 const Paragraph_1 = __importDefault(require("./blocks/Paragraph"));
 exports.ParagraphComponent = Paragraph_1.default;
+const styles_1 = require("./styles");
+const react_1 = __importStar(require("react"));
 const Header_1 = __importDefault(require("./blocks/Header"));
 exports.HeaderComponent = Header_1.default;
 const Quote_1 = __importDefault(require("./blocks/Quote"));
 exports.QuoteComponent = Quote_1.default;
-const Image_1 = __importDefault(require("./blocks/Image"));
-exports.ImageComponent = Image_1.default;
 const HTML_1 = __importDefault(require("./blocks/HTML"));
 exports.HTMLComponent = HTML_1.default;
 const List_1 = __importDefault(require("./blocks/List"));
 exports.ListComponent = List_1.default;
+const Video_1 = __importDefault(require("./blocks/Video"));
+exports.VideoComponent = Video_1.default;
 const defaultComponents = {
     paragraph: Paragraph_1.default,
     header: Header_1.default,
@@ -49,6 +50,7 @@ const defaultComponents = {
     image: Image_1.default,
     raw: HTML_1.default,
     list: List_1.default,
+    video: Video_1.default,
 };
 /**
  * Renders HTML content from data returned by a Visual Editor field on Starlight.
@@ -117,7 +119,7 @@ const VisualContent = ({ content, components = {}, excerpt = false, excerptLengt
         const Component = componentList.paragraph;
         return (react_1.default.createElement(Component, { key: block.id, id: block.id, type: block.type, data: { text: excerptText } }));
     }
-    return (react_1.default.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block) => {
+    return (react_1.default.createElement(styles_1.OuterWrapper, { className: "sl-visual-content" }, content.blocks.map((block) => {
         const Component = componentList[block.type];
         if (!Component)
             return null;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsC;AAGtC,qCAA8C;AA+H5C,oGA/HO,4BAAmB,OA+HP;AA9HrB,mEAA0C;AA+H3B,6BA/HR,mBAAS,CA+HiB;AA9HjC,6DAAoC;AA+HxB,0BA/HL,gBAAM,CA+Hc;AA9H3B,2DAAkC;AA+HvB,yBA/HJ,eAAK,CA+Ha;AA9HzB,2DAAoD;AA+HzC,yBA/HJ,eAAK,CA+Ha;AA9HzB,yDAAgC;AA+HtB,wBA/HH,cAAI,CA+HY;AA9HvB,yDAAgC;AA+HtB,wBA/HH,cAAI,CA+HY;AA7HvB,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACC,EAAe,EAAE;IACpC,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,IAA8B,CAAA;KACtC;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAE1D,CAAA;QAEb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAA8B,CAAA;QAErE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACvC,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,GAAG,aAAa;YACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;YACjD,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QAEzC,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,EAAE,IAAI,EAAE,WAAW,EAAE,GAC3B,CACH,CAAA;KACF;IACD,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;AAxDY,QAAA,aAAa,iBAwDzB","sourcesContent":["import React, { useMemo } from 'react'\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport { VisualContentStyles } from './styles'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image, { ImageOptions } 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\n/**\n * Renders HTML content from data returned by a Visual Editor field on Starlight.\n *\n * The only required prop is `content`, which is the data returned by a Visual\n * Editor field. Additionally, you can provide custom components to render each\n * data block type.\n *\n * You can also pass the `excerpt` boolean prop to only render a portion of the\n * content, which is useful to summarize the content in lists.\n *\n * To learn how to customize the rendered content, take a look at the\n * [Customizing the output](#) guide page.\n *\n * @example Requesting an entry and rendering its content.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Visual\n * Editor field with a key of `post_content` on it.\n *\n * ```jsx\n * import Starlight, { VisualContent } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n *   const [entry, setEntry] = useState(null)\n *\n *   // This is just an example, you could fetch\n *   // the entry any way you want.\n *   useEffect(async () => {\n *     const response = await Starlight.posts.entries.get(slug)\n *\n *     setEntry(response.data)\n *   }, [ slug ])\n *\n *   // After fetching, content will be on the `entry.data.post_content` property.\n *   return (\n *     entry ? (\n *        <article>\n *          <h1>{entry.title}</h1>\n *          <VisualContent content={entry.data.post_content} />\n *        </article>\n *     ) : (\n *       <div>Loading...</div>\n *     )\n *   )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link VisualContentProps} to see the\n * available options.\n * @group VisualContent\n */\nexport const VisualContent = ({\n  content,\n  components = {},\n  excerpt = false,\n  excerptLength = 40,\n}: VisualContentProps): JSX.Element => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null as unknown as JSX.Element\n  }\n\n  if (excerpt) {\n    const block = content.blocks.find((block) => block.type === 'paragraph') as\n      | VisualDataBlock<ParagraphBlock>\n      | undefined\n\n    if (!block || !block.data.text) return null as unknown as JSX.Element\n\n    const text = block.data.text.split(' ')\n    const excerptText =\n      text.length > excerptLength\n        ? text.splice(0, excerptLength).join(' ') + '...'\n        : text.join(' ')\n    const Component = componentList.paragraph\n\n    return (\n      <Component\n        key={block.id}\n        id={block.id}\n        type={block.type}\n        data={{ text: excerptText }}\n      />\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 {\n  VisualContentStyles,\n  Paragraph as ParagraphComponent,\n  Header as HeaderComponent,\n  Quote as QuoteComponent,\n  Image as ImageComponent,\n  HTML as HTMLComponent,\n  List as ListComponent,\n}\n\nexport type { VisualContentProps, ImageOptions }\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,2DAAoD;AAqIzC,yBArIJ,eAAK,CAqIa;AApIzB,mEAA0C;AAiI3B,6BAjIR,mBAAS,CAiIiB;AAhIjC,qCAAuC;AACvC,+CAAsC;AACtC,6DAAoC;AA+HxB,0BA/HL,gBAAM,CA+Hc;AA9H3B,2DAAkC;AA+HvB,yBA/HJ,eAAK,CA+Ha;AA9HzB,yDAAgC;AAgItB,wBAhIH,cAAI,CAgIY;AA/HvB,yDAAgC;AAgItB,wBAhIH,cAAI,CAgIY;AA/HvB,2DAAkC;AAgIvB,yBAhIJ,eAAK,CAgIa;AA9HzB,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;IACV,KAAK,EAAE,eAAK;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACC,EAAe,EAAE;IACpC,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,IAA8B,CAAA;KACtC;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAE1D,CAAA;QAEb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAA8B,CAAA;QAErE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACvC,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,GAAG,aAAa;YACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;YACjD,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QAEzC,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,EAAE,IAAI,EAAE,WAAW,EAAE,GAC3B,CACH,CAAA;KACF;IACD,OAAO,CACL,8BAAC,qBAAY,IAAC,SAAS,EAAC,mBAAmB,IACxC,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,CACW,CAChB,CAAA;AACH,CAAC,CAAA;AAxDY,QAAA,aAAa,iBAwDzB","sourcesContent":["import { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Image, { ImageOptions } from './blocks/Image'\nimport Paragraph from './blocks/Paragraph'\nimport { OuterWrapper } from './styles'\nimport React, { useMemo } from 'react'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\nimport Video from './blocks/Video'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n  video: Video,\n}\n\n/**\n * Renders HTML content from data returned by a Visual Editor field on Starlight.\n *\n * The only required prop is `content`, which is the data returned by a Visual\n * Editor field. Additionally, you can provide custom components to render each\n * data block type.\n *\n * You can also pass the `excerpt` boolean prop to only render a portion of the\n * content, which is useful to summarize the content in lists.\n *\n * To learn how to customize the rendered content, take a look at the\n * [Customizing the output](#) guide page.\n *\n * @example Requesting an entry and rendering its content.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Visual\n * Editor field with a key of `post_content` on it.\n *\n * ```jsx\n * import Starlight, { VisualContent } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n *   const [entry, setEntry] = useState(null)\n *\n *   // This is just an example, you could fetch\n *   // the entry any way you want.\n *   useEffect(async () => {\n *     const response = await Starlight.posts.entries.get(slug)\n *\n *     setEntry(response.data)\n *   }, [ slug ])\n *\n *   // After fetching, content will be on the `entry.data.post_content` property.\n *   return (\n *     entry ? (\n *        <article>\n *          <h1>{entry.title}</h1>\n *          <VisualContent content={entry.data.post_content} />\n *        </article>\n *     ) : (\n *       <div>Loading...</div>\n *     )\n *   )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link VisualContentProps} to see the\n * available options.\n * @group VisualContent\n */\nexport const VisualContent = ({\n  content,\n  components = {},\n  excerpt = false,\n  excerptLength = 40,\n}: VisualContentProps): JSX.Element => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null as unknown as JSX.Element\n  }\n\n  if (excerpt) {\n    const block = content.blocks.find((block) => block.type === 'paragraph') as\n      | VisualDataBlock<ParagraphBlock>\n      | undefined\n\n    if (!block || !block.data.text) return null as unknown as JSX.Element\n\n    const text = block.data.text.split(' ')\n    const excerptText =\n      text.length > excerptLength\n        ? text.splice(0, excerptLength).join(' ') + '...'\n        : text.join(' ')\n    const Component = componentList.paragraph\n\n    return (\n      <Component\n        key={block.id}\n        id={block.id}\n        type={block.type}\n        data={{ text: excerptText }}\n      />\n    )\n  }\n  return (\n    <OuterWrapper 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    </OuterWrapper>\n  )\n}\n\nexport {\n  Paragraph as ParagraphComponent,\n  Header as HeaderComponent,\n  Quote as QuoteComponent,\n  Image as ImageComponent,\n  HTML as HTMLComponent,\n  List as ListComponent,\n  Video as VideoComponent,\n}\n\nexport type { VisualContentProps, ImageOptions }\n"]}

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

@@ -1,14 +1,14 @@
 /// <reference types="react" />
-/**
- * Renders a `<style>` tag with rules that style the rendered
- * {@link VisualContent} HTML. While not required for VisualContent to work,
- * using these rules is a quick way to make the content look the same way as it
- * does on the Starlight content editor.
- *
- * You only need to render this component once in your application,
- * preferably in the `<head>` section.
- *
- * @group VisualContent
- */
-export declare const VisualContentStyles: () => JSX.Element;
+export declare const OuterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BlockWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FigureWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";AA6BA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,mBAAmB,QAAO,WAEtC,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,YAAY;;;yGAiExB,CAAA;AAED,eAAO,MAAM,YAAY;;;yGAMxB,CAAA;AAED,eAAO,MAAM,aAAa;;;mGAMzB,CAAA"}

package/dist/cjs/VisualContent/styles.js

@@ -3,47 +3,86 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisualContentStyles = void 0;
-const react_1 = __importDefault(require("react"));
-const styles = `
-  .sl-visual-content *{max-width:100%}
-  .sl-visual-content>figure{margin:1em 0}
-  .sl-list{list-style:none;padding-left:1em}
-  .sl-list>li{margin:.5em 0}
-  .sl-list>li::before{content: "•";margin-right:.5em}
-  .sl__color{padding:2px 0;border-radius:4px}
-  .sl__color__bg--red{background-color:rgb(253,235,236)}
-  .sl__color__bg--pink{background-color:rgb(253,235,236)}
-  .sl__color__bg--purple{background-color:rgb(244,240,247)}
-  .sl__color__bg--blue{background-color:rgb(231,243,248)}
-  .sl__color__bg--green{background-color:rgb(237,243,236)}
-  .sl__color__bg--yellow{background-color:rgb(251,243,219)}
-  .sl__color__bg--orange{background-color:rgb(251,236,221)}
-  .sl__color__bg--brown{background-color:rgb(244,238,238)}
-  .sl__color__bg--gray{background-color:rgb(241,241,239)}
-  .sl__color__text--red{color:rgb(212,76,71)}
-  .sl__color__text--pink{color:rgb(193,76,138)}
-  .sl__color__text--purple{color:rgb(144,101,176)}
-  .sl__color__text--blue{color:rgb(51,126,169)}
-  .sl__color__text--green{color:rgb(68,131,97)}
-  .sl__color__text--yellow{color:rgb(203,145,47)}
-  .sl__color__text--orange{color:rgb(217,115,13)}
-  .sl__color__text--brown{color:rgb(159,107,83)}
-  .sl__color__text--gray{color:rgb(120,119,116)}
+exports.FigureWrapper = exports.BlockWrapper = exports.OuterWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.OuterWrapper = styled_1.default.div `
+  .sl__color {
+    padding: 2px 0;
+    border-radius: 4px;
+
+    &__bg {
+      &--red {
+        background-color: rgb(253, 235, 236);
+      }
+      &--pink {
+        background-color: rgb(253, 235, 236);
+      }
+      &--purple {
+        background-color: rgb(244, 240, 247);
+      }
+      &--blue {
+        background-color: rgb(231, 243, 248);
+      }
+      &--green {
+        background-color: rgb(237, 243, 236);
+      }
+      &--yellow {
+        background-color: rgb(251, 243, 219);
+      }
+      &--orange {
+        background-color: rgb(251, 236, 221);
+      }
+      &--brown {
+        background-color: rgb(244, 238, 238);
+      }
+      &--gray {
+        background-color: rgb(241, 241, 239);
+      }
+    }
+
+    &__text {
+      &--red {
+        color: rgb(212, 76, 71);
+      }
+      &--pink {
+        color: rgb(193, 76, 138);
+      }
+      &--purple {
+        color: rgb(144, 101, 176);
+      }
+      &--blue {
+        color: rgb(51, 126, 169);
+      }
+      &--green {
+        color: rgb(68, 131, 97);
+      }
+      &--yellow {
+        color: rgb(203, 145, 47);
+      }
+      &--orange {
+        color: rgb(217, 115, 13);
+      }
+      &--brown {
+        color: rgb(159, 107, 83);
+      }
+      &--gray {
+        color: rgb(120, 119, 116);
+      }
+    }
+  }
+`;
+exports.BlockWrapper = styled_1.default.div `
+  margin: auto;
+
+  &.sl-width-max {
+    max-width: 100%;
+  }
+`;
+exports.FigureWrapper = styled_1.default.figure `
+  figcaption {
+    display: flex;
+    justify-content: center;
+    margin-top: 6px;
+  }
 `;
-/**
- * Renders a `<style>` tag with rules that style the rendered
- * {@link VisualContent} HTML. While not required for VisualContent to work,
- * using these rules is a quick way to make the content look the same way as it
- * does on the Starlight content editor.
- *
- * You only need to render this component once in your application,
- * preferably in the `<head>` section.
- *
- * @group VisualContent
- */
-const VisualContentStyles = () => {
-    return react_1.default.createElement("style", { dangerouslySetInnerHTML: { __html: styles } });
-};
-exports.VisualContentStyles = VisualContentStyles;
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAyB;AAEzB,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd,CAAA;AAED;;;;;;;;;;GAUG;AACI,MAAM,mBAAmB,GAAG,GAAgB,EAAE;IACnD,OAAO,yCAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAA;AAC/D,CAAC,CAAA;AAFY,QAAA,mBAAmB,uBAE/B","sourcesContent":["import React from 'react'\n\nconst styles = `\n  .sl-visual-content *{max-width:100%}\n  .sl-visual-content>figure{margin:1em 0}\n  .sl-list{list-style:none;padding-left:1em}\n  .sl-list>li{margin:.5em 0}\n  .sl-list>li::before{content: \"•\";margin-right:.5em}\n  .sl__color{padding:2px 0;border-radius:4px}\n  .sl__color__bg--red{background-color:rgb(253,235,236)}\n  .sl__color__bg--pink{background-color:rgb(253,235,236)}\n  .sl__color__bg--purple{background-color:rgb(244,240,247)}\n  .sl__color__bg--blue{background-color:rgb(231,243,248)}\n  .sl__color__bg--green{background-color:rgb(237,243,236)}\n  .sl__color__bg--yellow{background-color:rgb(251,243,219)}\n  .sl__color__bg--orange{background-color:rgb(251,236,221)}\n  .sl__color__bg--brown{background-color:rgb(244,238,238)}\n  .sl__color__bg--gray{background-color:rgb(241,241,239)}\n  .sl__color__text--red{color:rgb(212,76,71)}\n  .sl__color__text--pink{color:rgb(193,76,138)}\n  .sl__color__text--purple{color:rgb(144,101,176)}\n  .sl__color__text--blue{color:rgb(51,126,169)}\n  .sl__color__text--green{color:rgb(68,131,97)}\n  .sl__color__text--yellow{color:rgb(203,145,47)}\n  .sl__color__text--orange{color:rgb(217,115,13)}\n  .sl__color__text--brown{color:rgb(159,107,83)}\n  .sl__color__text--gray{color:rgb(120,119,116)}\n`\n\n/**\n * Renders a `<style>` tag with rules that style the rendered\n * {@link VisualContent} HTML. While not required for VisualContent to work,\n * using these rules is a quick way to make the content look the same way as it\n * does on the Starlight content editor.\n *\n * You only need to render this component once in your application,\n * preferably in the `<head>` section.\n *\n * @group VisualContent\n */\nexport const VisualContentStyles = (): JSX.Element => {\n  return <style dangerouslySetInnerHTML={{ __html: styles }} />\n}\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/VisualContent/styles.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAoC;AAEvB,QAAA,YAAY,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiErC,CAAA;AAEY,QAAA,YAAY,GAAG,gBAAM,CAAC,GAAG,CAAA;;;;;;CAMrC,CAAA;AAEY,QAAA,aAAa,GAAG,gBAAM,CAAC,MAAM,CAAA;;;;;;CAMzC,CAAA","sourcesContent":["import styled from '@emotion/styled'\n\nexport const OuterWrapper = styled.div`\n  .sl__color {\n    padding: 2px 0;\n    border-radius: 4px;\n\n    &__bg {\n      &--red {\n        background-color: rgb(253, 235, 236);\n      }\n      &--pink {\n        background-color: rgb(253, 235, 236);\n      }\n      &--purple {\n        background-color: rgb(244, 240, 247);\n      }\n      &--blue {\n        background-color: rgb(231, 243, 248);\n      }\n      &--green {\n        background-color: rgb(237, 243, 236);\n      }\n      &--yellow {\n        background-color: rgb(251, 243, 219);\n      }\n      &--orange {\n        background-color: rgb(251, 236, 221);\n      }\n      &--brown {\n        background-color: rgb(244, 238, 238);\n      }\n      &--gray {\n        background-color: rgb(241, 241, 239);\n      }\n    }\n\n    &__text {\n      &--red {\n        color: rgb(212, 76, 71);\n      }\n      &--pink {\n        color: rgb(193, 76, 138);\n      }\n      &--purple {\n        color: rgb(144, 101, 176);\n      }\n      &--blue {\n        color: rgb(51, 126, 169);\n      }\n      &--green {\n        color: rgb(68, 131, 97);\n      }\n      &--yellow {\n        color: rgb(203, 145, 47);\n      }\n      &--orange {\n        color: rgb(217, 115, 13);\n      }\n      &--brown {\n        color: rgb(159, 107, 83);\n      }\n      &--gray {\n        color: rgb(120, 119, 116);\n      }\n    }\n  }\n`\n\nexport const BlockWrapper = styled.div`\n  margin: auto;\n\n  &.sl-width-max {\n    max-width: 100%;\n  }\n`\n\nexport const FigureWrapper = styled.figure`\n  figcaption {\n    display: flex;\n    justify-content: center;\n    margin-top: 6px;\n  }\n`\n"]}

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

@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { HeaderBlock, ImageBlock, ParagraphBlock, QuoteBlock, VisualData, VisualDataBlock, BlockType, HTMLBlock, ListBlock } from '@starlightcms/js-sdk';
+import { HeaderBlock, ImageBlock, ParagraphBlock, QuoteBlock, VisualData, VisualDataBlock, BlockType, HTMLBlock, ListBlock, VideoBlock } 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>>;
@@ -8,6 +8,7 @@ export interface BlockComponents extends Implements<Record<BlockType, unknown>,
     image: ComponentType<VisualDataBlock<ImageBlock>>;
     raw: ComponentType<VisualDataBlock<HTMLBlock>>;
     list: ComponentType<VisualDataBlock<ListBlock>>;
+    video: ComponentType<VisualDataBlock<VideoBlock>>;
 }
 /**
  * Props accepted by the {@link VisualContent} component.

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,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;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB"}
+{"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,EACT,UAAU,EACX,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;IAC/C,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;CAClD;AAED;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IACrC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB"}

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  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\n/**\n * Props accepted by the {@link VisualContent} component.\n * @group VisualContent\n */\nexport interface VisualContentProps {\n  /**\n   * The content to render. It should be the object returned by\n   * Starlight on a Visual Editor field. Required.\n   */\n  content?: VisualData\n  /**\n   * An optional object of React components. You can pass any\n   * number of replacement components that will render blocks of a given type.\n   */\n  components?: Partial<BlockComponents>\n  /**\n   * If true, only a small portion of the content will be rendered,\n   * and block types other than text paragraphs will be ignored. Defaults to false.\n   */\n  excerpt?: boolean\n  /**\n   * Defines the maximum number of words to render when\n   * excerpt is true. Defaults to 40.\n   */\n  excerptLength?: number\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  VideoBlock,\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  video: ComponentType<VisualDataBlock<VideoBlock>>\n}\n\n/**\n * Props accepted by the {@link VisualContent} component.\n * @group VisualContent\n */\nexport interface VisualContentProps {\n  /**\n   * The content to render. It should be the object returned by\n   * Starlight on a Visual Editor field. Required.\n   */\n  content?: VisualData\n  /**\n   * An optional object of React components. You can pass any\n   * number of replacement components that will render blocks of a given type.\n   */\n  components?: Partial<BlockComponents>\n  /**\n   * If true, only a small portion of the content will be rendered,\n   * and block types other than text paragraphs will be ignored. Defaults to false.\n   */\n  excerpt?: boolean\n  /**\n   * Defines the maximum number of words to render when\n   * excerpt is true. Defaults to 40.\n   */\n  excerptLength?: number\n}\n"]}

package/dist/esm/VisualContent/blocks/{HTML.d.ts → HTML/index.d.ts}

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+import { FC } from 'react';
 /**
  * VisualContent renderer component that renders `raw` type blocks
  * as inline HTML inside a `div` element.
@@ -13,4 +13,4 @@ import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk';
  */
 declare const HTML: FC<VisualDataBlock<HTMLBlock>>;
 export default HTML;
-//# sourceMappingURL=HTML.d.ts.map
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/VisualContent/blocks/{HTML.js → HTML/index.js}

@@ -1,3 +1,5 @@
+import { BlockWrapper } from '../../styles';
+import { HTMLWrapper } from './styles';
 import React from 'react';
 /**
  * VisualContent renderer component that renders `raw` type blocks
@@ -11,7 +13,8 @@ import React from 'react';
  * @group VisualContent Renderers
  */
 const HTML = ({ data }) => {
-    return (React.createElement("div", { className: "sl-content-block sl-html test", dangerouslySetInnerHTML: { __html: data.html } }));
+    return (React.createElement(BlockWrapper, { className: "sl-content-block sl-html" },
+        React.createElement(HTMLWrapper, { dangerouslySetInnerHTML: { __html: data.html } })));
 };
 export default HTML;
-//# sourceMappingURL=HTML.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,CACL,oBAAC,YAAY,IAAC,SAAS,EAAC,0BAA0B;QAChD,oBAAC,WAAW,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CAClD,CAChB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA","sourcesContent":["import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport { BlockWrapper } from '../../styles'\nimport { HTMLWrapper } from './styles'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `raw` type blocks\n * as inline HTML inside a `div` element.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link HTMLBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst HTML: FC<VisualDataBlock<HTMLBlock>> = ({ data }) => {\n  return (\n    <BlockWrapper className=\"sl-content-block sl-html\">\n      <HTMLWrapper dangerouslySetInnerHTML={{ __html: data.html }} />\n    </BlockWrapper>\n  )\n}\n\nexport default HTML\n"]}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const HTMLWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,WAAW;;;yGAIvB,CAAA"}

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

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+export const HTMLWrapper = styled.div `
+  > * {
+    max-width: 100%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIpC,CAAA","sourcesContent":["import styled from '@emotion/styled'\n\nexport const HTMLWrapper = styled.div`\n  > * {\n    max-width: 100%;\n  }\n`\n"]}

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":";AACA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEnE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,aAAc,gBAAgB,WAAW,CAAC,KAAG,WASxD,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAInE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,aAAc,gBAAgB,WAAW,CAAC,KAAG,WAQxD,CAAA;AAED,eAAe,MAAM,CAAA"}

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

@@ -1,3 +1,4 @@
+import { BlockWrapper } from '../styles';
 import React from 'react';
 /**
  * VisualContent renderer component that renders `header` type blocks
@@ -12,7 +13,8 @@ import React from 'react';
  */
 const Header = ({ data }) => {
     const HeaderComponent = `h${data.level}`;
-    return (React.createElement(HeaderComponent, { className: "sl-content-block sl-header", dangerouslySetInnerHTML: { __html: data.text } }));
+    return (React.createElement(BlockWrapper, { className: "sl-content-block sl-header" },
+        React.createElement(HeaderComponent, { dangerouslySetInnerHTML: { __html: data.text } })));
 };
 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,MAAM,OAAO,CAAA;AAGzB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAgC,EAAe,EAAE;IACrE,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 from 'react'\nimport { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\n/**\n * VisualContent renderer component that renders `header` type blocks\n * as HTML heading elements, like `<h1>`, `<h2>`, and so on.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link HeaderBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Header = ({ data }: VisualDataBlock<HeaderBlock>): JSX.Element => {\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"]}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAgC,EAAe,EAAE;IACrE,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,oBAAC,YAAY,IAAC,SAAS,EAAC,4BAA4B;QAClD,oBAAC,eAAe,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CACtD,CAChB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA","sourcesContent":["import { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport { BlockWrapper } from '../styles'\nimport React from 'react'\n\n/**\n * VisualContent renderer component that renders `header` type blocks\n * as HTML heading elements, like `<h1>`, `<h2>`, and so on.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link HeaderBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Header = ({ data }: VisualDataBlock<HeaderBlock>): JSX.Element => {\n  const HeaderComponent = `h${data.level}` as 'h1'\n\n  return (\n    <BlockWrapper className=\"sl-content-block sl-header\">\n      <HeaderComponent dangerouslySetInnerHTML={{ __html: data.text }} />\n    </BlockWrapper>\n  )\n}\n\nexport default Header\n"]}

package/dist/{cjs/VisualContent/blocks/Image.d.ts → esm/VisualContent/blocks/Image/index.d.ts}

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+import { FC } from 'react';
 /**
  * Type used by {@link ImageComponent} to accept a `sizes` prop.
  */
@@ -25,4 +25,4 @@ export declare type ImageOptions = {
  */
 declare const Image: FC<VisualDataBlock<ImageBlock> & ImageOptions>;
 export default Image;
-//# sourceMappingURL=Image.d.ts.map
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAClE,OAAc,EAAE,EAAE,EAAgC,MAAM,OAAO,CAAA;AAI/D;;GAEG;AACH,oBAAY,YAAY,GAAG;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,GAAG,YAAY,CA8DzD,CAAA;AAED,eAAe,KAAK,CAAA"}

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

@@ -0,0 +1,45 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { ImageWrapper, SelectedImage } from './styles';
+import { BlockWrapper } from '../../styles';
+/**
+ * VisualContent renderer component that renders `image` type blocks
+ * as a responsive image along with its caption (if defined). Optionally
+ * wraps the image in an anchor if a link is defined in the content.
+ *
+ * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
+ * to learn how to customize block renderer components like this one.
+ *
+ * This component also supports an optional `sizes` prop to provide better image
+ * responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}
+ * to learn more.
+ *
+ * @param props VisualDataBlock object. See {@link ImageBlock} to learn the
+ * type of data this component receives. Also accepts
+ * an optional `sizes` string prop.
+ * @group VisualContent Renderers
+ */
+const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
+    const { url, alt = '', files, caption, width, href, responsive } = data;
+    const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
+    const [target, setTarget] = useState('_self');
+    const [originalWidth, setOriginalWidth] = useState(undefined);
+    const srcSet = useMemo(() => {
+        return data.files.map((file) => `${file.url} ${file.width}w`).join(', ');
+    }, [data]);
+    useEffect(() => {
+        if (!href)
+            return;
+        setTarget(new URL(href).origin === window.location.origin ? '_self' : '_blank');
+    }, [href]);
+    useEffect(() => {
+        const optimizedFile = files.find((f) => f.variation === 'optimized');
+        setOriginalWidth(optimizedFile ? optimizedFile.width.toString() + 'px' : undefined);
+    }, []);
+    return (React.createElement(BlockWrapper, { className: `sl-content-block sl-image sl-width-${widthType}` },
+        React.createElement(ImageWrapper, null,
+            href ? (React.createElement("a", { href: href, target: target },
+                React.createElement(SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined }))) : (React.createElement(SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined })),
+            caption && (React.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
+};
+export default Image;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAM,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAS3C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,KAAK,GAAmD,CAAC,EAC7D,IAAI,EACJ,KAAK,GAAG,+BAA+B,GACxC,EAAE,EAAE;IACH,MAAM,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,IAAI,CAAA;IAEvE,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAE9E,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;IAC7C,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAChD,SAAS,CACV,CAAA;IAED,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,OAAO,IAAI,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,CAAA;IAC1E,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,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,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,KAAK,WAAW,CAAC,CAAA;QACpE,gBAAgB,CACd,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC,SAAS,CAClE,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,oBAAC,YAAY,IAAC,SAAS,EAAE,sCAAsC,SAAS,EAAE;QACxE,oBAAC,YAAY;YACV,IAAI,CAAC,CAAC,CAAC,CACN,2BAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM;gBAC3B,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACrC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,GAC1D,CACA,CACL,CAAC,CAAC,CAAC,CACF,oBAAC,aAAa,IACZ,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACrC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,GAC1D,CACH;YACA,OAAO,IAAI,CACV,oCAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7D,CACY,CACF,CAChB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA","sourcesContent":["import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC, useEffect, useMemo, useState } from 'react'\nimport { ImageWrapper, SelectedImage } from './styles'\nimport { BlockWrapper } from '../../styles'\n\n/**\n * Type used by {@link ImageComponent} to accept a `sizes` prop.\n */\nexport type ImageOptions = {\n  sizes?: string\n}\n\n/**\n * VisualContent renderer component that renders `image` type blocks\n * as a responsive image along with its caption (if defined). Optionally\n * wraps the image in an anchor if a link is defined in the content.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * This component also supports an optional `sizes` prop to provide better image\n * responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}\n * to learn more.\n *\n * @param props VisualDataBlock object. See {@link ImageBlock} to learn the\n * type of data this component receives. Also accepts\n * an optional `sizes` string prop.\n * @group VisualContent Renderers\n */\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n  data,\n  sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n  const { url, alt = '', files, caption, width, href, responsive } = data\n\n  const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n  const [target, setTarget] = useState('_self')\n  const [originalWidth, setOriginalWidth] = useState<string | undefined>(\n    undefined\n  )\n\n  const srcSet = useMemo(() => {\n    return data.files.map((file) => `${file.url} ${file.width}w`).join(', ')\n  }, [data])\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    const optimizedFile = files.find((f) => f.variation === 'optimized')\n    setOriginalWidth(\n      optimizedFile ? optimizedFile.width.toString() + 'px' : undefined\n    )\n  }, [])\n\n  return (\n    <BlockWrapper className={`sl-content-block sl-image sl-width-${widthType}`}>\n      <ImageWrapper>\n        {href ? (\n          <a href={href} target={target}>\n            <SelectedImage\n              width={width}\n              src={url}\n              alt={alt}\n              srcSet={srcSet}\n              sizes={responsive ? sizes : undefined}\n              originalWidth={data.responsive ? originalWidth : undefined}\n            />\n          </a>\n        ) : (\n          <SelectedImage\n            width={width}\n            src={url}\n            alt={alt}\n            srcSet={srcSet}\n            sizes={responsive ? sizes : undefined}\n            originalWidth={data.responsive ? originalWidth : undefined}\n          />\n        )}\n        {caption && (\n          <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n        )}\n      </ImageWrapper>\n    </BlockWrapper>\n  )\n}\n\nexport default Image\n"]}

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").ClassAttributes<HTMLElement> & import("react").HTMLAttributes<HTMLElement> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+declare type ImageProps = {
+    width: string;
+    originalWidth?: string | undefined;
+};
+export declare const SelectedImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ImageProps, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,YAAY;;;;;;;UAExB,CAAA;AAED,aAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CACnC,CAAA;AAED,eAAO,MAAM,aAAa;;;6HA4BzB,CAAA"}

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

@@ -0,0 +1,35 @@
+import { FigureWrapper } from '../../styles';
+import styled from '@emotion/styled';
+export const ImageWrapper = styled(FigureWrapper) `
+  margin: 1em auto;
+`;
+export const SelectedImage = styled.img `
+  display: block;
+  margin: auto;
+  object-fit: cover;
+
+  max-width: ${({ width, originalWidth }) => {
+    if (originalWidth && width === 'auto')
+        return originalWidth;
+    switch (width) {
+        case 'auto':
+            return '100%';
+        case 'justify':
+        case 'max':
+            return 'initial';
+    }
+}};
+
+  width: ${({ width }) => {
+    switch (width) {
+        case 'auto':
+            return 'initial';
+        case 'justify':
+        case 'max':
+            return '100%';
+        default:
+            return width;
+    }
+}};
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;;CAEhD,CAAA;AAOD,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAY;;;;;eAKpC,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE;IACxC,IAAI,aAAa,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,aAAa,CAAA;IAE3D,QAAQ,KAAK,EAAE;QACb,KAAK,MAAM;YACT,OAAO,MAAM,CAAA;QACf,KAAK,SAAS,CAAC;QACf,KAAK,KAAK;YACR,OAAO,SAAS,CAAA;KACnB;AACH,CAAC;;WAEQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACrB,QAAQ,KAAK,EAAE;QACb,KAAK,MAAM;YACT,OAAO,SAAS,CAAA;QAClB,KAAK,SAAS,CAAC;QACf,KAAK,KAAK;YACR,OAAO,MAAM,CAAA;QACf;YACE,OAAO,KAAK,CAAA;KACf;AACH,CAAC;CACF,CAAA","sourcesContent":["import { FigureWrapper } from '../../styles'\nimport styled from '@emotion/styled'\n\nexport const ImageWrapper = styled(FigureWrapper)`\n  margin: 1em auto;\n`\n\ntype ImageProps = {\n  width: string\n  originalWidth?: string | undefined\n}\n\nexport const SelectedImage = styled.img<ImageProps>`\n  display: block;\n  margin: auto;\n  object-fit: cover;\n\n  max-width: ${({ width, originalWidth }) => {\n    if (originalWidth && width === 'auto') return originalWidth\n\n    switch (width) {\n      case 'auto':\n        return '100%'\n      case 'justify':\n      case 'max':\n        return 'initial'\n    }\n  }};\n\n  width: ${({ width }) => {\n    switch (width) {\n      case 'auto':\n        return 'initial'\n      case 'justify':\n      case 'max':\n        return '100%'\n      default:\n        return width\n    }\n  }};\n`\n"]}

package/dist/{cjs/VisualContent/blocks/List.d.ts → esm/VisualContent/blocks/List/index.d.ts}

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { ListBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+import { FC } from 'react';
 /**
  * VisualContent renderer component that renders `list` type blocks
  * as `<ul>` or `<ol>` elements, depending on the list style.
@@ -13,4 +13,4 @@ import { ListBlock, VisualDataBlock } from '@starlightcms/js-sdk';
  */
 declare const List: FC<VisualDataBlock<ListBlock>>;
 export default List;
-//# sourceMappingURL=List.d.ts.map
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/esm/VisualContent/blocks/{List.js → List/index.js}

@@ -1,3 +1,5 @@
+import { BlockWrapper } from '../../styles';
+import { ListWrapper } from './styles';
 import React from 'react';
 const SubList = ({ item, Wrapper }) => {
     return (React.createElement("li", null,
@@ -17,8 +19,9 @@ const SubList = ({ item, Wrapper }) => {
  * @group VisualContent Renderers
  */
 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 })))));
+    const listElement = data.style === 'ordered' ? 'ol' : 'ul';
+    return (React.createElement(BlockWrapper, { className: "sl-content-block sl-list" },
+        React.createElement(ListWrapper, { as: listElement, className: "sl-list__root" }, data.items.map((item, index) => (React.createElement(SubList, { key: index, item: item, Wrapper: listElement }))))));
 };
 export default List;
-//# sourceMappingURL=List.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,KAAa,MAAM,OAAO,CAAA;AAOjC,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;;;;;;;;;;GAUG;AACH,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,YAAY,IAAC,SAAS,EAAC,0BAA0B;QAChD,oBAAC,WAAW,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,eAAe,IACpD,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,CACD,CAChB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA","sourcesContent":["import { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\nimport { BlockWrapper } from '../../styles'\nimport { ListWrapper } from './styles'\nimport React, { FC } from 'react'\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\n/**\n * VisualContent renderer component that renders `list` type blocks\n * as `<ul>` or `<ol>` elements, depending on the list style.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * @param props VisualDataBlock object. See {@link ListBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n  const listElement = data.style === 'ordered' ? 'ol' : 'ul'\n\n  return (\n    <BlockWrapper className=\"sl-content-block sl-list\">\n      <ListWrapper as={listElement} className=\"sl-list__root\">\n        {data.items.map((item, index) => (\n          <SubList key={index} item={item} Wrapper={listElement} />\n        ))}\n      </ListWrapper>\n    </BlockWrapper>\n  )\n}\n\nexport default List\n"]}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const ListWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/styles.ts"],"names":[],"mappings":";AAEA,eAAO,MAAM,WAAW;;;6GAYvB,CAAA"}