npm - @symbo.ls/create - Versions diffs - 2.11.198 → 2.11.204 - Mend

@symbo.ls/create 2.11.198 → 2.11.204

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/dist/cjs/bundle/index.js +321 -732
package/package.json +2 -2

package/dist/cjs/bundle/index.js CHANGED Viewed

@@ -464,7 +464,7 @@ var require_object = __commonJS({
       flattenRecursive: () => flattenRecursive,
       isEqualDeep: () => isEqualDeep2,
       map: () => map2,
-      merge: () => merge5,
+      merge: () => merge4,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       objectToString: () => objectToString,
@@ -494,7 +494,7 @@ var require_object = __commonJS({
         obj[e] = exec4(extention[e], element);
       }
     };
-    var merge5 = (element, obj, excludeFrom = []) => {
+    var merge4 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
         const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, e);
         if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
@@ -812,22 +812,28 @@ var require_object = __commonJS({
       delete objectized[prop];
       return stack;
     };
-    var isEqualDeep2 = (param, element) => {
-      if (param === element)
+    var isEqualDeep2 = (param, element, visited = /* @__PURE__ */ new Set()) => {
+      if (typeof param !== "object" || typeof element !== "object" || param === null || element === null) {
+        return param === element;
+      }
+      if (visited.has(param) || visited.has(element)) {
         return true;
-      if (!param || !element)
+      }
+      visited.add(param);
+      visited.add(element);
+      const keysParam = Object.keys(param);
+      const keysElement = Object.keys(element);
+      if (keysParam.length !== keysElement.length) {
         return false;
-      for (const prop in param) {
-        const paramProp = param[prop];
-        const elementProp = element[prop];
-        if ((0, import_types.isObjectLike)(paramProp)) {
-          const isEqual = isEqualDeep2(paramProp, elementProp);
-          if (!isEqual)
-            return false;
-        } else {
-          const isEqual = paramProp === elementProp;
-          if (!isEqual)
-            return false;
+      }
+      for (const key of keysParam) {
+        if (!keysElement.includes(key)) {
+          return false;
+        }
+        const paramProp = param[key];
+        const elementProp = element[key];
+        if (!isEqualDeep2(paramProp, elementProp, visited)) {
+          return false;
         }
       }
       return true;
@@ -871,6 +877,7 @@ var require_function = __commonJS({
     var function_exports = {};
     __export2(function_exports, {
       debounce: () => debounce,
+      isStringFunction: () => isStringFunction,
       memoize: () => memoize2
     });
     module2.exports = __toCommonJS2(function_exports);
@@ -896,6 +903,10 @@ var require_function = __commonJS({
         }
       };
     };
+    var isStringFunction = (inputString) => {
+      const functionRegex = /^((function\s*\([^)]*\)\s*\{[^}]*\})|(\([^)]*\)\s*=>))/;
+      return functionRegex.test(inputString);
+    };
   }
 });
@@ -1320,11 +1331,11 @@ var require_tree = __commonJS({
       TREE: () => TREE
     });
     module2.exports = __toCommonJS2(tree_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_report = require_cjs2();
     var ROOT = {
       key: ":root",
-      node: import_utils21.document ? import_utils21.document.body : (0, import_report.report)("DocumentNotDefined", import_utils21.document)
+      node: import_utils20.document ? import_utils20.document.body : (0, import_report.report)("DocumentNotDefined", import_utils20.document)
     };
     var TREE = ROOT;
   }
@@ -1360,12 +1371,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var applyEvent = (param, element, state, context, options) => {
       return param(element, state || element.state, context || element.context, options);
     };
     var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils21.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils20.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -1374,7 +1385,7 @@ var require_on = __commonJS({
       return param(updatedObj, element, state || element.state, context || element.context, options);
     };
     var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils21.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils20.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -1385,7 +1396,7 @@ var require_on = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils21.isFunction)(appliedFunction)) {
+        if ((0, import_utils20.isFunction)(appliedFunction)) {
           const { state, context } = element;
           node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
         }
@@ -1421,10 +1432,10 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs2();
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils21.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils20.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -1515,7 +1526,7 @@ var require_cache = __commonJS({
     module2.exports = __toCommonJS2(cache_exports);
     var import_report = require_cjs2();
     var import_event = require_cjs3();
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var cache2 = {};
     var createHTMLNode = (element) => {
       const { tag } = element;
@@ -1534,15 +1545,15 @@ var require_cache = __commonJS({
     };
     var detectTag = (element) => {
       let { tag, key } = element;
-      tag = (0, import_utils21.exec)(tag, element);
+      tag = (0, import_utils20.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils21.isString)(tag)) {
-        const tagExists = (0, import_utils21.isValidHtmlTag)(tag);
+      if ((0, import_utils20.isString)(tag)) {
+        const tagExists = (0, import_utils20.isValidHtmlTag)(tag);
         if (tagExists)
           return tag;
       } else {
-        const isKeyATag = (0, import_utils21.isValidHtmlTag)(key);
+        const isKeyATag = (0, import_utils20.isValidHtmlTag)(key);
         if (isKeyATag)
           return key;
       }
@@ -1661,16 +1672,16 @@ var require_attr = __commonJS({
       default: () => attr_default
     });
     module2.exports = __toCommonJS2(attr_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_report = require_cjs2();
     var attr_default = (params, element, node2) => {
       const { __ref } = element;
       const { __attr } = __ref;
-      if ((0, import_utils21.isNot)("object"))
+      if ((0, import_utils20.isNot)("object"))
         (0, import_report.report)("HTMLInvalidAttr", params);
       if (params) {
         for (const attr in params) {
-          const val = (0, import_utils21.exec)(params[attr], element);
+          const val = (0, import_utils20.exec)(params[attr], element);
           if (val && node2.setAttribute)
             node2.setAttribute(attr, val);
           else if (node2.removeAttribute)
@@ -1713,7 +1724,7 @@ var require_classList = __commonJS({
       default: () => classList_default
     });
     module2.exports = __toCommonJS2(classList_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var assignKeyAsClassname = (element) => {
       const { key } = element;
       if (element.class === true)
@@ -1731,7 +1742,7 @@ var require_classList = __commonJS({
         else if (typeof param === "string")
           className += ` ${param}`;
         else if (typeof param === "function") {
-          className += ` ${(0, import_utils21.exec)(param, element)}`;
+          className += ` ${(0, import_utils20.exec)(param, element)}`;
         }
       }
       return className;
@@ -1742,9 +1753,9 @@ var require_classList = __commonJS({
       const { key } = element;
       if (params === true)
         params = element.class = { key };
-      if ((0, import_utils21.isString)(params))
+      if ((0, import_utils20.isString)(params))
         params = element.class = { default: params };
-      if ((0, import_utils21.isObject)(params))
+      if ((0, import_utils20.isObject)(params))
         params = classify2(params, element);
       const className = params.replace(/\s+/g, " ").trim();
       if (element.ref)
@@ -1828,7 +1839,7 @@ var require_set = __commonJS({
       default: () => set_default
     });
     module2.exports = __toCommonJS2(set_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_create = __toESM2(require_create4(), 1);
     var import_options3 = __toESM2(require_options(), 1);
     var import_mixins = require_mixins();
@@ -1836,7 +1847,7 @@ var require_set = __commonJS({
     var set5 = function(params, options = {}, el) {
       const element = el || this;
       const __contentRef = element.content && element.content.__ref;
-      if (__contentRef && __contentRef.__cached && (0, import_utils21.isEqualDeep)(params, element.content)) {
+      if (__contentRef && __contentRef.__cached && (0, import_utils20.isEqualDeep)(params, element.content)) {
         return element;
       }
       (0, import_content.removeContent)(element);
@@ -1896,7 +1907,7 @@ var require_content = __commonJS({
       updateContent: () => updateContent
     });
     module2.exports = __toCommonJS2(content_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_set = __toESM2(require_set(), 1);
     var updateContent = function(params, options) {
       const element = this;
@@ -1919,7 +1930,7 @@ var require_content = __commonJS({
         if (__cached && __cached.content) {
           if (__cached.content.tag === "fragment")
             __cached.content.parent.node.innerHTML = "";
-          else if (__cached.content && (0, import_utils21.isFunction)(__cached.content.remove))
+          else if (__cached.content && (0, import_utils20.isFunction)(__cached.content.remove))
             __cached.content.remove();
         }
         delete element.content;
@@ -1964,15 +1975,15 @@ var require_data = __commonJS({
       default: () => data_default
     });
     module2.exports = __toCommonJS2(data_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_report = require_cjs2();
     var data_default = (params, element, node2) => {
       if (params && params.showOnNode) {
-        if (!(0, import_utils21.isObject)(params))
+        if (!(0, import_utils20.isObject)(params))
           (0, import_report.report)("HTMLInvalidData", params);
         for (const dataset in params) {
           if (dataset !== "showOnNode") {
-            node2.dataset[dataset] = (0, import_utils21.exec)(params[dataset], element);
+            node2.dataset[dataset] = (0, import_utils20.exec)(params[dataset], element);
           }
         }
       }
@@ -2006,9 +2017,9 @@ var require_html = __commonJS({
       default: () => html_default
     });
     module2.exports = __toCommonJS2(html_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var html_default = (param, element, node2) => {
-      const prop = (0, import_utils21.exec)(param, element);
+      const prop = (0, import_utils20.exec)(param, element);
       const { __ref } = element;
       if (prop !== __ref.__html) {
         if (node2.nodeName === "SVG")
@@ -2047,12 +2058,12 @@ var require_style = __commonJS({
       default: () => style_default2
     });
     module2.exports = __toCommonJS2(style_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_report = require_cjs2();
     var style_default2 = (params, element, node2) => {
       if (params) {
-        if ((0, import_utils21.isObject)(params))
-          (0, import_utils21.map)(node2.style, params, element);
+        if ((0, import_utils20.isObject)(params))
+          (0, import_utils20.map)(node2.style, params, element);
         else
           (0, import_report.report)("HTMLInvalidStyles", params);
       }
@@ -2088,9 +2099,9 @@ var require_text = __commonJS({
     });
     module2.exports = __toCommonJS2(text_exports);
     var import__ = require_cjs7();
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var asd = (param, element, node2) => {
-      const prop = (0, import_utils21.exec)(param, element);
+      const prop = (0, import_utils20.exec)(param, element);
       if (element.tag === "string") {
         node2.nodeValue = prop;
       } else if (param !== void 0 || param !== null) {
@@ -2104,9 +2115,9 @@ var require_text = __commonJS({
       }
     };
     var text_default = (param, element, node2) => {
-      let prop = (0, import_utils21.exec)(param, element);
-      if ((0, import_utils21.isString)(prop) && prop.includes("{{")) {
-        prop = (0, import_utils21.replaceLiteralsWithObjectFields)(prop, element.state);
+      let prop = (0, import_utils20.exec)(param, element);
+      if ((0, import_utils20.isString)(prop) && prop.includes("{{")) {
+        prop = (0, import_utils20.replaceLiteralsWithObjectFields)(prop, element.state);
       }
       if (element.tag === "string") {
         if (element.text === prop)
@@ -2210,11 +2221,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_ignore = require_ignore();
     var parse3 = function() {
       const state = this;
-      if ((0, import_utils21.isObject)(state)) {
+      if ((0, import_utils20.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -2222,7 +2233,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils21.isArray)(state)) {
+      } else if ((0, import_utils20.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -2242,7 +2253,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils21.isString)(stateKey)) {
+      if ((0, import_utils20.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -2277,10 +2288,10 @@ var require_methods = __commonJS({
     };
     var add = function(value2, options = {}) {
       const state = this;
-      if ((0, import_utils21.isArray)(state)) {
+      if ((0, import_utils20.isArray)(state)) {
         state.push(value2);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils21.isObject)(state)) {
+      } else if ((0, import_utils20.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value2 }, options);
       }
@@ -2291,10 +2302,10 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils21.isArray)(state))
-        (0, import_utils21.removeFromArray)(state, key);
-      if ((0, import_utils21.isObject)(state))
-        (0, import_utils21.removeFromObject)(state, key);
+      if ((0, import_utils20.isArray)(state))
+        (0, import_utils20.removeFromArray)(state, key);
+      if ((0, import_utils20.isObject)(state))
+        (0, import_utils20.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
     var set5 = function(value2, options = {}) {
@@ -2303,7 +2314,7 @@ var require_methods = __commonJS({
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils21.isFunction)(func)) {
+      if ((0, import_utils20.isFunction)(func)) {
         func(state);
         return state.update(state, { replace: true, ...options });
       }
@@ -2343,7 +2354,7 @@ var require_inherit = __commonJS({
       isState: () => isState2
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -2397,9 +2408,9 @@ var require_inherit = __commonJS({
       const inheritedState = findInheritedState(element, parent);
       if (!inheritedState)
         return element.state;
-      if ((0, import_utils21.is)(inheritedState)("object", "array")) {
-        return (0, import_utils21.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils21.is)(inheritedState)("string", "number")) {
+      if ((0, import_utils20.is)(inheritedState)("object", "array")) {
+        return (0, import_utils20.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils20.is)(inheritedState)("string", "number")) {
         ref.__stateType = "string";
         return { value: inheritedState };
       }
@@ -2408,12 +2419,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (!stateKey || (0, import_utils21.isNot)(stateKey)("number", "string"))
+      if (!stateKey || (0, import_utils20.isNot)(stateKey)("number", "string"))
         return false;
       return true;
     };
     var isState2 = function(state) {
-      if (!(0, import_utils21.isObjectLike)(state))
+      if (!(0, import_utils20.isObjectLike)(state))
         return false;
       return state.update && state.parse && state.clean && state.create && state.parent && state.destroy && state.rootUpdate && state.parentUpdate && state.toggle && state.add && state.apply && state.__element && state.__children;
     };
@@ -2462,7 +2473,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs2();
     var import_event = require_cjs3();
     var import_ignore = require_ignore();
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -2476,7 +2487,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils21.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils20.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -2506,10 +2517,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils21.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils20.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils21.overwriteShallow : import_utils21.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils20.overwriteShallow : import_utils20.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -2600,7 +2611,7 @@ var require_create2 = __commonJS({
     });
     module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs3();
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -2614,7 +2625,7 @@ var require_create2 = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils21.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils20.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
@@ -2633,17 +2644,17 @@ var require_create2 = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils21.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils20.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils21.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils20.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils21.isFunction)(state)) {
+      if ((0, import_utils20.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils21.exec)(state, element);
-      } else if ((0, import_utils21.is)(state)("string", "number")) {
+        return (0, import_utils20.exec)(state, element);
+      } else if ((0, import_utils20.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       } else if (state === true) {
@@ -2690,7 +2701,7 @@ var require_create2 = __commonJS({
         __children: {},
         __root: ref.__root ? ref.__root.state : state
       };
-      if ((0, import_utils21.isArray)(state)) {
+      if ((0, import_utils20.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
@@ -2758,16 +2769,16 @@ var require_state = __commonJS({
     });
     module2.exports = __toCommonJS2(state_exports);
     var import_state2 = require_cjs5();
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var state = (params, element, node2) => {
-      const state2 = (0, import_utils21.exec)(params, element);
-      if ((0, import_utils21.isObject)(state2)) {
+      const state2 = (0, import_utils20.exec)(params, element);
+      if ((0, import_utils20.isObject)(state2)) {
         for (const param in state2) {
           if (import_state2.IGNORE_STATE_PARAMS.includes(param))
             continue;
           if (!Object.hasOwnProperty.call(state2, param))
             continue;
-          element.state[param] = (0, import_utils21.exec)(state2[param], element);
+          element.state[param] = (0, import_utils20.exec)(state2[param], element);
         }
       }
       return element;
@@ -2970,7 +2981,7 @@ var require_methods2 = __commonJS({
       spotByPath: () => spotByPath
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_tree = require_tree();
     var import_mixins = require_mixins();
     var spotByPath = function(path) {
@@ -3003,9 +3014,9 @@ var require_methods2 = __commonJS({
     };
     var remove = function(params) {
       const element = this;
-      if ((0, import_utils21.isFunction)(element.node.remove))
+      if ((0, import_utils20.isFunction)(element.node.remove))
         element.node.remove();
-      else if (!(0, import_utils21.isProduction)()) {
+      else if (!(0, import_utils20.isProduction)()) {
         console.warn("This item cant be removed");
         element.log();
       }
@@ -3045,12 +3056,12 @@ var require_methods2 = __commonJS({
         if (v === "state") {
           if (element.__ref && element.__ref.__hasRootState)
             return;
-          if ((0, import_utils21.isFunction)(val && val.parse))
+          if ((0, import_utils20.isFunction)(val && val.parse))
             val = val.parse();
         } else if (v === "props") {
           const { __element, update, ...props4 } = element[v];
           obj[v] = props4;
-        } else if ((0, import_utils21.isDefined)(val))
+        } else if ((0, import_utils20.isDefined)(val))
           obj[v] = val;
       });
       return obj;
@@ -3061,7 +3072,7 @@ var require_methods2 = __commonJS({
       for (const v in obj) {
         if (excl.includes(v))
           return;
-        if ((0, import_utils21.isObjectLike)(obj[v])) {
+        if ((0, import_utils20.isObjectLike)(obj[v])) {
           obj[v] = parseDeep.call(obj[v], excl);
         }
       }
@@ -3179,18 +3190,18 @@ var require_inherit2 = __commonJS({
       inheritParentProps: () => inheritParentProps
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var objectizeStringProperty = (propValue) => {
-      if ((0, import_utils21.is)(propValue)("string", "number")) {
+      if ((0, import_utils20.is)(propValue)("string", "number")) {
         return { inheritedString: propValue };
       }
       return propValue;
     };
     var inheritParentProps = (element, parent) => {
       let propsStack = [];
-      const parentProps = (0, import_utils21.exec)(parent, parent.state).props;
+      const parentProps = (0, import_utils20.exec)(parent, parent.state).props;
       const matchParent = parent.props && parentProps[element.key];
-      const matchParentIsString = (0, import_utils21.isString)(matchParent);
+      const matchParentIsString = (0, import_utils20.isString)(matchParent);
       const matchParentChildProps = parentProps && parentProps.childProps;
       if (matchParent) {
         if (matchParentIsString) {
@@ -3238,19 +3249,19 @@ var require_create3 = __commonJS({
       syncProps: () => syncProps
     });
     module2.exports = __toCommonJS2(create_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_ignore = require_ignore2();
     var import_inherit = require_inherit2();
     var createPropsStack = (element, parent) => {
       const { props: props4, __ref } = element;
       const propsStack = __ref.__props = (0, import_inherit.inheritParentProps)(element, parent);
-      if ((0, import_utils21.isObject)(props4))
+      if ((0, import_utils20.isObject)(props4))
         propsStack.push(props4);
       else if (props4 === "inherit" && parent.props)
         propsStack.push(parent.props);
       else if (props4)
         propsStack.push(props4);
-      if ((0, import_utils21.isArray)(__ref.__extend)) {
+      if ((0, import_utils20.isArray)(__ref.__extend)) {
         __ref.__extend.forEach((extend) => {
           if (extend.props)
             propsStack.push(extend.props);
@@ -3265,12 +3276,12 @@ var require_create3 = __commonJS({
       props4.forEach((v) => {
         if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
           return;
-        const execProps = (0, import_utils21.exec)(v, element);
-        if ((0, import_utils21.isObject)(execProps) && execProps.__element)
+        const execProps = (0, import_utils20.exec)(v, element);
+        if ((0, import_utils20.isObject)(execProps) && execProps.__element)
           return;
-        element.props = (0, import_utils21.deepMerge)(
+        element.props = (0, import_utils20.deepMerge)(
           mergedProps,
-          (0, import_utils21.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
+          (0, import_utils20.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
           import_ignore.IGNORE_PROPS_PARAMS
         );
       });
@@ -3402,11 +3413,11 @@ var require_object2 = __commonJS({
       overwriteShallow: () => overwriteShallow2
     });
     module2.exports = __toCommonJS2(object_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_state2 = require_cjs5();
     var import_props = require_props();
     var import_methods = require_methods2();
-    var METHODS_EXL = (0, import_utils21.joinArrays)(
+    var METHODS_EXL = (0, import_utils20.joinArrays)(
       ["node", "state", "context", "extend"],
       import_methods.METHODS,
       import_state2.IGNORE_STATE_PARAMS,
@@ -3420,7 +3431,7 @@ var require_object2 = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils21.isObjectLike)(elementProp) && (0, import_utils21.isObject)(extendProp)) {
+        } else if ((0, import_utils20.isObjectLike)(elementProp) && (0, import_utils20.isObject)(extendProp)) {
           deepMerge4(elementProp, extendProp);
         }
       }
@@ -3436,15 +3447,15 @@ var require_object2 = __commonJS({
       return o;
     };
     var deepClone3 = (obj, exclude = METHODS_EXL) => {
-      const o = (0, import_utils21.isArray)(obj) ? [] : {};
+      const o = (0, import_utils20.isArray)(obj) ? [] : {};
       for (const e in obj) {
         if (exclude.includes(e))
           continue;
         let objProp = obj[e];
-        if (e === "extend" && (0, import_utils21.isArray)(objProp)) {
+        if (e === "extend" && (0, import_utils20.isArray)(objProp)) {
           objProp = mergeArray(objProp, exclude);
         }
-        if ((0, import_utils21.isObjectLike)(objProp)) {
+        if ((0, import_utils20.isObjectLike)(objProp)) {
           o[e] = deepClone3(objProp, exclude);
         } else
           o[e] = objProp;
@@ -3483,7 +3494,7 @@ var require_object2 = __commonJS({
           continue;
         const objProp = obj[e];
         const paramsProp = params[e];
-        if ((0, import_utils21.isObjectLike)(objProp) && (0, import_utils21.isObjectLike)(paramsProp)) {
+        if ((0, import_utils20.isObjectLike)(objProp) && (0, import_utils20.isObjectLike)(paramsProp)) {
           overwriteDeep(objProp, paramsProp);
         } else if (paramsProp !== void 0) {
           obj[e] = paramsProp;
@@ -3492,7 +3503,7 @@ var require_object2 = __commonJS({
       return obj;
     };
     var mergeIfExisted = (a, b) => {
-      if ((0, import_utils21.isObjectLike)(a) && (0, import_utils21.isObjectLike)(b))
+      if ((0, import_utils20.isObjectLike)(a) && (0, import_utils20.isObjectLike)(b))
         return deepMerge4(a, b);
       return a || b;
     };
@@ -3500,7 +3511,7 @@ var require_object2 = __commonJS({
       return arr.reduce((a, c) => deepMerge4(a, deepClone3(c, exclude)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
-      return (0, import_utils21.isArray)(obj) ? mergeArray(obj) : deepClone3(obj);
+      return (0, import_utils20.isArray)(obj) ? mergeArray(obj) : deepClone3(obj);
     };
     var flattenRecursive = (param, prop, stack = []) => {
       const objectized = mergeAndCloneIfArray(param);
@@ -3556,7 +3567,7 @@ var require_extendUtils = __commonJS({
       setHashedExtend: () => setHashedExtend
     });
     module2.exports = __toCommonJS2(extendUtils_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var ENV2 = "development";
     var generateHash = () => Math.random().toString(36).substring(2);
     var extendStackRegistry = {};
@@ -3566,7 +3577,7 @@ var require_extendUtils = __commonJS({
     };
     var setHashedExtend = (extend, stack) => {
       const hash2 = generateHash();
-      if (!(0, import_utils21.isString)(extend)) {
+      if (!(0, import_utils20.isString)(extend)) {
         extend.__hash = hash2;
       }
       extendStackRegistry[hash2] = stack;
@@ -3592,7 +3603,7 @@ var require_extendUtils = __commonJS({
     var flattenExtend = (extend, stack) => {
       if (!extend)
         return stack;
-      if ((0, import_utils21.isArray)(extend))
+      if ((0, import_utils20.isArray)(extend))
         return extractArrayExtend(extend, stack);
       stack.push(extend);
       if (extend.extend)
@@ -3605,9 +3616,9 @@ var require_extendUtils = __commonJS({
         if (["parent", "node", "__element"].indexOf(prop) > -1)
           continue;
         const objProp = obj[prop];
-        if ((0, import_utils21.isObject)(objProp)) {
+        if ((0, import_utils20.isObject)(objProp)) {
           o[prop] = deepCloneExtend(objProp);
-        } else if ((0, import_utils21.isArray)(objProp)) {
+        } else if ((0, import_utils20.isArray)(objProp)) {
           o[prop] = objProp.map((x) => x);
         } else
           o[prop] = objProp;
@@ -3622,14 +3633,14 @@ var require_extendUtils = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils21.isObject)(elementProp) && (0, import_utils21.isObject)(extendProp)) {
+        } else if ((0, import_utils20.isObject)(elementProp) && (0, import_utils20.isObject)(extendProp)) {
           deepMergeExtend(elementProp, extendProp);
-        } else if ((0, import_utils21.isArray)(elementProp) && (0, import_utils21.isArray)(extendProp)) {
+        } else if ((0, import_utils20.isArray)(elementProp) && (0, import_utils20.isArray)(extendProp)) {
           element[e] = elementProp.concat(extendProp);
-        } else if ((0, import_utils21.isArray)(elementProp) && (0, import_utils21.isObject)(extendProp)) {
+        } else if ((0, import_utils20.isArray)(elementProp) && (0, import_utils20.isObject)(extendProp)) {
           const obj = deepMergeExtend({}, elementProp);
           element[e] = deepMergeExtend(obj, extendProp);
-        } else if (elementProp === void 0 && (0, import_utils21.isFunction)(extendProp)) {
+        } else if (elementProp === void 0 && (0, import_utils20.isFunction)(extendProp)) {
           element[e] = extendProp;
         }
       }
@@ -3642,7 +3653,7 @@ var require_extendUtils = __commonJS({
     };
     var fallbackStringExtend = (extend, context, options) => {
       const COMPONENTS = context && context.components || options.components;
-      if ((0, import_utils21.isString)(extend)) {
+      if ((0, import_utils20.isString)(extend)) {
         console.log("extend", extend);
         console.log(COMPONENTS[extend]);
         if (COMPONENTS && COMPONENTS[extend]) {
@@ -3674,11 +3685,11 @@ var require_extendUtils = __commonJS({
     var replaceStringsWithComponents = (stack, context, options) => {
       const COMPONENTS = context && context.components || options.components;
       return stack.map((v) => {
-        if ((0, import_utils21.isString)(v)) {
+        if ((0, import_utils20.isString)(v)) {
           const component = COMPONENTS[v];
           return component;
         }
-        if ((0, import_utils21.isString)(v.extend)) {
+        if ((0, import_utils20.isString)(v.extend)) {
           v.extend = COMPONENTS[v.extend];
           return { ...getExtendMerged(v.extend), ...v };
         }
@@ -3714,12 +3725,12 @@ var require_extend = __commonJS({
       applyExtend: () => applyExtend
     });
     module2.exports = __toCommonJS2(extend_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_utils22 = require_utils();
     var ENV2 = "development";
     var applyExtend = (element, parent, options = {}) => {
-      if ((0, import_utils21.isFunction)(element))
-        element = (0, import_utils21.exec)(element, parent);
+      if ((0, import_utils20.isFunction)(element))
+        element = (0, import_utils20.exec)(element, parent);
       let { extend, props: props4, context, __ref } = element;
       extend = (0, import_utils22.fallbackStringExtend)(extend, context, options);
       const extendStack = (0, import_utils22.getExtendStack)(extend);
@@ -3763,7 +3774,7 @@ var require_extend = __commonJS({
       const findAndReplaceStrings = (0, import_utils22.replaceStringsWithComponents)(stack, context, options);
       let mergedExtend = (0, import_utils22.cloneAndMergeArrayExtend)(findAndReplaceStrings);
       const COMPONENTS = context && context.components || options.components;
-      const component = (0, import_utils21.exec)(element.component || mergedExtend.component, element);
+      const component = (0, import_utils20.exec)(element.component || mergedExtend.component, element);
       if (component && COMPONENTS && COMPONENTS[component]) {
         const componentExtend = (0, import_utils22.cloneAndMergeArrayExtend)((0, import_utils22.getExtendStack)(COMPONENTS[component]));
         mergedExtend = (0, import_utils22.deepMergeExtend)(componentExtend, mergedExtend);
@@ -3807,11 +3818,11 @@ var require_component = __commonJS({
       overwriteVariant: () => overwriteVariant
     });
     module2.exports = __toCommonJS2(component_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_extend = require_extend();
     var ENV2 = "development";
     var checkIfKeyIsComponent = (key) => {
-      const isFirstKeyString = (0, import_utils21.isString)(key);
+      const isFirstKeyString = (0, import_utils20.isString)(key);
       if (!isFirstKeyString)
         return;
       const firstCharKey = key.slice(0, 1);
@@ -3819,7 +3830,7 @@ var require_component = __commonJS({
     };
     var addAdditionalExtend = (newExtend, element) => {
       const { extend } = element;
-      const preserveExtend = (0, import_utils21.isArray)(extend) ? extend : [extend];
+      const preserveExtend = (0, import_utils20.isArray)(extend) ? extend : [extend];
       return {
         ...element,
         extend: [newExtend].concat(preserveExtend)
@@ -3842,10 +3853,10 @@ var require_component = __commonJS({
         };
       } else if (extend) {
         addAdditionalExtend(extendKey, element);
-      } else if ((0, import_utils21.isFunction)(element)) {
+      } else if ((0, import_utils20.isFunction)(element)) {
         return {
           extend: extendKey,
-          props: { ...(0, import_utils21.exec)(element, parent) }
+          props: { ...(0, import_utils20.exec)(element, parent) }
         };
       }
     };
@@ -3858,8 +3869,8 @@ var require_component = __commonJS({
         return;
       const { components } = context;
       const { extend } = element;
-      const execExtend = (0, import_utils21.exec)(extend, element);
-      if ((0, import_utils21.isString)(execExtend)) {
+      const execExtend = (0, import_utils20.exec)(extend, element);
+      if ((0, import_utils20.isString)(execExtend)) {
         if (components[execExtend])
           element.extend = components[execExtend];
         else {
@@ -3872,29 +3883,29 @@ var require_component = __commonJS({
       }
     };
     var isVariant = (param) => {
-      if (!(0, import_utils21.isString)(param))
+      if (!(0, import_utils20.isString)(param))
         return;
       const firstCharKey = param.slice(0, 1);
       return firstCharKey === ".";
     };
     var hasVariantProp = (element) => {
       const { props: props4 } = element;
-      if ((0, import_utils21.isObject)(props4) && (0, import_utils21.isString)(props4.variant))
+      if ((0, import_utils20.isObject)(props4) && (0, import_utils20.isString)(props4.variant))
         return true;
     };
     var overwriteVariant = (element, variant, variantProps) => {
       let variantElement = element[variant];
       if (!variantElement)
         return;
-      const props4 = (0, import_utils21.isObject)(variantProps) ? variantProps : {};
-      if ((0, import_utils21.isString)(variantElement)) {
+      const props4 = (0, import_utils20.isObject)(variantProps) ? variantProps : {};
+      if ((0, import_utils20.isString)(variantElement)) {
         variantElement = {
           extend: [{ props: props4 }, variantElement]
         };
       } else if (variantElement.extend) {
         variantElement = addAdditionalExtend({ props: props4 }, variantElement);
       }
-      return (0, import_utils21.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
+      return (0, import_utils20.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
     };
     var applyVariant = (element) => {
       const { props: props4 } = element;
@@ -3969,7 +3980,7 @@ var require_iterate = __commonJS({
       throughUpdatedExec: () => throughUpdatedExec
     });
     module2.exports = __toCommonJS2(iterate_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_utils22 = require_utils();
     var import_methods = require_methods2();
     var throughInitialExec = (element, exclude = {}) => {
@@ -3978,7 +3989,7 @@ var require_iterate = __commonJS({
         if (exclude[param])
           continue;
         const prop = element[param];
-        if ((0, import_utils21.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils22.isVariant)(param)) {
+        if ((0, import_utils20.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils22.isVariant)(param)) {
           ref.__exec[param] = prop;
           element[param] = prop(element, element.state);
         }
@@ -3993,7 +4004,7 @@ var require_iterate = __commonJS({
         if (isDefinedParam)
           continue;
         const newExec = ref.__exec[param](element, element.state, element.context);
-        const execReturnsString = (0, import_utils21.isString)(newExec) || (0, import_utils21.isNumber)(newExec);
+        const execReturnsString = (0, import_utils20.isString)(newExec) || (0, import_utils20.isNumber)(newExec);
         if (prop && prop.node && execReturnsString) {
           (0, import_utils22.overwrite)(prop, { text: newExec }, options);
         } else if (newExec !== prop) {
@@ -4011,16 +4022,16 @@ var require_iterate = __commonJS({
     var throughInitialDefine = (element) => {
       const { define, context, __ref: ref } = element;
       let defineObj = {};
-      const hasGlobalDefine = context && (0, import_utils21.isObject)(context.define);
-      if ((0, import_utils21.isObject)(define))
+      const hasGlobalDefine = context && (0, import_utils20.isObject)(context.define);
+      if ((0, import_utils20.isObject)(define))
         defineObj = { ...define };
       if (hasGlobalDefine)
         defineObj = { ...defineObj, ...context.define };
       for (const param in defineObj) {
         let elementProp = element[param];
-        if ((0, import_utils21.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils22.isVariant)(param)) {
+        if ((0, import_utils20.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils22.isVariant)(param)) {
           ref.__exec[param] = elementProp;
-          const execParam2 = elementProp = (0, import_utils21.exec)(elementProp, element);
+          const execParam2 = elementProp = (0, import_utils20.exec)(elementProp, element);
           if (execParam2) {
             elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
             ref.__defineCache[param] = elementProp;
@@ -4036,15 +4047,15 @@ var require_iterate = __commonJS({
       const { context, define, __ref: ref } = element;
       const changes = {};
       let obj = {};
-      if ((0, import_utils21.isObject)(define))
+      if ((0, import_utils20.isObject)(define))
         obj = { ...define };
-      if ((0, import_utils21.isObject)(context && context.define))
+      if ((0, import_utils20.isObject)(context && context.define))
         obj = { ...obj, ...context.define };
       for (const param in obj) {
         const execParam = ref.__exec[param];
         if (execParam)
           ref.__defineCache[param] = execParam(element, element.state, element.context);
-        const cached = (0, import_utils21.exec)(ref.__defineCache[param], element);
+        const cached = (0, import_utils20.exec)(ref.__defineCache[param], element);
         const newExecParam = obj[param](cached, element, element.state, element.context);
         if (newExecParam)
           element[param] = newExecParam;
@@ -4080,7 +4091,7 @@ var require_applyParam = __commonJS({
       applyParam: () => applyParam
     });
     module2.exports = __toCommonJS2(applyParam_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_mixins = require_mixins();
     var applyParam = (param, element, options) => {
       const { node: node2, context, __ref: ref } = element;
@@ -4093,7 +4104,7 @@ var require_applyParam = __commonJS({
       if (!ref.__if)
         return;
       if (isGlobalTransformer && !hasContextDefine) {
-        if ((0, import_utils21.isFunction)(isGlobalTransformer)) {
+        if ((0, import_utils20.isFunction)(isGlobalTransformer)) {
           isGlobalTransformer(prop, element, node2, options);
           return;
         }
@@ -4140,7 +4151,7 @@ var require_node2 = __commonJS({
       default: () => node_default
     });
     module2.exports = __toCommonJS2(node_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_event = require_cjs3();
     var import_render = require_cjs4();
     var import_methods = require_methods2();
@@ -4165,23 +4176,27 @@ var require_node2 = __commonJS({
       }
       if (ENV2 === "test" || ENV2 === "development" || options.alowRefReference) {
         node2.ref = element;
-        if ((0, import_utils21.isFunction)(node2.setAttribute))
+        if ((0, import_utils20.isFunction)(node2.setAttribute))
           node2.setAttribute("key", element.key);
       }
       if (element.tag !== "string" || element.tag !== "fragment") {
         (0, import_iterate.throughInitialDefine)(element);
         (0, import_iterate.throughInitialExec)(element);
-        if (isNewNode && (0, import_utils21.isObject)(element.on))
+        if (isNewNode && (0, import_utils20.isObject)(element.on))
           (0, import_event.applyEventsOnNode)(element);
         for (const param in element) {
           const prop = element[param];
-          if ((0, import_utils21.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils22.isVariant)(param) || (0, import_utils21.isObject)(import_mixins.registry[param]))
+          if ((0, import_utils20.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils22.isVariant)(param) || (0, import_utils20.isObject)(import_mixins.registry[param]))
             continue;
           const isElement = (0, import_applyParam.applyParam)(param, element, options);
           if (isElement) {
             const { hasDefine, hasContextDefine } = isElement;
             if (element[param] && !hasDefine && !hasContextDefine) {
-              (0, import_create.default)((0, import_utils21.exec)(prop, element), element, param, options);
+              const createAsync = () => (0, import_create.default)((0, import_utils20.exec)(prop, element), element, param, options);
+              if (element.props && element.props.lazyLoad || options.lazyLoad) {
+                window.requestAnimationFrame(() => createAsync());
+              } else
+                createAsync();
             }
           }
         }
@@ -4218,7 +4233,7 @@ var require_methods3 = __commonJS({
       DEFAULT_METHODS: () => DEFAULT_METHODS
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var DEFAULT_METHODS = {
       key: {},
       tag: {},
@@ -4239,7 +4254,7 @@ var require_methods3 = __commonJS({
       text: (element, state) => {
         element.ref.text = {
           tag: "text",
-          text: (0, import_utils21.exec)(element.text, element, state)
+          text: (0, import_utils20.exec)(element.text, element, state)
         };
       },
       innerHTML: {},
@@ -4476,7 +4491,7 @@ var require_update2 = __commonJS({
       default: () => update_default
     });
     module2.exports = __toCommonJS2(update_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_event = require_cjs3();
     var import_methods = require_methods2();
     var import_props = require_props();
@@ -4488,7 +4503,7 @@ var require_update2 = __commonJS({
     var import_applyParam = require_applyParam();
     var import_options3 = __toESM2(require_options(), 1);
     var snapshot = {
-      snapshotId: import_utils21.createSnapshotId
+      snapshotId: import_utils20.createSnapshotId
     };
     var UPDATE_DEFAULT_OPTIONS = {
       stackChanges: false,
@@ -4505,14 +4520,14 @@ var require_update2 = __commonJS({
       if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
         return;
       if (!excludes)
-        (0, import_utils21.merge)(options, UPDATE_DEFAULT_OPTIONS);
+        (0, import_utils20.merge)(options, UPDATE_DEFAULT_OPTIONS);
       let ref = element.__ref;
       if (!ref)
         ref = element.__ref = {};
       const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options);
       if (snapshotHasUpdated)
         return;
-      if ((0, import_utils21.isString)(params) || (0, import_utils21.isNumber)(params)) {
+      if ((0, import_utils20.isString)(params) || (0, import_utils20.isNumber)(params)) {
         params = { text: params };
       }
       const ifFails = checkIfOnUpdate(element, parent, options);
@@ -4523,7 +4538,7 @@ var require_update2 = __commonJS({
         return;
       if (ref.__if && !options.preventPropsUpdate) {
         const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
-        const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils21.isFunction)(v));
+        const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils20.isFunction)(v));
         const props4 = params.props || hasParentProps || hasFunctionInProps.length;
         if (props4)
           (0, import_props.updateProps)(props4, element, parent);
@@ -4536,11 +4551,11 @@ var require_update2 = __commonJS({
         if (initUpdateReturns === false)
           return element;
       }
-      const overwriteChanges = (0, import_utils21.overwriteDeep)(element, params, import_utils22.METHODS_EXL);
+      const overwriteChanges = (0, import_utils20.overwriteDeep)(element, params, import_utils22.METHODS_EXL);
       const execChanges = (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
       const definedChanges = (0, import_iterate.throughUpdatedDefine)(element);
       if (options.stackChanges && element.__stackChanges) {
-        const stackChanges = (0, import_utils21.merge)(definedChanges, (0, import_utils21.merge)(execChanges, overwriteChanges));
+        const stackChanges = (0, import_utils20.merge)(definedChanges, (0, import_utils20.merge)(execChanges, overwriteChanges));
         element.__stackChanges.push(stackChanges);
       }
       if (!ref.__if)
@@ -4551,16 +4566,16 @@ var require_update2 = __commonJS({
       for (const param in element) {
         const prop = element[param];
         const hasOnlyUpdateFalsy = options.onlyUpdate && (options.onlyUpdate !== param || !element.lookup(options.onlyUpdate));
-        const isInPreventUpdate = (0, import_utils21.isArray)(options.preventUpdate) && options.preventUpdate.includes(param);
-        const isInPreventDefineUpdate = (0, import_utils21.isArray)(options.preventDefineUpdate) && options.preventDefineUpdate.includes(param);
-        if ((0, import_utils21.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || options.preventDefineUpdate === true || options.preventDefineUpdate === param || options.preventContentUpdate && param === "content" || (options.preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils21.isObject)(import_mixins.registry[param]) || (0, import_utils22.isVariant)(param))
+        const isInPreventUpdate = (0, import_utils20.isArray)(options.preventUpdate) && options.preventUpdate.includes(param);
+        const isInPreventDefineUpdate = (0, import_utils20.isArray)(options.preventDefineUpdate) && options.preventDefineUpdate.includes(param);
+        if ((0, import_utils20.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || options.preventDefineUpdate === true || options.preventDefineUpdate === param || options.preventContentUpdate && param === "content" || (options.preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils20.isObject)(import_mixins.registry[param]) || (0, import_utils22.isVariant)(param))
           continue;
         if (options.preventStateUpdate === "once")
           options.preventStateUpdate = false;
         const isElement = (0, import_applyParam.applyParam)(param, element, options);
         if (isElement) {
           const { hasDefine, hasContextDefine } = isElement;
-          const canUpdate = (0, import_utils21.isObject)(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive;
+          const canUpdate = (0, import_utils20.isObject)(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive;
           if (!canUpdate)
             continue;
           const childUpdateCall = () => update.call(prop, params[prop], {
@@ -4569,7 +4584,7 @@ var require_update2 = __commonJS({
             calleeElement
           });
           if (element.props && element.props.lazyLoad || options.lazyLoad) {
-            import_utils21.window.requestAnimationFrame(() => childUpdateCall());
+            import_utils20.window.requestAnimationFrame(() => childUpdateCall());
           } else
             childUpdateCall();
         }
@@ -4593,7 +4608,7 @@ var require_update2 = __commonJS({
       return [snapshotOnCallee, calleeElement];
     };
     var checkIfOnUpdate = (element, parent, options) => {
-      if (!(0, import_utils21.isFunction)(element.if) || !element.state || !parent)
+      if (!(0, import_utils20.isFunction)(element.if) || !element.state || !parent)
         return;
       const ref = element.__ref;
       const ifPassed = element.if(element, element.state, element.context, options);
@@ -4610,7 +4625,7 @@ var require_update2 = __commonJS({
             element.state = ref.__state;
           }
           const created = (0, import_create.default)(element, parent, element.key, import_options3.default.create);
-          if (options.preventUpdate !== true && element.on && (0, import_utils21.isFunction)(element.on.update)) {
+          if (options.preventUpdate !== true && element.on && (0, import_utils20.isFunction)(element.on.update)) {
             (0, import_event.applyEvent)(element.on.update, created, created.state);
           }
           return created;
@@ -4631,9 +4646,9 @@ var require_update2 = __commonJS({
         return;
       }
       const { isHoisted, execStateFunction, stateFunctionOverwrite } = options;
-      const shouldForceStateUpdate = (0, import_utils21.isFunction)(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite);
+      const shouldForceStateUpdate = (0, import_utils20.isFunction)(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite);
       if (shouldForceStateUpdate) {
-        const execState = (0, import_utils21.exec)(stateKey, element);
+        const execState = (0, import_utils20.exec)(stateKey, element);
         state.set(execState, {
           ...options,
           preventUpdate: true
@@ -4705,7 +4720,7 @@ var require_set2 = __commonJS({
       addMethods: () => addMethods
     });
     module2.exports = __toCommonJS2(set_exports);
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_set = __toESM2(require_set(), 1);
     var import_update = __toESM2(require_update2(), 1);
     var import__ = require_methods2();
@@ -4726,7 +4741,7 @@ var require_set2 = __commonJS({
         nextElement: import__.nextElement.bind(element),
         previousElement: import__.previousElement.bind(element)
       };
-      if ((0, import_utils21.isDevelopment)())
+      if ((0, import_utils20.isDevelopment)())
         proto.log = import__.log.bind(element);
       Object.setPrototypeOf(element, proto);
     };
@@ -4782,7 +4797,7 @@ var require_create4 = __commonJS({
     var import_set = require_set2();
     var import_classList = require_classList();
     var import_iterate = require_iterate();
-    var import_utils21 = require_cjs();
+    var import_utils20 = require_cjs();
     var import_options3 = __toESM2(require_options(), 1);
     var import_component = require_component();
     var ENV2 = "development";
@@ -4795,7 +4810,7 @@ var require_create4 = __commonJS({
       parent = redefineParent(element, parent, key);
       key = createKey(element, parent, key);
       const ref = addRef(element, parent, key);
-      ref.__initialProps = (0, import_utils21.deepClone)(element.props, []);
+      ref.__initialProps = (0, import_utils20.deepClone)(element.props, []);
       applyContext(element, parent, options);
       (0, import_component.applyComponentFromContext)(element, parent, options);
       (0, import_extend.applyExtend)(element, parent, options);
@@ -4830,7 +4845,7 @@ var require_create4 = __commonJS({
         }
         return {};
       }
-      if ((0, import_utils21.isString)(key) && key.slice(0, 2 === "__")) {
+      if ((0, import_utils20.isString)(key) && key.slice(0, 2 === "__")) {
         if (ENV2 === "test" || ENV2 === "development") {
           console.warn(key, "seems like to be in __ref");
         }
@@ -4857,7 +4872,7 @@ var require_create4 = __commonJS({
     var redefineParent = (element, parent, key, options) => {
       if (!parent)
         return import_tree.ROOT;
-      if ((0, import_utils21.isNode)(parent)) {
+      if ((0, import_utils20.isNode)(parent)) {
         const parentNodeWrapper = { key: ":root", node: parent };
         import_tree.ROOT[`${key}_parent`] = parentNodeWrapper;
         return parentNodeWrapper;
@@ -4871,7 +4886,7 @@ var require_create4 = __commonJS({
       }
     };
     var createKey = (element, parent, key) => {
-      return (key || element.key || (0, import_utils21.generateKey)()).toString();
+      return ((0, import_utils20.exec)(key, element) || key || element.key || (0, import_utils20.generateKey)()).toString();
     };
     var addRef = (element, parent) => {
       if (element.__ref)
@@ -4901,7 +4916,7 @@ var require_create4 = __commonJS({
       (0, import_event.triggerEventOn)("render", element, options);
     };
     var checkIfPrimitive = (element) => {
-      return (0, import_utils21.is)(element)("string", "number");
+      return (0, import_utils20.is)(element)("string", "number");
     };
     var applyValueAsText = (element, parent, key) => {
       const extendTag = element.extend && element.extend.tag;
@@ -4920,7 +4935,7 @@ var require_create4 = __commonJS({
     };
     var createIfConditionFlag = (element, parent) => {
       const { __ref: ref } = element;
-      if ((0, import_utils21.isFunction)(element.if)) {
+      if ((0, import_utils20.isFunction)(element.if)) {
         const ifPassed = element.if(element, element.state);
         if (!ifPassed) {
           const ifFragment = (0, import_render.cacheNode)({ tag: "fragment" });
@@ -4989,7 +5004,7 @@ var require_create4 = __commonJS({
       (0, import_set.addMethods)(element, parent);
       (0, import_state2.createState)(element, parent);
       const ref = __ref;
-      if ((0, import_utils21.isFunction)(element.if)) {
+      if ((0, import_utils20.isFunction)(element.if)) {
         const ifPassed = element.if(element, element.state);
         if (!ifPassed) {
           delete ref.__if;
@@ -5008,7 +5023,7 @@ var require_create4 = __commonJS({
         (0, import_iterate.throughInitialDefine)(element);
         (0, import_iterate.throughInitialExec)(element);
         for (const k in element) {
-          if ((0, import_utils21.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils21.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
+          if ((0, import_utils20.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils20.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
             continue;
           const hasDefine = element.define && element.define[k];
           const contextHasDefine = element.context && element.context.define && element.context.define[k];
@@ -5016,7 +5031,7 @@ var require_create4 = __commonJS({
           if (import_mixins.registry[k] && !optionsHasDefine) {
             continue;
           } else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
-            create2((0, import_utils21.exec)(element[k], element), element, k, options);
+            create2((0, import_utils20.exec)(element[k], element), element, k, options);
           }
         }
       }
@@ -6014,22 +6029,28 @@ var require_cjs9 = __commonJS({
           delete objectized[prop];
           return stack;
         };
-        var isEqualDeep2 = (param, element) => {
-          if (param === element)
+        var isEqualDeep2 = (param, element, visited = /* @__PURE__ */ new Set()) => {
+          if (typeof param !== "object" || typeof element !== "object" || param === null || element === null) {
+            return param === element;
+          }
+          if (visited.has(param) || visited.has(element)) {
             return true;
-          if (!param || !element)
+          }
+          visited.add(param);
+          visited.add(element);
+          const keysParam = Object.keys(param);
+          const keysElement = Object.keys(element);
+          if (keysParam.length !== keysElement.length) {
             return false;
-          for (const prop in param) {
-            const paramProp = param[prop];
-            const elementProp = element[prop];
-            if ((0, import_types.isObjectLike)(paramProp)) {
-              const isEqual = isEqualDeep2(paramProp, elementProp);
-              if (!isEqual)
-                return false;
-            } else {
-              const isEqual = paramProp === elementProp;
-              if (!isEqual)
-                return false;
+          }
+          for (const key of keysParam) {
+            if (!keysElement.includes(key)) {
+              return false;
+            }
+            const paramProp = param[key];
+            const elementProp = element[key];
+            if (!isEqualDeep2(paramProp, elementProp, visited)) {
+              return false;
             }
           }
           return true;
@@ -6071,6 +6092,7 @@ var require_cjs9 = __commonJS({
         var function_exports = {};
         __export22(function_exports, {
           debounce: () => debounce,
+          isStringFunction: () => isStringFunction,
           memoize: () => memoize2
         });
         module22.exports = __toCommonJS22(function_exports);
@@ -6096,6 +6118,10 @@ var require_cjs9 = __commonJS({
             }
           };
         };
+        var isStringFunction = (inputString) => {
+          const functionRegex = /^((function\s*\([^)]*\)\s*\{[^}]*\})|(\([^)]*\)\s*=>))/;
+          return functionRegex.test(inputString);
+        };
       }
     });
     var require_log2 = __commonJS2({
@@ -6537,7 +6563,7 @@ var require_cjs9 = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals2 = __toESM2(require_cjs13(), 1);
-    var import_utils21 = __toESM2(require_cjs22(), 1);
+    var import_utils20 = __toESM2(require_cjs22(), 1);
     var ENV2 = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -6665,9 +6691,9 @@ var require_cjs9 = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils21.isString)(rgb))
+      if ((0, import_utils20.isString)(rgb))
         rgb = rgb.split(", ").map((v) => parseFloat(v));
-      if ((0, import_utils21.isNumber)(tone))
+      if ((0, import_utils20.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -8157,8 +8183,8 @@ var require_cjs10 = __commonJS({
       router: () => router2
     });
     module2.exports = __toCommonJS2(router_exports);
-    var import_utils21 = require_cjs();
-    var getActiveRoute = (level = 0, route = import_utils21.window.location.pathname) => {
+    var import_utils20 = require_cjs();
+    var getActiveRoute = (level = 0, route = import_utils20.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -8172,7 +8198,7 @@ var require_cjs10 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils21.document && import_utils21.document.documentElement,
+      scrollNode: import_utils20.document && import_utils20.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -8187,13 +8213,13 @@ var require_cjs10 = __commonJS({
       const route = getActiveRoute(options.level, pathname);
       const content = element.routes[route || "/"] || element.routes["/*"];
       const scrollNode = options.scrollToNode ? rootNode : options.scrollNode;
-      const hashChanged = hash2 && hash2 !== import_utils21.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== import_utils20.window.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content)
         return;
       if (options.pushState) {
-        import_utils21.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        import_utils20.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -8219,7 +8245,7 @@ var require_cjs10 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils21.document.getElementById(hash2);
+        const activeNode = import_utils20.document.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -8380,7 +8406,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_domql = __toESM(require_cjs8(), 1);
-var import_utils20 = __toESM(require_cjs(), 1);
+var import_utils19 = __toESM(require_cjs(), 1);
 // src/utilImports.js
 var utilImports_exports = {};
@@ -9320,7 +9346,7 @@ var createCache = function createCache2(options) {
   return cache2;
 };
-// ../emotion/node_modules/@emotion/hash/dist/emotion-hash.esm.js
+// ../../node_modules/@emotion/hash/dist/emotion-hash.esm.js
 function murmur2(str) {
   var h = 0;
   var k, i2 = 0, len = str.length;
@@ -9350,7 +9376,7 @@ function murmur2(str) {
   return ((h ^ h >>> 15) >>> 0).toString(36);
 }
-// ../emotion/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+// ../../node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
 var unitlessKeys = {
   animationIterationCount: 1,
   aspectRatio: 1,
@@ -9401,7 +9427,7 @@ var unitlessKeys = {
   strokeWidth: 1
 };
-// ../emotion/node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
+// ../../node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
 Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
 You can read more about this here:
@@ -9446,7 +9472,7 @@ if (true) {
   msPattern = /^-ms-/;
   hyphenPattern = /-(.)/g;
   hyphenatedCache = {};
-  processStyleValue = function processStyleValue5(key, value2) {
+  processStyleValue = function processStyleValue3(key, value2) {
     if (key === "content") {
       if (typeof value2 !== "string" || contentValues.indexOf(value2) === -1 && !contentValuePattern.test(value2) && (value2.charAt(0) !== value2.charAt(value2.length - 1) || value2.charAt(0) !== '"' && value2.charAt(0) !== "'")) {
         throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value2 + "\"'`");
@@ -9654,7 +9680,7 @@ var serializeStyles = function serializeStyles2(args, registered, mergedProps) {
   };
 };
-// ../emotion/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
+// ../../node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
 var isBrowser = true;
 function getRegisteredStyles(registered, registeredStyles, classNames) {
   var rawClassName = "";
@@ -9696,7 +9722,7 @@ var insertStyles = function insertStyles2(cache2, serialized, isStringTag) {
   }
 };
-// ../emotion/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
+// ../../node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
 function insertWithoutScoping(cache2, serialized) {
   if (cache2.inserted[serialized.name] === void 0) {
     return cache2.insert("", serialized, cache2.sheet, true);
@@ -9897,6 +9923,7 @@ __export(domql_exports, {
   Animation: () => Animation,
   Avatar: () => Avatar,
   AvatarBundle: () => AvatarBundle,
+  AvatarChooser: () => AvatarChooser,
   AvatarIndicator: () => AvatarIndicator,
   BalanceCard: () => BalanceCard,
   Block: () => Block,
@@ -12701,16 +12728,14 @@ var CardLabel = {
 // ../../uikit/domql/Avatar/Avatar.js
 var Avatar = {
   extend: Img,
-  props: {
+  props: ({ key, props: props4 }) => ({
     display: "block",
     avatarType: "initials",
     borderRadius: "100%",
     boxSize: "C+X C+X",
-    cursor: "pointer"
-  },
-  attr: {
-    src: ({ key, props: props4 }) => props4.src || `https://avatars.dicebear.com/api/${props4.avatarType || "adventurer-neutral"}/${props4.key || key}.svg`
-  }
+    cursor: "pointer",
+    src: `https://api.dicebear.com/7.x/${props4.avatarType || "adventurer-neutral"}/svg?seed=${props4.key || key}`
+  })
 };
 // ../../uikit/domql/Avatar/AvatarIndicator.js
@@ -12743,6 +12768,60 @@ var AvatarBundle = {
   ...[{}, {}, {}, {}]
 };
+// ../../uikit/domql/Avatar/index.js
+var AvatarChooser = {
+  extend: Button,
+  tag: "label",
+  props: {
+    round: "C",
+    gap: "Y",
+    padding: "W2 A W2 W2",
+    theme: "tertiary",
+    position: "relative",
+    cursor: "pointer"
+  },
+  Avatar: {
+    props: ({ state }) => ({
+      key: state.key,
+      boxSize: "B1",
+      pointerEvents: "none"
+    })
+  },
+  Select: {
+    props: {
+      outline: "none",
+      pointerEvents: "all",
+      appearance: "none",
+      border: "none",
+      width: "100%",
+      height: "100%",
+      background: "none",
+      color: "currentColor",
+      fontSize: "A",
+      lineHeight: 1,
+      margin: "0 0 0 -B1+X",
+      padding: "0 A 0 B1+X",
+      ":focus-visible": {
+        outline: "none"
+      }
+    },
+    childExtend: { tag: "option" },
+    $setPropsCollection: ({ parent, state }) => {
+      return parent.props.options.map((v) => {
+        if (v.text === state.key)
+          return { ...v, selected: true };
+        return v;
+      });
+    },
+    on: {
+      change: (ev, { state }) => {
+        state.update({ key: ev.target.value });
+        console.log(state.key);
+      }
+    }
+  }
+};
 // ../../uikit/domql/Notification/index.js
 var Notification = {
   extend: Flex,
@@ -15298,7 +15377,7 @@ var fetchAsync = (app, key, options, callback) => {
 };
 // ../../node_modules/@domql/emotion/index.js
-var import_utils17 = __toESM(require_cjs());
+var import_utils16 = __toESM(require_cjs());
 // ../../node_modules/@domql/classlist/index.js
 var import_utils15 = __toESM(require_cjs());
@@ -15337,507 +15416,17 @@ var applyClassListOnNode = (params, element, node2) => {
   return className;
 };
-// ../../node_modules/@emotion/hash/dist/emotion-hash.esm.js
-function murmur22(str) {
-  var h = 0;
-  var k, i2 = 0, len = str.length;
-  for (; len >= 4; ++i2, len -= 4) {
-    k = str.charCodeAt(i2) & 255 | (str.charCodeAt(++i2) & 255) << 8 | (str.charCodeAt(++i2) & 255) << 16 | (str.charCodeAt(++i2) & 255) << 24;
-    k = /* Math.imul(k, m): */
-    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16);
-    k ^= /* k >>> r: */
-    k >>> 24;
-    h = /* Math.imul(k, m): */
-    (k & 65535) * 1540483477 + ((k >>> 16) * 59797 << 16) ^ /* Math.imul(h, m): */
-    (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  }
-  switch (len) {
-    case 3:
-      h ^= (str.charCodeAt(i2 + 2) & 255) << 16;
-    case 2:
-      h ^= (str.charCodeAt(i2 + 1) & 255) << 8;
-    case 1:
-      h ^= str.charCodeAt(i2) & 255;
-      h = /* Math.imul(h, m): */
-      (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  }
-  h ^= h >>> 13;
-  h = /* Math.imul(h, m): */
-  (h & 65535) * 1540483477 + ((h >>> 16) * 59797 << 16);
-  return ((h ^ h >>> 15) >>> 0).toString(36);
-}
-// ../../node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
-var unitlessKeys2 = {
-  animationIterationCount: 1,
-  aspectRatio: 1,
-  borderImageOutset: 1,
-  borderImageSlice: 1,
-  borderImageWidth: 1,
-  boxFlex: 1,
-  boxFlexGroup: 1,
-  boxOrdinalGroup: 1,
-  columnCount: 1,
-  columns: 1,
-  flex: 1,
-  flexGrow: 1,
-  flexPositive: 1,
-  flexShrink: 1,
-  flexNegative: 1,
-  flexOrder: 1,
-  gridRow: 1,
-  gridRowEnd: 1,
-  gridRowSpan: 1,
-  gridRowStart: 1,
-  gridColumn: 1,
-  gridColumnEnd: 1,
-  gridColumnSpan: 1,
-  gridColumnStart: 1,
-  msGridRow: 1,
-  msGridRowSpan: 1,
-  msGridColumn: 1,
-  msGridColumnSpan: 1,
-  fontWeight: 1,
-  lineHeight: 1,
-  opacity: 1,
-  order: 1,
-  orphans: 1,
-  tabSize: 1,
-  widows: 1,
-  zIndex: 1,
-  zoom: 1,
-  WebkitLineClamp: 1,
-  // SVG-related properties
-  fillOpacity: 1,
-  floodOpacity: 1,
-  stopOpacity: 1,
-  strokeDasharray: 1,
-  strokeDashoffset: 1,
-  strokeMiterlimit: 1,
-  strokeOpacity: 1,
-  strokeWidth: 1
-};
-// ../../node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js
-var ILLEGAL_ESCAPE_SEQUENCE_ERROR2 = `You have illegal escape sequence in your template literal, most likely inside content's property value.
-Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
-You can read more about this here:
-https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`;
-var UNDEFINED_AS_OBJECT_KEY_ERROR2 = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key).";
-var hyphenateRegex2 = /[A-Z]|^ms/g;
-var animationRegex2 = /_EMO_([^_]+?)_([^]*?)_EMO_/g;
-var isCustomProperty3 = function isCustomProperty4(property) {
-  return property.charCodeAt(1) === 45;
-};
-var isProcessableValue3 = function isProcessableValue4(value2) {
-  return value2 != null && typeof value2 !== "boolean";
-};
-var processStyleName2 = /* @__PURE__ */ memoize(function(styleName) {
-  return isCustomProperty3(styleName) ? styleName : styleName.replace(hyphenateRegex2, "-$&").toLowerCase();
-});
-var processStyleValue3 = function processStyleValue4(key, value2) {
-  switch (key) {
-    case "animation":
-    case "animationName": {
-      if (typeof value2 === "string") {
-        return value2.replace(animationRegex2, function(match2, p1, p2) {
-          cursor2 = {
-            name: p1,
-            styles: p2,
-            next: cursor2
-          };
-          return p1;
-        });
-      }
-    }
-  }
-  if (unitlessKeys2[key] !== 1 && !isCustomProperty3(key) && typeof value2 === "number" && value2 !== 0) {
-    return value2 + "px";
-  }
-  return value2;
-};
-if (true) {
-  contentValuePattern = /(var|attr|counters?|url|element|(((repeating-)?(linear|radial))|conic)-gradient)\(|(no-)?(open|close)-quote/;
-  contentValues = ["normal", "none", "initial", "inherit", "unset"];
-  oldProcessStyleValue = processStyleValue3;
-  msPattern = /^-ms-/;
-  hyphenPattern = /-(.)/g;
-  hyphenatedCache = {};
-  processStyleValue3 = function processStyleValue5(key, value2) {
-    if (key === "content") {
-      if (typeof value2 !== "string" || contentValues.indexOf(value2) === -1 && !contentValuePattern.test(value2) && (value2.charAt(0) !== value2.charAt(value2.length - 1) || value2.charAt(0) !== '"' && value2.charAt(0) !== "'")) {
-        throw new Error("You seem to be using a value for 'content' without quotes, try replacing it with `content: '\"" + value2 + "\"'`");
-      }
-    }
-    var processed = oldProcessStyleValue(key, value2);
-    if (processed !== "" && !isCustomProperty3(key) && key.indexOf("-") !== -1 && hyphenatedCache[key] === void 0) {
-      hyphenatedCache[key] = true;
-      console.error("Using kebab-case for css properties in objects is not supported. Did you mean " + key.replace(msPattern, "ms-").replace(hyphenPattern, function(str, _char) {
-        return _char.toUpperCase();
-      }) + "?");
-    }
-    return processed;
-  };
-}
-var contentValuePattern;
-var contentValues;
-var oldProcessStyleValue;
-var msPattern;
-var hyphenPattern;
-var hyphenatedCache;
-var noComponentSelectorMessage2 = "Component selectors can only be used in conjunction with @emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware compiler transform.";
-function handleInterpolation2(mergedProps, registered, interpolation) {
-  if (interpolation == null) {
-    return "";
-  }
-  if (interpolation.__emotion_styles !== void 0) {
-    if (interpolation.toString() === "NO_COMPONENT_SELECTOR") {
-      throw new Error(noComponentSelectorMessage2);
-    }
-    return interpolation;
-  }
-  switch (typeof interpolation) {
-    case "boolean": {
-      return "";
-    }
-    case "object": {
-      if (interpolation.anim === 1) {
-        cursor2 = {
-          name: interpolation.name,
-          styles: interpolation.styles,
-          next: cursor2
-        };
-        return interpolation.name;
-      }
-      if (interpolation.styles !== void 0) {
-        var next2 = interpolation.next;
-        if (next2 !== void 0) {
-          while (next2 !== void 0) {
-            cursor2 = {
-              name: next2.name,
-              styles: next2.styles,
-              next: cursor2
-            };
-            next2 = next2.next;
-          }
-        }
-        var styles = interpolation.styles + ";";
-        if (interpolation.map !== void 0) {
-          styles += interpolation.map;
-        }
-        return styles;
-      }
-      return createStringFromObject2(mergedProps, registered, interpolation);
-    }
-    case "function": {
-      if (mergedProps !== void 0) {
-        var previousCursor = cursor2;
-        var result = interpolation(mergedProps);
-        cursor2 = previousCursor;
-        return handleInterpolation2(mergedProps, registered, result);
-      } else if (true) {
-        console.error("Functions that are interpolated in css calls will be stringified.\nIf you want to have a css call based on props, create a function that returns a css call like this\nlet dynamicStyle = (props) => css`color: ${props.color}`\nIt can be called directly with props or interpolated in a styled call like this\nlet SomeComponent = styled('div')`${dynamicStyle}`");
-      }
-      break;
-    }
-    case "string":
-      if (true) {
-        var matched = [];
-        var replaced = interpolation.replace(animationRegex2, function(match2, p1, p2) {
-          var fakeVarName = "animation" + matched.length;
-          matched.push("const " + fakeVarName + " = keyframes`" + p2.replace(/^@keyframes animation-\w+/, "") + "`");
-          return "${" + fakeVarName + "}";
-        });
-        if (matched.length) {
-          console.error("`keyframes` output got interpolated into plain string, please wrap it with `css`.\n\nInstead of doing this:\n\n" + [].concat(matched, ["`" + replaced + "`"]).join("\n") + "\n\nYou should wrap it with `css` like this:\n\n" + ("css`" + replaced + "`"));
-        }
-      }
-      break;
-  }
-  if (registered == null) {
-    return interpolation;
-  }
-  var cached = registered[interpolation];
-  return cached !== void 0 ? cached : interpolation;
-}
-function createStringFromObject2(mergedProps, registered, obj) {
-  var string = "";
-  if (Array.isArray(obj)) {
-    for (var i2 = 0; i2 < obj.length; i2++) {
-      string += handleInterpolation2(mergedProps, registered, obj[i2]) + ";";
-    }
-  } else {
-    for (var _key in obj) {
-      var value2 = obj[_key];
-      if (typeof value2 !== "object") {
-        if (registered != null && registered[value2] !== void 0) {
-          string += _key + "{" + registered[value2] + "}";
-        } else if (isProcessableValue3(value2)) {
-          string += processStyleName2(_key) + ":" + processStyleValue3(_key, value2) + ";";
-        }
-      } else {
-        if (_key === "NO_COMPONENT_SELECTOR" && true) {
-          throw new Error(noComponentSelectorMessage2);
-        }
-        if (Array.isArray(value2) && typeof value2[0] === "string" && (registered == null || registered[value2[0]] === void 0)) {
-          for (var _i = 0; _i < value2.length; _i++) {
-            if (isProcessableValue3(value2[_i])) {
-              string += processStyleName2(_key) + ":" + processStyleValue3(_key, value2[_i]) + ";";
-            }
-          }
-        } else {
-          var interpolated = handleInterpolation2(mergedProps, registered, value2);
-          switch (_key) {
-            case "animation":
-            case "animationName": {
-              string += processStyleName2(_key) + ":" + interpolated + ";";
-              break;
-            }
-            default: {
-              if (_key === "undefined") {
-                console.error(UNDEFINED_AS_OBJECT_KEY_ERROR2);
-              }
-              string += _key + "{" + interpolated + "}";
-            }
-          }
-        }
-      }
-    }
-  }
-  return string;
-}
-var labelPattern2 = /label:\s*([^\s;\n{]+)\s*(;|$)/g;
-var sourceMapPattern2;
-if (true) {
-  sourceMapPattern2 = /\/\*#\ssourceMappingURL=data:application\/json;\S+\s+\*\//g;
-}
-var cursor2;
-var serializeStyles3 = function serializeStyles4(args, registered, mergedProps) {
-  if (args.length === 1 && typeof args[0] === "object" && args[0] !== null && args[0].styles !== void 0) {
-    return args[0];
-  }
-  var stringMode = true;
-  var styles = "";
-  cursor2 = void 0;
-  var strings = args[0];
-  if (strings == null || strings.raw === void 0) {
-    stringMode = false;
-    styles += handleInterpolation2(mergedProps, registered, strings);
-  } else {
-    if (strings[0] === void 0) {
-      console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR2);
-    }
-    styles += strings[0];
-  }
-  for (var i2 = 1; i2 < args.length; i2++) {
-    styles += handleInterpolation2(mergedProps, registered, args[i2]);
-    if (stringMode) {
-      if (strings[i2] === void 0) {
-        console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR2);
-      }
-      styles += strings[i2];
-    }
-  }
-  var sourceMap;
-  if (true) {
-    styles = styles.replace(sourceMapPattern2, function(match3) {
-      sourceMap = match3;
-      return "";
-    });
-  }
-  labelPattern2.lastIndex = 0;
-  var identifierName = "";
-  var match2;
-  while ((match2 = labelPattern2.exec(styles)) !== null) {
-    identifierName += "-" + // $FlowFixMe we know it's not null
-    match2[1];
-  }
-  var name = murmur22(styles) + identifierName;
-  if (true) {
-    return {
-      name,
-      styles,
-      map: sourceMap,
-      next: cursor2,
-      toString: function toString2() {
-        return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
-      }
-    };
-  }
-  return {
-    name,
-    styles,
-    next: cursor2
-  };
-};
-// ../../node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js
-var isBrowser2 = true;
-function getRegisteredStyles2(registered, registeredStyles, classNames) {
-  var rawClassName = "";
-  classNames.split(" ").forEach(function(className) {
-    if (registered[className] !== void 0) {
-      registeredStyles.push(registered[className] + ";");
-    } else {
-      rawClassName += className + " ";
-    }
-  });
-  return rawClassName;
-}
-var registerStyles3 = function registerStyles4(cache2, serialized, isStringTag) {
-  var className = cache2.key + "-" + serialized.name;
-  if (
-    // we only need to add the styles to the registered cache if the
-    // class name could be used further down
-    // the tree but if it's a string tag, we know it won't
-    // so we don't have to add it to registered cache.
-    // this improves memory usage since we can avoid storing the whole style string
-    (isStringTag === false || // we need to always store it if we're in compat mode and
-    // in node since emotion-server relies on whether a style is in
-    // the registered cache to know whether a style is global or not
-    // also, note that this check will be dead code eliminated in the browser
-    isBrowser2 === false) && cache2.registered[className] === void 0
-  ) {
-    cache2.registered[className] = serialized.styles;
-  }
-};
-var insertStyles3 = function insertStyles4(cache2, serialized, isStringTag) {
-  registerStyles3(cache2, serialized, isStringTag);
-  var className = cache2.key + "-" + serialized.name;
-  if (cache2.inserted[serialized.name] === void 0) {
-    var current = serialized;
-    do {
-      cache2.insert(serialized === current ? "." + className : "", current, cache2.sheet, true);
-      current = current.next;
-    } while (current !== void 0);
-  }
-};
-// ../../node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
-function insertWithoutScoping2(cache2, serialized) {
-  if (cache2.inserted[serialized.name] === void 0) {
-    return cache2.insert("", serialized, cache2.sheet, true);
-  }
-}
-function merge4(registered, css, className) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles2(registered, registeredStyles, className);
-  if (registeredStyles.length < 2) {
-    return className;
-  }
-  return rawClassName + css(registeredStyles);
-}
-var createEmotion4 = function createEmotion5(options) {
-  var cache2 = createCache(options);
-  cache2.sheet.speedy = function(value2) {
-    if (this.ctr !== 0) {
-      throw new Error("speedy must be changed before any rules are inserted");
-    }
-    this.isSpeedy = value2;
-  };
-  cache2.compat = true;
-  var css = function css2() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    var serialized = serializeStyles3(args, cache2.registered, void 0);
-    insertStyles3(cache2, serialized, false);
-    return cache2.key + "-" + serialized.name;
-  };
-  var keyframes = function keyframes2() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    var serialized = serializeStyles3(args, cache2.registered);
-    var animation = "animation-" + serialized.name;
-    insertWithoutScoping2(cache2, {
-      name: serialized.name,
-      styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-    });
-    return animation;
-  };
-  var injectGlobal = function injectGlobal2() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-    var serialized = serializeStyles3(args, cache2.registered);
-    insertWithoutScoping2(cache2, serialized);
-  };
-  var cx = function cx2() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-    return merge4(cache2.registered, css, classnames3(args));
-  };
-  return {
-    css,
-    cx,
-    injectGlobal,
-    keyframes,
-    hydrate: function hydrate(ids) {
-      ids.forEach(function(key) {
-        cache2.inserted[key] = true;
-      });
-    },
-    flush: function flush() {
-      cache2.registered = {};
-      cache2.inserted = {};
-      cache2.sheet.flush();
-    },
-    // $FlowFixMe
-    sheet: cache2.sheet,
-    cache: cache2,
-    getRegisteredStyles: getRegisteredStyles2.bind(null, cache2.registered),
-    merge: merge4.bind(null, cache2.registered, css)
-  };
-};
-var classnames3 = function classnames4(args) {
-  var cls = "";
-  for (var i2 = 0; i2 < args.length; i2++) {
-    var arg = args[i2];
-    if (arg == null)
-      continue;
-    var toAdd = void 0;
-    switch (typeof arg) {
-      case "boolean":
-        break;
-      case "object": {
-        if (Array.isArray(arg)) {
-          toAdd = classnames4(arg);
-        } else {
-          toAdd = "";
-          for (var k in arg) {
-            if (arg[k] && k) {
-              toAdd && (toAdd += " ");
-              toAdd += k;
-            }
-          }
-        }
-        break;
-      }
-      default: {
-        toAdd = arg;
-      }
-    }
-    if (toAdd) {
-      cls && (cls += " ");
-      cls += toAdd;
-    }
-  }
-  return cls;
-};
 // ../../node_modules/@domql/emotion/index.js
 var transformEmotionStyle = (emotion2) => {
   return (params, element, state) => {
-    const execParams = (0, import_utils17.exec)(params, element);
+    const execParams = (0, import_utils16.exec)(params, element);
     if (params) {
-      if ((0, import_utils17.isObjectLike)(element.class))
+      if ((0, import_utils16.isObjectLike)(element.class))
         element.class.elementStyle = execParams;
       else
         element.class = { elementStyle: execParams };
     }
-    transformEmotionClass(emotion2)(element.class, element, state, true);
+    transformEmotionClass(emotion2)(element.class, element, element.state, true);
   };
 };
 var transformEmotionClass = (emotion2) => {
@@ -15846,18 +15435,18 @@ var transformEmotionClass = (emotion2) => {
       return;
     const { __ref } = element;
     const { __class, __classNames } = __ref;
-    if (!(0, import_utils17.isObjectLike)(params))
+    if (!(0, import_utils16.isObjectLike)(params))
       return;
     for (const key in params) {
-      const prop = (0, import_utils17.exec)(params[key], element);
+      const prop = (0, import_utils16.exec)(params[key], element);
       if (!prop) {
         delete __class[key];
         delete __classNames[key];
         continue;
       }
-      const isEqual = (0, import_utils17.isEqualDeep)(__class[key], prop);
+      const isEqual = (0, import_utils16.isEqualDeep)(__class[key], prop);
       if (!isEqual) {
-        if (!(0, import_utils17.isProduction)() && (0, import_utils17.isObject)(prop))
+        if (!(0, import_utils16.isProduction)() && (0, import_utils16.isObject)(prop))
           prop.label = key || element.key;
         const CSSed = emotion2.css(prop);
         __class[key] = prop;
@@ -15869,7 +15458,7 @@ var transformEmotionClass = (emotion2) => {
 };
 var transformDOMQLEmotion = (emotion2, options) => {
   if (!emotion2)
-    emotion2 = createEmotion4(options || { key: "smbls" });
+    emotion2 = createEmotion(options || { key: "smbls" });
   return {
     style: transformEmotionStyle(emotion2),
     class: transformEmotionClass(emotion2)
@@ -19325,7 +18914,7 @@ function send(event = "change", changes, options) {
 var import_globals = __toESM(require_cjs11());
 // ../socket-ui/devFocus.js
-var import_utils18 = __toESM(require_cjs());
+var import_utils17 = __toESM(require_cjs());
 var DevFocus = {
   props: {
     ".preventSelect": {
@@ -19379,7 +18968,7 @@ var DevFocus = {
     on: {
       init: ({ context }) => {
         const { components } = context;
-        if ((0, import_utils18.isObject)(components)) {
+        if ((0, import_utils17.isObject)(components)) {
           const { Content, ...rest } = components;
           for (const key in rest) {
             if (domql_exports[key])
@@ -19601,13 +19190,13 @@ var Sync = {
 };
 // src/syncExtend.js
-var import_utils19 = __toESM(require_cjs(), 1);
+var import_utils18 = __toESM(require_cjs(), 1);
 var applySyncDebug = (extend, options) => {
   const { editor } = options;
   if (!editor)
     return extend;
-  const inspect = (0, import_utils19.isUndefined)(editor.inspect) ? (0, import_utils19.isDevelopment)() : editor.inspect;
-  const liveSync = (0, import_utils19.isUndefined)(editor.liveSync) ? (0, import_utils19.isDevelopment)() : editor.liveSync;
+  const inspect = (0, import_utils18.isUndefined)(editor.inspect) ? (0, import_utils18.isDevelopment)() : editor.inspect;
+  const liveSync = (0, import_utils18.isUndefined)(editor.liveSync) ? (0, import_utils18.isDevelopment)() : editor.liveSync;
   if (inspect)
     extend.push(DevFocus);
   if (liveSync)
@@ -19618,7 +19207,7 @@ var applyInspectListener = (root, options) => {
   const { editor } = options;
   if (!editor)
     return;
-  const inspect = (0, import_utils19.isUndefined)(editor.inspect) ? (0, import_utils19.isDevelopment)() : editor.inspect;
+  const inspect = (0, import_utils18.isUndefined)(editor.inspect) ? (0, import_utils18.isDevelopment)() : editor.inspect;
   if (inspect)
     inspectOnKey(root);
 };
@@ -19626,11 +19215,11 @@ var applyInspectListener = (root, options) => {
 // src/index.js
 var SYMBOLS_KEY = process.env.SYMBOLS_KEY;
 var mergeWithLocalFile2 = (options, optionsExternalFile) => {
-  const rcfile = (0, import_utils20.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {};
-  return (0, import_utils20.deepMerge)(options, rcfile);
+  const rcfile = (0, import_utils19.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {};
+  return (0, import_utils19.deepMerge)(options, rcfile);
 };
 var create = async (App, options = options_default, optionsExternalFile) => {
-  const appIsKey = (0, import_utils20.isString)(App);
+  const appIsKey = (0, import_utils19.isString)(App);
   options = mergeWithLocalFile2(options, optionsExternalFile);
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : "");
   if (appIsKey)
@@ -19693,7 +19282,7 @@ var create = async (App, options = options_default, optionsExternalFile) => {
   return domqlApp;
 };
 var createSync = (App, options = options_default, optionsExternalFile) => {
-  const appIsKey = (0, import_utils20.isString)(App);
+  const appIsKey = (0, import_utils19.isString)(App);
   options = mergeWithLocalFile2(options, optionsExternalFile);
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : "");
   if (appIsKey)