@react-buddy/ide-toolbox - npm Package Compare versions

Comparing version 2.2.0 to 2.2.1-dev.0

CHANGELOG.md

@@ -6,2 +6,14 @@ # Change Log
 
+## [2.2.1-dev.0](https://github.com/react-buddy/ide-toolbox/tree/master/packages/ide-toolbox/compare/@react-buddy/ide-toolbox@2.2.0...@react-buddy/ide-toolbox@2.2.1-dev.0) (2022-08-03)
+
+
+### Bug Fixes
+
+* browser dependent ide-toolbox [#35](https://github.com/react-buddy/ide-toolbox/tree/master/packages/ide-toolbox/issues/35) ([96597ef](https://github.com/react-buddy/ide-toolbox/tree/master/packages/ide-toolbox/commit/96597eff1ac492a29e0535337690dbaef2a3b9ab))
+* mangled entrypoints in ide-toolbox [#35](https://github.com/react-buddy/ide-toolbox/tree/master/packages/ide-toolbox/issues/35) ([9449fe1](https://github.com/react-buddy/ide-toolbox/tree/master/packages/ide-toolbox/commit/9449fe120b133e4b7080bee4e314af6c77e4cecb))
+
+
+
+
+
 # [2.2.0](https://github.com/react-buddy/ide-toolbox/tree/master/packages/ide-toolbox/compare/@react-buddy/ide-toolbox@2.1.2...@react-buddy/ide-toolbox@2.2.0) (2022-06-21)
@@ -8,0 +20,0 @@

dist/index.esm.js

@@ -1,11 +0,3 @@
-'use strict';
+import React, { Suspense, useState, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
 var _a;
@@ -15,3 +7,3 @@ const envDevmode = typeof process !== 'undefined'
     : false;
-const windowDevmode = window.REACT_BUDDY_IDE_DEVMODE === true;
+const windowDevmode = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.REACT_BUDDY_IDE_DEVMODE) === true;
 const DEV_MODE = windowDevmode || envDevmode;
@@ -23,8 +15,8 @@
         if (status.loading) {
-            return React__default['default'].createElement("div", null, " loading... ");
+            return React.createElement("div", null, " loading... ");
         }
         if (status.error) {
-            return (React__default['default'].createElement("div", null, "Unable to bootstrap dev mode. Probably you need to run backend or enable backend mocking mode."));
+            return (React.createElement("div", null, "Unable to bootstrap dev mode. Probably you need to run backend or enable backend mocking mode."));
         }
-        return React__default['default'].createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews });
+        return React.createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews });
     };
@@ -34,4 +26,4 @@ return DevBootstrapWrapped;
 const DevBootstrap = ({ ComponentPreviews }) => {
-    return (React__default['default'].createElement(React.Suspense, { fallback: React__default['default'].createElement("div", null, "Loading sources...") },
-        React__default['default'].createElement(ComponentPreviews, null)));
+    return (React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading sources...") },
+        React.createElement(ComponentPreviews, null)));
 };
@@ -41,5 +33,5 @@ const DevSupport = ({ children, ComponentPreviews, useInitialHook, devmode, }) => {
     if (isDevmode) {
-        return useInitialHook ? (withInitialHook(useInitialHook, ComponentPreviews)({})) : (React__default['default'].createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews }));
+        return useInitialHook ? (withInitialHook(useInitialHook, ComponentPreviews)({})) : (React.createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews }));
     }
-    return React__default['default'].createElement(React__default['default'].Fragment, null, children);
+    return React.createElement(React.Fragment, null, children);
 };
@@ -81,8 +73,8 @@ function enabledDevmode(devmode) {
 const TableHeader = () => {
-    return (React__default['default'].createElement("div", { className: 'table-header' },
-        React__default['default'].createElement("div", { className: 'table-header-item' }, "Property name"),
-        React__default['default'].createElement("div", { className: 'table-header-item-control' }, "Edit")));
+    return (React.createElement("div", { className: 'table-header' },
+        React.createElement("div", { className: 'table-header-item' }, "Property name"),
+        React.createElement("div", { className: 'table-header-item-control' }, "Edit")));
 };
 
-exports.PropsControlTypes = void 0;
+var PropsControlTypes;
 (function (PropsControlTypes) {
@@ -95,3 +87,3 @@ PropsControlTypes["Checkbox"] = "checkbox";
     PropsControlTypes["JsonEditor"] = "jsonEditor";
-})(exports.PropsControlTypes || (exports.PropsControlTypes = {}));
+})(PropsControlTypes || (PropsControlTypes = {}));
 
@@ -127,3 +119,3 @@ /*! *****************************************************************************
     var { value } = _a, restProps = __rest(_a, ["value"]);
-    return React__default['default'].createElement("input", Object.assign({}, restProps, { value: value !== null && value !== void 0 ? value : '', type: 'text' }));
+    return React.createElement("input", Object.assign({}, restProps, { value: value !== null && value !== void 0 ? value : '', type: 'text' }));
 };
@@ -133,4 +125,4 @@
     var { checked, className } = _a, restProps = __rest(_a, ["checked", "className"]);
-    return (React__default['default'].createElement("div", { className: className },
-        React__default['default'].createElement("input", Object.assign({}, restProps, { checked: checked !== null && checked !== void 0 ? checked : false, type: 'checkbox' }))));
+    return (React.createElement("div", { className: className },
+        React.createElement("input", Object.assign({}, restProps, { checked: checked !== null && checked !== void 0 ? checked : false, type: 'checkbox' }))));
 };
@@ -140,4 +132,4 @@
     var { optionsData } = _a, restProps = __rest(_a, ["optionsData"]);
-    return (React__default['default'].createElement("select", Object.assign({}, restProps), optionsData === null || optionsData === void 0 ? void 0 : optionsData.map((value) => {
-        return (React__default['default'].createElement("option", { value: value, key: value }, value));
+    return (React.createElement("select", Object.assign({}, restProps), optionsData === null || optionsData === void 0 ? void 0 : optionsData.map((value) => {
+        return (React.createElement("option", { value: value, key: value }, value));
     })));
@@ -151,8 +143,8 @@ };
     var { className, radioData, extValue } = _a, restProps = __rest(_a, ["className", "radioData", "extValue"]);
-    return radioData ? (React__default['default'].createElement("div", { className: className }, radioData.map((value) => {
-        return (React__default['default'].createElement("div", { key: value, className: 'radio-control' },
-            React__default['default'].createElement("label", { htmlFor: String(value) },
+    return radioData ? (React.createElement("div", { className: className }, radioData.map((value) => {
+        return (React.createElement("div", { key: value, className: 'radio-control' },
+            React.createElement("label", { htmlFor: String(value) },
                 " ",
                 value),
-            React__default['default'].createElement("input", Object.assign({}, restProps, { type: 'radio', checked: extValue == value, id: String(value), value: value }))));
+            React.createElement("input", Object.assign({}, restProps, { type: 'radio', checked: extValue == value, id: String(value), value: value }))));
     }))) : null;
@@ -162,3 +154,3 @@ };
 const Textarea = (props) => {
-    return React__default['default'].createElement("textarea", Object.assign({}, props));
+    return React.createElement("textarea", Object.assign({}, props));
 };
@@ -170,17 +162,17 @@
 const JsonEditor = ({ className, propName, propValue, propUpdate, }) => {
-    const [editedJsonValue, setEditedJsonValue] = React.useState();
-    const textareaOnChange = React.useCallback((event) => {
+    const [editedJsonValue, setEditedJsonValue] = useState();
+    const textareaOnChange = useCallback((event) => {
         const { currentTarget: { value }, } = event;
         setEditedJsonValue(value);
     }, []);
-    const isEnabledToApply = React.useMemo(() => {
+    const isEnabledToApply = useMemo(() => {
         return editedJsonValue == null;
     }, [editedJsonValue]);
-    const onPropUpdate = React.useCallback(() => {
+    const onPropUpdate = useCallback(() => {
         propUpdate(propName, editedJsonValue);
         setEditedJsonValue(undefined);
     }, [propName, editedJsonValue]);
-    return (React__default['default'].createElement("div", { className: className + ' json-editor' },
-        React__default['default'].createElement(Textarea, { className: 'json-editor-textarea', onChange: textareaOnChange, id: propName, value: editedJsonValue !== null && editedJsonValue !== void 0 ? editedJsonValue : propValue }),
-        React__default['default'].createElement("button", { className: 'json-editor-apply-button', disabled: isEnabledToApply, onClick: onPropUpdate }, "Apply changes")));
+    return (React.createElement("div", { className: className + ' json-editor' },
+        React.createElement(Textarea, { className: 'json-editor-textarea', onChange: textareaOnChange, id: propName, value: editedJsonValue !== null && editedJsonValue !== void 0 ? editedJsonValue : propValue }),
+        React.createElement("button", { className: 'json-editor-apply-button', disabled: isEnabledToApply, onClick: onPropUpdate }, "Apply changes")));
 };
@@ -190,16 +182,16 @@
     switch (controlType) {
-        case exports.PropsControlTypes.Input:
-            return (React__default['default'].createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
-        case exports.PropsControlTypes.Textarea:
-            return (React__default['default'].createElement(Textarea, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
-        case exports.PropsControlTypes.Select:
-            return (React__default['default'].createElement(Select, { className: 'table-item-control', id: propName, onChange: onPropChange, optionsData: data }));
-        case exports.PropsControlTypes.Checkbox:
-            return (React__default['default'].createElement(Checkbox, { checked: propValue, id: propName, onChange: onPropChange }));
-        case exports.PropsControlTypes.Radio:
-            return (React__default['default'].createElement(Radio, { className: 'table-item-control', extValue: propValue, name: propName, onChange: onPropChange, radioData: data }));
-        case exports.PropsControlTypes.JsonEditor:
-            return (React__default['default'].createElement(JsonEditor, { className: 'table-item-control', propValue: propValue, propName: propName, propUpdate: onPropChange }));
+        case PropsControlTypes.Input:
+            return (React.createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
+        case PropsControlTypes.Textarea:
+            return (React.createElement(Textarea, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
+        case PropsControlTypes.Select:
+            return (React.createElement(Select, { className: 'table-item-control', id: propName, onChange: onPropChange, optionsData: data }));
+        case PropsControlTypes.Checkbox:
+            return (React.createElement(Checkbox, { checked: propValue, id: propName, onChange: onPropChange }));
+        case PropsControlTypes.Radio:
+            return (React.createElement(Radio, { className: 'table-item-control', extValue: propValue, name: propName, onChange: onPropChange, radioData: data }));
+        case PropsControlTypes.JsonEditor:
+            return (React.createElement(JsonEditor, { className: 'table-item-control', propValue: propValue, propName: propName, propUpdate: onPropChange }));
         default:
-            return (React__default['default'].createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
+            return (React.createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
     }
@@ -212,5 +204,5 @@ };
 const TableItem = ({ propName, propValue, onPropChange, controlType, data, }) => {
-    return (React__default['default'].createElement("div", { className: 'table-item-wrapper' },
-        React__default['default'].createElement("div", { className: 'table-item' }, propName),
-        React__default['default'].createElement(TableItemControl, { data: data, controlType: controlType, propName: propName, propValue: propValue, onPropChange: onPropChange })));
+    return (React.createElement("div", { className: 'table-item-wrapper' },
+        React.createElement("div", { className: 'table-item' }, propName),
+        React.createElement(TableItemControl, { data: data, controlType: controlType, propName: propName, propValue: propValue, onPropChange: onPropChange })));
 };
@@ -223,3 +215,3 @@
     const { props = null, initialProps = null, propsEditInfo = null, updateProps, } = Object.assign({}, toolsPropsToEdit);
-    React.useEffect(() => {
+    useEffect(() => {
         let propsValuesFromData = {};
@@ -236,3 +228,3 @@ propsEditInfo
     }, [propsEditInfo]);
-    const onInputChange = React.useCallback((event) => {
+    const onInputChange = useCallback((event) => {
         const { value: updatedPropValue, id: propName } = event.currentTarget;
@@ -242,3 +234,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onCheckboxChange = React.useCallback((event) => {
+    const onCheckboxChange = useCallback((event) => {
         const { checked: updatedPropValue, id: propName } = event.currentTarget;
@@ -248,3 +240,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onSelectChange = React.useCallback((event) => {
+    const onSelectChange = useCallback((event) => {
         const { value: updatedPropValue, id: propName } = event.currentTarget;
@@ -254,3 +246,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onRadioChange = React.useCallback((event) => {
+    const onRadioChange = useCallback((event) => {
         const { value: updatedPropValue, name: propName } = event.currentTarget;
@@ -260,3 +252,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onTextAreaChange = React.useCallback((event) => {
+    const onTextAreaChange = useCallback((event) => {
         const { value: updatedPropValue, id: propName } = event.currentTarget;
@@ -266,3 +258,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onJsonChange = React.useCallback((propName, propValue) => {
+    const onJsonChange = useCallback((propName, propValue) => {
         let updatedPropValue;
@@ -279,15 +271,15 @@ try {
     }, [props]);
-    const getChangeHendler = React.useCallback((controlType) => {
+    const getChangeHendler = useCallback((controlType) => {
         switch (controlType) {
-            case exports.PropsControlTypes.Input:
+            case PropsControlTypes.Input:
                 return onInputChange;
-            case exports.PropsControlTypes.Checkbox:
+            case PropsControlTypes.Checkbox:
                 return onCheckboxChange;
-            case exports.PropsControlTypes.Select:
+            case PropsControlTypes.Select:
                 return onSelectChange;
-            case exports.PropsControlTypes.Radio:
+            case PropsControlTypes.Radio:
                 return onRadioChange;
-            case exports.PropsControlTypes.Textarea:
+            case PropsControlTypes.Textarea:
                 return onTextAreaChange;
-            case exports.PropsControlTypes.JsonEditor:
+            case PropsControlTypes.JsonEditor:
                 return onJsonChange;
@@ -298,3 +290,3 @@ default:
     }, [props]);
-    const renderTableItems = React.useCallback(() => {
+    const renderTableItems = useCallback(() => {
         let items = [];
@@ -307,3 +299,3 @@ const itemsWithoutInfo = props &&
                 .map(([propName, propValue]) => {
-                return (React__default['default'].createElement(TableItem, { key: propName, propName: propName, propValue: propValue, initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler() }));
+                return (React.createElement(TableItem, { key: propName, propName: propName, propValue: propValue, initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler() }));
             });
@@ -313,3 +305,3 @@ items = itemsWithoutInfo ? [...items, ...itemsWithoutInfo] : items;
             Object.entries(propsEditInfo).map(([propName, propInfo]) => {
-                return (React__default['default'].createElement(TableItem, { key: propName, data: propInfo.data, controlType: propInfo.controlType, propName: propName, propValue: propInfo.controlType === exports.PropsControlTypes.JsonEditor
+                return (React.createElement(TableItem, { key: propName, data: propInfo.data, controlType: propInfo.controlType, propName: propName, propValue: propInfo.controlType === PropsControlTypes.JsonEditor
                         ? JSON.stringify(props === null || props === void 0 ? void 0 : props[propName], null, 2)
@@ -321,3 +313,3 @@ : props === null || props === void 0 ? void 0 : props[propName], initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler(propInfo.controlType) }));
     }, [props, propsEditInfo]);
-    return React__default['default'].createElement("div", { className: 'table-items' }, renderTableItems());
+    return React.createElement("div", { className: 'table-items' }, renderTableItems());
 };
@@ -329,5 +321,5 @@
 const PropsEditTable = ({ toolsPropsToEdit }) => {
-    return (React__default['default'].createElement("div", { className: 'props-edit-table' },
-        React__default['default'].createElement(TableHeader, null),
-        React__default['default'].createElement(TableItems, { toolsPropsToEdit: toolsPropsToEdit })));
+    return (React.createElement("div", { className: 'props-edit-table' },
+        React.createElement(TableHeader, null),
+        React.createElement(TableItems, { toolsPropsToEdit: toolsPropsToEdit })));
 };
@@ -340,3 +332,3 @@
     const { props = null, propsEditInfo = null } = Object.assign({}, toolsPropsToEdit);
-    const renederToolsPanelContent = React.useCallback(() => {
+    const renederToolsPanelContent = useCallback(() => {
         let hasPropetiesToEdit;
@@ -347,5 +339,5 @@ hasPropetiesToEdit = props ? Object.keys(props).length > 0 : false;
                 (propsEditInfo ? Object.keys(propsEditInfo).length > 0 : false);
-        return hasPropetiesToEdit ? (React__default['default'].createElement(PropsEditTable, { toolsPropsToEdit: toolsPropsToEdit })) : (React__default['default'].createElement("div", { className: 'empty-props-message' }, "This component has no properties to edit"));
+        return hasPropetiesToEdit ? (React.createElement(PropsEditTable, { toolsPropsToEdit: toolsPropsToEdit })) : (React.createElement("div", { className: 'empty-props-message' }, "This component has no properties to edit"));
     }, [props, propsEditInfo]);
-    return React__default['default'].createElement("div", { className: 'tools-panel' }, renederToolsPanelContent());
+    return React.createElement("div", { className: 'tools-panel' }, renederToolsPanelContent());
 };
@@ -360,4 +352,4 @@
 const useRoute = (path, exact) => {
-    const [, setUpdate] = React.useState(false);
-    const update = React.useCallback(() => {
+    const [, setUpdate] = useState(false);
+    const update = useCallback(() => {
         setUpdate((reRender) => {
@@ -367,3 +359,3 @@ return !reRender;
     }, []);
-    React.useEffect(() => {
+    useEffect(() => {
         window.addEventListener(URL_CHANGE_EVENT, update);
@@ -411,13 +403,13 @@ window.addEventListener('popstate', update);
 const Previews = ({ children, palette = null, }) => {
-    const [toolsPropsToEdit, setToolsPropsToEdit] = React.useState(null);
-    const [toolsPanelEnabled, enableToolsPanel] = React.useState(() => { var _a; return (_a = window.__PROPERTIES_EDIT_PANEL_ENABLED__) !== null && _a !== void 0 ? _a : false; });
+    const [toolsPropsToEdit, setToolsPropsToEdit] = useState(null);
+    const [toolsPanelEnabled, enableToolsPanel] = useState(() => { var _a; return (_a = window.__PROPERTIES_EDIT_PANEL_ENABLED__) !== null && _a !== void 0 ? _a : false; });
     const isPalettePath = useRoute(PALETTE_PATH);
-    const childrenWithSetProps = React.useMemo(() => {
+    const childrenWithSetProps = useMemo(() => {
         return children
-            ? React__default['default'].Children.map(children, (child) => {
-                return React__default['default'].cloneElement(child, { setToolsPropsToEdit });
+            ? React.Children.map(children, (child) => {
+                return React.cloneElement(child, { setToolsPropsToEdit });
             })
             : null;
     }, [children]);
-    React.useEffect(() => {
+    useEffect(() => {
         var _a;
@@ -435,12 +427,12 @@ window.enableComponentsPropsPanelEditor = (toolsPanelStatus) => {
     }
-    return (React__default['default'].createElement("div", { className: styles$2.previewsMain },
-        React__default['default'].createElement("div", { className: styles$2.previewsContent }, childrenWithSetProps),
-        toolsPanelEnabled && (React__default['default'].createElement("div", { className: styles$2.previewsToolsPanel },
-            React__default['default'].createElement(ToolsPanel, { toolsPropsToEdit: toolsPropsToEdit })))));
+    return (React.createElement("div", { className: styles$2.previewsMain },
+        React.createElement("div", { className: styles$2.previewsContent }, childrenWithSetProps),
+        toolsPanelEnabled && (React.createElement("div", { className: styles$2.previewsToolsPanel },
+            React.createElement(ToolsPanel, { toolsPropsToEdit: toolsPropsToEdit })))));
 };
 
 const RoutePreview = ({ children, path, exact, setPropsToEdit, }) => {
-    const [modfiedProps, setModifiedProps] = React.useState(null);
+    const [modfiedProps, setModifiedProps] = useState(null);
     const isMatchPath = useRoute(path, exact);
-    React.useEffect(() => {
+    useEffect(() => {
         if (isMatchPath) {
@@ -459,5 +451,5 @@ const currentProps = modfiedProps !== null && modfiedProps !== void 0 ? modfiedProps : children.props;
     const childrenWithUpdatedProps = modfiedProps
-        ? React__default['default'].cloneElement(children, Object.assign({}, modfiedProps))
+        ? React.cloneElement(children, Object.assign({}, modfiedProps))
         : children;
-    return isMatchPath ? React__default['default'].createElement(React__default['default'].Fragment, null, childrenWithUpdatedProps) : null;
+    return isMatchPath ? React.createElement(React.Fragment, null, childrenWithUpdatedProps) : null;
 };
@@ -469,3 +461,3 @@
 
-class ErrorBoundary extends React__default['default'].Component {
+class ErrorBoundary extends React.Component {
     constructor() {
@@ -489,3 +481,3 @@ super(...arguments);
         if (hasError) {
-            return (React__default['default'].createElement("h2", { className: styles$1.errorMessage }, `Something went wrong while rendering ${componentName} component`));
+            return (React.createElement("h2", { className: styles$1.errorMessage }, `Something went wrong while rendering ${componentName} component`));
         }
@@ -497,7 +489,7 @@ return children;
 const ComponentPreview = ({ path, children, setToolsPropsToEdit, exact = true, propsEditInfo, }) => {
-    const setPropsToEdit = React.useCallback((propsToEdit) => {
+    const setPropsToEdit = useCallback((propsToEdit) => {
         setToolsPropsToEdit(Object.assign(Object.assign({}, propsToEdit), { initialProps: children.props, propsEditInfo }));
     }, []);
-    return (React__default['default'].createElement(RoutePreview, { path: path, exact: exact, setPropsToEdit: setPropsToEdit },
-        React__default['default'].createElement(ErrorBoundary, null, children)));
+    return (React.createElement(RoutePreview, { path: path, exact: exact, setPropsToEdit: setPropsToEdit },
+        React.createElement(ErrorBoundary, null, children)));
 };
@@ -507,7 +499,7 @@
 const VariantRoute = ({ categoryName, componentName, variantName = DEFAULT_VARIANT_NAME, children, }) => {
-    const paletteItemPath = React.useMemo(() => {
+    const paletteItemPath = useMemo(() => {
         return getPaletteItemPath([categoryName, componentName, variantName]);
     }, [categoryName, componentName, variantName]);
     const isPathMatch = useRoute(paletteItemPath, true);
-    return isPathMatch ? React__default['default'].createElement(React__default['default'].Fragment, null, children) : null;
+    return isPathMatch ? React.createElement(React.Fragment, null, children) : null;
 };
@@ -523,13 +515,13 @@ function getPaletteItemPath(names) {
 const Category = ({ children, name }) => {
-    return React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedCategoryChildren(children, name));
+    return React.createElement(React.Fragment, null, getTransformedCategoryChildren(children, name));
 };
 const Component = ({ children, categoryName, name, }) => {
-    return React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedComponentChildren(children, name, categoryName));
+    return React.createElement(React.Fragment, null, getTransformedComponentChildren(children, name, categoryName));
 };
 const Variant = ({ children, categoryName, componentName, name, }) => {
-    return (React__default['default'].createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name },
-        React__default['default'].createElement(ErrorBoundary, { componentName: componentName }, children)));
+    return (React.createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name },
+        React.createElement(ErrorBoundary, { componentName: componentName }, children)));
 };
 const Palette = ({ children }) => {
-    React.useLayoutEffect(() => {
+    useLayoutEffect(() => {
         document.body.classList.add(styles.bodyPaletteStyles);
@@ -540,22 +532,16 @@ return () => {
     }, []);
-    return React__default['default'].createElement("div", { className: styles.palette }, children);
+    return React.createElement("div", { className: styles.palette }, children);
 };
 function getTransformedCategoryChildren(children, categoryName) {
-    return React__default['default'].Children.map(children, (child) => {
-        return React__default['default'].cloneElement(child, { categoryName });
+    return React.Children.map(children, (child) => {
+        return React.cloneElement(child, { categoryName });
     });
 }
 function getTransformedComponentChildren(children, componentName, categoryName) {
-    return React__default['default'].Children.map(children, (child) => {
-        return React__default['default'].cloneElement(child, { categoryName, componentName });
+    return React.Children.map(children, (child) => {
+        return React.cloneElement(child, { categoryName, componentName });
     });
 }
 
-exports.Category = Category;
-exports.Component = Component;
-exports.ComponentPreview = ComponentPreview;
-exports.DevSupport = DevSupport;
-exports.Palette = Palette;
-exports.Previews = Previews;
-exports.Variant = Variant;
+export { Category, Component, ComponentPreview, DevSupport, Palette, Previews, PropsControlTypes, Variant };
 //# sourceMappingURL=index.esm.js.map

dist/index.js

@@ -1,3 +0,11 @@
-import React, { Suspense, useState, useCallback, useMemo, useEffect, useLayoutEffect } from 'react';
+'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
 var _a;
@@ -7,3 +15,3 @@ const envDevmode = typeof process !== 'undefined'
     : false;
-const windowDevmode = window.REACT_BUDDY_IDE_DEVMODE === true;
+const windowDevmode = typeof window !== 'undefined' && (window === null || window === void 0 ? void 0 : window.REACT_BUDDY_IDE_DEVMODE) === true;
 const DEV_MODE = windowDevmode || envDevmode;
@@ -15,8 +23,8 @@
         if (status.loading) {
-            return React.createElement("div", null, " loading... ");
+            return React__default['default'].createElement("div", null, " loading... ");
         }
         if (status.error) {
-            return (React.createElement("div", null, "Unable to bootstrap dev mode. Probably you need to run backend or enable backend mocking mode."));
+            return (React__default['default'].createElement("div", null, "Unable to bootstrap dev mode. Probably you need to run backend or enable backend mocking mode."));
         }
-        return React.createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews });
+        return React__default['default'].createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews });
     };
@@ -26,4 +34,4 @@ return DevBootstrapWrapped;
 const DevBootstrap = ({ ComponentPreviews }) => {
-    return (React.createElement(Suspense, { fallback: React.createElement("div", null, "Loading sources...") },
-        React.createElement(ComponentPreviews, null)));
+    return (React__default['default'].createElement(React.Suspense, { fallback: React__default['default'].createElement("div", null, "Loading sources...") },
+        React__default['default'].createElement(ComponentPreviews, null)));
 };
@@ -33,5 +41,5 @@ const DevSupport = ({ children, ComponentPreviews, useInitialHook, devmode, }) => {
     if (isDevmode) {
-        return useInitialHook ? (withInitialHook(useInitialHook, ComponentPreviews)({})) : (React.createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews }));
+        return useInitialHook ? (withInitialHook(useInitialHook, ComponentPreviews)({})) : (React__default['default'].createElement(DevBootstrap, { ComponentPreviews: ComponentPreviews }));
     }
-    return React.createElement(React.Fragment, null, children);
+    return React__default['default'].createElement(React__default['default'].Fragment, null, children);
 };
@@ -73,8 +81,8 @@ function enabledDevmode(devmode) {
 const TableHeader = () => {
-    return (React.createElement("div", { className: 'table-header' },
-        React.createElement("div", { className: 'table-header-item' }, "Property name"),
-        React.createElement("div", { className: 'table-header-item-control' }, "Edit")));
+    return (React__default['default'].createElement("div", { className: 'table-header' },
+        React__default['default'].createElement("div", { className: 'table-header-item' }, "Property name"),
+        React__default['default'].createElement("div", { className: 'table-header-item-control' }, "Edit")));
 };
 
-var PropsControlTypes;
+exports.PropsControlTypes = void 0;
 (function (PropsControlTypes) {
@@ -87,3 +95,3 @@ PropsControlTypes["Checkbox"] = "checkbox";
     PropsControlTypes["JsonEditor"] = "jsonEditor";
-})(PropsControlTypes || (PropsControlTypes = {}));
+})(exports.PropsControlTypes || (exports.PropsControlTypes = {}));
 
@@ -119,3 +127,3 @@ /*! *****************************************************************************
     var { value } = _a, restProps = __rest(_a, ["value"]);
-    return React.createElement("input", Object.assign({}, restProps, { value: value !== null && value !== void 0 ? value : '', type: 'text' }));
+    return React__default['default'].createElement("input", Object.assign({}, restProps, { value: value !== null && value !== void 0 ? value : '', type: 'text' }));
 };
@@ -125,4 +133,4 @@
     var { checked, className } = _a, restProps = __rest(_a, ["checked", "className"]);
-    return (React.createElement("div", { className: className },
-        React.createElement("input", Object.assign({}, restProps, { checked: checked !== null && checked !== void 0 ? checked : false, type: 'checkbox' }))));
+    return (React__default['default'].createElement("div", { className: className },
+        React__default['default'].createElement("input", Object.assign({}, restProps, { checked: checked !== null && checked !== void 0 ? checked : false, type: 'checkbox' }))));
 };
@@ -132,4 +140,4 @@
     var { optionsData } = _a, restProps = __rest(_a, ["optionsData"]);
-    return (React.createElement("select", Object.assign({}, restProps), optionsData === null || optionsData === void 0 ? void 0 : optionsData.map((value) => {
-        return (React.createElement("option", { value: value, key: value }, value));
+    return (React__default['default'].createElement("select", Object.assign({}, restProps), optionsData === null || optionsData === void 0 ? void 0 : optionsData.map((value) => {
+        return (React__default['default'].createElement("option", { value: value, key: value }, value));
     })));
@@ -143,8 +151,8 @@ };
     var { className, radioData, extValue } = _a, restProps = __rest(_a, ["className", "radioData", "extValue"]);
-    return radioData ? (React.createElement("div", { className: className }, radioData.map((value) => {
-        return (React.createElement("div", { key: value, className: 'radio-control' },
-            React.createElement("label", { htmlFor: String(value) },
+    return radioData ? (React__default['default'].createElement("div", { className: className }, radioData.map((value) => {
+        return (React__default['default'].createElement("div", { key: value, className: 'radio-control' },
+            React__default['default'].createElement("label", { htmlFor: String(value) },
                 " ",
                 value),
-            React.createElement("input", Object.assign({}, restProps, { type: 'radio', checked: extValue == value, id: String(value), value: value }))));
+            React__default['default'].createElement("input", Object.assign({}, restProps, { type: 'radio', checked: extValue == value, id: String(value), value: value }))));
     }))) : null;
@@ -154,3 +162,3 @@ };
 const Textarea = (props) => {
-    return React.createElement("textarea", Object.assign({}, props));
+    return React__default['default'].createElement("textarea", Object.assign({}, props));
 };
@@ -162,17 +170,17 @@
 const JsonEditor = ({ className, propName, propValue, propUpdate, }) => {
-    const [editedJsonValue, setEditedJsonValue] = useState();
-    const textareaOnChange = useCallback((event) => {
+    const [editedJsonValue, setEditedJsonValue] = React.useState();
+    const textareaOnChange = React.useCallback((event) => {
         const { currentTarget: { value }, } = event;
         setEditedJsonValue(value);
     }, []);
-    const isEnabledToApply = useMemo(() => {
+    const isEnabledToApply = React.useMemo(() => {
         return editedJsonValue == null;
     }, [editedJsonValue]);
-    const onPropUpdate = useCallback(() => {
+    const onPropUpdate = React.useCallback(() => {
         propUpdate(propName, editedJsonValue);
         setEditedJsonValue(undefined);
     }, [propName, editedJsonValue]);
-    return (React.createElement("div", { className: className + ' json-editor' },
-        React.createElement(Textarea, { className: 'json-editor-textarea', onChange: textareaOnChange, id: propName, value: editedJsonValue !== null && editedJsonValue !== void 0 ? editedJsonValue : propValue }),
-        React.createElement("button", { className: 'json-editor-apply-button', disabled: isEnabledToApply, onClick: onPropUpdate }, "Apply changes")));
+    return (React__default['default'].createElement("div", { className: className + ' json-editor' },
+        React__default['default'].createElement(Textarea, { className: 'json-editor-textarea', onChange: textareaOnChange, id: propName, value: editedJsonValue !== null && editedJsonValue !== void 0 ? editedJsonValue : propValue }),
+        React__default['default'].createElement("button", { className: 'json-editor-apply-button', disabled: isEnabledToApply, onClick: onPropUpdate }, "Apply changes")));
 };
@@ -182,16 +190,16 @@
     switch (controlType) {
-        case PropsControlTypes.Input:
-            return (React.createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
-        case PropsControlTypes.Textarea:
-            return (React.createElement(Textarea, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
-        case PropsControlTypes.Select:
-            return (React.createElement(Select, { className: 'table-item-control', id: propName, onChange: onPropChange, optionsData: data }));
-        case PropsControlTypes.Checkbox:
-            return (React.createElement(Checkbox, { checked: propValue, id: propName, onChange: onPropChange }));
-        case PropsControlTypes.Radio:
-            return (React.createElement(Radio, { className: 'table-item-control', extValue: propValue, name: propName, onChange: onPropChange, radioData: data }));
-        case PropsControlTypes.JsonEditor:
-            return (React.createElement(JsonEditor, { className: 'table-item-control', propValue: propValue, propName: propName, propUpdate: onPropChange }));
+        case exports.PropsControlTypes.Input:
+            return (React__default['default'].createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
+        case exports.PropsControlTypes.Textarea:
+            return (React__default['default'].createElement(Textarea, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
+        case exports.PropsControlTypes.Select:
+            return (React__default['default'].createElement(Select, { className: 'table-item-control', id: propName, onChange: onPropChange, optionsData: data }));
+        case exports.PropsControlTypes.Checkbox:
+            return (React__default['default'].createElement(Checkbox, { checked: propValue, id: propName, onChange: onPropChange }));
+        case exports.PropsControlTypes.Radio:
+            return (React__default['default'].createElement(Radio, { className: 'table-item-control', extValue: propValue, name: propName, onChange: onPropChange, radioData: data }));
+        case exports.PropsControlTypes.JsonEditor:
+            return (React__default['default'].createElement(JsonEditor, { className: 'table-item-control', propValue: propValue, propName: propName, propUpdate: onPropChange }));
         default:
-            return (React.createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
+            return (React__default['default'].createElement(Input, { className: 'table-item-control', id: propName, value: propValue, onChange: onPropChange }));
     }
@@ -204,5 +212,5 @@ };
 const TableItem = ({ propName, propValue, onPropChange, controlType, data, }) => {
-    return (React.createElement("div", { className: 'table-item-wrapper' },
-        React.createElement("div", { className: 'table-item' }, propName),
-        React.createElement(TableItemControl, { data: data, controlType: controlType, propName: propName, propValue: propValue, onPropChange: onPropChange })));
+    return (React__default['default'].createElement("div", { className: 'table-item-wrapper' },
+        React__default['default'].createElement("div", { className: 'table-item' }, propName),
+        React__default['default'].createElement(TableItemControl, { data: data, controlType: controlType, propName: propName, propValue: propValue, onPropChange: onPropChange })));
 };
@@ -215,3 +223,3 @@
     const { props = null, initialProps = null, propsEditInfo = null, updateProps, } = Object.assign({}, toolsPropsToEdit);
-    useEffect(() => {
+    React.useEffect(() => {
         let propsValuesFromData = {};
@@ -228,3 +236,3 @@ propsEditInfo
     }, [propsEditInfo]);
-    const onInputChange = useCallback((event) => {
+    const onInputChange = React.useCallback((event) => {
         const { value: updatedPropValue, id: propName } = event.currentTarget;
@@ -234,3 +242,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onCheckboxChange = useCallback((event) => {
+    const onCheckboxChange = React.useCallback((event) => {
         const { checked: updatedPropValue, id: propName } = event.currentTarget;
@@ -240,3 +248,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onSelectChange = useCallback((event) => {
+    const onSelectChange = React.useCallback((event) => {
         const { value: updatedPropValue, id: propName } = event.currentTarget;
@@ -246,3 +254,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onRadioChange = useCallback((event) => {
+    const onRadioChange = React.useCallback((event) => {
         const { value: updatedPropValue, name: propName } = event.currentTarget;
@@ -252,3 +260,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onTextAreaChange = useCallback((event) => {
+    const onTextAreaChange = React.useCallback((event) => {
         const { value: updatedPropValue, id: propName } = event.currentTarget;
@@ -258,3 +266,3 @@ const updatedProps = Object.assign(Object.assign({}, props), { [propName]: updatedPropValue });
     }, [props]);
-    const onJsonChange = useCallback((propName, propValue) => {
+    const onJsonChange = React.useCallback((propName, propValue) => {
         let updatedPropValue;
@@ -271,15 +279,15 @@ try {
     }, [props]);
-    const getChangeHendler = useCallback((controlType) => {
+    const getChangeHendler = React.useCallback((controlType) => {
         switch (controlType) {
-            case PropsControlTypes.Input:
+            case exports.PropsControlTypes.Input:
                 return onInputChange;
-            case PropsControlTypes.Checkbox:
+            case exports.PropsControlTypes.Checkbox:
                 return onCheckboxChange;
-            case PropsControlTypes.Select:
+            case exports.PropsControlTypes.Select:
                 return onSelectChange;
-            case PropsControlTypes.Radio:
+            case exports.PropsControlTypes.Radio:
                 return onRadioChange;
-            case PropsControlTypes.Textarea:
+            case exports.PropsControlTypes.Textarea:
                 return onTextAreaChange;
-            case PropsControlTypes.JsonEditor:
+            case exports.PropsControlTypes.JsonEditor:
                 return onJsonChange;
@@ -290,3 +298,3 @@ default:
     }, [props]);
-    const renderTableItems = useCallback(() => {
+    const renderTableItems = React.useCallback(() => {
         let items = [];
@@ -299,3 +307,3 @@ const itemsWithoutInfo = props &&
                 .map(([propName, propValue]) => {
-                return (React.createElement(TableItem, { key: propName, propName: propName, propValue: propValue, initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler() }));
+                return (React__default['default'].createElement(TableItem, { key: propName, propName: propName, propValue: propValue, initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler() }));
             });
@@ -305,3 +313,3 @@ items = itemsWithoutInfo ? [...items, ...itemsWithoutInfo] : items;
             Object.entries(propsEditInfo).map(([propName, propInfo]) => {
-                return (React.createElement(TableItem, { key: propName, data: propInfo.data, controlType: propInfo.controlType, propName: propName, propValue: propInfo.controlType === PropsControlTypes.JsonEditor
+                return (React__default['default'].createElement(TableItem, { key: propName, data: propInfo.data, controlType: propInfo.controlType, propName: propName, propValue: propInfo.controlType === exports.PropsControlTypes.JsonEditor
                         ? JSON.stringify(props === null || props === void 0 ? void 0 : props[propName], null, 2)
@@ -313,3 +321,3 @@ : props === null || props === void 0 ? void 0 : props[propName], initialPropValue: initialProps === null || initialProps === void 0 ? void 0 : initialProps[propName], onPropChange: getChangeHendler(propInfo.controlType) }));
     }, [props, propsEditInfo]);
-    return React.createElement("div", { className: 'table-items' }, renderTableItems());
+    return React__default['default'].createElement("div", { className: 'table-items' }, renderTableItems());
 };
@@ -321,5 +329,5 @@
 const PropsEditTable = ({ toolsPropsToEdit }) => {
-    return (React.createElement("div", { className: 'props-edit-table' },
-        React.createElement(TableHeader, null),
-        React.createElement(TableItems, { toolsPropsToEdit: toolsPropsToEdit })));
+    return (React__default['default'].createElement("div", { className: 'props-edit-table' },
+        React__default['default'].createElement(TableHeader, null),
+        React__default['default'].createElement(TableItems, { toolsPropsToEdit: toolsPropsToEdit })));
 };
@@ -332,3 +340,3 @@
     const { props = null, propsEditInfo = null } = Object.assign({}, toolsPropsToEdit);
-    const renederToolsPanelContent = useCallback(() => {
+    const renederToolsPanelContent = React.useCallback(() => {
         let hasPropetiesToEdit;
@@ -339,5 +347,5 @@ hasPropetiesToEdit = props ? Object.keys(props).length > 0 : false;
                 (propsEditInfo ? Object.keys(propsEditInfo).length > 0 : false);
-        return hasPropetiesToEdit ? (React.createElement(PropsEditTable, { toolsPropsToEdit: toolsPropsToEdit })) : (React.createElement("div", { className: 'empty-props-message' }, "This component has no properties to edit"));
+        return hasPropetiesToEdit ? (React__default['default'].createElement(PropsEditTable, { toolsPropsToEdit: toolsPropsToEdit })) : (React__default['default'].createElement("div", { className: 'empty-props-message' }, "This component has no properties to edit"));
     }, [props, propsEditInfo]);
-    return React.createElement("div", { className: 'tools-panel' }, renederToolsPanelContent());
+    return React__default['default'].createElement("div", { className: 'tools-panel' }, renederToolsPanelContent());
 };
@@ -352,4 +360,4 @@
 const useRoute = (path, exact) => {
-    const [, setUpdate] = useState(false);
-    const update = useCallback(() => {
+    const [, setUpdate] = React.useState(false);
+    const update = React.useCallback(() => {
         setUpdate((reRender) => {
@@ -359,3 +367,3 @@ return !reRender;
     }, []);
-    useEffect(() => {
+    React.useEffect(() => {
         window.addEventListener(URL_CHANGE_EVENT, update);
@@ -403,13 +411,13 @@ window.addEventListener('popstate', update);
 const Previews = ({ children, palette = null, }) => {
-    const [toolsPropsToEdit, setToolsPropsToEdit] = useState(null);
-    const [toolsPanelEnabled, enableToolsPanel] = useState(() => { var _a; return (_a = window.__PROPERTIES_EDIT_PANEL_ENABLED__) !== null && _a !== void 0 ? _a : false; });
+    const [toolsPropsToEdit, setToolsPropsToEdit] = React.useState(null);
+    const [toolsPanelEnabled, enableToolsPanel] = React.useState(() => { var _a; return (_a = window.__PROPERTIES_EDIT_PANEL_ENABLED__) !== null && _a !== void 0 ? _a : false; });
     const isPalettePath = useRoute(PALETTE_PATH);
-    const childrenWithSetProps = useMemo(() => {
+    const childrenWithSetProps = React.useMemo(() => {
         return children
-            ? React.Children.map(children, (child) => {
-                return React.cloneElement(child, { setToolsPropsToEdit });
+            ? React__default['default'].Children.map(children, (child) => {
+                return React__default['default'].cloneElement(child, { setToolsPropsToEdit });
             })
             : null;
     }, [children]);
-    useEffect(() => {
+    React.useEffect(() => {
         var _a;
@@ -427,12 +435,12 @@ window.enableComponentsPropsPanelEditor = (toolsPanelStatus) => {
     }
-    return (React.createElement("div", { className: styles$2.previewsMain },
-        React.createElement("div", { className: styles$2.previewsContent }, childrenWithSetProps),
-        toolsPanelEnabled && (React.createElement("div", { className: styles$2.previewsToolsPanel },
-            React.createElement(ToolsPanel, { toolsPropsToEdit: toolsPropsToEdit })))));
+    return (React__default['default'].createElement("div", { className: styles$2.previewsMain },
+        React__default['default'].createElement("div", { className: styles$2.previewsContent }, childrenWithSetProps),
+        toolsPanelEnabled && (React__default['default'].createElement("div", { className: styles$2.previewsToolsPanel },
+            React__default['default'].createElement(ToolsPanel, { toolsPropsToEdit: toolsPropsToEdit })))));
 };
 
 const RoutePreview = ({ children, path, exact, setPropsToEdit, }) => {
-    const [modfiedProps, setModifiedProps] = useState(null);
+    const [modfiedProps, setModifiedProps] = React.useState(null);
     const isMatchPath = useRoute(path, exact);
-    useEffect(() => {
+    React.useEffect(() => {
         if (isMatchPath) {
@@ -451,5 +459,5 @@ const currentProps = modfiedProps !== null && modfiedProps !== void 0 ? modfiedProps : children.props;
     const childrenWithUpdatedProps = modfiedProps
-        ? React.cloneElement(children, Object.assign({}, modfiedProps))
+        ? React__default['default'].cloneElement(children, Object.assign({}, modfiedProps))
         : children;
-    return isMatchPath ? React.createElement(React.Fragment, null, childrenWithUpdatedProps) : null;
+    return isMatchPath ? React__default['default'].createElement(React__default['default'].Fragment, null, childrenWithUpdatedProps) : null;
 };
@@ -461,3 +469,3 @@
 
-class ErrorBoundary extends React.Component {
+class ErrorBoundary extends React__default['default'].Component {
     constructor() {
@@ -481,3 +489,3 @@ super(...arguments);
         if (hasError) {
-            return (React.createElement("h2", { className: styles$1.errorMessage }, `Something went wrong while rendering ${componentName} component`));
+            return (React__default['default'].createElement("h2", { className: styles$1.errorMessage }, `Something went wrong while rendering ${componentName} component`));
         }
@@ -489,7 +497,7 @@ return children;
 const ComponentPreview = ({ path, children, setToolsPropsToEdit, exact = true, propsEditInfo, }) => {
-    const setPropsToEdit = useCallback((propsToEdit) => {
+    const setPropsToEdit = React.useCallback((propsToEdit) => {
         setToolsPropsToEdit(Object.assign(Object.assign({}, propsToEdit), { initialProps: children.props, propsEditInfo }));
     }, []);
-    return (React.createElement(RoutePreview, { path: path, exact: exact, setPropsToEdit: setPropsToEdit },
-        React.createElement(ErrorBoundary, null, children)));
+    return (React__default['default'].createElement(RoutePreview, { path: path, exact: exact, setPropsToEdit: setPropsToEdit },
+        React__default['default'].createElement(ErrorBoundary, null, children)));
 };
@@ -499,7 +507,7 @@
 const VariantRoute = ({ categoryName, componentName, variantName = DEFAULT_VARIANT_NAME, children, }) => {
-    const paletteItemPath = useMemo(() => {
+    const paletteItemPath = React.useMemo(() => {
         return getPaletteItemPath([categoryName, componentName, variantName]);
     }, [categoryName, componentName, variantName]);
     const isPathMatch = useRoute(paletteItemPath, true);
-    return isPathMatch ? React.createElement(React.Fragment, null, children) : null;
+    return isPathMatch ? React__default['default'].createElement(React__default['default'].Fragment, null, children) : null;
 };
@@ -515,13 +523,13 @@ function getPaletteItemPath(names) {
 const Category = ({ children, name }) => {
-    return React.createElement(React.Fragment, null, getTransformedCategoryChildren(children, name));
+    return React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedCategoryChildren(children, name));
 };
 const Component = ({ children, categoryName, name, }) => {
-    return React.createElement(React.Fragment, null, getTransformedComponentChildren(children, name, categoryName));
+    return React__default['default'].createElement(React__default['default'].Fragment, null, getTransformedComponentChildren(children, name, categoryName));
 };
 const Variant = ({ children, categoryName, componentName, name, }) => {
-    return (React.createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name },
-        React.createElement(ErrorBoundary, { componentName: componentName }, children)));
+    return (React__default['default'].createElement(VariantRoute, { categoryName: categoryName, componentName: componentName, variantName: name },
+        React__default['default'].createElement(ErrorBoundary, { componentName: componentName }, children)));
 };
 const Palette = ({ children }) => {
-    useLayoutEffect(() => {
+    React.useLayoutEffect(() => {
         document.body.classList.add(styles.bodyPaletteStyles);
@@ -532,16 +540,22 @@ return () => {
     }, []);
-    return React.createElement("div", { className: styles.palette }, children);
+    return React__default['default'].createElement("div", { className: styles.palette }, children);
 };
 function getTransformedCategoryChildren(children, categoryName) {
-    return React.Children.map(children, (child) => {
-        return React.cloneElement(child, { categoryName });
+    return React__default['default'].Children.map(children, (child) => {
+        return React__default['default'].cloneElement(child, { categoryName });
     });
 }
 function getTransformedComponentChildren(children, componentName, categoryName) {
-    return React.Children.map(children, (child) => {
-        return React.cloneElement(child, { categoryName, componentName });
+    return React__default['default'].Children.map(children, (child) => {
+        return React__default['default'].cloneElement(child, { categoryName, componentName });
     });
 }
 
-export { Category, Component, ComponentPreview, DevSupport, Palette, Previews, PropsControlTypes, Variant };
+exports.Category = Category;
+exports.Component = Component;
+exports.ComponentPreview = ComponentPreview;
+exports.DevSupport = DevSupport;
+exports.Palette = Palette;
+exports.Previews = Previews;
+exports.Variant = Variant;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@react-buddy/ide-toolbox",
-  "version": "2.2.0",
+  "version": "2.2.1-dev.0",
   "description": "React IDE toolbox",
@@ -51,3 +51,3 @@ "main": "dist/index.js",
   "license": "Apache-2.0",
-  "gitHead": "d895f4285da2170864fd401332479b9b734c4c5b"
+  "gitHead": "1e2c7675ea9e9335aaf31a069bc1f08c0319bdd7"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

206635

increased by0.52%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes