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

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,SAAS,EACT,SAAS,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"}
+{"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"}

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

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

@@ -1,3 +1,4 @@
+'use client';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
 /**
@@ -136,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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import 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/esm/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,CASxC,CAAA;AAED,eAAe,IAAI,CAAA"}

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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -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,OAQ5D,CAAA;AAED,eAAe,MAAM,CAAA"}

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

@@ -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

@@ -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"]}
+{"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

@@ -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

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

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

@@ -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

@@ -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"]}
+{"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

@@ -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;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

@@ -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

@@ -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"]}
+{"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

@@ -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,CAelD,CAAA;AAED,eAAe,SAAS,CAAA"}

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

@@ -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

@@ -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"]}
+{"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

@@ -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/esm/VisualContent/blocks/Quote.js

@@ -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

@@ -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"]}
+{"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

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

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

@@ -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

@@ -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"]}
+{"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

@@ -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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";AACA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,EAAE,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAG1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAYlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,eAAO,MAAM,aAAa,qDAKvB,kBAAkB,KAAG,WAmDvB,CAAA;AAED,OAAO,EACL,SAAS,IAAI,kBAAkB,EAC/B,MAAM,IAAI,eAAe,EACzB,KAAK,IAAI,cAAc,EACvB,KAAK,IAAI,cAAc,EACvB,IAAI,IAAI,aAAa,EACrB,IAAI,IAAI,aAAa,EACrB,KAAK,IAAI,cAAc,GACxB,CAAA;AAED,YAAY,EAAE,kBAAkB,EAAE,YAAY,EAAE,CAAA"}
+{"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

@@ -1,6 +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';
@@ -83,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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Image, { ImageOptions } from './blocks/Image'\nimport Paragraph from './blocks/Paragraph'\nimport { OuterWrapper } from './styles'\nimport React, { useMemo } from 'react'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\nimport Video from './blocks/Video'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n  video: Video,\n}\n\n/**\n * Renders HTML content from data returned by a Visual Editor field on Starlight.\n *\n * The only required prop is `content`, which is the data returned by a Visual\n * Editor field. Additionally, you can provide custom components to render each\n * data block type.\n *\n * You can also pass the `excerpt` boolean prop to only render a portion of the\n * content, which is useful to summarize the content in lists.\n *\n * To learn how to customize the rendered content, take a look at the\n * [Customizing the output](#) guide page.\n *\n * @example Requesting an entry and rendering its content.\n *\n * Assume we created a \"Posts\" model with a slug of `posts`, and placed a Visual\n * Editor field with a key of `post_content` on it.\n *\n * ```jsx\n * import Starlight, { VisualContent } from '@starlightcms/react-sdk'\n *\n * const EntryComponent = ({ slug }) => {\n *   const [entry, setEntry] = useState(null)\n *\n *   // This is just an example, you could fetch\n *   // the entry any way you want.\n *   useEffect(async () => {\n *     const response = await Starlight.posts.entries.get(slug)\n *\n *     setEntry(response.data)\n *   }, [ slug ])\n *\n *   // After fetching, content will be on the `entry.data.post_content` property.\n *   return (\n *     entry ? (\n *        <article>\n *          <h1>{entry.title}</h1>\n *          <VisualContent content={entry.data.post_content} />\n *        </article>\n *     ) : (\n *       <div>Loading...</div>\n *     )\n *   )\n * }\n *\n * ```\n *\n * @param props Component props. See {@link VisualContentProps} to see the\n * available options.\n * @group VisualContent\n */\nexport const VisualContent = ({\n  content,\n  components = {},\n  excerpt = false,\n  excerptLength = 40,\n}: VisualContentProps): JSX.Element => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null as unknown as JSX.Element\n  }\n\n  if (excerpt) {\n    const block = content.blocks.find((block) => block.type === 'paragraph') as\n      | VisualDataBlock<ParagraphBlock>\n      | undefined\n\n    if (!block || !block.data.text) return null as unknown as JSX.Element\n\n    const text = block.data.text.split(' ')\n    const excerptText =\n      text.length > excerptLength\n        ? text.splice(0, excerptLength).join(' ') + '...'\n        : text.join(' ')\n    const Component = componentList.paragraph\n\n    return (\n      <Component\n        key={block.id}\n        id={block.id}\n        type={block.type}\n        data={{ text: excerptText }}\n      />\n    )\n  }\n  return (\n    <OuterWrapper className=\"sl-visual-content\">\n      {content.blocks.map((block) => {\n        const Component = componentList[block.type]\n\n        if (!Component) return null\n\n        return (\n          <Component\n            key={block.id}\n            id={block.id}\n            type={block.type}\n            data={block.data as never}\n          />\n        )\n      })}\n    </OuterWrapper>\n  )\n}\n\nexport {\n  Paragraph as ParagraphComponent,\n  Header as HeaderComponent,\n  Quote as QuoteComponent,\n  Image as ImageComponent,\n  HTML as HTMLComponent,\n  List as ListComponent,\n  Video as VideoComponent,\n}\n\nexport type { VisualContentProps, ImageOptions }\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"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","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

@@ -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

@@ -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"}
+{"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"}