@symbo.ls/scratch 2.11.475 → 2.11.497

package/dist/cjs/system/shadow.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/spacing.js

@@ -323,6 +323,7 @@ var require_cjs = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
+          checkIfStringIsInArray: () => checkIfStringIsInArray,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           filterArrays: () => filterArrays,
@@ -442,6 +443,11 @@ var require_cjs = __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({
@@ -494,14 +500,15 @@ var require_cjs = __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) {
@@ -511,11 +518,11 @@ var require_cjs = __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)}`;
         };
@@ -1660,6 +1667,7 @@ var require_cjs = __commonJS({
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
           checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          extractComponentKeyFromKey: () => extractComponentKeyFromKey,
           getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -1716,11 +1724,14 @@ var require_cjs = __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;
@@ -1840,7 +1851,7 @@ var require_cjs = __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])) {
@@ -2384,6 +2395,7 @@ var require_array = __commonJS({
       addItemAfterEveryElement: () => addItemAfterEveryElement,
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       arraysEqual: () => arraysEqual,
+      checkIfStringIsInArray: () => checkIfStringIsInArray,
       cutArrayAfterValue: () => cutArrayAfterValue,
       cutArrayBeforeValue: () => cutArrayBeforeValue,
       filterArrays: () => filterArrays,
@@ -2503,6 +2515,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;
+    };
   }
 });
 
@@ -2557,14 +2574,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) {
@@ -2574,11 +2592,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)}`;
     };
@@ -3735,6 +3753,7 @@ var require_component = __commonJS({
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
       checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      extractComponentKeyFromKey: () => extractComponentKeyFromKey,
       getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -3791,11 +3810,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;
@@ -3915,7 +3937,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])) {

package/dist/cjs/system/svg.js

@@ -336,6 +336,7 @@ var require_array = __commonJS({
       addItemAfterEveryElement: () => addItemAfterEveryElement,
       arrayContainsOtherArray: () => arrayContainsOtherArray,
       arraysEqual: () => arraysEqual,
+      checkIfStringIsInArray: () => checkIfStringIsInArray,
       cutArrayAfterValue: () => cutArrayAfterValue,
       cutArrayBeforeValue: () => cutArrayBeforeValue,
       filterArrays: () => filterArrays,
@@ -455,6 +456,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;
+    };
   }
 });
 
@@ -509,14 +515,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) {
@@ -526,11 +533,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)}`;
     };
@@ -1687,6 +1694,7 @@ var require_component = __commonJS({
       checkIfKeyIsProperty: () => checkIfKeyIsProperty,
       checkIfSugar: () => checkIfSugar,
       extendizeByKey: () => extendizeByKey,
+      extractComponentKeyFromKey: () => extractComponentKeyFromKey,
       getCapitalCaseKeys: () => getCapitalCaseKeys,
       getChildrenComponentsByKey: () => getChildrenComponentsByKey,
       getExtendsInElement: () => getExtendsInElement,
@@ -1743,11 +1751,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;
@@ -1867,7 +1878,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/theme.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])) {