@starlightcms/react-sdk 0.3.1 → 0.4.0

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { MediaObject } from '@starlightcms/js-sdk';
+export declare const GlobalLazyloadStyles: () => ReactNode;
+declare type ResponsiveImageProps = {
+    className?: string;
+    image: MediaObject | string;
+    sizes?: string;
+    alt?: string;
+    variation?: string;
+    background?: string;
+};
+export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, }: ResponsiveImageProps) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAKlD,eAAO,MAAM,oBAAoB,QAAO,SAMvC,CAAA;AAED,aAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,eAAe,6DAOzB,oBAAoB,KAAG,WAqGzB,CAAA"}

package/dist/cjs/ResponsiveImage/index.js

@@ -0,0 +1,106 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResponsiveImage = exports.GlobalLazyloadStyles = void 0;
+const react_1 = __importStar(require("react"));
+const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+const GlobalLazyloadStyles = () => {
+    return (react_1.default.createElement("noscript", null,
+        react_1.default.createElement("style", null, 'img.sl-lazyload{display: none;}')));
+};
+exports.GlobalLazyloadStyles = GlobalLazyloadStyles;
+const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', }) => {
+    const imageRef = (0, react_1.useRef)(null);
+    // When true, the image may load normally
+    const [canLoad, setCanLoad] = (0, react_1.useState)(false);
+    // When true, the image has been successfully loaded by the browser
+    const [hasLoaded, setHasLoaded] = (0, react_1.useState)(false);
+    // Get the optimized variation if available
+    const source = (0, react_1.useMemo)(() => {
+        // If the given image was a string, simply return it
+        if (typeof image === 'string' || !image.files)
+            return;
+        const chosenVariation = image.files.find((file) => file.variation === variation);
+        return chosenVariation
+            ? chosenVariation
+            : image.files.find((file) => file.variation === 'original');
+    }, [image, variation]);
+    // Create a srcset
+    const sourceSet = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (!source)
+            return;
+        // source is only defined if image is a MediaObject, so we assert it as one
+        const img = image;
+        const sets = [];
+        const large = img.files.find((file) => file.variation === 'large');
+        const medium = img.files.find((file) => file.variation === 'medium');
+        const thumbnail = img.files.find((file) => file.variation === 'thumbnail');
+        if (thumbnail)
+            sets.push(`${encodeURI(thumbnail.path)} ${(_a = thumbnail.meta) === null || _a === void 0 ? void 0 : _a.width}w`);
+        if (medium)
+            sets.push(`${encodeURI(medium.path)} 600w`);
+        if (large)
+            sets.push(`${encodeURI(large.path)} 1200w`);
+        sets.push(`${encodeURI(source.path)} ${(_b = source.meta) === null || _b === void 0 ? void 0 : _b.width}w`);
+        return sets.join(',');
+    }, [source, image]);
+    const imageStyle = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: background || hasLoaded || typeof image === 'string'
+                ? 'transparent'
+                : `#${(_a = source === null || source === void 0 ? void 0 : source.background_color) !== null && _a !== void 0 ? _a : 'transparent'}`,
+        };
+    }, [background, source, hasLoaded, image]);
+    (0, react_1.useEffect)(() => {
+        let ref = null;
+        const observer = new IntersectionObserver((entries, observer) => {
+            if (entries[0].intersectionRatio > 0) {
+                // Image entered the viewport, set it as loadable
+                setCanLoad(true);
+                // Stop observing the image
+                observer.unobserve(ref);
+            }
+        });
+        if (imageRef.current) {
+            ref = imageRef.current;
+            observer.observe(ref);
+        }
+        const loadHandler = () => {
+            // After loading the image, the "hasLoaded" flag is used to hide the background color
+            setHasLoaded(true);
+        };
+        ref === null || ref === void 0 ? void 0 : ref.addEventListener('load', loadHandler);
+        return () => {
+            if (ref) {
+                observer.unobserve(ref);
+                ref.removeEventListener('load', loadHandler);
+            }
+        };
+    }, [source]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("img", { ref: imageRef, className: 'sl-lazyload ' + className, style: imageStyle, src: canLoad ? (source === null || source === void 0 ? void 0 : source.path) || image : transparentImage, srcSet: canLoad ? (sourceSet ? sourceSet : undefined) : undefined, sizes: canLoad ? (sourceSet ? sizes : undefined) : undefined, alt: alt }),
+        react_1.default.createElement("noscript", null,
+            react_1.default.createElement("img", { src: (source && source.path) || image, alt: alt }))));
+};
+exports.ResponsiveImage = ResponsiveImage;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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'\n\nconst transparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='\n\nexport const GlobalLazyloadStyles = (): ReactNode => {\n  return (\n    <noscript>\n      <style>{'img.sl-lazyload{display: none;}'}</style>\n    </noscript>\n  )\n}\n\ntype ResponsiveImageProps = {\n  className?: string\n  image: MediaObject | string\n  sizes?: string\n  alt?: string\n  variation?: string\n  background?: string\n}\n\nexport const ResponsiveImage = ({\n  className = '',\n  image,\n  sizes = '',\n  alt = typeof image === 'string' ? '' : image.alt,\n  variation = 'optimized',\n  background = '',\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((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    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"]}

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

@@ -6,7 +6,6 @@ import Quote from './blocks/Quote';
 import Image from './blocks/Image';
 import HTML from './blocks/HTML';
 import List from './blocks/List';
-declare const VisualContent: FC<VisualContentProps>;
-export default VisualContent;
-export { Paragraph, Header, Quote, Image, HTML, List };
+export declare const VisualContent: FC<VisualContentProps>;
+export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+BzC,CAAA;AAED,eAAe,aAAa,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuDhD,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,GACtB,CAAA"}

package/dist/cjs/VisualContent/index.js

@@ -22,20 +22,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.List = exports.HTML = exports.Image = exports.Quote = exports.Header = exports.Paragraph = void 0;
+exports.ListComponent = exports.HTMLComponent = exports.ImageComponent = exports.QuoteComponent = exports.HeaderComponent = exports.ParagraphComponent = exports.VisualContent = void 0;
 const react_1 = __importStar(require("react"));
 const Paragraph_1 = __importDefault(require("./blocks/Paragraph"));
-exports.Paragraph = Paragraph_1.default;
+exports.ParagraphComponent = Paragraph_1.default;
 const Header_1 = __importDefault(require("./blocks/Header"));
-exports.Header = Header_1.default;
+exports.HeaderComponent = Header_1.default;
 const Quote_1 = __importDefault(require("./blocks/Quote"));
-exports.Quote = Quote_1.default;
+exports.QuoteComponent = Quote_1.default;
 const Image_1 = __importDefault(require("./blocks/Image"));
-exports.Image = Image_1.default;
+exports.ImageComponent = Image_1.default;
 const HTML_1 = __importDefault(require("./blocks/HTML"));
-exports.HTML = HTML_1.default;
+exports.HTMLComponent = HTML_1.default;
 const List_1 = __importDefault(require("./blocks/List"));
-exports.List = List_1.default;
+exports.ListComponent = List_1.default;
 const defaultComponents = {
     paragraph: Paragraph_1.default,
     header: Header_1.default,
@@ -44,11 +44,22 @@ const defaultComponents = {
     raw: HTML_1.default,
     list: List_1.default,
 };
-const VisualContent = ({ content, components = {}, }) => {
-    const componentList = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
+const VisualContent = ({ content, components = {}, excerpt = false, excerptLength = 40, }) => {
     if (!content) {
         return null;
     }
+    const componentList = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
+    if (excerpt) {
+        const block = content.blocks.find((block) => block.type === 'paragraph');
+        if (!block)
+            return null;
+        const text = block.data.text.split(' ');
+        const excerptText = text.length > excerptLength
+            ? text.splice(0, excerptLength).join(' ') + '...'
+            : text.join(' ');
+        const Component = componentList.paragraph;
+        return (react_1.default.createElement(Component, { key: block.id, id: block.id, type: block.type, data: { text: excerptText } }));
+    }
     return (react_1.default.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block) => {
         const Component = componentList[block.type];
         if (!Component)
@@ -56,5 +67,5 @@ const VisualContent = ({ content, components = {}, }) => {
         return (react_1.default.createElement(Component, { key: block.id, id: block.id, type: block.type, data: block.data }));
     })));
 };
-exports.default = VisualContent;
+exports.VisualContent = VisualContent;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAE1C,mEAA0C;AAmDjC,oBAnDF,mBAAS,CAmDE;AAlDlB,6DAAoC;AAkDhB,iBAlDb,gBAAM,CAkDa;AAjD1B,2DAAkC;AAiDN,gBAjDrB,eAAK,CAiDqB;AAhDjC,2DAAkC;AAgDC,gBAhD5B,eAAK,CAgD4B;AA/CxC,yDAAgC;AA+CU,eA/CnC,cAAI,CA+CmC;AA9C9C,yDAAgC;AA8CgB,eA9CzC,cAAI,CA8CyC;AA5CpD,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,mBAAS;IACpB,MAAM,EAAE,gBAAM;IACd,KAAK,EAAE,eAAK;IACZ,KAAK,EAAE,eAAK;IACZ,GAAG,EAAE,cAAI;IACT,IAAI,EAAE,cAAI;CACX,CAAA;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,UAAU,GAAG,EAAE,GAChB,EAAE,EAAE;IACH,MAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,OAAO,CACL,uCAAK,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,8BAAC,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,kBAAe,aAAa,CAAA","sourcesContent":["import React, { FC, useMemo } from 'react'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n}\n\nconst VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n}) => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null\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 default VisualContent\n\nexport { Paragraph, Header, Quote, Image, HTML, List }\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAG1C,mEAA0C;AA0E3B,6BA1ER,mBAAS,CA0EiB;AAzEjC,6DAAoC;AA0ExB,0BA1EL,gBAAM,CA0Ec;AAzE3B,2DAAkC;AA0EvB,yBA1EJ,eAAK,CA0Ea;AAzEzB,2DAAkC;AA0EvB,yBA1EJ,eAAK,CA0Ea;AAzEzB,yDAAgC;AA0EtB,wBA1EH,cAAI,CA0EY;AAzEvB,yDAAgC;AA0EtB,wBA1EH,cAAI,CA0EY;AAxEvB,MAAM,iBAAiB,GAAoB;IACzC,SAAS,EAAE,mBAAS;IACpB,MAAM,EAAE,gBAAM;IACd,KAAK,EAAE,eAAK;IACZ,KAAK,EAAE,eAAK;IACZ,GAAG,EAAE,cAAI;IACT,IAAI,EAAE,cAAI;CACX,CAAA;AAEM,MAAM,aAAa,GAA2B,CAAC,EACpD,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACnB,EAAE,EAAE;IACH,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAA;QAExE,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA;QAEvB,MAAM,IAAI,GAAI,KAAyC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC5E,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,8BAAC,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;IAED,OAAO,CACL,uCAAK,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,8BAAC,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;AAvDY,QAAA,aAAa,iBAuDzB","sourcesContent":["import React, { FC, useMemo } from 'react'\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n}\n\nexport const VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n  excerpt = false,\n  excerptLength = 40,\n}) => {\n  if (!content) {\n    return null\n  }\n\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (excerpt) {\n    const block = content.blocks.find((block) => block.type === 'paragraph')\n\n    if (!block) return null\n\n    const text = (block as VisualDataBlock<ParagraphBlock>).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\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}\n"]}

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

@@ -12,6 +12,8 @@ export interface BlockComponents extends Implements<Record<BlockType, unknown>,
 export declare type VisualContentProps = {
     content?: VisualData;
     components?: Partial<BlockComponents>;
+    excerpt?: boolean;
+    excerptLength?: number;
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

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,EACV,MAAM,sBAAsB,CAAA;AAG7B,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC/D,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,GAAG,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9C,IAAI,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;CAChD;AAED,oBAAY,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;CACtC,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EACL,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,UAAU,EACV,eAAe,EACf,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,sBAAsB,CAAA;AAG7B,aAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAEzD,MAAM,WAAW,eACf,SAAQ,UAAU,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EAAE,eAAe,CAAC;IAC/D,SAAS,EAAE,aAAa,CAAC,eAAe,CAAC,cAAc,CAAC,CAAC,CAAA;IACzD,MAAM,EAAE,aAAa,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC,CAAA;IACnD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,aAAa,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC,CAAA;IACjD,GAAG,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;IAC9C,IAAI,EAAE,aAAa,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC,CAAA;CAChD;AAED,oBAAY,kBAAkB,GAAG;IAC/B,OAAO,CAAC,EAAE,UAAU,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IACrC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA"}

package/dist/cjs/VisualContent/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n  HTMLBlock,\n  ListBlock,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n  raw: ComponentType<VisualDataBlock<HTMLBlock>>\n  list: ComponentType<VisualDataBlock<ListBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n  HTMLBlock,\n  ListBlock,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n  raw: ComponentType<VisualDataBlock<HTMLBlock>>\n  list: ComponentType<VisualDataBlock<ListBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n  excerpt?: boolean\n  excerptLength?: number\n}\n"]}

package/dist/cjs/index.d.ts

@@ -1,6 +1,6 @@
 import Starlight from '@starlightcms/js-sdk';
 export * from '@starlightcms/js-sdk';
-import VisualContent from './VisualContent';
-export { VisualContent };
+export * from './VisualContent';
+export * from './ResponsiveImage';
 export default Starlight;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,sBAAsB,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AAEpC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,CAAA;AAExB,eAAe,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,sBAAsB,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AAEpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AAEjC,eAAe,SAAS,CAAA"}

package/dist/cjs/index.js

@@ -13,10 +13,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisualContent = void 0;
 const js_sdk_1 = __importDefault(require("@starlightcms/js-sdk"));
 __exportStar(require("@starlightcms/js-sdk"), exports);
-const VisualContent_1 = __importDefault(require("./VisualContent"));
-exports.VisualContent = VisualContent_1.default;
+__exportStar(require("./VisualContent"), exports);
+__exportStar(require("./ResponsiveImage"), exports);
 exports.default = js_sdk_1.default;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kEAA4C;AAC5C,uDAAoC;AAEpC,oEAA2C;AAElC,wBAFF,uBAAa,CAEE;AAEtB,kBAAe,gBAAS,CAAA","sourcesContent":["import Starlight from '@starlightcms/js-sdk'\nexport * from '@starlightcms/js-sdk'\n\nimport VisualContent from './VisualContent'\n\nexport { VisualContent }\n\nexport default Starlight\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,kEAA4C;AAC5C,uDAAoC;AAEpC,kDAA+B;AAC/B,oDAAiC;AAEjC,kBAAe,gBAAS,CAAA","sourcesContent":["import Starlight from '@starlightcms/js-sdk'\nexport * from '@starlightcms/js-sdk'\n\nexport * from './VisualContent'\nexport * from './ResponsiveImage'\n\nexport default Starlight\n"]}

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

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { MediaObject } from '@starlightcms/js-sdk';
+export declare const GlobalLazyloadStyles: () => ReactNode;
+declare type ResponsiveImageProps = {
+    className?: string;
+    image: MediaObject | string;
+    sizes?: string;
+    alt?: string;
+    variation?: string;
+    background?: string;
+};
+export declare const ResponsiveImage: ({ className, image, sizes, alt, variation, background, }: ResponsiveImageProps) => JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ResponsiveImage/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAwC,MAAM,OAAO,CAAA;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAKlD,eAAO,MAAM,oBAAoB,QAAO,SAMvC,CAAA;AAED,aAAK,oBAAoB,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,WAAW,GAAG,MAAM,CAAA;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,eAAe,6DAOzB,oBAAoB,KAAG,WAqGzB,CAAA"}

package/dist/esm/ResponsiveImage/index.js

@@ -0,0 +1,82 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+const transparentImage = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+export const GlobalLazyloadStyles = () => {
+    return (React.createElement("noscript", null,
+        React.createElement("style", null, 'img.sl-lazyload{display: none;}')));
+};
+export const ResponsiveImage = ({ className = '', image, sizes = '', alt = typeof image === 'string' ? '' : image.alt, variation = 'optimized', background = '', }) => {
+    const imageRef = useRef(null);
+    // When true, the image may load normally
+    const [canLoad, setCanLoad] = useState(false);
+    // When true, the image has been successfully loaded by the browser
+    const [hasLoaded, setHasLoaded] = useState(false);
+    // Get the optimized variation if available
+    const source = useMemo(() => {
+        // If the given image was a string, simply return it
+        if (typeof image === 'string' || !image.files)
+            return;
+        const chosenVariation = image.files.find((file) => file.variation === variation);
+        return chosenVariation
+            ? chosenVariation
+            : image.files.find((file) => file.variation === 'original');
+    }, [image, variation]);
+    // Create a srcset
+    const sourceSet = useMemo(() => {
+        var _a, _b;
+        if (!source)
+            return;
+        // source is only defined if image is a MediaObject, so we assert it as one
+        const img = image;
+        const sets = [];
+        const large = img.files.find((file) => file.variation === 'large');
+        const medium = img.files.find((file) => file.variation === 'medium');
+        const thumbnail = img.files.find((file) => file.variation === 'thumbnail');
+        if (thumbnail)
+            sets.push(`${encodeURI(thumbnail.path)} ${(_a = thumbnail.meta) === null || _a === void 0 ? void 0 : _a.width}w`);
+        if (medium)
+            sets.push(`${encodeURI(medium.path)} 600w`);
+        if (large)
+            sets.push(`${encodeURI(large.path)} 1200w`);
+        sets.push(`${encodeURI(source.path)} ${(_b = source.meta) === null || _b === void 0 ? void 0 : _b.width}w`);
+        return sets.join(',');
+    }, [source, image]);
+    const imageStyle = useMemo(() => {
+        var _a;
+        return {
+            backgroundColor: background || hasLoaded || typeof image === 'string'
+                ? 'transparent'
+                : `#${(_a = source === null || source === void 0 ? void 0 : source.background_color) !== null && _a !== void 0 ? _a : 'transparent'}`,
+        };
+    }, [background, source, hasLoaded, image]);
+    useEffect(() => {
+        let ref = null;
+        const observer = new IntersectionObserver((entries, observer) => {
+            if (entries[0].intersectionRatio > 0) {
+                // Image entered the viewport, set it as loadable
+                setCanLoad(true);
+                // Stop observing the image
+                observer.unobserve(ref);
+            }
+        });
+        if (imageRef.current) {
+            ref = imageRef.current;
+            observer.observe(ref);
+        }
+        const loadHandler = () => {
+            // After loading the image, the "hasLoaded" flag is used to hide the background color
+            setHasLoaded(true);
+        };
+        ref === null || ref === void 0 ? void 0 : ref.addEventListener('load', loadHandler);
+        return () => {
+            if (ref) {
+                observer.unobserve(ref);
+                ref.removeEventListener('load', loadHandler);
+            }
+        };
+    }, [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("noscript", null,
+            React.createElement("img", { src: (source && source.path) || image, alt: alt }))));
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +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'\n\nconst transparentImage =\n  'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='\n\nexport const GlobalLazyloadStyles = (): ReactNode => {\n  return (\n    <noscript>\n      <style>{'img.sl-lazyload{display: none;}'}</style>\n    </noscript>\n  )\n}\n\ntype ResponsiveImageProps = {\n  className?: string\n  image: MediaObject | string\n  sizes?: string\n  alt?: string\n  variation?: string\n  background?: string\n}\n\nexport const ResponsiveImage = ({\n  className = '',\n  image,\n  sizes = '',\n  alt = typeof image === 'string' ? '' : image.alt,\n  variation = 'optimized',\n  background = '',\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((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    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"]}

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

@@ -6,7 +6,6 @@ import Quote from './blocks/Quote';
 import Image from './blocks/Image';
 import HTML from './blocks/HTML';
 import List from './blocks/List';
-declare const VisualContent: FC<VisualContentProps>;
-export default VisualContent;
-export { Paragraph, Header, Quote, Image, HTML, List };
+export declare const VisualContent: FC<VisualContentProps>;
+export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAC1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+BzC,CAAA;AAED,eAAe,aAAa,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAW,MAAM,OAAO,CAAA;AAE1C,OAAO,EAAmB,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAWhC,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAuDhD,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,GACtB,CAAA"}

package/dist/esm/VisualContent/index.js

@@ -13,11 +13,22 @@ const defaultComponents = {
     raw: HTML,
     list: List,
 };
-const VisualContent = ({ content, components = {}, }) => {
-    const componentList = useMemo(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
+export const VisualContent = ({ content, components = {}, excerpt = false, excerptLength = 40, }) => {
     if (!content) {
         return null;
     }
+    const componentList = useMemo(() => (Object.assign(Object.assign({}, defaultComponents), components)), [components]);
+    if (excerpt) {
+        const block = content.blocks.find((block) => block.type === 'paragraph');
+        if (!block)
+            return null;
+        const text = block.data.text.split(' ');
+        const excerptText = text.length > excerptLength
+            ? text.splice(0, excerptLength).join(' ') + '...'
+            : text.join(' ');
+        const Component = componentList.paragraph;
+        return (React.createElement(Component, { key: block.id, id: block.id, type: block.type, data: { text: excerptText } }));
+    }
     return (React.createElement("div", { className: "sl-visual-content" }, content.blocks.map((block) => {
         const Component = componentList[block.type];
         if (!Component)
@@ -25,6 +36,5 @@ const VisualContent = ({ content, components = {}, }) => {
         return (React.createElement(Component, { key: block.id, id: block.id, type: block.type, data: block.data }));
     })));
 };
-export default VisualContent;
-export { Paragraph, Header, Quote, Image, HTML, List };
+export { Paragraph as ParagraphComponent, Header as HeaderComponent, Quote as QuoteComponent, Image as ImageComponent, HTML as HTMLComponent, List as ListComponent, };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAEhC,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;CACX,CAAA;AAED,MAAM,aAAa,GAA2B,CAAC,EAC7C,OAAO,EACP,UAAU,GAAG,EAAE,GAChB,EAAE,EAAE;IACH,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,IAAI,CAAA;KACZ;IAED,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,eAAe,aAAa,CAAA;AAE5B,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA","sourcesContent":["import React, { FC, useMemo } from 'react'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n}\n\nconst VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n}) => {\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (!content) {\n    return null\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 default VisualContent\n\nexport { Paragraph, Header, Quote, Image, HTML, List }\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/VisualContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,OAAO,EAAE,MAAM,OAAO,CAAA;AAG1C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,KAAK,MAAM,gBAAgB,CAAA;AAClC,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,IAAI,MAAM,eAAe,CAAA;AAEhC,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;CACX,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAA2B,CAAC,EACpD,OAAO,EACP,UAAU,GAAG,EAAE,EACf,OAAO,GAAG,KAAK,EACf,aAAa,GAAG,EAAE,GACnB,EAAE,EAAE;IACH,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE,CAAC,iCAAM,iBAAiB,GAAK,UAAU,EAAG,EAC/C,CAAC,UAAU,CAAC,CACb,CAAA;IAED,IAAI,OAAO,EAAE;QACX,MAAM,KAAK,GAAG,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,IAAI,KAAK,WAAW,CAAC,CAAA;QAExE,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA;QAEvB,MAAM,IAAI,GAAI,KAAyC,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;QAC5E,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;IAED,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,GACtB,CAAA","sourcesContent":["import React, { FC, useMemo } from 'react'\nimport { VisualDataBlock, ParagraphBlock } from '@starlightcms/js-sdk'\nimport { BlockComponents, VisualContentProps } from './types'\nimport Paragraph from './blocks/Paragraph'\nimport Header from './blocks/Header'\nimport Quote from './blocks/Quote'\nimport Image from './blocks/Image'\nimport HTML from './blocks/HTML'\nimport List from './blocks/List'\n\nconst defaultComponents: BlockComponents = {\n  paragraph: Paragraph,\n  header: Header,\n  quote: Quote,\n  image: Image,\n  raw: HTML,\n  list: List,\n}\n\nexport const VisualContent: FC<VisualContentProps> = ({\n  content,\n  components = {},\n  excerpt = false,\n  excerptLength = 40,\n}) => {\n  if (!content) {\n    return null\n  }\n\n  const componentList = useMemo(\n    () => ({ ...defaultComponents, ...components }),\n    [components]\n  )\n\n  if (excerpt) {\n    const block = content.blocks.find((block) => block.type === 'paragraph')\n\n    if (!block) return null\n\n    const text = (block as VisualDataBlock<ParagraphBlock>).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\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}\n"]}

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

@@ -12,6 +12,8 @@ export interface BlockComponents extends Implements<Record<BlockType, unknown>,
 export declare type VisualContentProps = {
     content?: VisualData;
     components?: Partial<BlockComponents>;
+    excerpt?: boolean;
+    excerptLength?: number;
 };
 export {};
 //# sourceMappingURL=types.d.ts.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n  HTMLBlock,\n  ListBlock,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n  raw: ComponentType<VisualDataBlock<HTMLBlock>>\n  list: ComponentType<VisualDataBlock<ListBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/VisualContent/types.ts"],"names":[],"mappings":"","sourcesContent":["import { ComponentType } from 'react'\nimport {\n  HeaderBlock,\n  ImageBlock,\n  ParagraphBlock,\n  QuoteBlock,\n  VisualData,\n  VisualDataBlock,\n  BlockType,\n  HTMLBlock,\n  ListBlock,\n} from '@starlightcms/js-sdk'\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\ntype Implements<T, U extends T> = Record<string, unknown>\n\nexport interface BlockComponents\n  extends Implements<Record<BlockType, unknown>, BlockComponents> {\n  paragraph: ComponentType<VisualDataBlock<ParagraphBlock>>\n  header: ComponentType<VisualDataBlock<HeaderBlock>>\n  quote: ComponentType<VisualDataBlock<QuoteBlock>>\n  image: ComponentType<VisualDataBlock<ImageBlock>>\n  raw: ComponentType<VisualDataBlock<HTMLBlock>>\n  list: ComponentType<VisualDataBlock<ListBlock>>\n}\n\nexport type VisualContentProps = {\n  content?: VisualData\n  components?: Partial<BlockComponents>\n  excerpt?: boolean\n  excerptLength?: number\n}\n"]}

package/dist/esm/index.d.ts

@@ -1,6 +1,6 @@
 import Starlight from '@starlightcms/js-sdk';
 export * from '@starlightcms/js-sdk';
-import VisualContent from './VisualContent';
-export { VisualContent };
+export * from './VisualContent';
+export * from './ResponsiveImage';
 export default Starlight;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,sBAAsB,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AAEpC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,CAAA;AAExB,eAAe,SAAS,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,sBAAsB,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AAEpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AAEjC,eAAe,SAAS,CAAA"}

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import Starlight from '@starlightcms/js-sdk';
 export * from '@starlightcms/js-sdk';
-import VisualContent from './VisualContent';
-export { VisualContent };
+export * from './VisualContent';
+export * from './ResponsiveImage';
 export default Starlight;
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,sBAAsB,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AAEpC,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,CAAA;AAExB,eAAe,SAAS,CAAA","sourcesContent":["import Starlight from '@starlightcms/js-sdk'\nexport * from '@starlightcms/js-sdk'\n\nimport VisualContent from './VisualContent'\n\nexport { VisualContent }\n\nexport default Starlight\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,sBAAsB,CAAA;AAC5C,cAAc,sBAAsB,CAAA;AAEpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,mBAAmB,CAAA;AAEjC,eAAe,SAAS,CAAA","sourcesContent":["import Starlight from '@starlightcms/js-sdk'\nexport * from '@starlightcms/js-sdk'\n\nexport * from './VisualContent'\nexport * from './ResponsiveImage'\n\nexport default Starlight\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starlightcms/react-sdk",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "The Starlight SDK for React",
   "main": "dist/cjs/index.js",
   "exports": {
@@ -54,7 +54,7 @@
     ]
   },
   "dependencies": {
-    "@starlightcms/js-sdk": "^0.6.1"
+    "@starlightcms/js-sdk": "^0.7.0"
   },
   "peerDependencies": {
     "react": ">=16.0.0"