@builder.io/sdk-react-nextjs 0.4.5

package/dist/components/block/components/repeated-block.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+};
+import type { BuilderContextInterface, RegisteredComponents } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+declare function RepeatedBlock(props: Props): JSX.Element;
+export default RepeatedBlock;

package/dist/components/block/components/repeated-block.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import Block from "../block.js";
+function RepeatedBlock(props) {
+    const store = props.repeatContext;
+    return (React.createElement(Block, { block: props.block, context: store, registeredComponents: props.registeredComponents }));
+}
+export default RepeatedBlock;

package/dist/components/block/types.d.ts

@@ -0,0 +1,6 @@
+import type { BuilderContextInterface } from '../../context/types.js';
+import type { BuilderBlock } from '../../types/builder-block.js';
+export interface RepeatData {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}

package/dist/components/block/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/blocks/blocks-wrapper.d.ts

@@ -0,0 +1,10 @@
+export type BlocksWrapperProps = {
+    blocks: BuilderBlock[] | undefined;
+    parent: string | undefined;
+    path: string | undefined;
+    styleProp: Record<string, any> | undefined;
+};
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { PropsWithChildren } from "../../types/typescript.js";
+declare function BlocksWrapper(props: PropsWithChildren<BlocksWrapperProps>): JSX.Element;
+export default BlocksWrapper;

package/dist/components/blocks/blocks-wrapper.js

@@ -0,0 +1,38 @@
+"use client";
+import * as React from "react";
+import { isEditing } from "../../functions/is-editing.js";
+function BlocksWrapper(props) {
+    function className() {
+        return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    }
+    function onClick() {
+        if (isEditing() && !props.blocks?.length) {
+            window.parent?.postMessage({
+                type: "builder.clickEmptyBlocks",
+                data: {
+                    parentElementId: props.parent,
+                    dataPath: props.path,
+                },
+            }, "*");
+        }
+    }
+    function onMouseEnter() {
+        if (isEditing() && !props.blocks?.length) {
+            window.parent?.postMessage({
+                type: "builder.hoverEmptyBlocks",
+                data: {
+                    parentElementId: props.parent,
+                    dataPath: props.path,
+                },
+            }, "*");
+        }
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: className() + " div-b2473120", "builder-path": props.path, "builder-parent-id": props.parent, style: props.styleProp, onClick: (event) => onClick(), onMouseEnter: (event) => onMouseEnter(), onKeyPress: (event) => onClick() }, props.children),
+        React.createElement("style", null, `.div-b2473120 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`)));
+}
+export default BlocksWrapper;

package/dist/components/blocks/blocks.d.ts

@@ -0,0 +1,8 @@
+export type BlocksProps = Partial<BlocksWrapperProps> & {
+    context: BuilderContextInterface;
+    registeredComponents: RegisteredComponents;
+};
+import type { BlocksWrapperProps } from "./blocks-wrapper.js";
+import type { BuilderContextInterface, RegisteredComponents } from "../../context/types.js";
+declare function Blocks(props: BlocksProps): JSX.Element;
+export default Blocks;

package/dist/components/blocks/blocks.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import BlockStyles from "../block/components/block-styles.js";
+import Block from "../block/block.js";
+import BlocksWrapper from "./blocks-wrapper.js";
+function Blocks(props) {
+    return (React.createElement(BlocksWrapper, { blocks: props.blocks, parent: props.parent, path: props.path, styleProp: props.styleProp },
+        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(Block, { key: "render-block-" + block.id, block: block, context: props.context, registeredComponents: props.registeredComponents }))))) : null,
+        props.blocks ? (React.createElement(React.Fragment, null, props.blocks?.map((block) => (React.createElement(BlockStyles, { key: "block-style-" + block.id, block: block, context: props.context }))))) : null));
+}
+export default Blocks;

package/dist/components/content/components/enable-editor.d.ts

@@ -0,0 +1,9 @@
+type BuilderEditorProps = Omit<ContentProps, "customComponents" | "data" | "apiVersion" | "isSsrAbTest"> & {
+    builderContextSignal: BuilderContextInterface;
+    setBuilderContextSignal?: (signal: any) => any;
+    children?: any;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { ContentProps } from "../content.types.js";
+declare function EnableEditor(props: BuilderEditorProps): JSX.Element;
+export default EnableEditor;

package/dist/components/content/components/enable-editor.js

@@ -0,0 +1,249 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { evaluate } from "../../../functions/evaluate.js";
+import { fetch } from "../../../functions/get-fetch.js";
+import { isBrowser } from "../../../functions/is-browser.js";
+import { isEditing } from "../../../functions/is-editing.js";
+import { createRegisterComponentMessage } from "../../../functions/register-component.js";
+import { _track } from "../../../functions/track/index.js";
+import builderContext from "../../../context/builder.context";
+import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
+import { logger } from "../../../helpers/logger.js";
+import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
+import { useRouter } from "next/navigation";
+function EnableEditor(props) {
+    const elementRef = useRef(null);
+    const [canTrackToUse, setCanTrackToUse] = useState(() => checkIsDefined(props.canTrack) ? props.canTrack : true);
+    const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+    function mergeNewContent(newContent) {
+        const newContentValue = {
+            ...props.builderContextSignal.content,
+            ...newContent,
+            data: {
+                ...props.builderContextSignal.content?.data,
+                ...newContent?.data,
+            },
+            meta: {
+                ...props.builderContextSignal.content?.meta,
+                ...newContent?.meta,
+                breakpoints: newContent?.meta?.breakpoints ||
+                    props.builderContextSignal.content?.meta?.breakpoints,
+            },
+        };
+        postPreviewContent({
+            value: newContentValue,
+            key: newContentValue.id,
+        }).then(() => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            router.refresh();
+        });
+    }
+    const [lastUpdated, setLastUpdated] = useState(() => 0);
+    const [shouldSendResetCookie, setShouldSendResetCookie] = useState(() => false);
+    function processMessage(event) {
+        const { data } = event;
+        if (data) {
+            switch (data.type) {
+                case "builder.configureSdk": {
+                    const messageContent = data.data;
+                    const { breakpoints, contentId } = messageContent;
+                    if (!contentId ||
+                        contentId !== props.builderContextSignal.content?.id) {
+                        return;
+                    }
+                    if (breakpoints) {
+                        mergeNewContent({
+                            meta: {
+                                breakpoints,
+                            },
+                        });
+                    }
+                    setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
+                    break;
+                }
+                case "builder.contentUpdate": {
+                    const messageContent = data.data;
+                    const key = messageContent.key ||
+                        messageContent.alias ||
+                        messageContent.entry ||
+                        messageContent.modelName;
+                    const contentData = messageContent.data;
+                    if (key === props.model) {
+                        mergeNewContent(contentData);
+                        setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
+                    }
+                    break;
+                }
+            }
+        }
+    }
+    function evaluateJsCode() {
+        // run any dynamic JS code attached to content
+        const jsCode = props.builderContextSignal.content?.data?.jsCode;
+        if (jsCode) {
+            evaluate({
+                code: jsCode,
+                context: props.context || {},
+                localState: undefined,
+                rootState: props.builderContextSignal.rootState,
+                rootSetState: props.builderContextSignal.rootSetState,
+            });
+        }
+    }
+    const [httpReqsData, setHttpReqsData] = useState(() => ({}));
+    const [clicked, setClicked] = useState(() => false);
+    function onClick(event) {
+        if (props.builderContextSignal.content) {
+            const variationId = props.builderContextSignal.content?.testVariationId;
+            const contentId = props.builderContextSignal.content?.id;
+            _track({
+                type: "click",
+                canTrack: canTrackToUse,
+                contentId,
+                apiKey: props.apiKey,
+                variationId: variationId !== contentId ? variationId : undefined,
+                ...getInteractionPropertiesForEvent(event),
+                unique: !clicked,
+            });
+        }
+        if (!clicked) {
+            setClicked(true);
+        }
+    }
+    function evalExpression(expression) {
+        return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+            code: group,
+            context: props.context || {},
+            localState: undefined,
+            rootState: props.builderContextSignal.rootState,
+            rootSetState: props.builderContextSignal.rootSetState,
+        }));
+    }
+    function handleRequest({ url, key }) {
+        fetch(url)
+            .then((response) => response.json())
+            .then((json) => {
+            const newState = {
+                ...props.builderContextSignal.rootState,
+                [key]: json,
+            };
+            props.builderContextSignal.rootSetState?.(newState);
+            httpReqsData[key] = true;
+        })
+            .catch((err) => {
+            console.error("error fetching dynamic data", url, err);
+        });
+    }
+    function runHttpRequests() {
+        const requests = props.builderContextSignal.content?.data?.httpRequests ?? {};
+        Object.entries(requests).forEach(([key, url]) => {
+            if (url && (!httpReqsData[key] || isEditing())) {
+                const evaluatedUrl = evalExpression(url);
+                handleRequest({
+                    url: evaluatedUrl,
+                    key,
+                });
+            }
+        });
+    }
+    function emitStateUpdate() {
+        if (isEditing()) {
+            window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+                detail: {
+                    state: props.builderContextSignal.rootState,
+                    ref: {
+                        name: props.model,
+                    },
+                },
+            }));
+        }
+    }
+    const router = useRouter();
+    useEffect(() => {
+        if (!props.apiKey) {
+            logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+        }
+        if (isBrowser()) {
+            if (isEditing()) {
+                setForceReRenderCount(forceReRenderCount + 1);
+                window.addEventListener("message", processMessage);
+                registerInsertMenu();
+                setupBrowserForEditing({
+                    ...(props.locale
+                        ? {
+                            locale: props.locale,
+                        }
+                        : {}),
+                    ...(props.includeRefs
+                        ? {
+                            includeRefs: props.includeRefs,
+                        }
+                        : {}),
+                    ...(props.enrich
+                        ? {
+                            enrich: props.enrich,
+                        }
+                        : {}),
+                });
+                Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
+                    const message = createRegisterComponentMessage(registeredComponent);
+                    window.parent?.postMessage(message, "*");
+                });
+                window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+            }
+            if (props.builderContextSignal.content) {
+                const variationId = props.builderContextSignal.content?.testVariationId;
+                const contentId = props.builderContextSignal.content?.id;
+                _track({
+                    type: "impression",
+                    canTrack: canTrackToUse,
+                    contentId,
+                    apiKey: props.apiKey,
+                    variationId: variationId !== contentId ? variationId : undefined,
+                });
+            }
+            evaluateJsCode();
+            runHttpRequests();
+            emitStateUpdate();
+        }
+    }, []);
+    useEffect(() => { }, [props.content]);
+    useEffect(() => {
+        if (isBrowser()) {
+            window.removeEventListener("message", processMessage);
+            window.addEventListener("message", processMessage);
+        }
+    }, [shouldSendResetCookie]);
+    useEffect(() => {
+        evaluateJsCode();
+    }, [
+        props.builderContextSignal.content?.data?.jsCode,
+        props.builderContextSignal.rootState,
+    ]);
+    useEffect(() => {
+        runHttpRequests();
+    }, [props.builderContextSignal.content?.data?.httpRequests]);
+    useEffect(() => {
+        emitStateUpdate();
+    }, [props.builderContextSignal.rootState]);
+    useEffect(() => {
+        return () => {
+            if (isBrowser()) {
+                window.removeEventListener("message", processMessage);
+                window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+            }
+        };
+    }, []);
+    return (React.createElement(builderContext.Provider, { value: props.builderContextSignal }, props.builderContextSignal.content ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { key: forceReRenderCount, ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": props.builderContextSignal.content?.id, "builder-model": props.model, ...(props.showContent
+                ? {}
+                : {
+                    hidden: true,
+                    "aria-hidden": true,
+                }), className: props.classNameProp }, props.children))) : null));
+}
+export default EnableEditor;

package/dist/components/content/components/styles.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    cssCode?: string;
+    customFonts?: CustomFont[];
+    contentId?: string;
+}
+import type { CustomFont } from "./styles.helpers.js";
+declare function ContentStyles(props: Props): JSX.Element;
+export default ContentStyles;

package/dist/components/content/components/styles.helpers.d.ts

@@ -0,0 +1,15 @@
+export interface CustomFont {
+    family?: string;
+    kind?: string;
+    fileUrl?: string;
+    files?: {
+        [key: string]: string;
+    };
+}
+export declare const getFontCss: ({ customFonts }: {
+    customFonts?: CustomFont[];
+}) => string;
+export declare const getCss: ({ cssCode, contentId }: {
+    cssCode?: string;
+    contentId?: string;
+}) => string;

package/dist/components/content/components/styles.helpers.js

@@ -0,0 +1,56 @@
+const getCssFromFont = (font) => {
+    // TODO: compute what font sizes are used and only load those.......
+    const family = font.family + (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+    const name = family.split(',')[0];
+    const url = font.fileUrl ?? font?.files?.regular;
+    let str = '';
+    if (url && family && name) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+    }
+    if (font.files) {
+        for (const weight in font.files) {
+            const isNumber = String(Number(weight)) === weight;
+            if (!isNumber) {
+                continue;
+            } // TODO: maybe limit number loaded
+            const weightUrl = font.files[weight];
+            if (weightUrl && weightUrl !== url) {
+                str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+            }
+        }
+    }
+    return str;
+};
+export const getFontCss = ({ customFonts }) => {
+    // TODO: flag for this
+    // if (!this.builder.allowCustomFonts) {
+    //   return '';
+    // }
+    // TODO: separate internal data from external
+    return customFonts?.map(font => getCssFromFont(font))?.join(' ') || '';
+};
+export const getCss = ({ cssCode, contentId }) => {
+    if (!cssCode) {
+        return '';
+    }
+    if (!contentId) {
+        return cssCode;
+    } // Allow using `&` in custom CSS code like @emotion
+    // E.g. `& .foobar { ... }` to scope CSS
+    // TODO: handle if '&' is within a string like `content: "&"`
+    return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
+};

package/dist/components/content/components/styles.js

@@ -0,0 +1,30 @@
+import * as React from "react";
+import InlinedStyles from "../../inlined-styles.js";
+import { getCss } from "./styles.helpers.js";
+import { getFontCss } from "./styles.helpers.js";
+function ContentStyles(props) {
+    const injectedStyles = `
+${getCss({
+        cssCode: props.cssCode,
+        contentId: props.contentId,
+    })}
+${getFontCss({
+        customFonts: props.customFonts,
+    })}
+
+.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
+  margin: 0;
+}
+.builder-text > p, .builder-text > .builder-paragraph {
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
+}
+`.trim();
+    return React.createElement(InlinedStyles, { styles: injectedStyles });
+}
+export default ContentStyles;

package/dist/components/content/content.d.ts

@@ -0,0 +1,3 @@
+import type { ContentProps } from "./content.types.js";
+declare function ContentComponent(props: ContentProps): JSX.Element;
+export default ContentComponent;

package/dist/components/content/content.helpers.d.ts

@@ -0,0 +1,7 @@
+import type { BuilderContent } from '../../types/builder-content.js';
+import type { Nullable } from '../../types/typescript.js';
+import type { ContentProps } from './content.types.js';
+export declare const getContextStateInitialValue: ({ content, data, locale }: Pick<ContentProps, 'content' | 'data' | 'locale'>) => {
+    [x: string]: unknown;
+};
+export declare const getContentInitialValue: ({ content, data }: Pick<ContentProps, 'content' | 'data'>) => Nullable<BuilderContent>;

package/dist/components/content/content.helpers.js

@@ -0,0 +1,25 @@
+export const getContextStateInitialValue = ({ content, data, locale }) => {
+    const defaultValues = {}; // set default values for content state inputs
+    content?.data?.inputs?.forEach(input => {
+        if (input.name && input.defaultValue !== undefined && content?.data?.state && content.data.state[input.name] === undefined) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = { ...content?.data?.state,
+        ...data,
+        ...(locale ? {
+            locale
+        } : {})
+    };
+    return { ...defaultValues,
+        ...stateToUse
+    };
+};
+export const getContentInitialValue = ({ content, data }) => {
+    return !content ? undefined : { ...content,
+        data: { ...content?.data,
+            ...data
+        },
+        meta: content?.meta
+    };
+};

package/dist/components/content/content.js

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { components, serializeComponentInfo, } from "../../functions/register-component.js";
+import Blocks from "../blocks/blocks.js";
+import ContentStyles from "./components/styles.js";
+import { getContentInitialValue, getContextStateInitialValue, } from "./content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { getRenderContentScriptString } from "../content-variants/helpers.js";
+import EnableEditor from "./components/enable-editor.js";
+import InlinedScript from "../inlined-script.js";
+function ContentComponent(props) {
+    const scriptStr = getRenderContentScriptString({
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        variationId: props.content?.testVariationId,
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+        contentId: props.content?.id,
+    });
+    const contentSetState = function contentSetState(newRootState) {
+        builderContextSignal.rootState = newRootState;
+    };
+    const registeredComponents = [
+        ...getDefaultRegisteredComponents(),
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(props.customComponents || []),
+    ].reduce((acc, { component, ...info }) => ({
+        ...acc,
+        [info.name]: {
+            component: component,
+            ...serializeComponentInfo(info),
+        },
+    }), {});
+    const builderContextSignal = {
+        content: getContentInitialValue({
+            content: props.content,
+            data: props.data,
+        }),
+        localState: undefined,
+        rootState: getContextStateInitialValue({
+            content: props.content,
+            data: props.data,
+            locale: props.locale,
+        }),
+        rootSetState: undefined,
+        context: props.context || {},
+        apiKey: props.apiKey,
+        apiVersion: props.apiVersion,
+        componentInfos: [
+            ...getDefaultRegisteredComponents(),
+            // Since users are able to override our default components, we need to make sure that we do not break such
+            // existing usage.
+            // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+            // which is the new standard way of providing custom components, and must therefore take precedence.
+            ...components,
+            ...(props.customComponents || []),
+        ].reduce((acc, { component: _, ...info }) => ({
+            ...acc,
+            [info.name]: serializeComponentInfo(info),
+        }), {}),
+        inheritedStyles: {},
+    };
+    return (React.createElement(EnableEditor, { content: props.content, model: props.model, context: props.context, apiKey: props.apiKey, canTrack: props.canTrack, locale: props.locale, includeRefs: props.includeRefs, enrich: props.enrich, classNameProp: props.classNameProp, showContent: props.showContent, builderContextSignal: builderContextSignal },
+        props.isSsrAbTest ? (React.createElement(React.Fragment, null,
+            React.createElement(InlinedScript, { scriptStr: scriptStr }))) : null,
+        TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+            React.createElement(ContentStyles, { contentId: builderContextSignal.content?.id, cssCode: builderContextSignal.content?.data?.cssCode, customFonts: builderContextSignal.content?.data?.customFonts }))) : null,
+        React.createElement(Blocks, { blocks: builderContextSignal.content?.data?.blocks, context: builderContextSignal, registeredComponents: registeredComponents })));
+}
+export default ContentComponent;

package/dist/components/content/content.types.d.ts

@@ -0,0 +1,24 @@
+import type { BuilderRenderState } from '../../context/types.js';
+import type { EnforcePartials } from '../../types/enforced-partials.js';
+import type { ContentVariantsProps } from '../content-variants/content-variants.types.js';
+interface InternalRenderProps {
+    /**
+     * TO-DO: improve qwik generator to not remap this name for non-HTML tags, then name it `className`
+     */
+    classNameProp: string | undefined;
+    showContent: boolean;
+    isSsrAbTest: boolean;
+}
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsProps>;
+export interface BuilderComponentStateChange {
+    state: BuilderRenderState;
+    ref: {
+        name?: string;
+        props?: {
+            builderBlock?: {
+                id?: string;
+            };
+        };
+    };
+}
+export {};

package/dist/components/content/content.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/content/wrap-component-ref.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export declare const wrapComponentRef: (component: any) => any;

package/dist/components/content/wrap-component-ref.js

@@ -0,0 +1,6 @@
+/**
+ * Apply target-specific transformations to the component reference.
+ *
+ * See overrides/* for examples.
+ */
+export const wrapComponentRef = (component) => component;

package/dist/components/content-variants/content-variants.d.ts

@@ -0,0 +1,9 @@
+type VariantsProviderProps = ContentVariantsProps & {
+    /**
+     * For internal use only. Do not provide this prop.
+     */
+    __isNestedRender?: boolean;
+};
+import type { ContentVariantsProps } from "./content-variants.types.js";
+declare function ContentVariants(props: VariantsProviderProps): JSX.Element;
+export default ContentVariants;