@starlightcms/react-sdk 1.1.0 → 2.0.0

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+import { FC } from 'react';
 /**
  * VisualContent renderer component that renders `paragraph` type blocks
  * as `<p>` elements. Empty paragraph blocks (generally used to break

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,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAclD,CAAA;AAED,eAAe,SAAS,CAAA"}
+{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAEtE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAelD,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -1,3 +1,4 @@
+import { BlockWrapper } from '../styles';
 import React from 'react';
 /**
  * VisualContent renderer component that renders `paragraph` type blocks
@@ -13,9 +14,11 @@ import React from 'react';
  */
 const Paragraph = ({ data }) => {
     if (!data.text)
-        return (React.createElement("p", { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
-            React.createElement("br", null)));
-    return (React.createElement("p", { className: "sl-content-block sl-paragraph", dangerouslySetInnerHTML: { __html: data.text } }));
+        return (React.createElement(BlockWrapper, { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
+            React.createElement("p", null,
+                React.createElement("br", null))));
+    return (React.createElement(BlockWrapper, { className: "sl-content-block sl-paragraph" },
+        React.createElement("p", { dangerouslySetInnerHTML: { __html: data.text } })));
 };
 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,KAAa,MAAM,OAAO,CAAA;AAGjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,2BAAG,SAAS,EAAC,qCAAqC;YAChD,+BAAM,CACJ,CACL,CAAA;IAEH,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\n/**\n * VisualContent renderer component that renders `paragraph` type blocks\n * as `<p>` elements. Empty paragraph blocks (generally used to break\n * lines) will have an `empty` class added to them.\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 ParagraphBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n  if (!data.text)\n    return (\n      <p className=\"sl-content-block sl-paragraph empty\" aria-hidden>\n        <br />\n      </p>\n    )\n\n  return (\n    <p\n      className=\"sl-content-block sl-paragraph\"\n      dangerouslySetInnerHTML={{ __html: data.text }}\n    />\n  )\n}\n\nexport default Paragraph\n"]}
+{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,oBAAC,YAAY,IAAC,SAAS,EAAC,qCAAqC;YAC3D;gBACE,+BAAM,CACJ,CACS,CAChB,CAAA;IAEH,OAAO,CACL,oBAAC,YAAY,IAAC,SAAS,EAAC,+BAA+B;QACrD,2BAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CACxC,CAChB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA","sourcesContent":["import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport { BlockWrapper } from '../styles'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `paragraph` type blocks\n * as `<p>` elements. Empty paragraph blocks (generally used to break\n * lines) will have an `empty` class added to them.\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 ParagraphBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n  if (!data.text)\n    return (\n      <BlockWrapper className=\"sl-content-block sl-paragraph empty\" aria-hidden>\n        <p>\n          <br />\n        </p>\n      </BlockWrapper>\n    )\n\n  return (\n    <BlockWrapper className=\"sl-content-block sl-paragraph\">\n      <p dangerouslySetInnerHTML={{ __html: data.text }} />\n    </BlockWrapper>\n  )\n}\n\nexport default Paragraph\n"]}

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

@@ -1,5 +1,5 @@
-import { FC } from 'react';
 import { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+import { FC } from 'react';
 /**
  * VisualContent renderer component that renders `quote` type blocks
  * as `<blockquote>` elements.

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,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAI1C,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAElE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAM1C,CAAA;AAED,eAAe,KAAK,CAAA"}

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

@@ -1,3 +1,4 @@
+import { BlockWrapper } from '../styles';
 import React from 'react';
 /**
  * VisualContent renderer component that renders `quote` type blocks
@@ -11,7 +12,8 @@ import React from 'react';
  * @group VisualContent Renderers
  */
 const Quote = ({ data }) => {
-    return (React.createElement("blockquote", { className: "sl-content-block sl-quote" }, data.text));
+    return (React.createElement(BlockWrapper, { className: "sl-content-block sl-quote" },
+        React.createElement("blockquote", null, data.text)));
 };
 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,KAAa,MAAM,OAAO,CAAA;AAGjC;;;;;;;;;;GAUG;AACH,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\n/**\n * VisualContent renderer component that renders `quote` type blocks\n * as `<blockquote>` elements.\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 QuoteBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\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"]}
+{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,oBAAC,YAAY,IAAC,SAAS,EAAC,2BAA2B;QACjD,wCAAa,IAAI,CAAC,IAAI,CAAc,CACvB,CAChB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA","sourcesContent":["import { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport { BlockWrapper } from '../styles'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `quote` type blocks\n * as `<blockquote>` elements.\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 QuoteBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Quote: FC<VisualDataBlock<QuoteBlock>> = ({ data }) => {\n  return (\n    <BlockWrapper className=\"sl-content-block sl-quote\">\n      <blockquote>{data.text}</blockquote>\n    </BlockWrapper>\n  )\n}\n\nexport default Quote\n"]}

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

@@ -0,0 +1,16 @@
+import { VideoBlock, VisualDataBlock } from '@starlightcms/js-sdk';
+import { FC } from 'react';
+/**
+ * VisualContent renderer component that renders `video` type blocks
+ * as a responsive video along with its caption (if defined).
+ *
+ * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
+ * to learn how to customize block renderer components like this one.
+ *
+ * @param props VisualDataBlock object. See {@link VideoBlock} to learn the
+ * type of data this component receives.
+ * @group VisualContent Renderers
+ */
+declare const Video: FC<VisualDataBlock<VideoBlock>>;
+export default Video;
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,24 @@
+import { BlockWrapper } from '../../styles';
+import { VideoWrapper } from './styles';
+import React from 'react';
+/**
+ * VisualContent renderer component that renders `video` type blocks
+ * as a responsive video along with its caption (if defined).
+ *
+ * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}
+ * to learn how to customize block renderer components like this one.
+ *
+ * @param props VisualDataBlock object. See {@link VideoBlock} to learn the
+ * type of data this component receives.
+ * @group VisualContent Renderers
+ */
+const Video = ({ data }) => {
+    const { html, width, caption } = data;
+    const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
+    return (React.createElement(BlockWrapper, { className: `sl-content-block sl-video sl-width-${widthType}` },
+        React.createElement(VideoWrapper, { width: width },
+            React.createElement("div", { dangerouslySetInnerHTML: { __html: html } }),
+            caption && (React.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
+};
+export default Video;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;IAErC,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,OAAO,CACL,oBAAC,YAAY,IAAC,SAAS,EAAE,sCAAsC,SAAS,EAAE;QACxE,oBAAC,YAAY,IAAC,KAAK,EAAE,KAAK;YACxB,6BAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI;YAEjD,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 { VideoBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport { BlockWrapper } from '../../styles'\nimport { VideoWrapper } from './styles'\nimport React, { FC } from 'react'\n\n/**\n * VisualContent renderer component that renders `video` type blocks\n * as a responsive video along with its caption (if defined).\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 VideoBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Video: FC<VisualDataBlock<VideoBlock>> = ({ data }) => {\n  const { html, width, caption } = data\n\n  const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n  return (\n    <BlockWrapper className={`sl-content-block sl-video sl-width-${widthType}`}>\n      <VideoWrapper width={width}>\n        <div dangerouslySetInnerHTML={{ __html: html }} />\n\n        {caption && (\n          <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n        )}\n      </VideoWrapper>\n    </BlockWrapper>\n  )\n}\n\nexport default Video\n"]}

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+declare type VideoWrapperProps = {
+    width: string | null;
+};
+export declare const VideoWrapper: 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;
+} & VideoWrapperProps, {}, {}>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/styles.ts"],"names":[],"mappings":";AAGA,aAAK,iBAAiB,GAAG;IACvB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;8BA+BxB,CAAA"}

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

@@ -0,0 +1,35 @@
+import { FigureWrapper } from '../../styles';
+import styled from '@emotion/styled';
+export const VideoWrapper = styled(FigureWrapper) `
+  margin: 0;
+
+  > div {
+    > * {
+      max-width: 100%;
+    }
+
+    > iframe {
+      display: block;
+      margin: auto;
+
+      aspect-ratio: 16/9;
+
+      border: none;
+
+      background-color: transparent;
+
+      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/Video/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAC5C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAMpC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,aAAa,CAAC,CAAmB;;;;;;;;;;;;;;;;;;eAkBrD,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;;;CAGN,CAAA","sourcesContent":["import { FigureWrapper } from '../../styles'\nimport styled from '@emotion/styled'\n\ntype VideoWrapperProps = {\n  width: string | null\n}\n\nexport const VideoWrapper = styled(FigureWrapper)<VideoWrapperProps>`\n  margin: 0;\n\n  > div {\n    > * {\n      max-width: 100%;\n    }\n\n    > iframe {\n      display: block;\n      margin: auto;\n\n      aspect-ratio: 16/9;\n\n      border: none;\n\n      background-color: transparent;\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  }\n`\n"]}

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 import { VisualContentProps } from './types';
-import { VisualContentStyles } from './styles';
+import Image, { ImageOptions } from './blocks/Image';
 import Paragraph from './blocks/Paragraph';
 import Header from './blocks/Header';
 import Quote from './blocks/Quote';
-import Image, { ImageOptions } from './blocks/Image';
 import HTML from './blocks/HTML';
 import List from './blocks/List';
+import Video from './blocks/Video';
 /**
  * Renders HTML content from data returned by a Visual Editor field on Starlight.
  *
@@ -59,6 +59,6 @@ import List from './blocks/List';
  * @group VisualContent
  */
 export declare const VisualContent: ({ content, components, excerpt, excerptLength, }: VisualContentProps) => JSX.Element;
-export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
+export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, Video as VideoComponent, };
 export type { VisualContentProps, ImageOptions };
 //# 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":";AAEA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,qDAKvB,kBAAkB,KAAG,WAmDvB,CAAA;AAED,OAAO,EACL,mBAAmB,EACnB,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,GACtB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAG1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,qDAKvB,kBAAkB,KAAG,WAmDvB,CAAA;AAED,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,EACrB,KAAK,IAAI,cAAc,GACxB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}

package/dist/esm/VisualContent/index.js

@@ -1,11 +1,12 @@
-import React, { useMemo } from 'react';
-import { VisualContentStyles } from './styles';
+import Image from './blocks/Image';
 import Paragraph from './blocks/Paragraph';
+import { OuterWrapper } from './styles';
+import React, { useMemo } from 'react';
 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';
+import Video from './blocks/Video';
 const defaultComponents = {
     paragraph: Paragraph,
     header: Header,
@@ -13,6 +14,7 @@ const defaultComponents = {
     image: Image,
     raw: HTML,
     list: List,
+    video: Video,
 };
 /**
  * Renders HTML content from data returned by a Visual Editor field on Starlight.
@@ -81,12 +83,12 @@ export const VisualContent = ({ content, components = {}, excerpt = false, excer
         const Component = componentList.paragraph;
         return (React.createElement(Component, { key: block.id, id: block.id, type: block.type, data: { text: excerptText } }));
     }
-    return (React.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block) => {
+    return (React.createElement(OuterWrapper, { className: "sl-visual-content" }, content.blocks.map((block) => {
         const Component = componentList[block.type];
         if (!Component)
             return null;
         return (React.createElement(Component, { key: block.id, id: block.id, type: block.type, data: block.data }));
     })));
 };
-export { VisualContentStyles, Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
+export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, Video as VideoComponent, };
 //# 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":"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","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,OAAO,KAAuB,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,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;IACZ,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,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,OAAO,CAC3B,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,oBAAC,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,oBAAC,YAAY,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,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,CACW,CAChB,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,EACrB,KAAK,IAAI,cAAc,GACxB,CAAA","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/esm/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/esm/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/esm/VisualContent/styles.js

@@ -1,42 +1,82 @@
-import React from '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)}
+import styled from '@emotion/styled';
+export const OuterWrapper = styled.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);
+      }
+    }
+  }
+`;
+export const BlockWrapper = styled.div `
+  margin: auto;
+
+  &.sl-width-max {
+    max-width: 100%;
+  }
+`;
+export const FigureWrapper = styled.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
- */
-export const VisualContentStyles = () => {
-    return React.createElement("style", { dangerouslySetInnerHTML: { __html: styles } });
-};
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/VisualContent/styles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;CAyBd,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAgB,EAAE;IACnD,OAAO,+BAAO,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,GAAI,CAAA;AAC/D,CAAC,CAAA","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,OAAO,MAAM,MAAM,iBAAiB,CAAA;AAEpC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiErC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMrC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,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/esm/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/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,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/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  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starlightcms/react-sdk",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "The Starlight SDK for React",
   "workspaces": [
     "website"
@@ -60,7 +60,9 @@
     ]
   },
   "dependencies": {
-    "@starlightcms/js-sdk": "^1.1.0"
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@starlightcms/js-sdk": "^2.0.1"
   },
   "peerDependencies": {
     "react": ">=16.0.0"

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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAOxC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC;;;;;;;;;;GAUG;AACH,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\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    <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/Image.d.ts.map

@@ -1 +0,0 @@
-{"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;;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,CA8CzD,CAAA;AAED,eAAe,KAAK,CAAA"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Image.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAsD;AAUtD;;;;;;;;;;;;;;;;GAgBG;AACH,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\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, 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.map

@@ -1 +0,0 @@
-{"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;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAUxC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;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,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\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 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/HTML.d.ts.map

@@ -1 +0,0 @@
-{"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;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAOxC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"HTML.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/HTML.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AAGjC;;;;;;;;;;GAUG;AACH,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\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    <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/Image.d.ts.map

@@ -1 +0,0 @@
-{"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;;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,CA8CzD,CAAA;AAED,eAAe,KAAK,CAAA"}