@symbo.ls/uikit 2.11.205 → 2.11.210

package/dist/index.cjs.js

@@ -274,7 +274,7 @@ var require_cjs = __commonJS({
           isObject: () => isObject7,
           isObjectLike: () => isObjectLike3,
           isString: () => isString9,
-          isUndefined: () => isUndefined
+          isUndefined: () => isUndefined2
         });
         module22.exports = __toCommonJS22(types_exports);
         var import_node = require_node2();
@@ -297,7 +297,7 @@ var require_cjs = __commonJS({
         var isDefined2 = (arg) => {
           return isObject7(arg) || isObjectLike3(arg) || isString9(arg) || isNumber2(arg) || isFunction22(arg) || isArray6(arg) || isObjectLike3(arg) || isBoolean(arg) || isNull(arg);
         };
-        var isUndefined = (arg) => {
+        var isUndefined2 = (arg) => {
           return arg === void 0;
         };
         var TYPES = {
@@ -505,6 +505,7 @@ var require_cjs = __commonJS({
           clone: () => clone,
           deepClone: () => deepClone22,
           deepCloneExclude: () => deepCloneExclude,
+          deepContains: () => deepContains2,
           deepDestringify: () => deepDestringify,
           deepMerge: () => deepMerge3,
           deepStringify: () => deepStringify,
@@ -890,6 +891,33 @@ var require_cjs = __commonJS({
           }
           return true;
         };
+        var deepContains2 = (obj1, obj2) => {
+          if (typeof obj1 !== typeof obj2) {
+            return false;
+          }
+          if ((0, import_types.isObjectLike)(obj1)) {
+            if (Array.isArray(obj1) && Array.isArray(obj2)) {
+              if (obj1.length !== obj2.length) {
+                return false;
+              }
+              for (let i = 0; i < obj1.length; i++) {
+                if (!deepContains2(obj1[i], obj2[i])) {
+                  return false;
+                }
+              }
+            } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
+              for (const key in obj1) {
+                const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj2, key);
+                if (!hasOwnProperty || !deepContains2(obj1[key], obj2[key])) {
+                  return false;
+                }
+              }
+            }
+          } else {
+            return obj2 === obj1;
+          }
+          return true;
+        };
         var removeFromObject = (obj, props4) => {
           if (props4 === void 0 || props4 === null)
             return obj;
@@ -1398,7 +1426,7 @@ var require_cjs = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals = __toESM2(require_cjs7(), 1);
-    var import_utils11 = __toESM2(require_cjs22(), 1);
+    var import_utils13 = __toESM2(require_cjs22(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -1526,9 +1554,9 @@ var require_cjs = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils11.isString)(rgb))
+      if ((0, import_utils13.isString)(rgb))
         rgb = rgb.split(", ").map((v) => parseFloat(v));
-      if ((0, import_utils11.isNumber)(tone))
+      if ((0, import_utils13.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -2439,7 +2467,7 @@ var require_cjs = __commonJS({
       const r = recursiveTheme(value);
       return r;
     };
-    var import_utils12 = __toESM2(require_cjs22(), 1);
+    var import_utils122 = __toESM2(require_cjs22(), 1);
     var setFont = (val, key) => {
       const CSSvar = `--font-${key}`;
       const fontFace = val[0] ? getFontFaceEach(key, val) : setCustomFontMedia(key, val.url);
@@ -2456,7 +2484,7 @@ var require_cjs = __commonJS({
       let { value, type } = val;
       if (val.isDefault)
         FONT_FAMILY2.default = key;
-      if ((0, import_utils12.isObject)(value))
+      if ((0, import_utils122.isObject)(value))
         value = arrayzeValue(value);
       const CSSvar = `--font-family-${key}`;
       const str = `${value.join(", ")}, ${FONT_FAMILY_TYPES2[type]}`;
@@ -2988,9 +3016,9 @@ var require_cjs = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/key.js
+// ../../../domql/packages/utils/dist/cjs/key.js
 var require_key = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/key.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3027,9 +3055,9 @@ var require_key = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/env.js
+// ../../../domql/packages/utils/dist/cjs/env.js
 var require_env = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/env.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3065,9 +3093,9 @@ var require_env = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/globals.js
+// ../../../domql/packages/utils/dist/cjs/globals.js
 var require_globals = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/globals.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3091,19 +3119,19 @@ var require_globals = __commonJS({
       document: () => document2,
       global: () => global,
       self: () => self,
-      window: () => window
+      window: () => window2
     });
     module2.exports = __toCommonJS2(globals_exports);
     var global = globalThis;
     var self = globalThis;
-    var window = globalThis;
-    var document2 = window.document;
+    var window2 = globalThis;
+    var document2 = window2.document;
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/node.js
+// ../../../domql/packages/utils/dist/cjs/node.js
 var require_node = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/node.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3138,9 +3166,9 @@ var require_node = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/types.js
+// ../../../domql/packages/utils/dist/cjs/types.js
 var require_types = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/types.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3172,8 +3200,8 @@ var require_types = __commonJS({
       isNumber: () => isNumber,
       isObject: () => isObject4,
       isObjectLike: () => isObjectLike2,
-      isString: () => isString5,
-      isUndefined: () => isUndefined
+      isString: () => isString6,
+      isUndefined: () => isUndefined2
     });
     module2.exports = __toCommonJS2(types_exports);
     var import_node = require_node();
@@ -3182,7 +3210,7 @@ var require_types = __commonJS({
         return false;
       return typeof arg === "object" && arg.constructor === Object;
     };
-    var isString5 = (arg) => typeof arg === "string";
+    var isString6 = (arg) => typeof arg === "string";
     var isNumber = (arg) => typeof arg === "number";
     var isFunction3 = (arg) => typeof arg === "function";
     var isBoolean = (arg) => arg === true || arg === false;
@@ -3194,16 +3222,16 @@ var require_types = __commonJS({
       return typeof arg === "object";
     };
     var isDefined = (arg) => {
-      return isObject4(arg) || isObjectLike2(arg) || isString5(arg) || isNumber(arg) || isFunction3(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
+      return isObject4(arg) || isObjectLike2(arg) || isString6(arg) || isNumber(arg) || isFunction3(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
-    var isUndefined = (arg) => {
+    var isUndefined2 = (arg) => {
       return arg === void 0;
     };
     var TYPES = {
       boolean: isBoolean,
       array: isArray3,
       object: isObject4,
-      string: isString5,
+      string: isString6,
       number: isNumber,
       null: isNull,
       function: isFunction3,
@@ -3225,9 +3253,9 @@ var require_types = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/array.js
+// ../../../domql/packages/utils/dist/cjs/array.js
 var require_array = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/array.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3324,9 +3352,9 @@ var require_array = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/string.js
+// ../../../domql/packages/utils/dist/cjs/string.js
 var require_string = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/string.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3384,9 +3412,9 @@ var require_string = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/object.js
+// ../../../domql/packages/utils/dist/cjs/object.js
 var require_object = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/object.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3410,6 +3438,7 @@ var require_object = __commonJS({
       clone: () => clone,
       deepClone: () => deepClone3,
       deepCloneExclude: () => deepCloneExclude,
+      deepContains: () => deepContains2,
       deepDestringify: () => deepDestringify,
       deepMerge: () => deepMerge2,
       deepStringify: () => deepStringify,
@@ -3795,6 +3824,33 @@ var require_object = __commonJS({
       }
       return true;
     };
+    var deepContains2 = (obj1, obj2) => {
+      if (typeof obj1 !== typeof obj2) {
+        return false;
+      }
+      if ((0, import_types.isObjectLike)(obj1)) {
+        if (Array.isArray(obj1) && Array.isArray(obj2)) {
+          if (obj1.length !== obj2.length) {
+            return false;
+          }
+          for (let i = 0; i < obj1.length; i++) {
+            if (!deepContains2(obj1[i], obj2[i])) {
+              return false;
+            }
+          }
+        } else if ((0, import_types.isObjectLike)(obj1) && obj2 !== null) {
+          for (const key in obj1) {
+            const hasOwnProperty = Object.prototype.hasOwnProperty.call(obj2, key);
+            if (!hasOwnProperty || !deepContains2(obj1[key], obj2[key])) {
+              return false;
+            }
+          }
+        }
+      } else {
+        return obj2 === obj1;
+      }
+      return true;
+    };
     var removeFromObject = (obj, props4) => {
       if (props4 === void 0 || props4 === null)
         return obj;
@@ -3810,9 +3866,9 @@ var require_object = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/function.js
+// ../../../domql/packages/utils/dist/cjs/function.js
 var require_function = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/function.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3867,9 +3923,9 @@ var require_function = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/log.js
+// ../../../domql/packages/utils/dist/cjs/log.js
 var require_log = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/log.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3908,9 +3964,9 @@ var require_log = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/cookie.js
+// ../../../domql/packages/utils/dist/cjs/cookie.js
 var require_cookie = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/cookie.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3964,9 +4020,9 @@ var require_cookie = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/tags.js
+// ../../../domql/packages/utils/dist/cjs/tags.js
 var require_tags = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/tags.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4129,9 +4185,9 @@ var require_tags = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/utils/dist/cjs/index.js
+// ../../../domql/packages/utils/dist/cjs/index.js
 var require_cjs2 = __commonJS({
-  "../../node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4164,9 +4220,9 @@ var require_cjs2 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/ignore.js
+// ../../../domql/packages/state/dist/cjs/ignore.js
 var require_ignore = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/ignore.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/ignore.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4213,9 +4269,9 @@ var require_ignore = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/event/dist/cjs/on.js
+// ../../../domql/packages/event/dist/cjs/on.js
 var require_on = __commonJS({
-  "../../node_modules/@domql/event/dist/cjs/on.js"(exports, module2) {
+  "../../../domql/packages/event/dist/cjs/on.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4243,12 +4299,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils11 = require_cjs2();
+    var import_utils13 = require_cjs2();
     var applyEvent = (param, element, state, context, options) => {
       return param(element, state || element.state, context || element.context, options);
     };
     var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils11.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils13.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -4257,7 +4313,7 @@ var require_on = __commonJS({
       return param(updatedObj, element, state || element.state, context || element.context, options);
     };
     var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils11.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils13.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -4268,7 +4324,7 @@ var require_on = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils11.isFunction)(appliedFunction)) {
+        if ((0, import_utils13.isFunction)(appliedFunction)) {
           const { state, context } = element;
           node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
         }
@@ -4277,9 +4333,9 @@ var require_on = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/report/dist/cjs/index.js
+// ../../../domql/plugins/report/dist/cjs/index.js
 var require_cjs3 = __commonJS({
-  "../../node_modules/@domql/report/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/plugins/report/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4374,9 +4430,9 @@ ${element}` : ""
   }
 });
 
-// ../../node_modules/@domql/event/dist/cjs/can.js
+// ../../../domql/packages/event/dist/cjs/can.js
 var require_can = __commonJS({
-  "../../node_modules/@domql/event/dist/cjs/can.js"(exports, module2) {
+  "../../../domql/packages/event/dist/cjs/can.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4401,17 +4457,17 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs3();
-    var import_utils11 = require_cjs2();
+    var import_utils13 = require_cjs2();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils11.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils13.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
 
-// ../../node_modules/@domql/event/dist/cjs/index.js
+// ../../../domql/packages/event/dist/cjs/index.js
 var require_cjs4 = __commonJS({
-  "../../node_modules/@domql/event/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/packages/event/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4434,9 +4490,9 @@ var require_cjs4 = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/methods.js
+// ../../../domql/packages/state/dist/cjs/methods.js
 var require_methods = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/methods.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/methods.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4469,11 +4525,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils11 = require_cjs2();
+    var import_utils13 = require_cjs2();
     var import_ignore = require_ignore();
     var parse2 = function() {
       const state = this;
-      if ((0, import_utils11.isObject)(state)) {
+      if ((0, import_utils13.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -4481,7 +4537,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils11.isArray)(state)) {
+      } else if ((0, import_utils13.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -4501,7 +4557,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils11.isString)(stateKey)) {
+      if ((0, import_utils13.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -4532,14 +4588,14 @@ var require_methods = __commonJS({
       if (!state)
         return;
       const rootState = state.__element.__ref.__root.state;
-      return rootState.update(obj, { isHoisted: false, options });
+      return rootState.update(obj, { isHoisted: false, ...options });
     };
     var add = function(value, options = {}) {
       const state = this;
-      if ((0, import_utils11.isArray)(state)) {
+      if ((0, import_utils13.isArray)(state)) {
         state.push(value);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils11.isObject)(state)) {
+      } else if ((0, import_utils13.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value }, options);
       }
@@ -4550,10 +4606,10 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils11.isArray)(state))
-        (0, import_utils11.removeFromArray)(state, key);
-      if ((0, import_utils11.isObject)(state))
-        (0, import_utils11.removeFromObject)(state, key);
+      if ((0, import_utils13.isArray)(state))
+        (0, import_utils13.removeFromArray)(state, key);
+      if ((0, import_utils13.isObject)(state))
+        (0, import_utils13.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
     var set3 = function(value, options = {}) {
@@ -4562,7 +4618,7 @@ var require_methods = __commonJS({
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils11.isFunction)(func)) {
+      if ((0, import_utils13.isFunction)(func)) {
         func(state);
         return state.update(state, { replace: true, ...options });
       }
@@ -4570,9 +4626,9 @@ var require_methods = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/inherit.js
+// ../../../domql/packages/state/dist/cjs/inherit.js
 var require_inherit = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/inherit.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/inherit.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4602,7 +4658,7 @@ var require_inherit = __commonJS({
       isState: () => isState2
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils11 = require_cjs2();
+    var import_utils13 = require_cjs2();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -4656,9 +4712,9 @@ var require_inherit = __commonJS({
       const inheritedState = findInheritedState(element, parent);
       if (!inheritedState)
         return element.state;
-      if ((0, import_utils11.is)(inheritedState)("object", "array")) {
-        return (0, import_utils11.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils11.is)(inheritedState)("string", "number")) {
+      if ((0, import_utils13.is)(inheritedState)("object", "array")) {
+        return (0, import_utils13.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils13.is)(inheritedState)("string", "number")) {
         ref.__stateType = "string";
         return { value: inheritedState };
       }
@@ -4667,12 +4723,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (!stateKey || (0, import_utils11.isNot)(stateKey)("number", "string"))
+      if (!stateKey || (0, import_utils13.isNot)(stateKey)("number", "string"))
         return false;
       return true;
     };
     var isState2 = function(state) {
-      if (!(0, import_utils11.isObjectLike)(state))
+      if (!(0, import_utils13.isObjectLike)(state))
         return false;
       return state.update && state.parse && state.clean && state.create && state.parent && state.destroy && state.rootUpdate && state.parentUpdate && state.toggle && state.add && state.apply && state.__element && state.__children;
     };
@@ -4692,9 +4748,9 @@ var require_inherit = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/updateState.js
+// ../../../domql/packages/state/dist/cjs/updateState.js
 var require_updateState = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/updateState.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/updateState.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4721,7 +4777,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs3();
     var import_event = require_cjs4();
     var import_ignore = require_ignore();
-    var import_utils11 = require_cjs2();
+    var import_utils13 = require_cjs2();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -4735,7 +4791,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils11.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils13.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -4765,10 +4821,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils11.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils13.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils11.overwriteShallow : import_utils11.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils13.overwriteShallow : import_utils13.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -4831,9 +4887,9 @@ var require_updateState = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/create.js
+// ../../../domql/packages/state/dist/cjs/create.js
 var require_create = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/create.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4859,7 +4915,7 @@ var require_create = __commonJS({
     });
     module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs4();
-    var import_utils11 = require_cjs2();
+    var import_utils13 = require_cjs2();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -4873,7 +4929,7 @@ var require_create = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils11.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils13.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
@@ -4892,17 +4948,17 @@ var require_create = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils11.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils13.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils11.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils13.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils11.isFunction)(state)) {
+      if ((0, import_utils13.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils11.exec)(state, element);
-      } else if ((0, import_utils11.is)(state)("string", "number")) {
+        return (0, import_utils13.exec)(state, element);
+      } else if ((0, import_utils13.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       } else if (state === true) {
@@ -4949,7 +5005,7 @@ var require_create = __commonJS({
         __children: {},
         __root: ref.__root ? ref.__root.state : state
       };
-      if ((0, import_utils11.isArray)(state)) {
+      if ((0, import_utils13.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
@@ -4961,9 +5017,9 @@ var require_create = __commonJS({
   }
 });
 
-// ../../node_modules/@domql/state/dist/cjs/index.js
+// ../../../domql/packages/state/dist/cjs/index.js
 var require_cjs5 = __commonJS({
-  "../../node_modules/@domql/state/dist/cjs/index.js"(exports, module2) {
+  "../../../domql/packages/state/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -5019,8 +5075,8 @@ var require_cjs6 = __commonJS({
       router: () => router
     });
     module2.exports = __toCommonJS2(router_exports);
-    var import_utils11 = require_cjs2();
-    var getActiveRoute = (level = 0, route = import_utils11.window.location.pathname) => {
+    var import_utils13 = require_cjs2();
+    var getActiveRoute = (level = 0, route = import_utils13.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -5034,7 +5090,7 @@ var require_cjs6 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils11.document && import_utils11.document.documentElement,
+      scrollNode: import_utils13.document && import_utils13.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -5049,13 +5105,13 @@ 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_utils11.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== import_utils13.window.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content)
         return;
       if (options.pushState) {
-        import_utils11.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        import_utils13.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -5081,7 +5137,7 @@ var require_cjs6 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils11.document.getElementById(hash2);
+        const activeNode = import_utils13.document.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -5201,7 +5257,7 @@ __export(domql_exports, {
   Pills: () => Pills,
   PlusMinusButtons: () => PlusMinusButtons,
   Position: () => Position,
-  Pracing: () => Pracing,
+  Pricing: () => Pricing,
   ProgressCircle: () => ProgressCircle,
   ProgressCircleWithIcon: () => ProgressCircleWithIcon,
   ProgressCircleWithSideUnitValue: () => ProgressCircleWithSideUnitValue,
@@ -5430,10 +5486,12 @@ var Block = {
       };
     },
     columns: ({ props: props4 }) => props4.columns && { columns: props4.columns },
+    columnRule: ({ props: props4 }) => props4.columnRule && { columnRule: props4.columnRule },
+    columnWidth: ({ props: props4 }) => props4.columnWidth && { columnWidth: props4.columnWidth },
     columnGap: ({ props: props4, deps }) => props4.columnGap ? deps.getSpacingBasedOnRatio(props4, "columnGap") : null,
-    columnSpan: ({ props: props4 }) => props4.columnSpan && { columns: props4.columnSpan },
-    columnFill: ({ props: props4 }) => props4.columnFill && { columns: props4.columnFill },
-    columnCount: ({ props: props4 }) => props4.columnCount && { columns: props4.columnCount }
+    columnSpan: ({ props: props4 }) => props4.columnSpan && { columnSpan: props4.columnSpan },
+    columnFill: ({ props: props4 }) => props4.columnFill && { columnFill: props4.columnFill },
+    columnCount: ({ props: props4 }) => props4.columnCount && { columnCount: props4.columnCount }
   }
 };
 var Hr = {
@@ -5519,11 +5577,6 @@ var Grid = {
 // Atoms/Img.js
 var Img = {
   tag: "img",
-  props: {
-    src: "",
-    alt: "",
-    title: ""
-  },
   attr: {
     src: ({ props: props4 }) => props4.src,
     alt: ({ props: props4 }) => props4.alt,
@@ -5543,7 +5596,7 @@ var Form = {
 };
 
 // Atoms/Media.js
-var import_utils = __toESM(require_cjs2());
+var import_utils2 = __toESM(require_cjs2());
 
 // Atoms/Theme.js
 var import_scratch5 = __toESM(require_cjs());
@@ -5773,6 +5826,7 @@ var SHAPES = {
 };
 
 // Atoms/Theme.js
+var import_utils = __toESM(require_cjs2());
 var getSystemTheme = ({ context, state }) => {
   const rootState = state && state.__root;
   return rootState ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
@@ -5789,7 +5843,7 @@ var Theme = {
     transformBackgroundImage: import_scratch5.transformBackgroundImage
   },
   class: {
-    depth: ({ props: props4, deps }) => props4.depth && deps.depth[props4.depth],
+    depth: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.depth) && deps.depth[props4.depth],
     theme: (element) => {
       const { props: props4, deps } = element;
       const globalTheme = deps.getSystemTheme(element);
@@ -5834,55 +5888,55 @@ var Theme = {
         backgroundImage: deps.transformBackgroundImage(props4.backgroundImage, globalTheme)
       };
     },
-    backgroundSize: ({ props: props4 }) => props4.backgroundSize ? {
+    backgroundSize: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.backgroundSize) ? {
       backgroundSize: props4.backgroundSize
     } : null,
-    backgroundPosition: ({ props: props4 }) => props4.backgroundPosition ? {
+    backgroundPosition: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.backgroundPosition) ? {
       backgroundPosition: props4.backgroundPosition
     } : null,
-    textStroke: ({ props: props4, deps }) => props4.textStroke ? {
+    textStroke: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.textStroke) ? {
       WebkitTextStroke: deps.transformTextStroke(props4.textStroke)
     } : null,
-    outline: ({ props: props4, deps }) => props4.outline && {
+    outline: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.outline) && {
       outline: deps.transformBorder(props4.outline)
     },
-    border: ({ props: props4, deps }) => props4.border && {
+    border: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.border) && {
       border: deps.transformBorder(props4.border)
     },
-    borderColor: ({ props: props4, deps }) => props4.borderColor && {
+    borderColor: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.borderColor) && {
       borderColor: deps.getMediaColor(props4.borderColor)
     },
-    borderStyle: ({ props: props4 }) => props4.borderStyle && {
+    borderStyle: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.borderStyle) && {
       borderStyle: props4.borderStyle
     },
-    borderLeft: ({ props: props4, deps }) => props4.borderLeft && {
+    borderLeft: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.borderLeft) && {
       borderLeft: deps.transformBorder(props4.borderLeft)
     },
-    borderTop: ({ props: props4, deps }) => props4.borderTop && {
+    borderTop: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.borderTop) && {
       borderTop: deps.transformBorder(props4.borderTop)
     },
-    borderRight: ({ props: props4, deps }) => props4.borderRight && {
+    borderRight: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.borderRight) && {
       borderRight: deps.transformBorder(props4.borderRight)
     },
-    borderBottom: ({ props: props4, deps }) => props4.borderBottom && {
+    borderBottom: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.borderBottom) && {
       borderBottom: deps.transformBorder(props4.borderBottom)
     },
-    boxShadow: ({ props: props4, deps }) => props4.boxShadow && {
+    boxShadow: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.boxShadow) && {
       boxShadow: deps.transformShadow(props4.boxShadow)
     },
-    textShadow: ({ props: props4, deps }) => props4.textShadow && {
+    textShadow: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.textShadow) && {
       textShadow: deps.transformShadow(props4.textShadow)
     },
-    opacity: ({ props: props4 }) => props4.opacity && {
+    opacity: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.opacity) && {
       opacity: props4.opacity
     },
-    visibility: ({ props: props4 }) => props4.visibility && {
+    visibility: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.visibility) && {
       visibility: props4.visibility
     },
-    columnRule: ({ props: props4, deps }) => props4.columnRule && {
+    columnRule: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.columnRule) && {
       columnRule: deps.transformBorder(props4.columnRule)
     },
-    appearance: ({ props: props4 }) => props4.appearance && {
+    appearance: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.appearance) && {
       appearance: props4.appearance
     }
   }
@@ -5926,6 +5980,12 @@ var keySetters = {
     isSubtree ? result : result && result.case,
     element
   ),
+  "-": (key, props4, result, element, isSubtree) => applyVariableProps(
+    key,
+    props4,
+    isSubtree ? result : result && result.variable,
+    element
+  ),
   ".": (key, props4, result, element, isSubtree) => applyConditionalCaseProps(
     key,
     props4,
@@ -5950,8 +6010,8 @@ var execClass = (key, props4, result, element) => {
     state: element.state,
     deps: element.deps
   });
-  if ((0, import_utils.isArray)(classExec)) {
-    classExec = classExec.reduce((a, c) => (0, import_utils.merge)(a, c), {});
+  if ((0, import_utils2.isArray)(classExec)) {
+    classExec = classExec.reduce((a, c) => (0, import_utils2.merge)(a, c), {});
   }
   for (const finalProp in classExec) {
     result[finalProp] = classExec[finalProp];
@@ -5984,7 +6044,7 @@ var applyMediaProps = (key, props4, result, element) => {
   const matchesGlobal = name === globalTheme;
   if (globalTheme && isTheme) {
     if (matchesGlobal)
-      return (0, import_utils.merge)(result, generatedClass);
+      return (0, import_utils2.merge)(result, generatedClass);
     return;
   }
   const mediaKey = mediaName ? `@media screen and ${mediaName}` : key;
@@ -6006,28 +6066,33 @@ var applyCaseProps = (key, props4, result, element) => {
   const isPropTrue = element.props[caseKey];
   if (!CASES[caseKey] && !isPropTrue)
     return;
-  return (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+  return (0, import_utils2.merge)(result, convertPropsToClass(props4, result, element));
+};
+var applyVariableProps = (key, props4, result, element) => {
+  result[key] = props4;
+  return result;
 };
 var applyConditionalCaseProps = (key, props4, result, element) => {
   const caseKey = key.slice(1);
   const isPropTrue = element.props[caseKey] || element.state[caseKey];
   if (!isPropTrue)
     return;
-  return (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+  return (0, import_utils2.merge)(result, convertPropsToClass(props4, result, element));
 };
 var applyConditionalFalsyProps = (key, props4, result, element) => {
   const caseKey = key.slice(1);
   const isPropTrue = element.props[caseKey] || element.state[caseKey] === true;
   if (!isPropTrue)
-    return (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+    return (0, import_utils2.merge)(result, convertPropsToClass(props4, result, element));
 };
-var applyTrueProps = (props4, result, element) => (0, import_utils.merge)(result, convertPropsToClass(props4, result, element));
+var applyTrueProps = (props4, result, element) => (0, import_utils2.merge)(result, convertPropsToClass(props4, result, element));
 var beforeClassAssign = (element, s) => {
   const { props: props4, class: className, context } = element;
   const CLASS_NAMES = {
     media: {},
     selector: {},
-    case: {}
+    case: {},
+    variable: {}
   };
   if (!context)
     return;
@@ -6060,7 +6125,7 @@ var beforeClassAssign = (element, s) => {
       preventDefineUpdate: true
     });
   }
-  (0, import_utils.overwriteShallow)(className, CLASS_NAMES);
+  (0, import_utils2.overwriteShallow)(className, CLASS_NAMES);
 };
 var Media = {
   class: {
@@ -6180,19 +6245,19 @@ var Overflow = {
 
 // Atoms/Collection.js
 var import_state = __toESM(require_cjs5());
-var import_utils2 = __toESM(require_cjs2());
+var import_utils3 = __toESM(require_cjs2());
 var Collection = {
   define: {
     $setCollection: (param, el, state) => {
       if (!param)
         return;
-      if ((0, import_utils2.isString)(param)) {
+      if ((0, import_utils3.isString)(param)) {
         if (param === "state")
           param = state.parse();
         else
           param = (0, import_state.getChildStateInKey)(param, state);
       }
-      const data = ((0, import_utils2.isArray)(param) ? param : (0, import_utils2.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils2.isObjectLike)(item) ? { props: { value: item } } : item);
+      const data = ((0, import_utils3.isArray)(param) ? param : (0, import_utils3.isObject)(param) ? Object.values(param) : []).map((item) => !(0, import_utils3.isObjectLike)(item) ? { props: { value: item } } : item);
       if (data.length) {
         const t = setTimeout(() => {
           el.set({ tag: "fragment", ...data }, { preventDefineUpdate: "$setCollection" });
@@ -6204,7 +6269,7 @@ var Collection = {
     $setStateCollection: (param, el, state) => {
       if (!param)
         return;
-      if ((0, import_utils2.isString)(param)) {
+      if ((0, import_utils3.isString)(param)) {
         if (param === "state")
           param = state.parse();
         else
@@ -6212,28 +6277,35 @@ var Collection = {
       }
       if ((0, import_state.isState)(param))
         param = param.parse();
-      if ((0, import_utils2.isNot)(param)("array", "object"))
+      if ((0, import_utils3.isNot)(param)("array", "object"))
         return;
       if (el.key === "cnt") {
         if (el.__ref.__stateCollectionCache) {
-          const d = (0, import_utils2.diff)(param, el.__ref.__stateCollectionCache);
+          const d = (0, import_utils3.diff)(param, el.__ref.__stateCollectionCache);
         } else {
-          el.__ref.__stateCollectionCache = (0, import_utils2.deepClone)(param);
+          el.__ref.__stateCollectionCache = (0, import_utils3.deepClone)(param);
         }
       }
-      const obj = { tag: "fragment" };
+      const obj = {
+        tag: "fragment",
+        props: {
+          childProps: el.props.childProps
+        }
+      };
       for (const key in param) {
         const value = param[key];
-        obj[key] = { state: (0, import_utils2.isObjectLike)(value) ? value : { value } };
+        obj[key] = { state: (0, import_utils3.isObjectLike)(value) ? value : { value } };
+      }
+      if (!(0, import_utils3.deepContains)(obj, el.content)) {
+        el.removeContent();
+        el.content = obj;
       }
-      el.removeContent();
-      el.content = obj;
       return obj;
     },
     $setPropsCollection: (param, el, state) => {
       if (!param)
         return;
-      if ((0, import_utils2.isString)(param)) {
+      if ((0, import_utils3.isString)(param)) {
         if (param === "state")
           param = state.parse();
         else
@@ -6241,15 +6313,22 @@ var Collection = {
       }
       if ((0, import_state.isState)(param))
         param = param.parse();
-      if ((0, import_utils2.isNot)(param)("array", "object"))
+      if ((0, import_utils3.isNot)(param)("array", "object"))
         return;
-      const obj = { tag: "fragment" };
+      const obj = {
+        tag: "fragment",
+        props: {
+          childProps: el.props.childProps
+        }
+      };
       for (const key in param) {
         const value = param[key];
-        obj[key] = { props: (0, import_utils2.isObjectLike)(value) ? value : { value } };
+        obj[key] = { props: (0, import_utils3.isObjectLike)(value) ? value : { value } };
+      }
+      if (!(0, import_utils3.deepContains)(obj, el.content)) {
+        el.removeContent();
+        el.content = obj;
       }
-      el.removeContent();
-      el.content = obj;
       return obj;
     }
   }
@@ -6312,7 +6391,7 @@ var Pseudo = {
 
 // ../../packages/init/index.js
 var import_scratch7 = __toESM(require_cjs());
-var import_utils4 = __toESM(require_cjs2());
+var import_utils5 = __toESM(require_cjs2());
 
 // ../../node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js
 function sheetForTag(tag) {
@@ -7666,9 +7745,9 @@ var dynamic_default = {};
 // ../../packages/init/index.js
 var CONFIG2 = (0, import_scratch7.getActiveConfig)();
 var mergeWithLocalFile = (config = CONFIG2, RC_FILE) => {
-  const rcfile = (0, import_utils4.isObject)(RC_FILE) ? RC_FILE : dynamic_default || {};
-  const clonedFile = (0, import_utils4.deepClone)(rcfile.designSystem || {});
-  return (0, import_utils4.deepMerge)(config, clonedFile);
+  const rcfile = (0, import_utils5.isObject)(RC_FILE) ? RC_FILE : dynamic_default || {};
+  const clonedFile = (0, import_utils5.deepClone)(rcfile.designSystem || {});
+  return (0, import_utils5.deepMerge)(config, clonedFile);
 };
 var SET_OPTIONS = {
   emotion,
@@ -7756,10 +7835,10 @@ var Svg = {
 };
 
 // Atoms/Shape/index.js
-var import_utils5 = __toESM(require_cjs2());
+var import_utils6 = __toESM(require_cjs2());
 var import_scratch8 = __toESM(require_cjs());
 var transformBorderRadius = (radius, props4, propertyName) => {
-  if (!(0, import_utils5.isString)(radius))
+  if (!(0, import_utils6.isString)(radius))
     return;
   return {
     borderRadius: radius.split(" ").map((v, k) => (0, import_scratch8.getSpacingBasedOnRatio)(props4, propertyName, v)[propertyName]).join(" ")
@@ -7767,7 +7846,7 @@ var transformBorderRadius = (radius, props4, propertyName) => {
 };
 var Shape = {
   extend: Pseudo,
-  deps: { exec: import_utils5.exec, getSpacingBasedOnRatio: import_scratch8.getSpacingBasedOnRatio, getMediaColor: import_scratch8.getMediaColor, transformBorderRadius },
+  deps: { exec: import_utils6.exec, getSpacingBasedOnRatio: import_scratch8.getSpacingBasedOnRatio, getMediaColor: import_scratch8.getMediaColor, transformBorderRadius },
   class: {
     shape: ({ props: props4, deps }) => {
       const { shape } = props4;
@@ -7866,18 +7945,18 @@ var XYZ = {
 
 // Atoms/Animation.js
 var import_scratch10 = __toESM(require_cjs());
-var import_utils6 = __toESM(require_cjs2());
+var import_utils7 = __toESM(require_cjs2());
 var applyAnimationProps = (animation, element) => {
   const { emotion: ctxEmotion } = element.context;
   const { keyframes } = ctxEmotion || emotion;
-  if ((0, import_utils6.isObject)(animation))
+  if ((0, import_utils7.isObject)(animation))
     return { animationName: keyframes(animation) };
   const { ANIMATION } = element.context && element.context.designSystem;
   const record = ANIMATION[animation];
   return keyframes(record);
 };
 var Animation = {
-  deps: { isObject: import_utils6.isObject, getTimingByKey: import_scratch10.getTimingByKey, getTimingFunction: import_scratch10.getTimingFunction, applyAnimationProps },
+  deps: { isObject: import_utils7.isObject, getTimingByKey: import_scratch10.getTimingByKey, getTimingFunction: import_scratch10.getTimingFunction, applyAnimationProps },
   class: {
     animation: (el) => el.props.animation && {
       animationName: el.deps.applyAnimationProps(el.props.animation, el),
@@ -7916,7 +7995,7 @@ var Animation = {
 };
 
 // Box/index.js
-var import_utils7 = __toESM(require_cjs2());
+var import_utils8 = __toESM(require_cjs2());
 var PropsCSS = {
   class: {
     style: ({ props: props4 }) => props4 && props4.style
@@ -7938,7 +8017,7 @@ var Box = {
     XYZ,
     Animation
   ],
-  deps: { isString: import_utils7.isString },
+  deps: { isString: import_utils8.isString },
   attr: {
     id: ({ props: props4, deps }) => deps.isString(props4.id) && props4.id,
     title: ({ props: props4, deps }) => deps.isString(props4.title) && props4.title,
@@ -7959,13 +8038,15 @@ var Circle = {
 };
 
 // Icon/index.js
+var import_utils9 = __toESM(require_cjs2());
 var Icon = {
   extend: Svg,
-  props: ({ key, props: props4, parent, context }) => {
+  deps: { isString: import_utils9.isString },
+  props: ({ key, props: props4, parent, context, deps }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
     const { toCamelCase } = context && context.utils;
     const iconName = props4.inheritedString || props4.name || props4.icon || key;
-    const camelCase = toCamelCase(iconName);
+    const camelCase = toCamelCase(deps.isString(iconName) ? iconName : key);
     const isArray3 = camelCase.split(/([a-z])([A-Z])/g);
     let activeIconName;
     if (props4.active) {
@@ -8006,14 +8087,9 @@ var IconText = {
     align: "center center",
     lineHeight: 1
   },
-  // TODO: remove this variant
-  icon: {
-    extend: Icon,
-    if: ({ parent }) => parent.props.icon
-  },
   Icon: {
-    props: {},
-    if: ({ props: props4 }) => props4.name || props4.icon
+    props: ({ parent, props: props4 }) => ({ icon: parent.props.icon || props4.name || props4.icon }),
+    if: ({ parent, props: props4 }) => parent.props.icon || parent.props.Icon || props4.name || props4.icon
   },
   text: ({ props: props4 }) => props4.text,
   ".reversed": {
@@ -8081,13 +8157,16 @@ var CheckIndicatorWithLabel = {
 
 // Indicator/CountIndicator.js
 var CountIndicator = {
+  extend: Flex,
   props: {
     text: "2",
     theme: "primary",
     boxSize: "fit-content",
     lineHeight: "1em",
-    padding: "X X2",
-    round: "Z",
+    padding: "X1",
+    round: "100%",
+    align: "center center",
+    aspectRatio: "1 / 1",
     color: "white"
   }
 };
@@ -8172,7 +8251,7 @@ var TitleParagraphWithButton = {
         background: "transparent",
         color: "white",
         padding: "0",
-        icon: {
+        Icon: {
           name: "x",
           fontSize: "C"
         }
@@ -8297,15 +8376,14 @@ var RouterLink = {
       const { href } = props4;
       if (!href)
         return;
-      const { utils, routerOptions } = ctx;
-      const { router } = utils;
+      const { utils, snippets, routerOptions } = ctx;
       const root = el.__ref.__root;
       const linkIsExternal = href.includes("http://") || href.includes("https://") || href.includes("mailto:") || href.includes("tel:");
       const options = props4.routerOptions || routerOptions || {
         scrollToOptions: { behaviour: "instant" }
       };
       if (href && !linkIsExternal) {
-        (router || import_router.router)(href, root, {}, options);
+        (snippets.router || utils.router || import_router.router)(href, root, {}, options);
         event.preventDefault();
       }
     }
@@ -8364,11 +8442,11 @@ var DoubleHr = {
 };
 
 // Input/Input.js
-var import_utils8 = __toESM(require_cjs2());
+var import_utils10 = __toESM(require_cjs2());
 var Input = {
   tag: "input",
   extend: [Focusable],
-  deps: { isString: import_utils8.isString, replaceLiteralsWithObjectFields: import_utils8.replaceLiteralsWithObjectFields },
+  deps: { isString: import_utils10.isString, replaceLiteralsWithObjectFields: import_utils10.replaceLiteralsWithObjectFields },
   props: {
     border: "none",
     type: "input",
@@ -8387,8 +8465,8 @@ var Input = {
     autocomplete: ({ props: props4 }) => props4.autocomplete,
     placeholder: ({ props: props4 }) => props4.placeholder,
     value: ({ props: props4, state, deps }) => {
-      const { isString: isString5, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
-      if (isString5(props4.value) && props4.value.includes("{{")) {
+      const { isString: isString6, replaceLiteralsWithObjectFields: replaceLiteralsWithObjectFields2 } = deps;
+      if (isString6(props4.value) && props4.value.includes("{{")) {
         return replaceLiteralsWithObjectFields2(props4.value, state);
       }
       return props4.value;
@@ -8422,11 +8500,11 @@ var Checkbox = {
   Input: {
     type: "checkbox",
     display: "none",
-    ":checked ~ div": {
+    ":checked + div": {
       background: "#0474F2",
       border: "1px solid transparent"
     },
-    ":checked ~ div > svg": { opacity: "1" }
+    ":checked + div > svg": { opacity: "1" }
   },
   Flex: {
     props: {
@@ -8448,12 +8526,13 @@ var Checkbox = {
 };
 var CheckboxTitleParagraph = {
   extend: Flex,
+  tag: "label",
   props: {
     boxSize: "fit-content",
     align: "flex-start flex-start",
     gap: "A"
   },
-  Checkbox: {},
+  Checkbox: { tag: "div" },
   TitleParagraph: {
     gap: "Z1",
     margin: "Y - - -"
@@ -8465,7 +8544,7 @@ var Radio = {
   extend: Checkbox,
   Input: {
     type: "radio",
-    ":checked ~ div:after": { opacity: "1" }
+    ":checked + div:after": { opacity: "1" }
   },
   Flex: {
     props: {
@@ -8494,7 +8573,7 @@ var RadioTitleParagraph = {
 var Toggle = {
   extend: Checkbox,
   Input: {
-    ":checked ~ div": {
+    ":checked + div": {
       background: "green2 +8",
       justifyContent: "flex-end"
     }
@@ -8530,7 +8609,17 @@ var Textarea = {
   tag: "textarea",
   extend: [Input, Flex],
   props: {
-    variant: "outlined"
+    variant: "outlined",
+    round: "Z2",
+    maxWidth: "H",
+    minHeight: "E",
+    placeholder: "Leave us a message...",
+    fontSize: "Z1",
+    padding: "A",
+    background: "rgba(0, 0, 0, 0)",
+    border: "1px solid #3F3F43",
+    color: "white",
+    style: { resize: "none" }
   },
   ".simple": {
     props: {
@@ -8545,12 +8634,11 @@ var Textarea = {
     props: {
       border: "1px solid #3F3F43",
       background: "transparent",
-      round: "Y+W",
+      // round: 'Y+W',
       width: "G1",
       height: "D2+W",
       lineHeight: 1.4,
       placeholder: "Leave us a message...",
-      fontSize: "Y2",
       outline: "none !important",
       color: "white",
       resize: "none"
@@ -8579,18 +8667,18 @@ var TextareaWithButton = {
   extend: Flex,
   props: { gap: "Y2" },
   Textarea: {
-    height: "52px",
+    height: "C2+W",
+    minWidth: "H",
     padding: "A",
     fontSize: "Z1",
     color: "white",
-    placeholder: "Message",
-    round: "Z2"
-    // background: 'gray'
+    round: "Z2",
+    minHeight: "dit-content"
   },
   IconCommonButton: {
     props: {
       background: "blue",
-      icon: { name: "send" }
+      Icon: { name: "send" }
     }
   }
 };
@@ -8626,7 +8714,8 @@ var Select = {
 
 // Field/Field.js
 var Field = {
-  extend: IconText,
+  tag: "label",
+  extend: [Focusable, IconText],
   props: {
     minWidth: "G",
     maxWidth: "G",
@@ -8637,8 +8726,8 @@ var Field = {
     padding: "- Z+W",
     round: "Y+W",
     border: "1px solid #3F3F43",
-    overflow: "hidden",
     position: "relative",
+    ":focus-within": { outline: "1px solid #0474F2" },
     Button: {
       padding: "0",
       background: "transparent",
@@ -8647,53 +8736,57 @@ var Field = {
     }
   },
   Input: {
-    padding: "0",
-    background: "transparent",
-    round: "0",
-    color: "white",
-    fontFamily: "avenir",
-    placeholder: "Placeholder",
-    flex: "1",
-    minHeight: "100%",
-    outline: "none !important",
-    fontWeight: "400"
+    props: {
+      padding: "0",
+      background: "rgba(0, 0, 0, 0)",
+      round: "0",
+      color: "white",
+      fontFamily: "avenir",
+      placeholder: "Placeholder",
+      flex: "1",
+      minHeight: "100%",
+      outline: "none !important",
+      fontWeight: "400"
+    }
   }
 };
 var FieldTemplate = {
   extend: Field,
   Icon: { props: { name: "info" } },
   Input: {},
-  Button: { icon: { name: "eye" } }
+  Button: { Icon: { name: "eye" } }
 };
 
 // Field/CommonField.js
 var CommonField = {
   extend: Flex,
+  tag: "label",
   props: {
     flow: "column",
     boxSize: "fit-content fit-content",
-    gap: "Y+W",
-    Hint: {
-      align: "center flex-start",
-      text: "",
-      fontSize: "Y",
-      gap: "Y",
-      padding: "- - - Z"
-    }
+    gap: "Z"
   },
   Title: {
     props: {
       text: "Label",
-      fontSize: "Z",
       lineHeight: "1em",
-      padding: "- - - Z",
+      padding: "- - - V2",
       color: "gray4"
     }
   },
-  Field: {},
+  Field: {
+    tag: "div"
+  },
   Hint: {
     extend: IconText,
-    props: { color: "gray4" }
+    props: {
+      color: "gray4",
+      align: "center flex-start",
+      text: "",
+      fontSize: "Z1",
+      gap: "Y",
+      padding: "W - - W"
+    }
   }
 };
 var CommonFieldTemplate = {
@@ -8721,15 +8814,20 @@ var NumberField = {
   },
   Input: null,
   NumberInput: {
-    fontSize: "E",
-    placeholder: "0",
-    boxSize: "100% 100%",
-    textAlign: "center",
-    round: "0",
-    background: "transparent",
-    color: "white",
-    "::-webkit-inner-spin-button": {
-      "-webkit-appearance": " none"
+    props: {
+      fontSize: "E",
+      placeholder: "0",
+      boxSize: "100% 100%",
+      textAlign: "center",
+      round: "Y",
+      color: "white",
+      background: "rgba(0, 0, 0, 0)",
+      outline: "none !important",
+      style: {
+        "&::-webkit-inner-spin-button": {
+          "-webkit-appearance": "none"
+        }
+      }
     }
   }
 };
@@ -8738,41 +8836,52 @@ var NumberField = {
 var Search = {
   extend: Field,
   props: {
-    minHeight: "C+A",
     maxWidth: "H",
-    gap: "Z+W",
-    padding: "- A",
+    gap: "Y2",
+    padding: "Z2 A1",
     background: "gray .92 +8"
   },
   Icon: {
     props: {
+      opacity: ".65",
       name: "search",
-      fontSize: "D",
+      fontSize: "B",
       margin: "0 - - -"
     }
   },
-  Input: { placeholder: "Type a command or search" }
+  Input: {
+    props: { placeholder: "Type a command or search" }
+  }
 };
 var SearchWithButton = {
   extend: Search,
   Icon: {},
-  Input: { ":focus ~ button": { opacity: "1" } },
+  Input: { props: { ":focus ~ button": { opacity: "1" } } },
   Button: {
-    opacity: "0",
-    fontSize: "D",
-    icon: { name: "x" }
+    props: {
+      opacity: "0",
+      fontSize: "D",
+      icon: "x"
+    },
+    Icon: {
+      on: {
+        click: (e, el) => {
+          el.parent.parent.Input.node.value = "";
+        }
+      }
+    }
   }
 };
 var SearchWithDropDownButton = {
   extend: SearchWithButton,
   props: {
     padding: "- A - 0",
-    background: "#1C1C1F",
+    theme: "tertiary",
     maxWidth: "H+C"
   },
   DropDownButton: {
     background: "gray",
-    margin: "- Y - -"
+    margin: "- Z - -"
   },
   Icon: {},
   Input: {},
@@ -8823,15 +8932,14 @@ var KangorooButton = {
 var CommonButton = {
   extend: Button,
   props: {
-    color: "white",
-    background: "blue",
+    theme: "primary",
     boxSize: "fit-content",
     padding: "A A2",
     round: "Z2",
     gap: "Y2",
     position: "relative"
   },
-  icon: {
+  Icon: {
     props: { fontSize: "C" }
   },
   Caption: {
@@ -8844,7 +8952,7 @@ var CommonButton = {
 var IconCommonButton = {
   extend: CommonButton,
   props: {
-    icon: { name: "smile" },
+    Icon: { name: "smile" },
     boxSize: "fit-content fit-content",
     padding: "A",
     background: "gray3"
@@ -8881,26 +8989,26 @@ var CancelConfirmButtons = {
 var IcontextButton = {
   extend: CommonButton,
   props: {
-    padding: "A",
+    padding: "A A1",
     position: "relative",
     background: "gray3",
-    icon: { name: "smile" }
+    Icon: { name: "smile" }
   }
 };
 var DropDownButton = {
   extend: CommonButton,
   props: {
-    gap: "Y",
+    gap: "X2",
     boxSize: "fit-content fit-content",
-    padding: "A B A A+X",
+    padding: "Z2 B Z2 A",
     round: "Z",
     background: "#141416",
     color: "white",
-    icon: {
+    Icon: {
       name: "chevronDown",
       fontSize: "D"
     },
-    Caption: { text: "all" }
+    Caption: { text: "All" }
   }
 };
 var DropDownButtonWithAvatar = {
@@ -8929,12 +9037,12 @@ var PlusMinusButtons = {
   },
   Minus: {
     extend: IconCommonButton,
-    props: { icon: { name: "minus" } }
+    props: { Icon: { name: "minus" } }
   },
   Value: { props: { text: "1" } },
   Plus: {
     extend: IconCommonButton,
-    props: { icon: { name: "plus" } }
+    props: { Icon: { name: "plus" } }
   }
 };
 
@@ -9050,7 +9158,7 @@ var ProgressCircleWithSideUnitValue = {
 };
 
 // Range/index.js
-var import_utils9 = __toESM(require_cjs2());
+var import_utils11 = __toESM(require_cjs2());
 var import_scratch11 = __toESM(require_cjs());
 var props = {
   appearance: "none",
@@ -9118,7 +9226,7 @@ var Range = {
 };
 var listenProp = (el, prop, def) => {
   const val = el.props && el.props[prop];
-  const r = (0, import_utils9.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
+  const r = (0, import_utils11.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
   return r + "";
 };
 var RangeWithButtons = {
@@ -9127,7 +9235,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "minus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils9.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
+        el.props && (0, import_utils11.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
       }
     }
   },
@@ -9148,8 +9256,8 @@ var RangeWithButtons = {
       step: (el, s) => listenProp(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils9.isFunction)(el.props.onInput) && el.props.onInput(ev, el, el.state),
-      change: (ev, el, s) => el.props && (0, import_utils9.isFunction)(el.props.onChange) && el.props.onChange(ev, el, el.state)
+      input: (ev, el, s) => el.props && (0, import_utils11.isFunction)(el.props.onInput) && el.props.onInput(ev, el, el.state),
+      change: (ev, el, s) => el.props && (0, import_utils11.isFunction)(el.props.onChange) && el.props.onChange(ev, el, el.state)
     }
   },
   plus: {
@@ -9157,7 +9265,7 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "plus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils9.isFunction)(el.props.onClick) && el.props.onClick(ev, el, el.state);
+        el.props && (0, import_utils11.isFunction)(el.props.onClick) && el.props.onClick(ev, el, el.state);
       }
     }
   }
@@ -9184,7 +9292,7 @@ var style_default = {
 
 // Slider/index.js
 var import_scratch12 = __toESM(require_cjs());
-var import_utils10 = __toESM(require_cjs2());
+var import_utils12 = __toESM(require_cjs2());
 (0, import_scratch12.set)({
   theme: {
     sliderThumb: {
@@ -9216,7 +9324,7 @@ var RangeSlider = {
 };
 var listenProp2 = (el, prop, def) => {
   const val = el && el.props && el.props[prop];
-  const r = ((0, import_utils10.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
+  const r = ((0, import_utils12.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
   return r;
 };
 var Slider = {
@@ -9227,10 +9335,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils10.isFunction)(el.props.click) && el.props.click(ev, el, s);
+        el.props && (0, import_utils12.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
         const props4 = input.props;
-        const value = (0, import_utils10.isFunction)(props4.value) ? props4.value() : props4.value;
+        const value = (0, import_utils12.isFunction)(props4.value) ? props4.value() : props4.value;
         input.node.value = value;
       }
     }
@@ -9253,8 +9361,8 @@ var Slider = {
       step: (el, s) => listenProp2(el, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils10.isFunction)(el.props.input) && el.props.input(ev, el, s),
-      change: (ev, el, s) => el.props && (0, import_utils10.isFunction)(el.props.change) && el.props.change(ev, el, s)
+      input: (ev, el, s) => el.props && (0, import_utils12.isFunction)(el.props.input) && el.props.input(ev, el, s),
+      change: (ev, el, s) => el.props && (0, import_utils12.isFunction)(el.props.change) && el.props.change(ev, el, s)
     }
   },
   button1: {
@@ -9264,10 +9372,10 @@ var Slider = {
     },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils10.isFunction)(el.props.click) && el.props.click(ev, el, s);
+        el.props && (0, import_utils12.isFunction)(el.props.click) && el.props.click(ev, el, s);
         const input = el.parent.input;
         const props4 = input.props;
-        const value = (0, import_utils10.isFunction)(props4.value) ? props4.value() : props4.value;
+        const value = (0, import_utils12.isFunction)(props4.value) ? props4.value() : props4.value;
         input.node.value = value;
       }
     }
@@ -9322,8 +9430,7 @@ var Avatar = {
     avatarType: "initials",
     borderRadius: "100%",
     boxSize: "C+X C+X",
-    cursor: "pointer",
-    src: `https://api.dicebear.com/7.x/${props4.avatarType || "adventurer-neutral"}/svg?seed=${props4.key || key}`
+    src: `https://api.dicebear.com/7.x/${props4.avatarType || "initials"}/svg?seed=${props4.key || key}`
   })
 };
 
@@ -9345,16 +9452,20 @@ var AvatarIndicator = {
 // Avatar/AvatarBundle.js
 var AvatarBundle = {
   extend: Flex,
-  childExtend: {
-    extend: Avatar,
-    props: {
-      border: "0.1312em, black .85, solid",
+  props: {
+    childProps: {
+      "@light": {
+        border: "X, var(--theme-document-light-background), solid"
+      },
+      "@dark": {
+        border: "X, var(--theme-document-dark-background), solid"
+      },
       ":not(:last-child)": {
         margin: "0 -Y2 0 0"
       }
     }
   },
-  ...[{}, {}, {}, {}]
+  childExtend: Avatar
 };
 
 // Avatar/AvatarChooser.js
@@ -9363,6 +9474,7 @@ var AvatarChooser = {
   tag: "label",
   props: {
     round: "C",
+    width: "fit-content",
     gap: "Y",
     padding: "W2 A W2 W2",
     theme: "tertiary",
@@ -9379,7 +9491,7 @@ var AvatarChooser = {
   Select: {
     props: {
       outline: "none",
-      pointerEvents: "all",
+      pointerEvents: "All",
       appearance: "none",
       border: "none",
       width: "100%",
@@ -9410,6 +9522,9 @@ var AvatarChooser = {
         console.log(state.key);
       }
     }
+  },
+  Icon: {
+    name: "arrowDown"
   }
 };
 
@@ -9600,17 +9715,17 @@ var Tab = {
   extend: IcontextButton,
   props: {
     boxSize: "fit-content fit-content",
-    background: "gray .92 +8",
+    theme: "secondary",
     align: "center flex-start",
-    padding: "Z Z2",
     gap: "Z",
     position: "relative"
   },
-  icon: {},
+  Icon: {},
   Caption: {},
   CountIndicator: {
-    text: "19",
-    padding: "Y Y1"
+    fontSize: "Y2",
+    margin: "- -X - X",
+    text: "19"
   }
 };
 var IconTab = {
@@ -9619,11 +9734,11 @@ var IconTab = {
   Span: null,
   CountIndicator: {
     position: "absolute",
-    top: "-Z",
-    right: "-Z",
+    top: "-Y1",
+    right: "-Y1",
     fontSize: "Y",
     fontWeight: "500",
-    padding: "X X+W",
+    padding: "X1",
     text: "19"
   }
 };
@@ -9772,7 +9887,7 @@ var LineStepsWithTitleParagraph = {
   extend: Flex,
   props: {
     flow: "column",
-    padding: "B",
+    padding: "A1 B B",
     background: "gray",
     round: "A",
     boxSize: "fit-content",
@@ -9810,7 +9925,7 @@ var ParagraphButton = {
   },
   P: {
     props: {
-      text: "Didn\u2019t get the code?",
+      text: "Didn't get the code?",
       color: "gray2",
       margin: "0"
     }
@@ -9825,14 +9940,18 @@ var ParagraphButton = {
 };
 var ParagraphButtonWithCheckbox = {
   extend: Flex,
+  tag: "label",
   props: {
-    gap: "Z",
+    gap: "1ch",
     alignItems: "center"
   },
   Checkbox: {
-    Input: {},
-    Flex: {
-      fontSize: "A1"
+    tag: "div",
+    props: {
+      Input: {},
+      Flex: {
+        fontSize: "A1"
+      }
     }
   },
   ParagraphButton: {
@@ -9853,7 +9972,7 @@ var SocialLink = {
     round: "Y+W",
     maxHeight: `${48 / 16}em`,
     cursor: "pointer",
-    icon: {
+    Icon: {
       name: "twitch",
       boxSize: "A2"
     },
@@ -9863,11 +9982,10 @@ var SocialLink = {
 
 // Dialog/index.js
 var Dialog = {
+  extend: Flex,
   props: {
-    theme: "tertiary",
+    theme: "dialog",
     round: "Z2",
-    margin: "E",
-    overflow: "hidden",
     padding: "- Z - -"
   }
 };
@@ -9912,13 +10030,12 @@ var DialogFooter = {
 
 // Modal/Modal.js
 var Modal = {
-  extend: Flex,
+  extend: Dialog,
   props: {
     flow: "column",
-    background: "gray",
     boxSize: "fit-content fit-content",
-    round: "Z+X",
     padding: "A",
+    gap: "B1",
     minWidth: "G3+Z1"
   },
   Header: {
@@ -9936,7 +10053,7 @@ var Modal = {
       p: { props: { color: "white" } }
     }
   },
-  Content: { extend: [Flex] },
+  Content: { extend: Flex },
   Footer: { extend: Flex }
 };
 
@@ -10024,20 +10141,20 @@ var Message = {
 };
 
 // Modal/Pricing.js
-var Pracing = {
+var Pricing = {
   extend: Modal,
   props: {
     background: "gray3",
-    gap: "A",
+    gap: "B",
     minWidth: "G+B",
     maxWidth: "G+B",
-    padding: "A"
+    padding: "A1"
   },
   Header: null,
   Content: {
     props: {
       flow: "column",
-      gap: "A"
+      gap: "A1"
     },
     childExtend: {
       extend: UnitValue,
@@ -10063,11 +10180,15 @@ var Pracing = {
     ]
   },
   Footer: {
+    props: {
+      margin: "- -X -X"
+    },
     CommonButton: {
       flex: "1",
       padding: "Z2 -",
       round: "Y2",
-      background: "gray",
+      theme: "secondary",
+      margin: "- -X -X",
       Caption: {
         text: "Add promo code",
         fontSize: "Z",
@@ -10078,16 +10199,25 @@ var Pracing = {
 };
 
 // Modal/VerificationCode.js
+var NUMBERS = [null, null, null, null];
 var VerificationCode = {
   extend: Modal,
   props: {
     maxWidth: "G3",
     gap: "A2"
   },
+  state: { value: NUMBERS },
   Header: {
     props: { gap: "A" },
     Title: { h5: { text: "Verify your email" } },
-    Paragraph: { p: { text: "Verification code has been sent to you. Enter the code below." } }
+    Paragraph: {
+      p: {
+        props: {
+          text: "Verification code has been sent to you. Enter the code below.",
+          lineHeight: "1.5em"
+        }
+      }
+    }
   },
   Content: {
     props: {
@@ -10100,10 +10230,50 @@ var VerificationCode = {
         justifyContent: "space-between",
         flex: "1"
       },
-      childExtend: NumberField,
+      childExtend: {
+        extend: NumberField,
+        NumberInput: {
+          props: ({ parent, state }) => ({
+            ...NumberField.NumberInput.props,
+            value: state.value[parent.key] || ""
+          }),
+          on: {
+            keydown: (event, element, state) => {
+              const { value } = element.node;
+              if (value.length > 1)
+                return false;
+            },
+            keyup: (event, element, state) => {
+              const { target, keyCode } = event;
+              const { value } = target;
+              const next2 = element.parent.nextElement();
+              const previous = element.parent.previousElement();
+              const isNumber = keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105;
+              const isBackspace = event.keyCode === 8 || event.keyCode === 46;
+              target.select();
+              if (isNumber && value.length && next2)
+                next2.NumberInput.node.focus();
+              if ((!value.length || isBackspace) && previous)
+                previous.NumberInput.node.focus();
+              state.value[element.parent.key] = value;
+            },
+            paste: (event, element, state) => {
+              event.preventDefault();
+              const paste = (event.clipboardData || window.clipboardData).getData("text");
+              if (!paste)
+                return;
+              const value = paste.split("");
+              state.update({ value }, { overwrite: "shallow" });
+            }
+          }
+        }
+      },
       ...[{}, {}, {}, {}]
     },
-    ParagraphButton: { extend: ParagraphButton }
+    ParagraphButton: {
+      extend: ParagraphButton,
+      props: { padding: "- - - Y" }
+    }
   },
   Footer: {
     props: {
@@ -10114,7 +10284,7 @@ var VerificationCode = {
       extend: CancelConfirmButtons,
       props: { childProps: { ":first-child": { border: "none" } } },
       ...[
-        {},
+        { Caption: { text: "Cancel" } },
         { Caption: { text: "Verify" } }
       ]
     }
@@ -10127,53 +10297,40 @@ var List = {
     position: "relative",
     overflow: "hidden",
     round: "Z1",
-    background: "gray",
     minWidth: "F1",
-    ":before": {
+    theme: "dialog",
+    ":before, &:after": {
       content: '""',
       position: "absolute",
       boxSize: "A2 100%",
-      top: "0",
-      left: "0",
       zIndex: "2",
-      background: "linear-gradient(to bottom, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)"
+      left: "0",
+      pointerEvents: "none"
+    },
+    ":before": {
+      top: "0",
+      background: "linear-gradient(to bottom, var(--theme-dialog-dark-background) 0%, transparent 100%)"
     },
     ":after": {
-      content: '""',
-      position: "absolute",
-      boxSize: "A2 100%",
       bottom: "0",
-      left: "0",
-      zIndex: "2",
-      background: "linear-gradient(to top, rgba(20, 20, 22, 1) 0%, rgba(20, 20, 22, 0) 100%)"
+      background: "linear-gradient(to top, var(--theme-dialog-dark-background) 0%, transparent 100%)"
     }
   },
   Flex: {
     props: {
       flow: "column",
       maxHeight: "F+C",
-      style: {
-        overflowY: "auto",
-        "::-webkit-scrollbar": { display: "none" }
-      }
+      overflow: "auto",
+      "::-webkit-scrollbar": { display: "none" }
     },
     childExtend: {
       props: {
         padding: "Z1 A1",
         position: "relative",
         cursor: "pointer",
-        ":after": {
-          content: '""',
-          boxSize: "100% 100%",
-          position: "absolute",
-          top: "0",
-          left: "0",
-          opacity: "0",
+        ":hover": {
           background: "gray .92 +8"
-          // background: '#141416'
         },
-        ":hover > *": { zIndex: "5" },
-        ":hover:after": { opacity: "1", zIndex: "4" },
         childProps: { position: "relative" }
       }
     }
@@ -10184,6 +10341,12 @@ var ListTemplate = {
   props: { maxWidth: "F" },
   Flex: {
     ...[
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
+      { span: { text: "Item" } },
       { span: { text: "Item" } },
       { span: { text: "Item" } },
       { span: { text: "Item" } },
@@ -10208,11 +10371,14 @@ var ListWithTitle = {
   Title: {
     tag: "h5",
     props: {
+      position: "sticky",
+      top: "0",
+      zIndex: "3",
       text: "Group name",
       fontSize: "Z",
       color: "gray .92 +68",
       fontWeight: "400",
-      background: "transparent",
+      theme: "dialog",
       padding: "A"
     }
   },
@@ -10235,8 +10401,6 @@ var ListWithTitleTemplate = {
         { span: { text: "Item" } },
         { span: { text: "Item" } },
         { span: { text: "Item" } },
-        { span: { text: "Item" } },
-        { span: { text: "Item" } },
         { span: { text: "Item" } }
       ]
     }
@@ -10249,15 +10413,14 @@ var GroupList = {
   props: {
     flow: "column",
     overflow: "hidden",
+    theme: "dialog",
     maxHeight: "H",
-    background: "gray3",
     round: "Z1",
     maxWidth: "G"
   },
   Header: {
     extend: Flex,
     props: {
-      background: "gray",
       padding: "Z - Z A"
     },
     h4: {
@@ -10271,37 +10434,17 @@ var GroupList = {
   },
   Groups: {
     props: {
-      overflow: "hidden",
-      maxHeight: "100%",
-      position: "relative",
-      ":before": {
-        content: '""',
-        position: "absolute",
-        boxSize: "A1 100%",
-        top: "0",
-        left: "0",
-        zIndex: "2",
-        background: "linear-gradient(to bottom, rgba(28, 28, 31, 1) 0%, rgba(28, 28, 31, 0) 100%)"
-      },
-      ":after": {
-        content: '""',
-        position: "absolute",
-        boxSize: "A1 100%",
-        bottom: "0",
-        left: "0",
-        zIndex: "2",
-        background: "linear-gradient(to top, rgba(28, 28, 31, 1) 0%, rgba(28, 28, 31, 0) 100%)"
-      }
+      ...List.props,
+      theme: null,
+      round: "0"
     },
     Flex: {
       extend: Flex,
       props: {
         flow: "column",
         maxHeight: "G2",
-        style: {
-          overflowY: "auto !important",
-          "::-webkit-scrollbar": { display: "none" }
-        }
+        overflow: "auto",
+        "::-webkit-scrollbar": { display: "none" }
       },
       childExtend: {
         extend: ListWithTitle,
@@ -10367,6 +10510,14 @@ var GroupListTemplate = {
           List: {
             Flex: {
               ...[
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
+                { span: { text: "Item" } },
                 { span: { text: "Item" } },
                 { span: { text: "Item" } },
                 { span: { text: "Item" } },
@@ -10389,7 +10540,7 @@ var GroupListWithSearch = {
   SearchContainer: {
     extend: Flex,
     props: {
-      padding: "A Z1"
+      padding: "X Y"
     },
     Search: {
       extend: Search,
@@ -10397,8 +10548,10 @@ var GroupListWithSearch = {
         maxWidth: "100%",
         minWidth: "100%",
         minHeight: "C+Y",
-        round: "Z2",
-        background: "transparent"
+        round: "C",
+        fontSize: "Z2",
+        border: "none",
+        background: "black .25"
       },
       Icon: {
         props: {
@@ -10571,7 +10724,7 @@ var TimePicker = {
   props: {
     flow: "column",
     width: "fit-content",
-    padding: "Z A"
+    padding: "Z2 A"
   },
   Title: {
     fontSize: "Z1",
@@ -10657,7 +10810,7 @@ var DropdownList = {
           svg: { opacity: "0.5" }
         }
       },
-      icon: {
+      Icon: {
         active: state.active === key,
         name: "checkmark",
         opacity: "0.1",
@@ -10691,8 +10844,9 @@ var DropdownParent = {
 // Form/CommonForm.js
 var CommonForm = {
   extend: [Form, Grid],
+  tag: "form",
   props: {
-    gap: "A1",
+    gap: "B2",
     height: "fit-content",
     margin: "0",
     width: "100%"
@@ -10701,13 +10855,15 @@ var CommonForm = {
     extend: CommonField,
     props: {
       minWidth: "100%",
-      Textarea: { width: "100%" },
+      Textarea: {
+        width: "100%",
+        maxWidth: "100%"
+      },
       Hint: { color: "gray .92 +68" }
     },
-    Title: { props: { fontSize: "Y2" } },
+    Title: {},
     Field: {
-      props: { minWidth: "100%" },
-      Input: { fontSize: "Y2" }
+      props: { minWidth: "100%" }
     }
   }
 };
@@ -10717,16 +10873,17 @@ var ResetPassword = {
   extend: Modal,
   props: {
     minWidth: "H+B",
-    gap: "B"
+    gap: "B1",
+    Content: {}
   },
   Header: {
-    props: { gap: "A" },
+    props: { gap: "Z2" },
     Title: { h5: { text: "Choose new password" } },
-    Paragraph: { p: { text: "Almost done. Enter your new password and you\u2019re all set" } }
+    Paragraph: { p: { text: "Almost done. Enter your new password and you're all set" } }
   },
   Content: {
     extend: CommonForm,
-    props: { gap: "B1" },
+    props: { flow: "column" },
     ...[{
       Title: { text: "Old password" },
       Field: {},
@@ -10766,12 +10923,12 @@ var ContactForm = {
   props: {
     minWidth: "H+B",
     maxWidth: "H+B",
-    padding: "B A"
+    gap: "B2",
+    padding: "A2 A2"
   },
   Header: {
     props: {
-      gap: "Y2",
-      padding: "- - B1 W"
+      gap: "Y2"
     },
     Title: {
       h5: {
@@ -10816,17 +10973,17 @@ var ContactForm = {
           props: { gridColumn: "1 / span 2" },
           Title: { text: "Message" },
           Field: null,
-          Textarea,
+          Textarea: {},
           Hint: null
         }
       ]
     },
     ParagraphButtonWithCheckbox: {
-      padding: "A1 Z A1 Y",
+      padding: "A1 Z - W",
       Checkbox: {},
       ParagraphButton: {
         P: { text: "You agree to" },
-        Button: { text: "privacy policy" }
+        Button: { text: "Privacy Policy" }
       }
     }
   },
@@ -10848,7 +11005,7 @@ var SignUp = {
   props: {
     minWidth: "H+B",
     maxWidth: "H+B",
-    padding: "B A"
+    padding: "A2 A2"
   },
   Header: {
     props: { gap: "Y1" },
@@ -10911,11 +11068,11 @@ var SignUp = {
       ]
     },
     ParagraphButtonWithCheckbox: {
-      padding: "A1 Z A1 Y",
+      padding: "A1 Z - W",
       Checkbox: {},
       ParagraphButton: {
         P: { text: "You agree to" },
-        Button: { text: "privacy policy" }
+        Button: { text: "Privacy Policy" }
       }
     }
   },
@@ -10980,7 +11137,7 @@ var LogIn = {
           Title: { text: "Password" },
           Field: {
             Input: { placeholder: "Enter your password" },
-            Button: { icon: { name: "eye" } }
+            Button: { Icon: { name: "eye" } }
           }
         }
       ]
@@ -11022,7 +11179,7 @@ var LogIn = {
       {},
       {
         props: {
-          icon: { name: "facebook" },
+          Icon: { name: "facebook" },
           text: "Continue with Facebook"
         }
       }
@@ -11092,12 +11249,12 @@ var UploadButton = {
   extend: CommonButton,
   props: {
     position: "relative",
+    theme: "transparent",
     padding: "0",
     color: "#0474F2",
     boxSize: "fit-content fit-content",
     overflow: "hidden",
     fontWeight: "500",
-    background: "transparent",
     cursor: "pointer",
     Caption: { text: "Choose file" }
   },
@@ -11117,10 +11274,10 @@ var UploadButtonWithIcon = {
   extend: UploadButton,
   props: {
     gap: "Z",
-    color: "white",
-    background: "#0474F2",
+    theme: "primary",
     padding: "A B",
-    round: "A"
+    round: "A",
+    color: "white"
   },
   Icon: {
     props: {
@@ -11218,7 +11375,7 @@ var UploadModal = {
   Footer: {
     UploadButtonWithIcon: {
       flex: 1,
-      icon: { display: "none" },
+      Icon: { display: "none" },
       Caption: { text: "Choose file" }
     }
   }
@@ -11238,7 +11395,7 @@ var UploadModal2 = {
       padding: "- X"
     },
     IconText: {
-      icon: { name: "info" },
+      Icon: { name: "info" },
       text: "Support",
       gap: "Z"
     },
@@ -11490,7 +11647,7 @@ var User = {
     extend: TitleParagraph,
     props: {
       gap: "Y2",
-      margin: "X - - -"
+      margin: "W - - -"
     },
     Title: {
       h5: {
@@ -11553,9 +11710,8 @@ var ChatUser = {
           fontSize: "Z"
         }
       },
-      notification: {
-        extend: CountIndicator,
-        props: { fontSize: "Y2" }
+      CountIndicator: {
+        fontSize: "Y2"
       }
     }
   }
@@ -11568,7 +11724,7 @@ var UserButtonSet = {
     gap: "E2",
     background: "gray",
     boxSize: "fit-content",
-    padding: "A1",
+    padding: "A",
     round: "Z2"
   },
   User: {
@@ -11592,9 +11748,9 @@ var UserButtonSet = {
     extend: ButtonSet,
     props: { gap: "Y2" },
     ...[
-      { props: { icon: { name: "phone" } } },
-      { props: { icon: { name: "video" } } },
-      { props: { icon: { name: "moreHorizontal" } } }
+      { props: { Icon: { name: "phone" } } },
+      { props: { Icon: { name: "video" } } },
+      { props: { Icon: { name: "moreHorizontal" } } }
     ]
   }
 };
@@ -11663,8 +11819,7 @@ var UserWithButton = {
     boxSize: "fit-content",
     padding: "X X2",
     round: "Z",
-    border: "solid, gray3",
-    borderWidth: "1px",
+    border: "1px, solid, gray3",
     gap: "Y2"
   },
   Avatar: {
@@ -11692,11 +11847,21 @@ var UserWithButton = {
     }
   },
   IconCommonButton: {
-    round: "0",
+    round: "Y1",
     background: "transparent",
-    icon: {
+    theme: null,
+    color: "currentColor",
+    opacity: "0.5",
+    transition: "A defaultBezier",
+    transitionProperty: "opacity, background",
+    ":hover": {
+      opacity: "1",
+      theme: "secondary"
+    },
+    margin: "- - - Z2",
+    Icon: {
       name: "copy",
-      fontSize: "D1"
+      fontSize: "C"
     }
   }
 };
@@ -11709,7 +11874,7 @@ var BalanceCard = {
   extend: TitleParagraphWithButton,
   props: {
     boxSize: "fit-content",
-    padding: "A",
+    padding: "Z2 A",
     round: "Z",
     gap: "Z1",
     background: "linear-gradient(to right, #0474F2, #003067)"
@@ -11717,7 +11882,7 @@ var BalanceCard = {
   Title: {
     props: { gap: "E1" },
     h5: { props: { text: "Total crypto assets" } },
-    Button: { props: { icon: { name: "arrowUpRight" } } }
+    Button: { props: { Icon: { name: "arrowUpRight" } } }
   },
   Paragraph: {
     props: {
@@ -11780,7 +11945,7 @@ var ConvertCard = {
     boxSize: "fit-content",
     gap: "A",
     background: "gray",
-    padding: "Z A",
+    padding: "Z2 A",
     round: "Z"
   },
   Title: {
@@ -11820,8 +11985,8 @@ var CurrencyConvert = {
   props: {
     boxSize: "fit-content",
     minWidth: "fit-content",
-    gap: "Z2",
-    padding: "A1"
+    gap: "A",
+    padding: "A"
   },
   Header: {
     Title: {
@@ -11837,18 +12002,22 @@ var CurrencyConvert = {
   },
   Content: {
     props: {
+      margin: "- -X2",
       flow: "column",
       gap: "Z"
     },
     childExtend: {
       extend: ConvertCard,
       props: {
-        background: "black"
+        theme: "dialog @dark .helper"
       }
     },
     ...[{}, {}]
   },
   Footer: {
+    props: {
+      margin: "- -X2 -X2"
+    },
     CommonButton: {
       flex: "1",
       padding: "Z1 -",