npm - @symbo.ls/create - Versions diffs - 2.11.389 → 2.11.394 - Mend

@symbo.ls/create 2.11.389 → 2.11.394

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

Files changed (4) hide show

package/dist/cjs/bundle/index.js +784 -837
package/dist/cjs/index.js +5 -2
package/package.json +2 -2
package/src/index.js +6 -3

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

@@ -220,7 +220,7 @@ var require_types = __commonJS({
       isObject: () => isObject12,
       isObjectLike: () => isObjectLike4,
       isString: () => isString18,
-      isUndefined: () => isUndefined15
+      isUndefined: () => isUndefined17
     });
     module2.exports = __toCommonJS12(types_exports);
     var import_node = require_node();
@@ -244,7 +244,7 @@ var require_types = __commonJS({
     var isDefined2 = (arg) => {
       return isObject12(arg) || isObjectLike4(arg) || isString18(arg) || isNumber(arg) || isFunction4(arg) || isArray7(arg) || isObjectLike4(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
     };
-    var isUndefined15 = (arg) => {
+    var isUndefined17 = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
@@ -535,7 +535,7 @@ var require_object = __commonJS({
       isEqualDeep: () => isEqualDeep2,
       makeObjectWithoutPrototype: () => makeObjectWithoutPrototype,
       map: () => map2,
-      merge: () => merge7,
+      merge: () => merge6,
       mergeArrayExclude: () => mergeArrayExclude,
       mergeIfExisted: () => mergeIfExisted,
       objectToString: () => objectToString,
@@ -565,7 +565,7 @@ var require_object = __commonJS({
         obj[e] = exec5(extention[e], element);
       }
     };
-    var merge7 = (element, obj, excludeFrom = []) => {
+    var merge6 = (element, obj, excludeFrom = []) => {
       for (const e in obj) {
         const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
         if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
@@ -1146,20 +1146,21 @@ var require_cookie = __commonJS({
     });
     module2.exports = __toCommonJS12(cookie_exports);
     var import_types = require_types();
+    var import_utils43 = require_cjs();
     var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
     var setCookie = (cname, cvalue, exdays = 365) => {
-      if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+      if ((0, import_types.isUndefined)(import_utils43.document) || (0, import_types.isUndefined)(import_utils43.document.cookie))
         return;
       const d = /* @__PURE__ */ new Date();
       d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1e3);
       const expires = `expires=${d.toUTCString()}`;
-      document.cookie = `${cname}=${cvalue};${expires};path=/`;
+      import_utils43.document.cookie = `${cname}=${cvalue};${expires};path=/`;
     };
     var getCookie = (cname) => {
-      if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+      if ((0, import_types.isUndefined)(import_utils43.document) || (0, import_types.isUndefined)(import_utils43.document.cookie))
         return;
       const name = `${cname}=`;
-      const decodedCookie = decodeURIComponent(document.cookie);
+      const decodedCookie = decodeURIComponent(import_utils43.document.cookie);
       const ca = decodedCookie.split(";");
       for (let i2 = 0; i2 < ca.length; i2++) {
         let c = ca[i2];
@@ -2535,20 +2536,21 @@ var require_cjs2 = __commonJS({
         });
         module22.exports = __toCommonJS32(cookie_exports);
         var import_types = require_types2();
+        var import_utils292 = require_cjs22();
         var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
         var setCookie = (cname, cvalue, exdays = 365) => {
-          if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+          if ((0, import_types.isUndefined)(import_utils292.document) || (0, import_types.isUndefined)(import_utils292.document.cookie))
             return;
           const d = /* @__PURE__ */ new Date();
           d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1e3);
           const expires = `expires=${d.toUTCString()}`;
-          document.cookie = `${cname}=${cvalue};${expires};path=/`;
+          import_utils292.document.cookie = `${cname}=${cvalue};${expires};path=/`;
         };
         var getCookie = (cname) => {
-          if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+          if ((0, import_types.isUndefined)(import_utils292.document) || (0, import_types.isUndefined)(import_utils292.document.cookie))
             return;
           const name = `${cname}=`;
-          const decodedCookie = decodeURIComponent(document.cookie);
+          const decodedCookie = decodeURIComponent(import_utils292.document.cookie);
           const ca = decodedCookie.split(";");
           for (let i2 = 0; i2 < ca.length; i2++) {
             let c = ca[i2];
@@ -2936,7 +2938,7 @@ var require_cjs2 = __commonJS({
       return unit === "em" || unit === "rem" || unit === "vw" || unit === "vh" || unit === "vmax" || unit === "vmin";
     };
     var import_globals2 = __toESM6(require_cjs14(), 1);
-    var import_utils44 = __toESM6(require_cjs22(), 1);
+    var import_utils43 = __toESM6(require_cjs22(), 1);
     var ENV2 = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -3068,11 +3070,11 @@ var require_cjs2 = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils44.isString)(rgb) && rgb.includes("rgb"))
+      if ((0, import_utils43.isString)(rgb) && rgb.includes("rgb"))
         rgb = colorStringToRgbaArray(rgb).join(", ");
-      if ((0, import_utils44.isString)(rgb))
+      if ((0, import_utils43.isString)(rgb))
         rgb = rgb.split(",").map((v) => parseFloat(v.trim()));
-      if ((0, import_utils44.isNumber)(tone))
+      if ((0, import_utils43.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -4257,20 +4259,21 @@ var require_cjs2 = __commonJS({
         });
         module22.exports = __toCommonJS222(cookie_exports);
         var import_types = require_types22();
+        var import_utils322 = require_cjs32();
         var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
         var setCookie = (cname, cvalue, exdays = 365) => {
-          if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+          if ((0, import_types.isUndefined)(import_utils322.document) || (0, import_types.isUndefined)(import_utils322.document.cookie))
             return;
           const d = /* @__PURE__ */ new Date();
           d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1e3);
           const expires = `expires=${d.toUTCString()}`;
-          document.cookie = `${cname}=${cvalue};${expires};path=/`;
+          import_utils322.document.cookie = `${cname}=${cvalue};${expires};path=/`;
         };
         var getCookie = (cname) => {
-          if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+          if ((0, import_types.isUndefined)(import_utils322.document) || (0, import_types.isUndefined)(import_utils322.document.cookie))
             return;
           const name = `${cname}=`;
-          const decodedCookie = decodeURIComponent(document.cookie);
+          const decodedCookie = decodeURIComponent(import_utils322.document.cookie);
           const ca = decodedCookie.split(";");
           for (let i2 = 0; i2 < ca.length; i2++) {
             let c = ca[i2];
@@ -4490,6 +4493,7 @@ var require_cjs2 = __commonJS({
       findClosestNumber: () => findClosestNumber,
       findClosestNumberInFactory: () => findClosestNumberInFactory,
       formatDate: () => formatDate,
+      loadJavascript: () => loadJavascript,
       loadJavascriptFile: () => loadJavascriptFile,
       removeChars: () => removeChars,
       toCamelCase: () => toCamelCase,
@@ -4561,6 +4565,17 @@ var require_cjs2 = __commonJS({
         }
       });
     };
+    var loadJavascript = (body, async = true, doc = document, type = "text/javascript") => {
+      try {
+        const scriptEle = doc.createElement("script");
+        scriptEle.type = type;
+        scriptEle.async = async;
+        scriptEle.innerHTML = body;
+        doc.body.appendChild(scriptEle);
+      } catch (error) {
+        console.warn(error);
+      }
+    };
     var copyStringToClipboard = (str) => {
       const el = document.createElement("textarea");
       el.value = str;
@@ -4587,6 +4602,8 @@ var require_cjs2 = __commonJS({
     );
     var toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
     var toDescriptionCase = (str = "") => {
+      if (typeof str !== "string")
+        return;
       const result = str.replace(/([A-Z])/g, " $1");
       return result.charAt(0).toUpperCase() + result.slice(1);
     };
@@ -4600,7 +4617,7 @@ var require_cjs2 = __commonJS({
       if ((0, import_utils210.isNumber)(val))
         return [val];
     };
-    var import_utils45 = __toESM6(require_cjs22(), 1);
+    var import_utils44 = __toESM6(require_cjs22(), 1);
     var defaultConfig_exports = {};
     __export12(defaultConfig_exports, {
       ANIMATION: () => ANIMATION,
@@ -4763,25 +4780,25 @@ var require_cjs2 = __commonJS({
       CSS_VARS,
       ...defaultConfig_exports
     };
-    var cachedConfig = (0, import_utils45.deepClone)(CONFIG4);
+    var cachedConfig = (0, import_utils44.deepClone)(CONFIG4);
     var FACTORY = {
       active: "0",
       0: CONFIG4
     };
     var activateConfig = (def) => {
-      if ((0, import_utils45.isDefined)(def)) {
+      if ((0, import_utils44.isDefined)(def)) {
         FACTORY.active = def;
       }
       return FACTORY[def || FACTORY.active];
     };
     var getActiveConfig4 = (def) => {
-      return FACTORY[def || FACTORY.active];
+      return FACTORY[def || FACTORY.active] || CONFIG4;
     };
     var setActiveConfig = (newConfig) => {
-      if (!(0, import_utils45.isObject)(newConfig))
+      if (!(0, import_utils44.isObject)(newConfig))
         return;
       FACTORY.active = "1";
-      FACTORY["1"] = (0, import_utils45.deepMerge)(newConfig, (0, import_utils45.deepClone)(cachedConfig));
+      FACTORY["1"] = (0, import_utils44.deepMerge)(newConfig, (0, import_utils44.deepClone)(cachedConfig));
       return newConfig;
     };
     var numToLetterMap = {
@@ -6429,7 +6446,7 @@ var require_cjs3 = __commonJS({
           isObject: () => isObject32,
           isObjectLike: () => isObjectLike4,
           isString: () => isString22,
-          isUndefined: () => isUndefined15
+          isUndefined: () => isUndefined17
         });
         module22.exports = __toCommonJS22(types_exports);
         var import_node = require_node3();
@@ -6453,7 +6470,7 @@ var require_cjs3 = __commonJS({
         var isDefined2 = (arg) => {
           return isObject32(arg) || isObjectLike4(arg) || isString22(arg) || isNumber2(arg) || isFunction4(arg) || isArray32(arg) || isObjectLike4(arg) || isBoolean(arg) || isDate(arg) || isNull(arg);
         };
-        var isUndefined15 = (arg) => {
+        var isUndefined17 = (arg) => {
           return arg === void 0;
         };
         var TYPES = {
@@ -6738,7 +6755,7 @@ var require_cjs3 = __commonJS({
           isEqualDeep: () => isEqualDeep2,
           makeObjectWithoutPrototype: () => makeObjectWithoutPrototype,
           map: () => map2,
-          merge: () => merge7,
+          merge: () => merge6,
           mergeArrayExclude: () => mergeArrayExclude,
           mergeIfExisted: () => mergeIfExisted,
           objectToString: () => objectToString,
@@ -6768,7 +6785,7 @@ var require_cjs3 = __commonJS({
             obj[e] = exec5(extention[e], element);
           }
         };
-        var merge7 = (element, obj, excludeFrom = []) => {
+        var merge6 = (element, obj, excludeFrom = []) => {
           for (const e in obj) {
             const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(obj, e);
             if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
@@ -7343,20 +7360,21 @@ var require_cjs3 = __commonJS({
         });
         module22.exports = __toCommonJS22(cookie_exports);
         var import_types = require_types2();
+        var import_utils310 = require_cjs14();
         var isMobile = (() => typeof navigator === "undefined" ? false : /Mobi/.test(navigator.userAgent))();
         var setCookie = (cname, cvalue, exdays = 365) => {
-          if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+          if ((0, import_types.isUndefined)(import_utils310.document) || (0, import_types.isUndefined)(import_utils310.document.cookie))
             return;
           const d = /* @__PURE__ */ new Date();
           d.setTime(d.getTime() + exdays * 24 * 60 * 60 * 1e3);
           const expires = `expires=${d.toUTCString()}`;
-          document.cookie = `${cname}=${cvalue};${expires};path=/`;
+          import_utils310.document.cookie = `${cname}=${cvalue};${expires};path=/`;
         };
         var getCookie = (cname) => {
-          if ((0, import_types.isUndefined)(document) || (0, import_types.isUndefined)(document.cookie))
+          if ((0, import_types.isUndefined)(import_utils310.document) || (0, import_types.isUndefined)(import_utils310.document.cookie))
             return;
           const name = `${cname}=`;
-          const decodedCookie = decodeURIComponent(document.cookie);
+          const decodedCookie = decodeURIComponent(import_utils310.document.cookie);
           const ca = decodedCookie.split(";");
           for (let i2 = 0; i2 < ca.length; i2++) {
             let c = ca[i2];
@@ -7576,6 +7594,7 @@ var require_cjs3 = __commonJS({
       findClosestNumber: () => findClosestNumber,
       findClosestNumberInFactory: () => findClosestNumberInFactory,
       formatDate: () => formatDate,
+      loadJavascript: () => loadJavascript,
       loadJavascriptFile: () => loadJavascriptFile,
       removeChars: () => removeChars,
       toCamelCase: () => toCamelCase,
@@ -7595,15 +7614,15 @@ var require_cjs3 = __commonJS({
         document.exitFullscreen();
       }
     };
-    var import_utils44 = __toESM6(require_cjs14(), 1);
+    var import_utils43 = __toESM6(require_cjs14(), 1);
     var findClosestNumber = (number, arr) => {
-      return ((0, import_utils44.isArray)(arr) ? arr : Object.values(arr)).reduce((prev3, curr) => {
+      return ((0, import_utils43.isArray)(arr) ? arr : Object.values(arr)).reduce((prev3, curr) => {
         return Math.abs(curr - number) < Math.abs(prev3 - number) ? curr : prev3;
       });
     };
     var findClosestNumberInFactory = (val, factory) => {
       val = parseFloat(val);
-      if ((0, import_utils44.isObject)(factory))
+      if ((0, import_utils43.isObject)(factory))
         factory = Object.values(factory);
       return findClosestNumber(val, factory);
     };
@@ -7647,6 +7666,17 @@ var require_cjs3 = __commonJS({
         }
       });
     };
+    var loadJavascript = (body, async = true, doc = document, type = "text/javascript") => {
+      try {
+        const scriptEle = doc.createElement("script");
+        scriptEle.type = type;
+        scriptEle.async = async;
+        scriptEle.innerHTML = body;
+        doc.body.appendChild(scriptEle);
+      } catch (error) {
+        console.warn(error);
+      }
+    };
     var copyStringToClipboard = (str) => {
       const el = document.createElement("textarea");
       el.value = str;
@@ -7673,6 +7703,8 @@ var require_cjs3 = __commonJS({
     );
     var toDashCase = (val) => val.replace(/[^a-zA-Z0-9]/g, " ").trim().toLowerCase().replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
     var toDescriptionCase = (str = "") => {
+      if (typeof str !== "string")
+        return;
       const result = str.replace(/([A-Z])/g, " $1");
       return result.charAt(0).toUpperCase() + result.slice(1);
     };
@@ -9182,7 +9214,7 @@ var init_init = __esm({
       useSvgSprite: true
     };
     init = (config, options = SET_OPTIONS) => {
-      const emotion3 = options.emotion || emotion;
+      const emotion4 = options.emotion || emotion;
       const resultConfig = mergeWithLocalFile(config || {});
       const conf = (0, import_scratch.set)({
         verbose: options.verbose,
@@ -9204,11 +9236,11 @@ var init_init = __esm({
       const useIconSprite = conf.useIconSprite;
       const hasIcons = config.icons || config.ICONS;
       if (useFontImport)
-        emotion3.injectGlobal(FontFace);
+        emotion4.injectGlobal(FontFace);
       if (useVariable)
-        emotion3.injectGlobal({ ":root": conf.CSS_VARS });
+        emotion4.injectGlobal({ ":root": conf.CSS_VARS });
       if (useReset)
-        emotion3.injectGlobal(conf.RESET);
+        emotion4.injectGlobal(conf.RESET);
       if (hasSvgs)
         (0, import_scratch.appendSVGSprite)(hasSvgs, { document: options.document });
       else if (useSvgSprite)
@@ -9223,22 +9255,22 @@ var init_init = __esm({
       emotion
     };
     reInit = (config, RC_FILE, options = UPDATE_OPTIONS) => {
-      const emotion3 = options.emotion || emotion;
+      const emotion4 = options.emotion || emotion;
       const resultConfig = mergeWithLocalFile(config || {}, RC_FILE);
       const conf = (0, import_scratch.set)({
         verbose: false,
         ...resultConfig
       });
-      emotion3.injectGlobal({ ":root": conf.CSS_VARS });
-      emotion3.injectGlobal(conf.RESET);
+      emotion4.injectGlobal({ ":root": conf.CSS_VARS });
+      emotion4.injectGlobal(conf.RESET);
     };
     applyCSS = (styles, options = UPDATE_OPTIONS) => {
-      const emotion3 = options.emotion || emotion;
-      emotion3.injectGlobal(styles);
+      const emotion4 = options.emotion || emotion;
+      emotion4.injectGlobal(styles);
     };
     updateVars = (config, options = UPDATE_OPTIONS) => {
-      const emotion3 = options.emotion || emotion;
-      emotion3.injectGlobal({ ":root": config.CSS_VARS });
+      const emotion4 = options.emotion || emotion;
+      emotion4.injectGlobal({ ":root": config.CSS_VARS });
     };
     setClass = (props2, options = UPDATE_OPTIONS) => {
     };
@@ -9372,13 +9404,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS12(on_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var applyEvent = (param, element, state, context, options) => {
-      const binded = param.bind(context == null ? void 0 : context.window);
-      return binded.call((context == null ? void 0 : context.window) || window, element, state || element.state, context || element.context, options);
+      return param.call((context == null ? void 0 : context.window) || window, element, state || element.state, context || element.context, options);
     };
     var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils44.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils43.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -9387,7 +9418,7 @@ var require_on = __commonJS({
       return param.call((context == null ? void 0 : context.window) || window, updatedObj, element, state || element.state, context || element.context, options);
     };
     var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils44.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils43.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -9398,7 +9429,7 @@ var require_on = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "beforeStateUpdate" || param === "stateUpdate" || param === "beforeUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils44.isFunction)(appliedFunction)) {
+        if ((0, import_utils43.isFunction)(appliedFunction)) {
           node2.addEventListener(param, (event) => {
             const { state, context } = element;
             appliedFunction.call((context == null ? void 0 : context.window) || window, event, element, state, context, options);
@@ -9436,9 +9467,9 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS12(can_exports);
     var import_report = require_cjs4();
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var canRenderTag = (tag) => {
-      return (0, import_utils44.isValidHtmlTag)(tag || "div") || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils43.isValidHtmlTag)(tag || "div") || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
@@ -9499,8 +9530,8 @@ var require_cjs6 = __commonJS({
     });
     module2.exports = __toCommonJS12(router_exports3);
     var import_event = require_cjs5();
-    var import_utils44 = require_cjs();
-    var getActiveRoute = (level = 0, route = import_utils44.window.location.pathname) => {
+    var import_utils43 = require_cjs();
+    var getActiveRoute = (level = 0, route = import_utils43.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -9514,7 +9545,7 @@ var require_cjs6 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils44.document && import_utils44.document.documentElement,
+      scrollNode: import_utils43.document && import_utils43.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -9522,6 +9553,8 @@ var require_cjs6 = __commonJS({
       scrollToOptions: { behavior: "smooth" }
     };
     var router2 = (path, element, state = {}, passedOptions = {}) => {
+      const win = element.context.window || import_utils43.window;
+      const doc = element.context.document || import_utils43.document;
       const options = { ...defaultOptions, ...element.context.routerOptions, ...passedOptions };
       lastLevel = options.lastLevel;
       const contentElementKey = options.contentElementKey;
@@ -9530,7 +9563,7 @@ var require_cjs6 = __commonJS({
       const route = getActiveRoute(options.level, pathname);
       const content = element.routes[route || "/"] || element.routes["/*"];
       const scrollNode = options.scrollToNode ? rootNode : options.scrollNode;
-      const hashChanged = hash2 && hash2 !== import_utils44.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== win.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content || element.state.root.debugging) {
@@ -9538,7 +9571,7 @@ var require_cjs6 = __commonJS({
         return;
       }
       if (options.pushState) {
-        import_utils44.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        win.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -9567,7 +9600,7 @@ var require_cjs6 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils44.document.getElementById(hash2);
+        const activeNode = doc.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -10669,144 +10702,17 @@ var init_src = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/emotion/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js
-function insertWithoutScoping2(cache2, serialized) {
-  if (cache2.inserted[serialized.name] === void 0) {
-    return cache2.insert("", serialized, cache2.sheet, true);
-  }
-}
-function merge2(registered, css, className) {
-  var registeredStyles = [];
-  var rawClassName = getRegisteredStyles(registered, registeredStyles, className);
-  if (registeredStyles.length < 2) {
-    return className;
-  }
-  return rawClassName + css(registeredStyles);
-}
-var createEmotion4, classnames3;
-var init_emotion_css_create_instance_esm2 = __esm({
-  "../../node_modules/@symbo.ls/emotion/node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js"() {
-    init_emotion_cache_browser_esm();
-    init_emotion_serialize_browser_esm();
-    init_emotion_utils_browser_esm();
-    createEmotion4 = function createEmotion5(options) {
-      var cache2 = createCache(options);
-      cache2.sheet.speedy = function(value2) {
-        if (this.ctr !== 0) {
-          throw new Error("speedy must be changed before any rules are inserted");
-        }
-        this.isSpeedy = value2;
-      };
-      cache2.compat = true;
-      var css = function css2() {
-        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-          args[_key] = arguments[_key];
-        }
-        var serialized = serializeStyles(args, cache2.registered, void 0);
-        insertStyles(cache2, serialized, false);
-        return cache2.key + "-" + serialized.name;
-      };
-      var keyframes = function keyframes2() {
-        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          args[_key2] = arguments[_key2];
-        }
-        var serialized = serializeStyles(args, cache2.registered);
-        var animation = "animation-" + serialized.name;
-        insertWithoutScoping2(cache2, {
-          name: serialized.name,
-          styles: "@keyframes " + animation + "{" + serialized.styles + "}"
-        });
-        return animation;
-      };
-      var injectGlobal = function injectGlobal2() {
-        for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-          args[_key3] = arguments[_key3];
-        }
-        var serialized = serializeStyles(args, cache2.registered);
-        insertWithoutScoping2(cache2, serialized);
-      };
-      var cx = function cx2() {
-        for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-          args[_key4] = arguments[_key4];
-        }
-        return merge2(cache2.registered, css, classnames3(args));
-      };
-      return {
-        css,
-        cx,
-        injectGlobal,
-        keyframes,
-        hydrate: function hydrate(ids) {
-          ids.forEach(function(key) {
-            cache2.inserted[key] = true;
-          });
-        },
-        flush: function flush() {
-          cache2.registered = {};
-          cache2.inserted = {};
-          cache2.sheet.flush();
-        },
-        // $FlowFixMe
-        sheet: cache2.sheet,
-        cache: cache2,
-        getRegisteredStyles: getRegisteredStyles.bind(null, cache2.registered),
-        merge: merge2.bind(null, cache2.registered, css)
-      };
-    };
-    classnames3 = function classnames4(args) {
-      var cls = "";
-      for (var i2 = 0; i2 < args.length; i2++) {
-        var arg = args[i2];
-        if (arg == null)
-          continue;
-        var toAdd = void 0;
-        switch (typeof arg) {
-          case "boolean":
-            break;
-          case "object": {
-            if (Array.isArray(arg)) {
-              toAdd = classnames4(arg);
-            } else {
-              toAdd = "";
-              for (var k in arg) {
-                if (arg[k] && k) {
-                  toAdd && (toAdd += " ");
-                  toAdd += k;
-                }
-              }
-            }
-            break;
-          }
-          default: {
-            toAdd = arg;
-          }
-        }
-        if (toAdd) {
-          cls && (cls += " ");
-          cls += toAdd;
-        }
-      }
-      return cls;
-    };
-  }
-});
-// ../../node_modules/@symbo.ls/emotion/index.js
-var emotion_exports = {};
-__export(emotion_exports, {
-  createEmotion: () => createEmotion6,
-  emotion: () => emotion2
-});
-var createEmotion6, emotion2;
+// ../smbls/node_modules/@symbo.ls/emotion/index.js
+var createEmotion4, emotion2;
 var init_emotion2 = __esm({
-  "../../node_modules/@symbo.ls/emotion/index.js"() {
+  "../smbls/node_modules/@symbo.ls/emotion/index.js"() {
     "use strict";
-    init_emotion_css_create_instance_esm2();
-    createEmotion6 = (key = "smbls", container) => {
+    init_emotion_css_create_instance_esm();
+    createEmotion4 = (key = "smbls", container) => {
       const cleanKey = key.replaceAll(/\./g, "-");
-      return createEmotion4({ key: cleanKey, container });
+      return createEmotion({ key: cleanKey, container });
     };
-    emotion2 = createEmotion6();
+    emotion2 = createEmotion4();
   }
 });
@@ -10855,7 +10761,7 @@ var init_utilImports = __esm({
 // dist/cjs/router.js
 var router_exports = {};
-var __defProp3, __getOwnPropDesc3, __getOwnPropNames3, __hasOwnProp3, __export3, __copyProps3, __toCommonJS3, router_exports2, import_router, import_utils6, import_uikit, DEFAULT_ROUTING_OPTIONS, initRouter, popStateFired, popStateRouter, injectRouterInLinkComponent;
+var __defProp3, __getOwnPropDesc3, __getOwnPropNames3, __hasOwnProp3, __export3, __copyProps3, __toCommonJS3, router_exports2, import_router, import_utils5, import_uikit, DEFAULT_ROUTING_OPTIONS, initRouter, popStateFired, popStateRouter, injectRouterInLinkComponent;
 var init_router = __esm({
   "dist/cjs/router.js"() {
     "use strict";
@@ -10884,7 +10790,7 @@ var init_router = __esm({
     });
     module.exports = __toCommonJS3(router_exports2);
     import_router = require_cjs6();
-    import_utils6 = require_cjs();
+    import_utils5 = require_cjs();
     import_uikit = (init_uikit(), __toCommonJS(uikit_exports));
     DEFAULT_ROUTING_OPTIONS = {
       initRouter: true,
@@ -10897,16 +10803,16 @@ var init_router = __esm({
       else if (options.router === true)
         options.router = DEFAULT_ROUTING_OPTIONS;
       else
-        (0, import_utils6.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS);
+        (0, import_utils5.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS);
       const routerOptions = options.router;
       const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router.router;
       const onRouterRenderDefault = (el, s) => {
-        const { pathname, hash: hash2 } = import_utils6.window.location;
+        const { pathname, hash: hash2 } = import_utils5.window.location;
         const url2 = pathname + hash2;
         if (el.routes)
           router2(url2, el, {}, { initialRender: true });
       };
-      const hasRenderRouter = element.on && !(0, import_utils6.isUndefined)(element.on.renderRouter);
+      const hasRenderRouter = element.on && !(0, import_utils5.isUndefined)(element.on.renderRouter);
       if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
         if (element.on) {
           element.on.renderRouter = onRouterRenderDefault;
@@ -10927,15 +10833,15 @@ var init_router = __esm({
       if (!routerOptions.popState)
         return;
       const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router.router;
-      import_utils6.window.onpopstate = (e) => {
-        const { pathname, hash: hash2 } = import_utils6.window.location;
+      import_utils5.window.onpopstate = (e) => {
+        const { pathname, hash: hash2 } = import_utils5.window.location;
         const url2 = pathname + hash2;
         router2(url2, element, {}, { pushState: false, scrollToTop: false, level: 0 });
       };
     };
     injectRouterInLinkComponent = (routerOptions) => {
       if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-        return (0, import_utils6.deepMerge)(import_uikit.Link, import_uikit.RouterLink);
+        return (0, import_utils5.deepMerge)(import_uikit.Link, import_uikit.RouterLink);
       }
     };
   }
@@ -11085,7 +10991,7 @@ var require_cjs8 = __commonJS({
 // dist/cjs/ferchOnCreate.js
 var ferchOnCreate_exports = {};
-var __defProp4, __getOwnPropDesc4, __getOwnPropNames4, __hasOwnProp4, __export4, __copyProps4, __toCommonJS4, ferchOnCreate_exports2, import_utils7, import_fetch, fetchSync, fetchAsync;
+var __defProp4, __getOwnPropDesc4, __getOwnPropNames4, __hasOwnProp4, __export4, __copyProps4, __toCommonJS4, ferchOnCreate_exports2, import_utils6, import_fetch, fetchSync, fetchAsync;
 var init_ferchOnCreate = __esm({
   "dist/cjs/ferchOnCreate.js"() {
     "use strict";
@@ -11112,7 +11018,7 @@ var init_ferchOnCreate = __esm({
       fetchSync: () => fetchSync
     });
     module.exports = __toCommonJS4(ferchOnCreate_exports2);
-    import_utils7 = require_cjs();
+    import_utils6 = require_cjs();
     import_fetch = require_cjs8();
     fetchSync = async (key, options) => {
       if (key && options.editor) {
@@ -11129,10 +11035,10 @@ var init_ferchOnCreate = __esm({
         try {
           if (options.editor.async) {
             (0, import_fetch.fetchProjectAsync)(key, options, callback || ((data) => {
-              if ((0, import_utils7.isObject)(data.designsystem)) {
+              if ((0, import_utils6.isObject)(data.designsystem)) {
                 options.utils.init(data.designsystem);
               }
-              if ((0, import_utils7.isObject)(data.state)) {
+              if ((0, import_utils6.isObject)(data.state)) {
                 app.state.set(data.state);
               }
             }));
@@ -14774,7 +14680,7 @@ var init_client = __esm({
 // ../socket-ui/devFocus.js
 function returnStringExtend(extend) {
-  return (0, import_utils8.isString)(extend) ? extend : (0, import_utils8.isArray)(extend) ? extend.find((extItem) => (0, import_utils8.isString)(extItem)) : "";
+  return (0, import_utils7.isString)(extend) ? extend : (0, import_utils7.isArray)(extend) ? extend.find((extItem) => (0, import_utils7.isString)(extItem)) : "";
 }
 function getComponentKey(el) {
   if (!el)
@@ -14799,12 +14705,12 @@ function findComponent(el) {
   }
   return findComponent(el.parent);
 }
-var import_utils8, DevFocus, inspectOnKey;
+var import_utils7, DevFocus, inspectOnKey;
 var init_devFocus = __esm({
   "../socket-ui/devFocus.js"() {
     "use strict";
     init_uikit();
-    import_utils8 = __toESM(require_cjs());
+    import_utils7 = __toESM(require_cjs());
     init_client();
     DevFocus = {
       props: {
@@ -14846,7 +14752,7 @@ var init_devFocus = __esm({
         on: {
           init: ({ context }) => {
             const { components } = context;
-            if ((0, import_utils8.isObject)(components)) {
+            if ((0, import_utils7.isObject)(components)) {
               const { Content, ...rest } = components;
               for (const key in rest) {
                 if (uikit_exports[key])
@@ -14959,7 +14865,7 @@ __export(byld_socket_exports, {
   Sync: () => Sync,
   inspectOnKey: () => inspectOnKey
 });
-var import_router2, import_globals, import_utils9, isLocalhost, connectedToSymbols, onConnect, onDisconnect, onChange, NOTIF_COLORS, Notifications, Sync;
+var import_router2, import_globals, import_utils8, isLocalhost, connectedToSymbols, onConnect, onDisconnect, onChange, NOTIF_COLORS, Notifications, Sync;
 var init_byld_socket = __esm({
   "../socket-ui/byld-socket.js"() {
     "use strict";
@@ -14967,7 +14873,7 @@ var init_byld_socket = __esm({
     init_init();
     init_client();
     import_globals = __toESM(require_cjs7());
-    import_utils9 = __toESM(require_cjs());
+    import_utils8 = __toESM(require_cjs());
     init_devFocus();
     isLocalhost = import_globals.window && import_globals.window.location && import_globals.window.location.host.includes("local");
     connectedToSymbols = (clients, element, state) => {
@@ -15016,13 +14922,13 @@ var init_byld_socket = __esm({
           const { state, designSystem, pages, components, snippets } = obj.DATA;
           const { utils: utils4 } = ctx;
           if (pages) {
-            (0, import_utils9.overwriteDeep)(ctx.pages, pages);
+            (0, import_utils8.overwriteDeep)(ctx.pages, pages);
           }
           if (components) {
-            (0, import_utils9.overwriteDeep)(ctx.components, components);
+            (0, import_utils8.overwriteDeep)(ctx.components, components);
           }
           if (snippets) {
-            (0, import_utils9.overwriteDeep)(ctx.snippets, snippets);
+            (0, import_utils8.overwriteDeep)(ctx.snippets, snippets);
           }
           if (state) {
             const route = state.route;
@@ -15098,7 +15004,7 @@ var init_byld_socket = __esm({
 // dist/cjs/syncExtend.js
 var syncExtend_exports = {};
-var __defProp5, __getOwnPropDesc5, __getOwnPropNames5, __hasOwnProp5, __export5, __copyProps5, __toCommonJS5, syncExtend_exports2, import_socket_ui, import_utils10, applySyncDebug, applyInspectListener;
+var __defProp5, __getOwnPropDesc5, __getOwnPropNames5, __hasOwnProp5, __export5, __copyProps5, __toCommonJS5, syncExtend_exports2, import_socket_ui, import_utils9, applySyncDebug, applyInspectListener;
 var init_syncExtend = __esm({
   "dist/cjs/syncExtend.js"() {
     "use strict";
@@ -15126,15 +15032,15 @@ var init_syncExtend = __esm({
     });
     module.exports = __toCommonJS5(syncExtend_exports2);
     import_socket_ui = (init_byld_socket(), __toCommonJS(byld_socket_exports));
-    import_utils10 = require_cjs();
+    import_utils9 = require_cjs();
     applySyncDebug = (extend, options) => {
       const { editor } = options;
       if (!editor)
         return extend;
-      const inspect = (0, import_utils10.isUndefined)(editor.inspect) ? (0, import_utils10.isDevelopment)() : editor.inspect;
+      const inspect = (0, import_utils9.isUndefined)(editor.inspect) ? (0, import_utils9.isDevelopment)() : editor.inspect;
       if (inspect)
         extend.push(import_socket_ui.DevFocus);
-      const liveSync = (0, import_utils10.isUndefined)(editor.liveSync) ? (0, import_utils10.isDevelopment)() : editor.liveSync;
+      const liveSync = (0, import_utils9.isUndefined)(editor.liveSync) ? (0, import_utils9.isDevelopment)() : editor.liveSync;
       if (liveSync)
         extend.push(import_socket_ui.Sync);
       return extend;
@@ -15143,7 +15049,7 @@ var init_syncExtend = __esm({
       const { editor } = options;
       if (!editor)
         return;
-      const inspect = (0, import_utils10.isUndefined)(editor.inspect) ? (0, import_utils10.isDevelopment)() : editor.inspect;
+      const inspect = (0, import_utils9.isUndefined)(editor.inspect) ? (0, import_utils9.isDevelopment)() : editor.inspect;
       if (inspect)
         (0, import_socket_ui.inspectOnKey)(root, options);
     };
@@ -15151,11 +15057,11 @@ var init_syncExtend = __esm({
 });
 // node_modules/@symbo.ls/atoms/Block.js
-var import_utils11, import_scratch6, Block2, Hr2, Br2, Div2, Span2, Ul2, Gutter2;
+var import_utils10, import_scratch6, Block2, Hr2, Br2, Div2, Span2, Li2, Ul2, Gutter2;
 var init_Block2 = __esm({
   "node_modules/@symbo.ls/atoms/Block.js"() {
     "use strict";
-    import_utils11 = __toESM(require_cjs());
+    import_utils10 = __toESM(require_cjs());
     import_scratch6 = __toESM(require_cjs2());
     Block2 = {
       deps: {
@@ -15163,20 +15069,22 @@ var init_Block2 = __esm({
         getSpacingByKey: import_scratch6.getSpacingByKey,
         transfromGap: import_scratch6.transfromGap,
         transformSizeRatio: import_scratch6.transformSizeRatio,
-        transformSize: import_scratch6.transformSize
+        transformSize: import_scratch6.transformSize,
+        isUndefined: import_utils10.isUndefined,
+        isString: import_utils10.isString
       },
       class: {
-        boxSizing: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.boxSizing) ? { boxSizing: props2.boxSizing } : { boxSizing: "border-box" },
-        display: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.display) && {
+        boxSizing: ({ props: props2, deps }) => !deps.isUndefined(props2.boxSizing) ? { boxSizing: props2.boxSizing } : { boxSizing: "border-box" },
+        display: ({ props: props2, deps }) => !deps.isUndefined(props2.display) && {
           display: props2.display
         },
-        hide: ({ props: props2 }) => props2.hide && {
+        hide: ({ props: props2, deps }) => props2.hide && {
           display: "none !important"
         },
         width: ({ props: props2, deps }) => deps.transformSizeRatio("width", props2),
         height: ({ props: props2, deps }) => deps.transformSizeRatio("height", props2),
         boxSize: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.boxSize))
+          if (!deps.isString(props2.boxSize))
             return;
           const [height, width] = props2.boxSize.split(" ");
           return {
@@ -15187,7 +15095,7 @@ var init_Block2 = __esm({
         minWidth: ({ props: props2, deps }) => deps.transformSizeRatio("minWidth", props2),
         maxWidth: ({ props: props2, deps }) => deps.transformSizeRatio("maxWidth", props2),
         widthRange: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.widthRange))
+          if (!deps.isString(props2.widthRange))
             return;
           const [minWidth, maxWidth] = props2.widthRange.split(" ");
           return {
@@ -15198,7 +15106,7 @@ var init_Block2 = __esm({
         minHeight: ({ props: props2, deps }) => deps.transformSizeRatio("minHeight", props2),
         maxHeight: ({ props: props2, deps }) => deps.transformSizeRatio("maxHeight", props2),
         heightRange: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.heightRange))
+          if (!deps.isString(props2.heightRange))
             return;
           const [minHeight, maxHeight] = props2.heightRange.split(" ");
           return {
@@ -15207,7 +15115,7 @@ var init_Block2 = __esm({
           };
         },
         minSize: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.minSize))
+          if (!deps.isString(props2.minSize))
             return;
           const [minHeight, minWidth] = props2.minSize.split(" ");
           return {
@@ -15216,7 +15124,7 @@ var init_Block2 = __esm({
           };
         },
         maxSize: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.maxSize))
+          if (!deps.isString(props2.maxSize))
             return;
           const [maxHeight, maxWidth] = props2.maxSize.split(" ");
           return {
@@ -15224,17 +15132,17 @@ var init_Block2 = __esm({
             ...deps.transformSize("maxWidth", maxWidth || maxHeight)
           };
         },
-        direction: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.direction) && {
+        direction: ({ props: props2, deps }) => !deps.isUndefined(props2.direction) && {
           direction: props2.direction
         },
-        aspectRatio: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.aspectRatio) && {
+        aspectRatio: ({ props: props2, deps }) => !deps.isUndefined(props2.aspectRatio) && {
           aspectRatio: props2.aspectRatio
         },
         borderWidth: ({ props: props2, deps }) => deps.transformSizeRatio("borderWidth", props2),
         padding: ({ props: props2, deps }) => deps.transformSizeRatio("padding", props2),
         scrollPadding: ({ props: props2, deps }) => deps.transformSizeRatio("scrollPadding", props2),
         paddingInline: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.paddingInline))
+          if (!deps.isString(props2.paddingInline))
             return;
           const [paddingInlineStart, paddingInlineEnd] = props2.paddingInline.split(" ");
           return {
@@ -15243,7 +15151,7 @@ var init_Block2 = __esm({
           };
         },
         paddingBlock: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.paddingBlock))
+          if (!deps.isString(props2.paddingBlock))
             return;
           const [paddingBlockStart, paddingBlockEnd] = props2.paddingBlock.split(" ");
           return {
@@ -15257,7 +15165,7 @@ var init_Block2 = __esm({
         paddingBlockEnd: ({ props: props2, deps }) => deps.transformSizeRatio("paddingBlockEnd", props2),
         margin: ({ props: props2, deps }) => deps.transformSizeRatio("margin", props2),
         marginInline: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.marginInline))
+          if (!deps.isString(props2.marginInline))
             return;
           const [marginInlineStart, marginInlineEnd] = props2.marginInline.split(" ");
           return {
@@ -15266,7 +15174,7 @@ var init_Block2 = __esm({
           };
         },
         marginBlock: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.marginBlock))
+          if (!deps.isString(props2.marginBlock))
             return;
           const [marginBlockStart, marginBlockEnd] = props2.marginBlock.split(" ");
           return {
@@ -15278,41 +15186,44 @@ var init_Block2 = __esm({
         marginInlineEnd: ({ props: props2, deps }) => deps.transformSizeRatio("marginInlineEnd", props2),
         marginBlockStart: ({ props: props2, deps }) => deps.transformSizeRatio("marginBlockStart", props2),
         marginBlockEnd: ({ props: props2, deps }) => deps.transformSizeRatio("marginBlockEnd", props2),
-        gap: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.gap) && {
+        gap: ({ props: props2, deps }) => !deps.isUndefined(props2.gap) && {
           gap: (0, import_scratch6.transfromGap)(props2.gap)
         },
         gridArea: ({ props: props2, deps }) => props2.gridArea && { gridArea: props2.gridArea },
-        flex: ({ props: props2 }) => props2.flex && {
+        float: ({ props: props2, deps }) => !deps.isUndefined(props2.float) && {
+          float: props2.float
+        },
+        flex: ({ props: props2, deps }) => props2.flex && {
           flex: props2.flex
         },
-        flexDirection: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.flexDirection) && {
+        flexDirection: ({ props: props2, deps }) => !deps.isUndefined(props2.flexDirection) && {
           flexDirection: props2.flexDirection
         },
-        alignItems: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.alignItems) && {
+        alignItems: ({ props: props2, deps }) => !deps.isUndefined(props2.alignItems) && {
           alignItems: props2.alignItems
         },
-        alignContent: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.alignContent) && {
+        alignContent: ({ props: props2, deps }) => !deps.isUndefined(props2.alignContent) && {
           alignContent: props2.alignContent
         },
-        justifyContent: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.justifyContent) && {
+        justifyContent: ({ props: props2, deps }) => !deps.isUndefined(props2.justifyContent) && {
           justifyContent: props2.justifyContent
         },
-        justifyItems: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.justifyItems) && {
+        justifyItems: ({ props: props2, deps }) => !deps.isUndefined(props2.justifyItems) && {
           justifyItems: props2.justifyItems
         },
-        alignSelf: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.alignSelf) && {
+        alignSelf: ({ props: props2, deps }) => !deps.isUndefined(props2.alignSelf) && {
           alignSelf: props2.alignSelf
         },
-        order: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.order) && {
+        order: ({ props: props2, deps }) => !deps.isUndefined(props2.order) && {
           order: props2.order
         },
-        flexWrap: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.flexWrap) && {
+        flexWrap: ({ props: props2, deps }) => !deps.isUndefined(props2.flexWrap) && {
           display: "flex",
           flexFlow: (props2.flexFlow || "row").split(" ")[0] + " " + props2.flexWrap
         },
-        flexFlow: ({ props: props2 }) => {
+        flexFlow: ({ props: props2, deps }) => {
           const { flexFlow, reverse } = props2;
-          if (!(0, import_utils11.isString)(flexFlow))
+          if (!deps.isString(flexFlow))
             return;
           let [direction, wrap] = (flexFlow || "row").split(" ");
           if (flexFlow.startsWith("x") || flexFlow === "row")
@@ -15324,8 +15235,8 @@ var init_Block2 = __esm({
             flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
           };
         },
-        flexAlign: ({ props: props2 }) => {
-          if (!(0, import_utils11.isString)(props2.flexAlign))
+        flexAlign: ({ props: props2, deps }) => {
+          if (!deps.isString(props2.flexAlign))
             return;
           const [alignItems, justifyContent] = props2.flexAlign.split(" ");
           return {
@@ -15334,20 +15245,20 @@ var init_Block2 = __esm({
             justifyContent
           };
         },
-        gridColumn: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.gridColumn) && {
+        gridColumn: ({ props: props2, deps }) => !deps.isUndefined(props2.gridColumn) && {
           gridColumn: props2.gridColumn
         },
-        gridColumnStart: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.gridColumnStart) && {
+        gridColumnStart: ({ props: props2, deps }) => !deps.isUndefined(props2.gridColumnStart) && {
           gridColumnStart: props2.gridColumnStart
         },
-        gridRow: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.gridRow) && {
+        gridRow: ({ props: props2, deps }) => !deps.isUndefined(props2.gridRow) && {
           gridRow: props2.gridRow
         },
-        gridRowStart: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.gridRowStart) && {
+        gridRowStart: ({ props: props2, deps }) => !deps.isUndefined(props2.gridRowStart) && {
           gridRowStart: props2.gridRowStart
         },
         size: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.heightRange))
+          if (!deps.isString(props2.heightRange))
             return;
           const [minHeight, maxHeight] = props2.heightRange.split(" ");
           return {
@@ -15355,27 +15266,27 @@ var init_Block2 = __esm({
             ...deps.transformSizeRatio("maxHeight", maxHeight || minHeight)
           };
         },
-        resize: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.resize) && {
+        resize: ({ props: props2, deps }) => !deps.isUndefined(props2.resize) && {
           resize: props2.resize
         },
-        verticalAlign: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.verticalAlign) && { verticalAlign: props2.verticalAlign },
-        columns: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.columns) && {
+        verticalAlign: ({ props: props2, deps }) => !deps.isUndefined(props2.verticalAlign) && { verticalAlign: props2.verticalAlign },
+        columns: ({ props: props2, deps }) => !deps.isUndefined(props2.columns) && {
           columns: props2.columns
         },
-        columnRule: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.columnRule) && {
+        columnRule: ({ props: props2, deps }) => !deps.isUndefined(props2.columnRule) && {
           columnRule: props2.columnRule
         },
-        columnWidth: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.columnWidth) && {
+        columnWidth: ({ props: props2, deps }) => !deps.isUndefined(props2.columnWidth) && {
           columnWidth: props2.columnWidth
         },
         columnGap: ({ props: props2, deps }) => deps.transformSizeRatio("columnGap", props2),
-        columnSpan: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.columnSpan) && {
+        columnSpan: ({ props: props2, deps }) => !deps.isUndefined(props2.columnSpan) && {
           columnSpan: props2.columnSpan
         },
-        columnFill: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.columnFill) && {
+        columnFill: ({ props: props2, deps }) => !deps.isUndefined(props2.columnFill) && {
           columnFill: props2.columnFill
         },
-        columnCount: ({ props: props2 }) => !(0, import_utils11.isUndefined)(props2.columnCount) && {
+        columnCount: ({ props: props2, deps }) => !deps.isUndefined(props2.columnCount) && {
           columnCount: props2.columnCount
         }
       }
@@ -15387,9 +15298,10 @@ var init_Block2 = __esm({
     Br2 = { tag: "br" };
     Div2 = { tag: "div" };
     Span2 = { tag: "span" };
+    Li2 = { tag: "li" };
     Ul2 = {
       tag: "ul",
-      childExtend: { tag: "li" }
+      childExtend: { extend: "Li" }
     };
     Gutter2 = {
       deps: { getSpacingByKey: import_scratch6.getSpacingByKey },
@@ -15398,7 +15310,7 @@ var init_Block2 = __esm({
       },
       class: {
         size: ({ props: props2, deps }) => {
-          if (!(0, import_utils11.isString)(props2.size))
+          if (!deps.isString(props2.size))
             return;
           const [height, width] = props2.size.split(" ");
           return {
@@ -15428,11 +15340,11 @@ var init_Direction2 = __esm({
 });
 // node_modules/@symbo.ls/atoms/Flex.js
-var import_utils12, Flex2;
+var import_utils11, Flex2;
 var init_Flex2 = __esm({
   "node_modules/@symbo.ls/atoms/Flex.js"() {
     "use strict";
-    import_utils12 = __toESM(require_cjs());
+    import_utils11 = __toESM(require_cjs());
     Flex2 = {
       props: {
         display: "flex"
@@ -15440,7 +15352,7 @@ var init_Flex2 = __esm({
       class: {
         flow: ({ props: props2 }) => {
           const { flow, reverse } = props2;
-          if (!(0, import_utils12.isString)(flow))
+          if (!(0, import_utils11.isString)(flow))
             return;
           let [direction, wrap] = (flow || "row").split(" ");
           if (flow.startsWith("x") || flow === "row")
@@ -15453,7 +15365,7 @@ var init_Flex2 = __esm({
         },
         wrap: ({ props: props2 }) => props2.wrap && { flexWrap: props2.wrap },
         align: ({ props: props2 }) => {
-          if (!(0, import_utils12.isString)(props2.align))
+          if (!(0, import_utils11.isString)(props2.align))
             return;
           const [alignItems, justifyContent] = props2.align.split(" ");
           return { alignItems, justifyContent };
@@ -15780,13 +15692,13 @@ var init_style = __esm({
 });
 // node_modules/@symbo.ls/atoms/Theme.js
-var import_scratch10, import_utils13, getSystemGlobalTheme, Theme;
+var import_scratch10, import_utils12, getSystemGlobalTheme, Theme;
 var init_Theme = __esm({
   "node_modules/@symbo.ls/atoms/Theme.js"() {
     "use strict";
     import_scratch10 = __toESM(require_cjs2());
     init_style();
-    import_utils13 = __toESM(require_cjs());
+    import_utils12 = __toESM(require_cjs());
     getSystemGlobalTheme = ({ context, state }) => {
       const rootState = state && state.root;
       return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
@@ -15804,7 +15716,7 @@ var init_Theme = __esm({
         transformBackgroundImage: import_scratch10.transformBackgroundImage
       },
       class: {
-        depth: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.depth) && deps.depth[props2.depth],
+        depth: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.depth) && deps.depth[props2.depth],
         theme: (element) => {
           const { props: props2, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
@@ -15856,22 +15768,22 @@ var init_Theme = __esm({
             backgroundImage: deps.transformBackgroundImage(props2.backgroundImage, globalTheme)
           };
         },
-        backgroundSize: ({ props: props2 }) => !(0, import_utils13.isUndefined)(props2.backgroundSize) ? {
+        backgroundSize: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.backgroundSize) ? {
           backgroundSize: props2.backgroundSize
         } : null,
-        backgroundPosition: ({ props: props2 }) => !(0, import_utils13.isUndefined)(props2.backgroundPosition) ? {
+        backgroundPosition: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.backgroundPosition) ? {
           backgroundPosition: props2.backgroundPosition
         } : null,
-        backgroundRepeat: ({ props: props2 }) => !(0, import_utils13.isUndefined)(props2.backgroundRepeat) ? {
+        backgroundRepeat: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.backgroundRepeat) ? {
           backgroundRepeat: props2.backgroundRepeat
         } : null,
-        textStroke: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.textStroke) ? {
+        textStroke: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.textStroke) ? {
           WebkitTextStroke: deps.transformTextStroke(props2.textStroke)
         } : null,
-        outline: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.outline) && {
+        outline: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.outline) && {
           outline: deps.transformBorder(props2.outline)
         },
-        border: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.border) && {
+        border: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.border) && {
           border: deps.transformBorder(props2.border)
         },
         borderColor: (element) => {
@@ -15883,19 +15795,19 @@ var init_Theme = __esm({
             borderColor: deps.getMediaColor(props2.borderColor, globalTheme)
           };
         },
-        borderStyle: ({ props: props2 }) => !(0, import_utils13.isUndefined)(props2.borderStyle) && {
+        borderStyle: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.borderStyle) && {
           borderStyle: props2.borderStyle
         },
-        borderLeft: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.borderLeft) && {
+        borderLeft: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.borderLeft) && {
           borderLeft: deps.transformBorder(props2.borderLeft)
         },
-        borderTop: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.borderTop) && {
+        borderTop: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.borderTop) && {
           borderTop: deps.transformBorder(props2.borderTop)
         },
-        borderRight: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.borderRight) && {
+        borderRight: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.borderRight) && {
           borderRight: deps.transformBorder(props2.borderRight)
         },
-        borderBottom: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.borderBottom) && {
+        borderBottom: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.borderBottom) && {
           borderBottom: deps.transformBorder(props2.borderBottom)
         },
         shadow: (element) => {
@@ -15907,31 +15819,31 @@ var init_Theme = __esm({
             boxShadow: deps.transformShadow(props2.shadow, globalTheme)
           };
         },
-        boxShadow: ({ props: props2, deps }) => (0, import_utils13.isString)(props2.boxShadow) && {
+        boxShadow: ({ props: props2, deps }) => (0, import_utils12.isString)(props2.boxShadow) && {
           boxShadow: deps.transformBoxShadow(props2.boxShadow)
         },
-        textShadow: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.textShadow) && {
+        textShadow: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.textShadow) && {
           textShadow: deps.transformBoxShadow(props2.textShadow)
         },
-        backdropFilter: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.backdropFilter) && {
+        backdropFilter: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.backdropFilter) && {
           backdropFilter: props2.backdropFilter
         },
-        opacity: ({ props: props2 }) => !(0, import_utils13.isUndefined)(props2.opacity) && {
+        opacity: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.opacity) && {
           opacity: props2.opacity
         },
-        visibility: ({ props: props2 }) => !(0, import_utils13.isUndefined)(props2.visibility) && {
+        visibility: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.visibility) && {
           visibility: props2.visibility
         },
-        columnRule: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.columnRule) && {
+        columnRule: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.columnRule) && {
           columnRule: deps.transformBorder(props2.columnRule)
         },
-        filter: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.filter) && {
+        filter: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.filter) && {
           filter: props2.filter
         },
-        mixBlendMode: ({ props: props2, deps }) => !(0, import_utils13.isUndefined)(props2.mixBlendMode) && {
+        mixBlendMode: ({ props: props2, deps }) => !(0, import_utils12.isUndefined)(props2.mixBlendMode) && {
           mixBlendMode: props2.mixBlendMode
         },
-        appearance: ({ props: props2 }) => !(0, import_utils13.isUndefined)(props2.appearance) && {
+        appearance: ({ props: props2 }) => !(0, import_utils12.isUndefined)(props2.appearance) && {
           appearance: props2.appearance
         }
       }
@@ -15940,11 +15852,11 @@ var init_Theme = __esm({
 });
 // node_modules/@symbo.ls/atoms/Media.js
-var import_utils14, keySetters, execClass, convertPropsToClass, applyMediaProps, applyAndProps, applySelectorProps, applyCaseProps, applyVariableProps, applyConditionalCaseProps, applyConditionalFalsyProps, applyTrueProps, beforeClassAssign, Media;
+var import_utils13, keySetters, execClass, convertPropsToClass, applyMediaProps, applyAndProps, applySelectorProps, applyCaseProps, applyVariableProps, applyConditionalCaseProps, applyConditionalFalsyProps, applyTrueProps, beforeClassAssign, Media;
 var init_Media = __esm({
   "node_modules/@symbo.ls/atoms/Media.js"() {
     "use strict";
-    import_utils14 = __toESM(require_cjs());
+    import_utils13 = __toESM(require_cjs());
     init_Theme();
     keySetters = {
       "@": (key, props2, result, element, isSubtree) => applyMediaProps(
@@ -16031,8 +15943,8 @@ var init_Media = __esm({
         state: element.state,
         deps: element.deps
       });
-      if ((0, import_utils14.isArray)(classExec))
-        classExec = classExec.reduce((a, c) => (0, import_utils14.merge)(a, c), {});
+      if ((0, import_utils13.isArray)(classExec))
+        classExec = classExec.reduce((a, c) => (0, import_utils13.merge)(a, c), {});
       for (const finalProp in classExec) {
         result[finalProp] = classExec[finalProp];
       }
@@ -16064,7 +15976,7 @@ var init_Media = __esm({
       const matchesGlobal = name === globalTheme;
       if (globalTheme && isTheme) {
         if (matchesGlobal)
-          return (0, import_utils14.merge)(result, generatedClass);
+          return (0, import_utils13.merge)(result, generatedClass);
         return;
       }
       const mediaKey = mediaValue ? `@media screen and ${mediaValue}` : key;
@@ -16086,7 +15998,7 @@ var init_Media = __esm({
       const isPropTrue = element.props[caseKey];
       if (!CASES[caseKey] && !isPropTrue)
         return;
-      return (0, import_utils14.merge)(result, convertPropsToClass(props2, result, element));
+      return (0, import_utils13.merge)(result, convertPropsToClass(props2, result, element));
     };
     applyVariableProps = (key, props2, result, element) => {
       result[key] = props2;
@@ -16097,15 +16009,15 @@ var init_Media = __esm({
       const isPropTrue = element.props[caseKey] || element.state[caseKey];
       if (!isPropTrue)
         return;
-      return (0, import_utils14.overwriteDeep)(result, convertPropsToClass(props2, result, element));
+      return (0, import_utils13.overwriteDeep)(result, convertPropsToClass(props2, result, element));
     };
     applyConditionalFalsyProps = (key, props2, result, element) => {
       const caseKey = key.slice(1);
       const isPropTrue = element.props[caseKey] || element.state[caseKey] === true;
       if (!isPropTrue)
-        return (0, import_utils14.overwriteDeep)(result, convertPropsToClass(props2, result, element));
+        return (0, import_utils13.overwriteDeep)(result, convertPropsToClass(props2, result, element));
     };
-    applyTrueProps = (props2, result, element) => (0, import_utils14.merge)(result, convertPropsToClass(props2, result, element));
+    applyTrueProps = (props2, result, element) => (0, import_utils13.merge)(result, convertPropsToClass(props2, result, element));
     beforeClassAssign = (element, s) => {
       const { props: props2, class: className, context } = element;
       const CLASS_NAMES = {
@@ -16148,7 +16060,7 @@ var init_Media = __esm({
           preventDefineUpdate: true
         });
       }
-      (0, import_utils14.overwriteShallow)(className, CLASS_NAMES);
+      (0, import_utils13.overwriteShallow)(className, CLASS_NAMES);
     };
     Media = {
       class: {
@@ -16177,6 +16089,9 @@ var init_Iframe = __esm({
       },
       attr: {
         src: ({ props: props2 }) => props2.src,
+        srcdoc: ({ props: props2 }) => props2.srcdoc,
+        sandbox: ({ props: props2 }) => props2.sandbox,
+        seamless: ({ props: props2 }) => props2.seamless,
         loading: ({ props: props2 }) => props2.loading,
         allowfullscreen: ({ props: props2 }) => props2.allowfullscreen,
         frameborder: ({ props: props2 }) => props2.frameborder,
@@ -16393,11 +16308,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS12(methods_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_ignore = require_ignore();
     var parse3 = function() {
       const state = this;
-      if ((0, import_utils44.isObject)(state)) {
+      if ((0, import_utils43.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -16405,7 +16320,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils44.isArray)(state)) {
+      } else if ((0, import_utils43.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -16425,7 +16340,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils44.isString)(stateKey)) {
+      if ((0, import_utils43.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -16438,7 +16353,7 @@ var require_methods = __commonJS({
         for (const key in state.__children) {
           const child = state.__children[key];
           if (child.state) {
-            if ((0, import_utils44.isArray)(child.state)) {
+            if ((0, import_utils43.isArray)(child.state)) {
               Object.defineProperty(child.state, "parent", {
                 value: state.parent,
                 enumerable: false,
@@ -16472,10 +16387,10 @@ var require_methods = __commonJS({
     };
     var add = function(value2, options = {}) {
       const state = this;
-      if ((0, import_utils44.isArray)(state)) {
+      if ((0, import_utils43.isArray)(state)) {
         state.push(value2);
         state.update(state.parse(), { overwrite: true, ...options });
-      } else if ((0, import_utils44.isObject)(state)) {
+      } else if ((0, import_utils43.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value2 }, options);
       }
@@ -16491,31 +16406,31 @@ var require_methods = __commonJS({
     };
     var set3 = function(val, options = {}) {
       const state = this;
-      const value2 = (0, import_utils44.deepCloneWithExtend)(val);
+      const value2 = (0, import_utils43.deepCloneWithExtend)(val);
       return state.clean({ preventStateUpdate: true, ...options }).update(value2, { replace: true, ...options });
     };
     var reset = function(options = {}) {
       const state = this;
-      const value2 = (0, import_utils44.deepCloneWithExtend)(state.parse());
+      const value2 = (0, import_utils43.deepCloneWithExtend)(state.parse());
       return state.set(value2, { replace: true, ...options });
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils44.isFunction)(func)) {
+      if ((0, import_utils43.isFunction)(func)) {
         const value2 = func(state);
         return state.update(value2, { replace: true, ...options });
       }
     };
     var applyReplace = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils44.isFunction)(func)) {
+      if ((0, import_utils43.isFunction)(func)) {
         const value2 = func(state);
         return state.replace(value2, options);
       }
     };
     var applyFunction = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils44.isFunction)(func)) {
+      if ((0, import_utils43.isFunction)(func)) {
         func(state);
         return state.update(state.parse(), { replace: true, ...options });
       }
@@ -16571,7 +16486,7 @@ var require_inherit = __commonJS({
       isState: () => isState3
     });
     module2.exports = __toCommonJS12(inherit_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_ignore = require_ignore();
     var getRootStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("~/"))
@@ -16636,11 +16551,11 @@ var require_inherit = __commonJS({
     var createInheritedState = (element, parent) => {
       const ref = element.__ref;
       const inheritedState = findInheritedState(element, parent);
-      if ((0, import_utils44.isUndefined)(inheritedState))
+      if ((0, import_utils43.isUndefined)(inheritedState))
         return element.state;
-      if ((0, import_utils44.is)(inheritedState)("object", "array")) {
-        return (0, import_utils44.deepCloneWithExtend)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils44.is)(inheritedState)("string", "number", "boolean")) {
+      if ((0, import_utils43.is)(inheritedState)("object", "array")) {
+        return (0, import_utils43.deepCloneWithExtend)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils43.is)(inheritedState)("string", "number", "boolean")) {
         ref.__stateType = typeof inheritedState;
         return { value: inheritedState };
       }
@@ -16649,12 +16564,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (stateKey && (0, import_utils44.is)(stateKey)("number", "string", "boolean"))
+      if (stateKey && (0, import_utils43.is)(stateKey)("number", "string", "boolean"))
         return true;
       return false;
     };
     var isState3 = function(state) {
-      if (!(0, import_utils44.isObjectLike)(state))
+      if (!(0, import_utils43.isObjectLike)(state))
         return false;
       return state.update && state.parse && state.clean && state.create && state.parent && state.destroy && state.rootUpdate && state.parentUpdate && state.toggle && state.replace && state.quietUpdate && state.quietReplace && state.add && state.apply && state.applyReplace && state.applyFunction && state.__element && state.__children;
     };
@@ -16703,7 +16618,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs4();
     var import_event = require_cjs5();
     var import_ignore = require_ignore();
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -16718,7 +16633,7 @@ var require_updateState = __commonJS({
       if (options.onEach)
         options.onEach(element, state, element.context, options);
       if (!options.updateByState)
-        (0, import_utils44.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils43.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -16748,10 +16663,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow" || overwrite === "shallow-once";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils44.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils43.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils44.overwriteShallow : import_utils44.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils43.overwriteShallow : import_utils43.overwriteDeep;
       if (options.overwrite === "shallow-once")
         options.overwrite = true;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
@@ -16776,7 +16691,7 @@ var require_updateState = __commonJS({
       const changesValue = (0, import_inherit.createNestedObjectByKeyPath)(stateKey, passedValue);
       const targetParent = findRootState || findGrandParentState || parent.state;
       if (options.replace)
-        (0, import_utils44.overwriteDeep)(targetParent, changesValue || value2);
+        (0, import_utils43.overwriteDeep)(targetParent, changesValue || value2);
       targetParent.update(changesValue, {
         execStateFunction: false,
         isHoisted: true,
@@ -16845,7 +16760,7 @@ var require_create = __commonJS({
     });
     module2.exports = __toCommonJS12(create_exports);
     var import_event = require_cjs5();
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -16859,13 +16774,13 @@ var require_create = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils44.deepCloneWithExtend)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils43.deepCloneWithExtend)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
       if ((0, import_inherit.checkIfInherits)(element)) {
         const inheritedState = (0, import_inherit.createInheritedState)(element, parent);
-        element.state = (0, import_utils44.isUndefined)(inheritedState) ? {} : inheritedState;
+        element.state = (0, import_utils43.isUndefined)(inheritedState) ? {} : inheritedState;
       }
       const dependentState = applyDependentState(element, element.state);
       if (dependentState)
@@ -16878,17 +16793,17 @@ var require_create = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils44.deepCloneWithExtend)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils43.deepCloneWithExtend)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils44.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils43.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils44.isFunction)(state)) {
+      if ((0, import_utils43.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils44.exec)(state, element);
-      } else if ((0, import_utils44.is)(state)("string", "number")) {
+        return (0, import_utils43.exec)(state, element);
+      } else if ((0, import_utils43.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       } else if (state === true) {
@@ -16941,7 +16856,7 @@ var require_create = __commonJS({
         __children: {},
         root: ref.root ? ref.root.state : state
       };
-      if ((0, import_utils44.isArray)(state)) {
+      if ((0, import_utils43.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
@@ -16982,25 +16897,25 @@ var require_cjs9 = __commonJS({
 });
 // node_modules/@symbo.ls/atoms/Collection.js
-var import_state, import_utils15, Collection;
+var import_state, import_utils14, Collection;
 var init_Collection = __esm({
   "node_modules/@symbo.ls/atoms/Collection.js"() {
     "use strict";
     import_state = __toESM(require_cjs9());
-    import_utils15 = __toESM(require_cjs());
+    import_utils14 = __toESM(require_cjs());
     Collection = {
       define: {
         $collection: (param, el, state) => {
           const { __ref: ref } = el;
           const { children, childrenAs, childrenExtend } = el.props || {};
-          const hasChildren = (0, import_utils15.isArray)(children);
+          const hasChildren = (0, import_utils14.isArray)(children);
           if (hasChildren) {
             param = children;
             if (childrenAs)
               param = param.map((v) => ({ extend: childrenExtend, [childrenAs]: v }));
           } else if (!param)
             return;
-          if ((0, import_utils15.isString)(param)) {
+          if ((0, import_utils14.isString)(param)) {
             if (param === "state")
               param = state.parse();
             else
@@ -17008,20 +16923,20 @@ var init_Collection = __esm({
           }
           if ((0, import_state.isState)(param))
             param = param.parse();
-          if ((0, import_utils15.isNot)(param)("array", "object"))
+          if ((0, import_utils14.isNot)(param)("array", "object"))
             return;
-          param = (0, import_utils15.deepCloneWithExtend)(param);
+          param = (0, import_utils14.deepCloneWithExtend)(param);
           if (ref.__collectionCache) {
             const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache);
             if (equals) {
               ref.__noCollectionDifference = true;
               return;
             } else {
-              ref.__collectionCache = (0, import_utils15.deepCloneWithExtend)(param);
+              ref.__collectionCache = (0, import_utils14.deepCloneWithExtend)(param);
               delete ref.__noCollectionDifference;
             }
           } else {
-            ref.__collectionCache = (0, import_utils15.deepCloneWithExtend)(param);
+            ref.__collectionCache = (0, import_utils14.deepCloneWithExtend)(param);
           }
           const obj = {
             tag: "fragment",
@@ -17032,7 +16947,7 @@ var init_Collection = __esm({
           for (const key in param) {
             const value2 = param[key];
             if (value2)
-              obj[key] = (0, import_utils15.isObjectLike)(value2) ? value2 : { value: value2 };
+              obj[key] = (0, import_utils14.isObjectLike)(value2) ? value2 : { value: value2 };
           }
           el.removeContent();
           el.content = obj;
@@ -17040,13 +16955,13 @@ var init_Collection = __esm({
         $setCollection: (param, el, state) => {
           if (!param)
             return;
-          if ((0, import_utils15.isString)(param)) {
+          if ((0, import_utils14.isString)(param)) {
             if (param === "state")
               param = state.parse();
             else
               param = (0, import_state.getChildStateInKey)(param, state);
           }
-          const data = ((0, import_utils15.isArray)(param) ? param : (0, import_utils15.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils15.isObjectLike)(item) ? { props: { value: item } } : item);
+          const data = ((0, import_utils14.isArray)(param) ? param : (0, import_utils14.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils14.isObjectLike)(item) ? { props: { value: item } } : item);
           if (data.length) {
             const t = setTimeout(() => {
               el.set({ tag: "fragment", ...data }, { preventDefineUpdate: "$setCollection" });
@@ -17058,7 +16973,7 @@ var init_Collection = __esm({
         $stateCollection: (param, el, state) => {
           if (!param)
             return;
-          if ((0, import_utils15.isString)(param)) {
+          if ((0, import_utils14.isString)(param)) {
             if (param === "state")
               param = state.parse();
             else
@@ -17066,21 +16981,21 @@ var init_Collection = __esm({
           }
           if ((0, import_state.isState)(param))
             param = param.parse();
-          if ((0, import_utils15.isNot)(param)("array", "object"))
+          if ((0, import_utils14.isNot)(param)("array", "object"))
             return;
           const { __ref: ref } = el;
-          param = (0, import_utils15.deepCloneWithExtend)(param);
+          param = (0, import_utils14.deepCloneWithExtend)(param);
           if (ref.__stateCollectionCache) {
             const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache);
             if (equals) {
               ref.__noCollectionDifference = true;
               return;
             } else {
-              ref.__stateCollectionCache = (0, import_utils15.deepCloneWithExtend)(param);
+              ref.__stateCollectionCache = (0, import_utils14.deepCloneWithExtend)(param);
               delete ref.__noCollectionDifference;
             }
           } else {
-            ref.__stateCollectionCache = (0, import_utils15.deepCloneWithExtend)(param);
+            ref.__stateCollectionCache = (0, import_utils14.deepCloneWithExtend)(param);
           }
           const obj = {
             tag: "fragment",
@@ -17091,7 +17006,7 @@ var init_Collection = __esm({
           for (const key in param) {
             const value2 = param[key];
             if (value2)
-              obj[key] = { state: (0, import_utils15.isObjectLike)(value2) ? value2 : { value: value2 } };
+              obj[key] = { state: (0, import_utils14.isObjectLike)(value2) ? value2 : { value: value2 } };
           }
           el.removeContent();
           el.content = obj;
@@ -17099,7 +17014,7 @@ var init_Collection = __esm({
         $propsCollection: (param, el, state) => {
           if (!param)
             return;
-          if ((0, import_utils15.isString)(param)) {
+          if ((0, import_utils14.isString)(param)) {
             if (param === "state")
               param = state.parse();
             else
@@ -17107,21 +17022,21 @@ var init_Collection = __esm({
           }
           if ((0, import_state.isState)(param))
             param = param.parse();
-          if ((0, import_utils15.isNot)(param)("array", "object"))
+          if ((0, import_utils14.isNot)(param)("array", "object"))
             return;
           const { __ref: ref } = el;
-          param = (0, import_utils15.deepCloneWithExtend)(param);
+          param = (0, import_utils14.deepCloneWithExtend)(param);
           if (ref.__propsCollectionCache) {
             const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache);
             if (equals) {
               ref.__noCollectionDifference = true;
               return;
             } else {
-              ref.__propsCollectionCache = (0, import_utils15.deepCloneWithExtend)(param);
+              ref.__propsCollectionCache = (0, import_utils14.deepCloneWithExtend)(param);
               delete ref.__noCollectionDifference;
             }
           } else {
-            ref.__propsCollectionCache = (0, import_utils15.deepCloneWithExtend)(param);
+            ref.__propsCollectionCache = (0, import_utils14.deepCloneWithExtend)(param);
           }
           const obj = {
             tag: "fragment",
@@ -17132,7 +17047,7 @@ var init_Collection = __esm({
           for (const key in param) {
             const value2 = param[key];
             if (value2)
-              obj[key] = { props: (0, import_utils15.isObjectLike)(value2) ? value2 : { value: value2 } };
+              obj[key] = { props: (0, import_utils14.isObjectLike)(value2) ? value2 : { value: value2 } };
           }
           el.removeContent();
           el.content = obj;
@@ -17251,6 +17166,8 @@ var init_Svg = __esm({
         "xmlns:xlink": "http://www.w3.org/1999/xlink"
       },
       html: ({ key, props: props2, context, ...el }) => {
+        if (props2.semantic_symbols)
+          return;
         const { designSystem, utils: utils4 } = context;
         const SVG = designSystem && designSystem.SVG;
         const useSvgSprite = props2.spriteId || context.designSystem && context.designSystem.useSvgSprite;
@@ -17280,16 +17197,16 @@ var init_Svg = __esm({
 });
 // node_modules/@symbo.ls/atoms/Shape/index.js
-var import_utils16, import_scratch12, transformBorderRadius, Shape;
+var import_utils15, import_scratch12, transformBorderRadius, Shape;
 var init_Shape = __esm({
   "node_modules/@symbo.ls/atoms/Shape/index.js"() {
     "use strict";
-    import_utils16 = __toESM(require_cjs());
+    import_utils15 = __toESM(require_cjs());
     init_style();
     import_scratch12 = __toESM(require_cjs2());
     init_Pseudo();
     transformBorderRadius = (radius, props2, propertyName) => {
-      if (!(0, import_utils16.isString)(radius))
+      if (!(0, import_utils15.isString)(radius))
         return;
       return {
         borderRadius: radius.split(" ").map((v, k) => (0, import_scratch12.getSpacingBasedOnRatio)(props2, propertyName, v)[propertyName]).join(" ")
@@ -17297,7 +17214,7 @@ var init_Shape = __esm({
     };
     Shape = {
       extend: Pseudo,
-      deps: { exec: import_utils16.exec, getSpacingBasedOnRatio: import_scratch12.getSpacingBasedOnRatio, getMediaColor: import_scratch12.getMediaColor, transformBorderRadius },
+      deps: { exec: import_utils15.exec, getSpacingBasedOnRatio: import_scratch12.getSpacingBasedOnRatio, getMediaColor: import_scratch12.getMediaColor, transformBorderRadius },
       class: {
         shape: ({ props: props2, deps }) => {
           const { shape } = props2;
@@ -17325,11 +17242,11 @@ var init_Shape = __esm({
 });
 // node_modules/@symbo.ls/atoms/Text.js
-var import_utils17, import_scratch13, Text, H1, H2, H3, H4, H5, H6, P, Caption, Strong, Underline, Italic, Title, Headline, Subhead, Footnote, B, I;
+var import_utils16, import_scratch13, Text, H1, H2, H3, H4, H5, H6, P, Caption, Strong, Underline, Italic, Title, Headline, Subhead, Footnote, B, I;
 var init_Text = __esm({
   "node_modules/@symbo.ls/atoms/Text.js"() {
     "use strict";
-    import_utils17 = __toESM(require_cjs());
+    import_utils16 = __toESM(require_cjs());
     import_scratch13 = __toESM(require_cjs2());
     Text = {
       deps: { getFontSizeByKey: import_scratch13.getFontSizeByKey, getFontFamily: import_scratch13.getFontFamily },
@@ -17343,23 +17260,23 @@ var init_Text = __esm({
           const { props: props2, deps } = el;
           return props2.fontSize ? deps.getFontSizeByKey(props2.fontSize) : null;
         },
-        font: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.font) && { font: props2.font },
-        fontFamily: ({ props: props2, deps }) => !(0, import_utils17.isUndefined)(props2.fontFamily) && {
+        font: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.font) && { font: props2.font },
+        fontFamily: ({ props: props2, deps }) => !(0, import_utils16.isUndefined)(props2.fontFamily) && {
           fontFamily: deps.getFontFamily(props2.fontFamily) || props2.fontFamily
         },
-        lineHeight: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.lineHeight) && { lineHeight: props2.lineHeight },
+        lineHeight: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.lineHeight) && { lineHeight: props2.lineHeight },
         // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-        textDecoration: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.textDecoration) && { textDecoration: props2.textDecoration },
-        textTransform: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.textTransform) && { textTransform: props2.textTransform },
-        wordBreak: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.wordBreak) && { wordBreak: props2.wordBreak },
-        whiteSpace: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.whiteSpace) && { whiteSpace: props2.whiteSpace },
-        wordWrap: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.wordWrap) && { wordWrap: props2.wordWrap },
-        letterSpacing: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.letterSpacing) && { letterSpacing: props2.letterSpacing },
-        textOverflow: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.textOverflow) && { textOverflow: props2.textOverflow },
-        textAlign: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.textAlign) && { textAlign: props2.textAlign },
-        writingMode: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.writingMode) && { writingMode: props2.writingMode },
-        textOrientation: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.textOrientation) && { textOrientation: props2.textOrientation },
-        fontWeight: ({ props: props2 }) => !(0, import_utils17.isUndefined)(props2.fontWeight) && {
+        textDecoration: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.textDecoration) && { textDecoration: props2.textDecoration },
+        textTransform: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.textTransform) && { textTransform: props2.textTransform },
+        wordBreak: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.wordBreak) && { wordBreak: props2.wordBreak },
+        whiteSpace: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.whiteSpace) && { whiteSpace: props2.whiteSpace },
+        wordWrap: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.wordWrap) && { wordWrap: props2.wordWrap },
+        letterSpacing: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.letterSpacing) && { letterSpacing: props2.letterSpacing },
+        textOverflow: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.textOverflow) && { textOverflow: props2.textOverflow },
+        textAlign: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.textAlign) && { textAlign: props2.textAlign },
+        writingMode: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.writingMode) && { writingMode: props2.writingMode },
+        textOrientation: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.textOrientation) && { textOrientation: props2.textOrientation },
+        fontWeight: ({ props: props2 }) => !(0, import_utils16.isUndefined)(props2.fontWeight) && {
           fontWeight: props2.fontWeight,
           fontVariationSettings: '"wght" ' + props2.fontWeight
         }
@@ -17427,25 +17344,44 @@ var init_XYZ = __esm({
   }
 });
+// node_modules/@symbo.ls/emotion/index.js
+var emotion_exports = {};
+__export(emotion_exports, {
+  createEmotion: () => createEmotion5,
+  emotion: () => emotion3
+});
+var createEmotion5, emotion3;
+var init_emotion3 = __esm({
+  "node_modules/@symbo.ls/emotion/index.js"() {
+    "use strict";
+    init_emotion_css_create_instance_esm();
+    createEmotion5 = (key = "smbls", container) => {
+      const cleanKey = key.replaceAll(/\./g, "-");
+      return createEmotion({ key: cleanKey, container });
+    };
+    emotion3 = createEmotion5();
+  }
+});
 // node_modules/@symbo.ls/atoms/Animation.js
-var import_scratch14, import_utils18, applyAnimationProps, Animation;
+var import_scratch14, import_utils17, applyAnimationProps, Animation;
 var init_Animation = __esm({
   "node_modules/@symbo.ls/atoms/Animation.js"() {
     "use strict";
     import_scratch14 = __toESM(require_cjs2());
-    import_utils18 = __toESM(require_cjs());
-    init_emotion2();
+    import_utils17 = __toESM(require_cjs());
+    init_emotion3();
     applyAnimationProps = (animation, element) => {
       const { emotion: ctxEmotion } = element.context;
-      const { keyframes } = ctxEmotion || emotion2;
-      if ((0, import_utils18.isObject)(animation))
+      const { keyframes } = ctxEmotion || emotion3;
+      if ((0, import_utils17.isObject)(animation))
         return { animationName: keyframes(animation) };
       const { ANIMATION } = element.context && element.context.designSystem;
       const record = ANIMATION[animation];
       return keyframes(record);
     };
     Animation = {
-      deps: { isObject: import_utils18.isObject, getTimingByKey: import_scratch14.getTimingByKey, getTimingFunction: import_scratch14.getTimingFunction, applyAnimationProps },
+      deps: { isObject: import_utils17.isObject, getTimingByKey: import_scratch14.getTimingByKey, getTimingFunction: import_scratch14.getTimingFunction, applyAnimationProps },
       class: {
         animation: (el) => el.props.animation && {
           animationName: el.deps.applyAnimationProps(el.props.animation, el),
@@ -17518,6 +17454,7 @@ __export(atoms_exports, {
   Img: () => Img2,
   Interaction: () => Interaction,
   Italic: () => Italic,
+  Li: () => Li2,
   Media: () => Media,
   Overflow: () => Overflow,
   P: () => P,
@@ -17704,11 +17641,11 @@ var require_tree = __commonJS({
       TREE: () => TREE
     });
     module2.exports = __toCommonJS12(tree_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_report = require_cjs4();
     var ROOT = {
       key: ":root",
-      node: import_utils44.document ? import_utils44.document.body : (0, import_report.report)("DocumentNotDefined", import_utils44.document)
+      node: import_utils43.document ? import_utils43.document.body : (0, import_report.report)("DocumentNotDefined", import_utils43.document)
     };
     var TREE = ROOT;
   }
@@ -17775,35 +17712,35 @@ var require_cache = __commonJS({
     module2.exports = __toCommonJS12(cache_exports);
     var import_report = require_cjs4();
     var import_event = require_cjs5();
-    var import_utils44 = require_cjs();
-    var cache2 = {};
+    var import_utils43 = require_cjs();
     var createHTMLNode = (element) => {
-      const { tag } = element;
+      const { tag, context } = element;
+      const doc = context.document || import_utils43.document;
       if (tag) {
         if (tag === "string")
-          return document.createTextNode(element.text);
+          return doc.createTextNode(element.text);
         else if (tag === "fragment") {
-          return document.createDocumentFragment();
+          return doc.createDocumentFragment();
         } else if (tag === "svg" || tag === "path") {
-          return document.createElementNS("http://www.w3.org/2000/svg", tag);
+          return doc.createElementNS("http://www.w3.org/2000/svg", tag);
         } else
-          return document.createElement(tag);
+          return doc.createElement(tag);
       } else {
-        return document.createElement("div");
+        return doc.createElement("div");
       }
     };
     var detectTag = (element) => {
       let { tag, key, props: props2 } = element;
-      tag = (0, import_utils44.exec)(tag, element);
+      tag = (0, import_utils43.exec)(tag, element);
       if (tag === true)
         tag = key;
-      if ((0, import_utils44.isObject)(props2) && (0, import_utils44.isString)(props2.tag)) {
-        const tagExists = (0, import_utils44.isValidHtmlTag)(props2.tag);
+      if ((0, import_utils43.isObject)(props2) && (0, import_utils43.isString)(props2.tag)) {
+        const tagExists = (0, import_utils43.isValidHtmlTag)(props2.tag);
         if (tagExists)
           return props2.tag;
       }
-      if ((0, import_utils44.isString)(tag)) {
-        if ((0, import_utils44.isValidHtmlTag)(tag))
+      if ((0, import_utils43.isString)(tag)) {
+        if ((0, import_utils43.isValidHtmlTag)(tag))
           return tag;
       } else {
         let keyAsTag = key.toLowerCase();
@@ -17811,19 +17748,23 @@ var require_cache = __commonJS({
           keyAsTag = keyAsTag.split(".")[0];
         if (keyAsTag.includes("_"))
           keyAsTag = keyAsTag.split("_")[0];
-        if ((0, import_utils44.isValidHtmlTag)(keyAsTag))
+        if ((0, import_utils43.isValidHtmlTag)(keyAsTag))
           return keyAsTag;
       }
       return "div";
     };
     var cacheNode = (element) => {
+      const { context } = element;
+      const win = context.window || window;
       const tag = element.tag = detectTag(element);
       if (!(0, import_event.canRenderTag)(tag)) {
         return (0, import_report.report)("HTMLInvalidTag", element.tag, element);
       }
-      let cachedTag = cache2[tag];
+      if (!win.nodeCaches)
+        win.nodeCaches = {};
+      let cachedTag = win.nodeCaches[tag];
       if (!cachedTag)
-        cachedTag = cache2[tag] = createHTMLNode(element);
+        cachedTag = win.nodeCaches[tag] = createHTMLNode(element);
       const clonedNode = cachedTag.cloneNode(true);
       if (tag === "string")
         clonedNode.nodeValue = element.text;
@@ -17945,16 +17886,16 @@ var require_attr = __commonJS({
       default: () => attr_default
     });
     module2.exports = __toCommonJS12(attr_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_report = require_cjs4();
     var attr_default = (params, element, node2) => {
       const { __ref } = element;
       const { __attr } = __ref;
-      if ((0, import_utils44.isNot)("object"))
+      if ((0, import_utils43.isNot)("object"))
         (0, import_report.report)("HTMLInvalidAttr", params);
       if (params) {
         for (const attr in params) {
-          const val = (0, import_utils44.exec)(params[attr], element);
+          const val = (0, import_utils43.exec)(params[attr], element);
           if (val && node2.setAttribute)
             node2.setAttribute(attr, val);
           else if (node2.removeAttribute)
@@ -17997,7 +17938,7 @@ var require_classList = __commonJS({
       default: () => classList_default
     });
     module2.exports = __toCommonJS12(classList_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var assignKeyAsClassname = (element) => {
       const { key } = element;
       if (element.class === true)
@@ -18015,7 +17956,7 @@ var require_classList = __commonJS({
         else if (typeof param === "string")
           className += ` ${param}`;
         else if (typeof param === "function") {
-          className += ` ${(0, import_utils44.exec)(param, element)}`;
+          className += ` ${(0, import_utils43.exec)(param, element)}`;
         }
       }
       return className;
@@ -18026,9 +17967,9 @@ var require_classList = __commonJS({
       const { key } = element;
       if (params === true)
         params = element.class = { key };
-      if ((0, import_utils44.isString)(params))
+      if ((0, import_utils43.isString)(params))
         params = element.class = { default: params };
-      if ((0, import_utils44.isObject)(params))
+      if ((0, import_utils43.isObject)(params))
         params = classify2(params, element);
       const className = params.replace(/\s+/g, " ").trim();
       if (element.ref)
@@ -18113,7 +18054,7 @@ var require_set = __commonJS({
       resetElement: () => resetElement
     });
     module2.exports = __toCommonJS12(set_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_create = __toESM6(require_create4(), 1);
     var import_options5 = __toESM6(require_options(), 1);
     var import_mixins = require_mixins();
@@ -18136,7 +18077,7 @@ var require_set = __commonJS({
       const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
       if (options.preventContentUpdate === true && !hasCollection)
         return;
-      if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils44.deepContains)(params, content)) {
+      if (ref.__noCollectionDifference || __contentRef && __contentRef.__cached && (0, import_utils43.deepContains)(params, content)) {
         if (content == null ? void 0 : content.update)
           content.update();
         return;
@@ -18195,7 +18136,7 @@ var require_content = __commonJS({
       updateContent: () => updateContent
     });
     module2.exports = __toCommonJS12(content_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_set = __toESM6(require_set(), 1);
     var updateContent = function(params, options) {
       const element = this;
@@ -18218,7 +18159,7 @@ var require_content = __commonJS({
         if (__cached && __cached.content) {
           if (__cached.content.tag === "fragment")
             __cached.content.parent.node.innerHTML = "";
-          else if (__cached.content && (0, import_utils44.isFunction)(__cached.content.remove))
+          else if (__cached.content && (0, import_utils43.isFunction)(__cached.content.remove))
             __cached.content.remove();
         }
         delete element.content;
@@ -18263,15 +18204,15 @@ var require_data = __commonJS({
       default: () => data_default
     });
     module2.exports = __toCommonJS12(data_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_report = require_cjs4();
     var data_default = (params, element, node2) => {
       if (params && params.showOnNode) {
-        if (!(0, import_utils44.isObject)(params))
+        if (!(0, import_utils43.isObject)(params))
           (0, import_report.report)("HTMLInvalidData", params);
         for (const dataset in params) {
           if (dataset !== "showOnNode") {
-            node2.dataset[dataset] = (0, import_utils44.exec)(params[dataset], element);
+            node2.dataset[dataset] = (0, import_utils43.exec)(params[dataset], element);
           }
         }
       }
@@ -18305,9 +18246,9 @@ var require_html = __commonJS({
       default: () => html_default
     });
     module2.exports = __toCommonJS12(html_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var html_default = (param, element, node2) => {
-      const prop = (0, import_utils44.exec)(param, element);
+      const prop = (0, import_utils43.exec)(param, element);
       const { __ref } = element;
       if (prop !== __ref.__html) {
         if (node2.nodeName === "SVG")
@@ -18346,12 +18287,12 @@ var require_style = __commonJS({
       default: () => style_default2
     });
     module2.exports = __toCommonJS12(style_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_report = require_cjs4();
     var style_default2 = (params, element, node2) => {
       if (params) {
-        if ((0, import_utils44.isObject)(params))
-          (0, import_utils44.map)(node2.style, params, element);
+        if ((0, import_utils43.isObject)(params))
+          (0, import_utils43.map)(node2.style, params, element);
         else
           (0, import_report.report)("HTMLInvalidStyles", params);
       }
@@ -18386,11 +18327,11 @@ var require_text = __commonJS({
     });
     module2.exports = __toCommonJS12(text_exports);
     var import__ = require_cjs12();
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var text_default = (param, element, node2) => {
-      let prop = (0, import_utils44.exec)(param, element);
-      if ((0, import_utils44.isString)(prop) && prop.includes("{{")) {
-        prop = (0, import_utils44.replaceLiteralsWithObjectFields)(prop, element.state);
+      let prop = (0, import_utils43.exec)(param, element);
+      if ((0, import_utils43.isString)(prop) && prop.includes("{{")) {
+        prop = (0, import_utils43.replaceLiteralsWithObjectFields)(prop, element.state);
       }
       if (element.tag === "string") {
         node2.nodeValue = prop;
@@ -18436,10 +18377,10 @@ var require_state = __commonJS({
     });
     module2.exports = __toCommonJS12(state_exports);
     var import_state3 = require_cjs9();
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var state = (params, element, node2) => {
-      const state2 = (0, import_utils44.exec)(params, element);
-      if ((0, import_utils44.isObject)(state2)) {
+      const state2 = (0, import_utils43.exec)(params, element);
+      if ((0, import_utils43.isObject)(state2)) {
         for (const param in state2) {
           if (import_state3.IGNORE_STATE_PARAMS.includes(param))
             continue;
@@ -18479,13 +18420,13 @@ var require_scope = __commonJS({
       default: () => scope_default
     });
     module2.exports = __toCommonJS12(scope_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var scope_default = (params, element, node2) => {
-      if (!(0, import_utils44.isObject)(params))
+      if (!(0, import_utils43.isObject)(params))
         return;
       for (const scopeItem in params) {
         const value2 = params[scopeItem];
-        if ((0, import_utils44.isFunction)(value2)) {
+        if ((0, import_utils43.isFunction)(value2)) {
           element.scope[scopeItem] = value2.bind(element);
         } else {
           element.scope[scopeItem] = value2;
@@ -18705,7 +18646,7 @@ var require_methods2 = __commonJS({
       spotByPath: () => spotByPath
     });
     module2.exports = __toCommonJS12(methods_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_tree = require_tree();
     var import_mixins = require_mixins();
     var spotByPath = function(path) {
@@ -18727,7 +18668,7 @@ var require_methods2 = __commonJS({
     var lookup3 = function(param) {
       const el = this;
       let { parent } = el;
-      if ((0, import_utils44.isFunction)(param)) {
+      if ((0, import_utils43.isFunction)(param)) {
         if (parent.state && param(parent, parent.state, parent.context))
           return parent;
         else if (parent.parent)
@@ -18746,9 +18687,9 @@ var require_methods2 = __commonJS({
     };
     var remove = function() {
       const element = this;
-      if ((0, import_utils44.isFunction)(element.node.remove))
+      if ((0, import_utils43.isFunction)(element.node.remove))
         element.node.remove();
-      else if (!(0, import_utils44.isProduction)()) {
+      else if (!(0, import_utils43.isProduction)()) {
         console.warn("This item cant be removed");
         element.log();
       }
@@ -18788,8 +18729,8 @@ var require_methods2 = __commonJS({
         if (v === "state") {
           if (element.__ref && !element.__ref.__hasRootState)
             return;
-          const parsedVal = (0, import_utils44.isFunction)(val && val.parse) ? val.parse() : val;
-          obj[v] = (0, import_utils44.isFunction)(parsedVal) ? parsedVal : JSON.parse(JSON.stringify(parsedVal || {}));
+          const parsedVal = (0, import_utils43.isFunction)(val && val.parse) ? val.parse() : val;
+          obj[v] = (0, import_utils43.isFunction)(parsedVal) ? parsedVal : JSON.parse(JSON.stringify(parsedVal || {}));
         } else if (v === "scope") {
           if (element.__ref && !element.__ref.__hasRootScope)
             return;
@@ -18797,7 +18738,7 @@ var require_methods2 = __commonJS({
         } else if (v === "props") {
           const { __element, update, ...props2 } = element[v];
           obj[v] = props2;
-        } else if ((0, import_utils44.isDefined)(val))
+        } else if ((0, import_utils43.isDefined)(val))
           obj[v] = val;
       });
       return obj;
@@ -18808,7 +18749,7 @@ var require_methods2 = __commonJS({
       for (const v in obj) {
         if (excl.includes(v))
           return;
-        if ((0, import_utils44.isObjectLike)(obj[v])) {
+        if ((0, import_utils43.isObjectLike)(obj[v])) {
           obj[v] = parseDeep.call(obj[v], excl);
         }
       }
@@ -18926,18 +18867,18 @@ var require_inherit2 = __commonJS({
       inheritParentProps: () => inheritParentProps
     });
     module2.exports = __toCommonJS12(inherit_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var objectizeStringProperty = (propValue) => {
-      if ((0, import_utils44.is)(propValue)("string", "number")) {
+      if ((0, import_utils43.is)(propValue)("string", "number")) {
         return { inheritedString: propValue };
       }
       return propValue;
     };
     var inheritParentProps = (element, parent) => {
       let propsStack = [];
-      const parentProps = (0, import_utils44.exec)(parent, parent.state).props;
+      const parentProps = (0, import_utils43.exec)(parent, parent.state).props;
       const matchParent = parent.props && parentProps[element.key];
-      const matchParentIsString = (0, import_utils44.isString)(matchParent);
+      const matchParentIsString = (0, import_utils43.isString)(matchParent);
       const matchParentChildProps = parentProps && parentProps.childProps;
       if (matchParent) {
         if (matchParentIsString) {
@@ -18985,19 +18926,19 @@ var require_create3 = __commonJS({
       syncProps: () => syncProps
     });
     module2.exports = __toCommonJS12(create_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_ignore = require_ignore2();
     var import_inherit = require_inherit2();
     var createPropsStack = (element, parent) => {
       const { props: props2, __ref } = element;
       const propsStack = __ref.__props = (0, import_inherit.inheritParentProps)(element, parent);
-      if ((0, import_utils44.isObject)(props2))
+      if ((0, import_utils43.isObject)(props2))
         propsStack.push(props2);
       else if (props2 === "inherit" && parent.props)
         propsStack.push(parent.props);
       else if (props2)
         propsStack.push(props2);
-      if ((0, import_utils44.isArray)(__ref.__extend)) {
+      if ((0, import_utils43.isArray)(__ref.__extend)) {
         __ref.__extend.forEach((extend) => {
           if (extend.props && extend.props !== props2)
             propsStack.push(extend.props);
@@ -19012,10 +18953,10 @@ var require_create3 = __commonJS({
       props2.forEach((v) => {
         if (import_ignore.IGNORE_PROPS_PARAMS.includes(v))
           return;
-        const execProps = (0, import_utils44.exec)(v, element);
-        element.props = (0, import_utils44.deepMerge)(
+        const execProps = (0, import_utils43.exec)(v, element);
+        element.props = (0, import_utils43.deepMerge)(
           mergedProps,
-          (0, import_utils44.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
+          (0, import_utils43.deepClone)(execProps, import_ignore.IGNORE_PROPS_PARAMS),
           import_ignore.IGNORE_PROPS_PARAMS
         );
       });
@@ -19163,11 +19104,11 @@ var require_object2 = __commonJS({
       overwriteShallow: () => overwriteShallow3
     });
     module2.exports = __toCommonJS12(object_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_state3 = require_cjs9();
     var import_props = require_props();
     var import_methods = require_methods2();
-    var METHODS_EXL = (0, import_utils44.joinArrays)(
+    var METHODS_EXL = (0, import_utils43.joinArrays)(
       ["node", "state", "context", "extend", "__element"],
       import_methods.METHODS,
       import_state3.IGNORE_STATE_PARAMS,
@@ -19181,7 +19122,7 @@ var require_object2 = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils44.isObjectLike)(elementProp) && (0, import_utils44.isObject)(extendProp)) {
+        } else if ((0, import_utils43.isObjectLike)(elementProp) && (0, import_utils43.isObject)(extendProp)) {
           deepMerge7(elementProp, extendProp);
         }
       }
@@ -19197,15 +19138,15 @@ var require_object2 = __commonJS({
       return o;
     };
     var deepClone3 = (obj, exclude = METHODS_EXL) => {
-      const o = (0, import_utils44.isArray)(obj) ? [] : {};
+      const o = (0, import_utils43.isArray)(obj) ? [] : {};
       for (const e in obj) {
         if (exclude.includes(e))
           continue;
         let objProp = obj[e];
-        if (e === "extend" && (0, import_utils44.isArray)(objProp)) {
+        if (e === "extend" && (0, import_utils43.isArray)(objProp)) {
           objProp = mergeArray(objProp, exclude);
         }
-        if ((0, import_utils44.isObjectLike)(objProp)) {
+        if ((0, import_utils43.isObjectLike)(objProp)) {
           o[e] = deepClone3(objProp, exclude);
         } else
           o[e] = objProp;
@@ -19244,7 +19185,7 @@ var require_object2 = __commonJS({
           continue;
         const objProp = obj[e];
         const paramsProp = params[e];
-        if ((0, import_utils44.isObjectLike)(objProp) && (0, import_utils44.isObjectLike)(paramsProp)) {
+        if ((0, import_utils43.isObjectLike)(objProp) && (0, import_utils43.isObjectLike)(paramsProp)) {
           overwriteDeep4(objProp, paramsProp);
         } else if (paramsProp !== void 0) {
           obj[e] = paramsProp;
@@ -19253,7 +19194,7 @@ var require_object2 = __commonJS({
       return obj;
     };
     var mergeIfExisted = (a, b) => {
-      if ((0, import_utils44.isObjectLike)(a) && (0, import_utils44.isObjectLike)(b))
+      if ((0, import_utils43.isObjectLike)(a) && (0, import_utils43.isObjectLike)(b))
         return deepMerge7(a, b);
       return a || b;
     };
@@ -19261,7 +19202,7 @@ var require_object2 = __commonJS({
       return arr.reduce((a, c) => deepMerge7(a, deepClone3(c, exclude)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
-      return (0, import_utils44.isArray)(obj) ? mergeArray(obj) : deepClone3(obj);
+      return (0, import_utils43.isArray)(obj) ? mergeArray(obj) : deepClone3(obj);
     };
     var flattenRecursive = (param, prop, stack = []) => {
       const objectized = mergeAndCloneIfArray(param);
@@ -19315,7 +19256,7 @@ var require_extendUtils = __commonJS({
       setHashedExtend: () => setHashedExtend
     });
     module2.exports = __toCommonJS12(extendUtils_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var ENV2 = "development";
     var generateHash = () => Math.random().toString(36).substring(2);
     var extendStackRegistry = {};
@@ -19325,7 +19266,7 @@ var require_extendUtils = __commonJS({
     };
     var setHashedExtend = (extend, stack) => {
       const hash2 = generateHash();
-      if (!(0, import_utils44.isString)(extend)) {
+      if (!(0, import_utils43.isString)(extend)) {
         extend.__hash = hash2;
       }
       extendStackRegistry[hash2] = stack;
@@ -19351,9 +19292,9 @@ var require_extendUtils = __commonJS({
     var flattenExtend = (extend, stack, context) => {
       if (!extend)
         return stack;
-      if ((0, import_utils44.isArray)(extend))
+      if ((0, import_utils43.isArray)(extend))
         return extractArrayExtend(extend, stack, context);
-      if ((0, import_utils44.isString)(extend))
+      if ((0, import_utils43.isString)(extend))
         extend = fallbackStringExtend(extend, context);
       stack.push(extend);
       if (extend.extend)
@@ -19368,14 +19309,14 @@ var require_extendUtils = __commonJS({
         const extendProp = extend[e];
         if (elementProp === void 0) {
           element[e] = extendProp;
-        } else if ((0, import_utils44.isObject)(elementProp) && (0, import_utils44.isObject)(extendProp)) {
+        } else if ((0, import_utils43.isObject)(elementProp) && (0, import_utils43.isObject)(extendProp)) {
           deepMergeExtend(elementProp, extendProp);
-        } else if ((0, import_utils44.isArray)(elementProp) && (0, import_utils44.isArray)(extendProp)) {
+        } else if ((0, import_utils43.isArray)(elementProp) && (0, import_utils43.isArray)(extendProp)) {
           element[e] = elementProp.concat(extendProp);
-        } else if ((0, import_utils44.isArray)(elementProp) && (0, import_utils44.isObject)(extendProp)) {
+        } else if ((0, import_utils43.isArray)(elementProp) && (0, import_utils43.isObject)(extendProp)) {
           const obj = deepMergeExtend({}, elementProp);
           element[e] = deepMergeExtend(obj, extendProp);
-        } else if (elementProp === void 0 && (0, import_utils44.isFunction)(extendProp)) {
+        } else if (elementProp === void 0 && (0, import_utils43.isFunction)(extendProp)) {
           element[e] = extendProp;
         }
       }
@@ -19383,13 +19324,13 @@ var require_extendUtils = __commonJS({
     };
     var cloneAndMergeArrayExtend = (stack) => {
       return stack.reduce((a, c) => {
-        return deepMergeExtend(a, (0, import_utils44.deepCloneWithExtend)(c));
+        return deepMergeExtend(a, (0, import_utils43.deepCloneWithExtend)(c));
       }, {});
     };
     var fallbackStringExtend = (extend, context, options = {}) => {
       const COMPONENTS = context && context.components || options.components;
       const PAGES = context && context.pages || options.pages;
-      if ((0, import_utils44.isString)(extend)) {
+      if ((0, import_utils43.isString)(extend)) {
         const componentExists = COMPONENTS && (COMPONENTS[extend] || COMPONENTS["smbls." + extend]);
         const pageExists = PAGES && extend.startsWith("/") && PAGES[extend];
         if (componentExists)
@@ -19449,13 +19390,13 @@ var require_extend = __commonJS({
       applyExtend: () => applyExtend
     });
     module2.exports = __toCommonJS12(extend_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_utils210 = require_utils();
     var ENV2 = "development";
     var mainExtend;
     var applyExtend = (element, parent, options = {}) => {
-      if ((0, import_utils44.isFunction)(element))
-        element = (0, import_utils44.exec)(element, parent);
+      if ((0, import_utils43.isFunction)(element))
+        element = (0, import_utils43.exec)(element, parent);
       let { extend, props: props2, context, __ref } = element;
       extend = (0, import_utils210.fallbackStringExtend)(extend, context, options);
       const extendStack = (0, import_utils210.getExtendStack)(extend, context);
@@ -19500,7 +19441,7 @@ var require_extend = __commonJS({
         __ref.__extend = stack;
       let mergedExtend = (0, import_utils210.cloneAndMergeArrayExtend)(stack);
       const COMPONENTS = context && context.components || options.components;
-      const component = (0, import_utils44.exec)(element.component || mergedExtend.component, element);
+      const component = (0, import_utils43.exec)(element.component || mergedExtend.component, element);
       if (component && COMPONENTS && COMPONENTS[component]) {
         const componentExtend = (0, import_utils210.cloneAndMergeArrayExtend)((0, import_utils210.getExtendStack)(COMPONENTS[component]));
         mergedExtend = (0, import_utils210.deepMergeExtend)(componentExtend, mergedExtend);
@@ -19547,7 +19488,7 @@ var require_component = __commonJS({
       overwriteVariant: () => overwriteVariant
     });
     module2.exports = __toCommonJS12(component_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_extend = require_extend();
     var ENV2 = "development";
     var DOMQL_BUILTINS = [
@@ -19564,14 +19505,14 @@ var require_component = __commonJS({
       "tag"
     ];
     var checkIfKeyIsComponent3 = (key) => {
-      const isFirstKeyString = (0, import_utils44.isString)(key);
+      const isFirstKeyString = (0, import_utils43.isString)(key);
       if (!isFirstKeyString)
         return;
       const firstCharKey = key.slice(0, 1);
       return /^[A-Z]*$/.test(firstCharKey);
     };
     var checkIfKeyIsProperty = (key) => {
-      const isFirstKeyString = (0, import_utils44.isString)(key);
+      const isFirstKeyString = (0, import_utils43.isString)(key);
       if (!isFirstKeyString)
         return;
       const firstCharKey = key.slice(0, 1);
@@ -19579,9 +19520,9 @@ var require_component = __commonJS({
     };
     var addAdditionalExtend = (newExtend, element) => {
       const { extend: elementExtend } = element;
-      const originalArray = (0, import_utils44.isArray)(elementExtend) ? elementExtend : [elementExtend];
-      const receivedArray = (0, import_utils44.isArray)(newExtend) ? newExtend : [newExtend];
-      const extend = (0, import_utils44.joinArrays)(receivedArray, originalArray);
+      const originalArray = (0, import_utils43.isArray)(elementExtend) ? elementExtend : [elementExtend];
+      const receivedArray = (0, import_utils43.isArray)(newExtend) ? newExtend : [newExtend];
+      const extend = (0, import_utils43.joinArrays)(receivedArray, originalArray);
       return { ...element, extend };
     };
     var replaceOnKeys = (key) => key.replace(/on\w+/g, (match2) => match2.substring(2));
@@ -19611,7 +19552,7 @@ var require_component = __commonJS({
     var extendizeByKey = (element, parent, key) => {
       const { context, tag, extend, props: props2, attr, state, childExtend, childProps, on: on2, if: condition, data } = element;
       const hasComponentAttrs = extend || childExtend || props2 || state || on2 || condition || attr || data;
-      const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? key.split("_")[0] : key.includes(".") ? key.split(".")[0] : [key];
+      const extendFromKey = key.includes("+") ? key.split("+") : key.includes("_") ? key.split("_")[0] : key.includes(".") && !checkIfKeyIsComponent3(key.split(".")[1]) ? key.split(".")[0] : [key];
       const isExtendKeyComponent = context && context.components[extendFromKey];
       if (element === isExtendKeyComponent)
         return element;
@@ -19629,11 +19570,11 @@ var require_component = __commonJS({
         };
       } else if (extend) {
         return addAdditionalExtend(extendFromKey, element);
-      } else if ((0, import_utils44.isFunction)(element)) {
+      } else if ((0, import_utils43.isFunction)(element)) {
         return {
           extend: extendFromKey,
           tag,
-          props: { ...(0, import_utils44.exec)(element, parent) }
+          props: { ...(0, import_utils43.exec)(element, parent) }
         };
       }
     };
@@ -19646,8 +19587,8 @@ var require_component = __commonJS({
         return;
       const { components } = context;
       const { extend } = element;
-      const execExtend = (0, import_utils44.exec)(extend, element);
-      if ((0, import_utils44.isString)(execExtend)) {
+      const execExtend = (0, import_utils43.exec)(extend, element);
+      if ((0, import_utils43.isString)(execExtend)) {
         const componentExists = components[execExtend] || components["smbls." + execExtend];
         if (componentExists)
           element.extend = componentExists;
@@ -19661,29 +19602,29 @@ var require_component = __commonJS({
       }
     };
     var isVariant = (param) => {
-      if (!(0, import_utils44.isString)(param))
+      if (!(0, import_utils43.isString)(param))
         return;
       const firstCharKey = param.slice(0, 1);
       return firstCharKey === ".";
     };
     var hasVariantProp = (element) => {
       const { props: props2 } = element;
-      if ((0, import_utils44.isObject)(props2) && (0, import_utils44.isString)(props2.variant))
+      if ((0, import_utils43.isObject)(props2) && (0, import_utils43.isString)(props2.variant))
         return true;
     };
     var overwriteVariant = (element, variant, variantProps) => {
       let variantElement = element[variant];
       if (!variantElement)
         return;
-      const props2 = (0, import_utils44.isObject)(variantProps) ? variantProps : {};
-      if ((0, import_utils44.isString)(variantElement)) {
+      const props2 = (0, import_utils43.isObject)(variantProps) ? variantProps : {};
+      if ((0, import_utils43.isString)(variantElement)) {
         variantElement = {
           extend: [{ props: props2 }, variantElement]
         };
       } else if (variantElement.extend) {
         variantElement = addAdditionalExtend({ props: props2 }, variantElement);
       }
-      return (0, import_utils44.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
+      return (0, import_utils43.overwriteDeep)(element, (0, import_extend.applyExtend)(variantElement));
     };
     var applyVariant = (element) => {
       const { props: props2 } = element;
@@ -19758,7 +19699,7 @@ var require_iterate = __commonJS({
       throughUpdatedExec: () => throughUpdatedExec
     });
     module2.exports = __toCommonJS12(iterate_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_utils210 = require_utils();
     var import_methods = require_methods2();
     var throughInitialExec = (element, exclude = {}) => {
@@ -19767,7 +19708,7 @@ var require_iterate = __commonJS({
         if (exclude[param])
           continue;
         const prop = element[param];
-        if ((0, import_utils44.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
+        if ((0, import_utils43.isFunction)(prop) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
           ref.__exec[param] = prop;
           element[param] = prop(element, element.state, element.context);
         }
@@ -19782,7 +19723,7 @@ var require_iterate = __commonJS({
         if (isDefinedParam)
           continue;
         const newExec = ref.__exec[param](element, element.state, element.context);
-        const execReturnsString = (0, import_utils44.isString)(newExec) || (0, import_utils44.isNumber)(newExec);
+        const execReturnsString = (0, import_utils43.isString)(newExec) || (0, import_utils43.isNumber)(newExec);
         if (prop && prop.node && execReturnsString) {
           (0, import_utils210.overwrite)(prop, { text: newExec }, options);
         } else if (newExec !== prop) {
@@ -19800,16 +19741,16 @@ var require_iterate = __commonJS({
     var throughInitialDefine = (element) => {
       const { define, context, __ref: ref } = element;
       let defineObj = {};
-      const hasGlobalDefine = context && (0, import_utils44.isObject)(context.define);
-      if ((0, import_utils44.isObject)(define))
+      const hasGlobalDefine = context && (0, import_utils43.isObject)(context.define);
+      if ((0, import_utils43.isObject)(define))
         defineObj = { ...define };
       if (hasGlobalDefine)
         defineObj = { ...defineObj, ...context.define };
       for (const param in defineObj) {
         let elementProp = element[param];
-        if ((0, import_utils44.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
+        if ((0, import_utils43.isFunction)(elementProp) && !(0, import_methods.isMethod)(param) && !(0, import_utils210.isVariant)(param)) {
           ref.__exec[param] = elementProp;
-          const execParam2 = elementProp = (0, import_utils44.exec)(elementProp, element);
+          const execParam2 = elementProp = (0, import_utils43.exec)(elementProp, element);
           if (execParam2) {
             elementProp = element[param] = execParam2.parse ? execParam2.parse() : execParam2;
             ref.__defineCache[param] = elementProp;
@@ -19825,15 +19766,15 @@ var require_iterate = __commonJS({
       const { context, define, __ref: ref } = element;
       const changes = {};
       let obj = {};
-      if ((0, import_utils44.isObject)(define))
+      if ((0, import_utils43.isObject)(define))
         obj = { ...define };
-      if ((0, import_utils44.isObject)(context && context.define))
+      if ((0, import_utils43.isObject)(context && context.define))
         obj = { ...obj, ...context.define };
       for (const param in obj) {
         const execParam = ref.__exec[param];
         if (execParam)
           ref.__defineCache[param] = execParam(element, element.state, element.context);
-        const cached = (0, import_utils44.exec)(ref.__defineCache[param], element);
+        const cached = (0, import_utils43.exec)(ref.__defineCache[param], element);
         const newExecParam = obj[param](cached, element, element.state, element.context);
         if (newExecParam)
           element[param] = newExecParam;
@@ -19869,7 +19810,7 @@ var require_applyParam = __commonJS({
       applyParam: () => applyParam
     });
     module2.exports = __toCommonJS12(applyParam_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_mixins = require_mixins();
     var applyParam = (param, element, options) => {
       const { node: node2, context, __ref: ref } = element;
@@ -19882,7 +19823,7 @@ var require_applyParam = __commonJS({
       if (!ref.__if)
         return;
       if (isGlobalTransformer && !hasContextDefine) {
-        if ((0, import_utils44.isFunction)(isGlobalTransformer)) {
+        if ((0, import_utils43.isFunction)(isGlobalTransformer)) {
           isGlobalTransformer(prop, element, node2, options);
           return;
         }
@@ -19918,15 +19859,15 @@ var require_propEvents = __commonJS({
       propagateEventsFromProps: () => propagateEventsFromProps
     });
     module2.exports = __toCommonJS12(propEvents_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var propagateEventsFromProps = (element) => {
       const { props: props2, on: on2 } = element;
       const eventKeysFromProps = Object.keys(props2).filter((key) => key.startsWith("on"));
       eventKeysFromProps.forEach((v) => {
-        const eventName = (0, import_utils44.lowercaseFirstLetter)(v.split("on")[1]);
+        const eventName = (0, import_utils43.lowercaseFirstLetter)(v.split("on")[1]);
         const origEvent = on2[eventName];
         const funcFromProps = props2[v];
-        if ((0, import_utils44.isFunction)(origEvent)) {
+        if ((0, import_utils43.isFunction)(origEvent)) {
           on2[eventName] = (...args) => {
             const originalEventRetunrs = origEvent(...args);
             if (originalEventRetunrs !== false)
@@ -19976,7 +19917,7 @@ var require_node2 = __commonJS({
       default: () => node_default
     });
     module2.exports = __toCommonJS12(node_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_event = require_cjs5();
     var import_render = require_cjs10();
     var import_methods = require_methods2();
@@ -20002,27 +19943,27 @@ var require_node2 = __commonJS({
       }
       if (ENV2 === "test" || ENV2 === "development" || options.alowRefReference) {
         node2.ref = element;
-        if ((0, import_utils44.isFunction)(node2.setAttribute))
+        if ((0, import_utils43.isFunction)(node2.setAttribute))
           node2.setAttribute("key", element.key);
       }
       (0, import_iterate.throughInitialDefine)(element);
       (0, import_iterate.throughInitialExec)(element);
       if (element.tag !== "string" && element.tag !== "fragment") {
         (0, import_propEvents.propagateEventsFromProps)(element);
-        if (isNewNode && (0, import_utils44.isObject)(element.on))
+        if (isNewNode && (0, import_utils43.isObject)(element.on))
           (0, import_event.applyEventsOnNode)(element, options);
       }
       for (const param in element) {
         const value2 = element[param];
         if (!Object.hasOwnProperty.call(element, param))
           continue;
-        if ((0, import_utils44.isUndefined)(value2) || (0, import_methods.isMethod)(param) || (0, import_utils210.isVariant)(param) || (0, import_utils44.isObject)(import_mixins.registry[param]))
+        if ((0, import_utils43.isUndefined)(value2) || (0, import_methods.isMethod)(param) || (0, import_utils210.isVariant)(param) || (0, import_utils43.isObject)(import_mixins.registry[param]))
           continue;
         const isElement = (0, import_applyParam.applyParam)(param, element, options);
         if (isElement) {
           const { hasDefine, hasContextDefine } = isElement;
           if (element[param] && !hasDefine && !hasContextDefine) {
-            const createAsync3 = () => (0, import_create.default)((0, import_utils44.exec)(value2, element), element, param, options);
+            const createAsync3 = () => (0, import_create.default)((0, import_utils43.exec)(value2, element), element, param, options);
             if (element.props && element.props.lazyLoad || options.lazyLoad) {
               window.requestAnimationFrame(() => createAsync3());
             } else
@@ -20062,7 +20003,7 @@ var require_methods3 = __commonJS({
       DEFAULT_METHODS: () => DEFAULT_METHODS
     });
     module2.exports = __toCommonJS12(methods_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var DEFAULT_METHODS = {
       key: {},
       tag: {},
@@ -20083,7 +20024,7 @@ var require_methods3 = __commonJS({
       text: (element, state) => {
         element.ref.text = {
           tag: "text",
-          text: (0, import_utils44.exec)(element.text, element, state)
+          text: (0, import_utils43.exec)(element.text, element, state)
         };
       },
       innerHTML: {},
@@ -20320,7 +20261,7 @@ var require_update2 = __commonJS({
       default: () => update_default
     });
     module2.exports = __toCommonJS12(update_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_event = require_cjs5();
     var import_methods = require_methods2();
     var import_props = require_props();
@@ -20332,7 +20273,7 @@ var require_update2 = __commonJS({
     var import_applyParam = require_applyParam();
     var import_options5 = __toESM6(require_options(), 1);
     var snapshot = {
-      snapshotId: import_utils44.createSnapshotId
+      snapshotId: import_utils43.createSnapshotId
     };
     var UPDATE_DEFAULT_OPTIONS = {
       stackChanges: false,
@@ -20354,14 +20295,14 @@ var require_update2 = __commonJS({
       if (preventInheritAtCurrentState && preventInheritAtCurrentState.__element === element)
         return;
       if (!excludes)
-        (0, import_utils44.merge)(options, UPDATE_DEFAULT_OPTIONS);
+        (0, import_utils43.merge)(options, UPDATE_DEFAULT_OPTIONS);
       let ref = element.__ref;
       if (!ref)
         ref = element.__ref = {};
       const [snapshotOnCallee, calleeElement, snapshotHasUpdated] = captureSnapshot(element, options);
       if (snapshotHasUpdated)
         return;
-      if ((0, import_utils44.isString)(params) || (0, import_utils44.isNumber)(params)) {
+      if ((0, import_utils43.isString)(params) || (0, import_utils43.isNumber)(params)) {
         params = { text: params };
       }
       const inheritState = inheritStateUpdates(element, options);
@@ -20372,7 +20313,7 @@ var require_update2 = __commonJS({
         return;
       if (ref.__if && !options.preventPropsUpdate) {
         const hasParentProps = parent.props && (parent.props[key] || parent.props.childProps);
-        const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils44.isFunction)(v));
+        const hasFunctionInProps = ref.__props.filter((v) => (0, import_utils43.isFunction)(v));
         const props2 = params.props || hasParentProps || hasFunctionInProps.length;
         if (props2)
           (0, import_props.updateProps)(props2, element, parent);
@@ -20382,14 +20323,14 @@ var require_update2 = __commonJS({
         if (beforeUpdateReturns === false)
           return element;
       }
-      const overwriteChanges = (0, import_utils44.overwriteDeep)(element, params, import_utils210.METHODS_EXL);
+      const overwriteChanges = (0, import_utils43.overwriteDeep)(element, params, import_utils210.METHODS_EXL);
       const execChanges = (0, import_iterate.throughUpdatedExec)(element, { ignore: UPDATE_DEFAULT_OPTIONS });
       const definedChanges = (0, import_iterate.throughUpdatedDefine)(element);
       if (!options.isForced && !options.preventListeners) {
         (0, import_event.triggerEventOn)("beforeClassAssign", element, options);
       }
       if (options.stackChanges && element.__stackChanges) {
-        const stackChanges = (0, import_utils44.merge)(definedChanges, (0, import_utils44.merge)(execChanges, overwriteChanges));
+        const stackChanges = (0, import_utils43.merge)(definedChanges, (0, import_utils43.merge)(execChanges, overwriteChanges));
         element.__stackChanges.push(stackChanges);
       }
       if (!ref.__if)
@@ -20409,7 +20350,7 @@ var require_update2 = __commonJS({
         preventUpdateAfterCount
       } = options;
       if (preventUpdateAfter) {
-        if ((0, import_utils44.isNumber)(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount)
+        if ((0, import_utils43.isNumber)(preventUpdateAfterCount) && preventUpdateAfter <= preventUpdateAfterCount)
           return;
         else if (options.preventUpdateAfterCount === void 0)
           options.preventUpdateAfterCount = 1;
@@ -20421,17 +20362,17 @@ var require_update2 = __commonJS({
         if (!Object.hasOwnProperty.call(element, param))
           continue;
         const hasOnlyUpdateFalsy = onlyUpdate && (onlyUpdate !== param || !element.lookup(onlyUpdate));
-        const isInPreventUpdate = (0, import_utils44.isArray)(preventUpdate) && preventUpdate.includes(param);
-        const isInPreventDefineUpdate = (0, import_utils44.isArray)(preventDefineUpdate) && preventDefineUpdate.includes(param);
+        const isInPreventUpdate = (0, import_utils43.isArray)(preventUpdate) && preventUpdate.includes(param);
+        const isInPreventDefineUpdate = (0, import_utils43.isArray)(preventDefineUpdate) && preventDefineUpdate.includes(param);
         const hasCollection = element.$collection || element.$stateCollection || element.$propsCollection;
-        if ((0, import_utils44.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils44.isObject)(import_mixins.registry[param]) || (0, import_utils210.isVariant)(param))
+        if ((0, import_utils43.isUndefined)(prop) || hasOnlyUpdateFalsy || isInPreventUpdate || isInPreventDefineUpdate || preventDefineUpdate === true || preventDefineUpdate === param || preventContentUpdate && param === "content" && !hasCollection || (preventStateUpdate && param) === "state" || (0, import_methods.isMethod)(param) || (0, import_utils43.isObject)(import_mixins.registry[param]) || (0, import_utils210.isVariant)(param))
           continue;
         if (preventStateUpdate === "once")
           options.preventStateUpdate = false;
         const isElement = (0, import_applyParam.applyParam)(param, element, options);
         if (isElement) {
           const { hasDefine, hasContextDefine } = isElement;
-          const canUpdate = (0, import_utils44.isObject)(prop) && !hasDefine && !hasContextDefine && !preventRecursive;
+          const canUpdate = (0, import_utils43.isObject)(prop) && !hasDefine && !hasContextDefine && !preventRecursive;
           if (!canUpdate)
             continue;
           const lazyLoad = element.props.lazyLoad || options.lazyLoad;
@@ -20440,7 +20381,7 @@ var require_update2 = __commonJS({
             currentSnapshot: snapshotOnCallee,
             calleeElement
           });
-          lazyLoad ? import_utils44.window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
+          lazyLoad ? import_utils43.window.requestAnimationFrame(() => childUpdateCall()) : childUpdateCall();
         }
       }
       if (!preventUpdateListener)
@@ -20463,7 +20404,7 @@ var require_update2 = __commonJS({
     };
     var checkIfOnUpdate = (element, parent, options) => {
       var _a;
-      if (!(0, import_utils44.isFunction)(element.if) || !parent)
+      if (!(0, import_utils43.isFunction)(element.if) || !parent)
         return;
       const ref = element.__ref;
       const ifPassed = element.if(element, element.state, element.context, options);
@@ -20503,7 +20444,7 @@ var require_update2 = __commonJS({
           delete element.__ref;
           delete element.parent;
           const created = (0, import_create.default)(element, parent, element.key, import_options5.default.create, attachOptions);
-          if (options.preventUpdate !== true && element.on && (0, import_utils44.isFunction)(element.on.update)) {
+          if (options.preventUpdate !== true && element.on && (0, import_utils43.isFunction)(element.on.update)) {
             (0, import_event.applyEvent)(element.on.update, created, created.state);
           }
           return created;
@@ -20524,9 +20465,9 @@ var require_update2 = __commonJS({
         element.state = parent && parent.state || {};
         return;
       }
-      const shouldForceFunctionState = (0, import_utils44.isFunction)(stateKey) && !isHoisted && execStateFunction;
+      const shouldForceFunctionState = (0, import_utils43.isFunction)(stateKey) && !isHoisted && execStateFunction;
       if (shouldForceFunctionState) {
-        const execState = (0, import_utils44.exec)(stateKey, element);
+        const execState = (0, import_utils43.exec)(stateKey, element);
         state.set(execState, { ...options, preventUpdate: true, preventStateUpdateListener: false, updatedByStateFunction: true });
         return;
       }
@@ -20594,7 +20535,7 @@ var require_set2 = __commonJS({
       addMethods: () => addMethods
     });
     module2.exports = __toCommonJS12(set_exports);
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_set = __toESM6(require_set(), 1);
     var import_update = __toESM6(require_update2(), 1);
     var import__ = require_methods2();
@@ -20615,7 +20556,7 @@ var require_set2 = __commonJS({
         nextElement: import__.nextElement.bind(element),
         previousElement: import__.previousElement.bind(element)
       };
-      if ((0, import_utils44.isDevelopment)())
+      if ((0, import_utils43.isDevelopment)())
         proto.log = import__.log.bind(element);
       Object.setPrototypeOf(element, proto);
     };
@@ -20671,7 +20612,7 @@ var require_create4 = __commonJS({
     var import_set = require_set2();
     var import_classList = require_classList();
     var import_iterate = require_iterate();
-    var import_utils44 = require_cjs();
+    var import_utils43 = require_cjs();
     var import_options5 = __toESM6(require_options(), 1);
     var import_component = require_component();
     var ENV2 = "development";
@@ -20684,7 +20625,7 @@ var require_create4 = __commonJS({
       parent = redefineParent(element, parent, key);
       key = createKey(element, parent, key);
       const ref = addRef(element, parent, key);
-      ref.__initialProps = (0, import_utils44.deepClone)(element.props, []);
+      ref.__initialProps = (0, import_utils43.deepClone)(element.props, []);
       applyContext(element, parent, options);
       (0, import_component.applyComponentFromContext)(element, parent, options);
       if (!ref.__skipCreate) {
@@ -20727,7 +20668,7 @@ var require_create4 = __commonJS({
         }
         return {};
       }
-      if ((0, import_utils44.isString)(key) && key.slice(0, 2 === "__")) {
+      if ((0, import_utils43.isString)(key) && key.slice(0, 2 === "__")) {
         if (ENV2 === "test" || ENV2 === "development") {
           console.warn(key, "seems like to be in __ref");
         }
@@ -20760,7 +20701,7 @@ var require_create4 = __commonJS({
     var redefineParent = (element, parent, key, options) => {
       if (!parent)
         return import_tree.ROOT;
-      if ((0, import_utils44.isNode)(parent)) {
+      if ((0, import_utils43.isNode)(parent)) {
         const parentNodeWrapper = { key: ":root", node: parent };
         import_tree.ROOT[`${key}_parent`] = parentNodeWrapper;
         return parentNodeWrapper;
@@ -20774,7 +20715,7 @@ var require_create4 = __commonJS({
       }
     };
     var createKey = (element, parent, key) => {
-      return ((0, import_utils44.exec)(key, element) || key || element.key || (0, import_utils44.generateKey)()).toString();
+      return ((0, import_utils43.exec)(key, element) || key || element.key || (0, import_utils43.generateKey)()).toString();
     };
     var addRef = (element, parent) => {
       if (element.__ref)
@@ -20811,7 +20752,7 @@ var require_create4 = __commonJS({
       (0, import_event.triggerEventOn)("render", element, options);
       (0, import_event.triggerEventOn)("done", element, options);
     };
-    var checkIfPrimitive = (element) => (0, import_utils44.is)(element)("string", "number");
+    var checkIfPrimitive = (element) => (0, import_utils43.is)(element)("string", "number");
     var applyValueAsText = (element, parent, key) => {
       const extendTag = element.extend && element.extend.tag;
       const childExtendTag = parent.childExtend && parent.childExtend.tag;
@@ -20835,7 +20776,7 @@ var require_create4 = __commonJS({
     };
     var createIfConditionFlag = (element, parent) => {
       const { __ref: ref } = element;
-      if ((0, import_utils44.isFunction)(element.if) && !element.if(element, element.state)) {
+      if ((0, import_utils43.isFunction)(element.if) && !element.if(element, element.state)) {
         delete ref.__if;
       } else
         ref.__if = true;
@@ -20898,7 +20839,7 @@ var require_create4 = __commonJS({
         (0, import_iterate.throughInitialDefine)(element);
         (0, import_iterate.throughInitialExec)(element);
         for (const k in element) {
-          if ((0, import_utils44.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils44.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
+          if ((0, import_utils43.isUndefined)(element[k]) || (0, import_methods.isMethod)(k) || (0, import_utils43.isObject)(import_mixins.registry[k]) || (0, import_component.isVariant)(k))
             continue;
           const hasDefine = element.define && element.define[k];
           const contextHasDefine = element.context && element.context.define && element.context.define[k];
@@ -20906,7 +20847,7 @@ var require_create4 = __commonJS({
           if (!ref.__skipCreate && import_mixins.registry[k] && !optionsHasDefine) {
             continue;
           } else if (element[k] && !hasDefine && !optionsHasDefine && !contextHasDefine) {
-            create3((0, import_utils44.exec)(element[k], element), element, k, options);
+            create3((0, import_utils43.exec)(element[k], element), element, k, options);
           }
         }
       }
@@ -21071,11 +21012,11 @@ var require_cjs13 = __commonJS({
 });
 // ../../node_modules/@domql/classlist/index.js
-var import_utils19, classify, classList, applyClassListOnNode;
+var import_utils18, classify, classList, applyClassListOnNode;
 var init_classlist = __esm({
   "../../node_modules/@domql/classlist/index.js"() {
     "use strict";
-    import_utils19 = __toESM(require_cjs());
+    import_utils18 = __toESM(require_cjs());
     classify = (obj, element) => {
       let className = "";
       for (const item in obj) {
@@ -21085,7 +21026,7 @@ var init_classlist = __esm({
         else if (typeof param === "string")
           className += ` ${param}`;
         else if (typeof param === "function") {
-          className += ` ${(0, import_utils19.exec)(param, element)}`;
+          className += ` ${(0, import_utils18.exec)(param, element)}`;
         }
       }
       return className;
@@ -21096,9 +21037,9 @@ var init_classlist = __esm({
       const { key } = element;
       if (params === true)
         params = element.class = { key };
-      if ((0, import_utils19.isString)(params))
+      if ((0, import_utils18.isString)(params))
         params = element.class = { default: params };
-      if ((0, import_utils19.isObject)(params))
+      if ((0, import_utils18.isObject)(params))
         params = classify(params, element);
       const className = params.replace(/\s+/g, " ").trim();
       if (element.ref)
@@ -21120,32 +21061,32 @@ __export(emotion_exports2, {
   transformEmotionClass: () => transformEmotionClass,
   transformEmotionStyle: () => transformEmotionStyle
 });
-var import_utils20, transformEmotionStyle, transformEmotionClass, transformDOMQLEmotion;
-var init_emotion3 = __esm({
+var import_utils19, transformEmotionStyle, transformEmotionClass, transformDOMQLEmotion;
+var init_emotion4 = __esm({
   "../../node_modules/@domql/emotion/index.js"() {
     "use strict";
-    import_utils20 = __toESM(require_cjs());
+    import_utils19 = __toESM(require_cjs());
     init_classlist();
     init_emotion_css_create_instance_esm();
-    transformEmotionStyle = (emotion3) => {
+    transformEmotionStyle = (emotion4) => {
       return (params, element, state) => {
-        const execParams = (0, import_utils20.exec)(params, element);
+        const execParams = (0, import_utils19.exec)(params, element);
         if (params) {
-          if ((0, import_utils20.isObjectLike)(element.class))
+          if ((0, import_utils19.isObjectLike)(element.class))
             element.class.elementStyle = execParams;
           else
             element.class = { elementStyle: execParams };
         }
-        transformEmotionClass(emotion3)(element.class, element, element.state, true);
+        transformEmotionClass(emotion4)(element.class, element, element.state, true);
       };
     };
-    transformEmotionClass = (emotion3) => {
+    transformEmotionClass = (emotion4) => {
       return (params, element, state, flag) => {
         if (element.style && !flag)
           return;
         const { __ref } = element;
         const { __class, __classNames } = __ref;
-        if (!(0, import_utils20.isObjectLike)(params))
+        if (!(0, import_utils19.isObjectLike)(params))
           return;
         if (element.props.class) {
           __classNames.classProps = element.props.class;
@@ -21154,17 +21095,17 @@ var init_emotion3 = __esm({
           __classNames.class = element.attr.class;
         }
         for (const key in params) {
-          const prop = (0, import_utils20.exec)(params[key], element);
+          const prop = (0, import_utils19.exec)(params[key], element);
           if (!prop) {
             delete __class[key];
             delete __classNames[key];
             continue;
           }
-          const isEqual = (0, import_utils20.isEqualDeep)(__class[key], prop);
+          const isEqual = (0, import_utils19.isEqualDeep)(__class[key], prop);
           if (!isEqual) {
-            if (!(0, import_utils20.isProduction)() && (0, import_utils20.isObject)(prop))
+            if (!(0, import_utils19.isProduction)() && (0, import_utils19.isObject)(prop))
               prop.label = key || element.key;
-            const CSSed = emotion3.css(prop);
+            const CSSed = emotion4.css(prop);
             __class[key] = prop;
             __classNames[key] = CSSed;
           }
@@ -21172,231 +21113,231 @@ var init_emotion3 = __esm({
         applyClassListOnNode(__classNames, element, element.node);
       };
     };
-    transformDOMQLEmotion = (emotion3, options) => {
-      if (!emotion3)
-        emotion3 = createEmotion(options || { key: "smbls" });
+    transformDOMQLEmotion = (emotion4, options) => {
+      if (!emotion4)
+        emotion4 = createEmotion(options || { key: "smbls" });
       return {
-        style: transformEmotionStyle(emotion3),
-        class: transformEmotionClass(emotion3)
+        style: transformEmotionStyle(emotion4),
+        class: transformEmotionClass(emotion4)
       };
     };
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/logo.svg
+// node_modules/@symbo.ls/default-icons/src/logo.svg
 var require_logo2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/logo.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/logo.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-down-circle.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-down-circle.svg
 var require_arrow_down_circle2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-down-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-down-circle.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-down-left.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-down-left.svg
 var require_arrow_down_left2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-down-left.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-down-left.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-down-right.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-down-right.svg
 var require_arrow_down_right2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-down-right.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-down-right.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-down.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-down.svg
 var require_arrow_down2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-down.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-down.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-left-circle.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-left-circle.svg
 var require_arrow_left_circle2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-left-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-left-circle.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-left.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-left.svg
 var require_arrow_left2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-left.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-left.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-right.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-right.svg
 var require_arrow_right2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-right.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-right.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-right-circle.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-right-circle.svg
 var require_arrow_right_circle2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-right-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-right-circle.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-up-circle.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-up-circle.svg
 var require_arrow_up_circle2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-up-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-up-circle.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-up-left.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-up-left.svg
 var require_arrow_up_left2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-up-left.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-up-left.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-up-right.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-up-right.svg
 var require_arrow_up_right2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-up-right.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-up-right.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/arrow-up.svg
+// node_modules/@symbo.ls/default-icons/src/arrow-up.svg
 var require_arrow_up2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/arrow-up.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/arrow-up.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/check-circle.svg
+// node_modules/@symbo.ls/default-icons/src/check-circle.svg
 var require_check_circle2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/check-circle.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/check-circle.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/check.svg
+// node_modules/@symbo.ls/default-icons/src/check.svg
 var require_check2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/check.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/check.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/chevron-down.svg
+// node_modules/@symbo.ls/default-icons/src/chevron-down.svg
 var require_chevron_down2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/chevron-down.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/chevron-down.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/chevron-left.svg
+// node_modules/@symbo.ls/default-icons/src/chevron-left.svg
 var require_chevron_left2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/chevron-left.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/chevron-left.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/chevron-right.svg
+// node_modules/@symbo.ls/default-icons/src/chevron-right.svg
 var require_chevron_right2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/chevron-right.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/chevron-right.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/chevron-up.svg
+// node_modules/@symbo.ls/default-icons/src/chevron-up.svg
 var require_chevron_up2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/chevron-up.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/chevron-up.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/copy.svg
+// node_modules/@symbo.ls/default-icons/src/copy.svg
 var require_copy2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/copy.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/copy.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/eye-off.svg
+// node_modules/@symbo.ls/default-icons/src/eye-off.svg
 var require_eye_off2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/eye-off.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/eye-off.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/eye.svg
+// node_modules/@symbo.ls/default-icons/src/eye.svg
 var require_eye2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/eye.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/eye.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/info.svg
+// node_modules/@symbo.ls/default-icons/src/info.svg
 var require_info2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/info.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/info.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/minus.svg
+// node_modules/@symbo.ls/default-icons/src/minus.svg
 var require_minus2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/minus.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/minus.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/sun.svg
+// node_modules/@symbo.ls/default-icons/src/sun.svg
 var require_sun2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/sun.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/sun.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/moon.svg
+// node_modules/@symbo.ls/default-icons/src/moon.svg
 var require_moon2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/moon.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/moon.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/more-horizontal.svg
+// node_modules/@symbo.ls/default-icons/src/more-horizontal.svg
 var require_more_horizontal2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/more-horizontal.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/more-horizontal.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/more-vertical.svg
+// node_modules/@symbo.ls/default-icons/src/more-vertical.svg
 var require_more_vertical2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/more-vertical.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/more-vertical.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/send.svg
+// node_modules/@symbo.ls/default-icons/src/send.svg
 var require_send2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/send.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/send.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/smile.svg
+// node_modules/@symbo.ls/default-icons/src/smile.svg
 var require_smile2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/smile.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/smile.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/search.svg
+// node_modules/@symbo.ls/default-icons/src/search.svg
 var require_search2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/search.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/search.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/upload.svg
+// node_modules/@symbo.ls/default-icons/src/upload.svg
 var require_upload2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/upload.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/upload.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/video.svg
+// node_modules/@symbo.ls/default-icons/src/video.svg
 var require_video2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/video.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/video.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/x.svg
+// node_modules/@symbo.ls/default-icons/src/x.svg
 var require_x2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/x.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/x.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/src/plus.svg
+// node_modules/@symbo.ls/default-icons/src/plus.svg
 var require_plus2 = __commonJS({
-  "../../node_modules/@symbo.ls/default-icons/src/plus.svg"() {
+  "node_modules/@symbo.ls/default-icons/src/plus.svg"() {
   }
 });
-// ../../node_modules/@symbo.ls/default-icons/index.js
+// node_modules/@symbo.ls/default-icons/index.js
 var default_icons_default;
 var init_default_icons = __esm({
-  "../../node_modules/@symbo.ls/default-icons/index.js"() {
+  "node_modules/@symbo.ls/default-icons/index.js"() {
     "use strict";
     default_icons_default = {
       logo: require_logo2(),
@@ -21438,10 +21379,10 @@ var init_default_icons = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/default-config/src/color.js
+// node_modules/@symbo.ls/default-config/src/color.js
 var COLOR2, GRADIENT2;
 var init_color2 = __esm({
-  "../../node_modules/@symbo.ls/default-config/src/color.js"() {
+  "node_modules/@symbo.ls/default-config/src/color.js"() {
     "use strict";
     COLOR2 = {
       blue: "#213eb0",
@@ -21512,10 +21453,10 @@ var init_color2 = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/default-config/src/theme.js
+// node_modules/@symbo.ls/default-config/src/theme.js
 var PRIORITIES2, STATES2, UI2, THEME2;
 var init_theme2 = __esm({
-  "../../node_modules/@symbo.ls/default-config/src/theme.js"() {
+  "node_modules/@symbo.ls/default-config/src/theme.js"() {
     "use strict";
     PRIORITIES2 = {
       primary: {
@@ -21734,10 +21675,10 @@ var init_theme2 = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/default-config/src/typography.js
+// node_modules/@symbo.ls/default-config/src/typography.js
 var TYPOGRAPHY2;
 var init_typography2 = __esm({
-  "../../node_modules/@symbo.ls/default-config/src/typography.js"() {
+  "node_modules/@symbo.ls/default-config/src/typography.js"() {
     "use strict";
     TYPOGRAPHY2 = {
       base: 16,
@@ -21748,10 +21689,10 @@ var init_typography2 = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/default-config/src/spacing.js
+// node_modules/@symbo.ls/default-config/src/spacing.js
 var SPACING2;
 var init_spacing2 = __esm({
-  "../../node_modules/@symbo.ls/default-config/src/spacing.js"() {
+  "node_modules/@symbo.ls/default-config/src/spacing.js"() {
     "use strict";
     SPACING2 = {
       ratio: 1.618,
@@ -21760,10 +21701,10 @@ var init_spacing2 = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/default-config/src/font.js
+// node_modules/@symbo.ls/default-config/src/font.js
 var FONT2, FONT_FAMILY2;
 var init_font2 = __esm({
-  "../../node_modules/@symbo.ls/default-config/src/font.js"() {
+  "node_modules/@symbo.ls/default-config/src/font.js"() {
     "use strict";
     FONT2 = {
       SourceSans: [{
@@ -21779,10 +21720,10 @@ var init_font2 = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/default-config/src/media.js
+// node_modules/@symbo.ls/default-config/src/media.js
 var MEDIA2;
 var init_media2 = __esm({
-  "../../node_modules/@symbo.ls/default-config/src/media.js"() {
+  "node_modules/@symbo.ls/default-config/src/media.js"() {
     "use strict";
     MEDIA2 = {
       tv: "(min-width: 2780px)",
@@ -21813,10 +21754,10 @@ var init_media2 = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/default-config/src/timing.js
+// node_modules/@symbo.ls/default-config/src/timing.js
 var TIMING2;
 var init_timing2 = __esm({
-  "../../node_modules/@symbo.ls/default-config/src/timing.js"() {
+  "node_modules/@symbo.ls/default-config/src/timing.js"() {
     "use strict";
     TIMING2 = {
       base: 150,
@@ -21827,7 +21768,7 @@ var init_timing2 = __esm({
   }
 });
-// ../../node_modules/@symbo.ls/default-config/src/index.js
+// node_modules/@symbo.ls/default-config/src/index.js
 var src_exports = {};
 __export(src_exports, {
   DEFAULT_CONFIG: () => DEFAULT_CONFIG2,
@@ -21835,7 +21776,7 @@ __export(src_exports, {
 });
 var DEFAULT_CONFIG2, src_default;
 var init_src2 = __esm({
-  "../../node_modules/@symbo.ls/default-config/src/index.js"() {
+  "node_modules/@symbo.ls/default-config/src/index.js"() {
     "use strict";
     init_default_icons();
     init_color2();
@@ -21878,7 +21819,7 @@ var init_src2 = __esm({
 // dist/cjs/initEmotion.js
 var initEmotion_exports = {};
-var __create2, __defProp8, __getOwnPropDesc8, __getOwnPropNames8, __getProtoOf2, __hasOwnProp8, __export8, __copyProps8, __toESM2, __toCommonJS8, initEmotion_exports2, import_emotion3, import_emotion22, import_init4, import_utils21, import_options, import_default_config, initEmotion;
+var __create2, __defProp8, __getOwnPropDesc8, __getOwnPropNames8, __getProtoOf2, __hasOwnProp8, __export8, __copyProps8, __toESM2, __toCommonJS8, initEmotion_exports2, import_emotion3, import_emotion22, import_init4, import_utils20, import_options, import_default_config, initEmotion;
 var init_initEmotion = __esm({
   "dist/cjs/initEmotion.js"() {
     "use strict";
@@ -21914,37 +21855,37 @@ var init_initEmotion = __esm({
       initEmotion: () => initEmotion
     });
     module.exports = __toCommonJS8(initEmotion_exports2);
-    import_emotion3 = (init_emotion3(), __toCommonJS(emotion_exports2));
-    import_emotion22 = (init_emotion2(), __toCommonJS(emotion_exports));
+    import_emotion3 = (init_emotion4(), __toCommonJS(emotion_exports2));
+    import_emotion22 = (init_emotion3(), __toCommonJS(emotion_exports));
     import_init4 = (init_init(), __toCommonJS(init_exports));
-    import_utils21 = require_cjs();
+    import_utils20 = require_cjs();
     import_options = (init_options(), __toCommonJS(options_exports));
     import_default_config = __toESM2((init_src2(), __toCommonJS(src_exports)), 1);
     initEmotion = (key, options = {}) => {
       const doc = options.parent || options.document || document;
       const initOptions = options.initOptions || {};
-      const emotion3 = initOptions.emotion;
+      const emotion4 = initOptions.emotion;
       if (!initOptions.emotion)
         initOptions.emotion = import_emotion22.emotion;
       const registry = options.registry || (0, import_emotion3.transformDOMQLEmotion)(initOptions.emotion, options);
-      const defaultDesignSystem = (0, import_utils21.deepClone)(import_default_config.default);
-      const designSystem = initOptions.useDefaultConfig || options.useDefaultConfig ? (0, import_utils21.deepMerge)(options.designSystem, defaultDesignSystem) : options.designSystem || defaultDesignSystem;
+      const defaultDesignSystem = (0, import_utils20.deepClone)(import_default_config.default);
+      const designSystem = initOptions.useDefaultConfig || options.useDefaultConfig ? (0, import_utils20.deepMerge)(options.designSystem, defaultDesignSystem) : options.designSystem || defaultDesignSystem;
       const scratchSystem2 = (0, import_init4.init)(designSystem, {
         key,
-        emotion: emotion3,
+        emotion: emotion4,
         verbose: options.verbose,
         document: doc,
         ...import_options.DESIGN_SYSTEM_OPTIONS,
         ...initOptions
       });
-      return [scratchSystem2, emotion3, registry];
+      return [scratchSystem2, emotion4, registry];
     };
   }
 });
 // dist/cjs/prepare.js
 var prepare_exports = {};
-var __create3, __defProp9, __getOwnPropDesc9, __getOwnPropNames9, __getProtoOf3, __hasOwnProp9, __export9, __copyProps9, __toESM3, __toCommonJS9, prepare_exports2, import_utils22, import_initEmotion, uikit, utils2, checkIfKeyIsComponent, UIkitWithPrefix, prepareComponents, prepareUtils, preparePackages, prepareDesignSystem, prepareState, preparePages, prepareDocument;
+var __create3, __defProp9, __getOwnPropDesc9, __getOwnPropNames9, __getProtoOf3, __hasOwnProp9, __export9, __copyProps9, __toESM3, __toCommonJS9, prepare_exports2, import_utils21, import_initEmotion, uikit, utils2, checkIfKeyIsComponent, UIkitWithPrefix, prepareComponents, prepareUtils, preparePackages, prepareDesignSystem, prepareState, preparePages, prepareDocument;
 var init_prepare = __esm({
   "dist/cjs/prepare.js"() {
     "use strict";
@@ -21987,12 +21928,12 @@ var init_prepare = __esm({
       prepareUtils: () => prepareUtils
     });
     module.exports = __toCommonJS9(prepare_exports2);
-    import_utils22 = require_cjs();
+    import_utils21 = require_cjs();
     import_initEmotion = (init_initEmotion(), __toCommonJS(initEmotion_exports));
     uikit = __toESM3((init_uikit(), __toCommonJS(uikit_exports)), 1);
     utils2 = __toESM3((init_utilImports(), __toCommonJS(utilImports_exports2)), 1);
     checkIfKeyIsComponent = (key) => {
-      const isFirstKeyString = (0, import_utils22.isString)(key);
+      const isFirstKeyString = (0, import_utils21.isString)(key);
       if (!isFirstKeyString)
         return;
       const firstCharKey = key.slice(0, 1);
@@ -22020,23 +21961,23 @@ var init_prepare = __esm({
     preparePackages = (packages, opts) => {
       const windowOpts = opts.window || window;
       if (windowOpts.packages) {
-        windowOpts.packages = (0, import_utils22.merge)(windowOpts.packages, packages);
+        windowOpts.packages = (0, import_utils21.merge)(windowOpts.packages, packages);
       } else {
         windowOpts.packages = packages;
         windowOpts.require = (key) => windowOpts.packages[key];
       }
     };
     prepareDesignSystem = (options, key) => {
-      const [scratcDesignhSystem, emotion3, registry] = (0, import_initEmotion.initEmotion)(key, options);
-      return [scratcDesignhSystem, emotion3, registry];
+      const [scratcDesignhSystem, emotion4, registry] = (0, import_initEmotion.initEmotion)(key, options);
+      return [scratcDesignhSystem, emotion4, registry];
     };
     prepareState = (options, App) => {
       const state = {};
       if (options.state)
         utils2.deepMerge(state, options.state);
       if (App && App.state)
-        (0, import_utils22.deepMerge)(state, App.state);
-      return (0, import_utils22.deepCloneWithExtend)(state);
+        (0, import_utils21.deepMerge)(state, App.state);
+      return (0, import_utils21.deepCloneWithExtend)(state);
     };
     preparePages = (options) => {
       const pages = options.pages;
@@ -22069,7 +22010,7 @@ var init_prepare = __esm({
 // dist/cjs/createDomql.js
 var createDomql_exports = {};
-var __create4, __defProp10, __getOwnPropDesc10, __getOwnPropNames10, __getProtoOf4, __hasOwnProp10, __export10, __copyProps10, __toESM4, __toCommonJS10, createDomql_exports2, import_domql, import_utils23, uikit2, import_define2, import_router3, import_syncExtend, import_prepare, SYMBOLS_KEY, createDomqlElement;
+var __create4, __defProp10, __getOwnPropDesc10, __getOwnPropNames10, __getProtoOf4, __hasOwnProp10, __export10, __copyProps10, __toESM4, __toCommonJS10, createDomql_exports2, import_domql, import_utils22, uikit2, import_define2, import_router3, import_syncExtend, import_prepare, SYMBOLS_KEY, createDomqlElement;
 var init_createDomql = __esm({
   "dist/cjs/createDomql.js"() {
     "use strict";
@@ -22106,7 +22047,7 @@ var init_createDomql = __esm({
     });
     module.exports = __toCommonJS10(createDomql_exports2);
     import_domql = __toESM4(require_cjs13(), 1);
-    import_utils23 = require_cjs();
+    import_utils22 = require_cjs();
     uikit2 = __toESM4((init_uikit(), __toCommonJS(uikit_exports)), 1);
     import_define2 = (init_define(), __toCommonJS(define_exports));
     import_router3 = (init_router(), __toCommonJS(router_exports));
@@ -22114,9 +22055,9 @@ var init_createDomql = __esm({
     import_prepare = (init_prepare(), __toCommonJS(prepare_exports));
     SYMBOLS_KEY = process.env.SYMBOLS_KEY;
     createDomqlElement = (App, options) => {
-      const key = options.key || SYMBOLS_KEY || ((0, import_utils23.isString)(App) ? App : "");
-      const [scratcDesignSystem, emotion3, registry] = (0, import_prepare.prepareDesignSystem)(options, key);
-      if ((0, import_utils23.isString)(App))
+      const key = options.key || SYMBOLS_KEY || ((0, import_utils22.isString)(App) ? App : "");
+      const [scratcDesignSystem, emotion4, registry] = (0, import_prepare.prepareDesignSystem)(options, key);
+      if ((0, import_utils22.isString)(App))
         App = {};
       const doc = (0, import_prepare.prepareDocument)(options);
       const state = (0, import_prepare.prepareState)(options, App);
@@ -22145,7 +22086,7 @@ var init_createDomql = __esm({
           utils: snippets,
           define,
           registry,
-          emotion: emotion3,
+          emotion: emotion4,
           routerOptions,
           socket: options.socket,
           editor: options.editor,
@@ -22162,7 +22103,7 @@ var init_createDomql = __esm({
 });
 // dist/cjs/index.js
-var __create5, __defProp11, __getOwnPropDesc11, __getOwnPropNames11, __getProtoOf5, __hasOwnProp11, __export11, __copyProps11, __toESM5, __toCommonJS11, src_exports2, import_utils24, utils3, import_router4, import_ferchOnCreate, import_syncExtend2, import_options2, import_dynamic2, import_createDomql, SYMBOLS_KEY2, mergeWithLocalFile2, create, createAsync, createSync, createSkeleton, src_default2;
+var __create5, __defProp11, __getOwnPropDesc11, __getOwnPropNames11, __getProtoOf5, __hasOwnProp11, __export11, __copyProps11, __toESM5, __toCommonJS11, src_exports2, import_utils23, utils3, import_router4, import_ferchOnCreate, import_syncExtend2, import_options2, import_dynamic2, import_createDomql, SYMBOLS_KEY2, mergeWithLocalFile2, create, createAsync, createSync, createSkeleton, src_default2;
 var init_cjs = __esm({
   "dist/cjs/index.js"() {
     "use strict";
@@ -22202,7 +22143,7 @@ var init_cjs = __esm({
       default: () => src_default2
     });
     module.exports = __toCommonJS11(src_exports2);
-    import_utils24 = require_cjs();
+    import_utils23 = require_cjs();
     utils3 = __toESM5((init_utilImports(), __toCommonJS(utilImports_exports2)), 1);
     import_router4 = (init_router(), __toCommonJS(router_exports));
     import_ferchOnCreate = (init_ferchOnCreate(), __toCommonJS(ferchOnCreate_exports));
@@ -22211,9 +22152,9 @@ var init_cjs = __esm({
     import_dynamic2 = __toESM5(require_dynamic(), 1);
     import_createDomql = (init_createDomql(), __toCommonJS(createDomql_exports));
     SYMBOLS_KEY2 = process.env.SYMBOLS_KEY;
-    mergeWithLocalFile2 = (options, optionsExternalFile) => (0, import_utils24.deepMerge)(
+    mergeWithLocalFile2 = (options, optionsExternalFile) => (0, import_utils23.deepMerge)(
       options,
-      (0, import_utils24.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic2.default || {}
+      (0, import_utils23.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic2.default || {}
     );
     create = (App, options = import_options2.default, optionsExternalFile) => {
       const redefinedOptions = { ...import_options2.default, ...mergeWithLocalFile2(options, optionsExternalFile) };
@@ -22240,10 +22181,13 @@ var init_cjs = __esm({
         redefinedOptions.on.create(domqlApp, redefinedOptions);
       return domqlApp;
     };
-    createSkeleton = (App, options = import_options2.default, optionsExternalFile) => {
+    createSkeleton = (App = {}, options = import_options2.default, optionsExternalFile) => {
       return create(
-        App,
-        (0, import_utils24.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+        {
+          deps: { isUndefined: import_utils23.isUndefined },
+          ...App
+        },
+        (0, import_utils23.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
         optionsExternalFile
       );
     };
@@ -22431,7 +22375,7 @@ __export(smbls_exports, {
   Video: () => Video,
   XYZ: () => XYZ2,
   applyCSS: () => applyCSS,
-  createEmotion: () => createEmotion6,
+  createEmotion: () => createEmotion4,
   emotion: () => emotion2,
   getSystemGlobalTheme: () => getSystemGlobalTheme2,
   init: () => init,
@@ -22691,13 +22635,13 @@ var init_style2 = __esm({
 });
 // ../uikit/Atoms/Theme.js
-var import_scratch17, import_utils25, getSystemGlobalTheme2, Theme2;
+var import_scratch17, import_utils24, getSystemGlobalTheme2, Theme2;
 var init_Theme2 = __esm({
   "../uikit/Atoms/Theme.js"() {
     "use strict";
     import_scratch17 = __toESM(require_cjs2());
     init_style2();
-    import_utils25 = __toESM(require_cjs());
+    import_utils24 = __toESM(require_cjs());
     getSystemGlobalTheme2 = ({ context, state }) => {
       const rootState = state && state.root;
       return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
@@ -22715,7 +22659,7 @@ var init_Theme2 = __esm({
         transformBackgroundImage: import_scratch17.transformBackgroundImage
       },
       class: {
-        depth: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.depth) && deps.depth[props2.depth],
+        depth: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.depth) && deps.depth[props2.depth],
         theme: (element) => {
           const { props: props2, deps } = element;
           const globalTheme = deps.getSystemGlobalTheme(element);
@@ -22767,22 +22711,22 @@ var init_Theme2 = __esm({
             backgroundImage: deps.transformBackgroundImage(props2.backgroundImage, globalTheme)
           };
         },
-        backgroundSize: ({ props: props2 }) => !(0, import_utils25.isUndefined)(props2.backgroundSize) ? {
+        backgroundSize: ({ props: props2 }) => !(0, import_utils24.isUndefined)(props2.backgroundSize) ? {
           backgroundSize: props2.backgroundSize
         } : null,
-        backgroundPosition: ({ props: props2 }) => !(0, import_utils25.isUndefined)(props2.backgroundPosition) ? {
+        backgroundPosition: ({ props: props2 }) => !(0, import_utils24.isUndefined)(props2.backgroundPosition) ? {
           backgroundPosition: props2.backgroundPosition
         } : null,
-        backgroundRepeat: ({ props: props2 }) => !(0, import_utils25.isUndefined)(props2.backgroundRepeat) ? {
+        backgroundRepeat: ({ props: props2 }) => !(0, import_utils24.isUndefined)(props2.backgroundRepeat) ? {
           backgroundRepeat: props2.backgroundRepeat
         } : null,
-        textStroke: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.textStroke) ? {
+        textStroke: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.textStroke) ? {
           WebkitTextStroke: deps.transformTextStroke(props2.textStroke)
         } : null,
-        outline: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.outline) && {
+        outline: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.outline) && {
           outline: deps.transformBorder(props2.outline)
         },
-        border: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.border) && {
+        border: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.border) && {
           border: deps.transformBorder(props2.border)
         },
         borderColor: (element) => {
@@ -22794,19 +22738,19 @@ var init_Theme2 = __esm({
             borderColor: deps.getMediaColor(props2.borderColor, globalTheme)
           };
         },
-        borderStyle: ({ props: props2 }) => !(0, import_utils25.isUndefined)(props2.borderStyle) && {
+        borderStyle: ({ props: props2 }) => !(0, import_utils24.isUndefined)(props2.borderStyle) && {
           borderStyle: props2.borderStyle
         },
-        borderLeft: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.borderLeft) && {
+        borderLeft: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.borderLeft) && {
           borderLeft: deps.transformBorder(props2.borderLeft)
         },
-        borderTop: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.borderTop) && {
+        borderTop: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.borderTop) && {
           borderTop: deps.transformBorder(props2.borderTop)
         },
-        borderRight: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.borderRight) && {
+        borderRight: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.borderRight) && {
           borderRight: deps.transformBorder(props2.borderRight)
         },
-        borderBottom: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.borderBottom) && {
+        borderBottom: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.borderBottom) && {
           borderBottom: deps.transformBorder(props2.borderBottom)
         },
         shadow: (element) => {
@@ -22818,31 +22762,31 @@ var init_Theme2 = __esm({
             boxShadow: deps.transformShadow(props2.shadow, globalTheme)
           };
         },
-        boxShadow: ({ props: props2, deps }) => (0, import_utils25.isString)(props2.boxShadow) && {
+        boxShadow: ({ props: props2, deps }) => (0, import_utils24.isString)(props2.boxShadow) && {
           boxShadow: deps.transformBoxShadow(props2.boxShadow)
         },
-        textShadow: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.textShadow) && {
+        textShadow: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.textShadow) && {
           textShadow: deps.transformBoxShadow(props2.textShadow)
         },
-        backdropFilter: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.backdropFilter) && {
+        backdropFilter: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.backdropFilter) && {
           backdropFilter: props2.backdropFilter
         },
-        opacity: ({ props: props2 }) => !(0, import_utils25.isUndefined)(props2.opacity) && {
+        opacity: ({ props: props2 }) => !(0, import_utils24.isUndefined)(props2.opacity) && {
           opacity: props2.opacity
         },
-        visibility: ({ props: props2 }) => !(0, import_utils25.isUndefined)(props2.visibility) && {
+        visibility: ({ props: props2 }) => !(0, import_utils24.isUndefined)(props2.visibility) && {
           visibility: props2.visibility
         },
-        columnRule: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.columnRule) && {
+        columnRule: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.columnRule) && {
           columnRule: deps.transformBorder(props2.columnRule)
         },
-        filter: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.filter) && {
+        filter: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.filter) && {
           filter: props2.filter
         },
-        mixBlendMode: ({ props: props2, deps }) => !(0, import_utils25.isUndefined)(props2.mixBlendMode) && {
+        mixBlendMode: ({ props: props2, deps }) => !(0, import_utils24.isUndefined)(props2.mixBlendMode) && {
           mixBlendMode: props2.mixBlendMode
         },
-        appearance: ({ props: props2 }) => !(0, import_utils25.isUndefined)(props2.appearance) && {
+        appearance: ({ props: props2 }) => !(0, import_utils24.isUndefined)(props2.appearance) && {
           appearance: props2.appearance
         }
       }
@@ -22851,11 +22795,11 @@ var init_Theme2 = __esm({
 });
 // ../uikit/Atoms/Media.js
-var import_utils26, keySetters2, execClass2, convertPropsToClass2, applyMediaProps2, applyAndProps2, applySelectorProps2, applyCaseProps2, applyVariableProps2, applyConditionalCaseProps2, applyConditionalFalsyProps2, applyTrueProps2, beforeClassAssign2, Media2;
+var import_utils25, keySetters2, execClass2, convertPropsToClass2, applyMediaProps2, applyAndProps2, applySelectorProps2, applyCaseProps2, applyVariableProps2, applyConditionalCaseProps2, applyConditionalFalsyProps2, applyTrueProps2, beforeClassAssign2, Media2;
 var init_Media2 = __esm({
   "../uikit/Atoms/Media.js"() {
     "use strict";
-    import_utils26 = __toESM(require_cjs());
+    import_utils25 = __toESM(require_cjs());
     init_Theme2();
     keySetters2 = {
       "@": (key, props2, result, element, isSubtree) => applyMediaProps2(
@@ -22942,8 +22886,8 @@ var init_Media2 = __esm({
         state: element.state,
         deps: element.deps
       });
-      if ((0, import_utils26.isArray)(classExec))
-        classExec = classExec.reduce((a, c) => (0, import_utils26.merge)(a, c), {});
+      if ((0, import_utils25.isArray)(classExec))
+        classExec = classExec.reduce((a, c) => (0, import_utils25.merge)(a, c), {});
       for (const finalProp in classExec) {
         result[finalProp] = classExec[finalProp];
       }
@@ -22975,7 +22919,7 @@ var init_Media2 = __esm({
       const matchesGlobal = name === globalTheme;
       if (globalTheme && isTheme) {
         if (matchesGlobal)
-          return (0, import_utils26.merge)(result, generatedClass);
+          return (0, import_utils25.merge)(result, generatedClass);
         return;
       }
       const mediaKey = mediaValue ? `@media screen and ${mediaValue}` : key;
@@ -22997,7 +22941,7 @@ var init_Media2 = __esm({
       const isPropTrue = element.props[caseKey];
       if (!CASES[caseKey] && !isPropTrue)
         return;
-      return (0, import_utils26.merge)(result, convertPropsToClass2(props2, result, element));
+      return (0, import_utils25.merge)(result, convertPropsToClass2(props2, result, element));
     };
     applyVariableProps2 = (key, props2, result, element) => {
       result[key] = props2;
@@ -23008,15 +22952,15 @@ var init_Media2 = __esm({
       const isPropTrue = element.props[caseKey] || element.state[caseKey];
       if (!isPropTrue)
         return;
-      return (0, import_utils26.overwriteDeep)(result, convertPropsToClass2(props2, result, element));
+      return (0, import_utils25.overwriteDeep)(result, convertPropsToClass2(props2, result, element));
     };
     applyConditionalFalsyProps2 = (key, props2, result, element) => {
       const caseKey = key.slice(1);
       const isPropTrue = element.props[caseKey] || element.state[caseKey] === true;
       if (!isPropTrue)
-        return (0, import_utils26.overwriteDeep)(result, convertPropsToClass2(props2, result, element));
+        return (0, import_utils25.overwriteDeep)(result, convertPropsToClass2(props2, result, element));
     };
-    applyTrueProps2 = (props2, result, element) => (0, import_utils26.merge)(result, convertPropsToClass2(props2, result, element));
+    applyTrueProps2 = (props2, result, element) => (0, import_utils25.merge)(result, convertPropsToClass2(props2, result, element));
     beforeClassAssign2 = (element, s) => {
       const { props: props2, class: className, context } = element;
       const CLASS_NAMES = {
@@ -23059,7 +23003,7 @@ var init_Media2 = __esm({
           preventDefineUpdate: true
         });
       }
-      (0, import_utils26.overwriteShallow)(className, CLASS_NAMES);
+      (0, import_utils25.overwriteShallow)(className, CLASS_NAMES);
     };
     Media2 = {
       class: {
@@ -23212,25 +23156,25 @@ var init_Overflow2 = __esm({
 });
 // ../uikit/Atoms/Collection.js
-var import_state2, import_utils27, Collection2;
+var import_state2, import_utils26, Collection2;
 var init_Collection2 = __esm({
   "../uikit/Atoms/Collection.js"() {
     "use strict";
     import_state2 = __toESM(require_cjs9());
-    import_utils27 = __toESM(require_cjs());
+    import_utils26 = __toESM(require_cjs());
     Collection2 = {
       define: {
         $collection: (param, el, state) => {
           const { __ref: ref } = el;
           const { children, childrenAs, childrenExtend } = el.props || {};
-          const hasChildren = (0, import_utils27.isArray)(children);
+          const hasChildren = (0, import_utils26.isArray)(children);
           if (hasChildren) {
             param = children;
             if (childrenAs)
               param = param.map((v) => ({ extend: childrenExtend, [childrenAs]: v }));
           } else if (!param)
             return;
-          if ((0, import_utils27.isString)(param)) {
+          if ((0, import_utils26.isString)(param)) {
             if (param === "state")
               param = state.parse();
             else
@@ -23238,20 +23182,20 @@ var init_Collection2 = __esm({
           }
           if ((0, import_state2.isState)(param))
             param = param.parse();
-          if ((0, import_utils27.isNot)(param)("array", "object"))
+          if ((0, import_utils26.isNot)(param)("array", "object"))
             return;
-          param = (0, import_utils27.deepCloneWithExtend)(param);
+          param = (0, import_utils26.deepCloneWithExtend)(param);
           if (ref.__collectionCache) {
             const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache);
             if (equals) {
               ref.__noCollectionDifference = true;
               return;
             } else {
-              ref.__collectionCache = (0, import_utils27.deepCloneWithExtend)(param);
+              ref.__collectionCache = (0, import_utils26.deepCloneWithExtend)(param);
               delete ref.__noCollectionDifference;
             }
           } else {
-            ref.__collectionCache = (0, import_utils27.deepCloneWithExtend)(param);
+            ref.__collectionCache = (0, import_utils26.deepCloneWithExtend)(param);
           }
           const obj = {
             tag: "fragment",
@@ -23262,7 +23206,7 @@ var init_Collection2 = __esm({
           for (const key in param) {
             const value2 = param[key];
             if (value2)
-              obj[key] = (0, import_utils27.isObjectLike)(value2) ? value2 : { value: value2 };
+              obj[key] = (0, import_utils26.isObjectLike)(value2) ? value2 : { value: value2 };
           }
           el.removeContent();
           el.content = obj;
@@ -23270,13 +23214,13 @@ var init_Collection2 = __esm({
         $setCollection: (param, el, state) => {
           if (!param)
             return;
-          if ((0, import_utils27.isString)(param)) {
+          if ((0, import_utils26.isString)(param)) {
             if (param === "state")
               param = state.parse();
             else
               param = (0, import_state2.getChildStateInKey)(param, state);
           }
-          const data = ((0, import_utils27.isArray)(param) ? param : (0, import_utils27.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils27.isObjectLike)(item) ? { props: { value: item } } : item);
+          const data = ((0, import_utils26.isArray)(param) ? param : (0, import_utils26.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils26.isObjectLike)(item) ? { props: { value: item } } : item);
           if (data.length) {
             const t = setTimeout(() => {
               el.set({ tag: "fragment", ...data }, { preventDefineUpdate: "$setCollection" });
@@ -23288,7 +23232,7 @@ var init_Collection2 = __esm({
         $stateCollection: (param, el, state) => {
           if (!param)
             return;
-          if ((0, import_utils27.isString)(param)) {
+          if ((0, import_utils26.isString)(param)) {
             if (param === "state")
               param = state.parse();
             else
@@ -23296,21 +23240,21 @@ var init_Collection2 = __esm({
           }
           if ((0, import_state2.isState)(param))
             param = param.parse();
-          if ((0, import_utils27.isNot)(param)("array", "object"))
+          if ((0, import_utils26.isNot)(param)("array", "object"))
             return;
           const { __ref: ref } = el;
-          param = (0, import_utils27.deepCloneWithExtend)(param);
+          param = (0, import_utils26.deepCloneWithExtend)(param);
           if (ref.__stateCollectionCache) {
             const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache);
             if (equals) {
               ref.__noCollectionDifference = true;
               return;
             } else {
-              ref.__stateCollectionCache = (0, import_utils27.deepCloneWithExtend)(param);
+              ref.__stateCollectionCache = (0, import_utils26.deepCloneWithExtend)(param);
               delete ref.__noCollectionDifference;
             }
           } else {
-            ref.__stateCollectionCache = (0, import_utils27.deepCloneWithExtend)(param);
+            ref.__stateCollectionCache = (0, import_utils26.deepCloneWithExtend)(param);
           }
           const obj = {
             tag: "fragment",
@@ -23321,7 +23265,7 @@ var init_Collection2 = __esm({
           for (const key in param) {
             const value2 = param[key];
             if (value2)
-              obj[key] = { state: (0, import_utils27.isObjectLike)(value2) ? value2 : { value: value2 } };
+              obj[key] = { state: (0, import_utils26.isObjectLike)(value2) ? value2 : { value: value2 } };
           }
           el.removeContent();
           el.content = obj;
@@ -23329,7 +23273,7 @@ var init_Collection2 = __esm({
         $propsCollection: (param, el, state) => {
           if (!param)
             return;
-          if ((0, import_utils27.isString)(param)) {
+          if ((0, import_utils26.isString)(param)) {
             if (param === "state")
               param = state.parse();
             else
@@ -23337,21 +23281,21 @@ var init_Collection2 = __esm({
           }
           if ((0, import_state2.isState)(param))
             param = param.parse();
-          if ((0, import_utils27.isNot)(param)("array", "object"))
+          if ((0, import_utils26.isNot)(param)("array", "object"))
             return;
           const { __ref: ref } = el;
-          param = (0, import_utils27.deepCloneWithExtend)(param);
+          param = (0, import_utils26.deepCloneWithExtend)(param);
           if (ref.__propsCollectionCache) {
             const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache);
             if (equals) {
               ref.__noCollectionDifference = true;
               return;
             } else {
-              ref.__propsCollectionCache = (0, import_utils27.deepCloneWithExtend)(param);
+              ref.__propsCollectionCache = (0, import_utils26.deepCloneWithExtend)(param);
               delete ref.__noCollectionDifference;
             }
           } else {
-            ref.__propsCollectionCache = (0, import_utils27.deepCloneWithExtend)(param);
+            ref.__propsCollectionCache = (0, import_utils26.deepCloneWithExtend)(param);
           }
           const obj = {
             tag: "fragment",
@@ -23362,7 +23306,7 @@ var init_Collection2 = __esm({
           for (const key in param) {
             const value2 = param[key];
             if (value2)
-              obj[key] = { props: (0, import_utils27.isObjectLike)(value2) ? value2 : { value: value2 } };
+              obj[key] = { props: (0, import_utils26.isObjectLike)(value2) ? value2 : { value: value2 } };
           }
           el.removeContent();
           el.content = obj;
@@ -23512,16 +23456,16 @@ var init_Svg2 = __esm({
 });
 // ../uikit/Atoms/Shape/index.js
-var import_utils28, import_scratch19, transformBorderRadius2, Shape2;
+var import_utils27, import_scratch19, transformBorderRadius2, Shape2;
 var init_Shape2 = __esm({
   "../uikit/Atoms/Shape/index.js"() {
     "use strict";
-    import_utils28 = __toESM(require_cjs());
+    import_utils27 = __toESM(require_cjs());
     init_style2();
     import_scratch19 = __toESM(require_cjs2());
     init_Pseudo2();
     transformBorderRadius2 = (radius, props2, propertyName) => {
-      if (!(0, import_utils28.isString)(radius))
+      if (!(0, import_utils27.isString)(radius))
         return;
       return {
         borderRadius: radius.split(" ").map((v, k) => (0, import_scratch19.getSpacingBasedOnRatio)(props2, propertyName, v)[propertyName]).join(" ")
@@ -23529,7 +23473,7 @@ var init_Shape2 = __esm({
     };
     Shape2 = {
       extend: Pseudo2,
-      deps: { exec: import_utils28.exec, getSpacingBasedOnRatio: import_scratch19.getSpacingBasedOnRatio, getMediaColor: import_scratch19.getMediaColor, transformBorderRadius: transformBorderRadius2 },
+      deps: { exec: import_utils27.exec, getSpacingBasedOnRatio: import_scratch19.getSpacingBasedOnRatio, getMediaColor: import_scratch19.getMediaColor, transformBorderRadius: transformBorderRadius2 },
       class: {
         shape: ({ props: props2, deps }) => {
           const { shape } = props2;
@@ -23557,11 +23501,11 @@ var init_Shape2 = __esm({
 });
 // ../uikit/Atoms/Text.js
-var import_utils29, import_scratch20, Text2, H12, H22, H32, H42, H52, H62, P2, Caption2, Strong2, Underline2, Italic2, Title2, Headline2, Subhead2, Footnote2, B2, I2;
+var import_utils28, import_scratch20, Text2, H12, H22, H32, H42, H52, H62, P2, Caption2, Strong2, Underline2, Italic2, Title2, Headline2, Subhead2, Footnote2, B2, I2;
 var init_Text2 = __esm({
   "../uikit/Atoms/Text.js"() {
     "use strict";
-    import_utils29 = __toESM(require_cjs());
+    import_utils28 = __toESM(require_cjs());
     import_scratch20 = __toESM(require_cjs2());
     Text2 = {
       deps: { getFontSizeByKey: import_scratch20.getFontSizeByKey, getFontFamily: import_scratch20.getFontFamily },
@@ -23575,23 +23519,23 @@ var init_Text2 = __esm({
           const { props: props2, deps } = el;
           return props2.fontSize ? deps.getFontSizeByKey(props2.fontSize) : null;
         },
-        font: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.font) && { font: props2.font },
-        fontFamily: ({ props: props2, deps }) => !(0, import_utils29.isUndefined)(props2.fontFamily) && {
+        font: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.font) && { font: props2.font },
+        fontFamily: ({ props: props2, deps }) => !(0, import_utils28.isUndefined)(props2.fontFamily) && {
           fontFamily: deps.getFontFamily(props2.fontFamily) || props2.fontFamily
         },
-        lineHeight: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.lineHeight) && { lineHeight: props2.lineHeight },
+        lineHeight: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.lineHeight) && { lineHeight: props2.lineHeight },
         // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-        textDecoration: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.textDecoration) && { textDecoration: props2.textDecoration },
-        textTransform: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.textTransform) && { textTransform: props2.textTransform },
-        wordBreak: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.wordBreak) && { wordBreak: props2.wordBreak },
-        whiteSpace: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.whiteSpace) && { whiteSpace: props2.whiteSpace },
-        wordWrap: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.wordWrap) && { wordWrap: props2.wordWrap },
-        letterSpacing: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.letterSpacing) && { letterSpacing: props2.letterSpacing },
-        textOverflow: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.textOverflow) && { textOverflow: props2.textOverflow },
-        textAlign: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.textAlign) && { textAlign: props2.textAlign },
-        writingMode: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.writingMode) && { writingMode: props2.writingMode },
-        textOrientation: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.textOrientation) && { textOrientation: props2.textOrientation },
-        fontWeight: ({ props: props2 }) => !(0, import_utils29.isUndefined)(props2.fontWeight) && {
+        textDecoration: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.textDecoration) && { textDecoration: props2.textDecoration },
+        textTransform: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.textTransform) && { textTransform: props2.textTransform },
+        wordBreak: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.wordBreak) && { wordBreak: props2.wordBreak },
+        whiteSpace: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.whiteSpace) && { whiteSpace: props2.whiteSpace },
+        wordWrap: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.wordWrap) && { wordWrap: props2.wordWrap },
+        letterSpacing: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.letterSpacing) && { letterSpacing: props2.letterSpacing },
+        textOverflow: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.textOverflow) && { textOverflow: props2.textOverflow },
+        textAlign: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.textAlign) && { textAlign: props2.textAlign },
+        writingMode: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.writingMode) && { writingMode: props2.writingMode },
+        textOrientation: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.textOrientation) && { textOrientation: props2.textOrientation },
+        fontWeight: ({ props: props2 }) => !(0, import_utils28.isUndefined)(props2.fontWeight) && {
           fontWeight: props2.fontWeight,
           fontVariationSettings: '"wght" ' + props2.fontWeight
         }
@@ -23660,24 +23604,24 @@ var init_XYZ2 = __esm({
 });
 // ../uikit/Atoms/Animation.js
-var import_scratch21, import_utils30, applyAnimationProps2, Animation2;
+var import_scratch21, import_utils29, applyAnimationProps2, Animation2;
 var init_Animation2 = __esm({
   "../uikit/Atoms/Animation.js"() {
     "use strict";
     import_scratch21 = __toESM(require_cjs2());
-    import_utils30 = __toESM(require_cjs());
+    import_utils29 = __toESM(require_cjs());
     init_emotion();
     applyAnimationProps2 = (animation, element) => {
       const { emotion: ctxEmotion } = element.context;
       const { keyframes } = ctxEmotion || emotion;
-      if ((0, import_utils30.isObject)(animation))
+      if ((0, import_utils29.isObject)(animation))
         return { animationName: keyframes(animation) };
       const { ANIMATION } = element.context && element.context.designSystem;
       const record = ANIMATION[animation];
       return keyframes(record);
     };
     Animation2 = {
-      deps: { isObject: import_utils30.isObject, getTimingByKey: import_scratch21.getTimingByKey, getTimingFunction: import_scratch21.getTimingFunction, applyAnimationProps: applyAnimationProps2 },
+      deps: { isObject: import_utils29.isObject, getTimingByKey: import_scratch21.getTimingByKey, getTimingFunction: import_scratch21.getTimingFunction, applyAnimationProps: applyAnimationProps2 },
       class: {
         animation: (el) => el.props.animation && {
           animationName: el.deps.applyAnimationProps(el.props.animation, el),
@@ -23748,12 +23692,12 @@ var init_Atoms = __esm({
 });
 // ../uikit/Box/index.js
-var import_utils31, PropsCSS, Box, Circle;
+var import_utils30, PropsCSS, Box, Circle;
 var init_Box = __esm({
   "../uikit/Box/index.js"() {
     "use strict";
     init_Atoms();
-    import_utils31 = __toESM(require_cjs());
+    import_utils30 = __toESM(require_cjs());
     PropsCSS = {
       class: {
         style: ({ props: props2 }) => props2 && props2.style
@@ -23775,7 +23719,7 @@ var init_Box = __esm({
         XYZ2,
         Animation2
       ],
-      deps: { isString: import_utils31.isString },
+      deps: { isString: import_utils30.isString, isUndefined: import_utils30.isUndefined },
       attr: {
         id: ({ props: props2, deps }) => deps.isString(props2.id) && props2.id,
         title: ({ props: props2, deps }) => deps.isString(props2.title) && props2.title,
@@ -23798,21 +23742,21 @@ var init_Box = __esm({
 });
 // ../uikit/Icon/index.js
-var import_utils32, getIconName, Icon, IconText, FileIcon;
+var import_utils31, getIconName, Icon, IconText, FileIcon;
 var init_Icon = __esm({
   "../uikit/Icon/index.js"() {
     "use strict";
-    import_utils32 = __toESM(require_cjs());
+    import_utils31 = __toESM(require_cjs());
     getIconName = ({ key, props: props2, context, deps, state }) => {
       let iconName = props2.name || props2.icon || key;
-      if ((0, import_utils32.isString)(iconName) && iconName.includes("{{")) {
+      if ((0, import_utils31.isString)(iconName) && iconName.includes("{{")) {
         iconName = deps.replaceLiteralsWithObjectFields(iconName, state);
       }
       return deps.isString(iconName) ? iconName : key;
     };
     Icon = {
       extend: "Svg",
-      deps: { isString: import_utils32.isString, replaceLiteralsWithObjectFields: import_utils32.replaceLiteralsWithObjectFields },
+      deps: { isString: import_utils31.isString, replaceLiteralsWithObjectFields: import_utils31.replaceLiteralsWithObjectFields },
       props: ({ key, props: props2, parent, context, deps, state }) => {
         const { ICONS, SEMANTIC_ICONS, useIconSprite, verbose } = context && context.designSystem;
         const { toCamelCase } = context && context.utils;
@@ -23838,7 +23782,7 @@ var init_Icon = __esm({
               display: "inline-block",
               style: {
                 color: "currentColor",
-                fontFamily: "'SF Pro Icons', 'SF Pro', 'Segoe UI'"
+                fontFamily: "'SF Pro Icons', 'SF Pro', 'SF Symbols', 'Segoe UI'"
               }
             }
           };
@@ -23850,7 +23794,7 @@ var init_Icon = __esm({
         if (parent && parent.props && parent.props.active && parent.props[".active"] && parent.props[".active"].icon) {
           activeIconName = parent.props[".active"].icon.name || parent.props[".active"].icon.icon || parent.props[".active"].icon;
         }
-        if ((0, import_utils32.isString)(activeIconName) && activeIconName.includes("{{")) {
+        if ((0, import_utils31.isString)(activeIconName) && activeIconName.includes("{{")) {
           activeIconName = deps.replaceLiteralsWithObjectFields(activeIconName, state);
         }
         let validIconName;
@@ -24358,15 +24302,15 @@ var init_DoubleHr = __esm({
 });
 // ../uikit/Input/Input.js
-var import_utils33, Input;
+var import_utils32, Input;
 var init_Input = __esm({
   "../uikit/Input/Input.js"() {
     "use strict";
-    import_utils33 = __toESM(require_cjs());
+    import_utils32 = __toESM(require_cjs());
     Input = {
       extend: ["Focusable"],
       tag: "input",
-      deps: { isString: import_utils33.isString, replaceLiteralsWithObjectFields: import_utils33.replaceLiteralsWithObjectFields },
+      deps: { isString: import_utils32.isString, replaceLiteralsWithObjectFields: import_utils32.replaceLiteralsWithObjectFields },
       props: {
         border: "none",
         type: "input",
@@ -25244,11 +25188,11 @@ var init_Progress = __esm({
 });
 // ../uikit/Range/index.js
-var import_utils34, import_scratch22, props, returnPropertyValue, Range, RangeWithButtons;
+var import_utils33, import_scratch22, props, returnPropertyValue, Range, RangeWithButtons;
 var init_Range = __esm({
   "../uikit/Range/index.js"() {
     "use strict";
-    import_utils34 = __toESM(require_cjs());
+    import_utils33 = __toESM(require_cjs());
     import_scratch22 = __toESM(require_cjs2());
     props = {
       appearance: "none",
@@ -25311,7 +25255,7 @@ var init_Range = __esm({
     };
     returnPropertyValue = (el, property, def) => {
       const val = el.props && el.props[property];
-      const r = (0, import_utils34.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 0;
+      const r = (0, import_utils33.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 0;
       return r + "";
     };
     Range = {
@@ -25327,7 +25271,7 @@ var init_Range = __esm({
       on: {
         input: (ev, el, s) => {
           const props2 = el.props;
-          if ((0, import_utils34.isFunction)(props2.onInput)) {
+          if ((0, import_utils33.isFunction)(props2.onInput)) {
             props2.onInput(ev, el, s);
           } else {
             s.update({ value: parseFloat(el.node.value) });
@@ -25335,7 +25279,7 @@ var init_Range = __esm({
         },
         change: (ev, el, s) => {
           const props2 = el.props;
-          if ((0, import_utils34.isFunction)(props2.onChange)) {
+          if ((0, import_utils33.isFunction)(props2.onChange)) {
             props2.onChange(ev, el, s);
           } else {
             s.update({ value: parseFloat(el.node.value) });
@@ -25350,7 +25294,7 @@ var init_Range = __esm({
         on: {
           click: (ev, el, s) => {
             const parentProps = el.parent.props;
-            if ((0, import_utils34.isFunction)(parentProps.onDecrease)) {
+            if ((0, import_utils33.isFunction)(parentProps.onDecrease)) {
               parentProps.onDecrease(ev, el.parent, s);
             } else {
               const value2 = parseFloat(s.value);
@@ -25382,7 +25326,7 @@ var init_Range = __esm({
         on: {
           input: (ev, el, s) => {
             const parentProps = el.parent.props;
-            if ((0, import_utils34.isFunction)(parentProps.onInput)) {
+            if ((0, import_utils33.isFunction)(parentProps.onInput)) {
               parentProps.onInput(ev, el, s);
             } else {
               s.update({ value: parseFloat(el.node.value) });
@@ -25390,7 +25334,7 @@ var init_Range = __esm({
           },
           change: (ev, el, s) => {
             const parentProps = el.parent.props;
-            if ((0, import_utils34.isFunction)(parentProps.onChange)) {
+            if ((0, import_utils33.isFunction)(parentProps.onChange)) {
               parentProps.onChange(ev, el, s);
             } else {
               s.update({ value: parseFloat(el.node.value) });
@@ -25404,7 +25348,7 @@ var init_Range = __esm({
         on: {
           click: (ev, el, s) => {
             const parentProps = el.parent.props;
-            if ((0, import_utils34.isFunction)(parentProps.onIncrease)) {
+            if ((0, import_utils33.isFunction)(parentProps.onIncrease)) {
               parentProps.onIncrease(ev, el.parent, s);
             } else {
               const value2 = parseFloat(s.value);
@@ -25447,12 +25391,12 @@ var init_style3 = __esm({
 });
 // ../uikit/Slider/index.js
-var import_utils35, RangeSlider, listenProp, Slider;
+var import_utils34, RangeSlider, listenProp, Slider;
 var init_Slider = __esm({
   "../uikit/Slider/index.js"() {
     "use strict";
     init_style3();
-    import_utils35 = __toESM(require_cjs());
+    import_utils34 = __toESM(require_cjs());
     init_Button();
     RangeSlider = {
       props: {
@@ -25464,7 +25408,7 @@ var init_Slider = __esm({
     };
     listenProp = (el, prop, def) => {
       const val = el && el.props && el.props[prop];
-      const r = ((0, import_utils35.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
+      const r = ((0, import_utils34.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
       return r;
     };
     Slider = {
@@ -25475,10 +25419,10 @@ var init_Slider = __esm({
         },
         on: {
           click: (ev, el, s) => {
-            el.props && (0, import_utils35.isFunction)(el.props.click) && el.props.click(ev, el, s);
+            el.props && (0, import_utils34.isFunction)(el.props.click) && el.props.click(ev, el, s);
             const input = el.parent.input;
             const props2 = input.props;
-            const value2 = (0, import_utils35.isFunction)(props2.value) ? props2.value() : props2.value;
+            const value2 = (0, import_utils34.isFunction)(props2.value) ? props2.value() : props2.value;
             input.node.value = value2;
           }
         }
@@ -25501,8 +25445,8 @@ var init_Slider = __esm({
           step: (el, s) => listenProp(el, "step", 1)
         },
         on: {
-          input: (ev, el, s) => el.props && (0, import_utils35.isFunction)(el.props.input) && el.props.input(ev, el, s),
-          change: (ev, el, s) => el.props && (0, import_utils35.isFunction)(el.props.change) && el.props.change(ev, el, s)
+          input: (ev, el, s) => el.props && (0, import_utils34.isFunction)(el.props.input) && el.props.input(ev, el, s),
+          change: (ev, el, s) => el.props && (0, import_utils34.isFunction)(el.props.change) && el.props.change(ev, el, s)
         }
       },
       button1: {
@@ -25512,10 +25456,10 @@ var init_Slider = __esm({
         },
         on: {
           click: (ev, el, s) => {
-            el.props && (0, import_utils35.isFunction)(el.props.click) && el.props.click(ev, el, s);
+            el.props && (0, import_utils34.isFunction)(el.props.click) && el.props.click(ev, el, s);
             const input = el.parent.input;
             const props2 = input.props;
-            const value2 = (0, import_utils35.isFunction)(props2.value) ? props2.value() : props2.value;
+            const value2 = (0, import_utils34.isFunction)(props2.value) ? props2.value() : props2.value;
             input.node.value = value2;
           }
         }
@@ -25782,11 +25726,11 @@ var init_Notification = __esm({
 });
 // ../uikit/Tooltip/index.js
-var import_utils36, Tooltip, TooltipHidden, TooltipParent;
+var import_utils35, Tooltip, TooltipHidden, TooltipParent;
 var init_Tooltip = __esm({
   "../uikit/Tooltip/index.js"() {
     "use strict";
-    import_utils36 = __toESM(require_cjs());
+    import_utils35 = __toESM(require_cjs());
     Tooltip = {
       extend: "Flex",
       props: {
@@ -25805,7 +25749,7 @@ var init_Tooltip = __esm({
       },
       attr: { tooltip: true },
       Title: {
-        if: ({ parent, props: props2 }) => (0, import_utils36.isDefined)(parent.props.title) || props2.text,
+        if: ({ parent, props: props2 }) => (0, import_utils35.isDefined)(parent.props.title) || props2.text,
         props: ({ parent }) => ({
           width: "fit-content",
           fontWeight: 500,
@@ -25814,7 +25758,7 @@ var init_Tooltip = __esm({
         })
       },
       P: {
-        if: ({ parent, props: props2 }) => (0, import_utils36.isDefined)(parent.props.description) || props2.text,
+        if: ({ parent, props: props2 }) => (0, import_utils35.isDefined)(parent.props.description) || props2.text,
         props: ({ parent }) => ({
           width: "fit-content",
           fontSize: "Z2",
@@ -27566,7 +27510,7 @@ __export(src_exports3, {
   default: () => src_default3
 });
 module.exports = __toCommonJS(src_exports3);
-var import_utils43 = __toESM(require_cjs(), 1);
+var import_utils42 = __toESM(require_cjs(), 1);
 // src/utilImports.js
 var utilImports_exports = {};
@@ -27587,7 +27531,7 @@ __reExport(utilImports_exports, __toESM(require_cjs6(), 1));
 // src/router.js
 var import_router6 = __toESM(require_cjs6(), 1);
-var import_utils37 = __toESM(require_cjs(), 1);
+var import_utils36 = __toESM(require_cjs(), 1);
 init_uikit();
 var DEFAULT_ROUTING_OPTIONS2 = {
   initRouter: true,
@@ -27600,16 +27544,16 @@ var initRouter2 = (element, options) => {
   else if (options.router === true)
     options.router = DEFAULT_ROUTING_OPTIONS2;
   else
-    (0, import_utils37.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS2);
+    (0, import_utils36.merge)(options.router || {}, DEFAULT_ROUTING_OPTIONS2);
   const routerOptions = options.router;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router6.router;
   const onRouterRenderDefault = (el, s) => {
-    const { pathname, hash: hash2 } = import_utils37.window.location;
+    const { pathname, hash: hash2 } = import_utils36.window.location;
     const url2 = pathname + hash2;
     if (el.routes)
       router2(url2, el, {}, { initialRender: true });
   };
-  const hasRenderRouter = element.on && !(0, import_utils37.isUndefined)(element.on.renderRouter);
+  const hasRenderRouter = element.on && !(0, import_utils36.isUndefined)(element.on.renderRouter);
   if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
     if (element.on) {
       element.on.renderRouter = onRouterRenderDefault;
@@ -27631,20 +27575,20 @@ var popStateRouter2 = (element, options) => {
   if (!routerOptions.popState)
     return;
   const router2 = options.snippets && options.snippets.router ? options.snippets.router : import_router6.router;
-  import_utils37.window.onpopstate = (e) => {
-    const { pathname, hash: hash2 } = import_utils37.window.location;
+  import_utils36.window.onpopstate = (e) => {
+    const { pathname, hash: hash2 } = import_utils36.window.location;
     const url2 = pathname + hash2;
     router2(url2, element, {}, { pushState: false, scrollToTop: false, level: 0 });
   };
 };
 var injectRouterInLinkComponent2 = (routerOptions) => {
   if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-    return (0, import_utils37.deepMerge)(Link, RouterLink);
+    return (0, import_utils36.deepMerge)(Link, RouterLink);
   }
 };
 // src/ferchOnCreate.js
-var import_utils38 = __toESM(require_cjs(), 1);
+var import_utils37 = __toESM(require_cjs(), 1);
 var import_fetch2 = __toESM(require_cjs8(), 1);
 var fetchSync2 = async (key, options) => {
   if (key && options.editor) {
@@ -27661,10 +27605,10 @@ var fetchAsync2 = (app, key, options, callback) => {
     try {
       if (options.editor.async) {
         (0, import_fetch2.fetchProjectAsync)(key, options, callback || ((data) => {
-          if ((0, import_utils38.isObject)(data.designsystem)) {
+          if ((0, import_utils37.isObject)(data.designsystem)) {
             options.utils.init(data.designsystem);
           }
-          if ((0, import_utils38.isObject)(data.state)) {
+          if ((0, import_utils37.isObject)(data.state)) {
             app.state.set(data.state);
           }
         }));
@@ -27677,15 +27621,15 @@ var fetchAsync2 = (app, key, options, callback) => {
 // src/syncExtend.js
 init_byld_socket();
-var import_utils39 = __toESM(require_cjs(), 1);
+var import_utils38 = __toESM(require_cjs(), 1);
 var applySyncDebug2 = (extend, options) => {
   const { editor } = options;
   if (!editor)
     return extend;
-  const inspect = (0, import_utils39.isUndefined)(editor.inspect) ? (0, import_utils39.isDevelopment)() : editor.inspect;
+  const inspect = (0, import_utils38.isUndefined)(editor.inspect) ? (0, import_utils38.isDevelopment)() : editor.inspect;
   if (inspect)
     extend.push(DevFocus);
-  const liveSync = (0, import_utils39.isUndefined)(editor.liveSync) ? (0, import_utils39.isDevelopment)() : editor.liveSync;
+  const liveSync = (0, import_utils38.isUndefined)(editor.liveSync) ? (0, import_utils38.isDevelopment)() : editor.liveSync;
   if (liveSync)
     extend.push(Sync);
   return extend;
@@ -27694,7 +27638,7 @@ var applyInspectListener2 = (root, options) => {
   const { editor } = options;
   if (!editor)
     return;
-  const inspect = (0, import_utils39.isUndefined)(editor.inspect) ? (0, import_utils39.isDevelopment)() : editor.inspect;
+  const inspect = (0, import_utils38.isUndefined)(editor.inspect) ? (0, import_utils38.isDevelopment)() : editor.inspect;
   if (inspect)
     inspectOnKey(root, options);
 };
@@ -27751,42 +27695,42 @@ var import_dynamic3 = __toESM(require_dynamic(), 1);
 // src/createDomql.js
 var import_domql2 = __toESM(require_cjs13(), 1);
-var import_utils42 = __toESM(require_cjs(), 1);
+var import_utils41 = __toESM(require_cjs(), 1);
 init_uikit();
 // src/prepare.js
-var import_utils41 = __toESM(require_cjs(), 1);
+var import_utils40 = __toESM(require_cjs(), 1);
 // src/initEmotion.js
+init_emotion4();
 init_emotion3();
-init_emotion2();
 init_init();
-var import_utils40 = __toESM(require_cjs(), 1);
+var import_utils39 = __toESM(require_cjs(), 1);
 init_src2();
 var initEmotion2 = (key, options = {}) => {
   const doc = options.parent || options.document || document;
   const initOptions = options.initOptions || {};
-  const emotion3 = initOptions.emotion;
+  const emotion4 = initOptions.emotion;
   if (!initOptions.emotion)
-    initOptions.emotion = emotion2;
+    initOptions.emotion = emotion3;
   const registry = options.registry || transformDOMQLEmotion(initOptions.emotion, options);
-  const defaultDesignSystem = (0, import_utils40.deepClone)(src_default);
-  const designSystem = initOptions.useDefaultConfig || options.useDefaultConfig ? (0, import_utils40.deepMerge)(options.designSystem, defaultDesignSystem) : options.designSystem || defaultDesignSystem;
+  const defaultDesignSystem = (0, import_utils39.deepClone)(src_default);
+  const designSystem = initOptions.useDefaultConfig || options.useDefaultConfig ? (0, import_utils39.deepMerge)(options.designSystem, defaultDesignSystem) : options.designSystem || defaultDesignSystem;
   const scratchSystem2 = init(designSystem, {
     key,
-    emotion: emotion3,
+    emotion: emotion4,
     verbose: options.verbose,
     document: doc,
     ...DESIGN_SYSTEM_OPTIONS2,
     ...initOptions
   });
-  return [scratchSystem2, emotion3, registry];
+  return [scratchSystem2, emotion4, registry];
 };
 // src/prepare.js
 init_uikit();
 var checkIfKeyIsComponent2 = (key) => {
-  const isFirstKeyString = (0, import_utils41.isString)(key);
+  const isFirstKeyString = (0, import_utils40.isString)(key);
   if (!isFirstKeyString)
     return;
   const firstCharKey = key.slice(0, 1);
@@ -27814,23 +27758,23 @@ var prepareUtils2 = (options) => {
 var preparePackages2 = (packages, opts) => {
   const windowOpts = opts.window || window;
   if (windowOpts.packages) {
-    windowOpts.packages = (0, import_utils41.merge)(windowOpts.packages, packages);
+    windowOpts.packages = (0, import_utils40.merge)(windowOpts.packages, packages);
   } else {
     windowOpts.packages = packages;
     windowOpts.require = (key) => windowOpts.packages[key];
   }
 };
 var prepareDesignSystem2 = (options, key) => {
-  const [scratcDesignhSystem, emotion3, registry] = initEmotion2(key, options);
-  return [scratcDesignhSystem, emotion3, registry];
+  const [scratcDesignhSystem, emotion4, registry] = initEmotion2(key, options);
+  return [scratcDesignhSystem, emotion4, registry];
 };
 var prepareState2 = (options, App) => {
   const state = {};
   if (options.state)
     utilImports_exports.deepMerge(state, options.state);
   if (App && App.state)
-    (0, import_utils41.deepMerge)(state, App.state);
-  return (0, import_utils41.deepCloneWithExtend)(state);
+    (0, import_utils40.deepMerge)(state, App.state);
+  return (0, import_utils40.deepCloneWithExtend)(state);
 };
 var preparePages2 = (options) => {
   const pages = options.pages;
@@ -27862,9 +27806,9 @@ var prepareDocument2 = (options) => {
 // src/createDomql.js
 var SYMBOLS_KEY3 = process.env.SYMBOLS_KEY;
 var createDomqlElement2 = (App, options) => {
-  const key = options.key || SYMBOLS_KEY3 || ((0, import_utils42.isString)(App) ? App : "");
-  const [scratcDesignSystem, emotion3, registry] = prepareDesignSystem2(options, key);
-  if ((0, import_utils42.isString)(App))
+  const key = options.key || SYMBOLS_KEY3 || ((0, import_utils41.isString)(App) ? App : "");
+  const [scratcDesignSystem, emotion4, registry] = prepareDesignSystem2(options, key);
+  if ((0, import_utils41.isString)(App))
     App = {};
   const doc = prepareDocument2(options);
   const state = prepareState2(options, App);
@@ -27893,7 +27837,7 @@ var createDomqlElement2 = (App, options) => {
       utils: snippets,
       define,
       registry,
-      emotion: emotion3,
+      emotion: emotion4,
       routerOptions,
       socket: options.socket,
       editor: options.editor,
@@ -27909,9 +27853,9 @@ var createDomqlElement2 = (App, options) => {
 // src/index.js
 var SYMBOLS_KEY4 = process.env.SYMBOLS_KEY;
-var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils43.deepMerge)(
+var mergeWithLocalFile3 = (options, optionsExternalFile) => (0, import_utils42.deepMerge)(
   options,
-  (0, import_utils43.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic3.default || {}
+  (0, import_utils42.isObject)(optionsExternalFile) ? optionsExternalFile : import_dynamic3.default || {}
 );
 var create2 = (App, options = options_default2, optionsExternalFile) => {
   const redefinedOptions = { ...options_default2, ...mergeWithLocalFile3(options, optionsExternalFile) };
@@ -27938,10 +27882,13 @@ var createSync2 = async (App, options = options_default2, optionsExternalFile) =
     redefinedOptions.on.create(domqlApp, redefinedOptions);
   return domqlApp;
 };
-var createSkeleton2 = (App, options = options_default2, optionsExternalFile) => {
+var createSkeleton2 = (App = {}, options = options_default2, optionsExternalFile) => {
   return create2(
-    App,
-    (0, import_utils43.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
+    {
+      deps: { isUndefined: import_utils42.isUndefined },
+      ...App
+    },
+    (0, import_utils42.deepMerge)({ domqlOptions: { onlyResolveExtends: true } }, options),
     optionsExternalFile
   );
 };