@starlightcms/react-sdk 2.3.0 → 3.0.0-beta.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAK9C;;;;;;;;;GASG;AACH,eAAO,MAAM,oBAAoB,QAAO,SAMvC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,eAAe,uFASzB,oBAAoB,KAAG,WA2GzB,CAAA;AAED,YAAY,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAK9C;;;;;;;;;GASG;AAEH,eAAO,MAAM,oBAAoB,QAAO,SAMvC,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,eAAe,GAAI,oFAS7B,oBAAoB,KAAG,GAAG,CAAC,OA2G7B,CAAA;AAED,YAAY,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/cjs/ResponsiveImage/index.js

@@ -16,13 +16,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ResponsiveImage = exports.GlobalLazyloadStyles = void 0;
 const react_1 = __importStar(require("react"));
@@ -164,7 +174,7 @@ const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image
         };
     }, [source]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("img", { ref: imageRef, className: 'sl-lazyload ' + className, style: imageStyle, src: canLoad ? (source === null || source === void 0 ? void 0 : source.path) || image : transparentImage, srcSet: canLoad ? (sourceSet ? sourceSet : undefined) : undefined, sizes: canLoad ? (sourceSet ? sizes : undefined) : undefined, alt: alt }),
+        react_1.default.createElement("img", { ref: imageRef, className: 'sl-lazyload sl-responsive-image ' + className, style: imageStyle, src: canLoad ? (source === null || source === void 0 ? void 0 : source.path) || image : transparentImage, srcSet: canLoad ? (sourceSet ? sourceSet : undefined) : undefined, sizes: canLoad ? (sourceSet ? sizes : undefined) : undefined, alt: alt }),
         react_1.default.createElement("noscript", null,
             react_1.default.createElement("img", { src: (source && source.path) || image, alt: alt }))));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { MediaObject } from '@starlightcms/js-sdk'\nimport { ResponsiveImageProps } from './types'\n\nconst transparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='\n\n/**\n * Renders a `<style>` tag with a rule that disables lazy-loading when JavaScript\n * is disabled in the browser. This is useful to web crawlers that don't run\n * JS files, which is important for SEO.\n *\n * You only need to render this component once in your application,\n * preferably in the `<head>` section.\n *\n * @group ResponsiveImage\n */\nexport const GlobalLazyloadStyles = (): ReactNode => {\n  return (\n    <noscript>\n      <style>{'img.sl-lazyload{display: none;}'}</style>\n    </noscript>\n  )\n}\n\n/**\n * Renders an image from a given Starlight media object. The Starlight\n * optimized image will be rendered by default if no `variation` prop is passed.\n *\n * If the `sizes` prop is passed, a responsive image will be rendered by\n * generating a \"src-set\" property.\n *\n * The image will be lazy-loaded, which means that it should only load\n * when the browser viewport gets near the image.\n *\n * @example Requesting an entry and rendering an image.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Media\n * File field with a key of `featured_image` on it.\n *\n * ```jsx\n * import Starlight, { ResponsiveImage } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n *   const [entry, setEntry] = useState(null)\n *\n *   useEffect(async () => {\n *     // This is just an example, you could fetch\n *     // the entry any way you want.\n *     const response = await Starlight.posts.entries.get(slug)\n *\n *     setEntry(response.data)\n *   }, [ slug ])\n *\n *   // After fetching, the image will be on the `entry.data.featured_image` property.\n *   return (\n *     entry ? (\n *        <article>\n *          <h1>{entry.title}</h1>\n *          <ResponsiveImage image={entry.data.featured_image} />\n *        </article>\n *     ) : (\n *       <div>Loading...</div>\n *     )\n *   )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link ResponsiveImageProps} to see the\n * available options.\n * @group ResponsiveImage\n */\nexport const ResponsiveImage = ({\n  className = '',\n  image,\n  sizes = '',\n  alt = typeof image === 'string' ? '' : image.alt,\n  variation = 'optimized',\n  background = '',\n  lazyRoot,\n  lazyRootMargin = '200px',\n}: ResponsiveImageProps): JSX.Element => {\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  // When true, the image may load normally\n  const [canLoad, setCanLoad] = useState(false)\n\n  // When true, the image has been successfully loaded by the browser\n  const [hasLoaded, setHasLoaded] = useState(false)\n\n  // Get the optimized variation if available\n  const source = useMemo(() => {\n    // If the given image was a string, simply return it\n    if (typeof image === 'string' || !image.files) return\n\n    const chosenVariation = image.files.find(\n      (file) => file.variation === variation\n    )\n\n    return chosenVariation\n      ? chosenVariation\n      : image.files.find((file) => file.variation === 'original')\n  }, [image, variation])\n\n  // Create a srcset\n  const sourceSet = useMemo(() => {\n    if (!source) return\n\n    // source is only defined if image is a MediaObject, so we assert it as one\n    const img = image as MediaObject\n\n    const sets = []\n    const large = img.files.find((file) => file.variation === 'large')\n    const medium = img.files.find((file) => file.variation === 'medium')\n    const thumbnail = img.files.find((file) => file.variation === 'thumbnail')\n\n    if (thumbnail)\n      sets.push(`${encodeURI(thumbnail.path)} ${thumbnail.meta?.width}w`)\n    if (medium) sets.push(`${encodeURI(medium.path)} 600w`)\n    if (large) sets.push(`${encodeURI(large.path)} 1200w`)\n    sets.push(`${encodeURI(source.path)} ${source.meta?.width}w`)\n\n    return sets.join(',')\n  }, [source, image])\n\n  const imageStyle = useMemo(() => {\n    return {\n      backgroundColor:\n        background || hasLoaded || typeof image === 'string'\n          ? 'transparent'\n          : `#${source?.background_color ?? 'transparent'}`,\n    }\n  }, [background, source, hasLoaded, image])\n\n  useEffect(() => {\n    let ref: HTMLImageElement | null = null\n    const observer = new IntersectionObserver(\n      (entries, observer) => {\n        if (entries[0].intersectionRatio > 0) {\n          // Image entered the viewport, set it as loadable\n          setCanLoad(true)\n\n          // Stop observing the image\n          observer.unobserve(ref as HTMLImageElement)\n        }\n      },\n      {\n        root: lazyRoot?.current,\n        rootMargin: lazyRootMargin,\n      }\n    )\n\n    if (imageRef.current) {\n      ref = imageRef.current\n      observer.observe(ref)\n    }\n\n    const loadHandler = () => {\n      // After loading the image, the \"hasLoaded\" flag is used to hide the background color\n      setHasLoaded(true)\n    }\n\n    ref?.addEventListener('load', loadHandler)\n\n    return () => {\n      if (ref) {\n        observer.unobserve(ref)\n        ref.removeEventListener('load', loadHandler)\n      }\n    }\n  }, [source])\n\n  return (\n    <>\n      <img\n        ref={imageRef}\n        className={'sl-lazyload ' + className}\n        style={imageStyle}\n        src={canLoad ? source?.path || (image as string) : transparentImage}\n        srcSet={canLoad ? (sourceSet ? sourceSet : undefined) : undefined}\n        sizes={canLoad ? (sourceSet ? sizes : undefined) : undefined}\n        alt={alt}\n      />\n      <noscript>\n        <img src={(source && source.path) || (image as string)} alt={alt} />\n      </noscript>\n    </>\n  )\n}\n\nexport type { ResponsiveImageProps }\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"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","sourcesContent":["'use client'\n\nimport React, { ReactNode, useEffect, useMemo, useRef, useState } from 'react'\nimport { MediaObject } from '@starlightcms/js-sdk'\nimport { ResponsiveImageProps } from './types'\n\nconst transparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='\n\n/**\n * Renders a `<style>` tag with a rule that disables lazy-loading when JavaScript\n * is disabled in the browser. This is useful to web crawlers that don't run\n * JS files, which is important for SEO.\n *\n * You only need to render this component once in your application,\n * preferably in the `<head>` section.\n *\n * @group ResponsiveImage\n */\n\nexport const GlobalLazyloadStyles = (): ReactNode => {\n  return (\n    <noscript>\n      <style>{'img.sl-lazyload{display: none;}'}</style>\n    </noscript>\n  )\n}\n\n/**\n * Renders an image from a given Starlight media object. The Starlight\n * optimized image will be rendered by default if no `variation` prop is passed.\n *\n * If the `sizes` prop is passed, a responsive image will be rendered by\n * generating a \"src-set\" property.\n *\n * The image will be lazy-loaded, which means that it should only load\n * when the browser viewport gets near the image.\n *\n * @example Requesting an entry and rendering an image.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Media\n * File field with a key of `featured_image` on it.\n *\n * ```jsx\n * import Starlight, { ResponsiveImage } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n *   const [entry, setEntry] = useState(null)\n *\n *   useEffect(async () => {\n *     // This is just an example, you could fetch\n *     // the entry any way you want.\n *     const response = await Starlight.posts.entries.get(slug)\n *\n *     setEntry(response.data)\n *   }, [ slug ])\n *\n *   // After fetching, the image will be on the `entry.data.featured_image` property.\n *   return (\n *     entry ? (\n *        <article>\n *          <h1>{entry.title}</h1>\n *          <ResponsiveImage image={entry.data.featured_image} />\n *        </article>\n *     ) : (\n *       <div>Loading...</div>\n *     )\n *   )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link ResponsiveImageProps} to see the\n * available options.\n * @group ResponsiveImage\n */\nexport const ResponsiveImage = ({\n  className = '',\n  image,\n  sizes = '',\n  alt = typeof image === 'string' ? '' : image.alt,\n  variation = 'optimized',\n  background = '',\n  lazyRoot,\n  lazyRootMargin = '200px',\n}: ResponsiveImageProps): JSX.Element => {\n  const imageRef = useRef<HTMLImageElement>(null)\n\n  // When true, the image may load normally\n  const [canLoad, setCanLoad] = useState(false)\n\n  // When true, the image has been successfully loaded by the browser\n  const [hasLoaded, setHasLoaded] = useState(false)\n\n  // Get the optimized variation if available\n  const source = useMemo(() => {\n    // If the given image was a string, simply return it\n    if (typeof image === 'string' || !image.files) return\n\n    const chosenVariation = image.files.find(\n      (file) => file.variation === variation\n    )\n\n    return chosenVariation\n      ? chosenVariation\n      : image.files.find((file) => file.variation === 'original')\n  }, [image, variation])\n\n  // Create a srcset\n  const sourceSet = useMemo(() => {\n    if (!source) return\n\n    // source is only defined if image is a MediaObject, so we assert it as one\n    const img = image as MediaObject\n\n    const sets = []\n    const large = img.files.find((file) => file.variation === 'large')\n    const medium = img.files.find((file) => file.variation === 'medium')\n    const thumbnail = img.files.find((file) => file.variation === 'thumbnail')\n\n    if (thumbnail)\n      sets.push(`${encodeURI(thumbnail.path)} ${thumbnail.meta?.width}w`)\n    if (medium) sets.push(`${encodeURI(medium.path)} 600w`)\n    if (large) sets.push(`${encodeURI(large.path)} 1200w`)\n    sets.push(`${encodeURI(source.path)} ${source.meta?.width}w`)\n\n    return sets.join(',')\n  }, [source, image])\n\n  const imageStyle = useMemo(() => {\n    return {\n      backgroundColor:\n        background || hasLoaded || typeof image === 'string'\n          ? 'transparent'\n          : `#${source?.background_color ?? 'transparent'}`,\n    }\n  }, [background, source, hasLoaded, image])\n\n  useEffect(() => {\n    let ref: HTMLImageElement | null = null\n    const observer = new IntersectionObserver(\n      (entries, observer) => {\n        if (entries[0].intersectionRatio > 0) {\n          // Image entered the viewport, set it as loadable\n          setCanLoad(true)\n\n          // Stop observing the image\n          observer.unobserve(ref as HTMLImageElement)\n        }\n      },\n      {\n        root: lazyRoot?.current,\n        rootMargin: lazyRootMargin,\n      }\n    )\n\n    if (imageRef.current) {\n      ref = imageRef.current\n      observer.observe(ref)\n    }\n\n    const loadHandler = () => {\n      // After loading the image, the \"hasLoaded\" flag is used to hide the background color\n      setHasLoaded(true)\n    }\n\n    ref?.addEventListener('load', loadHandler)\n\n    return () => {\n      if (ref) {\n        observer.unobserve(ref)\n        ref.removeEventListener('load', loadHandler)\n      }\n    }\n  }, [source])\n\n  return (\n    <>\n      <img\n        ref={imageRef}\n        className={'sl-lazyload sl-responsive-image ' + className}\n        style={imageStyle}\n        src={canLoad ? source?.path || (image as string) : transparentImage}\n        srcSet={canLoad ? (sourceSet ? sourceSet : undefined) : undefined}\n        sizes={canLoad ? (sourceSet ? sizes : undefined) : undefined}\n        alt={alt}\n      />\n      <noscript>\n        <img src={(source && source.path) || (image as string)} alt={alt} />\n      </noscript>\n    </>\n  )\n}\n\nexport type { ResponsiveImageProps }\n"]}

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

@@ -1 +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"}
+{"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;AACjE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAWxC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -3,8 +3,6 @@ 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
@@ -17,9 +15,9 @@ const react_1 = __importDefault(require("react"));
  * type of data this component receives.
  * @group VisualContent Renderers
  */
-const HTML = ({ data }) => {
-    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 } })));
-};
+const HTML = ({ data }) => (react_1.default.createElement("div", { className: `sl-content-block sl-html 
+    ${data.isStretched ? 'sl-stretched' : ''}
+    ` },
+    react_1.default.createElement("div", { className: "sl-html__root", dangerouslySetInnerHTML: { __html: data.html } })));
 exports.default = HTML;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/HTML/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACzD,uCACE,SAAS,EAAE;MACT,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;KACvC;IAED,uCACE,SAAS,EAAC,eAAe,EACzB,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAC9C,CACE,CACP,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import { HTMLBlock, VisualDataBlock } from '@starlightcms/js-sdk'\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  <div\n    className={`sl-content-block sl-html \n    ${data.isStretched ? 'sl-stretched' : ''}\n    `}\n  >\n    <div\n      className=\"sl-html__root\"\n      dangerouslySetInnerHTML={{ __html: data.html }}\n    />\n  </div>\n)\n\nexport default HTML\n"]}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk';
 /**
  * VisualContent renderer component that renders `header` type blocks

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

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";AAAA,OAAO,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"}
+{"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;AAGnE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,GAAI,UAAU,eAAe,CAAC,WAAW,CAAC,KAAG,GAAG,CAAC,OAe5D,CAAA;AAED,eAAe,MAAM,CAAA"}

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

@@ -3,7 +3,6 @@ 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,8 +16,12 @@ const react_1 = __importDefault(require("react"));
  * @group VisualContent Renderers
  */
 const Header = ({ data }) => {
+    const { alignment, isStretched } = data;
     const HeaderComponent = `h${data.level}`;
-    return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-header" },
+    return (react_1.default.createElement("div", { className: `sl-content-block sl-header 
+      ${alignment ? `sl-alignment-${alignment}` : ''}
+      ${isStretched ? 'sl-stretched' : ''}
+      ` },
         react_1.default.createElement(HeaderComponent, { dangerouslySetInnerHTML: { __html: data.text } })));
 };
 exports.default = Header;

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Header.tsx"],"names":[],"mappings":";;;;;AACA,kDAAyB;AAEzB;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAgC,EAAe,EAAE;IACrE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAEvC,MAAM,eAAe,GAAG,IAAI,IAAI,CAAC,KAAK,EAAU,CAAA;IAEhD,OAAO,CACL,uCACE,SAAS,EAAE;QACT,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OAClC;QAED,8BAAC,eAAe,IAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CAC/D,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,MAAM,CAAA","sourcesContent":["import { HeaderBlock, VisualDataBlock } from '@starlightcms/js-sdk'\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 { alignment, isStretched } = data\n\n  const HeaderComponent = `h${data.level}` as 'h1'\n\n  return (\n    <div\n      className={`sl-content-block sl-header \n      ${alignment ? `sl-alignment-${alignment}` : ''}\n      ${isStretched ? 'sl-stretched' : ''}\n      `}\n    >\n      <HeaderComponent dangerouslySetInnerHTML={{ __html: data.text }} />\n    </div>\n  )\n}\n\nexport default Header\n"]}

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

@@ -3,7 +3,7 @@ import { FC } from 'react';
 /**
  * Type used by {@link ImageComponent} to accept a `sizes` prop.
  */
-export declare type ImageOptions = {
+export type ImageOptions = {
     sizes?: string;
 };
 /**

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

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

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

@@ -15,17 +15,25 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 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
@@ -44,10 +52,34 @@ const styles_2 = require("../../styles");
  * @group VisualContent Renderers
  */
 const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
-    const { url, alt = '', files, caption, width, href, responsive } = data;
+    const { url, alt = '', files, caption, width, href, responsive, alignment, isStretched, } = data;
     const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
     const [target, setTarget] = (0, react_1.useState)('_self');
     const [originalWidth, setOriginalWidth] = (0, react_1.useState)(undefined);
+    const calculatedWidth = (0, react_1.useMemo)(() => {
+        switch (width) {
+            case 'auto':
+                return 'auto';
+            case 'justify':
+            case 'max':
+                return '100%';
+            default:
+                return width;
+        }
+    }, [width]);
+    const calculatedMaxWidth = (0, react_1.useMemo)(() => {
+        if (responsive && originalWidth && width === 'auto')
+            return originalWidth;
+        switch (width) {
+            case 'auto':
+                return '100%';
+            case 'justify':
+            case 'max':
+                return 'initial';
+            default:
+                return originalWidth;
+        }
+    }, [width, responsive, originalWidth]);
     const srcSet = (0, react_1.useMemo)(() => {
         return data.files.map((file) => `${file.url} ${file.width}w`).join(', ');
     }, [data]);
@@ -60,10 +92,16 @@ const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
         const optimizedFile = files.find((f) => f.variation === 'optimized');
         setOriginalWidth(optimizedFile ? optimizedFile.width.toString() + 'px' : undefined);
     }, []);
-    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,
+    return (react_1.default.createElement("div", { className: `sl-content-block sl-image 
+      ${alignment ? `sl-alignment-${alignment}` : ''} 
+      ${isStretched || widthType === 'max' ? 'sl-stretched' : ''}
+      ` },
+        react_1.default.createElement("figure", { className: `sl-figure sl-image--width-${widthType}`, style: {
+                width: calculatedWidth,
+                maxWidth: calculatedMaxWidth,
+            } },
             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: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined }))) : (react_1.default.createElement(styles_1.SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined })),
+                react_1.default.createElement("img", { className: "sl-image__img", src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined }))) : (react_1.default.createElement("img", { className: "sl-image__img", src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined })),
             caption && (react_1.default.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
 };
 exports.default = Image;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC, useEffect, useMemo, useState } from 'react'\nimport { ImageWrapper, SelectedImage } from './styles'\nimport { BlockWrapper } from '../../styles'\n\n/**\n * Type used by {@link ImageComponent} to accept a `sizes` prop.\n */\nexport type ImageOptions = {\n  sizes?: string\n}\n\n/**\n * VisualContent renderer component that renders `image` type blocks\n * as a responsive image along with its caption (if defined). Optionally\n * wraps the image in an anchor if a link is defined in the content.\n *\n * See {@doclink components/VisualContent/#customizing-components | the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n *\n * This component also supports an optional `sizes` prop to provide better image\n * responsiveness, see {@doclink components/VisualContent/#responsive-images | the guide page on responsive images}\n * to learn more.\n *\n * @param props VisualDataBlock object. See {@link ImageBlock} to learn the\n * type of data this component receives. Also accepts\n * an optional `sizes` string prop.\n * @group VisualContent Renderers\n */\nconst Image: FC<VisualDataBlock<ImageBlock> & ImageOptions> = ({\n  data,\n  sizes = '(max-width: 480px) 90vw, 70vw',\n}) => {\n  const { url, alt = '', files, caption, width, href, responsive } = data\n\n  const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n  const [target, setTarget] = useState('_self')\n  const [originalWidth, setOriginalWidth] = useState<string | undefined>(\n    undefined\n  )\n\n  const srcSet = useMemo(() => {\n    return data.files.map((file) => `${file.url} ${file.width}w`).join(', ')\n  }, [data])\n\n  useEffect(() => {\n    if (!href) return\n\n    setTarget(\n      new URL(href).origin === window.location.origin ? '_self' : '_blank'\n    )\n  }, [href])\n\n  useEffect(() => {\n    const optimizedFile = files.find((f) => f.variation === 'optimized')\n    setOriginalWidth(\n      optimizedFile ? optimizedFile.width.toString() + 'px' : undefined\n    )\n  }, [])\n\n  return (\n    <BlockWrapper className={`sl-content-block sl-image sl-width-${widthType}`}>\n      <ImageWrapper>\n        {href ? (\n          <a href={href} target={target}>\n            <SelectedImage\n              width={width}\n              src={url}\n              alt={alt}\n              srcSet={srcSet}\n              sizes={responsive ? sizes : undefined}\n              originalWidth={data.responsive ? originalWidth : undefined}\n            />\n          </a>\n        ) : (\n          <SelectedImage\n            width={width}\n            src={url}\n            alt={alt}\n            srcSet={srcSet}\n            sizes={responsive ? sizes : undefined}\n            originalWidth={data.responsive ? originalWidth : undefined}\n          />\n        )}\n        {caption && (\n          <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n        )}\n      </ImageWrapper>\n    </BlockWrapper>\n  )\n}\n\nexport default Image\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Image/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ImageBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC, useEffect, useMemo, useState } from 'react'\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 {\n    url,\n    alt = '',\n    files,\n    caption,\n    width,\n    href,\n    responsive,\n    alignment,\n    isStretched,\n  } = data\n\n  const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n  const [target, setTarget] = useState('_self')\n  const [originalWidth, setOriginalWidth] = useState<string | undefined>(\n    undefined\n  )\n\n  const calculatedWidth = useMemo(() => {\n    switch (width) {\n      case 'auto':\n        return 'auto'\n      case 'justify':\n      case 'max':\n        return '100%'\n      default:\n        return width\n    }\n  }, [width])\n\n  const calculatedMaxWidth = useMemo(() => {\n    if (responsive && originalWidth && width === 'auto') return originalWidth\n\n    switch (width) {\n      case 'auto':\n        return '100%'\n      case 'justify':\n      case 'max':\n        return 'initial'\n      default:\n        return originalWidth\n    }\n  }, [width, responsive, originalWidth])\n\n  const srcSet = useMemo(() => {\n    return data.files.map((file) => `${file.url} ${file.width}w`).join(', ')\n  }, [data])\n\n  useEffect(() => {\n    if (!href) return\n\n    setTarget(\n      new URL(href).origin === window.location.origin ? '_self' : '_blank'\n    )\n  }, [href])\n\n  useEffect(() => {\n    const optimizedFile = files.find((f) => f.variation === 'optimized')\n    setOriginalWidth(\n      optimizedFile ? optimizedFile.width.toString() + 'px' : undefined\n    )\n  }, [])\n\n  return (\n    <div\n      className={`sl-content-block sl-image \n      ${alignment ? `sl-alignment-${alignment}` : ''} \n      ${isStretched || widthType === 'max' ? 'sl-stretched' : ''}\n      `}\n    >\n      <figure\n        className={`sl-figure sl-image--width-${widthType}`}\n        style={{\n          width: calculatedWidth,\n          maxWidth: calculatedMaxWidth,\n        }}\n      >\n        {href ? (\n          <a href={href} target={target}>\n            <img\n              className=\"sl-image__img\"\n              src={url}\n              alt={alt}\n              srcSet={srcSet}\n              sizes={responsive ? sizes : undefined}\n            />\n          </a>\n        ) : (\n          <img\n            className=\"sl-image__img\"\n            src={url}\n            alt={alt}\n            srcSet={srcSet}\n            sizes={responsive ? sizes : undefined}\n          />\n        )}\n        {caption && (\n          <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n        )}\n      </figure>\n    </div>\n  )\n}\n\nexport default Image\n"]}

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

@@ -1 +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"}
+{"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;AAC3E,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAqBjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,SAAS,CAAC,CAgBxC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -3,15 +3,11 @@ 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,
-        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: item.content } }),
-        item.items && item.items.length ? (react_1.default.createElement(Wrapper, null, item.items &&
-            item.items.map((subItem, index) => (react_1.default.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
-};
+const SubList = ({ item, Wrapper }) => (react_1.default.createElement("li", null,
+    react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: item.content } }),
+    item.items && item.items.length ? (react_1.default.createElement(Wrapper, null, item.items &&
+        item.items.map((subItem, index) => (react_1.default.createElement(SubList, { key: index, item: subItem, Wrapper: Wrapper }))))) : null));
 /**
  * VisualContent renderer component that renders `list` type blocks
  * as `<ul>` or `<ol>` elements, depending on the list style.
@@ -24,9 +20,11 @@ const SubList = ({ item, Wrapper }) => {
  * @group VisualContent Renderers
  */
 const List = ({ data }) => {
-    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 }))))));
+    const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul';
+    return (react_1.default.createElement("div", { className: `sl-content-block sl-list
+      ${data.isStretched ? 'sl-stretched' : ''}
+      ` },
+        react_1.default.createElement(ListWrapper, { className: "sl-list__root" }, data.items.map((item, index) => (react_1.default.createElement(SubList, { key: index, item: item, Wrapper: ListWrapper }))))));
 };
 exports.default = List;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAOjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CACvD;IACE,wCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;IAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,8BAAC,OAAO,QACL,IAAI,CAAC,KAAK;QACT,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;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,uCACE,SAAS,EAAE;QACT,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OACvC;QAED,8BAAC,WAAW,IAAC,SAAS,EAAC,eAAe,IACnC,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,CACV,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,IAAI,CAAA","sourcesContent":["import { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\nimport React, { FC } from 'react'\n\ntype SubListProps = {\n  item: ListItem\n  Wrapper: 'ul' | 'ol'\n}\n\nconst SubList: FC<SubListProps> = ({ item, Wrapper }) => (\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 * 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    <div\n      className={`sl-content-block sl-list\n      ${data.isStretched ? 'sl-stretched' : ''}\n      `}\n    >\n      <ListWrapper className=\"sl-list__root\">\n        {data.items.map((item, index) => (\n          <SubList key={index} item={item} Wrapper={ListWrapper} />\n        ))}\n      </ListWrapper>\n    </div>\n  )\n}\n\nexport default List\n"]}

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

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

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

@@ -3,7 +3,6 @@ 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,11 +17,15 @@ const react_1 = __importDefault(require("react"));
  * @group VisualContent Renderers
  */
 const Paragraph = ({ data }) => {
+    const { alignment, isStretched } = data;
+    const baseClasses = `sl-content-block sl-paragraph 
+        ${alignment ? `sl-alignment-${alignment}` : ''}
+        ${isStretched ? 'sl-stretched' : ''}`;
     if (!data.text)
-        return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
+        return (react_1.default.createElement("div", { className: `${baseClasses} 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" },
+    return (react_1.default.createElement("div", { className: baseClasses },
         react_1.default.createElement("p", { dangerouslySetInnerHTML: { __html: data.text } })));
 };
 exports.default = Paragraph;

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAEvC,MAAM,WAAW,GAAG;UACZ,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;UAC5C,WAAW,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,CAAA;IAE3C,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,uCAAK,SAAS,EAAE,GAAG,WAAW,QAAQ;YACpC;gBACE,yCAAM,CACJ,CACA,CACP,CAAA;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,WAAW;QACzB,qCAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CACjD,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,SAAS,CAAA","sourcesContent":["import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\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  const { alignment, isStretched } = data\n\n  const baseClasses = `sl-content-block sl-paragraph \n        ${alignment ? `sl-alignment-${alignment}` : ''}\n        ${isStretched ? 'sl-stretched' : ''}`\n\n  if (!data.text)\n    return (\n      <div className={`${baseClasses} empty`} aria-hidden>\n        <p>\n          <br />\n        </p>\n      </div>\n    )\n\n  return (\n    <div className={baseClasses}>\n      <p dangerouslySetInnerHTML={{ __html: data.text }} />\n    </div>\n  )\n}\n\nexport default Paragraph\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Quote.d.ts","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AAAA,OAAO,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"}
+{"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;AAClE,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,7 +3,6 @@ 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
@@ -17,7 +16,7 @@ const react_1 = __importDefault(require("react"));
  * @group VisualContent Renderers
  */
 const Quote = ({ data }) => {
-    return (react_1.default.createElement(styles_1.BlockWrapper, { className: "sl-content-block sl-quote" },
+    return (react_1.default.createElement("div", { className: "sl-content-block sl-quote" },
         react_1.default.createElement("blockquote", null, data.text)));
 };
 exports.default = Quote;

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,uCAAK,SAAS,EAAC,2BAA2B;QACxC,kDAAa,IAAI,CAAC,IAAI,CAAc,CAChC,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\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    <div className=\"sl-content-block sl-quote\">\n      <blockquote>{data.text}</blockquote>\n    </div>\n  )\n}\n\nexport default Quote\n"]}

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

@@ -1 +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"}
+{"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;AAClE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK,EAAE,EAAE,CAAC,eAAe,CAAC,UAAU,CAAC,CAwB1C,CAAA;AAED,eAAe,KAAK,CAAA"}

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

@@ -3,8 +3,6 @@ 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
@@ -18,11 +16,14 @@ const react_1 = __importDefault(require("react"));
  * @group VisualContent Renderers
  */
 const Video = ({ data }) => {
-    const { html, width, caption } = data;
+    const { html, width, caption, alignment, isStretched } = 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 } }),
+    return (react_1.default.createElement("div", { className: `sl-content-block sl-video 
+      ${alignment ? `sl-alignment-${alignment}` : ''}
+      ${isStretched || widthType === 'max' ? 'sl-stretched' : ''}
+      ` },
+        react_1.default.createElement("figure", { className: `sl-figure sl-video--width-${widthType}` },
+            react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: html }, style: { maxWidth: widthType === 'fixed' ? `${width}` : undefined } }),
             caption && (react_1.default.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
 };
 exports.default = Video;

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

@@ -1 +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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":";;;;;AACA,kDAAiC;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAI,CAAA;IAE7D,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,uCACE,SAAS,EAAE;QACT,SAAS,CAAC,CAAC,CAAC,gBAAgB,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE;QAC5C,WAAW,IAAI,SAAS,KAAK,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE;OACzD;QAED,0CAAQ,SAAS,EAAE,6BAA6B,SAAS,EAAE;YACzD,uCACE,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,EACzC,KAAK,EAAE,EAAE,QAAQ,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EAAE,GACnE;YAED,OAAO,IAAI,CACV,8CAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7D,CACM,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,kBAAe,KAAK,CAAA","sourcesContent":["import { VideoBlock, VisualDataBlock } from '@starlightcms/js-sdk'\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, alignment, isStretched } = data\n\n  const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n  return (\n    <div\n      className={`sl-content-block sl-video \n      ${alignment ? `sl-alignment-${alignment}` : ''}\n      ${isStretched || widthType === 'max' ? 'sl-stretched' : ''}\n      `}\n    >\n      <figure className={`sl-figure sl-video--width-${widthType}`}>\n        <div\n          dangerouslySetInnerHTML={{ __html: html }}\n          style={{ maxWidth: widthType === 'fixed' ? `${width}` : undefined }}\n        />\n\n        {caption && (\n          <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n        )}\n      </figure>\n    </div>\n  )\n}\n\nexport default Video\n"]}

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { VisualContentProps } from './types';
 import Image, { ImageOptions } from './blocks/Image';
 import Paragraph from './blocks/Paragraph';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AAGA,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAE1C,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,GAAI,kDAK3B,kBAAkB,KAAG,GAAG,CAAC,OAoD3B,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/cjs/VisualContent/index.js

@@ -16,13 +16,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -32,7 +42,6 @@ const Image_1 = __importDefault(require("./blocks/Image"));
 exports.ImageComponent = Image_1.default;
 const Paragraph_1 = __importDefault(require("./blocks/Paragraph"));
 exports.ParagraphComponent = Paragraph_1.default;
-const styles_1 = require("./styles");
 const react_1 = __importStar(require("react"));
 const Header_1 = __importDefault(require("./blocks/Header"));
 exports.HeaderComponent = Header_1.default;
@@ -120,7 +129,7 @@ const VisualContent = ({ content, components = {}, excerpt = false, excerptLengt
         const Component = componentList.paragraph;
         return (react_1.default.createElement(Component, { key: block.id, id: block.id, type: block.type, data: { text: excerptText } }));
     }
-    return (react_1.default.createElement(styles_1.OuterWrapper, { className: "sl-visual-content" }, content.blocks.map((block) => {
+    return (react_1.default.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block) => {
         const Component = componentList[block.type];
         if (!Component)
             return null;