@builder.io/sdk-react 0.2.2 → 0.2.3-1

package/dist/react/cjs/components/render-content/components/render-styles.helpers.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFontCss = exports.getCss = void 0;
+const getCssFromFont = (font) => {
+    var _a, _b;
+    const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+    const name = family.split(",")[0];
+    const url = (_b = font.fileUrl) != null ? _b : (_a = font == null ? void 0 : font.files) == null ? void 0 : _a.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;
+            }
+            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;
+};
+const getFontCss = ({ customFonts }) => {
+    var _a;
+    return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+};
+exports.getFontCss = getFontCss;
+const getCss = ({ cssCode, contentId }) => {
+    if (!cssCode) {
+        return "";
+    }
+    if (!contentId) {
+        return cssCode;
+    }
+    return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
+};
+exports.getCss = getCss;

package/dist/react/cjs/components/render-content/components/render-styles.js

@@ -0,0 +1,34 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const render_inlined_styles_1 = require("../../render-inlined-styles");
+const render_styles_helpers_1 = require("./render-styles.helpers");
+const render_styles_helpers_2 = require("./render-styles.helpers");
+function RenderContentStyles(props) {
+    const [injectedStyles, setInjectedStyles] = (0, react_1.useState)(() => `
+${(0, render_styles_helpers_1.getCss)({
+        cssCode: props.cssCode,
+        contentId: props.contentId,
+    })}
+${(0, render_styles_helpers_2.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;
+}
+`);
+    return React.createElement(render_inlined_styles_1.default, { styles: injectedStyles });
+}
+exports.default = RenderContentStyles;

package/dist/react/cjs/components/render-content/index.d.ts

@@ -0,0 +1,2 @@
+export { default2 as default };
+import { default as default2 } from "./render-content";

package/dist/react/cjs/components/render-content/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const render_content_1 = require("./render-content");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return render_content_1.default; } });

package/dist/react/cjs/components/render-content/render-content.d.ts

@@ -0,0 +1,2 @@
+export default RenderContent;
+declare function RenderContent(props: any): JSX.Element;

package/dist/react/cjs/components/render-content/render-content.helpers.d.ts

@@ -0,0 +1,9 @@
+export function getContentInitialValue({ content, data }: {
+    content: any;
+    data: any;
+}): any;
+export function getContextStateInitialValue({ content, data, locale }: {
+    content: any;
+    data: any;
+    locale: any;
+}): any;

package/dist/react/cjs/components/render-content/render-content.helpers.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContextStateInitialValue = exports.getContentInitialValue = void 0;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+        if (__hasOwnProp.call(b, prop))
+            __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(b)) {
+            if (__propIsEnum.call(b, prop))
+                __defNormalProp(a, prop, b[prop]);
+        }
+    return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const getContextStateInitialValue = ({ content, data, locale }) => {
+    var _a, _b, _c;
+    const defaultValues = {};
+    (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+        var _a2;
+        if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
+            defaultValues[input.name] = input.defaultValue;
+        }
+    });
+    const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+    return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
+};
+exports.getContextStateInitialValue = getContextStateInitialValue;
+const getContentInitialValue = ({ content, data }) => {
+    return !content ? void 0 : __spreadProps(__spreadValues({}, content), {
+        data: __spreadValues(__spreadValues({}, content == null ? void 0 : content.data), data),
+        meta: content == null ? void 0 : content.meta
+    });
+};
+exports.getContentInitialValue = getContentInitialValue;

package/dist/react/cjs/components/render-content/render-content.js

@@ -0,0 +1,297 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("react");
+const builder_registered_components_js_1 = require("../../constants/builder-registered-components.js");
+const evaluate_js_1 = require("../../functions/evaluate.js");
+const index_js_1 = require("../../functions/get-content/index.js");
+const get_fetch_js_1 = require("../../functions/get-fetch.js");
+const is_browser_js_1 = require("../../functions/is-browser.js");
+const is_editing_js_1 = require("../../functions/is-editing.js");
+const is_previewing_js_1 = require("../../functions/is-previewing.js");
+const register_component_js_1 = require("../../functions/register-component.js");
+const index_js_2 = require("../../functions/track/index.js");
+const render_blocks_1 = require("../render-blocks");
+const render_styles_1 = require("./components/render-styles");
+const builder_context_js_1 = require("../../context/builder.context.js");
+const init_editing_js_1 = require("../../scripts/init-editing.js");
+const nullable_js_1 = require("../../helpers/nullable.js");
+const interaction_js_1 = require("../../functions/track/interaction.js");
+const render_content_helpers_js_1 = require("./render-content.helpers.js");
+const target_js_1 = require("../../constants/target.js");
+const logger_js_1 = require("../../helpers/logger.js");
+function RenderContent(props) {
+    const elementRef = (0, react_1.useRef)(null);
+    const [forceReRenderCount, setForceReRenderCount] = (0, react_1.useState)(() => 0);
+    const [overrideContent, setOverrideContent] = (0, react_1.useState)(() => null);
+    const [useContent, setUseContent] = (0, react_1.useState)(() => (0, render_content_helpers_js_1.getContentInitialValue)({
+        content: props.content,
+        data: props.data,
+    }));
+    function mergeNewContent(newContent) {
+        setUseContent({
+            ...useContent,
+            ...newContent,
+            data: {
+                ...useContent?.data,
+                ...newContent?.data,
+            },
+            meta: {
+                ...useContent?.meta,
+                ...newContent?.meta,
+                breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+            },
+        });
+    }
+    function setBreakpoints(breakpoints) {
+        setUseContent({
+            ...useContent,
+            meta: {
+                ...useContent?.meta,
+                breakpoints,
+            },
+        });
+    }
+    const [update, setUpdate] = (0, react_1.useState)(() => 0);
+    const [canTrackToUse, setCanTrackToUse] = (0, react_1.useState)(() => (0, nullable_js_1.checkIsDefined)(props.canTrack) ? props.canTrack : true);
+    const [contentState, setContentState] = (0, react_1.useState)(() => (0, render_content_helpers_js_1.getContextStateInitialValue)({
+        content: props.content,
+        data: props.data,
+        locale: props.locale,
+    }));
+    function setContextState(newState) {
+        setContentState(newState);
+    }
+    const [allRegisteredComponents, setAllRegisteredComponents] = (0, react_1.useState)(() => [
+        ...(0, builder_registered_components_js_1.getDefaultRegisteredComponents)(),
+        // While this `components` object is deprecated, we must maintain support for it.
+        // 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.
+        ...register_component_js_1.components,
+        ...(props.customComponents || []),
+    ].reduce((acc, curr) => ({
+        ...acc,
+        [curr.name]: curr,
+    }), {}));
+    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 !== useContent?.id) {
+                        return;
+                    }
+                    if (breakpoints) {
+                        setBreakpoints(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;
+                }
+                case "builder.patchUpdates": {
+                    // TODO
+                    break;
+                }
+            }
+        }
+    }
+    function evaluateJsCode() {
+        // run any dynamic JS code attached to content
+        const jsCode = useContent?.data?.jsCode;
+        if (jsCode) {
+            (0, evaluate_js_1.evaluate)({
+                code: jsCode,
+                context: props.context || {},
+                state: contentState,
+            });
+        }
+    }
+    const [httpReqsData, setHttpReqsData] = (0, react_1.useState)(() => ({}));
+    const [clicked, setClicked] = (0, react_1.useState)(() => false);
+    function onClick(event) {
+        if (useContent) {
+            const variationId = useContent?.testVariationId;
+            const contentId = useContent?.id;
+            (0, index_js_2._track)({
+                type: "click",
+                canTrack: canTrackToUse,
+                contentId,
+                apiKey: props.apiKey,
+                variationId: variationId !== contentId ? variationId : undefined,
+                ...(0, interaction_js_1.getInteractionPropertiesForEvent)(event),
+                unique: !clicked,
+            });
+        }
+        if (!clicked) {
+            setClicked(true);
+        }
+    }
+    function evalExpression(expression) {
+        return expression.replace(/{{([^}]+)}}/g, (_match, group) => (0, evaluate_js_1.evaluate)({
+            code: group,
+            context: props.context || {},
+            state: contentState,
+        }));
+    }
+    function handleRequest({ url, key }) {
+        (0, get_fetch_js_1.fetch)(url)
+            .then((response) => response.json())
+            .then((json) => {
+            const newState = {
+                ...contentState,
+                [key]: json,
+            };
+            setContextState(newState);
+        })
+            .catch((err) => {
+            console.error("error fetching dynamic data", url, err);
+        });
+    }
+    function runHttpRequests() {
+        const requests = useContent?.data?.httpRequests ?? {};
+        Object.entries(requests).forEach(([key, url]) => {
+            if (url && (!httpReqsData[key] || (0, is_editing_js_1.isEditing)())) {
+                const evaluatedUrl = evalExpression(url);
+                handleRequest({
+                    url: evaluatedUrl,
+                    key,
+                });
+            }
+        });
+    }
+    function emitStateUpdate() {
+        if ((0, is_editing_js_1.isEditing)()) {
+            window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+                detail: {
+                    state: contentState,
+                    ref: {
+                        name: props.model,
+                    },
+                },
+            }));
+        }
+    }
+    (0, react_1.useEffect)(() => {
+        if (!props.apiKey) {
+            logger_js_1.logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+        }
+        if ((0, is_browser_js_1.isBrowser)()) {
+            if ((0, is_editing_js_1.isEditing)()) {
+                setForceReRenderCount(forceReRenderCount + 1);
+                (0, init_editing_js_1.registerInsertMenu)();
+                (0, init_editing_js_1.setupBrowserForEditing)({
+                    ...(props.locale
+                        ? {
+                            locale: props.locale,
+                        }
+                        : {}),
+                    ...(props.includeRefs
+                        ? {
+                            includeRefs: props.includeRefs,
+                        }
+                        : {}),
+                });
+                Object.values(allRegisteredComponents).forEach((registeredComponent) => {
+                    const message = (0, register_component_js_1.createRegisterComponentMessage)(registeredComponent);
+                    window.parent?.postMessage(message, "*");
+                });
+                window.addEventListener("message", processMessage);
+                window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+            }
+            if (useContent) {
+                const variationId = useContent?.testVariationId;
+                const contentId = useContent?.id;
+                (0, index_js_2._track)({
+                    type: "impression",
+                    canTrack: canTrackToUse,
+                    contentId,
+                    apiKey: props.apiKey,
+                    variationId: variationId !== contentId ? variationId : undefined,
+                });
+            }
+            // override normal content in preview mode
+            if ((0, is_previewing_js_1.isPreviewing)()) {
+                const searchParams = new URL(location.href).searchParams;
+                const searchParamPreviewModel = searchParams.get("builder.preview");
+                const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
+                const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
+                /**
+                 * Make sure that:
+                 * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered  *  at the same time, e.g. header/page/footer.  * - the API key is the same, since we don't want to preview content from other organizations.
+                 * - if there is content, that the preview ID is the same as that of the one we receive.
+                 *
+                 * TO-DO: should we only update the state when there is a change?
+                 **/
+                if (searchParamPreviewModel === props.model &&
+                    previewApiKey === props.apiKey &&
+                    (!props.content || searchParamPreviewId === props.content.id)) {
+                    (0, index_js_1.getContent)({
+                        model: props.model,
+                        apiKey: props.apiKey,
+                        apiVersion: props.apiVersion,
+                    }).then((content) => {
+                        if (content) {
+                            mergeNewContent(content);
+                        }
+                    });
+                }
+            }
+            evaluateJsCode();
+            runHttpRequests();
+            emitStateUpdate();
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (props.content) {
+            mergeNewContent(props.content);
+        }
+    }, [props.content]);
+    (0, react_1.useEffect)(() => {
+        evaluateJsCode();
+    }, [useContent?.data?.jsCode, contentState]);
+    (0, react_1.useEffect)(() => {
+        runHttpRequests();
+    }, [useContent?.data?.httpRequests]);
+    (0, react_1.useEffect)(() => {
+        emitStateUpdate();
+    }, [contentState]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if ((0, is_browser_js_1.isBrowser)()) {
+                window.removeEventListener("message", processMessage);
+                window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+            }
+        };
+    }, []);
+    return (React.createElement(builder_context_js_1.default.Provider, { value: {
+            content: useContent,
+            state: contentState,
+            setState: setContextState,
+            context: props.context || {},
+            apiKey: props.apiKey,
+            apiVersion: props.apiVersion,
+            registeredComponents: allRegisteredComponents,
+        } }, useContent ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { ref: elementRef, onClick: (event) => onClick(event), "builder-content-id": useContent?.id, "builder-model": props.model },
+            target_js_1.TARGET !== "reactNative" ? (React.createElement(React.Fragment, null,
+                React.createElement(render_styles_1.default, { contentId: useContent?.id, cssCode: useContent?.data?.cssCode, customFonts: useContent?.data?.customFonts }))) : null,
+            React.createElement(render_blocks_1.default, { blocks: useContent?.data?.blocks, key: forceReRenderCount })))) : null));
+}
+exports.default = RenderContent;

package/dist/react/cjs/components/render-inlined-styles.d.ts

@@ -0,0 +1,2 @@
+export default RenderInlinedStyles;
+declare function RenderInlinedStyles(props: any): JSX.Element;

package/dist/react/cjs/components/render-inlined-styles.js

@@ -0,0 +1,19 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const target_js_1 = require("../constants/target.js");
+function RenderInlinedStyles(props) {
+    function tag() {
+        // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+        // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+        return "sty" + "le";
+    }
+    function injectedStyleScript() {
+        return `<${tag()}>${props.styles}</${tag()}>`;
+    }
+    const TagRef = tag();
+    return (React.createElement(React.Fragment, null, target_js_1.TARGET === "svelte" || target_js_1.TARGET === "qwik" ? (React.createElement(React.Fragment, null,
+        React.createElement(TagRef, { dangerouslySetInnerHTML: { __html: props.styles } }))) : (React.createElement(TagRef, null, props.styles))));
+}
+exports.default = RenderInlinedStyles;

package/dist/react/cjs/constants/builder-registered-components.d.ts

@@ -0,0 +1 @@
+export function getDefaultRegisteredComponents(): any[];

package/dist/react/cjs/constants/builder-registered-components.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDefaultRegisteredComponents = void 0;
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+    for (var prop in b || (b = {}))
+        if (__hasOwnProp.call(b, prop))
+            __defNormalProp(a, prop, b[prop]);
+    if (__getOwnPropSymbols)
+        for (var prop of __getOwnPropSymbols(b)) {
+            if (__propIsEnum.call(b, prop))
+                __defNormalProp(a, prop, b[prop]);
+        }
+    return a;
+};
+const button_1 = require("../blocks/button/button");
+const component_info_js_1 = require("../blocks/button/component-info.js");
+const columns_1 = require("../blocks/columns/columns");
+const component_info_js_2 = require("../blocks/columns/component-info.js");
+const component_info_js_3 = require("../blocks/fragment/component-info.js");
+const fragment_1 = require("../blocks/fragment/fragment");
+const component_info_js_4 = require("../blocks/image/component-info.js");
+const image_1 = require("../blocks/image/image");
+const component_info_js_5 = require("../blocks/section/component-info.js");
+const section_1 = require("../blocks/section/section");
+const component_info_js_6 = require("../blocks/symbol/component-info.js");
+const symbol_1 = require("../blocks/symbol/symbol");
+const component_info_js_7 = require("../blocks/text/component-info.js");
+const text_1 = require("../blocks/text/text");
+const component_info_js_8 = require("../blocks/video/component-info.js");
+const video_1 = require("../blocks/video/video");
+const component_info_js_9 = require("../blocks/embed/component-info.js");
+const embed_1 = require("../blocks/embed/embed");
+const img_1 = require("../blocks/img/img");
+const component_info_js_10 = require("../blocks/img/component-info.js");
+const custom_code_1 = require("../blocks/custom-code/custom-code");
+const component_info_js_11 = require("../blocks/custom-code/component-info.js");
+const getDefaultRegisteredComponents = () => [
+    __spreadValues({ component: button_1.default }, component_info_js_1.componentInfo),
+    __spreadValues({ component: columns_1.default }, component_info_js_2.componentInfo),
+    __spreadValues({ component: custom_code_1.default }, component_info_js_11.componentInfo),
+    __spreadValues({ component: embed_1.default }, component_info_js_9.componentInfo),
+    __spreadValues({ component: fragment_1.default }, component_info_js_3.componentInfo),
+    __spreadValues({ component: image_1.default }, component_info_js_4.componentInfo),
+    __spreadValues({ component: img_1.default }, component_info_js_10.componentInfo),
+    __spreadValues({ component: section_1.default }, component_info_js_5.componentInfo),
+    __spreadValues({ component: symbol_1.default }, component_info_js_6.componentInfo),
+    __spreadValues({ component: text_1.default }, component_info_js_7.componentInfo),
+    __spreadValues({ component: video_1.default }, component_info_js_8.componentInfo)
+];
+exports.getDefaultRegisteredComponents = getDefaultRegisteredComponents;

package/dist/react/cjs/constants/device-sizes.d.ts

@@ -0,0 +1,21 @@
+export function getMaxWidthQueryForSize(size: any, sizeValues?: {
+    small: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    medium: {
+        min: number;
+        default: number;
+        max: number;
+    };
+    large: {
+        min: number;
+        default: number;
+        max: number;
+    };
+}): string;
+export function getSizesForBreakpoints({ small, medium }: {
+    small: any;
+    medium: any;
+}): any;

package/dist/react/cjs/constants/device-sizes.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSizesForBreakpoints = exports.getMaxWidthQueryForSize = void 0;
+const fast_clone_1 = require("../functions/fast-clone");
+const SIZES = {
+    small: {
+        min: 320,
+        default: 321,
+        max: 640
+    },
+    medium: {
+        min: 641,
+        default: 642,
+        max: 991
+    },
+    large: {
+        min: 990,
+        default: 991,
+        max: 1200
+    }
+};
+const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+exports.getMaxWidthQueryForSize = getMaxWidthQueryForSize;
+const getSizesForBreakpoints = ({ small, medium }) => {
+    const newSizes = (0, fast_clone_1.fastClone)(SIZES);
+    if (!small || !medium) {
+        return newSizes;
+    }
+    const smallMin = Math.floor(small / 2);
+    newSizes.small = {
+        max: small,
+        min: smallMin,
+        default: smallMin + 1
+    };
+    const mediumMin = newSizes.small.max + 1;
+    newSizes.medium = {
+        max: medium,
+        min: mediumMin,
+        default: mediumMin + 1
+    };
+    const largeMin = newSizes.medium.max + 1;
+    newSizes.large = {
+        max: 2e3,
+        min: largeMin,
+        default: largeMin + 1
+    };
+    return newSizes;
+};
+exports.getSizesForBreakpoints = getSizesForBreakpoints;

package/dist/react/cjs/constants/target.d.ts

@@ -0,0 +1 @@
+export const TARGET: "react";

package/dist/react/cjs/constants/target.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TARGET = void 0;
+const TARGET = "react";
+exports.TARGET = TARGET;

package/dist/react/cjs/context/builder.context.d.ts

@@ -0,0 +1,11 @@
+export { stdin_default as default };
+declare var stdin_default: import("react").Context<{
+    content: null;
+    context: {};
+    state: {};
+    setState(): void;
+    apiKey: null;
+    apiVersion: undefined;
+    registeredComponents: {};
+    inheritedStyles: {};
+}>;

package/dist/react/cjs/context/builder.context.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+const react_1 = require("react");
+var stdin_default = (0, react_1.createContext)({
+    content: null,
+    context: {},
+    state: {},
+    setState() {
+    },
+    apiKey: null,
+    apiVersion: void 0,
+    registeredComponents: {},
+    inheritedStyles: {}
+});
+exports.default = stdin_default;

package/dist/react/cjs/functions/camel-to-kebab-case.d.ts

@@ -0,0 +1 @@
+export function camelToKebabCase(string: any): any;

package/dist/react/cjs/functions/camel-to-kebab-case.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.camelToKebabCase = void 0;
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+exports.camelToKebabCase = camelToKebabCase;