@symbo.ls/create 2.11.220 → 2.11.222

package/dist/cjs/bundle/index.js

@@ -206,51 +206,54 @@ var require_types = __commonJS({
     __export2(types_exports, {
       TYPES: () => TYPES,
       is: () => is,
-      isArray: () => isArray6,
+      isArray: () => isArray8,
       isBoolean: () => isBoolean,
+      isDate: () => isDate,
       isDefined: () => isDefined2,
       isFunction: () => isFunction4,
-      isNot: () => isNot2,
+      isNot: () => isNot3,
       isNull: () => isNull,
       isNumber: () => isNumber,
-      isObject: () => isObject12,
-      isObjectLike: () => isObjectLike3,
-      isString: () => isString9,
-      isUndefined: () => isUndefined4
+      isObject: () => isObject14,
+      isObjectLike: () => isObjectLike4,
+      isString: () => isString13,
+      isUndefined: () => isUndefined5
     });
     module2.exports = __toCommonJS2(types_exports);
     var import_node = require_node();
-    var isObject12 = (arg) => {
+    var isObject14 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString9 = (arg) => typeof arg === "string";
+    var isString13 = (arg) => typeof arg === "string";
     var isNumber = (arg) => typeof arg === "number";
     var isFunction4 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
     var isNull = (arg) => arg === null;
-    var isArray6 = (arg) => Array.isArray(arg);
-    var isObjectLike3 = (arg) => {
+    var isArray8 = (arg) => Array.isArray(arg);
+    var isDate = (d) => d instanceof Date;
+    var isObjectLike4 = (arg) => {
       if (arg === null)
         return false;
       return typeof arg === "object";
     };
     var isDefined2 = (arg) => {
-      return isObject12(arg) || isObjectLike3(arg) || isString9(arg) || isNumber(arg) || isFunction4(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+      return isObject14(arg) || isObjectLike4(arg) || isString13(arg) || isNumber(arg) || isFunction4(arg) || isArray8(arg) || isObjectLike4(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
     };
-    var isUndefined4 = (arg) => {
+    var isUndefined5 = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
-      array: isArray6,
-      object: isObject12,
-      string: isString9,
+      array: isArray8,
+      object: isObject14,
+      string: isString13,
+      date: isDate,
       number: isNumber,
       null: isNull,
       function: isFunction4,
-      objectLike: isObjectLike3,
+      objectLike: isObjectLike4,
       node: import_node.isNode,
       htmlElement: import_node.isHtmlElement,
       defined: isDefined2
@@ -260,7 +263,7 @@ var require_types = __commonJS({
         return args.map((val) => TYPES[val](arg)).filter((v) => v).length > 0;
       };
     };
-    var isNot2 = (arg) => {
+    var isNot3 = (arg) => {
       return (...args) => {
         return args.map((val) => TYPES[val](arg)).filter((v) => v).length === 0;
       };
@@ -299,6 +302,8 @@ var require_array = __commonJS({
       mergeAndCloneIfArray: () => mergeAndCloneIfArray,
       mergeArray: () => mergeArray,
       removeFromArray: () => removeFromArray,
+      removeValueFromArray: () => removeValueFromArray,
+      removeValueFromArrayAll: () => removeValueFromArrayAll,
       swapItemsInArray: () => swapItemsInArray
     });
     module2.exports = __toCommonJS2(array_exports);
@@ -364,6 +369,18 @@ var require_array = __commonJS({
       }, nestedObject);
       return nestedObject;
     };
+    var removeValueFromArray = (arr, value2) => {
+      const index = arr.indexOf(value2);
+      if (index > -1) {
+        const newArray = [...arr];
+        newArray.splice(index, 1);
+        return newArray;
+      }
+      return arr.slice();
+    };
+    var removeValueFromArrayAll = (arr, value2) => {
+      return arr.filter((item) => item !== value2);
+    };
   }
 });
 
@@ -451,27 +468,32 @@ var require_object = __commonJS({
     var object_exports = {};
     __export2(object_exports, {
       clone: () => clone,
-      deepClone: () => deepClone4,
+      deepClone: () => deepClone5,
       deepCloneExclude: () => deepCloneExclude,
       deepContains: () => deepContains,
       deepDestringify: () => deepDestringify,
+      deepDiff: () => deepDiff3,
       deepMerge: () => deepMerge4,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
       diff: () => diff,
       diffArrays: () => diffArrays,
       diffObjects: () => diffObjects,
-      exec: () => exec4,
+      exec: () => exec5,
       flattenRecursive: () => flattenRecursive,
+      hasOwnProperty: () => hasOwnProperty,
+      isEmpty: () => isEmpty,
+      isEmptyObject: () => isEmptyObject,
       isEqualDeep: () => isEqualDeep2,
+      makeObjectWithoutPrototype: () => makeObjectWithoutPrototype,
       map: () => map2,
-      merge: () => merge4,
+      merge: () => merge5,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       objectToString: () => objectToString,
       overwrite: () => overwrite,
       overwriteDeep: () => overwriteDeep,
-      overwriteShallow: () => overwriteShallow2,
+      overwriteShallow: () => overwriteShallow3,
       removeFromObject: () => removeFromObject,
       stringToObject: () => stringToObject
     });
@@ -480,7 +502,7 @@ var require_object = __commonJS({
     var import_types = require_types();
     var import_array = require_array();
     var import_string = require_string();
-    var exec4 = (param, element, state, context) => {
+    var exec5 = (param, element, state, context) => {
       if ((0, import_types.isFunction)(param)) {
         return param(
           element,
@@ -492,13 +514,13 @@ var require_object = __commonJS({
     };
     var map2 = (obj, extention, element) => {
       for (const e in extention) {
-        obj[e] = exec4(extention[e], element);
+        obj[e] = exec5(extention[e], element);
       }
     };
-    var merge4 = (element, obj, excludeFrom = []) => {
+    var merge5 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, e);
-        if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
+        if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
         const objProp = obj[e];
@@ -510,8 +532,8 @@ var require_object = __commonJS({
     };
     var deepMerge4 = (element, extend, excludeFrom = []) => {
       for (const e in extend) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(extend, e);
-        if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(extend, e);
+        if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
           continue;
         const elementProp = element[e];
         const extendProp = extend[e];
@@ -526,8 +548,8 @@ var require_object = __commonJS({
     var clone = (obj, excludeFrom = []) => {
       const o = {};
       for (const prop in obj) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
-        if (!hasOwnProperty || excludeFrom.includes(prop) || prop.startsWith("__"))
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
+        if (!hasOwnProperty2 || excludeFrom.includes(prop) || prop.startsWith("__"))
           continue;
         o[prop] = obj[prop];
       }
@@ -539,8 +561,8 @@ var require_object = __commonJS({
       }
       const o = {};
       for (const k in obj) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, k);
-        if (!hasOwnProperty || excludeFrom.includes(k) || k.startsWith("__"))
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, k);
+        if (!hasOwnProperty2 || excludeFrom.includes(k) || k.startsWith("__"))
           continue;
         let v = obj[k];
         if (k === "extend" && (0, import_types.isArray)(v)) {
@@ -558,7 +580,7 @@ var require_object = __commonJS({
     var mergeArrayExclude = (arr, excl = []) => {
       return arr.reduce((acc, curr) => deepMerge4(acc, deepCloneExclude(curr, excl)), {});
     };
-    var deepClone4 = (obj, excludeFrom = []) => {
+    var deepClone5 = (obj, excludeFrom = [], cleanUndefined = false) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
       for (const prop in obj) {
         if (prop === "__proto__")
@@ -566,11 +588,13 @@ var require_object = __commonJS({
         if (excludeFrom.includes(prop) || prop.startsWith("__"))
           continue;
         let objProp = obj[prop];
+        if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+          continue;
         if (prop === "extend" && (0, import_types.isArray)(objProp)) {
           objProp = (0, import_array.mergeArray)(objProp);
         }
         if ((0, import_types.isObjectLike)(objProp)) {
-          o[prop] = deepClone4(objProp, excludeFrom);
+          o[prop] = deepClone5(objProp, excludeFrom, cleanUndefined);
         } else
           o[prop] = objProp;
       }
@@ -624,7 +648,7 @@ var require_object = __commonJS({
             }
           }
           str += `${spaces}  ]`;
-        } else if ((0, import_types.isObject)(value2)) {
+        } else if ((0, import_types.isObjectLike)(value2)) {
           str += objectToString(value2, indent + 1);
         } else if ((0, import_types.isString)(value2)) {
           str += (0, import_string.stringIncludesAny)(value2, ["\n", "'"]) ? `\`${value2}\`` : `'${value2}'`;
@@ -664,8 +688,8 @@ var require_object = __commonJS({
     };
     var deepDestringify = (obj, destringified = {}) => {
       for (const prop in obj) {
-        const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
-        if (!hasOwnProperty)
+        const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
+        if (!hasOwnProperty2)
           continue;
         const objProp = obj[prop];
         if ((0, import_types.isString)(objProp)) {
@@ -758,6 +782,39 @@ var require_object = __commonJS({
       }
       return cache2;
     };
+    var hasOwnProperty = (o, ...args) => Object.prototype.hasOwnProperty.call(o, ...args);
+    var isEmpty = (o) => Object.keys(o).length === 0;
+    var isEmptyObject = (o) => (0, import_types.isObject)(o) && isEmpty(o);
+    var makeObjectWithoutPrototype = () => /* @__PURE__ */ Object.create(null);
+    var deepDiff3 = (lhs, rhs) => {
+      if (lhs === rhs)
+        return {};
+      if (!(0, import_types.isObject)(lhs) || !(0, import_types.isObject)(rhs))
+        return rhs;
+      const deletedValues = Object.keys(lhs).reduce((acc, key) => {
+        if (!hasOwnProperty(rhs, key)) {
+          acc[key] = void 0;
+        }
+        return acc;
+      }, makeObjectWithoutPrototype());
+      if ((0, import_types.isDate)(lhs) || (0, import_types.isDate)(rhs)) {
+        if (lhs.valueOf() === rhs.valueOf())
+          return {};
+        return rhs;
+      }
+      return Object.keys(rhs).reduce((acc, key) => {
+        if (!hasOwnProperty(lhs, key)) {
+          acc[key] = rhs[key];
+          return acc;
+        }
+        const difference = diff(lhs[key], rhs[key]);
+        if (isEmptyObject(difference) && !(0, import_types.isDate)(difference) && (isEmptyObject(lhs[key]) || !isEmptyObject(rhs[key]))) {
+          return acc;
+        }
+        acc[key] = difference;
+        return acc;
+      }, deletedValues);
+    };
     var overwrite = (element, params, excludeFrom = []) => {
       const { ref } = element;
       const changes = {};
@@ -773,7 +830,7 @@ var require_object = __commonJS({
       }
       return changes;
     };
-    var overwriteShallow2 = (obj, params, excludeFrom = []) => {
+    var overwriteShallow3 = (obj, params, excludeFrom = []) => {
       for (const e in params) {
         if (excludeFrom.includes(e) || e.startsWith("__"))
           continue;
@@ -853,8 +910,8 @@ var require_object = __commonJS({
           }
         } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
           for (const key in obj1) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj2, key);
-            if (!hasOwnProperty || !deepContains(obj1[key], obj2[key])) {
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj2, key);
+            if (!hasOwnProperty2 || !deepContains(obj1[key], obj2[key])) {
               return false;
             }
           }
@@ -1375,11 +1432,11 @@ var require_tree = __commonJS({
       TREE: () => TREE
     });
     module2.exports = __toCommonJS2(tree_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_report = require_cjs2();
     var ROOT = {
       key: ":root",
-      node: import_utils24.document ? import_utils24.document.body : (0, import_report.report)("DocumentNotDefined", import_utils24.document)
+      node: import_utils31.document ? import_utils31.document.body : (0, import_report.report)("DocumentNotDefined", import_utils31.document)
     };
     var TREE = ROOT;
   }
@@ -1415,12 +1472,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = 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_utils24.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils31.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -1429,7 +1486,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_utils24.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils31.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -1440,9 +1497,11 @@ 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_utils24.isFunction)(appliedFunction)) {
-          const { state, context } = element;
-          node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
+        if ((0, import_utils31.isFunction)(appliedFunction)) {
+          node2.addEventListener(param, (event) => {
+            const { state, context } = element;
+            appliedFunction(event, element, state, context);
+          });
         }
       }
     };
@@ -1476,10 +1535,10 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs2();
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils24.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils31.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -1570,7 +1629,7 @@ var require_cache = __commonJS({
     module2.exports = __toCommonJS2(cache_exports);
     var import_report = require_cjs2();
     var import_event = require_cjs3();
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var cache2 = {};
     var createHTMLNode = (element) => {
       const { tag } = element;
@@ -1588,16 +1647,21 @@ var require_cache = __commonJS({
       }
     };
     var detectTag = (element) => {
-      let { tag, key } = element;
-      tag = (0, import_utils24.exec)(tag, element);
+      let { tag, key, props: props4 } = element;
+      tag = (0, import_utils31.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils24.isString)(tag)) {
-        const tagExists = (0, import_utils24.isValidHtmlTag)(tag);
+      if ((0, import_utils31.isObject)(props4) && (0, import_utils31.isString)(props4.tag)) {
+        const tagExists = (0, import_utils31.isValidHtmlTag)(props4.tag);
+        if (tagExists)
+          return props4.tag;
+      }
+      if ((0, import_utils31.isString)(tag)) {
+        const tagExists = (0, import_utils31.isValidHtmlTag)(tag);
         if (tagExists)
           return tag;
       } else {
-        const isKeyATag = (0, import_utils24.isValidHtmlTag)(key);
+        const isKeyATag = (0, import_utils31.isValidHtmlTag)(key);
         if (isKeyATag)
           return key;
       }
@@ -1716,16 +1780,16 @@ var require_attr = __commonJS({
       default: () => attr_default
     });
     module2.exports = __toCommonJS2(attr_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_report = require_cjs2();
     var attr_default = (params, element, node2) => {
       const { __ref } = element;
       const { __attr } = __ref;
-      if ((0, import_utils24.isNot)("object"))
+      if ((0, import_utils31.isNot)("object"))
         (0, import_report.report)("HTMLInvalidAttr", params);
       if (params) {
         for (const attr in params) {
-          const val = (0, import_utils24.exec)(params[attr], element);
+          const val = (0, import_utils31.exec)(params[attr], element);
           if (val && node2.setAttribute)
             node2.setAttribute(attr, val);
           else if (node2.removeAttribute)
@@ -1768,7 +1832,7 @@ var require_classList = __commonJS({
       default: () => classList_default
     });
     module2.exports = __toCommonJS2(classList_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var assignKeyAsClassname = (element) => {
       const { key } = element;
       if (element.class === true)
@@ -1786,7 +1850,7 @@ var require_classList = __commonJS({
         else if (typeof param === "string")
           className += ` ${param}`;
         else if (typeof param === "function") {
-          className += ` ${(0, import_utils24.exec)(param, element)}`;
+          className += ` ${(0, import_utils31.exec)(param, element)}`;
         }
       }
       return className;
@@ -1797,9 +1861,9 @@ var require_classList = __commonJS({
       const { key } = element;
       if (params === true)
         params = element.class = { key };
-      if ((0, import_utils24.isString)(params))
+      if ((0, import_utils31.isString)(params))
         params = element.class = { default: params };
-      if ((0, import_utils24.isObject)(params))
+      if ((0, import_utils31.isObject)(params))
         params = classify2(params, element);
       const className = params.replace(/\s+/g, " ").trim();
       if (element.ref)
@@ -1883,29 +1947,39 @@ var require_set = __commonJS({
       default: () => set_default
     });
     module2.exports = __toCommonJS2(set_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_create = __toESM2(require_create4(), 1);
     var import_options3 = __toESM2(require_options(), 1);
     var import_mixins = require_mixins();
     var import_content = require_content();
     var set5 = function(params, options = {}, el) {
       const element = el || this;
-      const __contentRef = element.content && element.content.__ref;
-      if (__contentRef && __contentRef.__cached && (0, import_utils24.deepContains)(params, element.content)) {
+      const { __ref: ref, content } = element;
+      const __contentRef = content && content.__ref;
+      const lazyLoad = element.props && element.props.lazyLoad;
+      if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils31.deepContains)(params, content)) {
         console.log("is content equal");
-        return element.content.update();
+        return content.update();
       }
-      (0, import_content.removeContent)(element);
-      if (params) {
-        const { childExtend } = params;
-        if (!childExtend && element.childExtend)
-          params.childExtend = element.childExtend;
+      if (options.preventContentUpdate === true)
+        return;
+      const setAsync = () => {
+        (0, import_content.removeContent)(element);
         (0, import_create.default)(params, element, "content", {
           ignoreChildExtend: true,
           ...import_mixins.registry.defaultOptions,
           ...import_options3.default.create,
           ...options
         });
+      };
+      if (params) {
+        const { childExtend } = params;
+        if (!childExtend && element.childExtend)
+          params.childExtend = element.childExtend;
+        if (lazyLoad) {
+          window.requestAnimationFrame(setAsync);
+        } else
+          setAsync();
       }
       return element;
     };
@@ -1952,7 +2026,7 @@ var require_content = __commonJS({
       updateContent: () => updateContent
     });
     module2.exports = __toCommonJS2(content_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_set = __toESM2(require_set(), 1);
     var updateContent = function(params, options) {
       const element = this;
@@ -1975,7 +2049,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_utils24.isFunction)(__cached.content.remove))
+          else if (__cached.content && (0, import_utils31.isFunction)(__cached.content.remove))
             __cached.content.remove();
         }
         delete element.content;
@@ -2020,15 +2094,15 @@ var require_data = __commonJS({
       default: () => data_default
     });
     module2.exports = __toCommonJS2(data_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_report = require_cjs2();
     var data_default = (params, element, node2) => {
       if (params && params.showOnNode) {
-        if (!(0, import_utils24.isObject)(params))
+        if (!(0, import_utils31.isObject)(params))
           (0, import_report.report)("HTMLInvalidData", params);
         for (const dataset in params) {
           if (dataset !== "showOnNode") {
-            node2.dataset[dataset] = (0, import_utils24.exec)(params[dataset], element);
+            node2.dataset[dataset] = (0, import_utils31.exec)(params[dataset], element);
           }
         }
       }
@@ -2062,9 +2136,9 @@ var require_html = __commonJS({
       default: () => html_default
     });
     module2.exports = __toCommonJS2(html_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var html_default = (param, element, node2) => {
-      const prop = (0, import_utils24.exec)(param, element);
+      const prop = (0, import_utils31.exec)(param, element);
       const { __ref } = element;
       if (prop !== __ref.__html) {
         if (node2.nodeName === "SVG")
@@ -2103,12 +2177,12 @@ var require_style = __commonJS({
       default: () => style_default2
     });
     module2.exports = __toCommonJS2(style_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_report = require_cjs2();
     var style_default2 = (params, element, node2) => {
       if (params) {
-        if ((0, import_utils24.isObject)(params))
-          (0, import_utils24.map)(node2.style, params, element);
+        if ((0, import_utils31.isObject)(params))
+          (0, import_utils31.map)(node2.style, params, element);
         else
           (0, import_report.report)("HTMLInvalidStyles", params);
       }
@@ -2139,34 +2213,17 @@ var require_text = __commonJS({
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
     var text_exports = {};
     __export2(text_exports, {
-      asd: () => asd,
       default: () => text_default
     });
     module2.exports = __toCommonJS2(text_exports);
     var import__2 = require_cjs7();
-    var import_utils24 = require_cjs();
-    var asd = (param, element, node2) => {
-      const prop = (0, import_utils24.exec)(param, element);
-      if (element.tag === "string") {
-        node2.nodeValue = prop;
-      } else if (param !== void 0 || param !== null) {
-        if (element.__text && element.__text.text !== prop)
-          return;
-        element.__text.text = prop;
-        if (element.__text.node)
-          element.__text.node.nodeValue = prop;
-        else
-          (0, import__2.create)({ tag: "string", text: prop }, element, "__text");
-      }
-    };
+    var import_utils31 = require_cjs();
     var text_default = (param, element, node2) => {
-      let prop = (0, import_utils24.exec)(param, element);
-      if ((0, import_utils24.isString)(prop) && prop.includes("{{")) {
-        prop = (0, import_utils24.replaceLiteralsWithObjectFields)(prop, element.state);
+      let prop = (0, import_utils31.exec)(param, element);
+      if ((0, import_utils31.isString)(prop) && prop.includes("{{")) {
+        prop = (0, import_utils31.replaceLiteralsWithObjectFields)(prop, element.state);
       }
       if (element.tag === "string") {
-        if (element.text === prop)
-          return;
         node2.nodeValue = prop;
       } else if (param !== void 0 || param !== null) {
         if (element.__text) {
@@ -2266,11 +2323,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_ignore = require_ignore();
     var parse3 = function() {
       const state = this;
-      if ((0, import_utils24.isObject)(state)) {
+      if ((0, import_utils31.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -2278,7 +2335,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils24.isArray)(state)) {
+      } else if ((0, import_utils31.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -2298,7 +2355,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils24.isString)(stateKey)) {
+      if ((0, import_utils31.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -2311,7 +2368,19 @@ var require_methods = __commonJS({
         for (const key in state.__children) {
           const child = state.__children[key];
           if (child.state) {
-            child.parent = state.parent;
+            if ((0, import_utils31.isArray)(child.state)) {
+              Object.defineProperty(child.state, "parent", {
+                value: state.parent,
+                enumerable: false,
+                // Set this to true if you want the method to appear in for...in loops
+                configurable: true,
+                // Set this to true if you want to allow redefining/removing the property later
+                writable: true
+                // Set this to true if you want to allow changing the function later
+              });
+            } else {
+              Object.setPrototypeOf(child, { parent: state.parent });
+            }
           }
         }
       }
@@ -2333,10 +2402,10 @@ var require_methods = __commonJS({
     };
     var add = function(value2, options = {}) {
       const state = this;
-      if ((0, import_utils24.isArray)(state)) {
+      if ((0, import_utils31.isArray)(state)) {
         state.push(value2);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils24.isObject)(state)) {
+      } else if ((0, import_utils31.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value2 }, options);
       }
@@ -2347,10 +2416,10 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils24.isArray)(state))
-        (0, import_utils24.removeFromArray)(state, key);
-      if ((0, import_utils24.isObject)(state))
-        (0, import_utils24.removeFromObject)(state, key);
+      if ((0, import_utils31.isArray)(state))
+        (0, import_utils31.removeFromArray)(state, key);
+      if ((0, import_utils31.isObject)(state))
+        (0, import_utils31.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
     var set5 = function(value2, options = {}) {
@@ -2359,7 +2428,7 @@ var require_methods = __commonJS({
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils24.isFunction)(func)) {
+      if ((0, import_utils31.isFunction)(func)) {
         func(state);
         return state.update(state, { replace: true, ...options });
       }
@@ -2394,12 +2463,12 @@ var require_inherit = __commonJS({
       createChangesByKey: () => createChangesByKey,
       createInheritedState: () => createInheritedState,
       findInheritedState: () => findInheritedState,
-      getChildStateInKey: () => getChildStateInKey2,
+      getChildStateInKey: () => getChildStateInKey3,
       getParentStateInKey: () => getParentStateInKey,
-      isState: () => isState2
+      isState: () => isState3
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -2413,7 +2482,7 @@ var require_inherit = __commonJS({
       }
       return parentState;
     };
-    var getChildStateInKey2 = (stateKey, parentState, options = {}) => {
+    var getChildStateInKey3 = (stateKey, parentState, options = {}) => {
       const arr = stateKey.split("/");
       const arrLength = arr.length - 1;
       for (let i2 = 0; i2 < arrLength; i2++) {
@@ -2446,16 +2515,16 @@ var require_inherit = __commonJS({
       }
       if (!parentState)
         return;
-      return getChildStateInKey2(stateKey, parentState, options);
+      return getChildStateInKey3(stateKey, parentState, options);
     };
     var createInheritedState = (element, parent) => {
       const ref = element.__ref;
       const inheritedState = findInheritedState(element, parent);
-      if ((0, import_utils24.isUndefined)(inheritedState))
+      if ((0, import_utils31.isUndefined)(inheritedState))
         return element.state;
-      if ((0, import_utils24.is)(inheritedState)("object", "array")) {
-        return (0, import_utils24.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils24.is)(inheritedState)("string", "number", "boolean")) {
+      if ((0, import_utils31.is)(inheritedState)("object", "array")) {
+        return (0, import_utils31.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils31.is)(inheritedState)("string", "number", "boolean")) {
         ref.__stateType = typeof inheritedState;
         return { value: inheritedState };
       }
@@ -2464,12 +2533,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (stateKey && (0, import_utils24.is)(stateKey)("number", "string", "boolean"))
+      if (stateKey && (0, import_utils31.is)(stateKey)("number", "string", "boolean"))
         return true;
       return false;
     };
-    var isState2 = function(state) {
-      if (!(0, import_utils24.isObjectLike)(state))
+    var isState3 = function(state) {
+      if (!(0, import_utils31.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;
     };
@@ -2518,21 +2587,20 @@ var require_updateState = __commonJS({
     var import_report = require_cjs2();
     var import_event = require_cjs3();
     var import_ignore = require_ignore();
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
       preventHoistElementUpdate: false,
       updateByState: true,
       isHoisted: true,
-      execStateFunction: true,
-      stateFunctionOverwrite: true
+      execStateFunction: true
     };
     var updateState = function(obj, options = STATE_UPDATE_OPTIONS) {
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils24.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils31.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -2562,10 +2630,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils24.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils31.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils24.overwriteShallow : import_utils24.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils31.overwriteShallow : import_utils31.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -2590,7 +2658,6 @@ var require_updateState = __commonJS({
         targetParent[stateKey] = value2;
       targetParent.update(changesValue, {
         execStateFunction: false,
-        stateFunctionOverwrite: false,
         isHoisted: true,
         ...options,
         preventUpdate: options.preventHoistElementUpdate,
@@ -2657,7 +2724,7 @@ var require_create2 = __commonJS({
     });
     module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs3();
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -2671,13 +2738,13 @@ var require_create2 = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils24.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils31.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
       if ((0, import_inherit.checkIfInherits)(element)) {
         const inheritedState = (0, import_inherit.createInheritedState)(element, parent);
-        element.state = (0, import_utils24.isUndefined)(inheritedState) ? {} : inheritedState;
+        element.state = (0, import_utils31.isUndefined)(inheritedState) ? {} : inheritedState;
       }
       const dependentState = applyDependentState(element, element.state);
       if (dependentState)
@@ -2690,17 +2757,17 @@ var require_create2 = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils24.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils31.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils24.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils31.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils24.isFunction)(state)) {
+      if ((0, import_utils31.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils24.exec)(state, element);
-      } else if ((0, import_utils24.is)(state)("string", "number")) {
+        return (0, import_utils31.exec)(state, element);
+      } else if ((0, import_utils31.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       } else if (state === true) {
@@ -2747,7 +2814,7 @@ var require_create2 = __commonJS({
         __children: {},
         __root: ref.__root ? ref.__root.state : state
       };
-      if ((0, import_utils24.isArray)(state)) {
+      if ((0, import_utils31.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
@@ -2814,17 +2881,17 @@ var require_state = __commonJS({
       state: () => state
     });
     module2.exports = __toCommonJS2(state_exports);
-    var import_state2 = require_cjs5();
-    var import_utils24 = require_cjs();
+    var import_state3 = require_cjs5();
+    var import_utils31 = require_cjs();
     var state = (params, element, node2) => {
-      const state2 = (0, import_utils24.exec)(params, element);
-      if ((0, import_utils24.isObject)(state2)) {
+      const state2 = (0, import_utils31.exec)(params, element);
+      if ((0, import_utils31.isObject)(state2)) {
         for (const param in state2) {
-          if (import_state2.IGNORE_STATE_PARAMS.includes(param))
+          if (import_state3.IGNORE_STATE_PARAMS.includes(param))
             continue;
           if (!Object.hasOwnProperty.call(state2, param))
             continue;
-          element.state[param] = (0, import_utils24.exec)(state2[param], element);
+          element.state[param] = (0, import_utils31.exec)(state2[param], element);
         }
       }
       return element;
@@ -2833,6 +2900,48 @@ var require_state = __commonJS({
   }
 });
 
+// ../../node_modules/@domql/element/dist/cjs/mixins/scope.js
+var require_scope = __commonJS({
+  "../../node_modules/@domql/element/dist/cjs/mixins/scope.js"(exports, module2) {
+    "use strict";
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export2 = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from2, except, desc) => {
+      if (from2 && typeof from2 === "object" || typeof from2 === "function") {
+        for (let key of __getOwnPropNames2(from2))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from2[key], enumerable: !(desc = __getOwnPropDesc2(from2, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var scope_exports = {};
+    __export2(scope_exports, {
+      default: () => scope_default
+    });
+    module2.exports = __toCommonJS2(scope_exports);
+    var import_utils31 = require_cjs();
+    var scope_default = (params, element, node2) => {
+      if (!(0, import_utils31.isObject)(params))
+        return;
+      for (const scopeItem in params) {
+        const value2 = params[scopeItem];
+        if ((0, import_utils31.isFunction)(value2)) {
+          element.scope[scopeItem] = value2.bind(element);
+        } else {
+          element.scope[scopeItem] = value2;
+        }
+      }
+    };
+  }
+});
+
 // ../../node_modules/@domql/element/dist/cjs/mixins/registry.js
 var require_registry = __commonJS({
   "../../node_modules/@domql/element/dist/cjs/mixins/registry.js"(exports, module2) {
@@ -2870,6 +2979,7 @@ var require_registry = __commonJS({
       data: import__2.data,
       class: import__2.classList,
       state: import__2.state,
+      scope: import__2.scope,
       deps: (param, el) => param || el.parent.deps,
       extend: {},
       childExtend: {},
@@ -2970,8 +3080,9 @@ var require_mixins = __commonJS({
       data: () => import_data.default,
       html: () => import_html.default,
       registry: () => import_registry.default,
-      state: () => import_state2.default,
-      style: () => import_style4.default,
+      scope: () => import_scope.default,
+      state: () => import_state3.default,
+      style: () => import_style6.default,
       text: () => import_text.default
     });
     module2.exports = __toCommonJS2(mixins_exports);
@@ -2980,9 +3091,10 @@ var require_mixins = __commonJS({
     var import_content = __toESM2(require_content(), 1);
     var import_data = __toESM2(require_data(), 1);
     var import_html = __toESM2(require_html(), 1);
-    var import_style4 = __toESM2(require_style(), 1);
+    var import_style6 = __toESM2(require_style(), 1);
     var import_text = __toESM2(require_text(), 1);
-    var import_state2 = __toESM2(require_state(), 1);
+    var import_state3 = __toESM2(require_state(), 1);
+    var import_scope = __toESM2(require_scope(), 1);
     var import_registry = __toESM2(require_registry(), 1);
     __reExport2(mixins_exports, require_registry(), module2.exports);
   }
@@ -3027,7 +3139,7 @@ var require_methods2 = __commonJS({
       spotByPath: () => spotByPath
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_tree = require_tree();
     var import_mixins = require_mixins();
     var spotByPath = function(path) {
@@ -3060,9 +3172,9 @@ var require_methods2 = __commonJS({
     };
     var remove = function(params) {
       const element = this;
-      if ((0, import_utils24.isFunction)(element.node.remove))
+      if ((0, import_utils31.isFunction)(element.node.remove))
         element.node.remove();
-      else if (!(0, import_utils24.isProduction)()) {
+      else if (!(0, import_utils31.isProduction)()) {
         console.warn("This item cant be removed");
         element.log();
       }
@@ -3102,12 +3214,12 @@ var require_methods2 = __commonJS({
         if (v === "state") {
           if (element.__ref && element.__ref.__hasRootState)
             return;
-          if ((0, import_utils24.isFunction)(val && val.parse))
+          if ((0, import_utils31.isFunction)(val && val.parse))
             val = val.parse();
         } else if (v === "props") {
           const { __element, update, ...props4 } = element[v];
           obj[v] = props4;
-        } else if ((0, import_utils24.isDefined)(val))
+        } else if ((0, import_utils31.isDefined)(val))
           obj[v] = val;
       });
       return obj;
@@ -3118,7 +3230,7 @@ var require_methods2 = __commonJS({
       for (const v in obj) {
         if (excl.includes(v))
           return;
-        if ((0, import_utils24.isObjectLike)(obj[v])) {
+        if ((0, import_utils31.isObjectLike)(obj[v])) {
           obj[v] = parseDeep.call(obj[v], excl);
         }
       }
@@ -3236,18 +3348,18 @@ var require_inherit2 = __commonJS({
       inheritParentProps: () => inheritParentProps
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var objectizeStringProperty = (propValue) => {
-      if ((0, import_utils24.is)(propValue)("string", "number")) {
+      if ((0, import_utils31.is)(propValue)("string", "number")) {
         return { inheritedString: propValue };
       }
       return propValue;
     };
     var inheritParentProps = (element, parent) => {
       let propsStack = [];
-      const parentProps = (0, import_utils24.exec)(parent, parent.state).props;
+      const parentProps = (0, import_utils31.exec)(parent, parent.state).props;
       const matchParent = parent.props && parentProps[element.key];
-      const matchParentIsString = (0, import_utils24.isString)(matchParent);
+      const matchParentIsString = (0, import_utils31.isString)(matchParent);
       const matchParentChildProps = parentProps && parentProps.childProps;
       if (matchParent) {
         if (matchParentIsString) {
@@ -3295,21 +3407,21 @@ var require_create3 = __commonJS({
       syncProps: () => syncProps
     });
     module2.exports = __toCommonJS2(create_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = 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_utils24.isObject)(props4))
+      if ((0, import_utils31.isObject)(props4))
         propsStack.push(props4);
       else if (props4 === "inherit" && parent.props)
         propsStack.push(parent.props);
       else if (props4)
         propsStack.push(props4);
-      if ((0, import_utils24.isArray)(__ref.__extend)) {
+      if ((0, import_utils31.isArray)(__ref.__extend)) {
         __ref.__extend.forEach((extend) => {
-          if (extend.props)
+          if (extend.props && extend.props !== props4)
             propsStack.push(extend.props);
         });
       }
@@ -3318,32 +3430,46 @@ var require_create3 = __commonJS({
     };
     var syncProps = (props4, element) => {
       element.props = {};
-      const mergedProps = { update, __element: element };
+      const mergedProps = {};
       props4.forEach((v) => {
         if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
           return;
-        const execProps = (0, import_utils24.exec)(v, element);
-        if ((0, import_utils24.isObject)(execProps) && execProps.__element)
-          return;
-        element.props = (0, import_utils24.deepMerge)(
+        const execProps = (0, import_utils31.exec)(v, element);
+        element.props = (0, import_utils31.deepMerge)(
           mergedProps,
-          (0, import_utils24.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
+          (0, import_utils31.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
           import_ignore.IGNORE_PROPS_PARAMS
         );
       });
       element.props = mergedProps;
+      const methods = { update: update.bind(element.props), __element: element };
+      Object.setPrototypeOf(element.props, methods);
       return element.props;
     };
     var createProps = function(element, parent, cached) {
-      const propsStack = cached || createPropsStack(element, parent);
       const { __ref: ref } = element;
-      if (!ref.__if)
-        return;
-      if (propsStack.length) {
-        ref.__props = propsStack;
-        syncProps(propsStack, element);
-        element.props.update = update;
+      const applyProps = () => {
+        const propsStack = cached || createPropsStack(element, parent);
+        if (propsStack.length) {
+          ref.__props = propsStack;
+          syncProps(propsStack, element);
+        } else {
+          ref.__props = cached || [];
+          element.props = {};
+        }
+      };
+      if (ref.__if)
+        applyProps();
+      else {
+        try {
+          applyProps();
+        } catch {
+          element.props = {};
+          ref.__props = cached || [];
+        }
       }
+      const methods = { update: update.bind(element.props), __element: element };
+      Object.setPrototypeOf(element.props, methods);
       return element;
     };
     function update(props4, options) {
@@ -3385,7 +3511,7 @@ var require_update = __commonJS({
       const { __ref } = element;
       let propsStack = __ref.__props;
       const parentProps = (0, import_inherit.inheritParentProps)(element, parent);
-      if (parentProps)
+      if (parentProps.length)
         propsStack = __ref.__props = [].concat(parentProps, propsStack);
       if (newProps)
         propsStack = __ref.__props = [].concat(newProps, propsStack);
@@ -3448,7 +3574,7 @@ var require_object2 = __commonJS({
     __export2(object_exports, {
       METHODS_EXL: () => METHODS_EXL,
       clone: () => clone,
-      deepClone: () => deepClone4,
+      deepClone: () => deepClone5,
       deepMerge: () => deepMerge4,
       flattenRecursive: () => flattenRecursive,
       mergeAndCloneIfArray: () => mergeAndCloneIfArray,
@@ -3456,17 +3582,17 @@ var require_object2 = __commonJS({
       mergeIfExisted: () => mergeIfExisted,
       overwrite: () => overwrite,
       overwriteDeep: () => overwriteDeep,
-      overwriteShallow: () => overwriteShallow2
+      overwriteShallow: () => overwriteShallow3
     });
     module2.exports = __toCommonJS2(object_exports);
-    var import_utils24 = require_cjs();
-    var import_state2 = require_cjs5();
+    var import_utils31 = require_cjs();
+    var import_state3 = require_cjs5();
     var import_props = require_props();
     var import_methods = require_methods2();
-    var METHODS_EXL = (0, import_utils24.joinArrays)(
+    var METHODS_EXL = (0, import_utils31.joinArrays)(
       ["node", "state", "context", "extend"],
       import_methods.METHODS,
-      import_state2.IGNORE_STATE_PARAMS,
+      import_state3.IGNORE_STATE_PARAMS,
       import_props.IGNORE_PROPS_PARAMS
     );
     var deepMerge4 = (element, extend, exclude = METHODS_EXL) => {
@@ -3477,7 +3603,7 @@ var require_object2 = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils24.isObjectLike)(elementProp) && (0, import_utils24.isObject)(extendProp)) {
+        } else if ((0, import_utils31.isObjectLike)(elementProp) && (0, import_utils31.isObject)(extendProp)) {
           deepMerge4(elementProp, extendProp);
         }
       }
@@ -3492,17 +3618,17 @@ var require_object2 = __commonJS({
       }
       return o;
     };
-    var deepClone4 = (obj, exclude = METHODS_EXL) => {
-      const o = (0, import_utils24.isArray)(obj) ? [] : {};
+    var deepClone5 = (obj, exclude = METHODS_EXL) => {
+      const o = (0, import_utils31.isArray)(obj) ? [] : {};
       for (const e in obj) {
         if (exclude.includes(e))
           continue;
         let objProp = obj[e];
-        if (e === "extend" && (0, import_utils24.isArray)(objProp)) {
+        if (e === "extend" && (0, import_utils31.isArray)(objProp)) {
           objProp = mergeArray(objProp, exclude);
         }
-        if ((0, import_utils24.isObjectLike)(objProp)) {
-          o[e] = deepClone4(objProp, exclude);
+        if ((0, import_utils31.isObjectLike)(objProp)) {
+          o[e] = deepClone5(objProp, exclude);
         } else
           o[e] = objProp;
       }
@@ -3526,7 +3652,7 @@ var require_object2 = __commonJS({
       }
       return changes;
     };
-    var overwriteShallow2 = (obj, params, exclude = METHODS_EXL) => {
+    var overwriteShallow3 = (obj, params, exclude = METHODS_EXL) => {
       for (const e in params) {
         if (exclude.includes(e))
           continue;
@@ -3540,7 +3666,7 @@ var require_object2 = __commonJS({
           continue;
         const objProp = obj[e];
         const paramsProp = params[e];
-        if ((0, import_utils24.isObjectLike)(objProp) && (0, import_utils24.isObjectLike)(paramsProp)) {
+        if ((0, import_utils31.isObjectLike)(objProp) && (0, import_utils31.isObjectLike)(paramsProp)) {
           overwriteDeep(objProp, paramsProp);
         } else if (paramsProp !== void 0) {
           obj[e] = paramsProp;
@@ -3549,15 +3675,15 @@ var require_object2 = __commonJS({
       return obj;
     };
     var mergeIfExisted = (a, b) => {
-      if ((0, import_utils24.isObjectLike)(a) && (0, import_utils24.isObjectLike)(b))
+      if ((0, import_utils31.isObjectLike)(a) && (0, import_utils31.isObjectLike)(b))
         return deepMerge4(a, b);
       return a || b;
     };
     var mergeArray = (arr, exclude = ["parent", "node", "__element", "state", "context", "__ref"]) => {
-      return arr.reduce((a, c) => deepMerge4(a, deepClone4(c, exclude)), {});
+      return arr.reduce((a, c) => deepMerge4(a, deepClone5(c, exclude)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
-      return (0, import_utils24.isArray)(obj) ? mergeArray(obj) : deepClone4(obj);
+      return (0, import_utils31.isArray)(obj) ? mergeArray(obj) : deepClone5(obj);
     };
     var flattenRecursive = (param, prop, stack = []) => {
       const objectized = mergeAndCloneIfArray(param);
@@ -3609,11 +3735,10 @@ var require_extendUtils = __commonJS({
       getExtendStackRegistry: () => getExtendStackRegistry,
       getHashedExtend: () => getHashedExtend,
       jointStacks: () => jointStacks,
-      replaceStringsWithComponents: () => replaceStringsWithComponents,
       setHashedExtend: () => setHashedExtend
     });
     module2.exports = __toCommonJS2(extendUtils_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var ENV2 = "development";
     var generateHash = () => Math.random().toString(36).substring(2);
     var extendStackRegistry = {};
@@ -3623,7 +3748,7 @@ var require_extendUtils = __commonJS({
     };
     var setHashedExtend = (extend, stack) => {
       const hash2 = generateHash();
-      if (!(0, import_utils24.isString)(extend)) {
+      if (!(0, import_utils31.isString)(extend)) {
         extend.__hash = hash2;
       }
       extendStackRegistry[hash2] = stack;
@@ -3635,25 +3760,27 @@ var require_extendUtils = __commonJS({
       }
       return setHashedExtend(extend, stack);
     };
-    var extractArrayExtend = (extend, stack) => {
-      extend.forEach((each) => flattenExtend(each, stack));
+    var extractArrayExtend = (extend, stack, context) => {
+      extend.forEach((each) => flattenExtend(each, stack, context));
       return stack;
     };
-    var deepExtend = (extend, stack) => {
+    var deepExtend = (extend, stack, context) => {
       const extendOflattenExtend = extend.extend;
       if (extendOflattenExtend) {
-        flattenExtend(extendOflattenExtend, stack);
+        flattenExtend(extendOflattenExtend, stack, context);
       }
       return stack;
     };
-    var flattenExtend = (extend, stack) => {
+    var flattenExtend = (extend, stack, context) => {
       if (!extend)
         return stack;
-      if ((0, import_utils24.isArray)(extend))
-        return extractArrayExtend(extend, stack);
+      if ((0, import_utils31.isArray)(extend))
+        return extractArrayExtend(extend, stack, context);
+      if ((0, import_utils31.isString)(extend))
+        extend = fallbackStringExtend(extend, context);
       stack.push(extend);
       if (extend.extend)
-        deepExtend(extend, stack);
+        deepExtend(extend, stack, context);
       return stack;
     };
     var deepCloneExtend = (obj) => {
@@ -3662,9 +3789,9 @@ var require_extendUtils = __commonJS({
         if (["parent", "node", "__element"].indexOf(prop) > -1)
           continue;
         const objProp = obj[prop];
-        if ((0, import_utils24.isObject)(objProp)) {
+        if ((0, import_utils31.isObject)(objProp)) {
           o[prop] = deepCloneExtend(objProp);
-        } else if ((0, import_utils24.isArray)(objProp)) {
+        } else if ((0, import_utils31.isArray)(objProp)) {
           o[prop] = objProp.map((x) => x);
         } else
           o[prop] = objProp;
@@ -3679,14 +3806,14 @@ var require_extendUtils = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils24.isObject)(elementProp) && (0, import_utils24.isObject)(extendProp)) {
+        } else if ((0, import_utils31.isObject)(elementProp) && (0, import_utils31.isObject)(extendProp)) {
           deepMergeExtend(elementProp, extendProp);
-        } else if ((0, import_utils24.isArray)(elementProp) && (0, import_utils24.isArray)(extendProp)) {
+        } else if ((0, import_utils31.isArray)(elementProp) && (0, import_utils31.isArray)(extendProp)) {
           element[e] = elementProp.concat(extendProp);
-        } else if ((0, import_utils24.isArray)(elementProp) && (0, import_utils24.isObject)(extendProp)) {
+        } else if ((0, import_utils31.isArray)(elementProp) && (0, import_utils31.isObject)(extendProp)) {
           const obj = deepMergeExtend({}, elementProp);
           element[e] = deepMergeExtend(obj, extendProp);
-        } else if (elementProp === void 0 && (0, import_utils24.isFunction)(extendProp)) {
+        } else if (elementProp === void 0 && (0, import_utils31.isFunction)(extendProp)) {
           element[e] = extendProp;
         }
       }
@@ -3697,9 +3824,9 @@ var require_extendUtils = __commonJS({
         return deepMergeExtend(a, deepCloneExtend(c));
       }, {});
     };
-    var fallbackStringExtend = (extend, context, options) => {
+    var fallbackStringExtend = (extend, context, options = {}) => {
       const COMPONENTS = context && context.components || options.components;
-      if ((0, import_utils24.isString)(extend)) {
+      if ((0, import_utils31.isString)(extend)) {
         if (COMPONENTS && COMPONENTS[extend]) {
           return COMPONENTS[extend];
         } else {
@@ -3714,32 +3841,18 @@ var require_extendUtils = __commonJS({
     var jointStacks = (extendStack, childExtendStack) => {
       return [].concat(extendStack.slice(0, 1)).concat(childExtendStack.slice(0, 1)).concat(extendStack.slice(1)).concat(childExtendStack.slice(1));
     };
-    var getExtendStack = (extend) => {
+    var getExtendStack = (extend, context) => {
       if (!extend)
         return [];
       if (extend.__hash)
         return getHashedExtend(extend) || [];
-      const stack = flattenExtend(extend, []);
+      const stack = flattenExtend(extend, [], context);
       return getExtendStackRegistry(extend, stack);
     };
     var getExtendMerged = (extend) => {
       const stack = getExtendStack(extend);
       return cloneAndMergeArrayExtend(stack);
     };
-    var replaceStringsWithComponents = (stack, context, options) => {
-      const COMPONENTS = context && context.components || options.components;
-      return stack.map((v) => {
-        if ((0, import_utils24.isString)(v)) {
-          const component = COMPONENTS[v];
-          return component;
-        }
-        if ((0, import_utils24.isString)(v.extend)) {
-          v.extend = COMPONENTS[v.extend];
-          return { ...getExtendMerged(v.extend), ...v };
-        }
-        return v;
-      });
-    };
   }
 });
 
@@ -3769,27 +3882,27 @@ var require_extend = __commonJS({
       applyExtend: () => applyExtend
     });
     module2.exports = __toCommonJS2(extend_exports);
-    var import_utils24 = require_cjs();
-    var import_utils25 = require_utils();
+    var import_utils31 = require_cjs();
+    var import_utils210 = require_utils();
     var ENV2 = "development";
     var applyExtend = (element, parent, options = {}) => {
-      if ((0, import_utils24.isFunction)(element))
-        element = (0, import_utils24.exec)(element, parent);
+      if ((0, import_utils31.isFunction)(element))
+        element = (0, import_utils31.exec)(element, parent);
       let { extend, props: props4, context, __ref } = element;
-      extend = (0, import_utils25.fallbackStringExtend)(extend, context, options);
-      const extendStack = (0, import_utils25.getExtendStack)(extend);
+      extend = (0, import_utils210.fallbackStringExtend)(extend, context, options);
+      const extendStack = (0, import_utils210.getExtendStack)(extend, context);
       if (ENV2 !== "test" || ENV2 !== "development")
         delete element.extend;
       let childExtendStack = [];
       if (parent) {
         element.parent = parent;
         if (!options.ignoreChildExtend && !(props4 && props4.ignoreChildExtend)) {
-          childExtendStack = (0, import_utils25.getExtendStack)(parent.childExtend);
+          childExtendStack = (0, import_utils210.getExtendStack)(parent.childExtend, context);
           const ignoreChildExtendRecursive = props4 && props4.ignoreChildExtendRecursive;
           if (parent.childExtendRecursive && !ignoreChildExtendRecursive) {
             const canExtendRecursive = element.key !== "__text";
             if (canExtendRecursive) {
-              const childExtendRecursiveStack = (0, import_utils25.getExtendStack)(parent.childExtendRecursive);
+              const childExtendRecursiveStack = (0, import_utils210.getExtendStack)(parent.childExtendRecursive, context);
               childExtendStack = childExtendStack.concat(childExtendRecursiveStack);
               element.childExtendRecursive = parent.childExtendRecursive;
             }
@@ -3800,7 +3913,7 @@ var require_extend = __commonJS({
       const childExtendLength = childExtendStack.length;
       let stack = [];
       if (extendLength && childExtendLength) {
-        stack = (0, import_utils25.jointStacks)(extendStack, childExtendStack);
+        stack = (0, import_utils210.jointStacks)(extendStack, childExtendStack);
       } else if (extendLength) {
         stack = extendStack;
       } else if (childExtendLength) {
@@ -3808,20 +3921,19 @@ var require_extend = __commonJS({
       } else if (!options.extend)
         return element;
       if (options.extend) {
-        const defaultOptionsExtend = (0, import_utils25.getExtendStack)(options.extend);
+        const defaultOptionsExtend = (0, import_utils210.getExtendStack)(options.extend, context);
         stack = [].concat(stack, defaultOptionsExtend);
       }
       if (__ref)
         __ref.__extend = stack;
-      const findAndReplaceStrings = (0, import_utils25.replaceStringsWithComponents)(stack, context, options);
-      let mergedExtend = (0, import_utils25.cloneAndMergeArrayExtend)(findAndReplaceStrings);
+      let mergedExtend = (0, import_utils210.cloneAndMergeArrayExtend)(stack);
       const COMPONENTS = context && context.components || options.components;
-      const component = (0, import_utils24.exec)(element.component || mergedExtend.component, element);
+      const component = (0, import_utils31.exec)(element.component || mergedExtend.component, element);
       if (component && COMPONENTS && COMPONENTS[component]) {
-        const componentExtend = (0, import_utils25.cloneAndMergeArrayExtend)((0, import_utils25.getExtendStack)(COMPONENTS[component]));
-        mergedExtend = (0, import_utils25.deepMergeExtend)(componentExtend, mergedExtend);
+        const componentExtend = (0, import_utils210.cloneAndMergeArrayExtend)((0, import_utils210.getExtendStack)(COMPONENTS[component]));
+        mergedExtend = (0, import_utils210.deepMergeExtend)(componentExtend, mergedExtend);
       }
-      return (0, import_utils25.deepMergeExtend)(element, mergedExtend);
+      return (0, import_utils210.deepMergeExtend)(element, mergedExtend);
     };
   }
 });
@@ -3860,11 +3972,11 @@ var require_component = __commonJS({
       overwriteVariant: () => overwriteVariant
     });
     module2.exports = __toCommonJS2(component_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_extend = require_extend();
     var ENV2 = "development";
     var checkIfKeyIsComponent = (key) => {
-      const isFirstKeyString = (0, import_utils24.isString)(key);
+      const isFirstKeyString = (0, import_utils31.isString)(key);
       if (!isFirstKeyString)
         return;
       const firstCharKey = key.slice(0, 1);
@@ -3872,7 +3984,7 @@ var require_component = __commonJS({
     };
     var addAdditionalExtend = (newExtend, element) => {
       const { extend } = element;
-      const preserveExtend = (0, import_utils24.isArray)(extend) ? extend : [extend];
+      const preserveExtend = (0, import_utils31.isArray)(extend) ? extend : [extend];
       return {
         ...element,
         extend: [newExtend].concat(preserveExtend)
@@ -3880,25 +3992,29 @@ var require_component = __commonJS({
     };
     var extendizeByKey = (element, parent, key) => {
       const { tag, extend, props: props4, state, childExtend, childProps, on: on2, if: condition } = element;
-      const hasComponentAttrs = tag || extend || childExtend || props4 || state || on2 || condition;
+      const hasComponentAttrs = extend || childExtend || props4 || state || on2 || condition;
       const componentKey = key.includes("_") ? key.split("_")[0] : key.includes(".") ? key.split(".")[0] : key;
       const extendKey = componentKey || key;
       if (!hasComponentAttrs || childProps) {
         return {
           extend: extendKey,
+          tag,
           props: { ...element }
         };
       } else if (!extend || extend === true) {
         return {
           ...element,
+          tag,
           extend: extendKey
         };
       } else if (extend) {
         addAdditionalExtend(extendKey, element);
-      } else if ((0, import_utils24.isFunction)(element)) {
+      } else if ((0, import_utils31.isFunction)(element)) {
+        console.log(element);
         return {
           extend: extendKey,
-          props: { ...(0, import_utils24.exec)(element, parent) }
+          tag,
+          props: { ...(0, import_utils31.exec)(element, parent) }
         };
       }
     };
@@ -3911,8 +4027,8 @@ var require_component = __commonJS({
         return;
       const { components } = context;
       const { extend } = element;
-      const execExtend = (0, import_utils24.exec)(extend, element);
-      if ((0, import_utils24.isString)(execExtend)) {
+      const execExtend = (0, import_utils31.exec)(extend, element);
+      if ((0, import_utils31.isString)(execExtend)) {
         if (components[execExtend])
           element.extend = components[execExtend];
         else {
@@ -3925,29 +4041,29 @@ var require_component = __commonJS({
       }
     };
     var isVariant = (param) => {
-      if (!(0, import_utils24.isString)(param))
+      if (!(0, import_utils31.isString)(param))
         return;
       const firstCharKey = param.slice(0, 1);
       return firstCharKey === ".";
     };
     var hasVariantProp = (element) => {
       const { props: props4 } = element;
-      if ((0, import_utils24.isObject)(props4) && (0, import_utils24.isString)(props4.variant))
+      if ((0, import_utils31.isObject)(props4) && (0, import_utils31.isString)(props4.variant))
         return true;
     };
     var overwriteVariant = (element, variant, variantProps) => {
       let variantElement = element[variant];
       if (!variantElement)
         return;
-      const props4 = (0, import_utils24.isObject)(variantProps) ? variantProps : {};
-      if ((0, import_utils24.isString)(variantElement)) {
+      const props4 = (0, import_utils31.isObject)(variantProps) ? variantProps : {};
+      if ((0, import_utils31.isString)(variantElement)) {
         variantElement = {
           extend: [{ props: props4 }, variantElement]
         };
       } else if (variantElement.extend) {
         variantElement = addAdditionalExtend({ props: props4 }, variantElement);
       }
-      return (0, import_utils24.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
+      return (0, import_utils31.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
     };
     var applyVariant = (element) => {
       const { props: props4 } = element;
@@ -4022,8 +4138,8 @@ var require_iterate = __commonJS({
       throughUpdatedExec: () => throughUpdatedExec
     });
     module2.exports = __toCommonJS2(iterate_exports);
-    var import_utils24 = require_cjs();
-    var import_utils25 = require_utils();
+    var import_utils31 = require_cjs();
+    var import_utils210 = require_utils();
     var import_methods = require_methods2();
     var throughInitialExec = (element, exclude = {}) => {
       const { __ref: ref } = element;
@@ -4031,13 +4147,13 @@ var require_iterate = __commonJS({
         if (exclude[param])
           continue;
         const prop = element[param];
-        if ((0, import_utils24.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils25.isVariant)(param)) {
+        if ((0, import_utils31.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
           ref.__exec[param] = prop;
           element[param] = prop(element, element.state);
         }
       }
     };
-    var throughUpdatedExec = (element, options = { excludes: import_utils25.METHODS_EXL }) => {
+    var throughUpdatedExec = (element, options = { excludes: import_utils210.METHODS_EXL }) => {
       const { __ref: ref } = element;
       const changes = {};
       for (const param in ref.__exec) {
@@ -4046,13 +4162,13 @@ var require_iterate = __commonJS({
         if (isDefinedParam)
           continue;
         const newExec = ref.__exec[param](element, element.state, element.context);
-        const execReturnsString = (0, import_utils24.isString)(newExec) || (0, import_utils24.isNumber)(newExec);
+        const execReturnsString = (0, import_utils31.isString)(newExec) || (0, import_utils31.isNumber)(newExec);
         if (prop && prop.node && execReturnsString) {
-          (0, import_utils25.overwrite)(prop, { text: newExec }, options);
+          (0, import_utils210.overwrite)(prop, { text: newExec }, options);
         } else if (newExec !== prop) {
-          if ((0, import_utils25.checkIfKeyIsComponent)(param)) {
-            const { extend, ...newElem } = (0, import_utils25.extendizeByKey)(newExec, element, param);
-            (0, import_utils25.overwrite)(prop, newElem, options);
+          if ((0, import_utils210.checkIfKeyIsComponent)(param)) {
+            const { extend, ...newElem } = (0, import_utils210.extendizeByKey)(newExec, element, param);
+            (0, import_utils210.overwrite)(prop, newElem, options);
           } else {
             ref.__cached[param] = changes[param] = prop;
             element[param] = newExec;
@@ -4064,16 +4180,16 @@ var require_iterate = __commonJS({
     var throughInitialDefine = (element) => {
       const { define, context, __ref: ref } = element;
       let defineObj = {};
-      const hasGlobalDefine = context && (0, import_utils24.isObject)(context.define);
-      if ((0, import_utils24.isObject)(define))
+      const hasGlobalDefine = context && (0, import_utils31.isObject)(context.define);
+      if ((0, import_utils31.isObject)(define))
         defineObj = { ...define };
       if (hasGlobalDefine)
         defineObj = { ...defineObj, ...context.define };
       for (const param in defineObj) {
         let elementProp = element[param];
-        if ((0, import_utils24.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils25.isVariant)(param)) {
+        if ((0, import_utils31.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
           ref.__exec[param] = elementProp;
-          const execParam2 = elementProp = (0, import_utils24.exec)(elementProp, element);
+          const execParam2 = elementProp = (0, import_utils31.exec)(elementProp, element);
           if (execParam2) {
             elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
             ref.__defineCache[param] = elementProp;
@@ -4089,15 +4205,15 @@ var require_iterate = __commonJS({
       const { context, define, __ref: ref } = element;
       const changes = {};
       let obj = {};
-      if ((0, import_utils24.isObject)(define))
+      if ((0, import_utils31.isObject)(define))
         obj = { ...define };
-      if ((0, import_utils24.isObject)(context && context.define))
+      if ((0, import_utils31.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_utils24.exec)(ref.__defineCache[param], element);
+        const cached = (0, import_utils31.exec)(ref.__defineCache[param], element);
         const newExecParam = obj[param](cached, element, element.state, element.context);
         if (newExecParam)
           element[param] = newExecParam;
@@ -4133,7 +4249,7 @@ var require_applyParam = __commonJS({
       applyParam: () => applyParam
     });
     module2.exports = __toCommonJS2(applyParam_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_mixins = require_mixins();
     var applyParam = (param, element, options) => {
       const { node: node2, context, __ref: ref } = element;
@@ -4146,7 +4262,7 @@ var require_applyParam = __commonJS({
       if (!ref.__if)
         return;
       if (isGlobalTransformer && !hasContextDefine) {
-        if ((0, import_utils24.isFunction)(isGlobalTransformer)) {
+        if ((0, import_utils31.isFunction)(isGlobalTransformer)) {
           isGlobalTransformer(prop, element, node2, options);
           return;
         }
@@ -4193,7 +4309,7 @@ var require_node2 = __commonJS({
       default: () => node_default
     });
     module2.exports = __toCommonJS2(node_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_event = require_cjs3();
     var import_render = require_cjs4();
     var import_methods = require_methods2();
@@ -4201,7 +4317,7 @@ var require_node2 = __commonJS({
     var import_iterate = require_iterate();
     var import_mixins = require_mixins();
     var import_applyParam = require_applyParam();
-    var import_utils25 = require_utils();
+    var import_utils210 = require_utils();
     var ENV2 = "development";
     var createNode = (element, options) => {
       let { node: node2, tag, __ref: ref } = element;
@@ -4218,28 +4334,28 @@ var require_node2 = __commonJS({
       }
       if (ENV2 === "test" || ENV2 === "development" || options.alowRefReference) {
         node2.ref = element;
-        if ((0, import_utils24.isFunction)(node2.setAttribute))
+        if ((0, import_utils31.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_utils24.isObject)(element.on))
+      (0, import_iterate.throughInitialDefine)(element);
+      (0, import_iterate.throughInitialExec)(element);
+      if (element.tag !== "string" && element.tag !== "fragment") {
+        if (isNewNode && (0, import_utils31.isObject)(element.on))
           (0, import_event.applyEventsOnNode)(element);
-        for (const param in element) {
-          const prop = element[param];
-          if ((0, import_utils24.isUndefined)(prop) || (0, import_methods.isMethod)(param) || (0, import_utils25.isVariant)(param) || (0, import_utils24.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) {
-              const createAsync = () => (0, import_create.default)((0, import_utils24.exec)(prop, element), element, param, options);
-              if (element.props && element.props.lazyLoad || options.lazyLoad) {
-                window.requestAnimationFrame(() => createAsync());
-              } else
-                createAsync();
-            }
+      }
+      for (const param in element) {
+        const value2 = element[param];
+        if ((0, import_utils31.isUndefined)(value2) || (0, import_methods.isMethod)(param) || (0, import_utils210.isVariant)(param) || (0, import_utils31.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) {
+            const createAsync = () => (0, import_create.default)((0, import_utils31.exec)(value2, element), element, param, options);
+            if (element.props && element.props.lazyLoad || options.lazyLoad) {
+              window.requestAnimationFrame(() => createAsync());
+            } else
+              createAsync();
           }
         }
       }
@@ -4275,7 +4391,7 @@ var require_methods3 = __commonJS({
       DEFAULT_METHODS: () => DEFAULT_METHODS
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var DEFAULT_METHODS = {
       key: {},
       tag: {},
@@ -4296,7 +4412,7 @@ var require_methods3 = __commonJS({
       text: (element, state) => {
         element.ref.text = {
           tag: "text",
-          text: (0, import_utils24.exec)(element.text, element, state)
+          text: (0, import_utils31.exec)(element.text, element, state)
         };
       },
       innerHTML: {},
@@ -4533,19 +4649,19 @@ var require_update2 = __commonJS({
       default: () => update_default
     });
     module2.exports = __toCommonJS2(update_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_event = require_cjs3();
     var import_methods = require_methods2();
     var import_props = require_props();
-    var import_state2 = require_cjs5();
-    var import_utils25 = require_utils();
+    var import_state3 = require_cjs5();
+    var import_utils210 = require_utils();
     var import_create = __toESM2(require_create4(), 1);
     var import_iterate = require_iterate();
     var import_mixins = require_mixins();
     var import_applyParam = require_applyParam();
     var import_options3 = __toESM2(require_options(), 1);
     var snapshot = {
-      snapshotId: import_utils24.createSnapshotId
+      snapshotId: import_utils31.createSnapshotId
     };
     var UPDATE_DEFAULT_OPTIONS = {
       stackChanges: false,
@@ -4553,7 +4669,7 @@ var require_update2 = __commonJS({
       preventRecursive: false,
       currentSnapshot: false,
       calleeElement: false,
-      excludes: import_utils25.METHODS_EXL
+      excludes: import_utils210.METHODS_EXL
     };
     var update = function(params = {}, options = UPDATE_DEFAULT_OPTIONS) {
       const element = this;
@@ -4562,14 +4678,14 @@ var require_update2 = __commonJS({
       if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
         return;
       if (!excludes)
-        (0, import_utils24.merge)(options, UPDATE_DEFAULT_OPTIONS);
+        (0, import_utils31.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_utils24.isString)(params) || (0, import_utils24.isNumber)(params)) {
+      if ((0, import_utils31.isString)(params) || (0, import_utils31.isNumber)(params)) {
         params = { text: params };
       }
       const ifFails = checkIfOnUpdate(element, parent, options);
@@ -4580,24 +4696,24 @@ 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_utils24.isFunction)(v));
+        const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils31.isFunction)(v));
         const props4 = params.props || hasParentProps || hasFunctionInProps.length;
         if (props4)
           (0, import_props.updateProps)(props4, element, parent);
       }
-      if (!options.isForced) {
-        (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
-      }
       if (!options.preventInitUpdateListener) {
         const initUpdateReturns = (0, import_event.triggerEventOnUpdate)("initUpdate", params, element, options);
         if (initUpdateReturns === false)
           return element;
       }
-      const overwriteChanges = (0, import_utils24.overwriteDeep)(element, params, import_utils25.METHODS_EXL);
+      const overwriteChanges = (0, import_utils31.overwriteDeep)(element, params, import_utils210.METHODS_EXL);
       const execChanges = (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
       const definedChanges = (0, import_iterate.throughUpdatedDefine)(element);
+      if (!options.isForced) {
+        (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
+      }
       if (options.stackChanges && element.__stackChanges) {
-        const stackChanges = (0, import_utils24.merge)(definedChanges, (0, import_utils24.merge)(execChanges, overwriteChanges));
+        const stackChanges = (0, import_utils31.merge)(definedChanges, (0, import_utils31.merge)(execChanges, overwriteChanges));
         element.__stackChanges.push(stackChanges);
       }
       if (!ref.__if)
@@ -4608,27 +4724,25 @@ 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_utils24.isArray)(options.preventUpdate) && options.preventUpdate.includes(param);
-        const isInPreventDefineUpdate = (0, import_utils24.isArray)(options.preventDefineUpdate) && options.preventDefineUpdate.includes(param);
-        if ((0, import_utils24.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_utils24.isObject)(import_mixins.registry[param]) || (0, import_utils25.isVariant)(param))
+        const isInPreventUpdate = (0, import_utils31.isArray)(options.preventUpdate) && options.preventUpdate.includes(param);
+        const isInPreventDefineUpdate = (0, import_utils31.isArray)(options.preventDefineUpdate) && options.preventDefineUpdate.includes(param);
+        if ((0, import_utils31.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_utils31.isObject)(import_mixins.registry[param]) || (0, import_utils210.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_utils24.isObject)(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive;
+          const canUpdate = (0, import_utils31.isObject)(prop) && !hasDefine && !hasContextDefine && !options.preventRecursive;
           if (!canUpdate)
             continue;
+          const lazyLoad = element.props.lazyLoad || options.lazyLoad;
           const childUpdateCall = () => update.call(prop, params[prop], {
             ...options,
             currentSnapshot: snapshotOnCallee,
             calleeElement
           });
-          if (element.props && element.props.lazyLoad || options.lazyLoad) {
-            import_utils24.window.requestAnimationFrame(() => childUpdateCall());
-          } else
-            childUpdateCall();
+          lazyLoad ? import_utils31.window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
         }
       }
       if (!options.preventUpdateListener)
@@ -4650,7 +4764,7 @@ var require_update2 = __commonJS({
       return [snapshotOnCallee, calleeElement];
     };
     var checkIfOnUpdate = (element, parent, options) => {
-      if (!(0, import_utils24.isFunction)(element.if) || !element.state || !parent)
+      if (!(0, import_utils31.isFunction)(element.if) || !element.state || !parent)
         return;
       const ref = element.__ref;
       const ifPassed = element.if(element, element.state, element.context, options);
@@ -4667,7 +4781,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_utils24.isFunction)(element.on.update)) {
+          if (options.preventUpdate !== true && element.on && (0, import_utils31.isFunction)(element.on.update)) {
             (0, import_event.applyEvent)(element.on.update, created, created.state);
           }
           return created;
@@ -4681,24 +4795,20 @@ var require_update2 = __commonJS({
       const { __ref: ref } = element;
       const stateKey = ref.__state;
       const { parent, state } = element;
-      if (options.preventpdateTriggerStateUpdate)
+      const { preventUpdateTriggerStateUpdate, isHoisted, execStateFunction } = options;
+      if (preventUpdateTriggerStateUpdate)
         return;
       if (!stateKey && !ref.__hasRootState) {
         element.state = parent && parent.state || {};
         return;
       }
-      const { isHoisted, execStateFunction, stateFunctionOverwrite } = options;
-      const shouldForceStateUpdate = (0, import_utils24.isFunction)(stateKey) && (!isHoisted && execStateFunction && stateFunctionOverwrite);
-      if (shouldForceStateUpdate) {
-        const execState = (0, import_utils24.exec)(stateKey, element);
-        state.set(execState, {
-          ...options,
-          preventUpdate: true
-        });
+      const shouldForceFunctionState = (0, import_utils31.isFunction)(stateKey) && !isHoisted && execStateFunction;
+      if (shouldForceFunctionState) {
+        const execState = (0, import_utils31.exec)(stateKey, element);
+        state.set(execState, { ...options, preventUpdate: true });
         return;
       }
-      const parentState = parent && parent.state || {};
-      const keyInParentState = parentState[stateKey];
+      const keyInParentState = (0, import_state3.findInheritedState)(element, element.parent);
       if (!keyInParentState || options.preventInheritedStateUpdate)
         return;
       if (!options.preventInitStateUpdateListener) {
@@ -4713,7 +4823,7 @@ var require_update2 = __commonJS({
     };
     var createStateUpdate = (element, parent, options) => {
       const __stateChildren = element.state.__children;
-      const newState = (0, import_state2.createState)(element, parent);
+      const newState = (0, import_state3.createState)(element, parent);
       element.state = newState;
       for (const child in __stateChildren) {
         if (newState[child])
@@ -4762,7 +4872,7 @@ var require_set2 = __commonJS({
       addMethods: () => addMethods
     });
     module2.exports = __toCommonJS2(set_exports);
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_set = __toESM2(require_set(), 1);
     var import_update = __toESM2(require_update2(), 1);
     var import__2 = require_methods2();
@@ -4783,7 +4893,7 @@ var require_set2 = __commonJS({
         nextElement: import__2.nextElement.bind(element),
         previousElement: import__2.previousElement.bind(element)
       };
-      if ((0, import_utils24.isDevelopment)())
+      if ((0, import_utils31.isDevelopment)())
         proto.log = import__2.log.bind(element);
       Object.setPrototypeOf(element, proto);
     };
@@ -4831,7 +4941,7 @@ var require_create4 = __commonJS({
     var import_registry = require_cjs6();
     var import_event = require_cjs3();
     var import_render = require_cjs4();
-    var import_state2 = require_cjs5();
+    var import_state3 = require_cjs5();
     var import_methods = require_methods2();
     var import_props = require_props();
     var import_extend = require_extend();
@@ -4839,7 +4949,7 @@ var require_create4 = __commonJS({
     var import_set = require_set2();
     var import_classList = require_classList();
     var import_iterate = require_iterate();
-    var import_utils24 = require_cjs();
+    var import_utils31 = require_cjs();
     var import_options3 = __toESM2(require_options(), 1);
     var import_component = require_component();
     var ENV2 = "development";
@@ -4852,7 +4962,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_utils24.deepClone)(element.props, []);
+      ref.__initialProps = (0, import_utils31.deepClone)(element.props, []);
       applyContext(element, parent, options);
       (0, import_component.applyComponentFromContext)(element, parent, options);
       if (!ref.__skipCreate) {
@@ -4865,12 +4975,18 @@ var require_create4 = __commonJS({
       replaceOptions(element, parent, options);
       addCaching(element, parent);
       (0, import_set.addMethods)(element, parent);
-      (0, import_state2.createState)(element, parent);
+      createScope(element, parent);
+      (0, import_state3.createState)(element, parent);
+      if (element.scope === "state")
+        element.scope = element.state;
+      createIfConditionFlag(element, parent);
+      (0, import_props.createProps)(element, parent);
+      if (element.scope === "props" || element.scope === true)
+        element.scope = element.props;
       createIfConditionFlag(element, parent);
       if (element.node && ref.__if) {
         return (0, import_render.assignNode)(element, parent, key);
       }
-      (0, import_props.createProps)(element, parent);
       (0, import_component.applyVariant)(element, parent);
       const onInit = (0, import_event.triggerEventOn)("init", element, options);
       if (onInit === false)
@@ -4889,7 +5005,7 @@ var require_create4 = __commonJS({
         }
         return {};
       }
-      if ((0, import_utils24.isString)(key) && key.slice(0, 2 === "__")) {
+      if ((0, import_utils31.isString)(key) && key.slice(0, 2 === "__")) {
         if (ENV2 === "test" || ENV2 === "development") {
           console.warn(key, "seems like to be in __ref");
         }
@@ -4916,7 +5032,7 @@ var require_create4 = __commonJS({
     var redefineParent = (element, parent, key, options) => {
       if (!parent)
         return import_tree.ROOT;
-      if ((0, import_utils24.isNode)(parent)) {
+      if ((0, import_utils31.isNode)(parent)) {
         const parentNodeWrapper = { key: ":root", node: parent };
         import_tree.ROOT[`${key}_parent`] = parentNodeWrapper;
         return parentNodeWrapper;
@@ -4930,7 +5046,7 @@ var require_create4 = __commonJS({
       }
     };
     var createKey = (element, parent, key) => {
-      return ((0, import_utils24.exec)(key, element) || key || element.key || (0, import_utils24.generateKey)()).toString();
+      return ((0, import_utils31.exec)(key, element) || key || element.key || (0, import_utils31.generateKey)()).toString();
     };
     var addRef = (element, parent) => {
       if (element.__ref)
@@ -4960,7 +5076,7 @@ var require_create4 = __commonJS({
       (0, import_event.triggerEventOn)("render", element, options);
     };
     var checkIfPrimitive = (element) => {
-      return (0, import_utils24.is)(element)("string", "number");
+      return (0, import_utils31.is)(element)("string", "number");
     };
     var applyValueAsText = (element, parent, key) => {
       const extendTag = element.extend && element.extend.tag;
@@ -4977,9 +5093,14 @@ var require_create4 = __commonJS({
       if (!element.context)
         element.context = parent.context || options.context || import_tree.ROOT.context;
     };
+    var createScope = (element, parent) => {
+      const { __ref: ref } = element;
+      if (!element.scope)
+        element.scope = parent.scope || ref.__root.scope || {};
+    };
     var createIfConditionFlag = (element, parent) => {
       const { __ref: ref } = element;
-      if ((0, import_utils24.isFunction)(element.if)) {
+      if ((0, import_utils31.isFunction)(element.if)) {
         const ifPassed = element.if(element, element.state);
         if (!ifPassed) {
           const ifFragment = (0, import_render.cacheNode)({ tag: "fragment" });
@@ -5043,8 +5164,8 @@ var require_create4 = __commonJS({
         if (!ref.__children)
           ref.__children = [];
         (0, import_set.addMethods)(element, parent);
-        (0, import_state2.createState)(element, parent);
-        if ((0, import_utils24.isFunction)(element.if)) {
+        (0, import_state3.createState)(element, parent);
+        if ((0, import_utils31.isFunction)(element.if)) {
           const ifPassed = element.if(element, element.state);
           if (!ifPassed) {
             delete ref.__if;
@@ -5064,7 +5185,7 @@ var require_create4 = __commonJS({
         (0, import_iterate.throughInitialDefine)(element);
         (0, import_iterate.throughInitialExec)(element);
         for (const k in element) {
-          if ((0, import_utils24.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils24.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
+          if ((0, import_utils31.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils31.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];
@@ -5072,7 +5193,7 @@ var require_create4 = __commonJS({
           if (!ref.__skipCreate && import_mixins.registry[k] && !optionsHasDefine) {
             continue;
           } else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
-            create2((0, import_utils24.exec)(element[k], element), element, k, options);
+            create2((0, import_utils31.exec)(element[k], element), element, k, options);
           }
         }
       }
@@ -5470,17 +5591,18 @@ var require_cjs9 = __commonJS({
         __export22(types_exports, {
           TYPES: () => TYPES,
           is: () => is,
-          isArray: () => isArray7,
+          isArray: () => isArray72,
           isBoolean: () => isBoolean,
+          isDate: () => isDate,
           isDefined: () => isDefined2,
           isFunction: () => isFunction22,
-          isNot: () => isNot2,
+          isNot: () => isNot3,
           isNull: () => isNull,
           isNumber: () => isNumber2,
           isObject: () => isObject82,
-          isObjectLike: () => isObjectLike3,
-          isString: () => isString10,
-          isUndefined: () => isUndefined4
+          isObjectLike: () => isObjectLike32,
+          isString: () => isString102,
+          isUndefined: () => isUndefined5
         });
         module22.exports = __toCommonJS22(types_exports);
         var import_node = require_node3();
@@ -5489,32 +5611,34 @@ var require_cjs9 = __commonJS({
             return false;
           return typeof arg === "object" && arg.constructor === Object;
         };
-        var isString10 = (arg) => typeof arg === "string";
+        var isString102 = (arg) => typeof arg === "string";
         var isNumber2 = (arg) => typeof arg === "number";
         var isFunction22 = (arg) => typeof arg === "function";
         var isBoolean = (arg) => arg === true || arg === false;
         var isNull = (arg) => arg === null;
-        var isArray7 = (arg) => Array.isArray(arg);
-        var isObjectLike3 = (arg) => {
+        var isArray72 = (arg) => Array.isArray(arg);
+        var isDate = (d) => d instanceof Date;
+        var isObjectLike32 = (arg) => {
           if (arg === null)
             return false;
           return typeof arg === "object";
         };
         var isDefined2 = (arg) => {
-          return isObject82(arg) || isObjectLike3(arg) || isString10(arg) || isNumber2(arg) || isFunction22(arg) || isArray7(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
+          return isObject82(arg) || isObjectLike32(arg) || isString102(arg) || isNumber2(arg) || isFunction22(arg) || isArray72(arg) || isObjectLike32(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
         };
-        var isUndefined4 = (arg) => {
+        var isUndefined5 = (arg) => {
           return arg === void 0;
         };
         var TYPES = {
           boolean: isBoolean,
-          array: isArray7,
+          array: isArray72,
           object: isObject82,
-          string: isString10,
+          string: isString102,
+          date: isDate,
           number: isNumber2,
           null: isNull,
           function: isFunction22,
-          objectLike: isObjectLike3,
+          objectLike: isObjectLike32,
           node: import_node.isNode,
           htmlElement: import_node.isHtmlElement,
           defined: isDefined2
@@ -5524,7 +5648,7 @@ var require_cjs9 = __commonJS({
             return args.map((val) => TYPES[val](arg)).filter((v) => v).length > 0;
           };
         };
-        var isNot2 = (arg) => {
+        var isNot3 = (arg) => {
           return (...args) => {
             return args.map((val) => TYPES[val](arg)).filter((v) => v).length === 0;
           };
@@ -5561,6 +5685,8 @@ var require_cjs9 = __commonJS({
           mergeAndCloneIfArray: () => mergeAndCloneIfArray,
           mergeArray: () => mergeArray,
           removeFromArray: () => removeFromArray,
+          removeValueFromArray: () => removeValueFromArray,
+          removeValueFromArrayAll: () => removeValueFromArrayAll,
           swapItemsInArray: () => swapItemsInArray
         });
         module22.exports = __toCommonJS22(array_exports);
@@ -5626,6 +5752,18 @@ var require_cjs9 = __commonJS({
           }, nestedObject);
           return nestedObject;
         };
+        var removeValueFromArray = (arr, value2) => {
+          const index = arr.indexOf(value2);
+          if (index > -1) {
+            const newArray = [...arr];
+            newArray.splice(index, 1);
+            return newArray;
+          }
+          return arr.slice();
+        };
+        var removeValueFromArrayAll = (arr, value2) => {
+          return arr.filter((item) => item !== value2);
+        };
       }
     });
     var require_string2 = __commonJS2({
@@ -5713,15 +5851,20 @@ var require_cjs9 = __commonJS({
           deepCloneExclude: () => deepCloneExclude,
           deepContains: () => deepContains,
           deepDestringify: () => deepDestringify,
+          deepDiff: () => deepDiff3,
           deepMerge: () => deepMerge32,
           deepStringify: () => deepStringify,
           detachFunctionsFromObject: () => detachFunctionsFromObject,
           diff: () => diff,
           diffArrays: () => diffArrays,
           diffObjects: () => diffObjects,
-          exec: () => exec4,
+          exec: () => exec5,
           flattenRecursive: () => flattenRecursive,
+          hasOwnProperty: () => hasOwnProperty,
+          isEmpty: () => isEmpty,
+          isEmptyObject: () => isEmptyObject,
           isEqualDeep: () => isEqualDeep2,
+          makeObjectWithoutPrototype: () => makeObjectWithoutPrototype,
           map: () => map2,
           merge: () => merge5,
           mergeArrayExclude: () => mergeArrayExclude,
@@ -5729,7 +5872,7 @@ var require_cjs9 = __commonJS({
           objectToString: () => objectToString,
           overwrite: () => overwrite,
           overwriteDeep: () => overwriteDeep2,
-          overwriteShallow: () => overwriteShallow2,
+          overwriteShallow: () => overwriteShallow3,
           removeFromObject: () => removeFromObject,
           stringToObject: () => stringToObject
         });
@@ -5738,7 +5881,7 @@ var require_cjs9 = __commonJS({
         var import_types = require_types2();
         var import_array = require_array2();
         var import_string = require_string2();
-        var exec4 = (param, element, state, context) => {
+        var exec5 = (param, element, state, context) => {
           if ((0, import_types.isFunction)(param)) {
             return param(
               element,
@@ -5750,13 +5893,13 @@ var require_cjs9 = __commonJS({
         };
         var map2 = (obj, extention, element) => {
           for (const e in extention) {
-            obj[e] = exec4(extention[e], element);
+            obj[e] = exec5(extention[e], element);
           }
         };
         var merge5 = (element, obj, excludeFrom = []) => {
           for (const e in obj) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, e);
-            if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
+            if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
             const objProp = obj[e];
@@ -5768,8 +5911,8 @@ var require_cjs9 = __commonJS({
         };
         var deepMerge32 = (element, extend, excludeFrom = []) => {
           for (const e in extend) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(extend, e);
-            if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(extend, e);
+            if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
               continue;
             const elementProp = element[e];
             const extendProp = extend[e];
@@ -5784,8 +5927,8 @@ var require_cjs9 = __commonJS({
         var clone = (obj, excludeFrom = []) => {
           const o = {};
           for (const prop in obj) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
-            if (!hasOwnProperty || excludeFrom.includes(prop) || prop.startsWith("__"))
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
+            if (!hasOwnProperty2 || excludeFrom.includes(prop) || prop.startsWith("__"))
               continue;
             o[prop] = obj[prop];
           }
@@ -5797,8 +5940,8 @@ var require_cjs9 = __commonJS({
           }
           const o = {};
           for (const k in obj) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, k);
-            if (!hasOwnProperty || excludeFrom.includes(k) || k.startsWith("__"))
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, k);
+            if (!hasOwnProperty2 || excludeFrom.includes(k) || k.startsWith("__"))
               continue;
             let v = obj[k];
             if (k === "extend" && (0, import_types.isArray)(v)) {
@@ -5816,7 +5959,7 @@ var require_cjs9 = __commonJS({
         var mergeArrayExclude = (arr, excl = []) => {
           return arr.reduce((acc, curr) => deepMerge32(acc, deepCloneExclude(curr, excl)), {});
         };
-        var deepClone22 = (obj, excludeFrom = []) => {
+        var deepClone22 = (obj, excludeFrom = [], cleanUndefined = false) => {
           const o = (0, import_types.isArray)(obj) ? [] : {};
           for (const prop in obj) {
             if (prop === "__proto__")
@@ -5824,11 +5967,13 @@ var require_cjs9 = __commonJS({
             if (excludeFrom.includes(prop) || prop.startsWith("__"))
               continue;
             let objProp = obj[prop];
+            if (cleanUndefined && (0, import_types.isUndefined)(objProp))
+              continue;
             if (prop === "extend" && (0, import_types.isArray)(objProp)) {
               objProp = (0, import_array.mergeArray)(objProp);
             }
             if ((0, import_types.isObjectLike)(objProp)) {
-              o[prop] = deepClone22(objProp, excludeFrom);
+              o[prop] = deepClone22(objProp, excludeFrom, cleanUndefined);
             } else
               o[prop] = objProp;
           }
@@ -5882,7 +6027,7 @@ var require_cjs9 = __commonJS({
                 }
               }
               str += `${spaces}  ]`;
-            } else if ((0, import_types.isObject)(value2)) {
+            } else if ((0, import_types.isObjectLike)(value2)) {
               str += objectToString(value2, indent + 1);
             } else if ((0, import_types.isString)(value2)) {
               str += (0, import_string.stringIncludesAny)(value2, ["\n", "'"]) ? `\`${value2}\`` : `'${value2}'`;
@@ -5922,8 +6067,8 @@ var require_cjs9 = __commonJS({
         };
         var deepDestringify = (obj, destringified = {}) => {
           for (const prop in obj) {
-            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj, prop);
-            if (!hasOwnProperty)
+            const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, prop);
+            if (!hasOwnProperty2)
               continue;
             const objProp = obj[prop];
             if ((0, import_types.isString)(objProp)) {
@@ -6016,6 +6161,39 @@ var require_cjs9 = __commonJS({
           }
           return cache2;
         };
+        var hasOwnProperty = (o, ...args) => Object.prototype.hasOwnProperty.call(o, ...args);
+        var isEmpty = (o) => Object.keys(o).length === 0;
+        var isEmptyObject = (o) => (0, import_types.isObject)(o) && isEmpty(o);
+        var makeObjectWithoutPrototype = () => /* @__PURE__ */ Object.create(null);
+        var deepDiff3 = (lhs, rhs) => {
+          if (lhs === rhs)
+            return {};
+          if (!(0, import_types.isObject)(lhs) || !(0, import_types.isObject)(rhs))
+            return rhs;
+          const deletedValues = Object.keys(lhs).reduce((acc, key) => {
+            if (!hasOwnProperty(rhs, key)) {
+              acc[key] = void 0;
+            }
+            return acc;
+          }, makeObjectWithoutPrototype());
+          if ((0, import_types.isDate)(lhs) || (0, import_types.isDate)(rhs)) {
+            if (lhs.valueOf() === rhs.valueOf())
+              return {};
+            return rhs;
+          }
+          return Object.keys(rhs).reduce((acc, key) => {
+            if (!hasOwnProperty(lhs, key)) {
+              acc[key] = rhs[key];
+              return acc;
+            }
+            const difference = diff(lhs[key], rhs[key]);
+            if (isEmptyObject(difference) && !(0, import_types.isDate)(difference) && (isEmptyObject(lhs[key]) || !isEmptyObject(rhs[key]))) {
+              return acc;
+            }
+            acc[key] = difference;
+            return acc;
+          }, deletedValues);
+        };
         var overwrite = (element, params, excludeFrom = []) => {
           const { ref } = element;
           const changes = {};
@@ -6031,7 +6209,7 @@ var require_cjs9 = __commonJS({
           }
           return changes;
         };
-        var overwriteShallow2 = (obj, params, excludeFrom = []) => {
+        var overwriteShallow3 = (obj, params, excludeFrom = []) => {
           for (const e in params) {
             if (excludeFrom.includes(e) || e.startsWith("__"))
               continue;
@@ -6111,8 +6289,8 @@ var require_cjs9 = __commonJS({
               }
             } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
               for (const key in obj1) {
-                const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj2, key);
-                if (!hasOwnProperty || !deepContains(obj1[key], obj2[key])) {
+                const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj2, key);
+                if (!hasOwnProperty2 || !deepContains(obj1[key], obj2[key])) {
                   return false;
                 }
               }
@@ -6504,7 +6682,7 @@ var require_cjs9 = __commonJS({
       BREAKPOINTS: () => BREAKPOINTS,
       CASES: () => CASES,
       COLOR: () => COLOR3,
-      CONFIG: () => CONFIG3,
+      CONFIG: () => CONFIG4,
       CSS_VARS: () => CSS_VARS,
       DEVICES: () => DEVICES,
       DOCUMENT: () => DOCUMENT,
@@ -6546,28 +6724,28 @@ var require_cjs9 = __commonJS({
       generateSequence: () => generateSequence,
       generateSprite: () => generateSprite,
       generateSubSequence: () => generateSubSequence,
-      getActiveConfig: () => getActiveConfig3,
-      getColor: () => getColor2,
+      getActiveConfig: () => getActiveConfig4,
+      getColor: () => getColor3,
       getColorShade: () => getColorShade,
       getDefaultOrFirstKey: () => getDefaultOrFirstKey,
       getFontFace: () => getFontFace,
       getFontFaceEach: () => getFontFaceEach,
       getFontFaceEachString: () => getFontFaceEachString,
       getFontFaceString: () => getFontFaceString2,
-      getFontFamily: () => getFontFamily2,
+      getFontFamily: () => getFontFamily3,
       getFontFormat: () => getFontFormat,
-      getFontSizeByKey: () => getFontSizeByKey2,
-      getMediaColor: () => getMediaColor3,
-      getMediaTheme: () => getMediaTheme2,
+      getFontSizeByKey: () => getFontSizeByKey3,
+      getMediaColor: () => getMediaColor5,
+      getMediaTheme: () => getMediaTheme3,
       getRgbTone: () => getRgbTone,
       getSequenceValue: () => getSequenceValue,
       getSequenceValuePropertyPair: () => getSequenceValuePropertyPair,
       getShadow: () => getShadow,
-      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
-      getSpacingByKey: () => getSpacingByKey3,
+      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio7,
+      getSpacingByKey: () => getSpacingByKey5,
       getTheme: () => getTheme,
-      getTimingByKey: () => getTimingByKey2,
-      getTimingFunction: () => getTimingFunction3,
+      getTimingByKey: () => getTimingByKey3,
+      getTimingFunction: () => getTimingFunction5,
       hexToRgb: () => hexToRgb,
       hexToRgbArray: () => hexToRgbArray,
       hexToRgba: () => hexToRgba,
@@ -6601,15 +6779,15 @@ var require_cjs9 = __commonJS({
       setTheme: () => setTheme,
       setValue: () => setValue,
       setVariables: () => setVariables,
-      splitTransition: () => splitTransition2,
-      transformBackgroundImage: () => transformBackgroundImage2,
-      transformBorder: () => transformBorder2,
-      transformBoxShadow: () => transformBoxShadow2,
-      transformDuration: () => transformDuration2,
-      transformShadow: () => transformShadow2,
-      transformTextStroke: () => transformTextStroke2,
+      splitTransition: () => splitTransition3,
+      transformBackgroundImage: () => transformBackgroundImage3,
+      transformBorder: () => transformBorder3,
+      transformBoxShadow: () => transformBoxShadow3,
+      transformDuration: () => transformDuration3,
+      transformShadow: () => transformShadow3,
+      transformTextStroke: () => transformTextStroke3,
       transformTransition: () => transformTransition,
-      transfromGap: () => transfromGap2
+      transfromGap: () => transfromGap3
     });
     module2.exports = __toCommonJS2(src_exports2);
     var utils_exports = {};
@@ -6652,7 +6830,7 @@ var require_cjs9 = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals2 = __toESM2(require_cjs13(), 1);
-    var import_utils24 = __toESM2(require_cjs22(), 1);
+    var import_utils31 = __toESM2(require_cjs22(), 1);
     var ENV2 = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -6780,9 +6958,9 @@ var require_cjs9 = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils24.isString)(rgb))
+      if ((0, import_utils31.isString)(rgb))
         rgb = rgb.split(", ").map((v) => parseFloat(v));
-      if ((0, import_utils24.isNumber)(tone))
+      if ((0, import_utils31.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -6847,7 +7025,7 @@ var require_cjs9 = __commonJS({
     };
     var import_utils52 = __toESM2(require_cjs22(), 1);
     var import_utils32 = __toESM2(require_cjs22());
-    var import_utils25 = __toESM2(require_cjs22());
+    var import_utils210 = __toESM2(require_cjs22());
     var toCamelCase2 = (str) => {
       return str.replace(/(?:^\w|[A-Z]|\b\w)/g, function(word, index) {
         return index === 0 ? word.toLowerCase() : word.toUpperCase();
@@ -7030,17 +7208,17 @@ var require_cjs9 = __commonJS({
     var TEMPLATES = {};
     var RESET = {};
     var CSS_VARS = {};
-    var CONFIG3 = {
+    var CONFIG4 = {
       verbose: false,
       useVariable: true,
       useReset: true,
       CSS_VARS,
       ...defaultConfig_exports
     };
-    var cachedConfig = (0, import_utils42.deepClone)(CONFIG3);
+    var cachedConfig = (0, import_utils42.deepClone)(CONFIG4);
     var FACTORY = {
       active: "0",
-      0: CONFIG3
+      0: CONFIG4
     };
     var activateConfig = (def) => {
       if ((0, import_utils42.isDefined)(def)) {
@@ -7048,7 +7226,7 @@ var require_cjs9 = __commonJS({
       }
       return FACTORY[def || FACTORY.active];
     };
-    var getActiveConfig3 = (def) => {
+    var getActiveConfig4 = (def) => {
       return FACTORY[def || FACTORY.active];
     };
     var setActiveConfig = (newConfig) => {
@@ -7157,7 +7335,7 @@ var require_cjs9 = __commonJS({
       return sequenceProps;
     };
     var getSequenceValue = (value2 = "A", sequenceProps) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { UNIT: UNIT2 } = CONFIG22;
       const {
         sequence,
@@ -7229,7 +7407,7 @@ var require_cjs9 = __commonJS({
     };
     var import_utils72 = __toESM2(require_cjs22(), 1);
     var setVariables = (result, key) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       if ((0, import_utils72.isObjectLike)(result.value)) {
       } else {
@@ -7237,7 +7415,7 @@ var require_cjs9 = __commonJS({
       }
     };
     var applySequenceVars = (props4, mediaName, options = {}) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { UNIT: UNIT2, MEDIA: MEDIA2, TIMING: TIMING2, CSS_VARS: CSS_VARS2 } = CONFIG22;
       const unit = props4.unit || UNIT2.default;
       const { sequence, scales } = props4;
@@ -7267,7 +7445,7 @@ var require_cjs9 = __commonJS({
     };
     var import_utils82 = __toESM2(require_cjs22(), 1);
     var generateSprite = (icons) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       let sprite = "";
       for (const key in icons) {
         if (CONFIG22.__svg_cache[key])
@@ -7332,17 +7510,17 @@ var require_cjs9 = __commonJS({
       applySpacingSequence: () => applySpacingSequence,
       applyTimingSequence: () => applyTimingSequence,
       applyTypographySequence: () => applyTypographySequence,
-      getColor: () => getColor2,
-      getFontFamily: () => getFontFamily2,
-      getFontSizeByKey: () => getFontSizeByKey2,
-      getMediaColor: () => getMediaColor3,
-      getMediaTheme: () => getMediaTheme2,
+      getColor: () => getColor3,
+      getFontFamily: () => getFontFamily3,
+      getFontSizeByKey: () => getFontSizeByKey3,
+      getMediaColor: () => getMediaColor5,
+      getMediaTheme: () => getMediaTheme3,
       getShadow: () => getShadow,
-      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio4,
-      getSpacingByKey: () => getSpacingByKey3,
+      getSpacingBasedOnRatio: () => getSpacingBasedOnRatio7,
+      getSpacingByKey: () => getSpacingByKey5,
       getTheme: () => getTheme,
-      getTimingByKey: () => getTimingByKey2,
-      getTimingFunction: () => getTimingFunction3,
+      getTimingByKey: () => getTimingByKey3,
+      getTimingFunction: () => getTimingFunction5,
       runThroughMedia: () => runThroughMedia,
       setColor: () => setColor,
       setFont: () => setFont,
@@ -7355,8 +7533,8 @@ var require_cjs9 = __commonJS({
       setTheme: () => setTheme
     });
     var import_utils92 = __toESM2(require_cjs22(), 1);
-    var getColor2 = (value2, key, config) => {
-      const CONFIG22 = config || getActiveConfig3();
+    var getColor3 = (value2, key, config) => {
+      const CONFIG22 = config || getActiveConfig4();
       if (!(0, import_utils92.isString)(value2)) {
         if (CONFIG22.verbose)
           console.warn(value2, "- type for color is not valid");
@@ -7394,8 +7572,8 @@ var require_cjs9 = __commonJS({
         return `rgba(${rgb}, ${alpha})`;
       return CONFIG22.useVariable ? `var(${val.var})` : `rgb(${rgb})`;
     };
-    var getMediaColor3 = (value2, globalTheme, config) => {
-      const CONFIG22 = config || getActiveConfig3();
+    var getMediaColor5 = (value2, globalTheme, config) => {
+      const CONFIG22 = config || getActiveConfig4();
       if (!globalTheme)
         globalTheme = CONFIG22.globalTheme;
       if (!(0, import_utils92.isString)(value2)) {
@@ -7410,16 +7588,16 @@ var require_cjs9 = __commonJS({
       const val = COLOR22[name] || GRADIENT22[name];
       const isObj = (0, import_utils92.isObject)(val);
       if (isObj && val.value)
-        return getColor2(value2, `@${globalTheme}`, config);
+        return getColor3(value2, `@${globalTheme}`, config);
       else if (isObj) {
         if (globalTheme)
-          return getColor2(value2, `@${globalTheme}`, config);
+          return getColor3(value2, `@${globalTheme}`, config);
         else {
           const obj = {};
           for (const mediaName in val) {
             const query = CONFIG22.MEDIA[mediaName.slice(1)];
             const media = `@media screen and ${query}`;
-            obj[media] = getColor2(value2, mediaName, config);
+            obj[media] = getColor3(value2, mediaName, config);
           }
           return obj;
         }
@@ -7430,9 +7608,9 @@ var require_cjs9 = __commonJS({
       }
     };
     var setColor = (val, key, suffix) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if ((0, import_utils92.isString)(val) && val.slice(0, 2) === "--")
-        val = getColor2(val.slice(2));
+        val = getColor3(val.slice(2));
       if ((0, import_utils92.isArray)(val)) {
         return {
           "@light": setColor(val[0], key, "light"),
@@ -7466,9 +7644,9 @@ var require_cjs9 = __commonJS({
       };
     };
     var setGradient = (val, key, suffix) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if ((0, import_utils92.isString)(val) && val.slice(0, 2) === "--")
-        val = getColor2(val.slice(2));
+        val = getColor3(val.slice(2));
       if ((0, import_utils92.isArray)(val)) {
         return {
           "@light": setGradient(val[0], key, "light"),
@@ -7498,7 +7676,7 @@ var require_cjs9 = __commonJS({
       keys.map((key) => {
         const conditions = ["color", "Color", "background", "border"];
         const isColor = conditions.some((k) => key.includes(k));
-        return value2[key] = isColor ? getColor2(theme[key]) : theme[key];
+        return value2[key] = isColor ? getColor3(theme[key]) : theme[key];
       });
       return value2;
     };
@@ -7509,9 +7687,9 @@ var require_cjs9 = __commonJS({
       return theme.value;
     };
     var getTheme = (value2, modifier) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if (CONFIG22.useVariable)
-        return getMediaTheme2(value2, modifier);
+        return getMediaTheme3(value2, modifier);
       const { THEME: THEME22 } = CONFIG22;
       if ((0, import_utils112.isString)(value2)) {
         const [theme, subtheme] = value2.split(" ");
@@ -7588,7 +7766,7 @@ var require_cjs9 = __commonJS({
       return theme;
     };
     var setHelpers = (theme, value2) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { helpers } = theme;
       if (!helpers)
         return;
@@ -7604,7 +7782,7 @@ var require_cjs9 = __commonJS({
       return theme;
     };
     var setTheme = (val, key) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if (CONFIG22.useVariable)
         return setMediaTheme(val, key);
       const { state, media, helpers } = val;
@@ -7616,7 +7794,7 @@ var require_cjs9 = __commonJS({
       return { var: CSSvar, value: value2, state, media, helpers };
     };
     var setMediaTheme = (val, key, suffix, prefers) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { CSS_VARS: CSS_VARS2 } = CONFIG22;
       const theme = { value: val };
       if ((0, import_utils112.isObjectLike)(val)) {
@@ -7627,7 +7805,7 @@ var require_cjs9 = __commonJS({
             const hasPrefers = symb === "@" && param;
             theme[param] = setMediaTheme(value2, key, param, prefers || hasPrefers);
           } else {
-            const color = getColor2(value2, prefers);
+            const color = getColor3(value2, prefers);
             const metaSuffixes = [...new Set([prefers, suffix].filter((v) => v).map((v) => v.slice(1)))];
             const varmetaSuffixName = metaSuffixes.length ? "-" + metaSuffixes.join("-") : "";
             const CSSVar = `--theme-${key}${varmetaSuffixName}-${param}`;
@@ -7650,13 +7828,13 @@ var require_cjs9 = __commonJS({
       if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--") {
         const { THEME: THEME22 } = CONFIG22;
         const value2 = THEME22[val.slice(2)];
-        const getReferenced = getMediaTheme2(value2, prefers);
+        const getReferenced = getMediaTheme3(value2, prefers);
         return getReferenced;
       }
       return theme;
     };
     var recursiveTheme = (val) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const obj = {};
       for (const param in val) {
         const symb = param.slice(0, 1);
@@ -7687,10 +7865,10 @@ var require_cjs9 = __commonJS({
       else
         return val;
     };
-    var getMediaTheme2 = (val, mod) => {
-      const CONFIG22 = getActiveConfig3();
+    var getMediaTheme3 = (val, mod) => {
+      const CONFIG22 = getActiveConfig4();
       if ((0, import_utils112.isString)(val) && val.slice(0, 2) === "--")
-        val = getMediaTheme2(val.slice(2));
+        val = getMediaTheme3(val.slice(2));
       if (!val || !(0, import_utils112.isString)(val)) {
         if (CONFIG22.verbose)
           console.warn(val, "- theme is not string");
@@ -7710,13 +7888,13 @@ var require_cjs9 = __commonJS({
       const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
       return { var: CSSvar, value: val, fontFace };
     };
-    var getFontFamily2 = (key, factory) => {
-      const CONFIG22 = getActiveConfig3();
+    var getFontFamily3 = (key, factory) => {
+      const CONFIG22 = getActiveConfig4();
       const { FONT_FAMILY: FONT_FAMILY22 } = CONFIG22;
       return getDefaultOrFirstKey(factory || FONT_FAMILY22, key);
     };
     var setFontFamily = (val, key) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { FONT_FAMILY: FONT_FAMILY22, FONT_FAMILY_TYPES: FONT_FAMILY_TYPES2 } = CONFIG22;
       let { value: value2, type } = val;
       if (val.isDefault)
@@ -7729,7 +7907,7 @@ var require_cjs9 = __commonJS({
     };
     var import_utils152 = __toESM2(require_cjs22(), 1);
     var runThroughMedia = (props4) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { TYPOGRAPHY: TYPOGRAPHY22, MEDIA: MEDIA2 } = CONFIG22;
       for (const prop in props4) {
         const mediaProps = props4[prop];
@@ -7759,7 +7937,7 @@ var require_cjs9 = __commonJS({
       }
     };
     var applyHeadings = (props4) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if (props4.h1Matches) {
         const unit = props4.unit;
         const HEADINGS = findHeadings(props4);
@@ -7778,15 +7956,15 @@ var require_cjs9 = __commonJS({
       }
     };
     var applyTypographySequence = () => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { TYPOGRAPHY: TYPOGRAPHY22 } = CONFIG22;
       generateSequence(TYPOGRAPHY22);
       applyHeadings(TYPOGRAPHY22);
       applySequenceVars(TYPOGRAPHY22);
       runThroughMedia(TYPOGRAPHY22);
     };
-    var getFontSizeByKey2 = (value2) => {
-      const CONFIG22 = getActiveConfig3();
+    var getFontSizeByKey3 = (value2) => {
+      const CONFIG22 = getActiveConfig4();
       const { TYPOGRAPHY: TYPOGRAPHY22 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value2,
@@ -7820,21 +7998,21 @@ var require_cjs9 = __commonJS({
       }
     };
     var applySpacingSequence = () => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { SPACING: SPACING22 } = CONFIG22;
       generateSequence(SPACING22);
       applySequenceVars(SPACING22);
       runThroughMedia2(SPACING22);
     };
     var getSequence = (sequenceProps) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { SPACING: SPACING22 } = CONFIG22;
       if (!sequenceProps)
         return SPACING22;
       const hasGenerated = Object.keys(sequenceProps.sequence).length > 0;
       return hasGenerated ? sequenceProps : generateSequence(sequenceProps);
     };
-    var getSpacingByKey3 = (value2, propertyName = "padding", sequenceProps) => {
+    var getSpacingByKey5 = (value2, propertyName = "padding", sequenceProps) => {
       const sequence = getSequence(sequenceProps);
       const stack = arrayzeValue2(value2);
       if (!stack)
@@ -7866,8 +8044,8 @@ var require_cjs9 = __commonJS({
         sequence
       );
     };
-    var getSpacingBasedOnRatio4 = (props4, propertyName, val) => {
-      const CONFIG22 = getActiveConfig3();
+    var getSpacingBasedOnRatio7 = (props4, propertyName, val) => {
+      const CONFIG22 = getActiveConfig4();
       const { SPACING: SPACING22 } = CONFIG22;
       const { spacingRatio, unit } = props4;
       const value2 = val || props4[propertyName];
@@ -7892,13 +8070,13 @@ var require_cjs9 = __commonJS({
           });
         }
         applySequenceVars(sequenceProps, null, { useDefault: false });
-        return getSpacingByKey3(value2, propertyName, sequenceProps);
+        return getSpacingByKey5(value2, propertyName, sequenceProps);
       }
-      return getSpacingByKey3(value2, propertyName);
+      return getSpacingByKey5(value2, propertyName);
     };
     var import_utils202 = __toESM2(require_cjs22(), 1);
     var setShadow = (value2, key, suffix, prefers) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if ((0, import_utils202.isArray)(value2)) {
         return {
           "@light": setShadow(value2[0], key, "light"),
@@ -7921,14 +8099,14 @@ var require_cjs9 = __commonJS({
           v = v.trim();
           if (v.startsWith("--"))
             return `var(${v})`;
-          if (getColor2(v).length > 2)
-            return getColor2(v);
+          if (getColor3(v).length > 2)
+            return getColor3(v);
           if (v.includes("px") || v.slice(-2) === "em")
             return v;
           const arr = v.split(" ");
           if (!arr.length)
             return v;
-          return arr.map((v2) => getSpacingByKey3(v2, "shadow").shadow).join(" ");
+          return arr.map((v2) => getSpacingByKey5(v2, "shadow").shadow).join(" ");
         }).join(" ");
       }
       const CSSVar = `--shadow-${key}` + (suffix ? `-${suffix}` : "");
@@ -7941,7 +8119,7 @@ var require_cjs9 = __commonJS({
       };
     };
     var getShadow = (value2, globalTheme) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if (!globalTheme)
         globalTheme = CONFIG22.globalTheme;
       if (!(0, import_utils202.isString)(value2)) {
@@ -7982,18 +8160,18 @@ var require_cjs9 = __commonJS({
       return value2;
     };
     var applyTimingSequence = () => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { TIMING: TIMING2 } = CONFIG22;
       generateSequence(TIMING2);
       applySequenceVars(TIMING2);
     };
-    var getTimingFunction3 = (value2) => {
-      const CONFIG22 = getActiveConfig3();
+    var getTimingFunction5 = (value2) => {
+      const CONFIG22 = getActiveConfig4();
       const { TIMING: TIMING2 } = CONFIG22;
       return TIMING2[value2] || TIMING2[toCamelCase2(value2)] || value2;
     };
-    var getTimingByKey2 = (value2, property = "timing") => {
-      const CONFIG22 = getActiveConfig3();
+    var getTimingByKey3 = (value2, property = "timing") => {
+      const CONFIG22 = getActiveConfig4();
       const { TIMING: TIMING2 } = CONFIG22;
       return getSequenceValuePropertyPair(
         value2,
@@ -8003,7 +8181,7 @@ var require_cjs9 = __commonJS({
     };
     var import_utils232 = __toESM2(require_cjs22(), 1);
     var applyDocument = () => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { DOCUMENT: DOCUMENT2, FONT_FAMILY: FONT_FAMILY22, THEME: THEME22, TYPOGRAPHY: TYPOGRAPHY22 } = CONFIG22;
       return (0, import_utils232.merge)(DOCUMENT2, {
         theme: THEME22.document,
@@ -8017,7 +8195,7 @@ var require_cjs9 = __commonJS({
       document: import_globals22.document
     };
     var setSVG = (val, key) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if (!val) {
         if (CONFIG22.verbose)
           console.warn("setSVG: val is not defined", key);
@@ -8029,21 +8207,21 @@ var require_cjs9 = __commonJS({
       return val;
     };
     var appendSVGSprite2 = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.SVG;
       for (const key in LIBRARY)
         lib[key] = CONFIG22.SVG[key];
       appendSVG(lib, options);
     };
     var setIcon = (val, key) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       if (CONFIG22.useIconSprite) {
         return setSVG(val, key);
       }
       return val;
     };
     var appendIconsSprite2 = (LIBRARY, options = DEF_OPTIONS) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const lib = Object.keys(LIBRARY).length ? {} : CONFIG22.ICONS;
       for (const key in LIBRARY)
         lib[key] = CONFIG22.ICONS[key];
@@ -8063,7 +8241,7 @@ var require_cjs9 = __commonJS({
       return svgElem;
     };
     var appendSVG = (lib, options = DEF_OPTIONS) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const doc = options.document || import_globals22.document;
       if (!doc || !doc.documentElement) {
         if (CONFIG22.verbose) {
@@ -8085,16 +8263,16 @@ var require_cjs9 = __commonJS({
         }
       }
     };
-    var import_utils26 = __toESM2(require_cjs22(), 1);
+    var import_utils262 = __toESM2(require_cjs22(), 1);
     var applyReset = (reset = {}) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const { RESET: RESET2, TYPOGRAPHY: TYPOGRAPHY22, DOCUMENT: DOCUMENT2 } = CONFIG22;
       if (RESET2) {
         if (RESET2[":root"]) {
           const configReset = RESET2;
           const configTemplates = TYPOGRAPHY22.templates;
           configReset.body = {
-            ...CONFIG22.useDocumentTheme ? getMediaTheme2("document", `@${CONFIG22.globalTheme}`) : {},
+            ...CONFIG22.useDocumentTheme ? getMediaTheme3("document", `@${CONFIG22.globalTheme}`) : {},
             ...configTemplates.body
           };
           configReset.h1 = configTemplates.h1;
@@ -8105,10 +8283,10 @@ var require_cjs9 = __commonJS({
           configReset.h6 = configTemplates.h6;
         }
         const { body, ...templates } = TYPOGRAPHY22.templates;
-        const globalTheme = CONFIG22.useDocumentTheme ? getMediaTheme2("document", `@${CONFIG22.globalTheme}`) : {};
+        const globalTheme = CONFIG22.useDocumentTheme ? getMediaTheme3("document", `@${CONFIG22.globalTheme}`) : {};
         if (RESET2.html)
-          (0, import_utils26.overwriteDeep)(RESET2.html, globalTheme);
-        return (0, import_utils26.deepMerge)((0, import_utils26.merge)(RESET2, reset), {
+          (0, import_utils262.overwriteDeep)(RESET2.html, globalTheme);
+        return (0, import_utils262.deepMerge)((0, import_utils262.merge)(RESET2, reset), {
           html: {
             position: "absolute",
             // overflow: 'hidden',
@@ -8145,7 +8323,7 @@ var require_cjs9 = __commonJS({
         });
       }
     };
-    var import_utils27 = __toESM2(require_cjs22(), 1);
+    var import_utils272 = __toESM2(require_cjs22(), 1);
     var isBorderStyle = (str) => [
       "none",
       "hidden",
@@ -8159,7 +8337,7 @@ var require_cjs9 = __commonJS({
       "outset",
       "initial"
     ].some((v) => str.includes(v));
-    var transformBorder2 = (border) => {
+    var transformBorder3 = (border) => {
       const arr = border.split(", ");
       return arr.map((v) => {
         v = v.trim();
@@ -8169,28 +8347,28 @@ var require_cjs9 = __commonJS({
           return v || "solid";
         else if (v.slice(-2) === "px" || v.slice(-2) === "em")
           return v;
-        else if (getColor2(v).length > 2)
-          return getColor2(v);
-        return getSpacingByKey3(v, "border").border;
+        else if (getColor3(v).length > 2)
+          return getColor3(v);
+        return getSpacingByKey5(v, "border").border;
       }).join(" ");
     };
-    var transformTextStroke2 = (stroke) => {
+    var transformTextStroke3 = (stroke) => {
       return stroke.split(", ").map((v) => {
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
         if (v.includes("px"))
           return v;
-        else if (getColor2(v))
-          return getColor2(v);
+        else if (getColor3(v))
+          return getColor3(v);
         return v;
       }).join(" ");
     };
-    var transformShadow2 = (sh, globalTheme) => {
+    var transformShadow3 = (sh, globalTheme) => {
       return sh.split(",").map((shadow) => getShadow(shadow, globalTheme)).join(",");
     };
-    var transformBoxShadow2 = (sh, globalTheme) => getShadow(sh, globalTheme);
-    var transformBackgroundImage2 = (backgroundImage, globalTheme) => {
-      const CONFIG22 = getActiveConfig3();
+    var transformBoxShadow3 = (sh, globalTheme) => getShadow(sh, globalTheme);
+    var transformBackgroundImage3 = (backgroundImage, globalTheme) => {
+      const CONFIG22 = getActiveConfig4();
       return backgroundImage.split(", ").map((v) => {
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
@@ -8198,14 +8376,14 @@ var require_cjs9 = __commonJS({
           return v;
         else if (CONFIG22.GRADIENT[backgroundImage]) {
           return {
-            backgroundImage: getMediaColor3(backgroundImage, globalTheme || CONFIG22.globalTheme)
+            backgroundImage: getMediaColor5(backgroundImage, globalTheme || CONFIG22.globalTheme)
           };
         } else if (v.includes("/") || v.includes("http"))
           return `url(${v})`;
         return v;
       }).join(" ");
     };
-    var transfromGap2 = (gap) => (0, import_utils27.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey3(v, "gap").gap).join(" ");
+    var transfromGap3 = (gap) => (0, import_utils272.isString)(gap) && gap.split(" ").map((v) => getSpacingByKey5(v, "gap").gap).join(" ");
     var transformTransition = (transition) => {
       const arr = transition.split(" ");
       if (!arr.length)
@@ -8214,28 +8392,28 @@ var require_cjs9 = __commonJS({
         if (v.slice(0, 2) === "--")
           return `var(${v})`;
         if (v.length < 3 || v.includes("ms")) {
-          const mapWithSequence = getTimingByKey2(v);
+          const mapWithSequence = getTimingByKey3(v);
           return mapWithSequence.timing || v;
         }
-        if (getTimingFunction3(v))
-          return getTimingFunction3(v);
+        if (getTimingFunction5(v))
+          return getTimingFunction5(v);
         return v;
       }).join(" ");
     };
-    var transformDuration2 = (duration, props4, propertyName) => {
-      if (!(0, import_utils27.isString)(duration))
+    var transformDuration3 = (duration, props4, propertyName) => {
+      if (!(0, import_utils272.isString)(duration))
         return;
-      return duration.split(",").map((v) => getTimingByKey2(v).timing || v).join(",");
+      return duration.split(",").map((v) => getTimingByKey3(v).timing || v).join(",");
     };
-    var splitTransition2 = (transition) => {
+    var splitTransition3 = (transition) => {
       const arr = transition.split(",");
       if (!arr.length)
         return;
       return arr.map(transformTransition).join(",");
     };
-    var import_utils28 = __toESM2(require_cjs22(), 1);
+    var import_utils282 = __toESM2(require_cjs22(), 1);
     var setCases = (val, key) => {
-      if ((0, import_utils28.isFunction)(val))
+      if ((0, import_utils282.isFunction)(val))
         return val();
       return val;
     };
@@ -8260,7 +8438,7 @@ var require_cjs9 = __commonJS({
       animation: setSameValue
     };
     var setValue = (FACTORY_NAME, value2, key) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const factoryName = FACTORY_NAME.toLowerCase();
       const FACTORY2 = CONFIG22[FACTORY_NAME];
       if (VALUE_TRANSFORMERS[factoryName]) {
@@ -8272,7 +8450,7 @@ var require_cjs9 = __commonJS({
         console.warn("Can not find", factoryName, "method in scratch");
     };
     var setEach = (factoryName, props4) => {
-      const CONFIG22 = getActiveConfig3();
+      const CONFIG22 = getActiveConfig4();
       const FACTORY_NAME = factoryName.toUpperCase();
       const keys = Object.keys(props4);
       keys.map((key) => setValue(FACTORY_NAME, props4[key], key));
@@ -8280,7 +8458,7 @@ var require_cjs9 = __commonJS({
     };
     var SET_OPTIONS2 = {};
     var set5 = (recivedConfig, options = SET_OPTIONS2) => {
-      let CONFIG22 = getActiveConfig3();
+      let CONFIG22 = getActiveConfig4();
       const {
         version,
         verbose,
@@ -8358,8 +8536,8 @@ var require_cjs10 = __commonJS({
       router: () => router2
     });
     module2.exports = __toCommonJS2(router_exports);
-    var import_utils24 = require_cjs();
-    var getActiveRoute = (level = 0, route = import_utils24.window.location.pathname) => {
+    var import_utils31 = require_cjs();
+    var getActiveRoute = (level = 0, route = import_utils31.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -8373,7 +8551,7 @@ var require_cjs10 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils24.document && import_utils24.document.documentElement,
+      scrollNode: import_utils31.document && import_utils31.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -8388,13 +8566,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_utils24.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== import_utils31.window.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content)
         return;
       if (options.pushState) {
-        import_utils24.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        import_utils31.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -8420,7 +8598,7 @@ var require_cjs10 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils24.document.getElementById(hash2);
+        const activeNode = import_utils31.document.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -8572,237 +8750,237 @@ var require_cjs12 = __commonJS({
   }
 });
 
-// ../../uikit/icons/default-icons/src/logo.svg
+// node_modules/@symbo.ls/default-icons/src/logo.svg
 var require_logo = __commonJS({
-  "../../uikit/icons/default-icons/src/logo.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/logo.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-down-circle.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-down-circle.svg
 var require_arrow_down_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-down-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-down-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-down-left.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-down-left.svg
 var require_arrow_down_left = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-down-left.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-down-left.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-down-right.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-down-right.svg
 var require_arrow_down_right = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-down-right.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-down-right.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-down.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-down.svg
 var require_arrow_down = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-down.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-down.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-left-circle.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-left-circle.svg
 var require_arrow_left_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-left-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-left-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-left.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-left.svg
 var require_arrow_left = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-left.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-left.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-right.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-right.svg
 var require_arrow_right = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-right.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-right.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-right-circle.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-right-circle.svg
 var require_arrow_right_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-right-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-right-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-up-circle.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-up-circle.svg
 var require_arrow_up_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-up-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-up-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-up-left.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-up-left.svg
 var require_arrow_up_left = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-up-left.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-up-left.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-up-right.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-up-right.svg
 var require_arrow_up_right = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-up-right.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-up-right.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-up.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-up.svg
 var require_arrow_up = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-up.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-up.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/check-circle.svg
+// node_modules/@symbo.ls/default-icons/src/check-circle.svg
 var require_check_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/check-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/check-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/check.svg
+// node_modules/@symbo.ls/default-icons/src/check.svg
 var require_check = __commonJS({
-  "../../uikit/icons/default-icons/src/check.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/check.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/chevron-down.svg
+// node_modules/@symbo.ls/default-icons/src/chevron-down.svg
 var require_chevron_down = __commonJS({
-  "../../uikit/icons/default-icons/src/chevron-down.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/chevron-down.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/chevron-left.svg
+// node_modules/@symbo.ls/default-icons/src/chevron-left.svg
 var require_chevron_left = __commonJS({
-  "../../uikit/icons/default-icons/src/chevron-left.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/chevron-left.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/chevron-right.svg
+// node_modules/@symbo.ls/default-icons/src/chevron-right.svg
 var require_chevron_right = __commonJS({
-  "../../uikit/icons/default-icons/src/chevron-right.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/chevron-right.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/chevron-up.svg
+// node_modules/@symbo.ls/default-icons/src/chevron-up.svg
 var require_chevron_up = __commonJS({
-  "../../uikit/icons/default-icons/src/chevron-up.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/chevron-up.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/copy.svg
+// node_modules/@symbo.ls/default-icons/src/copy.svg
 var require_copy = __commonJS({
-  "../../uikit/icons/default-icons/src/copy.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/copy.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/dribbble.svg
+// node_modules/@symbo.ls/default-icons/src/dribbble.svg
 var require_dribbble = __commonJS({
-  "../../uikit/icons/default-icons/src/dribbble.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/dribbble.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/eye-off.svg
+// node_modules/@symbo.ls/default-icons/src/eye-off.svg
 var require_eye_off = __commonJS({
-  "../../uikit/icons/default-icons/src/eye-off.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/eye-off.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/eye.svg
+// node_modules/@symbo.ls/default-icons/src/eye.svg
 var require_eye = __commonJS({
-  "../../uikit/icons/default-icons/src/eye.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/eye.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/file.svg
+// node_modules/@symbo.ls/default-icons/src/file.svg
 var require_file = __commonJS({
-  "../../uikit/icons/default-icons/src/file.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/file.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/info.svg
+// node_modules/@symbo.ls/default-icons/src/info.svg
 var require_info = __commonJS({
-  "../../uikit/icons/default-icons/src/info.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/info.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/minus.svg
+// node_modules/@symbo.ls/default-icons/src/minus.svg
 var require_minus = __commonJS({
-  "../../uikit/icons/default-icons/src/minus.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/minus.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/moon.svg
+// node_modules/@symbo.ls/default-icons/src/moon.svg
 var require_moon = __commonJS({
-  "../../uikit/icons/default-icons/src/moon.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/moon.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/more-horizontal.svg
+// node_modules/@symbo.ls/default-icons/src/more-horizontal.svg
 var require_more_horizontal = __commonJS({
-  "../../uikit/icons/default-icons/src/more-horizontal.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/more-horizontal.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/more-vertical.svg
+// node_modules/@symbo.ls/default-icons/src/more-vertical.svg
 var require_more_vertical = __commonJS({
-  "../../uikit/icons/default-icons/src/more-vertical.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/more-vertical.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/sun.svg
+// node_modules/@symbo.ls/default-icons/src/sun.svg
 var require_sun = __commonJS({
-  "../../uikit/icons/default-icons/src/sun.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/sun.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/send.svg
+// node_modules/@symbo.ls/default-icons/src/send.svg
 var require_send = __commonJS({
-  "../../uikit/icons/default-icons/src/send.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/send.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/smile.svg
+// node_modules/@symbo.ls/default-icons/src/smile.svg
 var require_smile = __commonJS({
-  "../../uikit/icons/default-icons/src/smile.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/smile.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/search.svg
+// node_modules/@symbo.ls/default-icons/src/search.svg
 var require_search = __commonJS({
-  "../../uikit/icons/default-icons/src/search.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/search.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/phone.svg
+// node_modules/@symbo.ls/default-icons/src/phone.svg
 var require_phone = __commonJS({
-  "../../uikit/icons/default-icons/src/phone.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/phone.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/twitch.svg
+// node_modules/@symbo.ls/default-icons/src/twitch.svg
 var require_twitch = __commonJS({
-  "../../uikit/icons/default-icons/src/twitch.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/twitch.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/upload.svg
+// node_modules/@symbo.ls/default-icons/src/upload.svg
 var require_upload = __commonJS({
-  "../../uikit/icons/default-icons/src/upload.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/upload.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/video.svg
+// node_modules/@symbo.ls/default-icons/src/video.svg
 var require_video = __commonJS({
-  "../../uikit/icons/default-icons/src/video.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/video.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/x.svg
+// node_modules/@symbo.ls/default-icons/src/x.svg
 var require_x = __commonJS({
-  "../../uikit/icons/default-icons/src/x.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/x.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/plus.svg
+// node_modules/@symbo.ls/default-icons/src/plus.svg
 var require_plus = __commonJS({
-  "../../uikit/icons/default-icons/src/plus.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/plus.svg"() {
   }
 });
 
@@ -8815,7 +8993,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 var import_domql = __toESM(require_cjs8(), 1);
-var import_utils23 = __toESM(require_cjs(), 1);
+var import_utils30 = __toESM(require_cjs(), 1);
 
 // src/utilImports.js
 var utilImports_exports = {};
@@ -10272,7 +10450,7 @@ var SET_OPTIONS = {
   useSvgSprite: true
 };
 var init = (config, options = SET_OPTIONS) => {
-  const emotion2 = options.emotion || emotion;
+  const emotion4 = options.emotion || emotion;
   const resultConfig = mergeWithLocalFile(config || {});
   const conf = (0, import_scratch.set)({
     verbose: options.verbose,
@@ -10293,11 +10471,11 @@ var init = (config, options = SET_OPTIONS) => {
   const useIconSprite = conf.useIconSprite;
   const hasIcons = config.icons || config.ICONS;
   if (useFontImport)
-    emotion2.injectGlobal(FontFace);
+    emotion4.injectGlobal(FontFace);
   if (useVariable)
-    emotion2.injectGlobal({ ":root": conf.CSS_VARS });
+    emotion4.injectGlobal({ ":root": conf.CSS_VARS });
   if (useReset)
-    emotion2.injectGlobal(conf.RESET);
+    emotion4.injectGlobal(conf.RESET);
   if (hasSvgs)
     (0, import_scratch.appendSVGSprite)(hasSvgs, { document: options.document });
   else if (useSvgSprite)
@@ -10312,14 +10490,14 @@ var UPDATE_OPTIONS = {
   emotion
 };
 var updateReset = (config, RC_FILE, options = UPDATE_OPTIONS) => {
-  const emotion2 = options.emotion || emotion;
+  const emotion4 = options.emotion || emotion;
   const resultConfig = mergeWithLocalFile(config || {}, RC_FILE);
   const conf = (0, import_scratch.set)({
     verbose: false,
     ...resultConfig
   });
-  emotion2.injectGlobal({ ":root": conf.CSS_VARS });
-  emotion2.injectGlobal(conf.RESET);
+  emotion4.injectGlobal({ ":root": conf.CSS_VARS });
+  emotion4.injectGlobal(conf.RESET);
 };
 
 // src/utilImports.js
@@ -10821,8 +10999,8 @@ var getComputedBackgroundColor = ({ props: props4 }) => {
   return (0, import_scratch6.getColor)(props4.shapeDirectionColor) || (0, import_scratch6.getColor)(props4.borderColor) || (0, import_scratch6.getColor)(props4.backgroundColor) || (0, import_scratch6.getColor)(props4.background);
 };
 var inheritTransition = ({ props: props4, deps }) => {
-  const exec4 = Timing.class.transition({ props: props4, deps });
-  return exec4 && exec4.transition;
+  const exec5 = Timing.class.transition({ props: props4, deps });
+  return exec5 && exec5.transition;
 };
 var SHAPES = {
   rectangle: {},
@@ -11022,8 +11200,8 @@ var Theme = {
       const globalTheme = deps.getSystemTheme(element);
       if (!props4.theme)
         return;
-      const getMediaTheme2 = deps.getMediaTheme(props4.theme, `@${props4.themeModifier || globalTheme}`);
-      return getMediaTheme2;
+      const getMediaTheme3 = deps.getMediaTheme(props4.theme, `@${props4.themeModifier || globalTheme}`);
+      return getMediaTheme3;
     },
     color: (element) => {
       const { props: props4, deps } = element;
@@ -11839,7 +12017,7 @@ var Icon = {
     const { toCamelCase: toCamelCase2 } = context && context.utils;
     const iconName = props4.name || props4.icon || key;
     const camelCase = toCamelCase2(deps.isString(iconName) ? iconName : key);
-    const isArray6 = camelCase.split(/([a-z])([A-Z])/g);
+    const isArray8 = camelCase.split(/([a-z])([A-Z])/g);
     let activeIconName;
     if (props4.active) {
       activeIconName = props4[".active"].name || props4[".active"].icon;
@@ -11852,10 +12030,10 @@ var Icon = {
       validIconName = activeIconName;
     if (ICONS[camelCase])
       validIconName = camelCase;
-    else if (ICONS[isArray6[0] + isArray6[1]])
-      validIconName = isArray6[0] + isArray6[1];
-    else if (ICONS[isArray6[0]])
-      validIconName = isArray6[0];
+    else if (ICONS[isArray8[0] + isArray8[1]])
+      validIconName = isArray8[0] + isArray8[1];
+    else if (ICONS[isArray8[0]])
+      validIconName = isArray8[0];
     else {
       if (verbose)
         console.warn("Can't find icon:", iconName, validIconName);
@@ -12159,8 +12337,8 @@ var Link = {
   attr: {
     href: (el) => {
       const { context: ctx } = el;
-      const { exec: exec4 } = ctx.utils;
-      return exec4(el.props.href, el) || exec4(el.props, el).href;
+      const { exec: exec5 } = ctx.utils;
+      return exec5(el.props.href, el) || exec5(el.props, el).href;
     },
     target: ({ props: props4 }) => props4.target,
     "aria-label": ({ props: props4 }) => props4.aria ? props4.aria.label : props4.text,
@@ -12263,8 +12441,8 @@ var Input = {
     autocomplete: ({ props: props4 }) => props4.autocomplete,
     placeholder: ({ props: props4 }) => props4.placeholder,
     value: ({ props: props4, state, deps }) => {
-      const { isString: isString9, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
-      if (isString9(props4.value) && props4.value.includes("{{")) {
+      const { isString: isString13, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
+      if (isString13(props4.value) && props4.value.includes("{{")) {
         return replaceLiteralsWithObjectFields2(props4.value, state);
       }
       return props4.value;
@@ -13900,6 +14078,94 @@ var Modal = {
   Footer: { extend: Flex }
 };
 
+// ../../uikit/domql/Modal/node_modules/@symbo.ls/icon/index.js
+var import_utils16 = __toESM(require_cjs());
+var IconText2 = {
+  extend: Flex,
+  props: {
+    align: "center center",
+    lineHeight: 1
+  },
+  Icon: {
+    props: ({ parent, props: props4 }) => ({ icon: parent.props.icon }),
+    if: ({ parent, props: props4 }) => {
+      const doesExist = parent.props.icon || parent.props.Icon || props4.name || props4.icon;
+      return doesExist;
+    }
+  },
+  text: ({ props: props4 }) => props4.text,
+  ".reversed": {
+    props: { flow: "row-reverse" }
+  },
+  ".vertical": {
+    props: { flow: "column" }
+  }
+};
+
+// ../../uikit/domql/Modal/node_modules/@symbo.ls/button/index.js
+var Button2 = {
+  extend: [IconText2, FocusableComponent],
+  tag: "button",
+  props: {
+    fontSize: "A",
+    type: "button",
+    border: "none",
+    display: "inline-flex",
+    align: "center center",
+    textDecoration: "none",
+    lineHeight: "1",
+    whiteSpace: "nowrap",
+    padding: "Z A1",
+    fontFamily: "inherit",
+    round: "C2"
+  },
+  attr: {
+    type: ({ props: props4 }) => props4.type
+  }
+};
+var CommonButton2 = {
+  extend: Button2,
+  props: {
+    theme: "primary",
+    boxSize: "fit-content",
+    padding: "A A2",
+    round: "Z2",
+    gap: "Y2",
+    position: "relative"
+  },
+  Icon: {
+    props: { fontSize: "C" }
+  },
+  Caption: {
+    props: {
+      text: "Button",
+      lineHeight: "1em"
+    }
+  }
+};
+var CancelConfirmButtons2 = {
+  extend: Flex,
+  childExtend: {
+    extend: CommonButton2,
+    props: {
+      minWidth: "D2",
+      ":first-child": {
+        background: "transparent",
+        border: "1px solid #20202B"
+      },
+      ":last-child": {}
+    }
+  },
+  ...[
+    { Caption: { text: "No" } },
+    { Caption: { text: "Yes" } }
+  ],
+  props: {
+    gap: "Z",
+    maxWidth: "fit-content"
+  }
+};
+
 // ../../uikit/domql/Modal/CompleteProcess.js
 var CompleteProcess = {
   extend: Modal,
@@ -13952,7 +14218,7 @@ var CompleteProcess = {
     }
   },
   Footer: {
-    extend: CommonButton,
+    extend: CommonButton2,
     props: {
       minWidth: "100%",
       fontWeight: "500"
@@ -14124,7 +14390,7 @@ var VerificationCode = {
       padding: "Y2 - - -"
     },
     Buttons: {
-      extend: CancelConfirmButtons,
+      extend: CancelConfirmButtons2,
       props: { childProps: { ":first-child": { border: "none" } } },
       ...[
         { Caption: { text: "Cancel" } },
@@ -14528,6 +14794,94 @@ var TimePickerItem = {
   Button_minus: { icon: "minus" }
 };
 
+// ../../uikit/domql/TimePicker/node_modules/@symbo.ls/icon/index.js
+var import_utils17 = __toESM(require_cjs());
+var IconText3 = {
+  extend: Flex,
+  props: {
+    align: "center center",
+    lineHeight: 1
+  },
+  Icon: {
+    props: ({ parent, props: props4 }) => ({ icon: parent.props.icon }),
+    if: ({ parent, props: props4 }) => {
+      const doesExist = parent.props.icon || parent.props.Icon || props4.name || props4.icon;
+      return doesExist;
+    }
+  },
+  text: ({ props: props4 }) => props4.text,
+  ".reversed": {
+    props: { flow: "row-reverse" }
+  },
+  ".vertical": {
+    props: { flow: "column" }
+  }
+};
+
+// ../../uikit/domql/TimePicker/node_modules/@symbo.ls/button/index.js
+var Button3 = {
+  extend: [IconText3, FocusableComponent],
+  tag: "button",
+  props: {
+    fontSize: "A",
+    type: "button",
+    border: "none",
+    display: "inline-flex",
+    align: "center center",
+    textDecoration: "none",
+    lineHeight: "1",
+    whiteSpace: "nowrap",
+    padding: "Z A1",
+    fontFamily: "inherit",
+    round: "C2"
+  },
+  attr: {
+    type: ({ props: props4 }) => props4.type
+  }
+};
+var CommonButton3 = {
+  extend: Button3,
+  props: {
+    theme: "primary",
+    boxSize: "fit-content",
+    padding: "A A2",
+    round: "Z2",
+    gap: "Y2",
+    position: "relative"
+  },
+  Icon: {
+    props: { fontSize: "C" }
+  },
+  Caption: {
+    props: {
+      text: "Button",
+      lineHeight: "1em"
+    }
+  }
+};
+var CancelConfirmButtons3 = {
+  extend: Flex,
+  childExtend: {
+    extend: CommonButton3,
+    props: {
+      minWidth: "D2",
+      ":first-child": {
+        background: "transparent",
+        border: "1px solid #20202B"
+      },
+      ":last-child": {}
+    }
+  },
+  ...[
+    { Caption: { text: "No" } },
+    { Caption: { text: "Yes" } }
+  ],
+  props: {
+    gap: "Z",
+    maxWidth: "fit-content"
+  }
+};
+
 // ../../uikit/domql/TimePicker/TimeSwitcher.js
 var props3 = {
   boxSize: "C B2",
@@ -14540,7 +14894,7 @@ var TimeSwitcher = {
   props: props3,
   extend: Flex,
   childExtend: {
-    extend: Button,
+    extend: Button3,
     props: ({ state, key }) => ({
       active: state.activeShift === key,
       padding: "0",
@@ -15923,7 +16277,7 @@ var defaultDefine = {
 
 // src/router.js
 var import_router2 = __toESM(require_cjs10(), 1);
-var import_utils16 = __toESM(require_cjs(), 1);
+var import_utils18 = __toESM(require_cjs(), 1);
 var DEFAULT_ROUTING_OPTIONS = {
   initRouter: true,
   injectRouterInLinkComponent: true,
@@ -15935,16 +16289,16 @@ var initRouter = (element, options) => {
   else if (options.router === true)
     options.router = DEFAULT_ROUTING_OPTIONS;
   else
-    (0, import_utils16.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS);
+    (0, import_utils18.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS);
   const routerOptions = options.router;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router2.router;
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash: hash2 } = import_utils16.window.location;
+    const { pathname, hash: hash2 } = import_utils18.window.location;
     const url2 = pathname + hash2;
     if (el.routes)
       router2(url2, el, {}, { initialRender: true });
   };
-  const hasRenderRouter = element.on && !(0, import_utils16.isUndefined)(element.on.renderRouter);
+  const hasRenderRouter = element.on && !(0, import_utils18.isUndefined)(element.on.renderRouter);
   if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
     if (element.on) {
       element.on.renderRouter = onRouterRenderDefault;
@@ -15966,20 +16320,20 @@ var popStateRouter = (element, options) => {
   if (!routerOptions.popState)
     return;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router2.router;
-  import_utils16.window.onpopstate = (e) => {
-    const { pathname, hash: hash2 } = import_utils16.window.location;
+  import_utils18.window.onpopstate = (e) => {
+    const { pathname, hash: hash2 } = import_utils18.window.location;
     const url2 = pathname + hash2;
     router2(url2, element, {}, { pushState: false, level: 0 });
   };
 };
 var injectRouterInLinkComponent = (routerOptions) => {
-  if (routerOptions.injectRouterInLinkComponent) {
-    return (0, import_utils16.deepMerge)(Link, RouterLink);
+  if (routerOptions && routerOptions.injectRouterInLinkComponent) {
+    return (0, import_utils18.deepMerge)(Link, RouterLink);
   }
 };
 
 // src/ferchOnCreate.js
-var import_utils17 = __toESM(require_cjs(), 1);
+var import_utils19 = __toESM(require_cjs(), 1);
 var import_fetch = __toESM(require_cjs12(), 1);
 var fetchSync = async (key, options) => {
   if (key && options.editor) {
@@ -15995,10 +16349,10 @@ var fetchAsync = (app, key, options, callback) => {
   if (key && options.editor) {
     try {
       const defaultCallback = (data) => {
-        if ((0, import_utils17.isObject)(data.designsystem)) {
+        if ((0, import_utils19.isObject)(data.designsystem)) {
           options.utils.init(data.designsystem);
         }
-        if ((0, import_utils17.isObject)(data.state)) {
+        if ((0, import_utils19.isObject)(data.state)) {
           app.state.set(data.state);
         }
       };
@@ -16011,10 +16365,10 @@ var fetchAsync = (app, key, options, callback) => {
 };
 
 // ../../node_modules/@domql/emotion/index.js
-var import_utils19 = __toESM(require_cjs());
+var import_utils21 = __toESM(require_cjs());
 
 // ../../node_modules/@domql/classlist/index.js
-var import_utils18 = __toESM(require_cjs());
+var import_utils20 = __toESM(require_cjs());
 var classify = (obj, element) => {
   let className = "";
   for (const item in obj) {
@@ -16024,7 +16378,7 @@ var classify = (obj, element) => {
     else if (typeof param === "string")
       className += ` ${param}`;
     else if (typeof param === "function") {
-      className += ` ${(0, import_utils18.exec)(param, element)}`;
+      className += ` ${(0, import_utils20.exec)(param, element)}`;
     }
   }
   return className;
@@ -16035,9 +16389,9 @@ var classList = (params, element) => {
   const { key } = element;
   if (params === true)
     params = element.class = { key };
-  if ((0, import_utils18.isString)(params))
+  if ((0, import_utils20.isString)(params))
     params = element.class = { default: params };
-  if ((0, import_utils18.isObject)(params))
+  if ((0, import_utils20.isObject)(params))
     params = classify(params, element);
   const className = params.replace(/\s+/g, " ").trim();
   if (element.ref)
@@ -16051,38 +16405,38 @@ var applyClassListOnNode = (params, element, node2) => {
 };
 
 // ../../node_modules/@domql/emotion/index.js
-var transformEmotionStyle = (emotion2) => {
+var transformEmotionStyle = (emotion4) => {
   return (params, element, state) => {
-    const execParams = (0, import_utils19.exec)(params, element);
+    const execParams = (0, import_utils21.exec)(params, element);
     if (params) {
-      if ((0, import_utils19.isObjectLike)(element.class))
+      if ((0, import_utils21.isObjectLike)(element.class))
         element.class.elementStyle = execParams;
       else
         element.class = { elementStyle: execParams };
     }
-    transformEmotionClass(emotion2)(element.class, element, element.state, true);
+    transformEmotionClass(emotion4)(element.class, element, element.state, true);
   };
 };
-var transformEmotionClass = (emotion2) => {
+var transformEmotionClass = (emotion4) => {
   return (params, element, state, flag) => {
     if (element.style && !flag)
       return;
     const { __ref } = element;
     const { __class, __classNames } = __ref;
-    if (!(0, import_utils19.isObjectLike)(params))
+    if (!(0, import_utils21.isObjectLike)(params))
       return;
     for (const key in params) {
-      const prop = (0, import_utils19.exec)(params[key], element);
+      const prop = (0, import_utils21.exec)(params[key], element);
       if (!prop) {
         delete __class[key];
         delete __classNames[key];
         continue;
       }
-      const isEqual = (0, import_utils19.isEqualDeep)(__class[key], prop);
+      const isEqual = (0, import_utils21.isEqualDeep)(__class[key], prop);
       if (!isEqual) {
-        if (!(0, import_utils19.isProduction)() && (0, import_utils19.isObject)(prop))
+        if (!(0, import_utils21.isProduction)() && (0, import_utils21.isObject)(prop))
           prop.label = key || element.key;
-        const CSSed = emotion2.css(prop);
+        const CSSed = emotion4.css(prop);
         __class[key] = prop;
         __classNames[key] = CSSed;
       }
@@ -16090,17 +16444,24 @@ var transformEmotionClass = (emotion2) => {
     applyClassListOnNode(__classNames, element, element.node);
   };
 };
-var transformDOMQLEmotion = (emotion2, options) => {
-  if (!emotion2)
-    emotion2 = createEmotion(options || { key: "smbls" });
+var transformDOMQLEmotion = (emotion4, options) => {
+  if (!emotion4)
+    emotion4 = createEmotion(options || { key: "smbls" });
   return {
-    style: transformEmotionStyle(emotion2),
-    class: transformEmotionClass(emotion2)
+    style: transformEmotionStyle(emotion4),
+    class: transformEmotionClass(emotion4)
   };
 };
 
+// node_modules/@symbo.ls/emotion/index.js
+var createEmotion4 = (key = "smbls", container) => {
+  const cleanKey = key.replaceAll(/\./g, "-");
+  return createEmotion({ key: cleanKey, container });
+};
+var emotion2 = createEmotion4();
+
 // src/initEmotion.js
-var import_utils20 = __toESM(require_cjs(), 1);
+var import_utils22 = __toESM(require_cjs(), 1);
 
 // src/options.js
 var DESIGN_SYSTEM_OPTIONS = {
@@ -16125,7 +16486,7 @@ var CREATE_OPTIONS = {
 };
 var options_default = CREATE_OPTIONS;
 
-// ../../uikit/icons/default-icons/index.js
+// node_modules/@symbo.ls/default-icons/index.js
 var default_icons_default = {
   symbols: require_logo(),
   arrowDownCircle: require_arrow_down_circle(),
@@ -16169,7 +16530,7 @@ var default_icons_default = {
   plus: require_plus()
 };
 
-// ../default-config/src/color.js
+// node_modules/@symbo.ls/default-config/src/color.js
 var COLOR = {
   transparent: "rgba(0, 0, 0, 0)",
   black: "black",
@@ -16222,7 +16583,7 @@ var GRADIENT = {
   )`
 };
 
-// ../default-config/src/theme.js
+// node_modules/@symbo.ls/default-config/src/theme.js
 var PRIORITIES = {
   primary: {
     "@dark": {
@@ -16377,7 +16738,7 @@ var THEME = {
   }
 };
 
-// ../default-config/src/typography.js
+// node_modules/@symbo.ls/default-config/src/typography.js
 var TYPOGRAPHY = {
   base: 16,
   ratio: 1.125,
@@ -16385,14 +16746,14 @@ var TYPOGRAPHY = {
   templates: {}
 };
 
-// ../default-config/src/spacing.js
+// node_modules/@symbo.ls/default-config/src/spacing.js
 var SPACING = {
   base: 16,
   ratio: 1.618,
   subSequence: true
 };
 
-// ../default-config/src/font.js
+// node_modules/@symbo.ls/default-config/src/font.js
 var FONT = {};
 var FONT_FAMILY = {
   system: {
@@ -16402,7 +16763,7 @@ var FONT_FAMILY = {
   }
 };
 
-// ../default-config/src/index.js
+// node_modules/@symbo.ls/default-config/src/index.js
 var DEFAULT_CONFIG = {
   version: "0.0.1",
   COLOR,
@@ -16441,25 +16802,25 @@ var src_default = DEFAULT_CONFIG;
 var initEmotion = (key, options = DESIGN_SYSTEM_OPTIONS) => {
   const doc = options.parent || options.document || document;
   const initOptions = options.initOptions || {};
-  const emotion2 = initOptions.emotion;
+  const emotion4 = initOptions.emotion;
   if (!initOptions.emotion)
-    initOptions.emotion = emotion;
+    initOptions.emotion = emotion2;
   const registry = options.registry || transformDOMQLEmotion(initOptions.emotion, options);
-  const designSystem = options.designSystem || (options.defaultConfig ? (0, import_utils20.deepClone)(src_default) : {});
+  const designSystem = options.designSystem || (options.defaultConfig ? (0, import_utils22.deepClone)(src_default) : {});
   const scratchSystem2 = init(designSystem, {
     key,
-    emotion: emotion2,
+    emotion: emotion4,
     verbose: options.verbose,
     document: doc,
     ...DESIGN_SYSTEM_OPTIONS,
     ...initOptions
   });
-  return [scratchSystem2, emotion2, registry];
+  return [scratchSystem2, emotion4, registry];
 };
 
 // ../socket-ui/byld-socket.js
 var import_router3 = __toESM(require_cjs10());
-var import_scratch14 = __toESM(require_cjs9());
+var import_scratch23 = __toESM(require_cjs9());
 
 // ../socket/client.js
 var utils = __toESM(require_cjs(), 1);
@@ -19858,11 +20219,124 @@ function send(event = "change", changes, options) {
   this.emit(event, changes, { ...options, ...defautlOpts });
 }
 
+// ../socket-ui/node_modules/@symbo.ls/atoms/Block.js
+var import_scratch14 = __toESM(require_cjs9());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Flex.js
+var Flex2 = {
+  props: {
+    display: "flex"
+  },
+  class: {
+    flow: ({ props: props4 }) => props4.flow && { flexFlow: props4.flow },
+    wrap: ({ props: props4 }) => props4.wrap && { flexWrap: props4.wrap },
+    align: ({ props: props4 }) => {
+      if (typeof props4.align !== "string")
+        return;
+      const [alignItems, justifyContent] = props4.align.split(" ");
+      return { alignItems, justifyContent };
+    }
+  }
+};
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Grid.js
+var import_scratch15 = __toESM(require_cjs9());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Media.js
+var import_utils24 = __toESM(require_cjs());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Theme.js
+var import_scratch18 = __toESM(require_cjs9());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Shape/style.js
+var import_scratch17 = __toESM(require_cjs9());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Timing.js
+var import_scratch16 = __toESM(require_cjs9());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Shape/style.js
+var CONFIG3 = (0, import_scratch17.getActiveConfig)();
+var depth2 = {
+  4: { boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG3.UNIT.default} 4${CONFIG3.UNIT.default}` },
+  6: { boxShadow: `rgba(0,0,0,.10) 0 3${CONFIG3.UNIT.default} 6${CONFIG3.UNIT.default}` },
+  10: { boxShadow: `rgba(0,0,0,.10) 0 4${CONFIG3.UNIT.default} 10${CONFIG3.UNIT.default}` },
+  16: { boxShadow: `rgba(0,0,0,.10) 0 8${CONFIG3.UNIT.default} 16${CONFIG3.UNIT.default}` },
+  26: { boxShadow: `rgba(0,0,0,.10) 0 14${CONFIG3.UNIT.default} 26${CONFIG3.UNIT.default}` },
+  42: { boxShadow: `rgba(0,0,0,.10) 0 20${CONFIG3.UNIT.default} 42${CONFIG3.UNIT.default}` }
+};
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Theme.js
+var import_utils23 = __toESM(require_cjs());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Collection.js
+var import_state2 = __toESM(require_cjs5());
+var import_utils25 = __toESM(require_cjs());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Position.js
+var import_scratch19 = __toESM(require_cjs9());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Shape/index.js
+var import_utils26 = __toESM(require_cjs());
+var import_scratch20 = __toESM(require_cjs9());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Text.js
+var import_scratch21 = __toESM(require_cjs9());
+
+// ../socket-ui/node_modules/@symbo.ls/atoms/Animation.js
+var import_scratch22 = __toESM(require_cjs9());
+var import_utils27 = __toESM(require_cjs());
+
+// ../socket-ui/node_modules/@symbo.ls/emotion/index.js
+var createEmotion5 = (key = "smbls", container) => {
+  const cleanKey = key.replaceAll(/\./g, "-");
+  return createEmotion({ key: cleanKey, container });
+};
+var emotion3 = createEmotion5();
+
+// ../socket-ui/node_modules/@symbo.ls/notification/index.js
+var Notification2 = {
+  extend: Flex2,
+  props: {
+    theme: "alert",
+    padding: "Z1 B Z A",
+    round: "A A A Y2",
+    gap: "X2",
+    cursor: "pointer",
+    align: "flex-start center"
+  },
+  IconText: {
+    props: {
+      icon: "info outline"
+    }
+  },
+  Flex: {
+    props: {
+      flow: "column",
+      align: "flex-start",
+      gap: "X2"
+    },
+    Title: {
+      props: {
+        fontWeight: "600",
+        lineHeight: "1em",
+        text: "Notification"
+      }
+    },
+    P: {
+      props: {
+        fontSize: "Z",
+        margin: "0",
+        text: "is not always a distraction"
+      }
+    }
+  }
+};
+
 // ../socket-ui/byld-socket.js
 var import_globals = __toESM(require_cjs11());
 
 // ../socket-ui/devFocus.js
-var import_utils21 = __toESM(require_cjs());
+var import_utils28 = __toESM(require_cjs());
 var DevFocus = {
   props: {
     ".preventSelect": {
@@ -19916,7 +20390,7 @@ var DevFocus = {
     on: {
       init: ({ context }) => {
         const { components } = context;
-        if ((0, import_utils21.isObject)(components)) {
+        if ((0, import_utils28.isObject)(components)) {
           const { Content, ...rest } = components;
           for (const key in rest) {
             if (domql_exports[key])
@@ -20025,7 +20499,7 @@ var COLOR2 = {
   black: "#000000",
   blue: "#3686F7"
 };
-(0, import_scratch14.set)({
+(0, import_scratch23.set)({
   COLOR: COLOR2,
   ANIMATION
 });
@@ -20103,7 +20577,7 @@ var Notifications = {
     zIndex: "999"
   },
   childExtend: {
-    extend: [Notification],
+    extend: [Notification2],
     props: ({ state }) => ({
       animation: "fadeInUp",
       animationDuration: "C",
@@ -20138,15 +20612,15 @@ var Sync = {
 };
 
 // src/syncExtend.js
-var import_utils22 = __toESM(require_cjs(), 1);
+var import_utils29 = __toESM(require_cjs(), 1);
 var applySyncDebug = (extend, options) => {
   const { editor } = options;
   if (!editor)
     return extend;
-  const inspect = (0, import_utils22.isUndefined)(editor.inspect) ? (0, import_utils22.isDevelopment)() : editor.inspect;
+  const inspect = (0, import_utils29.isUndefined)(editor.inspect) ? (0, import_utils29.isDevelopment)() : editor.inspect;
   if (inspect)
     extend.push(DevFocus);
-  const liveSync = (0, import_utils22.isUndefined)(editor.liveSync) ? (0, import_utils22.isDevelopment)() : editor.liveSync;
+  const liveSync = (0, import_utils29.isUndefined)(editor.liveSync) ? (0, import_utils29.isDevelopment)() : editor.liveSync;
   if (liveSync)
     extend.push(Sync);
   return extend;
@@ -20155,7 +20629,7 @@ var applyInspectListener = (root, options) => {
   const { editor } = options;
   if (!editor)
     return;
-  const inspect = (0, import_utils22.isUndefined)(editor.inspect) ? (0, import_utils22.isDevelopment)() : editor.inspect;
+  const inspect = (0, import_utils29.isUndefined)(editor.inspect) ? (0, import_utils29.isDevelopment)() : editor.inspect;
   if (inspect)
     inspectOnKey(root);
 };
@@ -20163,11 +20637,11 @@ var applyInspectListener = (root, options) => {
 // src/index.js
 var SYMBOLS_KEY = process.env.SYMBOLS_KEY;
 var mergeWithLocalFile2 = (options, optionsExternalFile) => {
-  const rcfile = (0, import_utils23.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {};
-  return (0, import_utils23.deepMerge)(options, rcfile);
+  const rcfile = (0, import_utils30.isObject)(optionsExternalFile) ? optionsExternalFile : dynamic_default || {};
+  return (0, import_utils30.deepMerge)(options, rcfile);
 };
 var create = async (App, options = options_default, optionsExternalFile) => {
-  const appIsKey = (0, import_utils23.isString)(App);
+  const appIsKey = (0, import_utils30.isString)(App);
   options = { ...options_default, ...mergeWithLocalFile2(options, optionsExternalFile) };
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : "");
   if (appIsKey)
@@ -20181,12 +20655,12 @@ var create = async (App, options = options_default, optionsExternalFile) => {
     document = window.document;
   }
   const doc = options.parent || options.document || document;
-  const [scratcDesignhSystem, emotion2, registry] = initEmotion(key, options);
+  const [scratcDesignhSystem, emotion4, registry] = initEmotion(key, options);
   const state = {};
   if (options.state)
-    (0, import_utils23.deepMerge)(state, options.state);
+    (0, import_utils30.deepMerge)(state, options.state);
   if (App && App.state)
-    (0, import_utils23.deepMerge)(state, App.state);
+    (0, import_utils30.deepMerge)(state, App.state);
   const pages = options.pages || {};
   const components = options.components ? { ...domql_exports, ...options.components } : domql_exports;
   const designSystem = scratcDesignhSystem || {};
@@ -20194,7 +20668,7 @@ var create = async (App, options = options_default, optionsExternalFile) => {
   const define = options.define || defaultDefine;
   const routerOptions = initRouter(App, options);
   const extend = applySyncDebug([App], options);
-  const domqlApp = (import_domql.default.default.create || import_domql.default.create)({
+  const domqlApp = (import_domql.default.default && import_domql.default.default.create || import_domql.default.create)({
     extend,
     routes: options.pages,
     state,
@@ -20208,7 +20682,7 @@ var create = async (App, options = options_default, optionsExternalFile) => {
       utils: snippets,
       define,
       registry,
-      emotion: emotion2,
+      emotion: emotion4,
       routerOptions,
       document: doc
     }
@@ -20228,7 +20702,7 @@ var create = async (App, options = options_default, optionsExternalFile) => {
   return domqlApp;
 };
 var createSync = (App, options = options_default, optionsExternalFile) => {
-  const appIsKey = (0, import_utils23.isString)(App);
+  const appIsKey = (0, import_utils30.isString)(App);
   options = mergeWithLocalFile2(options, optionsExternalFile);
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : "");
   if (appIsKey)
@@ -20247,7 +20721,7 @@ var createSync = (App, options = options_default, optionsExternalFile) => {
     parent = options.document;
   else
     parent = document.body;
-  const [scratcDesignhSystem, emotion2, registry] = initEmotion(key, options);
+  const [scratcDesignhSystem, emotion4, registry] = initEmotion(key, options);
   let state;
   if (options.state)
     state = options.state;
@@ -20275,7 +20749,7 @@ var createSync = (App, options = options_default, optionsExternalFile) => {
       utils: snippets,
       define,
       registry,
-      emotion: emotion2,
+      emotion: emotion4,
       // routerOptions,
       document
     }