@builder.io/sdk-react 0.4.4 → 0.4.5

package/dist/sdk/blocks/columns/columns.js

@@ -3,7 +3,7 @@ import * as React from "react";
 import { useState, useContext } from "react";
 import RenderBlocks from "../../components/render-blocks";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles";
+import InlinedStyles from "../../components/inlined-styles";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context.js";
 function Columns(props) {
@@ -108,17 +108,17 @@ function Columns(props) {
     const builderContext = useContext(BuilderContext);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: `builder-columns ${props.builderBlock.id}-breakpoints` +
-                " div-fa2ab8fc", style: columnsCssVars() },
+                " div-1d72a8ba", style: columnsCssVars() },
             TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
-                React.createElement(RenderInlinedStyles, { styles: columnsStyles() }))) : null,
-            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-fa2ab8fc-2", style: columnCssVars(index), key: index },
+                React.createElement(InlinedStyles, { styles: columnsStyles() }))) : null,
+            props.columns?.map((column, index) => (React.createElement("div", { className: "builder-column div-1d72a8ba-2", style: columnCssVars(index), key: index },
                 React.createElement(RenderBlocks, { blocks: column.blocks, path: `component.options.columns.${index}.blocks`, parent: props.builderBlock.id, styleProp: {
                         flexGrow: "1",
                     } }))))),
-        React.createElement("style", null, `.div-fa2ab8fc {
+        React.createElement("style", null, `.div-1d72a8ba {
   display: flex;
   line-height: normal;
-}.div-fa2ab8fc-2 {
+}.div-1d72a8ba-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;

package/dist/sdk/blocks/symbol/symbol.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
-import RenderContent from "../../components/render-content/render-content";
+import RenderContentVariants from "../../components/render-content-variants/render-content-variants";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { TARGET } from "../../constants/target";
@@ -38,9 +38,11 @@ function Symbol(props) {
                 model: props.symbol.model,
                 apiKey: builderContext.apiKey,
                 apiVersion: builderContext.apiVersion,
-                query: {
-                    id: props.symbol.entry,
-                },
+                ...(props.symbol?.entry && {
+                    query: {
+                        id: props.symbol.entry,
+                    },
+                }),
             })
                 .then((response) => {
                 if (response) {
@@ -60,7 +62,7 @@ function Symbol(props) {
         fetchContent();
     }, [props.symbol]);
     return (React.createElement("div", { ...props.attributes, className: className },
-        React.createElement(RenderContent, { apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
+        React.createElement(RenderContentVariants, { __isNestedRender: true, apiVersion: builderContext.apiVersion, apiKey: builderContext.apiKey, context: builderContext.context, customComponents: Object.values(builderContext.registeredComponents), data: {
                 ...props.symbol?.data,
                 ...builderContext.localState,
                 ...contentToUse?.data?.state,

package/dist/sdk/blocks/text/text.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 export interface TextProps {
-    text: string;
+    text?: string;
 }
 declare function Text(props: TextProps): JSX.Element;
 export default Text;

package/dist/sdk/blocks/text/text.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from "react";
 function Text(props) {
-    return (React.createElement("span", { className: "builder-text", dangerouslySetInnerHTML: { __html: props.text }, style: {
+    return (React.createElement("span", { className: "builder-text", dangerouslySetInnerHTML: { __html: props.text?.toString() }, style: {
             outline: "none",
         } }));
 }

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type BlockProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+    components: Dictionary<RegisteredComponent>;
+};
+import type { BuilderContextInterface, RegisteredComponent } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { Dictionary } from "../../types/typescript.js";
+declare function Block(props: BlockProps): JSX.Element;
+export default Block;

package/dist/sdk/components/block/block.helpers.d.ts

@@ -0,0 +1,12 @@
+import type { BuilderContextInterface } from '../../context/types';
+import type { BuilderBlock } from '../../types/builder-block';
+import type { RepeatData } from './types';
+export declare const isEmptyHtmlElement: (tagName: unknown) => boolean;
+export declare const getComponent: ({ block, context, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => import("../../context/types").RegisteredComponent;
+export declare const getRepeatItemData: ({ block, context, }: {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+}) => RepeatData[] | undefined;

package/dist/sdk/components/block/block.helpers.js

@@ -0,0 +1,86 @@
+import { evaluate } from '../../functions/evaluate';
+import { getProcessedBlock } from '../../functions/get-processed-block';
+/**
+ * https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+ */
+const EMPTY_HTML_ELEMENTS = [
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'keygen',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+];
+export const isEmptyHtmlElement = (tagName) => {
+    return (typeof tagName === 'string' &&
+        EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase()));
+};
+export const getComponent = ({ block, context, }) => {
+    const componentName = getProcessedBlock({
+        block,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+        shouldEvaluateBindings: false,
+    }).component?.name;
+    if (!componentName) {
+        return null;
+    }
+    const ref = context.registeredComponents[componentName];
+    if (!ref) {
+        // TODO: Public doc page with more info about this message
+        console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return undefined;
+    }
+    else {
+        return ref;
+    }
+};
+export const getRepeatItemData = ({ block, context, }) => {
+    /**
+     * we don't use `state.useBlock` here because the processing done within its logic includes evaluating the block's bindings,
+     * which will not work if there is a repeat.
+     */
+    const { repeat, ...blockWithoutRepeat } = block;
+    if (!repeat?.collection) {
+        return undefined;
+    }
+    const itemsArray = evaluate({
+        code: repeat.collection,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        context: context.context,
+    });
+    if (!Array.isArray(itemsArray)) {
+        return undefined;
+    }
+    const collectionName = repeat.collection.split('.').pop();
+    const itemNameToUse = repeat.itemName || (collectionName ? collectionName + 'Item' : 'item');
+    const repeatArray = itemsArray.map((item, index) => ({
+        context: {
+            ...context,
+            localState: {
+                ...context.localState,
+                $index: index,
+                $item: item,
+                [itemNameToUse]: item,
+                [`$${itemNameToUse}Index`]: index,
+            },
+        },
+        block: blockWithoutRepeat,
+    }));
+    return repeatArray;
+};

package/dist/sdk/components/block/block.js

@@ -0,0 +1,124 @@
+'use client';
+import * as React from "react";
+import { useState } from "react";
+import { getBlockActions } from "../../functions/get-block-actions.js";
+import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
+import { getBlockProperties } from "../../functions/get-block-properties.js";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
+import BlockStyles from "./components/block-styles";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./block.helpers.js";
+import RepeatedBlock from "./components/repeated-block";
+import { TARGET } from "../../constants/target.js";
+import Component from "./components/component";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
+function Block(props) {
+    const [component, setComponent] = useState(() => getComponent({
+        block: props.block,
+        context: props.context,
+    }));
+    function repeatItem() {
+        return getRepeatItemData({
+            block: props.block,
+            context: props.context,
+        });
+    }
+    function processedBlock() {
+        return repeatItem()
+            ? props.block
+            : getProcessedBlock({
+                block: props.block,
+                localState: props.context.localState,
+                rootState: props.context.rootState,
+                rootSetState: props.context.rootSetState,
+                context: props.context.context,
+                shouldEvaluateBindings: true,
+            });
+    }
+    const [Tag, setTag] = useState(() => props.block.tagName || "div");
+    function canShowBlock() {
+        if ("hide" in processedBlock()) {
+            return !processedBlock().hide;
+        }
+        if ("show" in processedBlock()) {
+            return processedBlock().show;
+        }
+        return true;
+    }
+    function actions() {
+        return getBlockActions({
+            block: processedBlock(),
+            rootState: props.context.rootState,
+            rootSetState: props.context.rootSetState,
+            localState: props.context.localState,
+            context: props.context.context,
+        });
+    }
+    function attributes() {
+        const blockProperties = getBlockProperties(processedBlock());
+        return {
+            ...blockProperties,
+            ...(TARGET === "reactNative"
+                ? {
+                    style: getReactNativeBlockStyles({
+                        block: processedBlock(),
+                        context: props.context,
+                        blockStyles: blockProperties.style,
+                    }),
+                }
+                : {}),
+        };
+    }
+    function childrenWithoutParentComponent() {
+        /**
+         * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+         * we render them outside of `componentRef`.
+         * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
+         * blocks, and the children will be repeated within those blocks.
+         */
+        const shouldRenderChildrenOutsideRef = !component?.component && !repeatItem();
+        return shouldRenderChildrenOutsideRef
+            ? processedBlock().children ?? []
+            : [];
+    }
+    function renderComponentProps() {
+        return {
+            blockChildren: processedBlock().children ?? [],
+            componentRef: component?.component,
+            componentOptions: {
+                ...getBlockComponentOptions(processedBlock()),
+                /**
+                 * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+                 * they are provided to the component itself directly.
+                 */
+                ...(!component?.noWrap
+                    ? {}
+                    : {
+                        attributes: {
+                            ...attributes(),
+                            ...actions(),
+                        },
+                    }),
+                builderContext: props.context,
+                ...(component?.name === "Symbol" || component?.name === "Columns"
+                    ? {
+                        builderComponents: props.components,
+                    }
+                    : {}),
+            },
+            context: childrenContext,
+            components: props.components,
+        };
+    }
+    const [childrenContext, setChildrenContext] = useState(() => props.context);
+    return (React.createElement(React.Fragment, null, canShowBlock() ? (React.createElement(React.Fragment, null, !component?.noWrap ? (React.createElement(React.Fragment, null,
+        isEmptyHtmlElement(Tag) ? (React.createElement(React.Fragment, null,
+            React.createElement(Tag, { ...attributes(), ...actions() }))) : null,
+        !isEmptyHtmlElement(Tag) && repeatItem() ? (React.createElement(React.Fragment, null, repeatItem()?.map((data, index) => (React.createElement(RepeatedBlock, { key: index, repeatContext: data.context, block: data.block, components: props.components }))))) : null,
+        !isEmptyHtmlElement(Tag) && !repeatItem() ? (React.createElement(React.Fragment, null,
+            React.createElement(Tag, { ...attributes(), ...actions() },
+                React.createElement(Component, { ...renderComponentProps() }),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(Block, { key: "render-block-" + child.id, block: child, context: childrenContext, components: props.components }))),
+                childrenWithoutParentComponent()?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: childrenContext })))))) : null)) : (React.createElement(React.Fragment, null,
+        React.createElement(Component, { ...renderComponentProps() }))))) : null));
+}
+export default Block;

package/dist/sdk/components/block/components/block-styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type BlockStylesProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+};
+import type { BuilderContextInterface } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block.js";
+declare function BlockStyles(props: BlockStylesProps): JSX.Element;
+export default BlockStyles;

package/dist/sdk/components/block/components/block-styles.js

@@ -0,0 +1,65 @@
+'use client';
+import * as React from "react";
+import { useState } from "react";
+import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../../constants/device-sizes.js";
+import { TARGET } from "../../../constants/target.js";
+import { getProcessedBlock } from "../../../functions/get-processed-block.js";
+import { createCssClass } from "../../../helpers/css.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import InlinedStyles from "../../inlined-styles";
+function BlockStyles(props) {
+    const [processedBlock, setProcessedBlock] = useState(() => getProcessedBlock({
+        block: props.block,
+        localState: props.context.localState,
+        rootState: props.context.rootState,
+        rootSetState: props.context.rootSetState,
+        context: props.context.context,
+        shouldEvaluateBindings: true,
+    }));
+    function canShowBlock() {
+        // only render styles for blocks that are visible
+        if (checkIsDefined(processedBlock.hide)) {
+            return !processedBlock.hide;
+        }
+        if (checkIsDefined(processedBlock.show)) {
+            return processedBlock.show;
+        }
+        return true;
+    }
+    function css() {
+        const styles = processedBlock.responsiveStyles;
+        const content = props.context.content;
+        const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+        const largeStyles = styles?.large;
+        const mediumStyles = styles?.medium;
+        const smallStyles = styles?.small;
+        const className = processedBlock.id;
+        if (!className) {
+            return "";
+        }
+        const largeStylesClass = largeStyles
+            ? createCssClass({
+                className,
+                styles: largeStyles,
+            })
+            : "";
+        const mediumStylesClass = mediumStyles
+            ? createCssClass({
+                className,
+                styles: mediumStyles,
+                mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints),
+            })
+            : "";
+        const smallStylesClass = smallStyles
+            ? createCssClass({
+                className,
+                styles: smallStyles,
+                mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints),
+            })
+            : "";
+        return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
+    }
+    return (React.createElement(React.Fragment, null, TARGET !== "reactNative" && css() && canShowBlock() ? (React.createElement(React.Fragment, null,
+        React.createElement(InlinedStyles, { styles: css() }))) : null));
+}
+export default BlockStyles;

package/dist/sdk/components/block/components/component.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+type ComponentOptions = PropsWithBuilderData<{
+    [index: string]: any;
+    attributes?: {
+        [index: string]: any;
+    };
+}>;
+export interface ComponentProps {
+    componentRef: any;
+    componentOptions: ComponentOptions;
+    blockChildren: BuilderBlock[];
+    context: BuilderContextInterface;
+    components: Dictionary<RegisteredComponent>;
+}
+import type { BuilderBlock } from "../../../types/builder-block.js";
+import type { BuilderContextInterface, RegisteredComponent } from "../../../context/types.js";
+import type { PropsWithBuilderData } from "../../../types/builder-props.js";
+import type { Dictionary } from "../../../types/typescript.js";
+declare function Component(props: ComponentProps): JSX.Element;
+export default Component;

package/dist/sdk/components/block/components/component.js

@@ -0,0 +1,11 @@
+'use client';
+import * as React from "react";
+import BlockStyles from "./block-styles";
+import Block from "../block";
+function Component(props) {
+    return (React.createElement(React.Fragment, null, props.componentRef ? (React.createElement(React.Fragment, null,
+        React.createElement(props.componentRef, { ...props.componentOptions },
+            props.blockChildren?.map((child) => (React.createElement(Block, { key: "render-block-" + child.id, block: child, context: props.context, components: props.components }))),
+            props.blockChildren?.map((child) => (React.createElement(BlockStyles, { key: "block-style-" + child.id, block: child, context: props.context })))))) : null));
+}
+export default Component;

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+    components: Dictionary<RegisteredComponent>;
+};
+import type { BuilderContextInterface, RegisteredComponent } from "../../../context/types.js";
+import type { BuilderBlock } from "../../../types/builder-block";
+import type { Dictionary } from "../../../types/typescript";
+declare function RepeatedBlock(props: Props): JSX.Element;
+export default RepeatedBlock;

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

@@ -0,0 +1,11 @@
+'use client';
+import * as React from "react";
+import { useState } from "react";
+import BuilderContext from "../../../context/builder.context.js";
+import Block from "../block";
+function RepeatedBlock(props) {
+    const [store, setStore] = useState(() => props.repeatContext);
+    return (React.createElement(BuilderContext.Provider, { value: store },
+        React.createElement(Block, { block: props.block, context: store, components: props.components })));
+}
+export default RepeatedBlock;

package/dist/sdk/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/sdk/components/block/types.js

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

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

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

package/dist/sdk/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-7cb52693", "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-7cb52693 {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}`)));
+}
+export default BlocksWrapper;

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type BlocksProps = Partial<BlocksWrapperProps> & {
+    context: BuilderContextInterface;
+    components: Dictionary<RegisteredComponent>;
+};
+import type { BlocksWrapperProps } from "./blocks-wrapper";
+import type { BuilderContextInterface, RegisteredComponent } from "../../context/types.js";
+import type { Dictionary } from "../../types/typescript";
+declare function Blocks(props: BlocksProps): JSX.Element;
+export default Blocks;

package/dist/sdk/components/blocks/blocks.js

@@ -0,0 +1,11 @@
+'use client';
+import * as React from "react";
+import BlockStyles from "../block/components/block-styles";
+import Block from "../block/block";
+import BlocksWrapper from "./blocks-wrapper";
+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, components: props.components }))))) : 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/sdk/components/content/components/content-styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface Props {
+    cssCode?: string;
+    customFonts?: CustomFont[];
+    contentId?: string;
+}
+import type { CustomFont } from "./content-styles.helpers";
+declare function ContentStyles(props: Props): JSX.Element;
+export default ContentStyles;

package/dist/sdk/components/content/components/content-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/sdk/components/content/components/content-styles.helpers.js

@@ -0,0 +1,59 @@
+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}"]`) || '';
+};