@symbo.ls/scratch 2.11.475 → 2.11.500

package/dist/cjs/system/color.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;
@@ -1721,6 +1732,22 @@ var require_component = __commonJS({
           tag,
           props: { ...element }
         });
+        if (newElem.props.data) {
+          newElem.data = newElem.props.data;
+          delete newElem.props.data;
+        }
+        if (newElem.props.state) {
+          newElem.state = newElem.props.state;
+          delete newElem.props.state;
+        }
+        if (newElem.props.attr) {
+          newElem.attr = newElem.props.attr;
+          delete newElem.props.attr;
+        }
+        if (newElem.props.if) {
+          newElem.if = newElem.props.if;
+          delete newElem.props.if;
+        }
         if (childExtends)
           newElem.childExtend = childExtends;
         return newElem;
@@ -1831,7 +1858,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 +2253,7 @@ var require_cjs3 = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
+          checkIfStringIsInArray: () => checkIfStringIsInArray,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           filterArrays: () => filterArrays,
@@ -2345,6 +2373,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 +2430,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 +2448,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 +3597,7 @@ var require_cjs3 = __commonJS({
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
           checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          extractComponentKeyFromKey: () => extractComponentKeyFromKey,
           getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -3619,11 +3654,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 +3781,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])) {
@@ -4037,6 +4075,7 @@ __export(defaultConfig_exports, {
   ANIMATION: () => ANIMATION,
   BREAKPOINTS: () => BREAKPOINTS,
   CASES: () => CASES,
+  CLASS: () => CLASS,
   COLOR: () => COLOR,
   DEVICES: () => DEVICES,
   DOCUMENT: () => DOCUMENT,
@@ -4226,6 +4265,10 @@ var TEMPLATES = {};
 var defaultProps4 = {};
 var GRID = defaultProps4;
 
+// src/defaultConfig/class.js
+var defaultProps5 = {};
+var CLASS = defaultProps5;
+
 // src/defaultConfig/index.js
 var RESET = {};
 

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;
@@ -1721,6 +1732,22 @@ var require_component = __commonJS({
           tag,
           props: { ...element }
         });
+        if (newElem.props.data) {
+          newElem.data = newElem.props.data;
+          delete newElem.props.data;
+        }
+        if (newElem.props.state) {
+          newElem.state = newElem.props.state;
+          delete newElem.props.state;
+        }
+        if (newElem.props.attr) {
+          newElem.attr = newElem.props.attr;
+          delete newElem.props.attr;
+        }
+        if (newElem.props.if) {
+          newElem.if = newElem.props.if;
+          delete newElem.props.if;
+        }
         if (childExtends)
           newElem.childExtend = childExtends;
         return newElem;
@@ -1831,7 +1858,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 +2253,7 @@ var require_cjs3 = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
+          checkIfStringIsInArray: () => checkIfStringIsInArray,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           filterArrays: () => filterArrays,
@@ -2345,6 +2373,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 +2430,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 +2448,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 +3597,7 @@ var require_cjs3 = __commonJS({
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
           checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          extractComponentKeyFromKey: () => extractComponentKeyFromKey,
           getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -3619,11 +3654,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 +3781,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])) {
@@ -4034,6 +4072,7 @@ __export(defaultConfig_exports, {
   ANIMATION: () => ANIMATION,
   BREAKPOINTS: () => BREAKPOINTS,
   CASES: () => CASES,
+  CLASS: () => CLASS,
   COLOR: () => COLOR,
   DEVICES: () => DEVICES,
   DOCUMENT: () => DOCUMENT,
@@ -4223,6 +4262,10 @@ var TEMPLATES = {};
 var defaultProps4 = {};
 var GRID = defaultProps4;
 
+// src/defaultConfig/class.js
+var defaultProps5 = {};
+var CLASS = defaultProps5;
+
 // src/defaultConfig/index.js
 var RESET = {};
 

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;
@@ -1721,6 +1732,22 @@ var require_component = __commonJS({
           tag,
           props: { ...element }
         });
+        if (newElem.props.data) {
+          newElem.data = newElem.props.data;
+          delete newElem.props.data;
+        }
+        if (newElem.props.state) {
+          newElem.state = newElem.props.state;
+          delete newElem.props.state;
+        }
+        if (newElem.props.attr) {
+          newElem.attr = newElem.props.attr;
+          delete newElem.props.attr;
+        }
+        if (newElem.props.if) {
+          newElem.if = newElem.props.if;
+          delete newElem.props.if;
+        }
         if (childExtends)
           newElem.childExtend = childExtends;
         return newElem;
@@ -1831,7 +1858,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 +2217,7 @@ var require_cjs2 = __commonJS({
           addItemAfterEveryElement: () => addItemAfterEveryElement,
           arrayContainsOtherArray: () => arrayContainsOtherArray,
           arraysEqual: () => arraysEqual,
+          checkIfStringIsInArray: () => checkIfStringIsInArray,
           cutArrayAfterValue: () => cutArrayAfterValue,
           cutArrayBeforeValue: () => cutArrayBeforeValue,
           filterArrays: () => filterArrays,
@@ -2309,6 +2337,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 +2394,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 +2412,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 +3561,7 @@ var require_cjs2 = __commonJS({
           checkIfKeyIsProperty: () => checkIfKeyIsProperty,
           checkIfSugar: () => checkIfSugar,
           extendizeByKey: () => extendizeByKey,
+          extractComponentKeyFromKey: () => extractComponentKeyFromKey,
           getCapitalCaseKeys: () => getCapitalCaseKeys,
           getChildrenComponentsByKey: () => getChildrenComponentsByKey,
           getExtendsInElement: () => getExtendsInElement,
@@ -3583,11 +3618,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 +3745,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])) {
@@ -4037,6 +4075,7 @@ __export(defaultConfig_exports, {
   ANIMATION: () => ANIMATION,
   BREAKPOINTS: () => BREAKPOINTS,
   CASES: () => CASES,
+  CLASS: () => CLASS,
   COLOR: () => COLOR,
   DEVICES: () => DEVICES,
   DOCUMENT: () => DOCUMENT,
@@ -4226,6 +4265,10 @@ var TEMPLATES = {};
 var defaultProps4 = {};
 var GRID = defaultProps4;
 
+// src/defaultConfig/class.js
+var defaultProps5 = {};
+var CLASS = defaultProps5;
+
 // src/defaultConfig/index.js
 var RESET = {};