@builder.io/react 3.0.1 → 3.0.2-0

package/dist/lib/src/components/builder-component.component.js

@@ -1,4 +1,3 @@
-"use strict";
 'use client';
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -80,29 +79,24 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BuilderComponent = exports.onChange = void 0;
-var react_1 = __importDefault(require("react"));
-var react_dom_1 = __importDefault(require("react-dom"));
-var core_1 = require("@emotion/core");
-var builder_content_component_1 = require("./builder-content.component");
-var builder_blocks_component_1 = require("./builder-blocks.component");
-var sdk_1 = require("@builder.io/sdk");
-var builder_store_1 = require("../store/builder-store");
-var hash_sum_1 = __importDefault(require("hash-sum"));
-var on_change_1 = __importDefault(require("../../lib/on-change"));
-exports.onChange = on_change_1.default;
-var device_sizes_constant_1 = require("../constants/device-sizes.constant");
-var builder_async_requests_1 = require("../store/builder-async-requests");
-var debonce_next_tick_1 = require("../functions/debonce-next-tick");
-var throttle_1 = require("../functions/throttle");
-var builder_meta_1 = require("../store/builder-meta");
-var try_eval_1 = require("../functions/try-eval");
-var to_error_1 = require("../to-error");
-var get_builder_pixel_1 = require("../functions/get-builder-pixel");
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { jsx, css } from '@emotion/core';
+import { BuilderContent, getContentWithInfo } from './builder-content.component';
+import { BuilderBlocks } from './builder-blocks.component';
+import { Builder, builder, Subscription, BehaviorSubject, } from '@builder.io/sdk';
+import { BuilderStoreContext } from '../store/builder-store';
+import hash from 'hash-sum';
+import onChange from '../../lib/on-change';
+export { onChange };
+import { getSizesForBreakpoints } from '../constants/device-sizes.constant';
+import { BuilderAsyncRequestsContext, isRequestInfo, } from '../store/builder-async-requests';
+import { debounceNextTick } from '../functions/debonce-next-tick';
+import { throttle } from '../functions/throttle';
+import { BuilderMetaContext } from '../store/builder-meta';
+import { tryEval } from '../functions/try-eval';
+import { toError } from '../to-error';
+import { getBuilderPixel } from '../functions/get-builder-pixel';
 function pick(obj) {
     var keys = [];
     for (var _i = 1; _i < arguments.length; _i++) {
@@ -134,10 +128,10 @@ var wrapComponent = function (info) {
         var baseProps = omit.apply(void 0, __spreadArray(__spreadArray([props], inputNames, false), ['attributes'], false));
         var inputProps = props; // pick(props, ...inputNames);
         if (info.noWrap) {
-            return react_1.default.createElement(info.class, __assign({ attributes: baseProps }, inputProps));
+            return React.createElement(info.class, __assign({ attributes: baseProps }, inputProps));
         }
-        return (react_1.default.createElement(Tag, __assign({}, baseProps),
-            react_1.default.createElement(info.class, __assign({}, inputProps))));
+        return (React.createElement(Tag, __assign({}, baseProps),
+            React.createElement(info.class, __assign({}, inputProps))));
     };
 };
 var size = function (thing) { return Object.keys(thing).length; };
@@ -198,13 +192,13 @@ var BuilderComponent = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         _this = _super.call(this, props) || this;
-        _this.subscriptions = new sdk_1.Subscription();
+        _this.subscriptions = new Subscription();
         // TODO: don't trigger initial one?
-        _this.onStateChange = new sdk_1.BehaviorSubject(null);
-        _this.asServer = sdk_1.Builder.isServer;
+        _this.onStateChange = new BehaviorSubject(null);
+        _this.asServer = Builder.isServer;
         _this.contentRef = null;
         _this.styleRef = null;
-        _this.rootState = sdk_1.Builder.isServer ? {} : (0, on_change_1.default)({}, function () { return _this.updateState(); });
+        _this.rootState = Builder.isServer ? {} : onChange({}, function () { return _this.updateState(); });
         _this.lastJsCode = '';
         _this.lastHttpRequests = {};
         _this.httpSubscriptionPerKey = {};
@@ -219,7 +213,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                     if (!data.contentId || data.contentId !== ((_a = _this.useContent) === null || _a === void 0 ? void 0 : _a.id)) {
                         return;
                     }
-                    _this.sizes = (0, device_sizes_constant_1.getSizesForBreakpoints)(data.breakpoints || {});
+                    _this.sizes = getSizesForBreakpoints(data.breakpoints || {});
                     _this.setState({
                         state: Object.assign(_this.rootState, {
                             deviceSize: _this.deviceSizeState,
@@ -272,7 +266,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                 _this.setState(__assign(__assign({}, _this.state), { updates: ((_this.state && _this.state.updates) || 0) + 1, state: Object.assign(_this.rootState, __assign(__assign({}, _this.state.state), { deviceSize: deviceSize })) }));
             }
         };
-        _this.resizeListener = sdk_1.Builder.isEditing ? (0, throttle_1.throttle)(_this.resizeFn, 200) : debounce(_this.resizeFn, 400);
+        _this.resizeListener = Builder.isEditing ? throttle(_this.resizeFn, 200) : debounce(_this.resizeFn, 400);
         _this.mounted = false;
         _this.updateState = function (fn) {
             var state = _this.rootState;
@@ -293,7 +287,7 @@ var BuilderComponent = /** @class */ (function (_super) {
         };
         _this.onContentLoaded = function (data, content) {
             var _a;
-            if (_this.name === 'page' && sdk_1.Builder.isBrowser) {
+            if (_this.name === 'page' && Builder.isBrowser) {
                 if (data) {
                     var title = data.title, pageTitle = data.pageTitle, description = data.description, pageDescription = data.pageDescription;
                     if (title || pageTitle) {
@@ -310,7 +304,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                     }
                 }
             }
-            if (sdk_1.Builder.isEditing) {
+            if (Builder.isEditing) {
                 _this.notifyStateChange();
             }
             if (_this.props.contentLoaded) {
@@ -340,10 +334,10 @@ var BuilderComponent = /** @class */ (function (_super) {
                 }
             }
             // TODO: also throttle on edits maybe
-            if (data && data.jsCode && sdk_1.Builder.isBrowser && !_this.options.codegen) {
+            if (data && data.jsCode && Builder.isBrowser && !_this.options.codegen) {
                 // Don't rerun js code when editing and not changed
                 var skip = false;
-                if (sdk_1.Builder.isEditing) {
+                if (Builder.isEditing) {
                     if (_this.lastJsCode === data.jsCode) {
                         skip = true;
                     }
@@ -355,13 +349,13 @@ var BuilderComponent = /** @class */ (function (_super) {
                     var state = _this.state.state;
                     // TODO: real editing method
                     try {
-                        var result = new Function('data', 'ref', 'state', 'update', 'element', 'Builder', 'builder', 'context', data.jsCode)(data, _this, state, _this.state.update, _this.ref, sdk_1.Builder, sdk_1.builder, _this.state.context);
+                        var result = new Function('data', 'ref', 'state', 'update', 'element', 'Builder', 'builder', 'context', data.jsCode)(data, _this, state, _this.state.update, _this.ref, Builder, builder, _this.state.context);
                         // TODO: allow exports = { } syntax?
                         // TODO: do something with reuslt like view - methods, computed, actions, properties, template, etc etc
                     }
                     catch (err) {
-                        var error = (0, to_error_1.toError)(err);
-                        if (sdk_1.Builder.isBrowser) {
+                        var error = toError(err);
+                        if (Builder.isBrowser) {
                             console.warn('Builder custom code error:', error.message, 'in', data.jsCode, error.stack);
                         }
                         else {
@@ -380,10 +374,10 @@ var BuilderComponent = /** @class */ (function (_super) {
                 if (!skip) {
                     var _loop_1 = function (key) {
                         var url = data.httpRequests[key];
-                        if (url && (!_this.data[key] || sdk_1.Builder.isEditing)) {
-                            if (sdk_1.Builder.isBrowser) {
+                        if (url && (!_this.data[key] || Builder.isEditing)) {
+                            if (Builder.isBrowser) {
                                 var finalUrl_1 = _this.evalExpression(url);
-                                if (sdk_1.Builder.isEditing && _this.lastHttpRequests[key] === finalUrl_1) {
+                                if (Builder.isEditing && _this.lastHttpRequests[key] === finalUrl_1) {
                                     return "continue";
                                 }
                                 _this.lastHttpRequests[key] = finalUrl_1;
@@ -422,20 +416,20 @@ var BuilderComponent = /** @class */ (function (_super) {
         if (_content && _content.content) {
             _content = _content.content;
         }
-        _this.sizes = (0, device_sizes_constant_1.getSizesForBreakpoints)(((_a = _content === null || _content === void 0 ? void 0 : _content.meta) === null || _a === void 0 ? void 0 : _a.breakpoints) || {});
+        _this.sizes = getSizesForBreakpoints(((_a = _content === null || _content === void 0 ? void 0 : _content.meta) === null || _a === void 0 ? void 0 : _a.breakpoints) || {});
         // TODO: pass this all the way down - symbols, etc
         // this.asServer = Boolean(props.hydrate && Builder.isBrowser)
         _this.state = {
             // TODO: should change if this prop changes
-            context: __assign(__assign({}, props.context), { apiKey: sdk_1.builder.apiKey || _this.props.apiKey }),
-            state: Object.assign(_this.rootState, __assign(__assign(__assign(__assign({}, (_this.inlinedContent && _this.inlinedContent.data && _this.inlinedContent.data.state)), { isBrowser: sdk_1.Builder.isBrowser, isServer: !sdk_1.Builder.isBrowser, _hydrate: props.hydrate, location: _this.locationState, deviceSize: _this.deviceSizeState, 
+            context: __assign(__assign({}, props.context), { apiKey: builder.apiKey || _this.props.apiKey }),
+            state: Object.assign(_this.rootState, __assign(__assign(__assign(__assign({}, (_this.inlinedContent && _this.inlinedContent.data && _this.inlinedContent.data.state)), { isBrowser: Builder.isBrowser, isServer: !Builder.isBrowser, _hydrate: props.hydrate, location: _this.locationState, deviceSize: _this.deviceSizeState, 
                 // TODO: will user attributes be ready here?
                 device: _this.device }), _this.getHtmlData()), props.data)),
             updates: 0,
             key: 0,
             update: _this.updateState,
         };
-        if (sdk_1.Builder.isBrowser) {
+        if (Builder.isBrowser) {
             var key = _this.props.apiKey;
             if (key && key !== _this.builder.apiKey) {
                 _this.builder.apiKey = key;
@@ -443,7 +437,7 @@ var BuilderComponent = /** @class */ (function (_super) {
             if (_this.inlinedContent) {
                 // Sometimes with graphql we get the content as `content.content`
                 var content = _this.inlinedContent.content || _this.inlinedContent;
-                _this.onContentLoaded(content === null || content === void 0 ? void 0 : content.data, (0, builder_content_component_1.getContentWithInfo)(content));
+                _this.onContentLoaded(content === null || content === void 0 ? void 0 : content.data, getContentWithInfo(content));
             }
         }
         return _this;
@@ -482,7 +476,7 @@ var BuilderComponent = /** @class */ (function (_super) {
     });
     Object.defineProperty(BuilderComponent.prototype, "builder", {
         get: function () {
-            return this.props.builder || sdk_1.builder;
+            return this.props.builder || builder;
         },
         enumerable: false,
         configurable: true
@@ -490,7 +484,7 @@ var BuilderComponent = /** @class */ (function (_super) {
     BuilderComponent.prototype.getHtmlData = function () {
         var id = (this.inlinedContent && this.inlinedContent.id) || this.props.entry;
         var script = id &&
-            sdk_1.Builder.isBrowser &&
+            Builder.isBrowser &&
             document.querySelector("script[data-builder-json=\"".concat(id, "\"],script[data-builder-state=\"").concat(id, "\"]"));
         if (script) {
             try {
@@ -522,7 +516,7 @@ var BuilderComponent = /** @class */ (function (_super) {
         // TODO: trigger state change on screen size change
         get: function () {
             // TODO: use context to pass this down on server
-            return sdk_1.Builder.isBrowser
+            return Builder.isBrowser
                 ? this.sizes.getSizeForWidth(window.innerWidth)
                 : sizeMap[this.device] || 'large';
         },
@@ -577,13 +571,13 @@ var BuilderComponent = /** @class */ (function (_super) {
                     if (el) {
                         el.innerHTML = content;
                     }
-                    else if (!sdk_1.Builder.isEditing) {
+                    else if (!Builder.isEditing) {
                         keepStyles_1 += match;
                     }
                     return match;
                 });
                 // NextTick? or longer timeout?
-                sdk_1.Builder.nextTick(function () {
+                Builder.nextTick(function () {
                     apiStyles_1.innerHTML = keepStyles_1;
                 });
             }
@@ -605,16 +599,16 @@ var BuilderComponent = /** @class */ (function (_super) {
             div.appendChild(element);
             useEl = div;
         }
-        if (sdk_1.Builder.isEditing || (sdk_1.Builder.isBrowser && location.search.includes('builder.preview='))) {
+        if (Builder.isEditing || (Builder.isBrowser && location.search.includes('builder.preview='))) {
             shouldHydrate = false;
         }
         if (shouldHydrate && element) {
             // TODO: maybe hydrate again. Maybe...
-            var val_1 = react_dom_1.default.render(react_1.default.createElement(BuilderComponent, __assign({}, props)), useEl, useEl.builderRootRef);
+            var val_1 = ReactDOM.render(React.createElement(BuilderComponent, __assign({}, props)), useEl, useEl.builderRootRef);
             useEl.builderRootRef = val_1;
             return val_1;
         }
-        var val = react_dom_1.default.render(react_1.default.createElement(BuilderComponent, __assign({}, props)), useEl, useEl.builderRootRef);
+        var val = ReactDOM.render(React.createElement(BuilderComponent, __assign({}, props)), useEl, useEl.builderRootRef);
         useEl.builderRootRef = val;
         return val;
     };
@@ -629,17 +623,17 @@ var BuilderComponent = /** @class */ (function (_super) {
                 state.isServer = false;
             });
         }
-        if (sdk_1.Builder.isIframe) {
+        if (Builder.isIframe) {
             (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage({ type: 'builder.sdkInjected', data: { modelName: this.name } }, '*');
         }
-        if (sdk_1.Builder.isBrowser) {
+        if (Builder.isBrowser) {
             // TODO: remove event on unload
             window.addEventListener('resize', this.resizeListener);
-            if (sdk_1.Builder.isEditing) {
+            if (Builder.isEditing) {
                 window.addEventListener('message', this.messageListener);
             }
-            if (sdk_1.Builder.isEditing || sdk_1.Builder.isPreviewing) {
-                sdk_1.Builder.nextTick(function () {
+            if (Builder.isEditing || Builder.isPreviewing) {
+                Builder.nextTick(function () {
                     _this.firstLoad = false;
                     _this.reload();
                 });
@@ -655,14 +649,14 @@ var BuilderComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(BuilderComponent.prototype, "isPreviewing", {
         get: function () {
-            return ((sdk_1.Builder.isServer || (sdk_1.Builder.isBrowser && sdk_1.Builder.isPreviewing && !this.firstLoad)) &&
-                sdk_1.builder.previewingModel === this.name);
+            return ((Builder.isServer || (Builder.isBrowser && Builder.isPreviewing && !this.firstLoad)) &&
+                builder.previewingModel === this.name);
         },
         enumerable: false,
         configurable: true
     });
     BuilderComponent.prototype.notifyStateChange = function () {
-        if (sdk_1.Builder.isServer) {
+        if (Builder.isServer) {
             return;
         }
         if (!(this && this.state)) {
@@ -673,7 +667,7 @@ var BuilderComponent = /** @class */ (function (_super) {
         if (this.props.onStateChange) {
             this.props.onStateChange(nextState);
         }
-        if (sdk_1.Builder.isBrowser) {
+        if (Builder.isBrowser) {
             window.dispatchEvent(new CustomEvent('builder:component:stateChange', {
                 detail: {
                     state: nextState,
@@ -688,7 +682,7 @@ var BuilderComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(BuilderComponent.prototype, "location", {
         get: function () {
-            return this.props.location || (sdk_1.Builder.isBrowser ? location : {});
+            return this.props.location || (Builder.isBrowser ? location : {});
         },
         enumerable: false,
         configurable: true
@@ -719,7 +713,7 @@ var BuilderComponent = /** @class */ (function (_super) {
     };
     BuilderComponent.prototype.componentWillUnmount = function () {
         this.unsubscribe();
-        if (sdk_1.Builder.isBrowser) {
+        if (Builder.isBrowser) {
             window.removeEventListener('resize', this.resizeListener);
             window.removeEventListener('message', this.messageListener);
         }
@@ -785,7 +779,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                 Object.assign(state, _this.externalState);
             });
         }
-        if (sdk_1.Builder.isEditing) {
+        if (Builder.isEditing) {
             if (this.inlinedContent && prevProps.content !== this.inlinedContent) {
                 this.onContentLoaded(this.inlinedContent.data, this.inlinedContent);
             }
@@ -836,36 +830,36 @@ var BuilderComponent = /** @class */ (function (_super) {
         var _this = this;
         var _a;
         var content = this.content;
-        var dataString = sdk_1.Builder.isBrowser &&
+        var dataString = Builder.isBrowser &&
             this.externalState &&
             size(this.externalState) &&
-            (0, hash_sum_1.default)(this.externalState);
-        var key = sdk_1.Builder.isEditing ? this.name : this.props.entry;
-        if (key && !sdk_1.Builder.isEditing && dataString && dataString.length < 300) {
+            hash(this.externalState);
+        var key = Builder.isEditing ? this.name : this.props.entry;
+        if (key && !Builder.isEditing && dataString && dataString.length < 300) {
             key += ':' + dataString;
         }
-        var WrapComponent = this.props.dataOnly ? react_1.default.Fragment : 'div';
+        var WrapComponent = this.props.dataOnly ? React.Fragment : 'div';
         var contentId = (_a = this.useContent) === null || _a === void 0 ? void 0 : _a.id;
         return (
         // TODO: data attributes for model, id, etc?
-        react_1.default.createElement(WrapComponent, { onClick: function (event) {
+        React.createElement(WrapComponent, { onClick: function (event) {
                 // Prevent propagation from the root content component when editing to prevent issues
                 // like client side routing triggering when links are clicked, unless this behavior is
                 // disabled with the stopClickPropagationWhenEditing prop
-                if (sdk_1.Builder.isEditing &&
+                if (Builder.isEditing &&
                     !_this.props.isChild &&
                     !_this.props.stopClickPropagationWhenEditing) {
                     event.stopPropagation();
                 }
             }, className: "builder-component ".concat(contentId ? "builder-component-".concat(contentId) : ''), "data-name": this.name, "data-source": "Rendered by Builder.io", key: this.state.key, ref: function (ref) { return (_this.ref = ref); } },
-            react_1.default.createElement(builder_meta_1.BuilderMetaContext.Consumer, null, function (value) { return (react_1.default.createElement(builder_meta_1.BuilderMetaContext.Provider, { value: typeof _this.props.ampMode === 'boolean'
+            React.createElement(BuilderMetaContext.Consumer, null, function (value) { return (React.createElement(BuilderMetaContext.Provider, { value: typeof _this.props.ampMode === 'boolean'
                     ? __assign(__assign({}, value), { ampMode: _this.props.ampMode }) : value },
-                react_1.default.createElement(builder_async_requests_1.BuilderAsyncRequestsContext.Consumer, null, function (value) {
+                React.createElement(BuilderAsyncRequestsContext.Consumer, null, function (value) {
                     var _a;
                     _this._asyncRequests = value && value.requests;
                     _this._errors = value && value.errors;
                     _this._logs = value && value.logs;
-                    return (react_1.default.createElement(builder_content_component_1.BuilderContent, { isStatic: _this.props.isStatic || sdk_1.Builder.isStatic, key: ((_a = _this.inlinedContent) === null || _a === void 0 ? void 0 : _a.id) ||
+                    return (React.createElement(BuilderContent, { isStatic: _this.props.isStatic || Builder.isStatic, key: ((_a = _this.inlinedContent) === null || _a === void 0 ? void 0 : _a.id) ||
                             ('content' in _this.props && !_this.isPreviewing
                                 ? 'null-content-prop'
                                 : 'no-content-prop'), builder: _this.builder, ref: function (ref) { return (_this.contentRef = ref); }, 
@@ -886,22 +880,22 @@ var BuilderComponent = /** @class */ (function (_super) {
                             }
                             _this.state.context.builderContent = fullData;
                         }
-                        if (sdk_1.Builder.isBrowser) {
-                            sdk_1.Builder.nextTick(function () {
+                        if (Builder.isBrowser) {
+                            Builder.nextTick(function () {
                                 _this.checkStyles(data);
                             });
                         }
                         var codegen = _this.options.codegen;
                         if (codegen && !_this.Component && (data === null || data === void 0 ? void 0 : data.blocksJs)) {
-                            var builderComponentNames = Array.from(new Set(sdk_1.Builder.components.map(function (item) { return item.name; })));
-                            var reversedcomponents_1 = sdk_1.Builder.components.slice().reverse();
+                            var builderComponentNames = Array.from(new Set(Builder.components.map(function (item) { return item.name; })));
+                            var reversedcomponents_1 = Builder.components.slice().reverse();
                             var builderComponents = builderComponentNames.map(function (name) {
                                 return reversedcomponents_1.find(function (item) { return item.class && item.name === name; });
                             });
                             var useBuilderState = function (initialState) {
-                                var _a = react_1.default.useState(0), setTick = _a[1];
-                                var state = react_1.default.useState(function () {
-                                    return (0, on_change_1.default)(initialState, function () {
+                                var _a = React.useState(0), setTick = _a[1];
+                                var state = React.useState(function () {
+                                    return onChange(initialState, function () {
                                         setTick(function (tick) { return tick + 1; });
                                     });
                                 })[0];
@@ -918,29 +912,29 @@ var BuilderComponent = /** @class */ (function (_super) {
                                 'Builder',
                                 'builder',
                                 'React',
-                                'useBuilderState'], mappedComponentNames, false), [data.blocksJs], false)))().apply(void 0, __spreadArray([core_1.jsx,
-                                core_1.css,
-                                sdk_1.Builder,
-                                sdk_1.builder,
-                                react_1.default,
+                                'useBuilderState'], mappedComponentNames, false), [data.blocksJs], false)))().apply(void 0, __spreadArray([jsx,
+                                css,
+                                Builder,
+                                builder,
+                                React,
                                 useBuilderState], finalizedComponents, false));
                         }
                         var blocks = (data === null || data === void 0 ? void 0 : data.blocks) || [];
                         var hasPixel = blocks.find(function (block) { var _a; return (_a = block.id) === null || _a === void 0 ? void 0 : _a.startsWith('builder-pixel'); });
                         if (data && !hasPixel && blocks.length > 0) {
-                            blocks.push((0, get_builder_pixel_1.getBuilderPixel)(sdk_1.builder.apiKey));
+                            blocks.push(getBuilderPixel(builder.apiKey));
                         }
                         // TODO: loading option - maybe that is what the children is or component prop
                         // TODO: get rid of all these wrapper divs
-                        return data ? (react_1.default.createElement("div", __assign({ "data-builder-component": _this.name, "data-builder-content-id": fullData.id }, (_this.isPreviewing
+                        return data ? (React.createElement("div", __assign({ "data-builder-component": _this.name, "data-builder-content-id": fullData.id }, (_this.isPreviewing
                             ? {
                                 'data-builder-variation-id': fullData.testVariationId || fullData.variationId || fullData.id,
                             }
                             : {})),
-                            !codegen && _this.getCss(data) && (react_1.default.createElement("style", { ref: function (ref) { return (_this.styleRef = ref); }, className: "builder-custom-styles", dangerouslySetInnerHTML: {
+                            !codegen && _this.getCss(data) && (React.createElement("style", { ref: function (ref) { return (_this.styleRef = ref); }, className: "builder-custom-styles", dangerouslySetInnerHTML: {
                                     __html: _this.getCss(data),
                                 } })),
-                            react_1.default.createElement(builder_store_1.BuilderStoreContext.Provider, { value: __assign(__assign({}, _this.state), { rootState: _this.rootState, state: _this.data, content: fullData, renderLink: _this.props.renderLink }) }, codegen && _this.Component ? (react_1.default.createElement(_this.Component, { data: _this.data, context: _this.state.context })) : (react_1.default.createElement(builder_blocks_component_1.BuilderBlocks, { key: String(!!((_a = data === null || data === void 0 ? void 0 : data.blocks) === null || _a === void 0 ? void 0 : _a.length)), emailMode: _this.props.emailMode, fieldName: "blocks", blocks: blocks }))))) : loading ? (react_1.default.createElement("div", { "data-builder-component": _this.name, className: "builder-loading" }, _this.props.children)) : (react_1.default.createElement("div", { "data-builder-component": _this.name, className: "builder-no-content" }));
+                            React.createElement(BuilderStoreContext.Provider, { value: __assign(__assign({}, _this.state), { rootState: _this.rootState, state: _this.data, content: fullData, renderLink: _this.props.renderLink }) }, codegen && _this.Component ? (React.createElement(_this.Component, { data: _this.data, context: _this.state.context })) : (React.createElement(BuilderBlocks, { key: String(!!((_a = data === null || data === void 0 ? void 0 : data.blocks) === null || _a === void 0 ? void 0 : _a.length)), emailMode: _this.props.emailMode, fieldName: "blocks", blocks: blocks }))))) : loading ? (React.createElement("div", { "data-builder-component": _this.name, className: "builder-loading" }, _this.props.children)) : (React.createElement("div", { "data-builder-component": _this.name, className: "builder-no-content" }));
                     }));
                 }))); })));
     };
@@ -948,7 +942,7 @@ var BuilderComponent = /** @class */ (function (_super) {
         var _this = this;
         var data = this.data;
         return String(expression).replace(/{{([^}]+)}}/g, function (match, group) {
-            return (0, try_eval_1.tryEval)(group, data, _this._errors);
+            return tryEval(group, data, _this._errors);
         });
     };
     BuilderComponent.prototype.handleRequest = function (propertyName, url) {
@@ -957,7 +951,7 @@ var BuilderComponent = /** @class */ (function (_super) {
             var _this = this;
             return __generator(this, function (_a) {
                 // TODO: Builder.isEditing = just checks if iframe and parent page is this.builder.io or localhost:1234
-                if (sdk_1.Builder.isIframe && fetchCache[url]) {
+                if (Builder.isIframe && fetchCache[url]) {
                     this.updateState(function (ctx) {
                         ctx[propertyName] = fetchCache[url];
                     });
@@ -969,7 +963,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                         switch (_a.label) {
                             case 0:
                                 requestStart = Date.now();
-                                if (!sdk_1.Builder.isBrowser) {
+                                if (!Builder.isBrowser) {
                                     console.time('Fetch ' + url);
                                 }
                                 _a.label = 1;
@@ -984,7 +978,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                                 return [3 /*break*/, 6];
                             case 4:
                                 err_1 = _a.sent();
-                                error = (0, to_error_1.toError)(err_1);
+                                error = toError(err_1);
                                 if (this._errors) {
                                     this._errors.push(error);
                                 }
@@ -993,7 +987,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                                 }
                                 return [2 /*return*/];
                             case 5:
-                                if (!sdk_1.Builder.isBrowser) {
+                                if (!Builder.isBrowser) {
                                     console.timeEnd('Fetch ' + url);
                                     if (this._logs) {
                                         this._logs.push("Fetched ".concat(url, " in ").concat(Date.now() - requestStart, "ms"));
@@ -1002,7 +996,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                                 return [7 /*endfinally*/];
                             case 6:
                                 if (json) {
-                                    if (sdk_1.Builder.isIframe) {
+                                    if (Builder.isIframe) {
                                         fetchCache[url] = json;
                                     }
                                     // TODO: debounce next tick all of these when there are a bunch
@@ -1015,7 +1009,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                     });
                 }); };
                 existing = this._asyncRequests &&
-                    this._asyncRequests.find(function (req) { return (0, builder_async_requests_1.isRequestInfo)(req) && req.url === url; });
+                    this._asyncRequests.find(function (req) { return isRequestInfo(req) && req.url === url; });
                 if (existing) {
                     promise_1 = existing.promise;
                     promise_1.then(function (json) {
@@ -1028,7 +1022,7 @@ var BuilderComponent = /** @class */ (function (_super) {
                     return [2 /*return*/, promise_1];
                 }
                 promise = request();
-                sdk_1.Builder.nextTick(function () {
+                Builder.nextTick(function () {
                     if (_this._asyncRequests) {
                         _this._asyncRequests.push(promise);
                     }
@@ -1040,12 +1034,12 @@ var BuilderComponent = /** @class */ (function (_super) {
     BuilderComponent.prototype.unsubscribe = function () {
         if (this.subscriptions) {
             this.subscriptions.unsubscribe();
-            this.subscriptions = new sdk_1.Subscription();
+            this.subscriptions = new Subscription();
         }
     };
     BuilderComponent.prototype.handleBuilderRequest = function (propertyName, optionsString) {
         var _this = this;
-        var options = (0, try_eval_1.tryEval)(optionsString, this.data, this._errors);
+        var options = tryEval(optionsString, this.data, this._errors);
         // TODO: this will screw up for multiple bits of data
         if (this.subscriptions) {
             this.unsubscribe();
@@ -1064,15 +1058,15 @@ var BuilderComponent = /** @class */ (function (_super) {
         }
     };
     BuilderComponent.defaults = {
-        codegen: Boolean(sdk_1.Builder.isBrowser && location.href.includes('builder.codegen=true')),
+        codegen: Boolean(Builder.isBrowser && location.href.includes('builder.codegen=true')),
     };
     __decorate([
-        debonce_next_tick_1.debounceNextTick,
+        debounceNextTick,
         __metadata("design:type", Function),
         __metadata("design:paramtypes", []),
         __metadata("design:returntype", void 0)
     ], BuilderComponent.prototype, "notifyStateChange", null);
     return BuilderComponent;
-}(react_1.default.Component));
-exports.BuilderComponent = BuilderComponent;
+}(React.Component));
+export { BuilderComponent };
 //# sourceMappingURL=builder-component.component.js.map