@symbo.ls/scratch 2.11.475 → 2.11.497

package/dist/cjs/system/document.js

@@ -300,6 +300,7 @@ var require_array = __commonJS({
       addItemAfterEveryElement: () => addItemAfterEveryElement,
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       arraysEqual: () => arraysEqual,
+      checkIfStringIsInArray: () => checkIfStringIsInArray,
       cutArrayAfterValue: () => cutArrayAfterValue,
       cutArrayBeforeValue: () => cutArrayBeforeValue,
       filterArrays: () => filterArrays,
@@ -419,6 +420,11 @@ var require_array = __commonJS({
       const excludeSet = new Set(excludeArr);
       return sourceArr.filter((item) => !excludeSet.has(item));
     };
+    var checkIfStringIsInArray = (string, arr) => {
+      if (!string)
+        return;
+      return arr.filter((v) => string.includes(v)).length;
+    };
   }
 });
 
@@ -473,14 +479,15 @@ var require_string = __commonJS({
       2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
       3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
     };
-    var replaceLiteralsWithObjectFields = (str, state, options = {}) => {
+    function replaceLiteralsWithObjectFields(str, options = {}, forcedState) {
       if (!str.includes(options.bracketsLength === 3 ? "{{{" : "{{"))
         return str;
       const reg = brackRegex[options.bracketsLength || 2];
+      const obj = forcedState || this.state || {};
       return str.replace(reg, (_, parentPath, variable) => {
         if (parentPath) {
           const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
-          let parentState = state;
+          let parentState = obj;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
             if (!parentState) {
@@ -490,11 +497,11 @@ var require_string = __commonJS({
           const value = parentState[variable.trim()];
           return value !== void 0 ? `${value}` : "";
         } else {
-          const value = state[variable.trim()];
+          const value = obj[variable.trim()];
           return value !== void 0 ? `${value}` : "";
         }
       });
-    };
+    }
     var lowercaseFirstLetter = (inputString) => {
       return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
     };
@@ -1651,6 +1658,7 @@ var require_component = __commonJS({
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
       checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      extractComponentKeyFromKey: () => extractComponentKeyFromKey,
       getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -1707,11 +1715,14 @@ var require_component = __commonJS({
       }
       return !hasComponentAttrs || childProps || extendProps || children || childExtends;
     };
+    var extractComponentKeyFromKey = (key) => {
+      return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+    };
     var extendizeByKey = (element, parent, key) => {
       const { context } = parent;
       const { tag, extend, childExtends } = element;
       const isSugar = checkIfSugar(element, parent, key);
-      const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+      const extendFromKey = extractComponentKeyFromKey(key);
       const isExtendKeyComponent = context && context.components[extendFromKey];
       if (element === isExtendKeyComponent)
         return element;
@@ -1831,7 +1842,7 @@ var require_component = __commonJS({
             if (checkIfKeyIsComponent(key)) {
               result.push(key);
             }
-            if (key === "extend") {
+            if (key === "extend" || key === "extends") {
               if (typeof o[key] === "string") {
                 result.push(o[key]);
               } else if (Array.isArray(o[key])) {
@@ -2226,6 +2237,7 @@ var require_cjs3 = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
+          checkIfStringIsInArray: () => checkIfStringIsInArray,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           filterArrays: () => filterArrays,
@@ -2345,6 +2357,11 @@ var require_cjs3 = __commonJS({
           const excludeSet = new Set(excludeArr);
           return sourceArr.filter((item) => !excludeSet.has(item));
         };
+        var checkIfStringIsInArray = (string, arr) => {
+          if (!string)
+            return;
+          return arr.filter((v) => string.includes(v)).length;
+        };
       }
     });
     var require_string2 = __commonJS2({
@@ -2397,14 +2414,15 @@ var require_cjs3 = __commonJS({
           2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
           3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
         };
-        var replaceLiteralsWithObjectFields = (str, state, options = {}) => {
+        function replaceLiteralsWithObjectFields(str, options = {}, forcedState) {
           if (!str.includes(options.bracketsLength === 3 ? "{{{" : "{{"))
             return str;
           const reg = brackRegex[options.bracketsLength || 2];
+          const obj = forcedState || this.state || {};
           return str.replace(reg, (_, parentPath, variable) => {
             if (parentPath) {
               const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
-              let parentState = state;
+              let parentState = obj;
               for (let i = 0; i < parentLevels; i++) {
                 parentState = parentState.parent;
                 if (!parentState) {
@@ -2414,11 +2432,11 @@ var require_cjs3 = __commonJS({
               const value = parentState[variable.trim()];
               return value !== void 0 ? `${value}` : "";
             } else {
-              const value = state[variable.trim()];
+              const value = obj[variable.trim()];
               return value !== void 0 ? `${value}` : "";
             }
           });
-        };
+        }
         var lowercaseFirstLetter = (inputString) => {
           return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
         };
@@ -3563,6 +3581,7 @@ var require_cjs3 = __commonJS({
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
           checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          extractComponentKeyFromKey: () => extractComponentKeyFromKey,
           getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -3619,11 +3638,14 @@ var require_cjs3 = __commonJS({
           }
           return !hasComponentAttrs || childProps || extendProps || children || childExtends;
         };
+        var extractComponentKeyFromKey = (key) => {
+          return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+        };
         var extendizeByKey = (element, parent, key) => {
           const { context } = parent;
           const { tag, extend, childExtends } = element;
           const isSugar = checkIfSugar(element, parent, key);
-          const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+          const extendFromKey = extractComponentKeyFromKey(key);
           const isExtendKeyComponent = context && context.components[extendFromKey];
           if (element === isExtendKeyComponent)
             return element;
@@ -3743,7 +3765,7 @@ var require_cjs3 = __commonJS({
                 if (checkIfKeyIsComponent(key)) {
                   result.push(key);
                 }
-                if (key === "extend") {
+                if (key === "extend" || key === "extends") {
                   if (typeof o[key] === "string") {
                     result.push(o[key]);
                   } else if (Array.isArray(o[key])) {

package/dist/cjs/system/font.js

@@ -300,6 +300,7 @@ var require_array = __commonJS({
       addItemAfterEveryElement: () => addItemAfterEveryElement,
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       arraysEqual: () => arraysEqual,
+      checkIfStringIsInArray: () => checkIfStringIsInArray,
       cutArrayAfterValue: () => cutArrayAfterValue,
       cutArrayBeforeValue: () => cutArrayBeforeValue,
       filterArrays: () => filterArrays,
@@ -419,6 +420,11 @@ var require_array = __commonJS({
       const excludeSet = new Set(excludeArr);
       return sourceArr.filter((item) => !excludeSet.has(item));
     };
+    var checkIfStringIsInArray = (string, arr) => {
+      if (!string)
+        return;
+      return arr.filter((v) => string.includes(v)).length;
+    };
   }
 });
 
@@ -473,14 +479,15 @@ var require_string = __commonJS({
       2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
       3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
     };
-    var replaceLiteralsWithObjectFields = (str, state, options = {}) => {
+    function replaceLiteralsWithObjectFields(str, options = {}, forcedState) {
       if (!str.includes(options.bracketsLength === 3 ? "{{{" : "{{"))
         return str;
       const reg = brackRegex[options.bracketsLength || 2];
+      const obj = forcedState || this.state || {};
       return str.replace(reg, (_, parentPath, variable) => {
         if (parentPath) {
           const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
-          let parentState = state;
+          let parentState = obj;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
             if (!parentState) {
@@ -490,11 +497,11 @@ var require_string = __commonJS({
           const value = parentState[variable.trim()];
           return value !== void 0 ? `${value}` : "";
         } else {
-          const value = state[variable.trim()];
+          const value = obj[variable.trim()];
           return value !== void 0 ? `${value}` : "";
         }
       });
-    };
+    }
     var lowercaseFirstLetter = (inputString) => {
       return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
     };
@@ -1651,6 +1658,7 @@ var require_component = __commonJS({
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
       checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      extractComponentKeyFromKey: () => extractComponentKeyFromKey,
       getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -1707,11 +1715,14 @@ var require_component = __commonJS({
       }
       return !hasComponentAttrs || childProps || extendProps || children || childExtends;
     };
+    var extractComponentKeyFromKey = (key) => {
+      return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+    };
     var extendizeByKey = (element, parent, key) => {
       const { context } = parent;
       const { tag, extend, childExtends } = element;
       const isSugar = checkIfSugar(element, parent, key);
-      const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+      const extendFromKey = extractComponentKeyFromKey(key);
       const isExtendKeyComponent = context && context.components[extendFromKey];
       if (element === isExtendKeyComponent)
         return element;
@@ -1831,7 +1842,7 @@ var require_component = __commonJS({
             if (checkIfKeyIsComponent(key)) {
               result.push(key);
             }
-            if (key === "extend") {
+            if (key === "extend" || key === "extends") {
               if (typeof o[key] === "string") {
                 result.push(o[key]);
               } else if (Array.isArray(o[key])) {
@@ -2190,6 +2201,7 @@ var require_cjs2 = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
+          checkIfStringIsInArray: () => checkIfStringIsInArray,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           filterArrays: () => filterArrays,
@@ -2309,6 +2321,11 @@ var require_cjs2 = __commonJS({
           const excludeSet = new Set(excludeArr);
           return sourceArr.filter((item) => !excludeSet.has(item));
         };
+        var checkIfStringIsInArray = (string, arr) => {
+          if (!string)
+            return;
+          return arr.filter((v) => string.includes(v)).length;
+        };
       }
     });
     var require_string2 = __commonJS2({
@@ -2361,14 +2378,15 @@ var require_cjs2 = __commonJS({
           2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
           3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
         };
-        var replaceLiteralsWithObjectFields = (str, state, options = {}) => {
+        function replaceLiteralsWithObjectFields(str, options = {}, forcedState) {
           if (!str.includes(options.bracketsLength === 3 ? "{{{" : "{{"))
             return str;
           const reg = brackRegex[options.bracketsLength || 2];
+          const obj = forcedState || this.state || {};
           return str.replace(reg, (_, parentPath, variable) => {
             if (parentPath) {
               const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
-              let parentState = state;
+              let parentState = obj;
               for (let i = 0; i < parentLevels; i++) {
                 parentState = parentState.parent;
                 if (!parentState) {
@@ -2378,11 +2396,11 @@ var require_cjs2 = __commonJS({
               const value = parentState[variable.trim()];
               return value !== void 0 ? `${value}` : "";
             } else {
-              const value = state[variable.trim()];
+              const value = obj[variable.trim()];
               return value !== void 0 ? `${value}` : "";
             }
           });
-        };
+        }
         var lowercaseFirstLetter = (inputString) => {
           return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
         };
@@ -3527,6 +3545,7 @@ var require_cjs2 = __commonJS({
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
           checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          extractComponentKeyFromKey: () => extractComponentKeyFromKey,
           getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -3583,11 +3602,14 @@ var require_cjs2 = __commonJS({
           }
           return !hasComponentAttrs || childProps || extendProps || children || childExtends;
         };
+        var extractComponentKeyFromKey = (key) => {
+          return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+        };
         var extendizeByKey = (element, parent, key) => {
           const { context } = parent;
           const { tag, extend, childExtends } = element;
           const isSugar = checkIfSugar(element, parent, key);
-          const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+          const extendFromKey = extractComponentKeyFromKey(key);
           const isExtendKeyComponent = context && context.components[extendFromKey];
           if (element === isExtendKeyComponent)
             return element;
@@ -3707,7 +3729,7 @@ var require_cjs2 = __commonJS({
                 if (checkIfKeyIsComponent(key)) {
                   result.push(key);
                 }
-                if (key === "extend") {
+                if (key === "extend" || key === "extends") {
                   if (typeof o[key] === "string") {
                     result.push(o[key]);
                   } else if (Array.isArray(o[key])) {

package/dist/cjs/system/index.js

@@ -300,6 +300,7 @@ var require_array = __commonJS({
       addItemAfterEveryElement: () => addItemAfterEveryElement,
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       arraysEqual: () => arraysEqual,
+      checkIfStringIsInArray: () => checkIfStringIsInArray,
       cutArrayAfterValue: () => cutArrayAfterValue,
       cutArrayBeforeValue: () => cutArrayBeforeValue,
       filterArrays: () => filterArrays,
@@ -419,6 +420,11 @@ var require_array = __commonJS({
       const excludeSet = new Set(excludeArr);
       return sourceArr.filter((item) => !excludeSet.has(item));
     };
+    var checkIfStringIsInArray = (string, arr) => {
+      if (!string)
+        return;
+      return arr.filter((v) => string.includes(v)).length;
+    };
   }
 });
 
@@ -473,14 +479,15 @@ var require_string = __commonJS({
       2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
       3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
     };
-    var replaceLiteralsWithObjectFields = (str, state, options = {}) => {
+    function replaceLiteralsWithObjectFields(str, options = {}, forcedState) {
       if (!str.includes(options.bracketsLength === 3 ? "{{{" : "{{"))
         return str;
       const reg = brackRegex[options.bracketsLength || 2];
+      const obj = forcedState || this.state || {};
       return str.replace(reg, (_, parentPath, variable) => {
         if (parentPath) {
           const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
-          let parentState = state;
+          let parentState = obj;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
             if (!parentState) {
@@ -490,11 +497,11 @@ var require_string = __commonJS({
           const value = parentState[variable.trim()];
           return value !== void 0 ? `${value}` : "";
         } else {
-          const value = state[variable.trim()];
+          const value = obj[variable.trim()];
           return value !== void 0 ? `${value}` : "";
         }
       });
-    };
+    }
     var lowercaseFirstLetter = (inputString) => {
       return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
     };
@@ -1651,6 +1658,7 @@ var require_component = __commonJS({
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
       checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      extractComponentKeyFromKey: () => extractComponentKeyFromKey,
       getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -1707,11 +1715,14 @@ var require_component = __commonJS({
       }
       return !hasComponentAttrs || childProps || extendProps || children || childExtends;
     };
+    var extractComponentKeyFromKey = (key) => {
+      return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+    };
     var extendizeByKey = (element, parent, key) => {
       const { context } = parent;
       const { tag, extend, childExtends } = element;
       const isSugar = checkIfSugar(element, parent, key);
-      const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+      const extendFromKey = extractComponentKeyFromKey(key);
       const isExtendKeyComponent = context && context.components[extendFromKey];
       if (element === isExtendKeyComponent)
         return element;
@@ -1831,7 +1842,7 @@ var require_component = __commonJS({
             if (checkIfKeyIsComponent(key)) {
               result.push(key);
             }
-            if (key === "extend") {
+            if (key === "extend" || key === "extends") {
               if (typeof o[key] === "string") {
                 result.push(o[key]);
               } else if (Array.isArray(o[key])) {
@@ -2226,6 +2237,7 @@ var require_cjs3 = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
+          checkIfStringIsInArray: () => checkIfStringIsInArray,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           filterArrays: () => filterArrays,
@@ -2345,6 +2357,11 @@ var require_cjs3 = __commonJS({
           const excludeSet = new Set(excludeArr);
           return sourceArr.filter((item) => !excludeSet.has(item));
         };
+        var checkIfStringIsInArray = (string, arr) => {
+          if (!string)
+            return;
+          return arr.filter((v) => string.includes(v)).length;
+        };
       }
     });
     var require_string2 = __commonJS2({
@@ -2397,14 +2414,15 @@ var require_cjs3 = __commonJS({
           2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
           3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
         };
-        var replaceLiteralsWithObjectFields = (str, state, options = {}) => {
+        function replaceLiteralsWithObjectFields(str, options = {}, forcedState) {
           if (!str.includes(options.bracketsLength === 3 ? "{{{" : "{{"))
             return str;
           const reg = brackRegex[options.bracketsLength || 2];
+          const obj = forcedState || this.state || {};
           return str.replace(reg, (_, parentPath, variable) => {
             if (parentPath) {
               const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
-              let parentState = state;
+              let parentState = obj;
               for (let i = 0; i < parentLevels; i++) {
                 parentState = parentState.parent;
                 if (!parentState) {
@@ -2414,11 +2432,11 @@ var require_cjs3 = __commonJS({
               const value = parentState[variable.trim()];
               return value !== void 0 ? `${value}` : "";
             } else {
-              const value = state[variable.trim()];
+              const value = obj[variable.trim()];
               return value !== void 0 ? `${value}` : "";
             }
           });
-        };
+        }
         var lowercaseFirstLetter = (inputString) => {
           return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
         };
@@ -3563,6 +3581,7 @@ var require_cjs3 = __commonJS({
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
           checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          extractComponentKeyFromKey: () => extractComponentKeyFromKey,
           getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -3619,11 +3638,14 @@ var require_cjs3 = __commonJS({
           }
           return !hasComponentAttrs || childProps || extendProps || children || childExtends;
         };
+        var extractComponentKeyFromKey = (key) => {
+          return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+        };
         var extendizeByKey = (element, parent, key) => {
           const { context } = parent;
           const { tag, extend, childExtends } = element;
           const isSugar = checkIfSugar(element, parent, key);
-          const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+          const extendFromKey = extractComponentKeyFromKey(key);
           const isExtendKeyComponent = context && context.components[extendFromKey];
           if (element === isExtendKeyComponent)
             return element;
@@ -3743,7 +3765,7 @@ var require_cjs3 = __commonJS({
                 if (checkIfKeyIsComponent(key)) {
                   result.push(key);
                 }
-                if (key === "extend") {
+                if (key === "extend" || key === "extends") {
                   if (typeof o[key] === "string") {
                     result.push(o[key]);
                   } else if (Array.isArray(o[key])) {

package/dist/cjs/system/reset.js

@@ -300,6 +300,7 @@ var require_array = __commonJS({
       addItemAfterEveryElement: () => addItemAfterEveryElement,
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       arraysEqual: () => arraysEqual,
+      checkIfStringIsInArray: () => checkIfStringIsInArray,
       cutArrayAfterValue: () => cutArrayAfterValue,
       cutArrayBeforeValue: () => cutArrayBeforeValue,
       filterArrays: () => filterArrays,
@@ -419,6 +420,11 @@ var require_array = __commonJS({
       const excludeSet = new Set(excludeArr);
       return sourceArr.filter((item) => !excludeSet.has(item));
     };
+    var checkIfStringIsInArray = (string, arr) => {
+      if (!string)
+        return;
+      return arr.filter((v) => string.includes(v)).length;
+    };
   }
 });
 
@@ -473,14 +479,15 @@ var require_string = __commonJS({
       2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
       3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
     };
-    var replaceLiteralsWithObjectFields = (str, state, options = {}) => {
+    function replaceLiteralsWithObjectFields(str, options = {}, forcedState) {
       if (!str.includes(options.bracketsLength === 3 ? "{{{" : "{{"))
         return str;
       const reg = brackRegex[options.bracketsLength || 2];
+      const obj = forcedState || this.state || {};
       return str.replace(reg, (_, parentPath, variable) => {
         if (parentPath) {
           const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
-          let parentState = state;
+          let parentState = obj;
           for (let i = 0; i < parentLevels; i++) {
             parentState = parentState.parent;
             if (!parentState) {
@@ -490,11 +497,11 @@ var require_string = __commonJS({
           const value = parentState[variable.trim()];
           return value !== void 0 ? `${value}` : "";
         } else {
-          const value = state[variable.trim()];
+          const value = obj[variable.trim()];
           return value !== void 0 ? `${value}` : "";
         }
       });
-    };
+    }
     var lowercaseFirstLetter = (inputString) => {
       return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
     };
@@ -1651,6 +1658,7 @@ var require_component = __commonJS({
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
       checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      extractComponentKeyFromKey: () => extractComponentKeyFromKey,
       getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -1707,11 +1715,14 @@ var require_component = __commonJS({
       }
       return !hasComponentAttrs || childProps || extendProps || children || childExtends;
     };
+    var extractComponentKeyFromKey = (key) => {
+      return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+    };
     var extendizeByKey = (element, parent, key) => {
       const { context } = parent;
       const { tag, extend, childExtends } = element;
       const isSugar = checkIfSugar(element, parent, key);
-      const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+      const extendFromKey = extractComponentKeyFromKey(key);
       const isExtendKeyComponent = context && context.components[extendFromKey];
       if (element === isExtendKeyComponent)
         return element;
@@ -1831,7 +1842,7 @@ var require_component = __commonJS({
             if (checkIfKeyIsComponent(key)) {
               result.push(key);
             }
-            if (key === "extend") {
+            if (key === "extend" || key === "extends") {
               if (typeof o[key] === "string") {
                 result.push(o[key]);
               } else if (Array.isArray(o[key])) {
@@ -2226,6 +2237,7 @@ var require_cjs3 = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
+          checkIfStringIsInArray: () => checkIfStringIsInArray,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           filterArrays: () => filterArrays,
@@ -2345,6 +2357,11 @@ var require_cjs3 = __commonJS({
           const excludeSet = new Set(excludeArr);
           return sourceArr.filter((item) => !excludeSet.has(item));
         };
+        var checkIfStringIsInArray = (string, arr) => {
+          if (!string)
+            return;
+          return arr.filter((v) => string.includes(v)).length;
+        };
       }
     });
     var require_string2 = __commonJS2({
@@ -2397,14 +2414,15 @@ var require_cjs3 = __commonJS({
           2: /\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}/g,
           3: /\{\{\{\s*((?:\.\.\/)+)?([^}\s]+)\s*\}\}\}/g
         };
-        var replaceLiteralsWithObjectFields = (str, state, options = {}) => {
+        function replaceLiteralsWithObjectFields(str, options = {}, forcedState) {
           if (!str.includes(options.bracketsLength === 3 ? "{{{" : "{{"))
             return str;
           const reg = brackRegex[options.bracketsLength || 2];
+          const obj = forcedState || this.state || {};
           return str.replace(reg, (_, parentPath, variable) => {
             if (parentPath) {
               const parentLevels = parentPath.match(options.bracketsLength === 3 ? /\.\.\.\//g : /\.\.\//g).length;
-              let parentState = state;
+              let parentState = obj;
               for (let i = 0; i < parentLevels; i++) {
                 parentState = parentState.parent;
                 if (!parentState) {
@@ -2414,11 +2432,11 @@ var require_cjs3 = __commonJS({
               const value = parentState[variable.trim()];
               return value !== void 0 ? `${value}` : "";
             } else {
-              const value = state[variable.trim()];
+              const value = obj[variable.trim()];
               return value !== void 0 ? `${value}` : "";
             }
           });
-        };
+        }
         var lowercaseFirstLetter = (inputString) => {
           return `${inputString.charAt(0).toLowerCase()}${inputString.slice(1)}`;
         };
@@ -3563,6 +3581,7 @@ var require_cjs3 = __commonJS({
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
           checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          extractComponentKeyFromKey: () => extractComponentKeyFromKey,
           getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -3619,11 +3638,14 @@ var require_cjs3 = __commonJS({
           }
           return !hasComponentAttrs || childProps || extendProps || children || childExtends;
         };
+        var extractComponentKeyFromKey = (key) => {
+          return key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+        };
         var extendizeByKey = (element, parent, key) => {
           const { context } = parent;
           const { tag, extend, childExtends } = element;
           const isSugar = checkIfSugar(element, parent, key);
-          const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? [key.split("_")[0]] : key.includes(".") && !checkIfKeyIsComponent(key.split(".")[1]) ? [key.split(".")[0]] : [key];
+          const extendFromKey = extractComponentKeyFromKey(key);
           const isExtendKeyComponent = context && context.components[extendFromKey];
           if (element === isExtendKeyComponent)
             return element;
@@ -3743,7 +3765,7 @@ var require_cjs3 = __commonJS({
                 if (checkIfKeyIsComponent(key)) {
                   result.push(key);
                 }
-                if (key === "extend") {
+                if (key === "extend" || key === "extends") {
                   if (typeof o[key] === "string") {
                     result.push(o[key]);
                   } else if (Array.isArray(o[key])) {