@starlightcms/react-sdk 1.1.0 → 2.0.0

package/dist/cjs/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/cjs/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/cjs/VisualContent/blocks/{HTML.js → HTML/index.js}

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const styles_1 = require("../../styles");
+const styles_2 = require("./styles");
 const react_1 = __importDefault(require("react"));
 /**
  * VisualContent renderer component that renders `raw` type blocks
@@ -16,7 +18,8 @@ const react_1 = __importDefault(require("react"));
  * @group VisualContent Renderers
  */
 const HTML = ({ data }) => {
-    return (react_1.default.createElement("div", { className: "sl-content-block sl-html test", dangerouslySetInnerHTML: { __html: data.html } }));
+    return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-html" },
+        react_1.default.createElement(styles_2.HTMLWrapper, { dangerouslySetInnerHTML: { __html: data.html } })));
 };
 exports.default = HTML;
-//# sourceMappingURL=HTML.js.map
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,yCAA2C;AAC3C,qCAAsC;AACtC,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,OAAO,CACL,8BAAC,qBAAY,IAAC,SAAS,EAAC,0BAA0B;QAChD,8BAAC,oBAAW,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CAClD,CAChB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,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/cjs/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/cjs/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/cjs/VisualContent/blocks/HTML/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.HTMLWrapper = styled_1.default.div `
+  > * {
+    max-width: 100%;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/cjs/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,6DAAoC;AAEvB,QAAA,WAAW,GAAG,gBAAM,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/cjs/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/cjs/VisualContent/blocks/Header.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const styles_1 = require("../styles");
 const react_1 = __importDefault(require("react"));
 /**
  * VisualContent renderer component that renders `header` type blocks
@@ -17,7 +18,8 @@ const react_1 = __importDefault(require("react"));
  */
 const Header = ({ data }) => {
     const HeaderComponent = `h${data.level}`;
-    return (react_1.default.createElement(HeaderComponent, { className: "sl-content-block sl-header", dangerouslySetInnerHTML: { __html: data.text } }));
+    return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-header" },
+        react_1.default.createElement(HeaderComponent, { dangerouslySetInnerHTML: { __html: data.text } })));
 };
 exports.default = Header;
 //# sourceMappingURL=Header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAyB;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,8BAAC,eAAe,IACd,SAAS,EAAC,4BAA4B,EACtC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,MAAM,CAAA","sourcesContent":["import React 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,sCAAwC;AACxC,kDAAyB;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,8BAAC,qBAAY,IAAC,SAAS,EAAC,4BAA4B;QAClD,8BAAC,eAAe,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CACtD,CAChB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,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/{esm/VisualContent/blocks/Image.d.ts → cjs/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/cjs/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,EAAuB,MAAM,OAAO,CAAA;AAItD;;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,CAoDzD,CAAA;AAED,eAAe,KAAK,CAAA"}

package/dist/cjs/VisualContent/blocks/{Image.js → Image/index.js}

@@ -24,6 +24,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
+const styles_1 = require("./styles");
+const styles_2 = require("../../styles");
 /**
  * VisualContent renderer component that renders `image` type blocks
  * as a responsive image along with its caption (if defined). Optionally
@@ -42,23 +44,24 @@ const react_1 = __importStar(require("react"));
  * @group VisualContent Renderers
  */
 const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
-    const { url, files, alt = '', caption, href } = data;
+    const { url, files, alt = '', caption, width, href } = data;
     const [target, setTarget] = (0, react_1.useState)('_self');
     const [srcSet, setSrcSet] = (0, react_1.useState)('');
+    const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
     (0, react_1.useEffect)(() => {
         if (!href)
             return;
         setTarget(new URL(href).origin === window.location.origin ? '_self' : '_blank');
     }, [href]);
-    (0, react_1.useEffect)(() => {
-        if (!files || !files.length)
-            return;
-        setSrcSet(files.map((file) => `${file.url} ${file.width}w`).join(', '));
-    }, [files]);
-    return (react_1.default.createElement("figure", null,
-        href ? (react_1.default.createElement("a", { href: href, target: target },
-            react_1.default.createElement("img", { className: "sl-content-block sl-image", src: url, alt: alt, srcSet: srcSet, sizes: srcSet ? sizes : undefined }))) : (react_1.default.createElement("img", { className: "sl-content-block sl-image", src: url, alt: alt, srcSet: srcSet, sizes: srcSet ? sizes : undefined })),
-        caption && react_1.default.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })));
+    // useEffect(() => {
+    //   if (!files || !files.length) return
+    //   setSrcSet(files.map((file) => `${file.url} ${file.width}w`).join(', '))
+    // }, [files])
+    return (react_1.default.createElement(styles_2.BlockWrapper, { className: `sl-content-block sl-image sl-width-${widthType}` },
+        react_1.default.createElement(styles_1.ImageWrapper, null,
+            href ? (react_1.default.createElement("a", { href: href, target: target },
+                react_1.default.createElement(styles_1.SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: srcSet ? sizes : undefined }))) : (react_1.default.createElement(styles_1.SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: srcSet ? sizes : undefined })),
+            caption && (react_1.default.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
 };
 exports.default = Image;
-//# sourceMappingURL=Image.js.map
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,+CAAsD;AACtD,qCAAsD;AACtD,yCAA2C;AAS3C;;;;;;;;;;;;;;;;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,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,CAAA;IAC3D,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,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,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,oBAAoB;IACpB,wCAAwC;IAExC,4EAA4E;IAC5E,cAAc;IAEd,OAAO,CACL,8BAAC,qBAAY,IAAC,SAAS,EAAE,sCAAsC,SAAS,EAAE;QACxE,8BAAC,qBAAY;YACV,IAAI,CAAC,CAAC,CAAC,CACN,qCAAG,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM;gBAC3B,8BAAC,sBAAa,IACZ,KAAK,EAAE,KAAK,EACZ,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,8BAAC,sBAAa,IACZ,KAAK,EAAE,KAAK,EACZ,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;YACA,OAAO,IAAI,CACV,8CAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7D,CACY,CACF,CAChB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC, useEffect, 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, files, alt = '', caption, width, href } = data\n  const [target, setTarget] = useState('_self')\n  const [srcSet, setSrcSet] = useState('')\n\n  const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\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    <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={srcSet ? sizes : undefined}\n            />\n          </a>\n        ) : (\n          <SelectedImage\n            width={width}\n            src={url}\n            alt={alt}\n            srcSet={srcSet}\n            sizes={srcSet ? sizes : undefined}\n          />\n        )}\n        {caption && (\n          <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n        )}\n      </ImageWrapper>\n    </BlockWrapper>\n  )\n}\n\nexport default Image\n"]}

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

@@ -0,0 +1,18 @@
+/// <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;
+};
+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/cjs/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;CACd,CAAA;AAED,eAAO,MAAM,aAAa;;;6HAkBzB,CAAA"}

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectedImage = exports.ImageWrapper = void 0;
+const styles_1 = require("../../styles");
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.ImageWrapper = (0, styled_1.default)(styles_1.FigureWrapper) `
+  margin: 1em auto;
+`;
+exports.SelectedImage = styled_1.default.img `
+  display: block;
+  margin: auto;
+  object-fit: cover;
+
+  max-width: 100%;
+
+  width: ${({ width }) => {
+    switch (width) {
+        case 'auto':
+            return 'initial';
+        case 'justify':
+        case 'max':
+            return '100%';
+        default:
+            return width;
+    }
+}};
+`;
+//# sourceMappingURL=styles.js.map

package/dist/cjs/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,yCAA4C;AAC5C,6DAAoC;AAEvB,QAAA,YAAY,GAAG,IAAA,gBAAM,EAAC,sBAAa,CAAC,CAAA;;CAEhD,CAAA;AAMY,QAAA,aAAa,GAAG,gBAAM,CAAC,GAAG,CAAY;;;;;;;WAOxC,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}\n\nexport const SelectedImage = styled.img<ImageProps>`\n  display: block;\n  margin: auto;\n  object-fit: cover;\n\n  max-width: 100%;\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/{esm/VisualContent/blocks/List.d.ts → cjs/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/cjs/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/cjs/VisualContent/blocks/{List.js → List/index.js}

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const styles_1 = require("../../styles");
+const styles_2 = require("./styles");
 const react_1 = __importDefault(require("react"));
 const SubList = ({ item, Wrapper }) => {
     return (react_1.default.createElement("li", null,
@@ -22,8 +24,9 @@ const SubList = ({ item, Wrapper }) => {
  * @group VisualContent Renderers
  */
 const List = ({ data }) => {
-    const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul';
-    return (react_1.default.createElement(ListWrapper, { className: "sl-content-block sl-list sl-list__root" }, data.items.map((item, index) => (react_1.default.createElement(SubList, { key: index, item: item, Wrapper: ListWrapper })))));
+    const listElement = data.style === 'ordered' ? 'ol' : 'ul';
+    return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-list" },
+        react_1.default.createElement(styles_2.ListWrapper, { as: listElement, className: "sl-list__root" }, data.items.map((item, index) => (react_1.default.createElement(SubList, { key: index, item: item, Wrapper: listElement }))))));
 };
 exports.default = List;
-//# sourceMappingURL=List.js.map
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,yCAA2C;AAC3C,qCAAsC;AACtC,kDAAiC;AAOjC,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,qBAAY,IAAC,SAAS,EAAC,0BAA0B;QAChD,8BAAC,oBAAW,IAAC,EAAE,EAAE,WAAW,EAAE,SAAS,EAAC,eAAe,IACpD,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,CACD,CAChB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,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/cjs/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/cjs/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"}

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.ListWrapper = styled_1.default.ul `
+  list-style: none;
+  padding-left: 1em;
+
+  > li {
+    margin: 0.5em 0;
+
+    &::before {
+      content: '•';
+      margin-right: 0.5em;
+    }
+  }
+`;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/styles.ts"],"names":[],"mappings":";;;;;;AAAA,6DAAoC;AAEvB,QAAA,WAAW,GAAG,gBAAM,CAAC,EAAE,CAAA;;;;;;;;;;;;CAYnC,CAAA","sourcesContent":["import styled from '@emotion/styled'\n\nexport const ListWrapper = styled.ul`\n  list-style: none;\n  padding-left: 1em;\n\n  > li {\n    margin: 0.5em 0;\n\n    &::before {\n      content: '•';\n      margin-right: 0.5em;\n    }\n  }\n`\n"]}

package/dist/cjs/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/cjs/VisualContent/blocks/Paragraph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AAAA,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/cjs/VisualContent/blocks/Paragraph.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const styles_1 = require("../styles");
 const react_1 = __importDefault(require("react"));
 /**
  * VisualContent renderer component that renders `paragraph` type blocks
@@ -18,9 +19,11 @@ const react_1 = __importDefault(require("react"));
  */
 const Paragraph = ({ data }) => {
     if (!data.text)
-        return (react_1.default.createElement("p", { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
-            react_1.default.createElement("br", null)));
-    return (react_1.default.createElement("p", { className: "sl-content-block sl-paragraph", dangerouslySetInnerHTML: { __html: data.text } }));
+        return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
+            react_1.default.createElement("p", null,
+                react_1.default.createElement("br", null))));
+    return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-paragraph" },
+        react_1.default.createElement("p", { dangerouslySetInnerHTML: { __html: data.text } })));
 };
 exports.default = Paragraph;
 //# sourceMappingURL=Paragraph.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,qCAAG,SAAS,EAAC,qCAAqC;YAChD,yCAAM,CACJ,CACL,CAAA;IAEH,OAAO,CACL,qCACE,SAAS,EAAC,+BAA+B,EACzC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACH,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\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,sCAAwC;AACxC,kDAAiC;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,8BAAC,qBAAY,IAAC,SAAS,EAAC,qCAAqC;YAC3D;gBACE,yCAAM,CACJ,CACS,CAChB,CAAA;IAEH,OAAO,CACL,8BAAC,qBAAY,IAAC,SAAS,EAAC,+BAA+B;QACrD,qCAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CACxC,CAChB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,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/cjs/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/cjs/VisualContent/blocks/Quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,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/cjs/VisualContent/blocks/Quote.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const styles_1 = require("../styles");
 const react_1 = __importDefault(require("react"));
 /**
  * VisualContent renderer component that renders `quote` type blocks
@@ -16,7 +17,8 @@ const react_1 = __importDefault(require("react"));
  * @group VisualContent Renderers
  */
 const Quote = ({ data }) => {
-    return (react_1.default.createElement("blockquote", { className: "sl-content-block sl-quote" }, data.text));
+    return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-quote" },
+        react_1.default.createElement("blockquote", null, data.text)));
 };
 exports.default = Quote;
 //# sourceMappingURL=Quote.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":";;;;;AAAA,kDAAiC;AAGjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,8CAAY,SAAS,EAAC,2BAA2B,IAAE,IAAI,CAAC,IAAI,CAAc,CAC3E,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\n\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,sCAAwC;AACxC,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,8BAAC,qBAAY,IAAC,SAAS,EAAC,2BAA2B;QACjD,kDAAa,IAAI,CAAC,IAAI,CAAc,CACvB,CAChB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,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/cjs/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/cjs/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/cjs/VisualContent/blocks/Video/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const styles_1 = require("../../styles");
+const styles_2 = require("./styles");
+const react_1 = __importDefault(require("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_1.default.createElement(styles_1.BlockWrapper, { className: `sl-content-block sl-video sl-width-${widthType}` },
+        react_1.default.createElement(styles_2.VideoWrapper, { width: width },
+            react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: html } }),
+            caption && (react_1.default.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
+};
+exports.default = Video;
+//# sourceMappingURL=index.js.map

package/dist/cjs/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,yCAA2C;AAC3C,qCAAuC;AACvC,kDAAiC;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,8BAAC,qBAAY,IAAC,SAAS,EAAE,sCAAsC,SAAS,EAAE;QACxE,8BAAC,qBAAY,IAAC,KAAK,EAAE,KAAK;YACxB,uCAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI;YAEjD,OAAO,IAAI,CACV,8CAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7D,CACY,CACF,CAChB,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,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/cjs/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/cjs/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/cjs/VisualContent/blocks/Video/styles.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoWrapper = void 0;
+const styles_1 = require("../../styles");
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.VideoWrapper = (0, styled_1.default)(styles_1.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/cjs/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,yCAA4C;AAC5C,6DAAoC;AAMvB,QAAA,YAAY,GAAG,IAAA,gBAAM,EAAC,sBAAa,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/cjs/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/cjs/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"}