@jsonui/react 0.3.0 → 0.4.0

package/dist/esm/index.js

@@ -1,60 +1,6 @@
-import React, { createContext, useLayoutEffect, useEffect, useMemo, useContext, useReducer, useRef, PureComponent, forwardRef, createElement, Fragment as Fragment$1 } from 'react';
+import React, { createContext, useContext, useLayoutEffect, useEffect, useMemo, useDebugValue, useReducer, useRef, PureComponent, forwardRef, createElement, Fragment as Fragment$1 } from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    if (typeof b !== "function" && b !== null)
-        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign$1 = function() {
-    __assign$1 = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign$1.apply(this, arguments);
-};
-
-function __rest$1(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var commonjsGlobal$1 = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var jsxRuntime$1 = {exports: {}};
@@ -67,7 +13,7 @@ object-assign
 @license MIT
 */
 /* eslint-disable no-unused-vars */
-var getOwnPropertySymbols$2 = Object.getOwnPropertySymbols;
+var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
 var hasOwnProperty$f = Object.prototype.hasOwnProperty;
 var propIsEnumerable$1 = Object.prototype.propertyIsEnumerable;
 
@@ -137,8 +83,8 @@ var objectAssign$1 = shouldUseNative$1() ? Object.assign : function (target, sou
 			}
 		}
 
-		if (getOwnPropertySymbols$2) {
-			symbols = getOwnPropertySymbols$2(from);
+		if (getOwnPropertySymbols$1) {
+			symbols = getOwnPropertySymbols$1(from);
 			for (var i = 0; i < symbols.length; i++) {
 				if (propIsEnumerable$1.call(from, symbols[i])) {
 					to[symbols[i]] = from[symbols[i]];
@@ -1388,18 +1334,22 @@ if (process.env.NODE_ENV === 'production') {
   jsxRuntime$1.exports = reactJsxRuntime_development$1;
 }
 
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
 
-function __rest(s, e) {
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest$1(s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
@@ -1409,85 +1359,35 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __spreadArray(to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-}var Stock = /** @class */ (function () {
-    function Stock(newStock, Wrapper, reduxStore) {
-        var _this = this;
-        this.init = function (_a) {
-            var components = _a.components, functions = _a.functions;
-            _this.stock.components = __assign(__assign({}, _this.stock.components), components);
-            _this.stock.functions = __assign(__assign({}, _this.stock.functions), functions);
+}
+
+class Stock {
+    constructor(newStock, Wrapper, reduxStore) {
+        this.init = ({ components, functions }) => {
+            this.stock.components = Object.assign(Object.assign({}, this.stock.components), components);
+            this.stock.functions = Object.assign(Object.assign({}, this.stock.functions), functions);
         };
-        this.registerComponent = function (key, value) {
-            if (!!key && typeof key === 'string' && key.length > 0 && !(key in _this.stock.components)) {
-                _this.stock.components[key] = value;
+        this.registerComponent = (key, value) => {
+            if (!!key && typeof key === 'string' && key.length > 0 && !(key in this.stock.components)) {
+                this.stock.components[key] = value;
             }
         };
-        this.registerFunction = function (key, value) {
-            if (!!key && typeof key === 'string' && key.length > 0 && !(key in _this.stock.functions)) {
-                _this.stock.functions[key] = value;
+        this.registerFunction = (key, value) => {
+            if (!!key && typeof key === 'string' && key.length > 0 && !(key in this.stock.functions)) {
+                this.stock.functions[key] = value;
             }
         };
-        this.callFunction = function (name, attr, props, callerArgs) {
-            if (!!attr && !!name && name in _this.stock.functions) {
-                var result = _this.stock.functions[name](attr, props, callerArgs, _this);
+        this.callFunction = (name, attr, props, callerArgs) => {
+            if (!!attr && !!name && name in this.stock.functions) {
+                const result = this.stock.functions[name](attr, props, callerArgs, this);
                 return result;
             }
             return null;
         };
-        this.getComponent = function (componentName) {
-            return !!componentName && componentName in _this.stock.components
-                ? _this.stock.components[componentName]
-                : // eslint-disable-next-line no-underscore-dangle
-                    _this.stock.components._Undefined;
-        };
+        this.getComponent = (componentName) => !!componentName && componentName in this.stock.components
+            ? this.stock.components[componentName]
+            : // eslint-disable-next-line no-underscore-dangle
+                this.stock.components._Undefined;
         this.stock = {
             components: {},
             functions: {},
@@ -1497,8 +1397,42 @@ function __spreadArray(to, from, pack) {
         this.reduxStore = reduxStore;
         this.init(newStock);
     }
-    return Stock;
-}());var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+}/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -1508,7 +1442,7 @@ object-assign
 @license MIT
 */
 /* eslint-disable no-unused-vars */
-var getOwnPropertySymbols$1 = Object.getOwnPropertySymbols;
+var getOwnPropertySymbols = Object.getOwnPropertySymbols;
 var hasOwnProperty$d = Object.prototype.hasOwnProperty;
 var propIsEnumerable = Object.prototype.propertyIsEnumerable;
 
@@ -1578,8 +1512,8 @@ var objectAssign = shouldUseNative() ? Object.assign : function (target, source)
 			}
 		}
 
-		if (getOwnPropertySymbols$1) {
-			symbols = getOwnPropertySymbols$1(from);
+		if (getOwnPropertySymbols) {
+			symbols = getOwnPropertySymbols(from);
 			for (var i = 0; i < symbols.length; i++) {
 				if (propIsEnumerable.call(from, symbols[i])) {
 					to[symbols[i]] = from[symbols[i]];
@@ -3793,7 +3727,7 @@ var FUNC_ERROR_TEXT = 'Expected a function';
  * // Replace `_.memoize.Cache`.
  * _.memoize.Cache = WeakMap;
  */
-function memoize$1$1(func, resolver) {
+function memoize$1(func, resolver) {
   if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
     throw new TypeError(FUNC_ERROR_TEXT);
   }
@@ -3809,14 +3743,14 @@ function memoize$1$1(func, resolver) {
     memoized.cache = cache.set(key, result) || cache;
     return result;
   };
-  memoized.cache = new (memoize$1$1.Cache || MapCache$2);
+  memoized.cache = new (memoize$1.Cache || MapCache$2);
   return memoized;
 }
 
 // Expose `MapCache`.
-memoize$1$1.Cache = MapCache$2;
+memoize$1.Cache = MapCache$2;
 
-var memoize_1 = memoize$1$1;var memoize$2 = memoize_1;
+var memoize_1 = memoize$1;var memoize$2 = memoize_1;
 
 /** Used as the maximum memoize cache size. */
 var MAX_MEMOIZE_SIZE = 500;
@@ -6385,31 +6319,38 @@ var hasOwnProperty$3$1 = Object.hasOwnProperty || function (obj, key) {
     return key in obj;
 };
 
-var traverse$3 = traverse$4.exports;var SEPARATOR = '/';
-var STORE_ERROR_POSTFIX = '.error';
-var PATH_MODIFIERS_KEY = '$pathModifiers';
-var MODIFIER_KEY = '$modifier';
-var ACTION_KEY = '$action';
-var PERSIST_STORAGE_KEY = '$persistStores';
-var PERSIST_STORAGE_NAMES = ['data'];
-var REF_ASSETS = '$assetsRef';
-var REF_LOCALES = '$locales';
-var REF_VALIDATES = '$validations';
-var STYLE_WEB_NAME = 'styleWeb';
-var STYLE_RN_NAME = 'styleRN';
-var REDUX_FUNCTIONS = ['set', 'get'];
-var PATHNAME = 'path';
-var SIMPLE_DATA_TYPES = ['string', 'number', 'boolean', 'null'];
-var V_CHILDREN_NAME = '$children';
-var V_COMP_NAME = '$comp';
-var LIST_SEMAPHORE = '$isList';
-var LIST_ITEM = '$listItem';
-var LIST_PAGE = '$page';
-var LIST_ITEM_PER_PAGE = '$itemPerPage';
-var LIST_LENGTH = '$listLength';
-var LIST_ITEM_PER_PAGE_DEFAULT = 10;
-// TODO currentPaths maybe need to modify to ___currentPaths
-var constants=/*#__PURE__*/Object.freeze({__proto__:null,SEPARATOR:SEPARATOR,STORE_ERROR_POSTFIX:STORE_ERROR_POSTFIX,PATH_MODIFIERS_KEY:PATH_MODIFIERS_KEY,MODIFIER_KEY:MODIFIER_KEY,ACTION_KEY:ACTION_KEY,PERSIST_STORAGE_KEY:PERSIST_STORAGE_KEY,PERSIST_STORAGE_NAMES:PERSIST_STORAGE_NAMES,REF_ASSETS:REF_ASSETS,REF_LOCALES:REF_LOCALES,REF_VALIDATES:REF_VALIDATES,STYLE_WEB_NAME:STYLE_WEB_NAME,STYLE_RN_NAME:STYLE_RN_NAME,REDUX_FUNCTIONS:REDUX_FUNCTIONS,PATHNAME:PATHNAME,SIMPLE_DATA_TYPES:SIMPLE_DATA_TYPES,V_CHILDREN_NAME:V_CHILDREN_NAME,V_COMP_NAME:V_COMP_NAME,LIST_SEMAPHORE:LIST_SEMAPHORE,LIST_ITEM:LIST_ITEM,LIST_PAGE:LIST_PAGE,LIST_ITEM_PER_PAGE:LIST_ITEM_PER_PAGE,LIST_LENGTH:LIST_LENGTH,LIST_ITEM_PER_PAGE_DEFAULT:LIST_ITEM_PER_PAGE_DEFAULT});var jsonpointer = {};var hasExcape = /~/;
+var traverse$3 = traverse$4.exports;const SEPARATOR = '/';
+const STORE_ERROR_POSTFIX = '.error';
+const PATH_MODIFIERS_KEY = '$pathModifiers';
+const MODIFIER_KEY = '$modifier';
+const ACTION_KEY = '$action';
+const PERSIST_STORAGE_KEY = '$persistStores';
+const PERSIST_STORAGE_NAMES = ['data'];
+const REF_ASSETS = '$assetsRef';
+const REF_LOCALES = '$locales';
+const REF_VALIDATES = '$validations';
+const STYLE_WEB_NAME = 'styleWeb';
+const STYLE_RN_NAME = 'styleRN';
+const REDUX_GET_FUNCTION = 'get';
+const REDUX_SET_FUNCTION = 'set';
+const REDUX_FUNCTIONS = [REDUX_GET_FUNCTION, REDUX_SET_FUNCTION];
+const PATHNAME = 'path';
+const SIMPLE_DATA_TYPES = ['string', 'number', 'boolean', 'null'];
+const V_CHILDREN_NAME = '$children';
+const V_COMP_NAME = '$comp';
+const LIST_SEMAPHORE = '$isList';
+const LIST_ITEM = '$listItem';
+const LIST_PAGE = '$page';
+const LIST_ITEM_PER_PAGE = '$itemPerPage';
+const LIST_LENGTH = '$listLength';
+const LIST_ITEM_PER_PAGE_DEFAULT = 10;
+const REDUX_PATHS = '$$reduxPaths';
+const V_CHILDREN_PREFIX = '$child';
+const PARENT_PROP_NAME = '__parentprop';
+const CURRENT_PATH_NAME = '__currentPaths';
+const PRIMITIVE_COMP_NAME = '_PrimitiveProp'; // TODO check all literal and replace with this constant
+const FRAGMENT_COMP_NAME = 'Fragment'; // TODO check all literal and replace with this constant
+var constants=/*#__PURE__*/Object.freeze({__proto__:null,SEPARATOR:SEPARATOR,STORE_ERROR_POSTFIX:STORE_ERROR_POSTFIX,PATH_MODIFIERS_KEY:PATH_MODIFIERS_KEY,MODIFIER_KEY:MODIFIER_KEY,ACTION_KEY:ACTION_KEY,PERSIST_STORAGE_KEY:PERSIST_STORAGE_KEY,PERSIST_STORAGE_NAMES:PERSIST_STORAGE_NAMES,REF_ASSETS:REF_ASSETS,REF_LOCALES:REF_LOCALES,REF_VALIDATES:REF_VALIDATES,STYLE_WEB_NAME:STYLE_WEB_NAME,STYLE_RN_NAME:STYLE_RN_NAME,REDUX_GET_FUNCTION:REDUX_GET_FUNCTION,REDUX_SET_FUNCTION:REDUX_SET_FUNCTION,REDUX_FUNCTIONS:REDUX_FUNCTIONS,PATHNAME:PATHNAME,SIMPLE_DATA_TYPES:SIMPLE_DATA_TYPES,V_CHILDREN_NAME:V_CHILDREN_NAME,V_COMP_NAME:V_COMP_NAME,LIST_SEMAPHORE:LIST_SEMAPHORE,LIST_ITEM:LIST_ITEM,LIST_PAGE:LIST_PAGE,LIST_ITEM_PER_PAGE:LIST_ITEM_PER_PAGE,LIST_LENGTH:LIST_LENGTH,LIST_ITEM_PER_PAGE_DEFAULT:LIST_ITEM_PER_PAGE_DEFAULT,REDUX_PATHS:REDUX_PATHS,V_CHILDREN_PREFIX:V_CHILDREN_PREFIX,PARENT_PROP_NAME:PARENT_PROP_NAME,CURRENT_PATH_NAME:CURRENT_PATH_NAME,PRIMITIVE_COMP_NAME:PRIMITIVE_COMP_NAME,FRAGMENT_COMP_NAME:FRAGMENT_COMP_NAME});var jsonpointer = {};var hasExcape = /~/;
 var escapeMatcher = /~[01]/g;
 function escapeReplacer (m) {
   switch (m) {
@@ -7719,7 +7660,7 @@ function constant$1$1(value) {
 }
 
 var constant_1$1 = constant$1$1;var constant$2 = constant_1$1,
-    defineProperty$4 = _defineProperty$5,
+    defineProperty$3 = _defineProperty$5,
     identity$1$1 = identity_1$1;
 
 /**
@@ -7730,8 +7671,8 @@ var constant_1$1 = constant$1$1;var constant$2 = constant_1$1,
  * @param {Function} string The `toString` result.
  * @returns {Function} Returns `func`.
  */
-var baseSetToString$1$1 = !defineProperty$4 ? identity$1$1 : function(func, string) {
-  return defineProperty$4(func, 'toString', {
+var baseSetToString$1$1 = !defineProperty$3 ? identity$1$1 : function(func, string) {
+  return defineProperty$3(func, 'toString', {
     'configurable': true,
     'enumerable': false,
     'value': constant$2(string),
@@ -7988,35 +7929,32 @@ var pullAll_1 = pullAll$1;var baseRest$3 = _baseRest$1,
  */
 var pull = baseRest$3(pullAll);
 
-var pull_1 = pull;var findLastIndex = function (arr, func) {
-    var reverseIdx = __spreadArray([], arr, true).reverse().findIndex(func);
+var pull_1 = pull;const findLastIndex = (arr, func) => {
+    const reverseIdx = [...arr].reverse().findIndex(func);
     return reverseIdx === -1 ? reverseIdx : arr.length - (reverseIdx + 1);
 };
-var drop = function (arr, n) {
-    if (n === void 0) { n = 1; }
-    return arr.slice(n);
-};
-var isNumber = function (a) { return typeof a === 'number'; };
-var jsonPointerGet = function (json, path) {
+const drop = (arr, n = 1) => arr.slice(n);
+const isNumber = (a) => typeof a === 'number';
+const jsonPointerGet = (json, path) => {
     if (json === undefined || path === null || path === undefined || typeof path !== 'string')
         return undefined;
     if (path === SEPARATOR /* || path === '' same effect */)
         return json;
     try {
-        return jsonpointer.get(json, path.startsWith(SEPARATOR) ? path : "".concat(SEPARATOR).concat(path));
+        return jsonpointer.get(json, path.startsWith(SEPARATOR) ? path : `${SEPARATOR}${path}`);
     }
     catch (e) {
         return undefined;
     }
 };
-var jsonPointerSet = function (json, path, value) {
+const jsonPointerSet = (json, path, value) => {
     if (json === undefined || path === null || path === undefined || typeof path !== 'string')
         return json;
     if (path === SEPARATOR || path === '') {
         return value;
     }
     try {
-        jsonpointer.set(json, path.startsWith(SEPARATOR) ? path : "".concat(SEPARATOR).concat(path), value);
+        jsonpointer.set(json, path.startsWith(SEPARATOR) ? path : `${SEPARATOR}${path}`, value);
         return json;
         // eslint-disable-next-line no-empty
     }
@@ -8024,47 +7962,48 @@ var jsonPointerSet = function (json, path, value) {
         return json;
     }
 };
-var pathArrayToPathString = function (array) {
-    return array.map(function (i, index) { return (Number.isInteger(i) ? "[".concat(i, "]") : "".concat(index > 0 ? '.' : '').concat(i)); }).join('');
-};
-var pathArrayToJsonPointer = function (array) { return "/".concat(array.join('/')); };
+const pathArrayToPathString = (array) => array.map((i, index) => (Number.isInteger(i) ? `[${i}]` : `${index > 0 ? '.' : ''}${i}`)).join('');
+const pathArrayToJsonPointer = (array) => `/${array.join('/')}`;
 function isOnlyObject(item) {
     return !!item && typeof item === 'object' && !Array.isArray(item);
 }
-var mergePath = function (target, newState) {
+const mergePath = (target, newState) => {
     if (!newState || typeof newState !== 'object')
         return target;
-    var newTarget = cloneDeep_1(target);
-    Object.entries(newState).forEach(function (_a) {
-        var key = _a[0], value = _a[1];
+    let newTarget = cloneDeep_1(target);
+    Object.entries(newState).forEach(([key, value]) => {
         newTarget = jsonPointerSet(newTarget, key, value);
     });
     return newTarget;
 };
 // eslint-disable-next-line import/prefer-default-export
-var changeRelativePath = function (path) {
-    var pathArray = path.split(SEPARATOR);
+const changeRelativePath = (path) => {
+    let pathArray = path.split(SEPARATOR);
     // remove last /
     if (pathArray && pathArray.length > 1 && pathArray[pathArray.length - 1] === '' && !(pathArray.length === 2 && pathArray[0] === '')) {
         pathArray.pop();
     }
     // the last / is meaningful
-    var absolutepathIndex = findLastIndex(pathArray, function (i) { return i === ''; });
+    const absolutepathIndex = findLastIndex(pathArray, (i) => i === '');
     if (absolutepathIndex > 0) {
         pathArray = drop(pathArray, absolutepathIndex);
     }
     // all . need to remove because is just pointing the prev level
     pathArray = pull_1(pathArray, '.');
-    var count = 0;
-    var relativepathIndex = -1;
+    let count = 0;
+    let relativepathIndex = -1;
     do {
         count += 1;
-        relativepathIndex = findIndex_1(pathArray, function (i) { return i === '..'; });
+        relativepathIndex = findIndex_1(pathArray, (i) => i === '..');
         if (relativepathIndex !== -1) {
             pathArray.splice(relativepathIndex, 1);
             pathArray.splice(relativepathIndex - 1, 1);
         }
     } while (relativepathIndex !== -1 && count < 100);
+    pathArray = pull_1(pathArray, '..');
+    if (pathArray.length === 1 && pathArray[0] !== '') {
+        pathArray = ['', ...pathArray];
+    }
     return pathArray.join(SEPARATOR);
 };
 /**
@@ -8072,58 +8011,53 @@ var changeRelativePath = function (path) {
  * @param target
  * @param ...sources
  */
-function mergeDeep(target) {
-    var _a, _b;
-    var sources = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        sources[_i - 1] = arguments[_i];
-    }
+function mergeDeep(target, ...sources) {
     if (!sources.length)
         return target;
-    var source = sources.shift();
+    const source = sources.shift();
     if (isOnlyObject(target) && isOnlyObject(source)) {
         // eslint-disable-next-line no-restricted-syntax
-        for (var key in source) {
+        for (const key in source) {
             if (isOnlyObject(source[key])) {
                 if (!target[key])
-                    Object.assign(target, (_a = {}, _a[key] = {}, _a));
+                    Object.assign(target, { [key]: {} });
                 mergeDeep(target[key], source[key]);
             }
             else {
-                Object.assign(target, (_b = {}, _b[key] = source[key], _b));
+                Object.assign(target, { [key]: source[key] });
             }
         }
     }
-    return mergeDeep.apply(void 0, __spreadArray([target], sources, false));
+    return mergeDeep(target, ...sources);
 }
-var collectObjMerge = function (refConst, json) {
-    var res = {};
+const collectObjMerge = (refConst, json) => {
+    const res = {};
     if (refConst && json && typeof json === 'object') {
-        var refs_1 = [];
+        const refs = [];
         // eslint-disable-next-line func-names
         traverse$3(json).forEach(function (x) {
             if (x && !!x[refConst] && !!this && !this.circular) {
-                refs_1.push(x[refConst]);
+                refs.push(x[refConst]);
             }
         });
-        refs_1.filter(function (i) { return !!i; }).forEach(function (i) { return mergeDeep(res, i); });
+        refs.filter((i) => !!i).forEach((i) => mergeDeep(res, i));
     }
     return res;
 };
-var collectObjToArray = function (refConst, json) {
+const collectObjToArray = (refConst, json) => {
     if (refConst && json && typeof json === 'object') {
-        var refs_2 = [];
+        const refs = [];
         // eslint-disable-next-line func-names
         traverse$3(json).forEach(function (x) {
             if (x && !!x[refConst] && !!this && !this.circular) {
-                refs_2.push(x[refConst]);
+                refs.push(x[refConst]);
             }
         });
-        return refs_2;
+        return refs;
     }
     return [];
 };
-var isCircular = function (d) {
+const isCircular = (d) => {
     try {
         JSON.stringify(d);
     }
@@ -8131,121 +8065,116 @@ var isCircular = function (d) {
         return true;
     }
     return false;
-};var util$1=/*#__PURE__*/Object.freeze({__proto__:null,findLastIndex:findLastIndex,drop:drop,isNumber:isNumber,jsonPointerGet:jsonPointerGet,jsonPointerSet:jsonPointerSet,pathArrayToPathString:pathArrayToPathString,pathArrayToJsonPointer:pathArrayToJsonPointer,isOnlyObject:isOnlyObject,mergePath:mergePath,changeRelativePath:changeRelativePath,mergeDeep:mergeDeep,collectObjMerge:collectObjMerge,collectObjToArray:collectObjToArray,isCircular:isCircular});var actionBuilder = function (props, stock) {
-    var paths = [];
-    props.parentComp; var propsNew = __rest(props
-    // eslint-disable-next-line func-names
-    , ["parentComp"]);
-    // eslint-disable-next-line func-names
-    traverse$3(propsNew).forEach(function (x) {
-        if (!!x &&
-            !!x[ACTION_KEY] &&
-            // && !c.REDUX_FUNCTIONS.includes(x[c.ACTION_KEY])
-            !(this.path.length > 1 && this.path.includes(V_CHILDREN_NAME))) {
-            paths.push({ path: this.path, level: this.level });
-        }
-    });
-    orderBy_1(paths, ['level'], ['desc']).forEach(function (i) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, _b, functionName, functionParams;
-        return __generator(this, function (_c) {
-            _a = traverse$3(props).get(i.path), _b = ACTION_KEY, functionName = _a[_b], functionParams = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-            traverse$3(props).set(i.path, function () {
-                var callerArgs = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    callerArgs[_i] = arguments[_i];
+};var util$1=/*#__PURE__*/Object.freeze({__proto__:null,findLastIndex:findLastIndex,drop:drop,isNumber:isNumber,jsonPointerGet:jsonPointerGet,jsonPointerSet:jsonPointerSet,pathArrayToPathString:pathArrayToPathString,pathArrayToJsonPointer:pathArrayToJsonPointer,isOnlyObject:isOnlyObject,mergePath:mergePath,changeRelativePath:changeRelativePath,mergeDeep:mergeDeep,collectObjMerge:collectObjMerge,collectObjToArray:collectObjToArray,isCircular:isCircular});const getFilteredPath = (_a, func) => {
+    var _b = PARENT_PROP_NAME; _a[_b]; var propsNew = __rest(_a, [_b + ""]);
+    const paths = [];
+    function* jsonTraverse(o) {
+        const memory = new Set();
+        function* innerTraversal(oo, path = []) {
+            var _a;
+            if (memory.has(oo)) {
+                return; // circular
+            }
+            memory.add(oo);
+            // eslint-disable-next-line no-restricted-syntax
+            for (const i of Object.keys(oo)) {
+                const itemPath = path.concat(i);
+                if (itemPath && itemPath.length > 1 && typeof oo[i] === 'object' && ((_a = oo[i]) === null || _a === void 0 ? void 0 : _a[V_COMP_NAME])) {
+                    // eslint-disable-next-line no-continue
+                    continue;
                 }
-                return __awaiter(void 0, void 0, void 0, function () {
-                    return __generator(this, function (_a) {
-                        switch (_a.label) {
-                            case 0: return [4 /*yield*/, stock.callFunction(functionName, functionParams, props, callerArgs)];
-                            case 1:
-                                _a.sent();
-                                return [2 /*return*/];
-                        }
-                    });
-                });
-            });
-            return [2 /*return*/];
-        });
-    }); });
-};
-var modifierBuilder = function (props, stock) {
-    var paths = [];
-    props.parentComp; var propsNew = __rest(props
-    // eslint-disable-next-line func-names
-    , ["parentComp"]);
-    // eslint-disable-next-line func-names
-    traverse$3(propsNew).forEach(function (x) {
-        if (!!x && !!x[MODIFIER_KEY] && !REDUX_FUNCTIONS.includes(x[MODIFIER_KEY]) && !(this.path.length > 1 && this.path.includes(V_CHILDREN_NAME))) {
-            paths.push({ path: this.path, level: this.level });
+                if (i === PARENT_PROP_NAME || i === CURRENT_PATH_NAME || i === LIST_ITEM) {
+                    // eslint-disable-next-line no-continue
+                    continue;
+                }
+                if (func({ key: i, value: oo[i], path, parent: oo, level: path.length })) {
+                    yield { key: i, value: oo[i], path, parent: oo, level: path.length };
+                }
+                if (oo[i] !== null && typeof oo[i] === 'object') {
+                    yield* innerTraversal(oo[i], itemPath);
+                }
+            }
         }
+        yield* innerTraversal(o);
+    }
+    // eslint-disable-next-line no-restricted-syntax
+    for (const filteredvalue of jsonTraverse(propsNew)) {
+        paths.push(filteredvalue);
+    }
+    return paths;
+};
+const actionBuilder = (props, stock) => {
+    const _a = props, _b = PARENT_PROP_NAME; _a[_b]; const propsNew = __rest(_a, [_b + ""]);
+    const paths = getFilteredPath(propsNew, ({ key }) => key === ACTION_KEY);
+    orderBy_1(paths, ['level'], ['desc']).forEach((i) => __awaiter(void 0, void 0, void 0, function* () {
+        const _c = traverse$3(props).get(i.path), _d = ACTION_KEY, functionName = _c[_d], functionParams = __rest(_c, [_d + ""]);
+        traverse$3(props).set(i.path, (...callerArgs) => __awaiter(void 0, void 0, void 0, function* () {
+            yield stock.callFunction(functionName, functionParams, props, callerArgs);
+        }));
+    }));
+};
+const calculatePropsFromModifier = (props, stock) => {
+    const reduxPaths = [];
+    const _a = props, _b = PARENT_PROP_NAME; _a[_b]; const propsNew = __rest(_a, [_b + ""]);
+    const paths = getFilteredPath(propsNew, ({ key }) => key === MODIFIER_KEY);
+    orderBy_1(paths, ['level'], ['desc']).forEach((i) => __awaiter(void 0, void 0, void 0, function* () {
+        const _c = traverse$3(props).get(i.path), _d = MODIFIER_KEY, functionName = _c[_d], functionParams = __rest(_c, [_d + ""]);
+        if (typeof functionName === 'string' && functionName === REDUX_GET_FUNCTION) {
+            reduxPaths.push(functionParams);
+        }
+        traverse$3(props).set(i.path, stock.callFunction(functionName, functionParams, props));
+    }));
+    return reduxPaths.map((i) => {
+        return { store: i === null || i === void 0 ? void 0 : i.store, path: i === null || i === void 0 ? void 0 : i.path };
     });
-    orderBy_1(paths, ['level'], ['desc']).forEach(function (i) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, _b, functionName, functionParams;
-        return __generator(this, function (_c) {
-            _a = traverse$3(props).get(i.path), _b = MODIFIER_KEY, functionName = _a[_b], functionParams = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-            traverse$3(props).set(i.path, stock.callFunction(functionName, functionParams, props));
-            return [2 /*return*/];
-        });
-    }); });
 };
-var pathModifierBuilder = function (props, pathModifier) {
-    var currentPaths = __assign({}, props.currentPaths);
-    var modified = false;
+const getCurrentPaths = (props, pathModifier) => {
+    const currentPaths = Object.assign({}, props[CURRENT_PATH_NAME]);
     if (pathModifier && Object.keys(pathModifier).length !== 0) {
-        Object.keys(pathModifier).forEach(function (key) {
-            var _a, _b;
+        Object.keys(pathModifier).forEach((key) => {
             if (!!key && !!pathModifier[key] && pathModifier[key][PATHNAME] !== undefined && pathModifier[key][PATHNAME] !== null) {
-                var path = pathModifier[key][PATHNAME];
-                var parent_1 = currentPaths[key];
-                modified = true;
-                if ("".concat(path).startsWith(SEPARATOR) || !(parent_1 && parent_1[PATHNAME])) {
-                    currentPaths[key] = (_a = {}, _a[PATHNAME] = path, _a);
+                const path = pathModifier[key][PATHNAME];
+                const parent = currentPaths[key];
+                if (`${path}`.startsWith(SEPARATOR) || !(parent && parent[PATHNAME])) {
+                    currentPaths[key] = { [PATHNAME]: path };
                 }
                 else {
-                    currentPaths[key] = (_b = {}, _b[PATHNAME] = changeRelativePath("".concat(parent_1[PATHNAME]).concat(SEPARATOR).concat(path)), _b);
+                    currentPaths[key] = { [PATHNAME]: changeRelativePath(`${parent[PATHNAME]}${SEPARATOR}${path}`) };
                 }
-                if (!!currentPaths[key] && !"".concat(currentPaths[key][PATHNAME]).startsWith(SEPARATOR)) {
-                    currentPaths[key][PATHNAME] = "".concat(SEPARATOR).concat(currentPaths[key][PATHNAME]);
+                if (!!currentPaths[key] && !`${currentPaths[key][PATHNAME]}`.startsWith(SEPARATOR)) {
+                    currentPaths[key][PATHNAME] = `${SEPARATOR}${currentPaths[key][PATHNAME]}`;
                 }
             }
         });
     }
-    return modified ? { currentPaths: currentPaths } : undefined;
+    return currentPaths;
 };
-var getWrapperProps = function (props, parentComp) {
-    var _a, _b;
-    if (props && Array.isArray(props)) {
-        return _a = {},
-            _a[V_COMP_NAME] = 'Fragment',
-            _a[V_CHILDREN_NAME] = props,
-            _a;
-    }
-    var res = __assign(__assign({}, (SIMPLE_DATA_TYPES.includes(typeof props) ? {} : props)), (_b = { parentComp: parentComp }, _b[V_COMP_NAME] = SIMPLE_DATA_TYPES.includes(typeof props) || props === undefined || props === null ? '_PrimitiveProp' : props[V_COMP_NAME], _b[V_CHILDREN_NAME] = SIMPLE_DATA_TYPES.includes(typeof props) || props === undefined || props === null ? props : props[V_CHILDREN_NAME], _b));
-    // eslint-disable-next-line no-restricted-syntax
-    for (var i in res)
-        if (typeof res[i] === 'undefined')
-            delete res[i];
-    return res;
+const normalisePrimitives = (props, parentComp) => {
+    if (!!props && Array.isArray(props)) {
+        return { [V_COMP_NAME]: FRAGMENT_COMP_NAME, [V_CHILDREN_NAME]: props, [PARENT_PROP_NAME]: parentComp };
+    }
+    if (props === null || SIMPLE_DATA_TYPES.includes(typeof props)) {
+        return { [V_COMP_NAME]: PRIMITIVE_COMP_NAME, [V_CHILDREN_NAME]: props, [PARENT_PROP_NAME]: parentComp };
+    }
+    return Object.assign(Object.assign({}, props), { [PARENT_PROP_NAME]: parentComp });
 };
-var genChildenFromListItem = function (props, stock) {
-    var _a, _b;
-    var page = !!props[LIST_PAGE] && isNumber(props[LIST_PAGE]) ? props[LIST_PAGE] : 0;
-    var listLength = !!props[LIST_LENGTH] && isNumber(props[LIST_LENGTH]) ? props[LIST_LENGTH] : undefined;
-    var itemPerPage = !!props[LIST_ITEM_PER_PAGE] && isNumber(props[LIST_ITEM_PER_PAGE]) ? props[LIST_ITEM_PER_PAGE] : undefined;
-    var listItem = props[LIST_ITEM];
+const genChildenFromListItem = (props, stock) => {
+    let page = !!props[LIST_PAGE] && isNumber(props[LIST_PAGE]) ? props[LIST_PAGE] : 0;
+    let listLength = !!props[LIST_LENGTH] && isNumber(props[LIST_LENGTH]) ? props[LIST_LENGTH] : undefined;
+    let itemPerPage = !!props[LIST_ITEM_PER_PAGE] && isNumber(props[LIST_ITEM_PER_PAGE]) ? props[LIST_ITEM_PER_PAGE] : undefined;
+    const listItem = props[LIST_ITEM];
     if (!listItem)
         return undefined;
-    var currentPaths = props.currentPaths;
+    const currentPaths = props[CURRENT_PATH_NAME];
     if (!currentPaths)
         return undefined;
-    var store = Object.keys(currentPaths)[0];
+    const store = Object.keys(currentPaths)[0];
     if (!store)
         return undefined;
-    var path = currentPaths[store].path;
+    const { path } = currentPaths[store];
     if (currentPaths && !listLength) {
         if (path) {
-            var list = stock.callFunction('get', { store: store, path: path });
+            const list = stock.callFunction('get', { store, path });
             listLength = !!list && Array.isArray(list) ? list.length : 0;
         }
     }
@@ -8255,45 +8184,80 @@ var genChildenFromListItem = function (props, stock) {
     page = Number.isInteger(page) && page >= 0 ? page : 0;
     itemPerPage = !!itemPerPage && Number.isInteger(itemPerPage) && itemPerPage >= 0 ? itemPerPage : 0;
     listLength = !!listLength && Number.isInteger(listLength) && listLength >= 0 ? listLength : 0;
-    var offset = page * itemPerPage <= listLength ? page * itemPerPage : 0;
-    var children = [];
+    const offset = page * itemPerPage <= listLength ? page * itemPerPage : 0;
+    const children = [];
     // eslint-disable-next-line no-plusplus
-    for (var i = offset; i < listLength && i < offset + itemPerPage; i++) {
-        children.push(__assign(__assign({}, listItem), (_a = {}, _a[PATH_MODIFIERS_KEY] = (_b = {},
-            _b[store] = {
-                path: ".".concat(SEPARATOR).concat(i),
-            },
-            _b), _a)));
+    for (let i = offset; i < listLength && i < offset + itemPerPage; i++) {
+        children.push(Object.assign(Object.assign({}, listItem), { [PATH_MODIFIERS_KEY]: {
+                [store]: {
+                    path: `.${SEPARATOR}${i}`,
+                },
+            } }));
     }
     return children.length > 0 ? children : undefined;
 };
-var getRootWrapperProps = function (props, stock) {
-    var newProps = __assign({}, props);
-    modifierBuilder(newProps, stock);
+const getRootWrapperProps = (props, stock) => {
+    const newProps = Object.assign({}, props);
+    const subscriberPaths = calculatePropsFromModifier(newProps, stock);
     actionBuilder(newProps, stock);
     if (newProps[LIST_SEMAPHORE]) {
         newProps[V_CHILDREN_NAME] = genChildenFromListItem(newProps, stock);
     }
+    newProps.subscriberPaths = subscriberPaths;
     return newProps;
 };
-var getChildrensForRoot = function (props, children, Wrapper) {
-    var _a = props; _a.parentComp; var _b = V_CHILDREN_NAME; _a[_b]; var newParentComp = __rest(_a, ["parentComp", _b + ""]);
+const isChildrenProps = (propName) => !!propName && typeof propName === 'string' && propName.startsWith(V_CHILDREN_PREFIX);
+const getParentProps = (props) => {
+    return props && typeof props === 'object' && !Array.isArray(props)
+        ? Object.keys(props)
+            .filter((key) => !isChildrenProps(key) && key !== PARENT_PROP_NAME)
+            .reduce((newObj, key) => {
+            // eslint-disable-next-line no-param-reassign
+            newObj[key] = props[key];
+            return newObj;
+        }, {})
+        : {};
+};
+const getPropsChildrenFilter = ({ props, filter }) => props && typeof props === 'object' && !Array.isArray(props)
+    ? Object.keys(props)
+        .filter((key) => ((filter === 'withoutChildren' && !isChildrenProps(key)) || (filter === 'onlyChildren' && isChildrenProps(key))) && key !== PARENT_PROP_NAME)
+        .reduce((newObj, key) => {
+        // eslint-disable-next-line no-param-reassign
+        newObj[key] = props[key];
+        return newObj;
+    }, {})
+    : {};
+const getChildrensForRoot = (props, children, Wrapper) => {
     // eslint-disable-next-line no-nested-ternary
     if (!!props && Array.isArray(children)) {
-        return children.map(function (childrenItem, index) {
+        return children.map((childrenItem, index) => {
             // eslint-disable-next-line react/no-array-index-key
-            return jsxRuntime.exports.jsx(Wrapper, __assign({}, getWrapperProps(childrenItem, newParentComp)), index);
+            return jsxRuntime.exports.jsx(Wrapper, { props: normalisePrimitives(childrenItem, getParentProps(props)) }, index);
         });
     }
     if (!!props && !!children) {
-        return jsxRuntime.exports.jsx(Wrapper, __assign({}, getWrapperProps(children, newParentComp)), void 0);
+        return jsxRuntime.exports.jsx(Wrapper, { props: normalisePrimitives(children, getParentProps(props)) }, void 0);
+    }
+    return undefined;
+};
+const generateChildren = (props, { Wrapper }) => props[V_COMP_NAME] !== '_PrimitiveProp' ? getChildrensForRoot(props, props[V_CHILDREN_NAME], Wrapper) : props[V_CHILDREN_NAME];
+const generateNewChildren = (props, { Wrapper }) => {
+    // eslint-disable-next-line no-nested-ternary
+    if (props) {
+        if (Array.isArray(props)) {
+            return props.map((childrenItem, index) => {
+                // eslint-disable-next-line react/no-array-index-key
+                return jsxRuntime.exports.jsx(Wrapper, { props: normalisePrimitives(childrenItem, getParentProps(props)) }, index);
+            });
+        }
+        return jsxRuntime.exports.jsx(Wrapper, { props: normalisePrimitives(props, getParentProps(props)) }, void 0);
     }
     return undefined;
 };
-var generateChildren = function (props, _a) {
-    var Wrapper = _a.Wrapper;
-    return props[V_COMP_NAME] !== '_PrimitiveProp' ? getChildrensForRoot(props, props[V_CHILDREN_NAME], Wrapper) : props[V_CHILDREN_NAME];
-};var wrapperUtil=/*#__PURE__*/Object.freeze({__proto__:null,actionBuilder:actionBuilder,modifierBuilder:modifierBuilder,pathModifierBuilder:pathModifierBuilder,getWrapperProps:getWrapperProps,getRootWrapperProps:getRootWrapperProps,getChildrensForRoot:getChildrensForRoot,generateChildren:generateChildren});var ajv = {exports: {}};var core$2 = {};var validate = {};var boolSchema = {};var errors = {};var codegen = {};var code$1 = {};(function (exports) {
+const removeTechnicalProps = (changeableProps) => {
+    const _a = changeableProps, _b = PARENT_PROP_NAME; _a[_b]; const _c = STYLE_WEB_NAME; _a[_c]; const _d = V_COMP_NAME; _a[_d]; const _e = PATH_MODIFIERS_KEY; _a[_e]; const _f = CURRENT_PATH_NAME; _a[_f]; const _g = PATH_MODIFIERS_KEY; _a[_g]; const _h = LIST_SEMAPHORE; _a[_h]; const _j = LIST_ITEM; _a[_j]; const _k = LIST_PAGE; _a[_k]; const _l = LIST_ITEM_PER_PAGE; _a[_l]; const _m = LIST_LENGTH; _a[_m]; const newProps = __rest(_a, [_b + "", "style", _c + "", _d + "", _e + "", _f + "", "subscriberPaths", _g + "", _h + "", _j + "", _k + "", _l + "", _m + ""]);
+    return newProps;
+};var wrapperUtil=/*#__PURE__*/Object.freeze({__proto__:null,getFilteredPath:getFilteredPath,actionBuilder:actionBuilder,calculatePropsFromModifier:calculatePropsFromModifier,getCurrentPaths:getCurrentPaths,normalisePrimitives:normalisePrimitives,getRootWrapperProps:getRootWrapperProps,isChildrenProps:isChildrenProps,getParentProps:getParentProps,getPropsChildrenFilter:getPropsChildrenFilter,getChildrensForRoot:getChildrensForRoot,generateChildren:generateChildren,generateNewChildren:generateNewChildren,removeTechnicalProps:removeTechnicalProps});var ajv = {exports: {}};var core$2 = {};var validate = {};var boolSchema = {};var errors = {};var codegen = {};var code$1 = {};(function (exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.regexpCode = exports.getEsmExportName = exports.getProperty = exports.safeStringify = exports.stringify = exports.strConcat = exports.addCodeArg = exports.str = exports._ = exports.nil = exports._Code = exports.Name = exports.IDENTIFIER = exports._CodeOrName = void 0;
 class _CodeOrName {
@@ -15218,7 +15182,7 @@ var src = function(str, data, delimiter = [ '{{ ', ' }}' ]) {
 
 	return str
 
-};var I18nSchema = {
+};const I18nSchema = {
     $id: 'http://example.com/schemas/schema.json',
     type: 'object',
     additionalProperties: {
@@ -15243,28 +15207,26 @@ var src = function(str, data, delimiter = [ '{{ ', ' }}' ]) {
     },
     minProperties: 1,
 };
-var I18n = /** @class */ (function () {
+class I18n {
     // eslint-disable-next-line consistent-this
-    function I18n(_a) {
-        var _this = this;
-        var _b = _a.language, language = _b === void 0 ? 'en' : _b, resources = _a.resources, nonExistsHandler = _a.nonExistsHandler, _c = _a.keyPrefix, keyPrefix = _c === void 0 ? '{{' : _c, _d = _a.keyPostfix, keyPostfix = _d === void 0 ? '}}' : _d;
-        this.getLocales = function () { return (_this.language.includes('-') ? _this.language.split('-') : _this.language.split('_') || [])[0]; };
-        this.t = function (key, options, language) {
+    constructor({ language = 'en', resources, nonExistsHandler, keyPrefix = '{{', keyPostfix = '}}' }) {
+        this.getLocales = () => (this.language.includes('-') ? this.language.split('-') : this.language.split('_') || [])[0];
+        this.t = (key, options, language) => {
             if (!(typeof key === 'string')) {
                 return key;
             }
-            if (!_this.resources || (!_this.resources && !_this.language && !language) || !_this.resources["".concat(_this.availableLanguageKey || language)]) {
+            if (!this.resources || (!this.resources && !this.language && !language) || !this.resources[`${this.availableLanguageKey || language}`]) {
                 return key;
             }
-            var value = _this.resources["".concat(_this.availableLanguageKey || language)].translation[key];
+            const value = this.resources[`${this.availableLanguageKey || language}`].translation[key];
             if (value === undefined) {
-                if (_this.nonExistsHandler && typeof _this.nonExistsHandler === 'function') {
-                    return _this.nonExistsHandler(key);
+                if (this.nonExistsHandler && typeof this.nonExistsHandler === 'function') {
+                    return this.nonExistsHandler(key);
                 }
                 return key;
             }
             if (options) {
-                return src(value, options, [_this.keyPrefix, _this.keyPostfix]);
+                return src(value, options, [this.keyPrefix, this.keyPostfix]);
             }
             return value;
         };
@@ -15272,9 +15234,9 @@ var I18n = /** @class */ (function () {
         this.nonExistsHandler = nonExistsHandler;
         this.keyPrefix = keyPrefix;
         this.keyPostfix = keyPostfix;
-        var ajv = new Ajv();
-        var validate = ajv.compile(I18nSchema);
-        var isValid = validate(resources);
+        const ajv = new Ajv();
+        const validate = ajv.compile(I18nSchema);
+        const isValid = validate(resources);
         if (isValid) {
             this.resources = resources;
         }
@@ -15286,84 +15248,49 @@ var I18n = /** @class */ (function () {
             this.availableLanguageKey = this.getLocales();
         }
     }
-    return I18n;
-}());var StockContext = createContext(null);
-var PathModifierContext = createContext({});var getState = function (state) { return state === null || state === void 0 ? void 0 : state.root; };
-var getValue$3 = function (state, store, path) { return jsonPointerGet(state[store], path) || null; };
-var getStateValue$1 = function (globalState, _a, currentPaths) {
-    var store = _a.store, path = _a.path, _b = _a.isError, isError = _b === void 0 ? false : _b;
-    var state = getState(globalState);
+}const StockContext = createContext(null);
+const PathModifierContext = createContext({});const getState = (state) => state === null || state === void 0 ? void 0 : state.root;
+const getValue$3 = (state, store, path) => jsonPointerGet(state[store], path) || null;
+const getStateValue$1 = (globalState, { store, path, isError = false }, currentPaths) => {
+    const state = getState(globalState);
     if (state && store && path) {
-        var convertedPath = currentPaths && currentPaths[store] && currentPaths[store].path ? changeRelativePath("".concat(currentPaths[store].path).concat(SEPARATOR).concat(path)) : path;
-        return getValue$3(state, "".concat(store).concat(isError ? STORE_ERROR_POSTFIX : ''), convertedPath);
+        const convertedPath = currentPaths && currentPaths[store] && currentPaths[store].path ? changeRelativePath(`${currentPaths[store].path}${SEPARATOR}${path}`) : path;
+        return getValue$3(state, `${store}${isError ? STORE_ERROR_POSTFIX : ''}`, convertedPath);
     }
     return null;
 };
-var genAllStateProps = function (globalState, props) {
-    var currentPaths = props.currentPaths;
-    var result = {};
-    var paths = [];
-    props.parentComp; var propsNew = __rest(props
-    // eslint-disable-next-line func-names
-    , ["parentComp"]);
-    // eslint-disable-next-line func-names
-    traverse$3(propsNew).forEach(function (x) {
-        if (!!x && !!x[MODIFIER_KEY] && x[MODIFIER_KEY] === 'get' && !(this.path.length > 1 && this.path.includes(V_CHILDREN_NAME))) {
-            paths.push({ path: this.path, level: this.level });
-        }
-    });
-    orderBy_1(paths, ['level'], ['desc']).forEach(function (i) { return __awaiter(void 0, void 0, void 0, function () {
-        var _a, _b, functionName, functionParams, value, jsonata, expression;
-        return __generator(this, function (_c) {
-            _a = traverse$3(props).get(i.path), _b = MODIFIER_KEY, functionName = _a[_b], functionParams = __rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
-            if (functionName === 'get' && functionParams.store && functionParams.path) {
-                value = getStateValue$1(globalState, functionParams, currentPaths);
-                if (functionParams.jsonataDef) {
-                    try {
-                        jsonata = require('jsonata');
-                        expression = jsonata(functionParams.jsonataDef);
-                        value = expression.evaluate(value);
-                    }
-                    catch (error) {
-                        // eslint-disable-next-line no-console
-                        console.error('jsonata error', error, functionParams.jsonataDef);
-                    }
-                }
-                // traverse(result).set(i.path, value)
-                result[pathArrayToJsonPointer(i.path)] = value;
-            }
-            return [2 /*return*/];
-        });
-    }); });
-    return result;
-};var DATA_UPDATE = 'DATA_UPDATE';
-var PURGE$1 = 'PURGE';
-var set$1 = function (payload) { return ({
+const compSelectorHook = (currentPaths, subscriberPaths) => (state) => {
+    if (typeof subscriberPaths === 'object' && Array.isArray(subscriberPaths) && (subscriberPaths === null || subscriberPaths === void 0 ? void 0 : subscriberPaths.length) > 0) {
+        return subscriberPaths.map((subscriberPath) => getStateValue$1(state, subscriberPath, currentPaths));
+    }
+    // TODO isError, currentPaths, root need to solve propperly
+    return undefined;
+};const DATA_UPDATE = 'DATA_UPDATE';
+const PURGE$1 = 'PURGE';
+const set$1 = (payload) => ({
     type: DATA_UPDATE,
-    payload: payload,
-}); };
-var purge = function (payload) { return ({
+    payload,
+});
+const purge = (payload) => ({
     type: PURGE$1,
-    payload: payload,
-}); };var getStateValue = function (attr, _a, callerArgs, stock) {
-    var _b = _a === void 0 ? {} : _a, currentPaths = _b.currentPaths;
-    var store = attr.store, path = attr.path;
-    var state = stock.reduxStore.getState();
-    return getStateValue$1(state, { store: store, path: path }, currentPaths);
+    payload,
+});const getStateValue = (attr, { [CURRENT_PATH_NAME]: currentPaths } = {}, callerArgs, stock) => {
+    const { store, path } = attr;
+    const state = stock.reduxStore.getState();
+    return getStateValue$1(state, { store, path }, currentPaths);
 };
-var get = function (attr, _a, callerArgs, stock) {
-    var _b = _a === void 0 ? {} : _a, currentPaths = _b.currentPaths;
-    var store = attr.store, path = attr.path;
-    var state = stock.reduxStore.getState();
-    return getStateValue$1(state, { store: store, path: path }, currentPaths);
+const get = (attr, { [CURRENT_PATH_NAME]: currentPaths } = {}, callerArgs, stock) => {
+    const { store, path } = attr;
+    const state = stock.reduxStore.getState();
+    return getStateValue$1(state, { store, path }, currentPaths);
 };
-var set = function (attr, props, callerArgs, stock) {
-    stock.reduxStore.dispatch(set$1(__assign(__assign({}, attr), { value: attr && attr.value !== undefined ? attr.value : callerArgs[0], currentPaths: props.currentPaths, stock: stock })));
+const set = (attr, props, callerArgs, stock) => {
+    stock.reduxStore.dispatch(set$1(Object.assign(Object.assign({}, attr), { value: attr && attr.value !== undefined ? attr.value : callerArgs[0], [CURRENT_PATH_NAME]: props[CURRENT_PATH_NAME], stock })));
 };
 var functions = {
-    getStateValue: getStateValue,
-    get: get,
-    set: set,
+    getStateValue,
+    get,
+    set,
 };/**
  * Adapted from React: https://github.com/facebook/react/blob/master/packages/shared/formatProdErrorMessage.js
  *
@@ -15397,7 +15324,7 @@ var ActionTypes$1 = {
  * @param {any} obj The object to inspect.
  * @returns {boolean} True if the argument appears to be a plain object.
  */
-function isPlainObject$4(obj) {
+function isPlainObject$3(obj) {
   if (typeof obj !== 'object' || obj === null) return false;
   var proto = obj;
 
@@ -15473,7 +15400,7 @@ function kindOf$1(val) {
  * @param {String} message The warning message.
  * @returns {void}
  */
-function warning$2(message) {
+function warning$1(message) {
   /* eslint-disable no-console */
   if (typeof console !== 'undefined' && typeof console.error === 'function') {
     console.error(message);
@@ -15498,7 +15425,7 @@ function getUnexpectedStateShapeWarningMessage(inputState, reducers, action, une
     return 'Store does not have a valid reducer. Make sure the argument passed ' + 'to combineReducers is an object whose values are reducers.';
   }
 
-  if (!isPlainObject$4(inputState)) {
+  if (!isPlainObject$3(inputState)) {
     return "The " + argumentName + " has unexpected type of \"" + kindOf$1(inputState) + "\". Expected argument to be an object with the following " + ("keys: \"" + reducerKeys.join('", "') + "\"");
   }
 
@@ -15560,7 +15487,7 @@ function combineReducers(reducers) {
 
     if (process.env.NODE_ENV !== 'production') {
       if (typeof reducers[key] === 'undefined') {
-        warning$2("No reducer provided for key \"" + key + "\"");
+        warning$1("No reducer provided for key \"" + key + "\"");
       }
     }
 
@@ -15599,7 +15526,7 @@ function combineReducers(reducers) {
       var warningMessage = getUnexpectedStateShapeWarningMessage(state, finalReducers, action, unexpectedKeyCache);
 
       if (warningMessage) {
-        warning$2(warningMessage);
+        warning$1(warningMessage);
       }
     }
 
@@ -15634,7 +15561,7 @@ function combineReducers(reducers) {
 function isCrushed$1() {}
 
 if (process.env.NODE_ENV !== 'production' && typeof isCrushed$1.name === 'string' && isCrushed$1.name !== 'isCrushed') {
-  warning$2('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
+  warning$1('You are currently using minified code outside of NODE_ENV === "production". ' + 'This means that you are running a slower development build of Redux. ' + 'You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify ' + 'or setting mode to production in webpack (https://webpack.js.org/concepts/mode/) ' + 'to ensure you have the correct code for your production build.');
 }function createTransform( // @NOTE inbound: transform state coming from redux on its way to being serialized and stored
 inbound, // @NOTE outbound: transform state coming from storage, on its way to be rehydrated into redux
 outbound) {
@@ -15869,11 +15796,11 @@ var pick = flatRest(function(object, paths) {
   return object == null ? {} : basePick(object, paths);
 });
 
-var pick_1 = pick;var SetTransform = createTransform(function (inboundState, key) {
+var pick_1 = pick;const SetTransform = createTransform((inboundState, key) => {
     if (key !== 'root')
         return inboundState;
     return pick_1(inboundState, PERSIST_STORAGE_NAMES);
-}, function (outboundState, key) {
+}, (outboundState, key) => {
     if (key !== 'root')
         return outboundState;
     return pick_1(outboundState, PERSIST_STORAGE_NAMES);
@@ -15883,81 +15810,80 @@ var persistConfig = {
     whitelist: ['root'],
     transforms: [SetTransform],
 };function n$3(n){for(var r=arguments.length,t=Array(r>1?r-1:0),e=1;e<r;e++)t[e-1]=arguments[e];if("production"!==process.env.NODE_ENV){var i=Y[n],o=i?"function"==typeof i?i.apply(null,t):i:"unknown error nr: "+n;throw Error("[Immer] "+o)}throw Error("[Immer] minified error nr: "+n+(t.length?" "+t.map((function(n){return "'"+n+"'"})).join(","):"")+". Find the full error at: https://bit.ly/3cXEKWf")}function r$3(n){return !!n&&!!n[Q]}function t$2(n){return !!n&&(function(n){if(!n||"object"!=typeof n)return !1;var r=Object.getPrototypeOf(n);if(null===r)return !0;var t=Object.hasOwnProperty.call(r,"constructor")&&r.constructor;return t===Object||"function"==typeof t&&Function.toString.call(t)===Z}(n)||Array.isArray(n)||!!n[L]||!!n.constructor[L]||s(n)||v$3(n))}function i(n,r,t){void 0===t&&(t=!1),0===o(n)?(t?Object.keys:nn)(n).forEach((function(e){t&&"symbol"==typeof e||r(e,n[e],n);})):n.forEach((function(t,e){return r(e,t,n)}));}function o(n){var r=n[Q];return r?r.i>3?r.i-4:r.i:Array.isArray(n)?1:s(n)?2:v$3(n)?3:0}function u$1(n,r){return 2===o(n)?n.has(r):Object.prototype.hasOwnProperty.call(n,r)}function a(n,r){return 2===o(n)?n.get(r):n[r]}function f$3(n,r,t){var e=o(n);2===e?n.set(r,t):3===e?(n.delete(r),n.add(t)):n[r]=t;}function c$3(n,r){return n===r?0!==n||1/n==1/r:n!=n&&r!=r}function s(n){return X&&n instanceof Map}function v$3(n){return q$3&&n instanceof Set}function p$3(n){return n.o||n.t}function l$3(n){if(Array.isArray(n))return Array.prototype.slice.call(n);var r=rn(n);delete r[Q];for(var t=nn(r),e=0;e<t.length;e++){var i=t[e],o=r[i];!1===o.writable&&(o.writable=!0,o.configurable=!0),(o.get||o.set)&&(r[i]={configurable:!0,writable:!0,enumerable:o.enumerable,value:n[i]});}return Object.create(Object.getPrototypeOf(n),r)}function d$3(n,e){return void 0===e&&(e=!1),y$3(n)||r$3(n)||!t$2(n)?n:(o(n)>1&&(n.set=n.add=n.clear=n.delete=h$3),Object.freeze(n),e&&i(n,(function(n,r){return d$3(r,!0)}),!0),n)}function h$3(){n$3(2);}function y$3(n){return null==n||"object"!=typeof n||Object.isFrozen(n)}function b$3(r){var t=tn[r];return t||n$3(18,r),t}function _(){return "production"===process.env.NODE_ENV||U||n$3(0),U}function j(n,r){r&&(b$3("Patches"),n.u=[],n.s=[],n.v=r);}function O(n){g$3(n),n.p.forEach(S),n.p=null;}function g$3(n){n===U&&(U=n.l);}function w$3(n){return U={p:[],l:U,h:n,m:!0,_:0}}function S(n){var r=n[Q];0===r.i||1===r.i?r.j():r.O=!0;}function P(r,e){e._=e.p.length;var i=e.p[0],o=void 0!==r&&r!==i;return e.h.g||b$3("ES5").S(e,r,o),o?(i[Q].P&&(O(e),n$3(4)),t$2(r)&&(r=M(e,r),e.l||x$3(e,r)),e.u&&b$3("Patches").M(i[Q].t,r,e.u,e.s)):r=M(e,i,[]),O(e),e.u&&e.v(e.u,e.s),r!==H$1?r:void 0}function M(n,r,t){if(y$3(r))return r;var e=r[Q];if(!e)return i(r,(function(i,o){return A$3(n,e,r,i,o,t)}),!0),r;if(e.A!==n)return r;if(!e.P)return x$3(n,e.t,!0),e.t;if(!e.I){e.I=!0,e.A._--;var o=4===e.i||5===e.i?e.o=l$3(e.k):e.o;i(3===e.i?new Set(o):o,(function(r,i){return A$3(n,e,o,r,i,t)})),x$3(n,o,!1),t&&n.u&&b$3("Patches").R(e,t,n.u,n.s);}return e.o}function A$3(e,i,o,a,c,s){if("production"!==process.env.NODE_ENV&&c===o&&n$3(5),r$3(c)){var v=M(e,c,s&&i&&3!==i.i&&!u$1(i.D,a)?s.concat(a):void 0);if(f$3(o,a,v),!r$3(v))return;e.m=!1;}if(t$2(c)&&!y$3(c)){if(!e.h.F&&e._<1)return;M(e,c),i&&i.A.l||x$3(e,c);}}function x$3(n,r,t){void 0===t&&(t=!1),n.h.F&&n.m&&d$3(r,t);}function z$3(n,r){var t=n[Q];return (t?p$3(t):n)[r]}function I$1(n,r){if(r in n)for(var t=Object.getPrototypeOf(n);t;){var e=Object.getOwnPropertyDescriptor(t,r);if(e)return e;t=Object.getPrototypeOf(t);}}function k$3(n){n.P||(n.P=!0,n.l&&k$3(n.l));}function E$1(n){n.o||(n.o=l$3(n.t));}function R(n,r,t){var e=s(r)?b$3("MapSet").N(r,t):v$3(r)?b$3("MapSet").T(r,t):n.g?function(n,r){var t=Array.isArray(n),e={i:t?1:0,A:r?r.A:_(),P:!1,I:!1,D:{},l:r,t:n,k:null,o:null,j:null,C:!1},i=e,o=en;t&&(i=[e],o=on);var u=Proxy.revocable(i,o),a=u.revoke,f=u.proxy;return e.k=f,e.j=a,f}(r,t):b$3("ES5").J(r,t);return (t?t.A:_()).p.push(e),e}function D$1(e){return r$3(e)||n$3(22,e),function n(r){if(!t$2(r))return r;var e,u=r[Q],c=o(r);if(u){if(!u.P&&(u.i<4||!b$3("ES5").K(u)))return u.t;u.I=!0,e=F$1(r,c),u.I=!1;}else e=F$1(r,c);return i(e,(function(r,t){u&&a(u.t,r)===t||f$3(e,r,n(t));})),3===c?new Set(e):e}(e)}function F$1(n,r){switch(r){case 2:return new Map(n);case 3:return Array.from(n)}return l$3(n)}var G$1,U,W="undefined"!=typeof Symbol&&"symbol"==typeof Symbol("x"),X="undefined"!=typeof Map,q$3="undefined"!=typeof Set,B$1="undefined"!=typeof Proxy&&void 0!==Proxy.revocable&&"undefined"!=typeof Reflect,H$1=W?Symbol.for("immer-nothing"):((G$1={})["immer-nothing"]=!0,G$1),L=W?Symbol.for("immer-draftable"):"__$immer_draftable",Q=W?Symbol.for("immer-state"):"__$immer_state",Y={0:"Illegal state",1:"Immer drafts cannot have computed properties",2:"This object has been frozen and should not be mutated",3:function(n){return "Cannot use a proxy that has been revoked. Did you pass an object from inside an immer function to an async process? "+n},4:"An immer producer returned a new value *and* modified its draft. Either return a new value *or* modify the draft.",5:"Immer forbids circular references",6:"The first or second argument to `produce` must be a function",7:"The third argument to `produce` must be a function or undefined",8:"First argument to `createDraft` must be a plain object, an array, or an immerable object",9:"First argument to `finishDraft` must be a draft returned by `createDraft`",10:"The given draft is already finalized",11:"Object.defineProperty() cannot be used on an Immer draft",12:"Object.setPrototypeOf() cannot be used on an Immer draft",13:"Immer only supports deleting array indices",14:"Immer only supports setting array indices and the 'length' property",15:function(n){return "Cannot apply patch, path doesn't resolve: "+n},16:'Sets cannot have "replace" patches.',17:function(n){return "Unsupported patch operation: "+n},18:function(n){return "The plugin for '"+n+"' has not been loaded into Immer. To enable the plugin, import and call `enable"+n+"()` when initializing your application."},20:"Cannot use proxies if Proxy, Proxy.revocable or Reflect are not available",21:function(n){return "produce can only be called on things that are draftable: plain objects, arrays, Map, Set or classes that are marked with '[immerable]: true'. Got '"+n+"'"},22:function(n){return "'current' expects a draft, got: "+n},23:function(n){return "'original' expects a draft, got: "+n},24:"Patching reserved attributes like __proto__, prototype and constructor is not allowed"},Z=""+Object.prototype.constructor,nn="undefined"!=typeof Reflect&&Reflect.ownKeys?Reflect.ownKeys:void 0!==Object.getOwnPropertySymbols?function(n){return Object.getOwnPropertyNames(n).concat(Object.getOwnPropertySymbols(n))}:Object.getOwnPropertyNames,rn=Object.getOwnPropertyDescriptors||function(n){var r={};return nn(n).forEach((function(t){r[t]=Object.getOwnPropertyDescriptor(n,t);})),r},tn={},en={get:function(n,r){if(r===Q)return n;var e=p$3(n);if(!u$1(e,r))return function(n,r,t){var e,i=I$1(r,t);return i?"value"in i?i.value:null===(e=i.get)||void 0===e?void 0:e.call(n.k):void 0}(n,e,r);var i=e[r];return n.I||!t$2(i)?i:i===z$3(n.t,r)?(E$1(n),n.o[r]=R(n.A.h,i,n)):i},has:function(n,r){return r in p$3(n)},ownKeys:function(n){return Reflect.ownKeys(p$3(n))},set:function(n,r,t){var e=I$1(p$3(n),r);if(null==e?void 0:e.set)return e.set.call(n.k,t),!0;if(!n.P){var i=z$3(p$3(n),r),o=null==i?void 0:i[Q];if(o&&o.t===t)return n.o[r]=t,n.D[r]=!1,!0;if(c$3(t,i)&&(void 0!==t||u$1(n.t,r)))return !0;E$1(n),k$3(n);}return n.o[r]===t&&"number"!=typeof t&&(void 0!==t||r in n.o)||(n.o[r]=t,n.D[r]=!0,!0)},deleteProperty:function(n,r){return void 0!==z$3(n.t,r)||r in n.t?(n.D[r]=!1,E$1(n),k$3(n)):delete n.D[r],n.o&&delete n.o[r],!0},getOwnPropertyDescriptor:function(n,r){var t=p$3(n),e=Reflect.getOwnPropertyDescriptor(t,r);return e?{writable:!0,configurable:1!==n.i||"length"!==r,enumerable:e.enumerable,value:t[r]}:e},defineProperty:function(){n$3(11);},getPrototypeOf:function(n){return Object.getPrototypeOf(n.t)},setPrototypeOf:function(){n$3(12);}},on={};i(en,(function(n,r){on[n]=function(){return arguments[0]=arguments[0][0],r.apply(this,arguments)};})),on.deleteProperty=function(r,t){return "production"!==process.env.NODE_ENV&&isNaN(parseInt(t))&&n$3(13),on.set.call(this,r,t,void 0)},on.set=function(r,t,e){return "production"!==process.env.NODE_ENV&&"length"!==t&&isNaN(parseInt(t))&&n$3(14),en.set.call(this,r[0],t,e,r[0])};var un=function(){function e(r){var e=this;this.g=B$1,this.F=!0,this.produce=function(r,i,o){if("function"==typeof r&&"function"!=typeof i){var u=i;i=r;var a=e;return function(n){var r=this;void 0===n&&(n=u);for(var t=arguments.length,e=Array(t>1?t-1:0),o=1;o<t;o++)e[o-1]=arguments[o];return a.produce(n,(function(n){var t;return (t=i).call.apply(t,[r,n].concat(e))}))}}var f;if("function"!=typeof i&&n$3(6),void 0!==o&&"function"!=typeof o&&n$3(7),t$2(r)){var c=w$3(e),s=R(e,r,void 0),v=!0;try{f=i(s),v=!1;}finally{v?O(c):g$3(c);}return "undefined"!=typeof Promise&&f instanceof Promise?f.then((function(n){return j(c,o),P(n,c)}),(function(n){throw O(c),n})):(j(c,o),P(f,c))}if(!r||"object"!=typeof r){if(void 0===(f=i(r))&&(f=r),f===H$1&&(f=void 0),e.F&&d$3(f,!0),o){var p=[],l=[];b$3("Patches").M(r,f,p,l),o(p,l);}return f}n$3(21,r);},this.produceWithPatches=function(n,r){if("function"==typeof n)return function(r){for(var t=arguments.length,i=Array(t>1?t-1:0),o=1;o<t;o++)i[o-1]=arguments[o];return e.produceWithPatches(r,(function(r){return n.apply(void 0,[r].concat(i))}))};var t,i,o=e.produce(n,r,(function(n,r){t=n,i=r;}));return "undefined"!=typeof Promise&&o instanceof Promise?o.then((function(n){return [n,t,i]})):[o,t,i]},"boolean"==typeof(null==r?void 0:r.useProxies)&&this.setUseProxies(r.useProxies),"boolean"==typeof(null==r?void 0:r.autoFreeze)&&this.setAutoFreeze(r.autoFreeze);}var i=e.prototype;return i.createDraft=function(e){t$2(e)||n$3(8),r$3(e)&&(e=D$1(e));var i=w$3(this),o=R(this,e,void 0);return o[Q].C=!0,g$3(i),o},i.finishDraft=function(r,t){var e=r&&r[Q];"production"!==process.env.NODE_ENV&&(e&&e.C||n$3(9),e.I&&n$3(10));var i=e.A;return j(i,t),P(void 0,i)},i.setAutoFreeze=function(n){this.F=n;},i.setUseProxies=function(r){r&&!B$1&&n$3(20),this.g=r;},i.applyPatches=function(n,t){var e;for(e=t.length-1;e>=0;e--){var i=t[e];if(0===i.path.length&&"replace"===i.op){n=i.value;break}}e>-1&&(t=t.slice(e+1));var o=b$3("Patches").$;return r$3(n)?o(n,t):this.produce(n,(function(n){return o(n,t)}))},e}(),an=new un,fn=an.produce;an.produceWithPatches.bind(an);an.setAutoFreeze.bind(an);an.setUseProxies.bind(an);an.applyPatches.bind(an);an.createDraft.bind(an);an.finishDraft.bind(an);var produce = fn;
-var pathConverter = function (path) { return path.replace(/\./g, SEPARATOR); };
-var errorConverter = function (errors) {
-    var res = {};
+const pathConverter = (path) => path.replace(/\./g, SEPARATOR);
+const errorConverter = (errors) => {
+    const res = {};
     if (errors) {
-        errors.forEach(function (i) {
+        errors.forEach((i) => {
             if (i.keyword === 'required') {
-                jsonpointer.set(res, "".concat(pathConverter("".concat(i.instancePath, ".").concat(i.params.missingProperty)), "/-"), i.message);
+                jsonpointer.set(res, `${pathConverter(`${i.instancePath}.${i.params.missingProperty}`)}/-`, i.message);
             }
             else {
-                jsonpointer.set(res, "".concat(pathConverter(i.instancePath), "/-"), i.message);
+                jsonpointer.set(res, `${pathConverter(i.instancePath)}/-`, i.message);
             }
         });
     }
     return res;
 };
-var validateJSON = function (schema, store, data) {
-    var ajv = new Ajv({ allErrors: true });
-    var validate = ajv.compile(schema);
-    var valid = validate(data);
+const validateJSON = (schema, store, data) => {
+    const ajv = new Ajv({ allErrors: true });
+    const validate = ajv.compile(schema);
+    const valid = validate(data);
     return {
-        store: "".concat(store).concat(STORE_ERROR_POSTFIX),
-        valid: valid,
+        store: `${store}${STORE_ERROR_POSTFIX}`,
+        valid,
         value: valid ? null : errorConverter(validate.errors),
     };
-};var initialState$1 = {};
-var validateNewState = function (stock, newState, actionStore, actionPath) {
+};const initialState$1 = {};
+const validateNewState = (stock, newState, actionStore, actionPath) => {
     if (stock === null || stock === void 0 ? void 0 : stock.validations) {
-        stock.validations.forEach(function (validateItem) {
-            if (validateItem.store === actionStore && "".concat(actionPath).startsWith(validateItem.path)) {
+        stock.validations.forEach((validateItem) => {
+            if (validateItem.store === actionStore && `${actionPath}`.startsWith(validateItem.path)) {
                 if (validateItem.schema) {
-                    var stateToBeValidated = jsonPointerGet(newState, "".concat(SEPARATOR).concat(actionStore).concat(validateItem.path));
-                    var errors = validateJSON(validateItem.schema, actionStore, stateToBeValidated);
+                    const stateToBeValidated = jsonPointerGet(newState, `${SEPARATOR}${actionStore}${validateItem.path}`);
+                    const errors = validateJSON(validateItem.schema, actionStore, stateToBeValidated);
                     // console.log('matched validator', `${c.SEPARATOR}${errors.store}${validateItem.path}`, errors)
                     // eslint-disable-next-line no-param-reassign
-                    newState = jsonPointerSet(newState, "".concat(SEPARATOR).concat(errors.store).concat(validateItem.path), errors.value);
+                    newState = jsonPointerSet(newState, `${SEPARATOR}${errors.store}${validateItem.path}`, errors.value);
                 }
             }
         });
     }
 };
-var reducer = function (state, action) {
-    if (state === void 0) { state = initialState$1; }
+const reducer = (state = initialState$1, action) => {
     switch (action === null || action === void 0 ? void 0 : action.type) {
         case DATA_UPDATE: {
-            var _a = (action === null || action === void 0 ? void 0 : action.payload) || {}, _b = _a.store, store_1 = _b === void 0 ? undefined : _b, _c = _a.path, path = _c === void 0 ? undefined : _c, _d = _a.value, value_1 = _d === void 0 ? undefined : _d, _e = _a.jsonataDef, jsonataDef_1 = _e === void 0 ? undefined : _e, _f = _a.currentPaths, currentPaths = _f === void 0 ? undefined : _f, _g = _a.stock, stock_1 = _g === void 0 ? undefined : _g;
-            if (store_1 && path && !isCircular(value_1)) {
-                var storekey = "".concat(store_1);
-                var convertedPath_1 = currentPaths && currentPaths[storekey] && currentPaths[storekey].path
-                    ? changeRelativePath("".concat(currentPaths[storekey].path).concat(SEPARATOR).concat(path))
+            const { store = undefined, path = undefined, value = undefined, jsonataDef = undefined, [CURRENT_PATH_NAME]: currentPaths = undefined, stock = undefined, } = (action === null || action === void 0 ? void 0 : action.payload) || {};
+            if (store && path && !isCircular(value)) {
+                const storekey = `${store}`;
+                let convertedPath = currentPaths && currentPaths[storekey] && currentPaths[storekey].path
+                    ? changeRelativePath(`${currentPaths[storekey].path}${SEPARATOR}${path}`)
                     : changeRelativePath(path);
-                convertedPath_1 = convertedPath_1.startsWith(SEPARATOR) ? convertedPath_1 : "".concat(SEPARATOR).concat(convertedPath_1);
-                var absolutePathWithStoreKey_1 = "".concat(SEPARATOR).concat(storekey).concat(convertedPath_1);
-                var newState = produce(state, function (draft) {
-                    if (jsonataDef_1) {
+                convertedPath = convertedPath.startsWith(SEPARATOR) ? convertedPath : `${SEPARATOR}${convertedPath}`;
+                const absolutePathWithStoreKey = `${SEPARATOR}${storekey}${convertedPath}`;
+                const newState = produce(state, (draft) => {
+                    if (jsonataDef) {
                         try {
                             // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-                            var jsonata = require('jsonata');
-                            var expression = jsonata(jsonataDef_1);
-                            var newValue = expression.evaluate(value_1);
+                            const jsonata = require('jsonata');
+                            const expression = jsonata(jsonataDef);
+                            const newValue = expression.evaluate(value);
                             // eslint-disable-next-line no-param-reassign
-                            draft = jsonPointerSet(draft, absolutePathWithStoreKey_1, newValue);
+                            draft = jsonPointerSet(draft, absolutePathWithStoreKey, newValue);
                         }
                         catch (error) {
                             // eslint-disable-next-line no-console
-                            console.error('jsonata error', error, jsonataDef_1);
+                            console.error('jsonata error', error, jsonataDef);
                             // eslint-disable-next-line no-param-reassign
-                            draft = jsonPointerSet(draft, absolutePathWithStoreKey_1, value_1);
+                            draft = jsonPointerSet(draft, absolutePathWithStoreKey, value);
                         }
                     }
                     else {
                         // eslint-disable-next-line no-param-reassign
-                        draft = jsonPointerSet(draft, absolutePathWithStoreKey_1, value_1);
+                        draft = jsonPointerSet(draft, absolutePathWithStoreKey, value);
                     }
                     // if validatior has match, need to validate it synchronously
-                    validateNewState(stock_1, draft, store_1, convertedPath_1);
+                    validateNewState(stock, draft, store, convertedPath);
                 });
                 return newState;
             }
@@ -15969,19 +15895,11 @@ var reducer = function (state, action) {
         default:
             return state;
     }
-};var rootReducer = combineReducers({ root: reducer });var deletePersistDataStore = function (attr, props, callerArgs, stock) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                stock.reduxStore.dispatch(purge(null));
-                return [4 /*yield*/, stock.callFunction('reloadApp', {})];
-            case 1:
-                _a.sent();
-                return [2 /*return*/];
-        }
-    });
-}); };
-var appRootFunctions = { deletePersistDataStore: deletePersistDataStore };
+};const rootReducer = combineReducers({ root: reducer });const deletePersistDataStore = (attr, props, callerArgs, stock) => __awaiter(void 0, void 0, void 0, function* () {
+    stock.reduxStore.dispatch(purge(null));
+    yield stock.callFunction('reloadApp', {});
+});
+const appRootFunctions = { deletePersistDataStore };
 
 /**
  * A faster alternative to `Function#apply`, this function invokes `func`
@@ -16427,7 +16345,7 @@ var _getNative = getNative$3;
 
 var getNative$2 = _getNative;
 
-var defineProperty$3 = (function() {
+var defineProperty$2 = (function() {
   try {
     var func = getNative$2(Object, 'defineProperty');
     func({}, '', {});
@@ -16435,10 +16353,10 @@ var defineProperty$3 = (function() {
   } catch (e) {}
 }());
 
-var _defineProperty$4 = defineProperty$3;
+var _defineProperty$4 = defineProperty$2;
 
 var constant = constant_1,
-    defineProperty$2 = _defineProperty$4,
+    defineProperty$1 = _defineProperty$4,
     identity$1 = identity_1;
 
 /**
@@ -16449,8 +16367,8 @@ var constant = constant_1,
  * @param {Function} string The `toString` result.
  * @returns {Function} Returns `func`.
  */
-var baseSetToString$1 = !defineProperty$2 ? identity$1 : function(func, string) {
-  return defineProperty$2(func, 'toString', {
+var baseSetToString$1 = !defineProperty$1 ? identity$1 : function(func, string) {
+  return defineProperty$1(func, 'toString', {
     'configurable': true,
     'enumerable': false,
     'value': constant(string),
@@ -17201,7 +17119,7 @@ Stack$1.prototype.set = stackSet;
 
 var _Stack = Stack$1;
 
-var defineProperty$1 = _defineProperty$4;
+var defineProperty = _defineProperty$4;
 
 /**
  * The base implementation of `assignValue` and `assignMergeValue` without
@@ -17213,8 +17131,8 @@ var defineProperty$1 = _defineProperty$4;
  * @param {*} value The value to assign.
  */
 function baseAssignValue$3(object, key, value) {
-  if (key == '__proto__' && defineProperty$1) {
-    defineProperty$1(object, key, {
+  if (key == '__proto__' && defineProperty) {
+    defineProperty(object, key, {
       'configurable': true,
       'enumerable': true,
       'value': value,
@@ -17820,7 +17738,7 @@ var objectCtorString = funcToString.call(Object);
  * _.isPlainObject(Object.create(null));
  * // => true
  */
-function isPlainObject$3(value) {
+function isPlainObject$2(value) {
   if (!isObjectLike$1(value) || baseGetTag$1(value) != objectTag$1) {
     return false;
   }
@@ -17833,7 +17751,7 @@ function isPlainObject$3(value) {
     funcToString.call(Ctor) == objectCtorString;
 }
 
-var isPlainObject_1 = isPlainObject$3;
+var isPlainObject_1 = isPlainObject$2;
 
 var baseGetTag = _baseGetTag,
     isLength = isLength_1,
@@ -18300,7 +18218,7 @@ var assignMergeValue$1 = _assignMergeValue,
     isBuffer = isBuffer$2.exports,
     isFunction = isFunction_1,
     isObject$3 = isObject_1,
-    isPlainObject$2 = isPlainObject_1,
+    isPlainObject$1 = isPlainObject_1,
     isTypedArray = isTypedArray_1,
     safeGet$1 = _safeGet,
     toPlainObject = toPlainObject_1;
@@ -18360,7 +18278,7 @@ function baseMergeDeep$1(object, source, key, srcIndex, mergeFunc, customizer, s
         newValue = [];
       }
     }
-    else if (isPlainObject$2(srcValue) || isArguments(srcValue)) {
+    else if (isPlainObject$1(srcValue) || isArguments(srcValue)) {
       newValue = objValue;
       if (isArguments(objValue)) {
         newValue = toPlainObject(objValue);
@@ -18596,31 +18514,33 @@ var defaultsDeep = baseRest(function(args) {
 
 var defaultsDeep_1 = defaultsDeep;
 
-function Text(props) {
-    return jsxRuntime$1.exports.jsx("p", __assign$1({}, props, { children: props.value || props.children }), void 0);
+function Text(_a) {
+    var { value } = _a, _b = constants.V_CHILDREN_NAME, children = _a[_b], props = __rest$1(_a, ["value", typeof _b === "symbol" ? _b : _b + ""]);
+    const stock = useContext(StockContext);
+    return jsxRuntime$1.exports.jsx("p", Object.assign({}, props, { children: wrapperUtil.generateNewChildren(value || children, stock) }), void 0);
 }
 
 function Button(props) {
     // eslint-disable-next-line react/button-has-type
-    return jsxRuntime$1.exports.jsx("button", __assign$1({}, props), void 0);
+    return jsxRuntime$1.exports.jsx("button", Object.assign({}, props), void 0);
 }
 
 function Edit(props) {
-    var handleChange = function (event) {
+    const handleChange = (event) => {
         props === null || props === void 0 ? void 0 : props.onChange(event.target.value);
     };
-    var fieldErrors = props.fieldErrors, validation = props.validation, value = props.value, label = props.label, origHelpertext = props.helperText; props.onChange; var ownProps = __rest$1(props, ["fieldErrors", "validation", "value", "label", "helperText", "onChange"]);
-    var error = !!fieldErrors;
-    var helperText = origHelpertext;
+    const { fieldErrors, validation, value, label, helperText: origHelpertext, onChange } = props, ownProps = __rest$1(props, ["fieldErrors", "validation", "value", "label", "helperText", "onChange"]);
+    let error = !!fieldErrors;
+    let helperText = origHelpertext;
     if (error && fieldErrors) {
         helperText = fieldErrors && Array.isArray(fieldErrors) ? fieldErrors.join(', ') : fieldErrors;
     }
     if (validation && value && validation.jsonataDef) {
-        var isValid = true;
+        let isValid = true;
         try {
             // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
-            var jsonata = require('jsonata');
-            var expression = jsonata(validation.jsonataDef);
+            const jsonata = require('jsonata');
+            const expression = jsonata(validation.jsonataDef);
             isValid = expression.evaluate(value);
         }
         catch (err) {
@@ -18633,19 +18553,21 @@ function Edit(props) {
             helperText = validation.fieldErrors && Array.isArray(validation.fieldErrors) ? validation.fieldErrors.join(', ') : validation.fieldErrors;
         }
     }
-    return (jsxRuntime$1.exports.jsxs(jsxRuntime$1.exports.Fragment, { children: [jsxRuntime$1.exports.jsx("p", __assign$1({ style: { fontSize: 20, color: error ? 'red' : undefined } }, { children: label }), void 0), jsxRuntime$1.exports.jsx("input", __assign$1({}, ownProps, { value: value || '', onChange: handleChange }), void 0), jsxRuntime$1.exports.jsx("p", __assign$1({ style: { fontSize: 10, color: error ? 'red' : undefined } }, { children: helperText }), void 0)] }, void 0));
+    return (jsxRuntime$1.exports.jsxs(jsxRuntime$1.exports.Fragment, { children: [jsxRuntime$1.exports.jsx("p", Object.assign({ style: { fontSize: 20, color: error ? 'red' : undefined } }, { children: label }), void 0), jsxRuntime$1.exports.jsx("input", Object.assign({}, ownProps, { value: value || '', onChange: handleChange }), void 0), jsxRuntime$1.exports.jsx("p", Object.assign({ style: { fontSize: 10, color: error ? 'red' : undefined } }, { children: helperText }), void 0)] }, void 0));
 }
 
-function View(props) {
-    return jsxRuntime$1.exports.jsx("div", __assign$1({}, props, { style: undefined }), void 0);
+function View(_a) {
+    var _b = constants.V_CHILDREN_NAME, children = _a[_b], props = __rest$1(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+    const stock = useContext(StockContext);
+    return jsxRuntime$1.exports.jsx("div", Object.assign({}, props, { children: wrapperUtil.generateNewChildren(children, stock) }), void 0);
 }
 
 function Image(props) {
-    var src = props.src;
-    return jsxRuntime$1.exports.jsx("img", __assign$1({ alt: "" }, props, { src: src && src.uri ? src.uri : src }), void 0);
+    const { src } = props;
+    return jsxRuntime$1.exports.jsx("img", Object.assign({ alt: "" }, props, { src: src && src.uri ? src.uri : src }), void 0);
 }
 
-var styles = {
+const styles = {
     label: {
         backgroundColor: '#ffffaa',
         borderColor: '#666666',
@@ -18666,45 +18588,41 @@ var styles = {
         display: 'block',
     },
 };
-var getName = function (props) {
+const getName = (props) => {
     if (props && props[constants.V_COMP_NAME]) {
         return props[constants.V_COMP_NAME];
     }
     return 'Unknown';
 };
-var getLabel = function (props) { return (jsxRuntime$1.exports.jsx("span", __assign$1({ style: styles.labelCont }, { children: jsxRuntime$1.exports.jsx("span", __assign$1({ style: styles.label }, { children: getName(props) }), void 0) }), void 0)); };
-/** @class */ ((function (_super) {
-    __extends(InfoBox, _super);
-    function InfoBox(props) {
-        var _this = _super.call(this, props) || this;
-        _this.counter = 0;
-        _this.counter = 1;
-        return _this;
-    }
-    InfoBox.prototype.componentDidMount = function () {
+const getLabel = (props) => (jsxRuntime$1.exports.jsx("span", Object.assign({ style: styles.labelCont }, { children: jsxRuntime$1.exports.jsx("span", Object.assign({ style: styles.label }, { children: getName(props) }), void 0) }), void 0));
+class InfoBox extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        this.counter = 0;
+        this.counter = 1;
+    }
+    componentDidMount() {
         this.counter += 1;
-    };
-    InfoBox.prototype.componentDidUpdate = function () {
+    }
+    componentDidUpdate() {
         this.counter += 1;
-    };
-    InfoBox.prototype.render = function () {
-        var id = this.props.id;
-        var filter = this.props.filter;
-        var component = this.props[constants.V_COMP_NAME];
+    }
+    render() {
+        const { id } = this.props;
+        const { filter } = this.props;
+        const component = this.props[constants.V_COMP_NAME];
         if (!component || component === '_PrimitiveProp') {
             return null;
         }
         if (filter && Array.isArray(filter) && Object.keys(filter).length !== 0 && !filter.includes(id)) {
             return null;
         }
-        // const { children, stock, parentComp, ...newProps } = this.props
-        return (jsxRuntime$1.exports.jsx("span", __assign$1({ style: styles.labelCont }, { children: jsxRuntime$1.exports.jsxs("span", __assign$1({ style: styles.label }, { children: ["rendered: ", this.counter] }), void 0) }), void 0));
-    };
-    return InfoBox;
-})(React.PureComponent));
+        return (jsxRuntime$1.exports.jsx("span", Object.assign({ style: styles.labelCont }, { children: jsxRuntime$1.exports.jsxs("span", Object.assign({ style: styles.label }, { children: ["rendered: ", this.counter] }), void 0) }), void 0));
+    }
+}
 
 function Undefined(props) {
-    return (jsxRuntime$1.exports.jsx("p", __assign$1({ style: {
+    return (jsxRuntime$1.exports.jsx("p", Object.assign({ style: {
             flex: 1,
             minWidth: 100,
             minHeight: 20,
@@ -18714,34 +18632,34 @@ function Undefined(props) {
         } }, { children: getLabel(props) }), void 0));
 }
 
-function PrimitiveProp(_a) {
-    var children = _a.children;
+function PrimitiveProp({ [constants.V_CHILDREN_NAME]: children }) {
     return jsxRuntime$1.exports.jsx("span", { children: !constants.SIMPLE_DATA_TYPES.includes(typeof children) || typeof children === 'boolean' ? JSON.stringify(children) : children }, void 0);
 }
 
-var Fragment = function (_a) {
-    var children = _a.children;
-    return children;
+const Fragment = (_a) => {
+    var _b = constants.V_CHILDREN_NAME, props = _a[_b]; __rest$1(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+    const stock = useContext(StockContext);
+    return jsxRuntime$1.exports.jsx(jsxRuntime$1.exports.Fragment, { children: wrapperUtil.generateNewChildren(props, stock) }, void 0);
 };
 
-var Components = {
-    View: View,
+const Components = {
+    View,
     _PrimitiveProp: PrimitiveProp,
     _Undefined: Undefined,
-    Fragment: Fragment,
-    Image: Image,
-    Text: Text,
-    Button: Button,
-    Edit: Edit,
+    Fragment,
+    Image,
+    Text,
+    Button,
+    Edit,
 };
 
 // eslint-disable-next-line import/prefer-default-export
-var getStock = function (stockInit, model, Wrapper, reduxStore) {
-    var stock = new Stock(defaultsDeep_1(stockInit, {
+const getStock = (stockInit, model, Wrapper, reduxStore) => {
+    const stock = new Stock(defaultsDeep_1(stockInit, {
         components: Components,
-        functions: functions,
+        functions,
     }), Wrapper, reduxStore);
-    var i18n = new I18n({
+    const i18n = new I18n({
         language: (navigator.languages && navigator.languages[0]) || // Chrome / Firefox
             navigator.language || // All browsers
             navigator.userLanguage,
@@ -18749,18 +18667,18 @@ var getStock = function (stockInit, model, Wrapper, reduxStore) {
     });
     // get Validations
     stock.validations = util$1.collectObjToArray(constants.REF_VALIDATES, model);
-    stock.registerFunction('t', function (p) { return i18n.t(p.keys, p.options); });
-    stock.registerFunction('test', function () { return 'Test is ok'; });
+    stock.registerFunction('t', (p) => i18n.t(p.keys, p.options));
+    stock.registerFunction('test', () => 'Test is ok');
     return stock;
 };
-var stock = {
+const stock = {
     components: Components,
-    functions: functions,
+    functions,
 };
 
 var propTypes = {exports: {}};
 
-var reactIs$3 = {exports: {}};
+var reactIs$2 = {exports: {}};
 
 var reactIs_production_min$2 = {};
 
@@ -18961,9 +18879,9 @@ reactIs_development$2.typeOf = typeOf;
 }
 
 if (process.env.NODE_ENV === 'production') {
-  reactIs$3.exports = reactIs_production_min$2;
+  reactIs$2.exports = reactIs_production_min$2;
 } else {
-  reactIs$3.exports = reactIs_development$2;
+  reactIs$2.exports = reactIs_development$2;
 }
 
 /**
@@ -19088,7 +19006,7 @@ var checkPropTypes_1 = checkPropTypes$1;
  * LICENSE file in the root directory of this source tree.
  */
 
-var ReactIs$1 = reactIs$3.exports;
+var ReactIs$1 = reactIs$2.exports;
 var assign$1 = objectAssign$1;
 
 var ReactPropTypesSecret$1 = ReactPropTypesSecret_1;
@@ -19760,7 +19678,7 @@ var factoryWithThrowingShims = function() {
  */
 
 if (process.env.NODE_ENV !== 'production') {
-  var ReactIs = reactIs$3.exports;
+  var ReactIs = reactIs$2.exports;
 
   // By explicitly using `prop-types` you are opting into new development behavior.
   // http://fb.me/prop-types-in-prod
@@ -19977,40 +19895,7 @@ if (process.env.NODE_ENV !== 'production') {
   };
 }
 
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-var reactIs$2 = {exports: {}};
+var reactIs$1 = {exports: {}};
 
 var reactIs_production_min$1 = {};
 
@@ -20211,39 +20096,12 @@ reactIs_development$1.typeOf = typeOf;
 }
 
 if (process.env.NODE_ENV === 'production') {
-  reactIs$2.exports = reactIs_production_min$1;
+  reactIs$1.exports = reactIs_production_min$1;
 } else {
-  reactIs$2.exports = reactIs_development$1;
+  reactIs$1.exports = reactIs_development$1;
 }
 
-var reactIs$1 = reactIs$2.exports;
-
-/**
- * Copyright 2015, Yahoo! Inc.
- * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms.
- */
-var REACT_STATICS = {
-  childContextTypes: true,
-  contextType: true,
-  contextTypes: true,
-  defaultProps: true,
-  displayName: true,
-  getDefaultProps: true,
-  getDerivedStateFromError: true,
-  getDerivedStateFromProps: true,
-  mixins: true,
-  propTypes: true,
-  type: true
-};
-var KNOWN_STATICS = {
-  name: true,
-  length: true,
-  prototype: true,
-  caller: true,
-  callee: true,
-  arguments: true,
-  arity: true
-};
+var reactIs = reactIs$1.exports;
 var FORWARD_REF_STATICS = {
   '$$typeof': true,
   render: true,
@@ -20260,65 +20118,8 @@ var MEMO_STATICS = {
   type: true
 };
 var TYPE_STATICS = {};
-TYPE_STATICS[reactIs$1.ForwardRef] = FORWARD_REF_STATICS;
-TYPE_STATICS[reactIs$1.Memo] = MEMO_STATICS;
-
-function getStatics(component) {
-  // React v16.11 and below
-  if (reactIs$1.isMemo(component)) {
-    return MEMO_STATICS;
-  } // React v16.12 and above
-
-
-  return TYPE_STATICS[component['$$typeof']] || REACT_STATICS;
-}
-
-var defineProperty = Object.defineProperty;
-var getOwnPropertyNames = Object.getOwnPropertyNames;
-var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
-var getPrototypeOf = Object.getPrototypeOf;
-var objectPrototype = Object.prototype;
-function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) {
-  if (typeof sourceComponent !== 'string') {
-    // don't hoist over string (html) components
-    if (objectPrototype) {
-      var inheritedComponent = getPrototypeOf(sourceComponent);
-
-      if (inheritedComponent && inheritedComponent !== objectPrototype) {
-        hoistNonReactStatics(targetComponent, inheritedComponent, blacklist);
-      }
-    }
-
-    var keys = getOwnPropertyNames(sourceComponent);
-
-    if (getOwnPropertySymbols) {
-      keys = keys.concat(getOwnPropertySymbols(sourceComponent));
-    }
-
-    var targetStatics = getStatics(targetComponent);
-    var sourceStatics = getStatics(sourceComponent);
-
-    for (var i = 0; i < keys.length; ++i) {
-      var key = keys[i];
-
-      if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) {
-        var descriptor = getOwnPropertyDescriptor(sourceComponent, key);
-
-        try {
-          // Avoid failures from read-only properties
-          defineProperty(targetComponent, key, descriptor);
-        } catch (e) {}
-      }
-    }
-  }
-
-  return targetComponent;
-}
-
-var hoistNonReactStatics_cjs = hoistNonReactStatics;
-
-var reactIs = {exports: {}};
+TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS;
+TYPE_STATICS[reactIs.Memo] = MEMO_STATICS;
 
 var reactIs_production_min = {};
 
@@ -20560,400 +20361,26 @@ reactIs_development.typeOf = typeOf;
   })();
 }
 
-if (process.env.NODE_ENV === 'production') {
-  reactIs.exports = reactIs_production_min;
-} else {
-  reactIs.exports = reactIs_development;
-}
-
-var _excluded$2 = ["getDisplayName", "methodName", "renderCountProp", "shouldHandleStateChanges", "storeKey", "withRef", "forwardRef", "context"],
-    _excluded2 = ["reactReduxForwardedRef"];
-
-var EMPTY_ARRAY = [];
-var NO_SUBSCRIPTION_ARRAY = [null, null];
+if (process.env.NODE_ENV === 'production') ;
 
-var stringifyComponent = function stringifyComponent(Comp) {
-  try {
-    return JSON.stringify(Comp);
-  } catch (err) {
-    return String(Comp);
+function is(x, y) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
   }
-};
-
-function storeStateUpdatesReducer(state, action) {
-  var updateCount = state[1];
-  return [action.payload, updateCount + 1];
-}
-
-function useIsomorphicLayoutEffectWithArgs(effectFunc, effectArgs, dependencies) {
-  useIsomorphicLayoutEffect(function () {
-    return effectFunc.apply(void 0, effectArgs);
-  }, dependencies);
 }
 
-function captureWrapperProps(lastWrapperProps, lastChildProps, renderIsScheduled, wrapperProps, actualChildProps, childPropsFromStoreUpdate, notifyNestedSubs) {
-  // We want to capture the wrapper props and child props we used for later comparisons
-  lastWrapperProps.current = wrapperProps;
-  lastChildProps.current = actualChildProps;
-  renderIsScheduled.current = false; // If the render was from a store update, clear out that reference and cascade the subscriber update
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) return true;
 
-  if (childPropsFromStoreUpdate.current) {
-    childPropsFromStoreUpdate.current = null;
-    notifyNestedSubs();
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
   }
-}
-
-function subscribeUpdates(shouldHandleStateChanges, store, subscription, childPropsSelector, lastWrapperProps, lastChildProps, renderIsScheduled, childPropsFromStoreUpdate, notifyNestedSubs, forceComponentUpdateDispatch) {
-  // If we're not subscribed to the store, nothing to do here
-  if (!shouldHandleStateChanges) return; // Capture values for checking if and when this component unmounts
 
-  var didUnsubscribe = false;
-  var lastThrownError = null; // We'll run this callback every time a store subscription update propagates to this component
-
-  var checkForUpdates = function checkForUpdates() {
-    if (didUnsubscribe) {
-      // Don't run stale listeners.
-      // Redux doesn't guarantee unsubscriptions happen until next dispatch.
-      return;
-    }
-
-    var latestStoreState = store.getState();
-    var newChildProps, error;
-
-    try {
-      // Actually run the selector with the most recent store state and wrapper props
-      // to determine what the child props should be
-      newChildProps = childPropsSelector(latestStoreState, lastWrapperProps.current);
-    } catch (e) {
-      error = e;
-      lastThrownError = e;
-    }
-
-    if (!error) {
-      lastThrownError = null;
-    } // If the child props haven't changed, nothing to do here - cascade the subscription update
-
-
-    if (newChildProps === lastChildProps.current) {
-      if (!renderIsScheduled.current) {
-        notifyNestedSubs();
-      }
-    } else {
-      // Save references to the new child props.  Note that we track the "child props from store update"
-      // as a ref instead of a useState/useReducer because we need a way to determine if that value has
-      // been processed.  If this went into useState/useReducer, we couldn't clear out the value without
-      // forcing another re-render, which we don't want.
-      lastChildProps.current = newChildProps;
-      childPropsFromStoreUpdate.current = newChildProps;
-      renderIsScheduled.current = true; // If the child props _did_ change (or we caught an error), this wrapper component needs to re-render
-
-      forceComponentUpdateDispatch({
-        type: 'STORE_UPDATED',
-        payload: {
-          error: error
-        }
-      });
-    }
-  }; // Actually subscribe to the nearest connected ancestor (or store)
-
-
-  subscription.onStateChange = checkForUpdates;
-  subscription.trySubscribe(); // Pull data from the store after first render in case the store has
-  // changed since we began.
-
-  checkForUpdates();
-
-  var unsubscribeWrapper = function unsubscribeWrapper() {
-    didUnsubscribe = true;
-    subscription.tryUnsubscribe();
-    subscription.onStateChange = null;
-
-    if (lastThrownError) {
-      // It's possible that we caught an error due to a bad mapState function, but the
-      // parent re-rendered without this component and we're about to unmount.
-      // This shouldn't happen as long as we do top-down subscriptions correctly, but
-      // if we ever do those wrong, this throw will surface the error in our tests.
-      // In that case, throw the error from here so it doesn't get lost.
-      throw lastThrownError;
-    }
-  };
-
-  return unsubscribeWrapper;
-}
-
-var initStateUpdates = function initStateUpdates() {
-  return [null, 0];
-};
-
-function connectAdvanced(
-/*
-  selectorFactory is a func that is responsible for returning the selector function used to
-  compute new props from state, props, and dispatch. For example:
-     export default connectAdvanced((dispatch, options) => (state, props) => ({
-      thing: state.things[props.thingId],
-      saveThing: fields => dispatch(actionCreators.saveThing(props.thingId, fields)),
-    }))(YourComponent)
-   Access to dispatch is provided to the factory so selectorFactories can bind actionCreators
-  outside of their selector as an optimization. Options passed to connectAdvanced are passed to
-  the selectorFactory, along with displayName and WrappedComponent, as the second argument.
-   Note that selectorFactory is responsible for all caching/memoization of inbound and outbound
-  props. Do not use connectAdvanced directly without memoizing results between calls to your
-  selector, otherwise the Connect component will re-render on every state or props change.
-*/
-selectorFactory, // options object:
-_ref) {
-  if (_ref === void 0) {
-    _ref = {};
-  }
-
-  var _ref2 = _ref,
-      _ref2$getDisplayName = _ref2.getDisplayName,
-      getDisplayName = _ref2$getDisplayName === void 0 ? function (name) {
-    return "ConnectAdvanced(" + name + ")";
-  } : _ref2$getDisplayName,
-      _ref2$methodName = _ref2.methodName,
-      methodName = _ref2$methodName === void 0 ? 'connectAdvanced' : _ref2$methodName,
-      _ref2$renderCountProp = _ref2.renderCountProp,
-      renderCountProp = _ref2$renderCountProp === void 0 ? undefined : _ref2$renderCountProp,
-      _ref2$shouldHandleSta = _ref2.shouldHandleStateChanges,
-      shouldHandleStateChanges = _ref2$shouldHandleSta === void 0 ? true : _ref2$shouldHandleSta,
-      _ref2$storeKey = _ref2.storeKey,
-      storeKey = _ref2$storeKey === void 0 ? 'store' : _ref2$storeKey,
-      _ref2$withRef = _ref2.withRef,
-      withRef = _ref2$withRef === void 0 ? false : _ref2$withRef,
-      _ref2$forwardRef = _ref2.forwardRef,
-      forwardRef = _ref2$forwardRef === void 0 ? false : _ref2$forwardRef,
-      _ref2$context = _ref2.context,
-      context = _ref2$context === void 0 ? ReactReduxContext : _ref2$context,
-      connectOptions = _objectWithoutPropertiesLoose$1(_ref2, _excluded$2);
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (renderCountProp !== undefined) {
-      throw new Error("renderCountProp is removed. render counting is built into the latest React Dev Tools profiling extension");
-    }
-
-    if (withRef) {
-      throw new Error('withRef is removed. To access the wrapped instance, use a ref on the connected component');
-    }
-
-    var customStoreWarningMessage = 'To use a custom Redux store for specific components, create a custom React context with ' + "React.createContext(), and pass the context object to React Redux's Provider and specific components" + ' like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. ' + 'You may also pass a {context : MyContext} option to connect';
-
-    if (storeKey !== 'store') {
-      throw new Error('storeKey has been removed and does not do anything. ' + customStoreWarningMessage);
-    }
-  }
-
-  var Context = context;
-  return function wrapWithConnect(WrappedComponent) {
-    if (process.env.NODE_ENV !== 'production' && !reactIs.exports.isValidElementType(WrappedComponent)) {
-      throw new Error("You must pass a component to the function returned by " + (methodName + ". Instead received " + stringifyComponent(WrappedComponent)));
-    }
-
-    var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
-    var displayName = getDisplayName(wrappedComponentName);
-
-    var selectorFactoryOptions = _extends({}, connectOptions, {
-      getDisplayName: getDisplayName,
-      methodName: methodName,
-      renderCountProp: renderCountProp,
-      shouldHandleStateChanges: shouldHandleStateChanges,
-      storeKey: storeKey,
-      displayName: displayName,
-      wrappedComponentName: wrappedComponentName,
-      WrappedComponent: WrappedComponent
-    });
-
-    var pure = connectOptions.pure;
-
-    function createChildSelector(store) {
-      return selectorFactory(store.dispatch, selectorFactoryOptions);
-    } // If we aren't running in "pure" mode, we don't want to memoize values.
-    // To avoid conditionally calling hooks, we fall back to a tiny wrapper
-    // that just executes the given callback immediately.
-
-
-    var usePureOnlyMemo = pure ? useMemo : function (callback) {
-      return callback();
-    };
-
-    function ConnectFunction(props) {
-      var _useMemo = useMemo(function () {
-        // Distinguish between actual "data" props that were passed to the wrapper component,
-        // and values needed to control behavior (forwarded refs, alternate context instances).
-        // To maintain the wrapperProps object reference, memoize this destructuring.
-        var reactReduxForwardedRef = props.reactReduxForwardedRef,
-            wrapperProps = _objectWithoutPropertiesLoose$1(props, _excluded2);
-
-        return [props.context, reactReduxForwardedRef, wrapperProps];
-      }, [props]),
-          propsContext = _useMemo[0],
-          reactReduxForwardedRef = _useMemo[1],
-          wrapperProps = _useMemo[2];
-
-      var ContextToUse = useMemo(function () {
-        // Users may optionally pass in a custom context instance to use instead of our ReactReduxContext.
-        // Memoize the check that determines which context instance we should use.
-        return propsContext && propsContext.Consumer && reactIs.exports.isContextConsumer( /*#__PURE__*/React.createElement(propsContext.Consumer, null)) ? propsContext : Context;
-      }, [propsContext, Context]); // Retrieve the store and ancestor subscription via context, if available
-
-      var contextValue = useContext(ContextToUse); // The store _must_ exist as either a prop or in context.
-      // We'll check to see if it _looks_ like a Redux store first.
-      // This allows us to pass through a `store` prop that is just a plain value.
-
-      var didStoreComeFromProps = Boolean(props.store) && Boolean(props.store.getState) && Boolean(props.store.dispatch);
-      var didStoreComeFromContext = Boolean(contextValue) && Boolean(contextValue.store);
-
-      if (process.env.NODE_ENV !== 'production' && !didStoreComeFromProps && !didStoreComeFromContext) {
-        throw new Error("Could not find \"store\" in the context of " + ("\"" + displayName + "\". Either wrap the root component in a <Provider>, ") + "or pass a custom React context provider to <Provider> and the corresponding " + ("React context consumer to " + displayName + " in connect options."));
-      } // Based on the previous check, one of these must be true
-
-
-      var store = didStoreComeFromProps ? props.store : contextValue.store;
-      var childPropsSelector = useMemo(function () {
-        // The child props selector needs the store reference as an input.
-        // Re-create this selector whenever the store changes.
-        return createChildSelector(store);
-      }, [store]);
-
-      var _useMemo2 = useMemo(function () {
-        if (!shouldHandleStateChanges) return NO_SUBSCRIPTION_ARRAY; // This Subscription's source should match where store came from: props vs. context. A component
-        // connected to the store via props shouldn't use subscription from context, or vice versa.
-
-        // This Subscription's source should match where store came from: props vs. context. A component
-        // connected to the store via props shouldn't use subscription from context, or vice versa.
-        var subscription = createSubscription(store, didStoreComeFromProps ? null : contextValue.subscription); // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
-        // the middle of the notification loop, where `subscription` will then be null. This can
-        // probably be avoided if Subscription's listeners logic is changed to not call listeners
-        // that have been unsubscribed in the  middle of the notification loop.
-
-        // `notifyNestedSubs` is duplicated to handle the case where the component is unmounted in
-        // the middle of the notification loop, where `subscription` will then be null. This can
-        // probably be avoided if Subscription's listeners logic is changed to not call listeners
-        // that have been unsubscribed in the  middle of the notification loop.
-        var notifyNestedSubs = subscription.notifyNestedSubs.bind(subscription);
-        return [subscription, notifyNestedSubs];
-      }, [store, didStoreComeFromProps, contextValue]),
-          subscription = _useMemo2[0],
-          notifyNestedSubs = _useMemo2[1]; // Determine what {store, subscription} value should be put into nested context, if necessary,
-      // and memoize that value to avoid unnecessary context updates.
-
-
-      var overriddenContextValue = useMemo(function () {
-        if (didStoreComeFromProps) {
-          // This component is directly subscribed to a store from props.
-          // We don't want descendants reading from this store - pass down whatever
-          // the existing context value is from the nearest connected ancestor.
-          return contextValue;
-        } // Otherwise, put this component's subscription instance into context, so that
-        // connected descendants won't update until after this component is done
-
-
-        return _extends({}, contextValue, {
-          subscription: subscription
-        });
-      }, [didStoreComeFromProps, contextValue, subscription]); // We need to force this wrapper component to re-render whenever a Redux store update
-      // causes a change to the calculated child component props (or we caught an error in mapState)
-
-      var _useReducer = useReducer(storeStateUpdatesReducer, EMPTY_ARRAY, initStateUpdates),
-          _useReducer$ = _useReducer[0],
-          previousStateUpdateResult = _useReducer$[0],
-          forceComponentUpdateDispatch = _useReducer[1]; // Propagate any mapState/mapDispatch errors upwards
-
-
-      if (previousStateUpdateResult && previousStateUpdateResult.error) {
-        throw previousStateUpdateResult.error;
-      } // Set up refs to coordinate values between the subscription effect and the render logic
-
-
-      var lastChildProps = useRef();
-      var lastWrapperProps = useRef(wrapperProps);
-      var childPropsFromStoreUpdate = useRef();
-      var renderIsScheduled = useRef(false);
-      var actualChildProps = usePureOnlyMemo(function () {
-        // Tricky logic here:
-        // - This render may have been triggered by a Redux store update that produced new child props
-        // - However, we may have gotten new wrapper props after that
-        // If we have new child props, and the same wrapper props, we know we should use the new child props as-is.
-        // But, if we have new wrapper props, those might change the child props, so we have to recalculate things.
-        // So, we'll use the child props from store update only if the wrapper props are the same as last time.
-        if (childPropsFromStoreUpdate.current && wrapperProps === lastWrapperProps.current) {
-          return childPropsFromStoreUpdate.current;
-        } // TODO We're reading the store directly in render() here. Bad idea?
-        // This will likely cause Bad Things (TM) to happen in Concurrent Mode.
-        // Note that we do this because on renders _not_ caused by store updates, we need the latest store state
-        // to determine what the child props should be.
-
-
-        return childPropsSelector(store.getState(), wrapperProps);
-      }, [store, previousStateUpdateResult, wrapperProps]); // We need this to execute synchronously every time we re-render. However, React warns
-      // about useLayoutEffect in SSR, so we try to detect environment and fall back to
-      // just useEffect instead to avoid the warning, since neither will run anyway.
-
-      useIsomorphicLayoutEffectWithArgs(captureWrapperProps, [lastWrapperProps, lastChildProps, renderIsScheduled, wrapperProps, actualChildProps, childPropsFromStoreUpdate, notifyNestedSubs]); // Our re-subscribe logic only runs when the store/subscription setup changes
-
-      useIsomorphicLayoutEffectWithArgs(subscribeUpdates, [shouldHandleStateChanges, store, subscription, childPropsSelector, lastWrapperProps, lastChildProps, renderIsScheduled, childPropsFromStoreUpdate, notifyNestedSubs, forceComponentUpdateDispatch], [store, subscription, childPropsSelector]); // Now that all that's done, we can finally try to actually render the child component.
-      // We memoize the elements for the rendered child component as an optimization.
-
-      var renderedWrappedComponent = useMemo(function () {
-        return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, actualChildProps, {
-          ref: reactReduxForwardedRef
-        }));
-      }, [reactReduxForwardedRef, WrappedComponent, actualChildProps]); // If React sees the exact same element reference as last time, it bails out of re-rendering
-      // that child, same as if it was wrapped in React.memo() or returned false from shouldComponentUpdate.
-
-      var renderedChild = useMemo(function () {
-        if (shouldHandleStateChanges) {
-          // If this component is subscribed to store updates, we need to pass its own
-          // subscription instance down to our descendants. That means rendering the same
-          // Context instance, and putting a different value into the context.
-          return /*#__PURE__*/React.createElement(ContextToUse.Provider, {
-            value: overriddenContextValue
-          }, renderedWrappedComponent);
-        }
-
-        return renderedWrappedComponent;
-      }, [ContextToUse, renderedWrappedComponent, overriddenContextValue]);
-      return renderedChild;
-    } // If we're in "pure" mode, ensure our wrapper component only re-renders when incoming props have changed.
-
-
-    var Connect = pure ? React.memo(ConnectFunction) : ConnectFunction;
-    Connect.WrappedComponent = WrappedComponent;
-    Connect.displayName = ConnectFunction.displayName = displayName;
-
-    if (forwardRef) {
-      var forwarded = React.forwardRef(function forwardConnectRef(props, ref) {
-        return /*#__PURE__*/React.createElement(Connect, _extends({}, props, {
-          reactReduxForwardedRef: ref
-        }));
-      });
-      forwarded.displayName = displayName;
-      forwarded.WrappedComponent = WrappedComponent;
-      return hoistNonReactStatics_cjs(forwarded, WrappedComponent);
-    }
-
-    return hoistNonReactStatics_cjs(Connect, WrappedComponent);
-  };
-}
-
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) return true;
-
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-
-  var keysA = Object.keys(objA);
-  var keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) return false;
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+  if (keysA.length !== keysB.length) return false;
 
   for (var i = 0; i < keysA.length; i++) {
     if (!Object.prototype.hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
@@ -20964,395 +20391,6 @@ function shallowEqual(objA, objB) {
   return true;
 }
 
-function bindActionCreators(actionCreators, dispatch) {
-  var boundActionCreators = {};
-
-  var _loop = function _loop(key) {
-    var actionCreator = actionCreators[key];
-
-    if (typeof actionCreator === 'function') {
-      boundActionCreators[key] = function () {
-        return dispatch(actionCreator.apply(void 0, arguments));
-      };
-    }
-  };
-
-  for (var key in actionCreators) {
-    _loop(key);
-  }
-
-  return boundActionCreators;
-}
-
-/**
- * @param {any} obj The object to inspect.
- * @returns {boolean} True if the argument appears to be a plain object.
- */
-function isPlainObject$1(obj) {
-  if (typeof obj !== 'object' || obj === null) return false;
-  var proto = Object.getPrototypeOf(obj);
-  if (proto === null) return true;
-  var baseProto = proto;
-
-  while (Object.getPrototypeOf(baseProto) !== null) {
-    baseProto = Object.getPrototypeOf(baseProto);
-  }
-
-  return proto === baseProto;
-}
-
-/**
- * Prints a warning in the console if it exists.
- *
- * @param {String} message The warning message.
- * @returns {void}
- */
-function warning$1(message) {
-  /* eslint-disable no-console */
-  if (typeof console !== 'undefined' && typeof console.error === 'function') {
-    console.error(message);
-  }
-  /* eslint-enable no-console */
-
-
-  try {
-    // This error was thrown as a convenience so that if you enable
-    // "break on all exceptions" in your console,
-    // it would pause the execution at this line.
-    throw new Error(message);
-    /* eslint-disable no-empty */
-  } catch (e) {}
-  /* eslint-enable no-empty */
-
-}
-
-function verifyPlainObject(value, displayName, methodName) {
-  if (!isPlainObject$1(value)) {
-    warning$1(methodName + "() in " + displayName + " must return a plain object. Instead received " + value + ".");
-  }
-}
-
-function wrapMapToPropsConstant(getConstant) {
-  return function initConstantSelector(dispatch, options) {
-    var constant = getConstant(dispatch, options);
-
-    function constantSelector() {
-      return constant;
-    }
-
-    constantSelector.dependsOnOwnProps = false;
-    return constantSelector;
-  };
-} // dependsOnOwnProps is used by createMapToPropsProxy to determine whether to pass props as args
-// to the mapToProps function being wrapped. It is also used by makePurePropsSelector to determine
-// whether mapToProps needs to be invoked when props have changed.
-//
-// A length of one signals that mapToProps does not depend on props from the parent component.
-// A length of zero is assumed to mean mapToProps is getting args via arguments or ...args and
-// therefore not reporting its length accurately..
-
-function getDependsOnOwnProps(mapToProps) {
-  return mapToProps.dependsOnOwnProps !== null && mapToProps.dependsOnOwnProps !== undefined ? Boolean(mapToProps.dependsOnOwnProps) : mapToProps.length !== 1;
-} // Used by whenMapStateToPropsIsFunction and whenMapDispatchToPropsIsFunction,
-// this function wraps mapToProps in a proxy function which does several things:
-//
-//  * Detects whether the mapToProps function being called depends on props, which
-//    is used by selectorFactory to decide if it should reinvoke on props changes.
-//
-//  * On first call, handles mapToProps if returns another function, and treats that
-//    new function as the true mapToProps for subsequent calls.
-//
-//  * On first call, verifies the first result is a plain object, in order to warn
-//    the developer that their mapToProps function is not returning a valid result.
-//
-
-function wrapMapToPropsFunc(mapToProps, methodName) {
-  return function initProxySelector(dispatch, _ref) {
-    var displayName = _ref.displayName;
-
-    var proxy = function mapToPropsProxy(stateOrDispatch, ownProps) {
-      return proxy.dependsOnOwnProps ? proxy.mapToProps(stateOrDispatch, ownProps) : proxy.mapToProps(stateOrDispatch);
-    }; // allow detectFactoryAndVerify to get ownProps
-
-
-    proxy.dependsOnOwnProps = true;
-
-    proxy.mapToProps = function detectFactoryAndVerify(stateOrDispatch, ownProps) {
-      proxy.mapToProps = mapToProps;
-      proxy.dependsOnOwnProps = getDependsOnOwnProps(mapToProps);
-      var props = proxy(stateOrDispatch, ownProps);
-
-      if (typeof props === 'function') {
-        proxy.mapToProps = props;
-        proxy.dependsOnOwnProps = getDependsOnOwnProps(props);
-        props = proxy(stateOrDispatch, ownProps);
-      }
-
-      if (process.env.NODE_ENV !== 'production') verifyPlainObject(props, displayName, methodName);
-      return props;
-    };
-
-    return proxy;
-  };
-}
-
-function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {
-  return typeof mapDispatchToProps === 'function' ? wrapMapToPropsFunc(mapDispatchToProps, 'mapDispatchToProps') : undefined;
-}
-function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
-  return !mapDispatchToProps ? wrapMapToPropsConstant(function (dispatch) {
-    return {
-      dispatch: dispatch
-    };
-  }) : undefined;
-}
-function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
-  return mapDispatchToProps && typeof mapDispatchToProps === 'object' ? wrapMapToPropsConstant(function (dispatch) {
-    return bindActionCreators(mapDispatchToProps, dispatch);
-  }) : undefined;
-}
-var defaultMapDispatchToPropsFactories = [whenMapDispatchToPropsIsFunction, whenMapDispatchToPropsIsMissing, whenMapDispatchToPropsIsObject];
-
-function whenMapStateToPropsIsFunction(mapStateToProps) {
-  return typeof mapStateToProps === 'function' ? wrapMapToPropsFunc(mapStateToProps, 'mapStateToProps') : undefined;
-}
-function whenMapStateToPropsIsMissing(mapStateToProps) {
-  return !mapStateToProps ? wrapMapToPropsConstant(function () {
-    return {};
-  }) : undefined;
-}
-var defaultMapStateToPropsFactories = [whenMapStateToPropsIsFunction, whenMapStateToPropsIsMissing];
-
-function defaultMergeProps(stateProps, dispatchProps, ownProps) {
-  return _extends({}, ownProps, stateProps, dispatchProps);
-}
-function wrapMergePropsFunc(mergeProps) {
-  return function initMergePropsProxy(dispatch, _ref) {
-    var displayName = _ref.displayName,
-        pure = _ref.pure,
-        areMergedPropsEqual = _ref.areMergedPropsEqual;
-    var hasRunOnce = false;
-    var mergedProps;
-    return function mergePropsProxy(stateProps, dispatchProps, ownProps) {
-      var nextMergedProps = mergeProps(stateProps, dispatchProps, ownProps);
-
-      if (hasRunOnce) {
-        if (!pure || !areMergedPropsEqual(nextMergedProps, mergedProps)) mergedProps = nextMergedProps;
-      } else {
-        hasRunOnce = true;
-        mergedProps = nextMergedProps;
-        if (process.env.NODE_ENV !== 'production') verifyPlainObject(mergedProps, displayName, 'mergeProps');
-      }
-
-      return mergedProps;
-    };
-  };
-}
-function whenMergePropsIsFunction(mergeProps) {
-  return typeof mergeProps === 'function' ? wrapMergePropsFunc(mergeProps) : undefined;
-}
-function whenMergePropsIsOmitted(mergeProps) {
-  return !mergeProps ? function () {
-    return defaultMergeProps;
-  } : undefined;
-}
-var defaultMergePropsFactories = [whenMergePropsIsFunction, whenMergePropsIsOmitted];
-
-function verify(selector, methodName, displayName) {
-  if (!selector) {
-    throw new Error("Unexpected value for " + methodName + " in " + displayName + ".");
-  } else if (methodName === 'mapStateToProps' || methodName === 'mapDispatchToProps') {
-    if (!Object.prototype.hasOwnProperty.call(selector, 'dependsOnOwnProps')) {
-      warning$1("The selector for " + methodName + " of " + displayName + " did not specify a value for dependsOnOwnProps.");
-    }
-  }
-}
-
-function verifySubselectors(mapStateToProps, mapDispatchToProps, mergeProps, displayName) {
-  verify(mapStateToProps, 'mapStateToProps', displayName);
-  verify(mapDispatchToProps, 'mapDispatchToProps', displayName);
-  verify(mergeProps, 'mergeProps', displayName);
-}
-
-var _excluded$1 = ["initMapStateToProps", "initMapDispatchToProps", "initMergeProps"];
-function impureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch) {
-  return function impureFinalPropsSelector(state, ownProps) {
-    return mergeProps(mapStateToProps(state, ownProps), mapDispatchToProps(dispatch, ownProps), ownProps);
-  };
-}
-function pureFinalPropsSelectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, _ref) {
-  var areStatesEqual = _ref.areStatesEqual,
-      areOwnPropsEqual = _ref.areOwnPropsEqual,
-      areStatePropsEqual = _ref.areStatePropsEqual;
-  var hasRunAtLeastOnce = false;
-  var state;
-  var ownProps;
-  var stateProps;
-  var dispatchProps;
-  var mergedProps;
-
-  function handleFirstCall(firstState, firstOwnProps) {
-    state = firstState;
-    ownProps = firstOwnProps;
-    stateProps = mapStateToProps(state, ownProps);
-    dispatchProps = mapDispatchToProps(dispatch, ownProps);
-    mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
-    hasRunAtLeastOnce = true;
-    return mergedProps;
-  }
-
-  function handleNewPropsAndNewState() {
-    stateProps = mapStateToProps(state, ownProps);
-    if (mapDispatchToProps.dependsOnOwnProps) dispatchProps = mapDispatchToProps(dispatch, ownProps);
-    mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
-    return mergedProps;
-  }
-
-  function handleNewProps() {
-    if (mapStateToProps.dependsOnOwnProps) stateProps = mapStateToProps(state, ownProps);
-    if (mapDispatchToProps.dependsOnOwnProps) dispatchProps = mapDispatchToProps(dispatch, ownProps);
-    mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
-    return mergedProps;
-  }
-
-  function handleNewState() {
-    var nextStateProps = mapStateToProps(state, ownProps);
-    var statePropsChanged = !areStatePropsEqual(nextStateProps, stateProps);
-    stateProps = nextStateProps;
-    if (statePropsChanged) mergedProps = mergeProps(stateProps, dispatchProps, ownProps);
-    return mergedProps;
-  }
-
-  function handleSubsequentCalls(nextState, nextOwnProps) {
-    var propsChanged = !areOwnPropsEqual(nextOwnProps, ownProps);
-    var stateChanged = !areStatesEqual(nextState, state);
-    state = nextState;
-    ownProps = nextOwnProps;
-    if (propsChanged && stateChanged) return handleNewPropsAndNewState();
-    if (propsChanged) return handleNewProps();
-    if (stateChanged) return handleNewState();
-    return mergedProps;
-  }
-
-  return function pureFinalPropsSelector(nextState, nextOwnProps) {
-    return hasRunAtLeastOnce ? handleSubsequentCalls(nextState, nextOwnProps) : handleFirstCall(nextState, nextOwnProps);
-  };
-} // TODO: Add more comments
-// If pure is true, the selector returned by selectorFactory will memoize its results,
-// allowing connectAdvanced's shouldComponentUpdate to return false if final
-// props have not changed. If false, the selector will always return a new
-// object and shouldComponentUpdate will always return true.
-
-function finalPropsSelectorFactory(dispatch, _ref2) {
-  var initMapStateToProps = _ref2.initMapStateToProps,
-      initMapDispatchToProps = _ref2.initMapDispatchToProps,
-      initMergeProps = _ref2.initMergeProps,
-      options = _objectWithoutPropertiesLoose$1(_ref2, _excluded$1);
-
-  var mapStateToProps = initMapStateToProps(dispatch, options);
-  var mapDispatchToProps = initMapDispatchToProps(dispatch, options);
-  var mergeProps = initMergeProps(dispatch, options);
-
-  if (process.env.NODE_ENV !== 'production') {
-    verifySubselectors(mapStateToProps, mapDispatchToProps, mergeProps, options.displayName);
-  }
-
-  var selectorFactory = options.pure ? pureFinalPropsSelectorFactory : impureFinalPropsSelectorFactory;
-  return selectorFactory(mapStateToProps, mapDispatchToProps, mergeProps, dispatch, options);
-}
-
-var _excluded = ["pure", "areStatesEqual", "areOwnPropsEqual", "areStatePropsEqual", "areMergedPropsEqual"];
-/*
-  connect is a facade over connectAdvanced. It turns its args into a compatible
-  selectorFactory, which has the signature:
-
-    (dispatch, options) => (nextState, nextOwnProps) => nextFinalProps
-  
-  connect passes its args to connectAdvanced as options, which will in turn pass them to
-  selectorFactory each time a Connect component instance is instantiated or hot reloaded.
-
-  selectorFactory returns a final props selector from its mapStateToProps,
-  mapStateToPropsFactories, mapDispatchToProps, mapDispatchToPropsFactories, mergeProps,
-  mergePropsFactories, and pure args.
-
-  The resulting final props selector is called by the Connect component instance whenever
-  it receives new props or store state.
- */
-
-function match$1(arg, factories, name) {
-  for (var i = factories.length - 1; i >= 0; i--) {
-    var result = factories[i](arg);
-    if (result) return result;
-  }
-
-  return function (dispatch, options) {
-    throw new Error("Invalid value of type " + typeof arg + " for " + name + " argument when connecting component " + options.wrappedComponentName + ".");
-  };
-}
-
-function strictEqual(a, b) {
-  return a === b;
-} // createConnect with default args builds the 'official' connect behavior. Calling it with
-// different options opens up some testing and extensibility scenarios
-
-
-function createConnect(_temp) {
-  var _ref = _temp === void 0 ? {} : _temp,
-      _ref$connectHOC = _ref.connectHOC,
-      connectHOC = _ref$connectHOC === void 0 ? connectAdvanced : _ref$connectHOC,
-      _ref$mapStateToPropsF = _ref.mapStateToPropsFactories,
-      mapStateToPropsFactories = _ref$mapStateToPropsF === void 0 ? defaultMapStateToPropsFactories : _ref$mapStateToPropsF,
-      _ref$mapDispatchToPro = _ref.mapDispatchToPropsFactories,
-      mapDispatchToPropsFactories = _ref$mapDispatchToPro === void 0 ? defaultMapDispatchToPropsFactories : _ref$mapDispatchToPro,
-      _ref$mergePropsFactor = _ref.mergePropsFactories,
-      mergePropsFactories = _ref$mergePropsFactor === void 0 ? defaultMergePropsFactories : _ref$mergePropsFactor,
-      _ref$selectorFactory = _ref.selectorFactory,
-      selectorFactory = _ref$selectorFactory === void 0 ? finalPropsSelectorFactory : _ref$selectorFactory;
-
-  return function connect(mapStateToProps, mapDispatchToProps, mergeProps, _ref2) {
-    if (_ref2 === void 0) {
-      _ref2 = {};
-    }
-
-    var _ref3 = _ref2,
-        _ref3$pure = _ref3.pure,
-        pure = _ref3$pure === void 0 ? true : _ref3$pure,
-        _ref3$areStatesEqual = _ref3.areStatesEqual,
-        areStatesEqual = _ref3$areStatesEqual === void 0 ? strictEqual : _ref3$areStatesEqual,
-        _ref3$areOwnPropsEqua = _ref3.areOwnPropsEqual,
-        areOwnPropsEqual = _ref3$areOwnPropsEqua === void 0 ? shallowEqual : _ref3$areOwnPropsEqua,
-        _ref3$areStatePropsEq = _ref3.areStatePropsEqual,
-        areStatePropsEqual = _ref3$areStatePropsEq === void 0 ? shallowEqual : _ref3$areStatePropsEq,
-        _ref3$areMergedPropsE = _ref3.areMergedPropsEqual,
-        areMergedPropsEqual = _ref3$areMergedPropsE === void 0 ? shallowEqual : _ref3$areMergedPropsE,
-        extraOptions = _objectWithoutPropertiesLoose$1(_ref3, _excluded);
-
-    var initMapStateToProps = match$1(mapStateToProps, mapStateToPropsFactories, 'mapStateToProps');
-    var initMapDispatchToProps = match$1(mapDispatchToProps, mapDispatchToPropsFactories, 'mapDispatchToProps');
-    var initMergeProps = match$1(mergeProps, mergePropsFactories, 'mergeProps');
-    return connectHOC(selectorFactory, _extends({
-      // used in error messages
-      methodName: 'connect',
-      // used to compute Connect's displayName from the wrapped component's displayName.
-      getDisplayName: function getDisplayName(name) {
-        return "Connect(" + name + ")";
-      },
-      // if mapStateToProps is falsy, the Connect component doesn't subscribe to store state changes
-      shouldHandleStateChanges: Boolean(mapStateToProps),
-      // passed through to selectorFactory
-      initMapStateToProps: initMapStateToProps,
-      initMapDispatchToProps: initMapDispatchToProps,
-      initMergeProps: initMergeProps,
-      pure: pure,
-      areStatesEqual: areStatesEqual,
-      areOwnPropsEqual: areOwnPropsEqual,
-      areStatePropsEqual: areStatePropsEqual,
-      areMergedPropsEqual: areMergedPropsEqual
-    }, extraOptions));
-  };
-}
-var connect = /*#__PURE__*/createConnect();
-
 /**
  * A hook to access the value of the `ReactReduxContext`. This is a low-level
  * hook that you should usually not need to call directly.
@@ -21420,6 +20458,201 @@ function createStoreHook(context) {
 
 var useStore = /*#__PURE__*/createStoreHook();
 
+/**
+ * Hook factory, which creates a `useDispatch` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useDispatch` hook bound to the specified context.
+ */
+
+function createDispatchHook(context) {
+  if (context === void 0) {
+    context = ReactReduxContext;
+  }
+
+  var useStore$1 = context === ReactReduxContext ? useStore : createStoreHook(context);
+  return function useDispatch() {
+    var store = useStore$1();
+    return store.dispatch;
+  };
+}
+/**
+ * A hook to access the redux `dispatch` function.
+ *
+ * @returns {any|function} redux store's `dispatch` function
+ *
+ * @example
+ *
+ * import React, { useCallback } from 'react'
+ * import { useDispatch } from 'react-redux'
+ *
+ * export const CounterComponent = ({ value }) => {
+ *   const dispatch = useDispatch()
+ *   const increaseCounter = useCallback(() => dispatch({ type: 'increase-counter' }), [])
+ *   return (
+ *     <div>
+ *       <span>{value}</span>
+ *       <button onClick={increaseCounter}>Increase counter</button>
+ *     </div>
+ *   )
+ * }
+ */
+
+var useDispatch = /*#__PURE__*/createDispatchHook();
+
+var refEquality = function refEquality(a, b) {
+  return a === b;
+};
+
+function useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub) {
+  var _useReducer = useReducer(function (s) {
+    return s + 1;
+  }, 0),
+      forceRender = _useReducer[1];
+
+  var subscription = useMemo(function () {
+    return createSubscription(store, contextSub);
+  }, [store, contextSub]);
+  var latestSubscriptionCallbackError = useRef();
+  var latestSelector = useRef();
+  var latestStoreState = useRef();
+  var latestSelectedState = useRef();
+  var storeState = store.getState();
+  var selectedState;
+
+  try {
+    if (selector !== latestSelector.current || storeState !== latestStoreState.current || latestSubscriptionCallbackError.current) {
+      var newSelectedState = selector(storeState); // ensure latest selected state is reused so that a custom equality function can result in identical references
+
+      if (latestSelectedState.current === undefined || !equalityFn(newSelectedState, latestSelectedState.current)) {
+        selectedState = newSelectedState;
+      } else {
+        selectedState = latestSelectedState.current;
+      }
+    } else {
+      selectedState = latestSelectedState.current;
+    }
+  } catch (err) {
+    if (latestSubscriptionCallbackError.current) {
+      err.message += "\nThe error may be correlated with this previous error:\n" + latestSubscriptionCallbackError.current.stack + "\n\n";
+    }
+
+    throw err;
+  }
+
+  useIsomorphicLayoutEffect(function () {
+    latestSelector.current = selector;
+    latestStoreState.current = storeState;
+    latestSelectedState.current = selectedState;
+    latestSubscriptionCallbackError.current = undefined;
+  });
+  useIsomorphicLayoutEffect(function () {
+    function checkForUpdates() {
+      try {
+        var newStoreState = store.getState(); // Avoid calling selector multiple times if the store's state has not changed
+
+        if (newStoreState === latestStoreState.current) {
+          return;
+        }
+
+        var _newSelectedState = latestSelector.current(newStoreState);
+
+        if (equalityFn(_newSelectedState, latestSelectedState.current)) {
+          return;
+        }
+
+        latestSelectedState.current = _newSelectedState;
+        latestStoreState.current = newStoreState;
+      } catch (err) {
+        // we ignore all errors here, since when the component
+        // is re-rendered, the selectors are called again, and
+        // will throw again, if neither props nor store state
+        // changed
+        latestSubscriptionCallbackError.current = err;
+      }
+
+      forceRender();
+    }
+
+    subscription.onStateChange = checkForUpdates;
+    subscription.trySubscribe();
+    checkForUpdates();
+    return function () {
+      return subscription.tryUnsubscribe();
+    };
+  }, [store, subscription]);
+  return selectedState;
+}
+/**
+ * Hook factory, which creates a `useSelector` hook bound to a given context.
+ *
+ * @param {React.Context} [context=ReactReduxContext] Context passed to your `<Provider>`.
+ * @returns {Function} A `useSelector` hook bound to the specified context.
+ */
+
+
+function createSelectorHook(context) {
+  if (context === void 0) {
+    context = ReactReduxContext;
+  }
+
+  var useReduxContext$1 = context === ReactReduxContext ? useReduxContext : function () {
+    return useContext(context);
+  };
+  return function useSelector(selector, equalityFn) {
+    if (equalityFn === void 0) {
+      equalityFn = refEquality;
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!selector) {
+        throw new Error("You must pass a selector to useSelector");
+      }
+
+      if (typeof selector !== 'function') {
+        throw new Error("You must pass a function as a selector to useSelector");
+      }
+
+      if (typeof equalityFn !== 'function') {
+        throw new Error("You must pass a function as an equality function to useSelector");
+      }
+    }
+
+    var _useReduxContext = useReduxContext$1(),
+        store = _useReduxContext.store,
+        contextSub = _useReduxContext.subscription;
+
+    var selectedState = useSelectorWithStoreAndSubscription(selector, equalityFn, store, contextSub);
+    useDebugValue(selectedState);
+    return selectedState;
+  };
+}
+/**
+ * A hook to access the redux store's state. This hook takes a selector function
+ * as an argument. The selector is called with the store state.
+ *
+ * This hook takes an optional equality comparison function as the second parameter
+ * that allows you to customize the way the selected state is compared to determine
+ * whether the component needs to be re-rendered.
+ *
+ * @param {Function} selector the selector function
+ * @param {Function=} equalityFn the function that will be used to determine equality
+ *
+ * @returns {any} the selected state
+ *
+ * @example
+ *
+ * import React from 'react'
+ * import { useSelector } from 'react-redux'
+ *
+ * export const CounterComponent = () => {
+ *   const counter = useSelector(state => state.counter)
+ *   return <div>{counter}</div>
+ * }
+ */
+
+var useSelector = /*#__PURE__*/createSelectorHook();
+
 // with standard React renderers (ReactDOM, React Native)
 
 setBatch(unstable_batchedUpdates);
@@ -22528,25 +21761,47 @@ function persistStore(store, options, cb) {
   return persistor;
 }
 
-var Providers = /** @class */ (function (_super) {
-    __extends(Providers, _super);
-    function Providers(props) {
-        var _this = _super.call(this, props) || this;
-        var reducerConfig = __assign$1(__assign$1({}, persistConfig), { storage: default_1 });
-        _this.disabledPersist = props.disabledPersist || false;
-        var persistedReducer = _this.disabledPersist ? rootReducer : persistReducer(reducerConfig, rootReducer);
-        _this.store = createStore(persistedReducer, { root: props.defaultValues }, 
+class Providers extends React.Component {
+    constructor(props) {
+        super(props);
+        const reducerConfig = Object.assign(Object.assign({}, persistConfig), { storage: default_1 });
+        this.disabledPersist = props.disabledPersist || false;
+        const persistedReducer = this.disabledPersist ? rootReducer : persistReducer(reducerConfig, rootReducer);
+        this.store = createStore(persistedReducer, { root: props.defaultValues }, 
         // eslint-disable-next-line no-underscore-dangle
         window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
-        _this.persistor = persistStore(_this.store);
-        return _this;
+        this.persistor = persistStore(this.store);
+    }
+    render() {
+        const { children } = this.props;
+        return (jsxRuntime$1.exports.jsx(Provider, Object.assign({ store: this.store }, { children: this.disabledPersist ? (children) : (jsxRuntime$1.exports.jsx(PersistGate, Object.assign({ loading: null, persistor: this.persistor }, { children: children }), void 0)) }), void 0));
+    }
+}
+
+class MessageHandler {
+    constructor() {
+        this.set = (newFunc) => {
+            this.updateDefaultValueHandler = newFunc;
+        };
+        this.get = () => {
+            return this.updateDefaultValueHandler;
+        };
     }
-    Providers.prototype.render = function () {
-        var children = this.props.children;
-        return (jsxRuntime$1.exports.jsx(Provider, __assign$1({ store: this.store }, { children: this.disabledPersist ? (children) : (jsxRuntime$1.exports.jsx(PersistGate, __assign$1({ loading: null, persistor: this.persistor }, { children: children }), void 0)) }), void 0));
+}
+const MessageHandlerContext = createContext(null);
+
+const MessageReceiver = () => {
+    const dispatch = useDispatch();
+    const messageHandler = useContext(MessageHandlerContext);
+    const changeDefaultValue = ({ store, path, value }) => {
+        // TODO maybe need to export from core
+        dispatch({ type: 'DATA_UPDATE', payload: { store, value, path } });
     };
-    return Providers;
-}(React.Component));
+    useEffect(() => {
+        messageHandler === null || messageHandler === void 0 ? void 0 : messageHandler.set(changeDefaultValue);
+    }, [messageHandler, dispatch]);
+    return null;
+};
 
 /*
 
@@ -22571,7 +21826,7 @@ styleSheet.flush()
 
 */
 // $FlowFixMe
-function sheetForTag$1(tag) {
+function sheetForTag(tag) {
   if (tag.sheet) {
     // $FlowFixMe
     return tag.sheet;
@@ -22588,7 +21843,7 @@ function sheetForTag$1(tag) {
   }
 }
 
-function createStyleElement$1(options) {
+function createStyleElement(options) {
   var tag = document.createElement('style');
   tag.setAttribute('data-emotion', options.key);
 
@@ -22601,7 +21856,7 @@ function createStyleElement$1(options) {
   return tag;
 }
 
-var StyleSheet$1 = /*#__PURE__*/function () {
+var StyleSheet = /*#__PURE__*/function () {
   function StyleSheet(options) {
     var _this = this;
 
@@ -22648,7 +21903,7 @@ var StyleSheet$1 = /*#__PURE__*/function () {
     // it's 1 in dev because we insert source maps that map a single rule to a location
     // and you can only have one source map per style tag
     if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      this._insertTag(createStyleElement$1(this));
+      this._insertTag(createStyleElement(this));
     }
 
     var tag = this.tags[this.tags.length - 1];
@@ -22666,7 +21921,7 @@ var StyleSheet$1 = /*#__PURE__*/function () {
     }
 
     if (this.isSpeedy) {
-      var sheet = sheetForTag$1(tag);
+      var sheet = sheetForTag(tag);
 
       try {
         // this is the ultrafast version, works across browsers
@@ -23463,7 +22718,7 @@ var weakMemoize = function weakMemoize(func) {
   };
 };
 
-function memoize$1(fn) {
+function memoize(fn) {
   var cache = Object.create(null);
   return function (arg) {
     if (cache[arg] === undefined) cache[arg] = fn(arg);
@@ -23666,7 +22921,7 @@ var incorrectImportAlarm = function incorrectImportAlarm(element, index, childre
 
 var isBrowser$3 = typeof document !== 'undefined';
 var getServerStylisCache = isBrowser$3 ? undefined : weakMemoize(function () {
-  return memoize$1(function () {
+  return memoize(function () {
     var cache = {};
     return function (name) {
       return cache[name];
@@ -23845,7 +23100,7 @@ var createCache = function createCache(options) {
 
   var cache = {
     key: key,
-    sheet: new StyleSheet$1({
+    sheet: new StyleSheet({
       key: key,
       container: container,
       nonce: options.nonce,
@@ -24013,14 +23268,6 @@ var unitlessKeys = {
   strokeWidth: 1
 };
 
-function memoize(fn) {
-  var cache = Object.create(null);
-  return function (arg) {
-    if (cache[arg] === undefined) cache[arg] = fn(arg);
-    return cache[arg];
-  };
-}
-
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences";
 var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
 var hyphenateRegex = /[A-Z]|^ms/g;
@@ -24463,158 +23710,6 @@ if (process.env.NODE_ENV !== 'production') {
   Emotion.displayName = 'EmotionCssPropInternal';
 }
 
-/*
-
-Based off glamor's StyleSheet, thanks Sunil ❤️
-
-high performance StyleSheet for css-in-js systems
-
-- uses multiple style tags behind the scenes for millions of rules
-- uses `insertRule` for appending in production for *much* faster performance
-
-// usage
-
-import { StyleSheet } from '@emotion/sheet'
-
-let styleSheet = new StyleSheet({ key: '', container: document.head })
-
-styleSheet.insert('#box { border: 1px solid red; }')
-- appends a css rule into the stylesheet
-
-styleSheet.flush()
-- empties the stylesheet of all its contents
-
-*/
-// $FlowFixMe
-function sheetForTag(tag) {
-  if (tag.sheet) {
-    // $FlowFixMe
-    return tag.sheet;
-  } // this weirdness brought to you by firefox
-
-  /* istanbul ignore next */
-
-
-  for (var i = 0; i < document.styleSheets.length; i++) {
-    if (document.styleSheets[i].ownerNode === tag) {
-      // $FlowFixMe
-      return document.styleSheets[i];
-    }
-  }
-}
-
-function createStyleElement(options) {
-  var tag = document.createElement('style');
-  tag.setAttribute('data-emotion', options.key);
-
-  if (options.nonce !== undefined) {
-    tag.setAttribute('nonce', options.nonce);
-  }
-
-  tag.appendChild(document.createTextNode(''));
-  tag.setAttribute('data-s', '');
-  return tag;
-}
-
-var StyleSheet = /*#__PURE__*/function () {
-  function StyleSheet(options) {
-    var _this = this;
-
-    this._insertTag = function (tag) {
-      var before;
-
-      if (_this.tags.length === 0) {
-        if (_this.insertionPoint) {
-          before = _this.insertionPoint.nextSibling;
-        } else if (_this.prepend) {
-          before = _this.container.firstChild;
-        } else {
-          before = _this.before;
-        }
-      } else {
-        before = _this.tags[_this.tags.length - 1].nextSibling;
-      }
-
-      _this.container.insertBefore(tag, before);
-
-      _this.tags.push(tag);
-    };
-
-    this.isSpeedy = options.speedy === undefined ? process.env.NODE_ENV === 'production' : options.speedy;
-    this.tags = [];
-    this.ctr = 0;
-    this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets
-
-    this.key = options.key;
-    this.container = options.container;
-    this.prepend = options.prepend;
-    this.insertionPoint = options.insertionPoint;
-    this.before = null;
-  }
-
-  var _proto = StyleSheet.prototype;
-
-  _proto.hydrate = function hydrate(nodes) {
-    nodes.forEach(this._insertTag);
-  };
-
-  _proto.insert = function insert(rule) {
-    // the max length is how many rules we have per style tag, it's 65000 in speedy mode
-    // it's 1 in dev because we insert source maps that map a single rule to a location
-    // and you can only have one source map per style tag
-    if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) {
-      this._insertTag(createStyleElement(this));
-    }
-
-    var tag = this.tags[this.tags.length - 1];
-
-    if (process.env.NODE_ENV !== 'production') {
-      var isImportRule = rule.charCodeAt(0) === 64 && rule.charCodeAt(1) === 105;
-
-      if (isImportRule && this._alreadyInsertedOrderInsensitiveRule) {
-        // this would only cause problem in speedy mode
-        // but we don't want enabling speedy to affect the observable behavior
-        // so we report this error at all times
-        console.error("You're attempting to insert the following rule:\n" + rule + '\n\n`@import` rules must be before all other types of rules in a stylesheet but other rules have already been inserted. Please ensure that `@import` rules are before all other rules.');
-      }
-      this._alreadyInsertedOrderInsensitiveRule = this._alreadyInsertedOrderInsensitiveRule || !isImportRule;
-    }
-
-    if (this.isSpeedy) {
-      var sheet = sheetForTag(tag);
-
-      try {
-        // this is the ultrafast version, works across browsers
-        // the big drawback is that the css won't be editable in devtools
-        sheet.insertRule(rule, sheet.cssRules.length);
-      } catch (e) {
-        if (process.env.NODE_ENV !== 'production' && !/:(-moz-placeholder|-moz-focus-inner|-moz-focusring|-ms-input-placeholder|-moz-read-write|-moz-read-only|-ms-clear){/.test(rule)) {
-          console.error("There was a problem inserting the following rule: \"" + rule + "\"", e);
-        }
-      }
-    } else {
-      tag.appendChild(document.createTextNode(rule));
-    }
-
-    this.ctr++;
-  };
-
-  _proto.flush = function flush() {
-    // $FlowFixMe
-    this.tags.forEach(function (tag) {
-      return tag.parentNode && tag.parentNode.removeChild(tag);
-    });
-    this.tags = [];
-    this.ctr = 0;
-
-    if (process.env.NODE_ENV !== 'production') {
-      this._alreadyInsertedOrderInsensitiveRule = false;
-    }
-  };
-
-  return StyleSheet;
-}();
-
 var pkg = {
 	name: "@emotion/react",
 	version: "11.7.1",
@@ -24956,50 +24051,47 @@ if (process.env.NODE_ENV !== 'production') {
   }
 }
 
-var printObj = function (obj) { return (typeof obj === 'string' ? obj : JSON.stringify(obj)); };
-var ErrorBoundary = /** @class */ (function (_super) {
-    __extends(ErrorBoundary, _super);
-    function ErrorBoundary(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = { hasError: false, error: null };
-        return _this;
+const printObj = (obj) => (typeof obj === 'string' ? obj : JSON.stringify(obj));
+class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false, error: null };
     }
-    ErrorBoundary.getDerivedStateFromError = function (error) {
+    static getDerivedStateFromError(error) {
         return {
             hasError: true,
             error: error && error.message ? error.message : error,
         };
-    };
-    ErrorBoundary.prototype.componentDidCatch = function (error, info) {
+    }
+    componentDidCatch(error, info) {
         this.setState({ didInfo: info.componentStack });
-    };
-    ErrorBoundary.prototype.render = function () {
-        var _a = this.state, hasError = _a.hasError, error = _a.error, didInfo = _a.didInfo;
-        var _b = this.props, type = _b.type, id = _b.id, children = _b.children;
+    }
+    render() {
+        const { hasError, error, didInfo } = this.state;
+        const { type, id, children } = this.props;
         if (hasError) {
             if (type === 'component') {
-                return (jsxRuntime$1.exports.jsx("div", __assign$1({ style: {
+                return (jsxRuntime$1.exports.jsx("div", Object.assign({ style: {
                         flex: 1,
                         flexDirection: 'column',
                         borderColor: 'orange',
                         borderWidth: 2,
-                    } }, { children: jsxRuntime$1.exports.jsxs("div", { children: [jsxRuntime$1.exports.jsx("div", __assign$1({ style: { backgroundColor: 'red', alignItems: 'center' } }, { children: jsxRuntime$1.exports.jsxs("p", __assign$1({ style: { fontSize: 12, padding: 2 } }, { children: [id, "Error:"] }), void 0) }), void 0), jsxRuntime$1.exports.jsx("div", { children: jsxRuntime$1.exports.jsxs("p", __assign$1({ style: { fontSize: 10, padding: 2 } }, { children: [" ", printObj(error)] }), void 0) }, void 0)] }, void 0) }), void 0));
+                    } }, { children: jsxRuntime$1.exports.jsxs("div", { children: [jsxRuntime$1.exports.jsx("div", Object.assign({ style: { backgroundColor: 'red', alignItems: 'center' } }, { children: jsxRuntime$1.exports.jsxs("p", Object.assign({ style: { fontSize: 12, padding: 2 } }, { children: [id, "Error:"] }), void 0) }), void 0), jsxRuntime$1.exports.jsx("div", { children: jsxRuntime$1.exports.jsxs("p", Object.assign({ style: { fontSize: 10, padding: 2 } }, { children: [" ", printObj(error)] }), void 0) }, void 0)] }, void 0) }), void 0));
             }
-            return (jsxRuntime$1.exports.jsx("div", __assign$1({ style: { flexDirection: 'column', margin: 20, height: '100%' } }, { children: jsxRuntime$1.exports.jsxs("div", { children: [jsxRuntime$1.exports.jsx("div", __assign$1({ style: {
+            return (jsxRuntime$1.exports.jsx("div", Object.assign({ style: { flexDirection: 'column', margin: 20, height: '100%' } }, { children: jsxRuntime$1.exports.jsxs("div", { children: [jsxRuntime$1.exports.jsx("div", Object.assign({ style: {
                                 flex: 1,
                                 backgroundColor: 'red',
                                 padding: 10,
                                 alignItems: 'center',
-                            } }, { children: jsxRuntime$1.exports.jsxs("p", __assign$1({ style: { fontSize: 30 } }, { children: ["Error type:", type, id] }), void 0) }), void 0), jsxRuntime$1.exports.jsx("div", { children: jsxRuntime$1.exports.jsx("p", __assign$1({ style: { fontSize: 20, marginTop: 30 } }, { children: printObj(error) }), void 0) }, void 0), jsxRuntime$1.exports.jsx("div", { children: jsxRuntime$1.exports.jsx("p", __assign$1({ style: { marginTop: 20 } }, { children: printObj(didInfo) }), void 0) }, void 0)] }, void 0) }), void 0));
+                            } }, { children: jsxRuntime$1.exports.jsxs("p", Object.assign({ style: { fontSize: 30 } }, { children: ["Error type:", type, id] }), void 0) }), void 0), jsxRuntime$1.exports.jsx("div", { children: jsxRuntime$1.exports.jsx("p", Object.assign({ style: { fontSize: 20, marginTop: 30 } }, { children: printObj(error) }), void 0) }, void 0), jsxRuntime$1.exports.jsx("div", { children: jsxRuntime$1.exports.jsx("p", Object.assign({ style: { marginTop: 20 } }, { children: printObj(didInfo) }), void 0) }, void 0)] }, void 0) }), void 0));
         }
         return children;
-    };
-    return ErrorBoundary;
-}(React.Component));
+    }
+}
 
-var genStyle = function (props) {
-    var parentComp = props.parentComp;
-    var style = __assign$1(__assign$1({ display: 'flex', flexDirection: 'column' }, props.style), props[constants.STYLE_WEB_NAME]);
+const getWebStyle = (props) => {
+    const { [constants.PARENT_PROP_NAME]: parentComp } = props;
+    const style = Object.assign(Object.assign({ display: 'flex', flexDirection: 'column' }, props.style), props[constants.STYLE_WEB_NAME]);
     if (style && style.borderWidth && !style.borderStyle) {
         style.borderStyle = 'solid';
     }
@@ -25010,84 +24102,68 @@ var genStyle = function (props) {
             parentComp.style.flex < 1
         // if smaller or larger, noesn't matter
         ) {
-            style.height = "100%";
-            style.width = "100%";
+            style.height = `100%`;
+            style.width = `100%`;
         }
         else if (!style.height) {
-            style.height = "".concat(style.flex * 100, "%");
+            style.height = `${style.flex * 100}%`;
         }
     }
     return style;
 };
-var getStyleForWeb = function (props, component) {
-    if (props === void 0) { props = {}; }
-    return component === 'View' ? genStyle(props) : __assign$1(__assign$1({}, props.style), props[constants.STYLE_WEB_NAME]);
-};
-function Wrapper(props) {
-    var _a = props, _b = constants.V_COMP_NAME, component = _a[_b], id = _a.id, _c = constants.PATH_MODIFIERS_KEY, pathModifiers = _a[_c];
-    var stock = useContext(StockContext);
-    var _d = wrapperUtil.getRootWrapperProps(props, stock), currentPaths = _d.currentPaths, ownProps = __rest$1(_d, ["currentPaths"]);
+const getStyle = (props = {}, component) => component === 'View' ? getWebStyle(props) : Object.assign(Object.assign({}, props.style), props[constants.STYLE_WEB_NAME]);
+function Wrapper({ props: origProps }) {
+    const newCurrentPaths = useContext(PathModifierContext);
+    const stock = useContext(StockContext);
+    const props = Object.assign(Object.assign({}, wrapperUtil.normalisePrimitives(origProps)), { [constants.CURRENT_PATH_NAME]: wrapperUtil.getCurrentPaths(Object.assign(Object.assign({}, origProps), { [constants.CURRENT_PATH_NAME]: newCurrentPaths }), origProps === null || origProps === void 0 ? void 0 : origProps[constants.PATH_MODIFIERS_KEY]) });
+    const { [constants.V_COMP_NAME]: component } = props;
+    const ownProps = wrapperUtil.getRootWrapperProps(props, stock);
+    // TODO isError
+    useSelector(compSelectorHook(props[constants.CURRENT_PATH_NAME], ownProps.subscriberPaths), shallowEqual);
     if (!stock) {
         return null;
     }
-    var Comp = stock.getComponent(component);
-    var infobox = false;
+    const Comp = stock.getComponent(component);
+    const infobox = false;
     if (!Comp) {
         // eslint-disable-next-line no-throw-literal
-        throw "The Component(".concat(component, ") is not available");
+        throw `The Component(${component}) is not available`;
     }
-    var newStyle = ownProps.style || ownProps[constants.STYLE_WEB_NAME] ? getStyleForWeb(ownProps, component) : undefined;
-    return (jsxRuntime$1.exports.jsx(ErrorBoundary, __assign$1({ type: "wrapper", id: id }, { children: jsxRuntime$1.exports.jsx(ClassNames, { children: function (_a) {
-                var css = _a.css, cx = _a.cx;
+    const newStyle = ownProps.style || ownProps[constants.STYLE_WEB_NAME] ? getStyle(ownProps, component) : undefined;
+    return (jsxRuntime$1.exports.jsx(ErrorBoundary, Object.assign({ type: "wrapper", id: props.id }, { children: jsxRuntime$1.exports.jsx(ClassNames, { children: ({ css, cx }) => {
                 ownProps.className = newStyle ? cx(css(newStyle)) : undefined;
-                var _b = ownProps; _b.parentComp; _b.style; var _c = constants.STYLE_WEB_NAME; _b[_c]; var _d = constants.V_COMP_NAME; _b[_d]; var _e = constants.V_CHILDREN_NAME; _b[_e]; var _f = constants.PATH_MODIFIERS_KEY; _b[_f]; var newProps = __rest$1(_b, ["parentComp", "style", typeof _c === "symbol" ? _c : _c + "", typeof _d === "symbol" ? _d : _d + "", typeof _e === "symbol" ? _e : _e + "", typeof _f === "symbol" ? _f : _f + ""]);
-                return pathModifiers ? (jsxRuntime$1.exports.jsxs(PathModifierContext.Provider, __assign$1({ value: currentPaths }, { children: [jsxRuntime$1.exports.jsx(Comp, __assign$1({}, newProps, { children: wrapperUtil.generateChildren(ownProps, stock) }), void 0), infobox ] }), void 0)) : (jsxRuntime$1.exports.jsxs(jsxRuntime$1.exports.Fragment, { children: [jsxRuntime$1.exports.jsx(Comp, __assign$1({}, newProps, { children: wrapperUtil.generateChildren(ownProps, stock) }), void 0), infobox ] }, void 0));
+                const newProps = wrapperUtil.removeTechnicalProps(ownProps);
+                // children was {wrapperUtil.generateChildren(ownProps, stock)}
+                return ownProps[constants.PATH_MODIFIERS_KEY] ? (jsxRuntime$1.exports.jsxs(PathModifierContext.Provider, Object.assign({ value: props[constants.CURRENT_PATH_NAME] }, { children: [jsxRuntime$1.exports.jsx(Comp, Object.assign({}, newProps), void 0), infobox ] }), void 0)) : (jsxRuntime$1.exports.jsxs(jsxRuntime$1.exports.Fragment, { children: [jsxRuntime$1.exports.jsx(Comp, Object.assign({}, newProps), void 0), infobox ] }, void 0));
             } }, void 0) }), void 0));
 }
-var ReduxWrapper = connect(genAllStateProps, null, function (stateProps, dispatchProps, ownProps) { return util$1.mergePath(ownProps, stateProps); }, {
-    areStatePropsEqual: function (next, prev) {
-        // eslint-disable-next-line no-restricted-syntax
-        for (var _i = 0, _a = Object.entries(next); _i < _a.length; _i++) {
-            var _b = _a[_i], key = _b[0], value = _b[1];
-            if (value !== prev[key]) {
-                return false;
-            }
-        }
-        return true;
-    },
-})(Wrapper);
-function WrapperOuter(props) {
-    var currentPaths = useContext(PathModifierContext);
-    var newProps = __assign$1(__assign$1(__assign$1({}, props), { currentPaths: currentPaths }), wrapperUtil.pathModifierBuilder(__assign$1(__assign$1({}, props), { currentPaths: currentPaths }), props[constants.PATH_MODIFIERS_KEY]));
-    return jsxRuntime$1.exports.jsx(ReduxWrapper, __assign$1({}, newProps), void 0);
-}
 
-var Renderer = function (_a) {
-    var model = _a.model, stockInit = _a.stockInit, reduxStore = _a.reduxStore;
-    var stock = useMemo(function () { return getStock(stockInit, model, WrapperOuter, reduxStore); }, [stockInit, model, reduxStore]);
+const Renderer = ({ model, stockInit, reduxStore }) => {
+    const stock = useMemo(() => getStock(stockInit, model, Wrapper, reduxStore), [stockInit, model, reduxStore]);
     if (model === undefined) {
         return null;
     }
-    return (jsxRuntime$1.exports.jsx(StockContext.Provider, __assign$1({ value: stock }, { children: jsxRuntime$1.exports.jsx(PathModifierContext.Provider, __assign$1({ value: {} }, { children: jsxRuntime$1.exports.jsx(WrapperOuter, __assign$1({}, wrapperUtil.getWrapperProps(model)), void 0) }), void 0) }), void 0));
+    return (jsxRuntime$1.exports.jsx(StockContext.Provider, Object.assign({ value: stock }, { children: jsxRuntime$1.exports.jsxs(PathModifierContext.Provider, Object.assign({ value: {} }, { children: [jsxRuntime$1.exports.jsx(MessageReceiver, {}, void 0), jsxRuntime$1.exports.jsx(Wrapper, { props: model }, void 0)] }), void 0) }), void 0));
 };
-var rendererFunc = function (props) {
-    var reduxStore = useStore();
-    return (jsxRuntime$1.exports.jsx(ErrorBoundary, __assign$1({ type: "rendererFunc" }, { children: jsxRuntime$1.exports.jsx(Renderer, __assign$1({}, props, { reduxStore: reduxStore }), void 0) }), void 0));
+const rendererFunc = (props) => {
+    // TODO remove this and merge to Renderer
+    const reduxStore = useStore();
+    return (jsxRuntime$1.exports.jsx(ErrorBoundary, Object.assign({ type: "rendererFunc" }, { children: jsxRuntime$1.exports.jsx(Renderer, Object.assign({}, props, { reduxStore: reduxStore }), void 0) }), void 0));
 };
 
-function Viewer(_a) {
-    var model = _a.model, components = _a.components, functions = _a.functions;
-    var stockInit = {
-        components: __assign$1(__assign$1({}, stock.components), components),
-        functions: __assign$1(__assign$1(__assign$1({}, stock.functions), appRootFunctions), functions),
+function Viewer({ model, components, functions }) {
+    const stockInit = {
+        components: Object.assign(Object.assign({}, stock.components), components),
+        functions: Object.assign(Object.assign(Object.assign({}, stock.functions), appRootFunctions), functions),
     };
     return jsxRuntime$1.exports.jsx(rendererFunc, { model: model, stockInit: stockInit }, void 0);
 }
-function ViewerWeb(props) {
-    return (jsxRuntime$1.exports.jsx(ErrorBoundary, __assign$1({ type: "viewer" }, { children: jsxRuntime$1.exports.jsx(Providers, __assign$1({ defaultValues: props.defaultValues, disabledPersist: props.disabledPersist }, { children: jsxRuntime$1.exports.jsx(Viewer, __assign$1({}, props), void 0) }), void 0) }), void 0));
+function ViewerWeb(_a) {
+    var { defaultValues, disabledPersist } = _a, props = __rest$1(_a, ["defaultValues", "disabledPersist"]);
+    return (jsxRuntime$1.exports.jsx(ErrorBoundary, Object.assign({ type: "viewer" }, { children: jsxRuntime$1.exports.jsx(Providers, Object.assign({ defaultValues: defaultValues, disabledPersist: disabledPersist }, { children: jsxRuntime$1.exports.jsx(Viewer, Object.assign({}, props), void 0) }), void 0) }), void 0));
 }
 
-var JsonUI = function (props) { return jsxRuntime$1.exports.jsx(ViewerWeb, __assign$1({}, props), void 0); };
+const JsonUI = (props) => jsxRuntime$1.exports.jsx(ViewerWeb, Object.assign({}, props), void 0);
 
-export { JsonUI };
+export { JsonUI, MessageHandler, MessageHandlerContext };
 //# sourceMappingURL=index.js.map