npm - @starlightcms/react-sdk - Versions diffs - 2.3.0 → 3.0.0-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (107) hide show

package/dist/esm/ResponsiveImage/index.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;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/esm/ResponsiveImage/index.js CHANGED Viewed

@@ -137,7 +137,7 @@ export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeo
         };
     }, [source]);
     return (React.createElement(React.Fragment, null,
-        React.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.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.createElement("noscript", null,
             React.createElement("img", { src: (source && source.path) || image, alt: alt }))));
 };

package/dist/esm/ResponsiveImage/index.js.map CHANGED Viewed

	@@ -1 +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"]}
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 /\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/esm/VisualContent/blocks/HTML/index.d.ts.map CHANGED Viewed

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

package/dist/esm/VisualContent/blocks/HTML/index.js CHANGED Viewed

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

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

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

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

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

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

	@@ -1 +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"}
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;AAGnE;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,GAAI,UAAU,eAAe,CAAC,WAAW,CAAC,KAAG,GAAG,CAAC,OAQ5D,CAAA;AAED,eAAe,MAAM,CAAA"}

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

@@ -1,4 +1,3 @@
-import { BlockWrapper } from '../styles';
 import React from 'react';
 /**
  * VisualContent renderer component that renders `header` type blocks
@@ -13,7 +12,7 @@ import React from 'react';
  */
 const Header = ({ data }) => {
     const HeaderComponent = `h${data.level}`;
-    return (React.createElement(BlockWrapper, { className: "sl-content-block sl-header" },
+    return (React.createElement("div", { className: "sl-content-block sl-header" },
         React.createElement(HeaderComponent, { dangerouslySetInnerHTML: { __html: data.text } })));
 };
 export default Header;

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

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

package/dist/esm/VisualContent/blocks/Image/index.d.ts CHANGED Viewed

@@ -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/esm/VisualContent/blocks/Image/index.d.ts.map CHANGED Viewed

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

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

@@ -1,6 +1,4 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { ImageWrapper, SelectedImage } from './styles';
-import { BlockWrapper } from '../../styles';
 /**
  * VisualContent renderer component that renders `image` type blocks
  * as a responsive image along with its caption (if defined). Optionally
@@ -23,6 +21,30 @@ const Image = ({ data, sizes = '(max-width: 480px) 90vw, 70vw', }) => {
     const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
     const [target, setTarget] = useState('_self');
     const [originalWidth, setOriginalWidth] = useState(undefined);
+    const calculatedWidth = useMemo(() => {
+        switch (width) {
+            case 'auto':
+                return 'auto';
+            case 'justify':
+            case 'max':
+                return '100%';
+            default:
+                return width;
+        }
+    }, [width]);
+    const calculatedMaxWidth = 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 = useMemo(() => {
         return data.files.map((file) => `${file.url} ${file.width}w`).join(', ');
     }, [data]);
@@ -35,10 +57,13 @@ 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.createElement(BlockWrapper, { className: `sl-content-block sl-image sl-width-${widthType}` },
-        React.createElement(ImageWrapper, null,
+    return (React.createElement("div", { className: `sl-content-block sl-image sl-width-${widthType}` },
+        React.createElement("figure", { className: "sl-figure", style: {
+                width: calculatedWidth,
+                maxWidth: calculatedMaxWidth,
+            } },
             href ? (React.createElement("a", { href: href, target: target },
-                React.createElement(SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined }))) : (React.createElement(SelectedImage, { width: width, src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined, originalWidth: data.responsive ? originalWidth : undefined })),
+                React.createElement("img", { className: "sl-image__img", src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined }))) : (React.createElement("img", { className: "sl-image__img", src: url, alt: alt, srcSet: srcSet, sizes: responsive ? sizes : undefined })),
             caption && (React.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
 };
 export default Image;

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

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

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

package/dist/esm/VisualContent/blocks/List/index.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AACA,OAAO,~~EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,~~KAAa,MAAM,OAAO,CAAA;AAOjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IACtD,OAAO,CACL;QACE,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;QAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,oBAAC,OAAO,QACL,IAAI,CAAC,KAAK;YACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC,CACI,CACX,CAAC,CAAC,CAAC,IAAI,CACL,CACN,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE1D,OAAO,CACL,~~oBAAC~~,~~YAAY,IAAC,~~SAAS,EAAC,0BAA0B;~~QAChD~~,oBAAC,WAAW,IAAC,~~EAAE,EAAE,WAAW,EAAE,~~SAAS,EAAC,eAAe,~~IACpD~~,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,CAC1D,CAAC,CACU,~~CACD~~,~~CAChB~~,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA","sourcesContent":["import { ListBlock, ListItem, VisualDataBlock } from '@starlightcms/js-sdk'\nimport ~~{ BlockWrapper } from '../../styles'\nimport { ListWrapper } from './styles'\nimport~~ React, { FC } from 'react'\n\ntype SubListProps = {\n item: ListItem\n Wrapper: 'ul' \| 'ol'\n}\n\nconst SubList: FC<SubListProps> = ({ item, Wrapper }) => {\n return (\n <li>\n <span dangerouslySetInnerHTML={{ __html: item.content }} />\n {item.items && item.items.length ? (\n <Wrapper>\n {item.items &&\n item.items.map((subItem, index) => (\n <SubList key={index} item={subItem} Wrapper={Wrapper} />\n ))}\n </Wrapper>\n ) : null}\n </li>\n )\n}\n\n/*\n VisualContent renderer component that renders `list` type blocks\n * as `<ul>` or `<ol>` elements, depending on the list style.\n \n See {@doclink components/VisualContent/#customizing-components \| the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n \n @param props VisualDataBlock object. See {@link ListBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n const ~~listElement~~ = data.style === 'ordered' ? 'ol' : 'ul'\n\n return (\n <~~BlockWrapper~~ className=\"sl-content-block sl-list\">\n <ListWrapper ~~as={listElement}~~ className=\"sl-list__root\">\n {data.items.map((item, index) => (\n <SubList key={index} item={item} Wrapper={~~listElement~~} />\n ))}\n </ListWrapper>\n </~~BlockWrapper~~>\n )\n}\n\nexport default List\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/List/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAOjC,MAAM,OAAO,GAAqB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE;IACtD,OAAO,CACL;QACE,8BAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI;QAC1D,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACjC,oBAAC,OAAO,QACL,IAAI,CAAC,KAAK;YACT,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE,CAAC,CACjC,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAI,CACzD,CAAC,CACI,CACX,CAAC,CAAC,CAAC,IAAI,CACL,CACN,CAAA;AACH,CAAC,CAAA;AAED;;;;;;;;;;GAUG;AACH,MAAM,IAAI,GAAmC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA;IAE1D,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B;QACvC,oBAAC,WAAW,IAAC,SAAS,EAAC,eAAe,IACnC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,oBAAC,OAAO,IAAC,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,GAAI,CAC1D,CAAC,CACU,CACV,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,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 return (\n <li>\n <span dangerouslySetInnerHTML={{ __html: item.content }} />\n {item.items && item.items.length ? (\n <Wrapper>\n {item.items &&\n item.items.map((subItem, index) => (\n <SubList key={index} item={subItem} Wrapper={Wrapper} />\n ))}\n </Wrapper>\n ) : null}\n </li>\n )\n}\n\n/*\n VisualContent renderer component that renders `list` type blocks\n * as `<ul>` or `<ol>` elements, depending on the list style.\n \n See {@doclink components/VisualContent/#customizing-components \| the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n \n @param props VisualDataBlock object. See {@link ListBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst List: FC<VisualDataBlock<ListBlock>> = ({ data }) => {\n const ListWrapper = data.style === 'ordered' ? 'ol' : 'ul'\n\n return (\n <div className=\"sl-content-block sl-list\">\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/esm/VisualContent/blocks/Paragraph.d.ts.map CHANGED Viewed

	@@ -1 +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"}
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;AACtE,OAAc,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,QAAA,MAAM,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,cAAc,CAAC,CAelD,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -1,4 +1,3 @@
-import { BlockWrapper } from '../styles';
 import React from 'react';
 /**
  * VisualContent renderer component that renders `paragraph` type blocks
@@ -14,10 +13,10 @@ import React from 'react';
  */
 const Paragraph = ({ data }) => {
     if (!data.text)
-        return (React.createElement(BlockWrapper, { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
+        return (React.createElement("div", { className: "sl-content-block sl-paragraph empty", "aria-hidden": true },
             React.createElement("p", null,
                 React.createElement("br", null))));
-    return (React.createElement(BlockWrapper, { className: "sl-content-block sl-paragraph" },
+    return (React.createElement("div", { className: "sl-content-block sl-paragraph" },
         React.createElement("p", { dangerouslySetInnerHTML: { __html: data.text } })));
 };
 export default Paragraph;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AACA,OAAO,~~EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,~~KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,~~oBAAC~~,~~YAAY,IAAC,~~SAAS,EAAC,qCAAqC;~~YAC3D~~;gBACE,+BAAM,CACJ,~~CACS~~,~~CAChB~~,CAAA;IAEH,OAAO,CACL,~~oBAAC~~,~~YAAY,IAAC,~~SAAS,EAAC,+BAA+B;~~QACrD~~,2BAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,~~CACxC~~,~~CAChB~~,CAAA;AACH,CAAC,CAAA;AAED,eAAe,SAAS,CAAA","sourcesContent":["import { ParagraphBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport ~~{ BlockWrapper } from '../styles'\nimport~~ React, { FC } from 'react'\n\n/*\n VisualContent renderer component that renders `paragraph` type blocks\n * as `<p>` elements. Empty paragraph blocks (generally used to break\n * lines) will have an `empty` class added to them.\n \n See {@doclink components/VisualContent/#customizing-components \| the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n \n @param props VisualDataBlock object. See {@link ParagraphBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Paragraph: FC<VisualDataBlock<ParagraphBlock>> = ({ data }) => {\n if (!data.text)\n return (\n <~~BlockWrapper~~ className=\"sl-content-block sl-paragraph empty\" aria-hidden>\n <p>\n <br />\n </p>\n </~~BlockWrapper~~>\n )\n\n return (\n <~~BlockWrapper~~ className=\"sl-content-block sl-paragraph\">\n <p dangerouslySetInnerHTML={{ __html: data.text }} />\n </~~BlockWrapper~~>\n )\n}\n\nexport default Paragraph\n"]}
1	+ {"version":3,"file":"Paragraph.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Paragraph.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;;GAWG;AACH,MAAM,SAAS,GAAwC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAClE,IAAI,CAAC,IAAI,CAAC,IAAI;QACZ,OAAO,CACL,6BAAK,SAAS,EAAC,qCAAqC;YAClD;gBACE,+BAAM,CACJ,CACA,CACP,CAAA;IAEH,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,2BAAG,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,IAAI,EAAE,GAAI,CACjD,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,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 if (!data.text)\n return (\n <div className=\"sl-content-block sl-paragraph empty\" aria-hidden>\n <p>\n <br />\n </p>\n </div>\n )\n\n return (\n <div className=\"sl-content-block sl-paragraph\">\n <p dangerouslySetInnerHTML={{ __html: data.text }} />\n </div>\n )\n}\n\nexport default Paragraph\n"]}

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

	@@ -1 +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"}
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;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/esm/VisualContent/blocks/Quote.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import { BlockWrapper } from '../styles';
 import React from 'react';
 /**
  * VisualContent renderer component that renders `quote` type blocks
@@ -12,7 +11,7 @@ import React from 'react';
  * @group VisualContent Renderers
  */
 const Quote = ({ data }) => {
-    return (React.createElement(BlockWrapper, { className: "sl-content-block sl-quote" },
+    return (React.createElement("div", { className: "sl-content-block sl-quote" },
         React.createElement("blockquote", null, data.text)));
 };
 export default Quote;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AACA,OAAO,~~EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,~~KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,~~oBAAC~~,~~YAAY,IAAC,~~SAAS,EAAC,2BAA2B;~~QACjD~~,wCAAa,IAAI,CAAC,IAAI,CAAc,~~CACvB~~,~~CAChB~~,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA","sourcesContent":["import { QuoteBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport ~~{ BlockWrapper } from '../styles'\nimport~~ React, { FC } from 'react'\n\n/*\n VisualContent renderer component that renders `quote` type blocks\n * as `<blockquote>` elements.\n \n See {@doclink components/VisualContent/#customizing-components \| the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n \n @param props VisualDataBlock object. See {@link QuoteBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Quote: FC<VisualDataBlock<QuoteBlock>> = ({ data }) => {\n return (\n <~~BlockWrapper~~ className=\"sl-content-block sl-quote\">\n <blockquote>{data.text}</blockquote>\n </~~BlockWrapper~~>\n )\n}\n\nexport default Quote\n"]}
1	+ {"version":3,"file":"Quote.js","sourceRoot":"","sources":["../../../../src/VisualContent/blocks/Quote.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,OAAO,CACL,6BAAK,SAAS,EAAC,2BAA2B;QACxC,wCAAa,IAAI,CAAC,IAAI,CAAc,CAChC,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,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/esm/VisualContent/blocks/Video/index.d.ts.map CHANGED Viewed

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

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

@@ -1,5 +1,3 @@
-import { BlockWrapper } from '../../styles';
-import { VideoWrapper } from './styles';
 import React from 'react';
 /**
  * VisualContent renderer component that renders `video` type blocks
@@ -15,9 +13,9 @@ import React from 'react';
 const Video = ({ data }) => {
     const { html, width, caption } = data;
     const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed';
-    return (React.createElement(BlockWrapper, { className: `sl-content-block sl-video sl-width-${widthType}` },
-        React.createElement(VideoWrapper, { width: width },
-            React.createElement("div", { dangerouslySetInnerHTML: { __html: html } }),
+    return (React.createElement("div", { className: `sl-content-block sl-video sl-width-${widthType}` },
+        React.createElement("figure", { className: "sl-figure" },
+            React.createElement("div", { dangerouslySetInnerHTML: { __html: html }, style: { maxWidth: widthType === 'fixed' ? `${width}` : undefined } }),
             caption && (React.createElement("figcaption", { dangerouslySetInnerHTML: { __html: caption } })))));
 };
 export default Video;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AACA,OAAO,~~EAAE,YAAY,EAAE,MAAM,cAAc,CAAA;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,~~KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;IAErC,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAE9E,OAAO,CACL,~~oBAAC~~,~~YAAY,IAAC,~~SAAS,EAAE,sCAAsC,SAAS,EAAE;~~QACxE~~,~~oBAAC~~,~~YAAY~~,~~IAAC~~,~~KAAK,EAAE,KAAK~~;~~YACxB~~,~~6BAAK~~,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,~~GAAI~~;~~YAEjD~~,OAAO,IAAI,CACV,oCAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7D,~~CACY~~,~~CACF~~,~~CAChB~~,CAAA;AACH,CAAC,CAAA;AAED,eAAe,KAAK,CAAA","sourcesContent":["import { VideoBlock, VisualDataBlock } from '@starlightcms/js-sdk'\nimport ~~{ BlockWrapper } from '../../styles'\nimport { VideoWrapper } from './styles'\nimport~~ React, { FC } from 'react'\n\n/*\n VisualContent renderer component that renders `video` type blocks\n * as a responsive video along with its caption (if defined).\n \n See {@doclink components/VisualContent/#customizing-components \| the guide page on the VisualContent component}\n * to learn how to customize block renderer components like this one.\n \n @param props VisualDataBlock object. See {@link VideoBlock} to learn the\n * type of data this component receives.\n * @group VisualContent Renderers\n */\nconst Video: FC<VisualDataBlock<VideoBlock>> = ({ data }) => {\n const { html, width, caption } = data\n\n const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n return (\n <~~BlockWrapper~~ className={`sl-content-block sl-video sl-width-${widthType}`}>\n <~~VideoWrapper~~ ~~width={width}~~>\n <div dangerouslySetInnerHTML={{ __html: html }} />\n\n {caption && (\n <figcaption dangerouslySetInnerHTML={{ __html: caption }} />\n )}\n </~~VideoWrapper~~>\n </~~BlockWrapper~~>\n )\n}\n\nexport default Video\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/VisualContent/blocks/Video/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAa,MAAM,OAAO,CAAA;AAEjC;;;;;;;;;;GAUG;AACH,MAAM,KAAK,GAAoC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI,CAAA;IAErC,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAE9E,OAAO,CACL,6BAAK,SAAS,EAAE,sCAAsC,SAAS,EAAE;QAC/D,gCAAQ,SAAS,EAAC,WAAW;YAC3B,6BACE,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,oCAAY,uBAAuB,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,GAAI,CAC7D,CACM,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,eAAe,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 } = data\n\n const widthType = ['auto', 'justify', 'max'].includes(width) ? width : 'fixed'\n\n return (\n <div className={`sl-content-block sl-video sl-width-${widthType}`}>\n <figure className=\"sl-figure\">\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/esm/VisualContent/index.d.ts CHANGED Viewed

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

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

	@@ -1 +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"}
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;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,OAmD3B,CAAA;AAED,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,EACrB,KAAK,IAAI,cAAc,GACxB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}

package/dist/esm/VisualContent/index.js CHANGED Viewed

@@ -1,7 +1,6 @@
 'use client';
 import Image from './blocks/Image';
 import Paragraph from './blocks/Paragraph';
-import { OuterWrapper } from './styles';
 import React, { useMemo } from 'react';
 import Header from './blocks/Header';
 import Quote from './blocks/Quote';
@@ -84,7 +83,7 @@ export const VisualContent = ({ content, components = {}, excerpt = false, excer
         const Component = componentList.paragraph;
         return (React.createElement(Component, { key: block.id, id: block.id, type: block.type, data: { text: excerptText } }));
     }
-    return (React.createElement(OuterWrapper, { className: "sl-visual-content" }, content.blocks.map((block) => {
+    return (React.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block) => {
         const Component = componentList[block.type];
         if (!Component)
             return null;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAIZ,OAAO,KAAuB,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,~~EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,~~KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACC,EAAe,EAAE;IACpC,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE;~~QACZ~~,OAAO,IAA8B,CAAA;~~KACtC~~;IAED,IAAI,OAAO,EAAE;~~QACX~~,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAE1D,CAAA;QAEb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAA8B,CAAA;QAErE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACvC,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,GAAG,aAAa;YACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;YACjD,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QAEzC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAC3B,CACH,CAAA;~~KACF~~;IACD,OAAO,CACL,~~oBAAC~~,~~YAAY,IAAC,~~SAAS,EAAC,mBAAmB,~~IACxC~~,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAA;QAE3B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAa,GACzB,CACH,CAAA;IACH,CAAC,CAAC,~~CACW~~,~~CAChB~~,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,EACrB,KAAK,IAAI,cAAc,GACxB,CAAA","sourcesContent":["'use client'\n\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Image, { ImageOptions } from './blocks/Image'\nimport Paragraph from './blocks/Paragraph'\nimport ~~{ OuterWrapper } from './styles'\nimport~~ React, { useMemo } from 'react'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\nimport Video from './blocks/Video'\n\nconst defaultComponents: BlockComponents = {\n paragraph: Paragraph,\n header: Header,\n quote: Quote,\n image: Image,\n raw: HTML,\n list: List,\n video: Video,\n}\n\n/*\n Renders HTML content from data returned by a Visual Editor field on Starlight.\n \n The only required prop is `content`, which is the data returned by a Visual\n * Editor field. Additionally, you can provide custom components to render each\n * data block type.\n \n You can also pass the `excerpt` boolean prop to only render a portion of the\n * content, which is useful to summarize the content in lists.\n \n To learn how to customize the rendered content, take a look at the\n * [Customizing the output](#) guide page.\n \n @example Requesting an entry and rendering its content.\n \n Assume we created a \"Posts\" model with a slug of `posts`, and placed a Visual\n * Editor field with a key of `post_content` on it.\n \n ```jsx\n * import Starlight, { VisualContent } from '@starlightcms/react-sdk'\n \n const EntryComponent = ({ slug }) => {\n * const [entry, setEntry] = useState(null)\n \n // This is just an example, you could fetch\n * // the entry any way you want.\n * useEffect(async () => {\n * const response = await Starlight.posts.entries.get(slug)\n \n setEntry(response.data)\n * }, [ slug ])\n \n // After fetching, content will be on the `entry.data.post_content` property.\n * return (\n * entry ? (\n * <article>\n * <h1>{entry.title}</h1>\n * <VisualContent content={entry.data.post_content} />\n * </article>\n * ) : (\n * <div>Loading...</div>\n * )\n * )\n * }\n \n ```\n \n @param props Component props. See {@link VisualContentProps} to see the\n * available options.\n * @group VisualContent\n */\nexport const VisualContent = ({\n content,\n components = {},\n excerpt = false,\n excerptLength = 40,\n}: VisualContentProps): JSX.Element => {\n const componentList = useMemo(\n () => ({ ...defaultComponents, ...components }),\n [components]\n )\n\n if (!content) {\n return null as unknown as JSX.Element\n }\n\n if (excerpt) {\n const block = content.blocks.find((block) => block.type === 'paragraph') as\n \| VisualDataBlock<ParagraphBlock>\n \| undefined\n\n if (!block \|\| !block.data.text) return null as unknown as JSX.Element\n\n const text = block.data.text.split(' ')\n const excerptText =\n text.length > excerptLength\n ? text.splice(0, excerptLength).join(' ') + '...'\n : text.join(' ')\n const Component = componentList.paragraph\n\n return (\n <Component\n key={block.id}\n id={block.id}\n type={block.type}\n data={{ text: excerptText }}\n />\n )\n }\n return (\n <~~OuterWrapper~~ className=\"sl-visual-content\">\n {content.blocks.map((block) => {\n const Component = componentList[block.type]\n\n if (!Component) return null\n\n return (\n <Component\n key={block.id}\n id={block.id}\n type={block.type}\n data={block.data as never}\n />\n )\n })}\n </~~OuterWrapper~~>\n )\n}\n\nexport {\n Paragraph as ParagraphComponent,\n Header as HeaderComponent,\n Quote as QuoteComponent,\n Image as ImageComponent,\n HTML as HTMLComponent,\n List as ListComponent,\n Video as VideoComponent,\n}\n\nexport type { VisualContentProps, ImageOptions }\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAIZ,OAAO,KAAuB,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAElC,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,SAAS;IACpB,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,KAAK;IACZ,GAAG,EAAE,IAAI;IACT,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,KAAK;CACb,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACC,EAAe,EAAE;IACpC,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,OAAO,IAA8B,CAAA;IACvC,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAE1D,CAAA;QAEb,IAAI,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAA8B,CAAA;QAErE,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QACvC,MAAM,WAAW,GACf,IAAI,CAAC,MAAM,GAAG,aAAa;YACzB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,KAAK;YACjD,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QACpB,MAAM,SAAS,GAAG,aAAa,CAAC,SAAS,CAAA;QAEzC,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,GAC3B,CACH,CAAA;IACH,CAAC;IACD,OAAO,CACL,6BAAK,SAAS,EAAC,mBAAmB,IAC/B,OAAO,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;QAC5B,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAE3C,IAAI,CAAC,SAAS;YAAE,OAAO,IAAI,CAAA;QAE3B,OAAO,CACL,oBAAC,SAAS,IACR,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,IAAI,EAAE,KAAK,CAAC,IAAa,GACzB,CACH,CAAA;IACH,CAAC,CAAC,CACE,CACP,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,EACrB,KAAK,IAAI,cAAc,GACxB,CAAA","sourcesContent":["'use client'\n\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Image, { ImageOptions } from './blocks/Image'\nimport Paragraph from './blocks/Paragraph'\nimport React, { useMemo } from 'react'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\nimport Video from './blocks/Video'\n\nconst defaultComponents: BlockComponents = {\n paragraph: Paragraph,\n header: Header,\n quote: Quote,\n image: Image,\n raw: HTML,\n list: List,\n video: Video,\n}\n\n/*\n Renders HTML content from data returned by a Visual Editor field on Starlight.\n \n The only required prop is `content`, which is the data returned by a Visual\n * Editor field. Additionally, you can provide custom components to render each\n * data block type.\n \n You can also pass the `excerpt` boolean prop to only render a portion of the\n * content, which is useful to summarize the content in lists.\n \n To learn how to customize the rendered content, take a look at the\n * [Customizing the output](#) guide page.\n \n @example Requesting an entry and rendering its content.\n \n Assume we created a \"Posts\" model with a slug of `posts`, and placed a Visual\n * Editor field with a key of `post_content` on it.\n \n ```jsx\n * import Starlight, { VisualContent } from '@starlightcms/react-sdk'\n \n const EntryComponent = ({ slug }) => {\n * const [entry, setEntry] = useState(null)\n \n // This is just an example, you could fetch\n * // the entry any way you want.\n * useEffect(async () => {\n * const response = await Starlight.posts.entries.get(slug)\n \n setEntry(response.data)\n * }, [ slug ])\n \n // After fetching, content will be on the `entry.data.post_content` property.\n * return (\n * entry ? (\n * <article>\n * <h1>{entry.title}</h1>\n * <VisualContent content={entry.data.post_content} />\n * </article>\n * ) : (\n * <div>Loading...</div>\n * )\n * )\n * }\n \n ```\n \n @param props Component props. See {@link VisualContentProps} to see the\n * available options.\n * @group VisualContent\n */\nexport const VisualContent = ({\n content,\n components = {},\n excerpt = false,\n excerptLength = 40,\n}: VisualContentProps): JSX.Element => {\n const componentList = useMemo(\n () => ({ ...defaultComponents, ...components }),\n [components]\n )\n\n if (!content) {\n return null as unknown as JSX.Element\n }\n\n if (excerpt) {\n const block = content.blocks.find((block) => block.type === 'paragraph') as\n \| VisualDataBlock<ParagraphBlock>\n \| undefined\n\n if (!block \|\| !block.data.text) return null as unknown as JSX.Element\n\n const text = block.data.text.split(' ')\n const excerptText =\n text.length > excerptLength\n ? text.splice(0, excerptLength).join(' ') + '...'\n : text.join(' ')\n const Component = componentList.paragraph\n\n return (\n <Component\n key={block.id}\n id={block.id}\n type={block.type}\n data={{ text: excerptText }}\n />\n )\n }\n return (\n <div className=\"sl-visual-content\">\n {content.blocks.map((block) => {\n const Component = componentList[block.type]\n\n if (!Component) return null\n\n return (\n <Component\n key={block.id}\n id={block.id}\n type={block.type}\n data={block.data as never}\n />\n )\n })}\n </div>\n )\n}\n\nexport {\n Paragraph as ParagraphComponent,\n Header as HeaderComponent,\n Quote as QuoteComponent,\n Image as ImageComponent,\n HTML as HTMLComponent,\n List as ListComponent,\n Video as VideoComponent,\n}\n\nexport type { VisualContentProps, ImageOptions }\n"]}

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

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

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

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