@symbo.ls/create 2.11.230 → 2.11.236

package/dist/cjs/bundle/index.js

@@ -473,7 +473,7 @@ var require_object = __commonJS({
       deepContains: () => deepContains,
       deepDestringify: () => deepDestringify,
       deepDiff: () => deepDiff2,
-      deepMerge: () => deepMerge4,
+      deepMerge: () => deepMerge5,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
       diff: () => diff,
@@ -530,7 +530,7 @@ var require_object = __commonJS({
       }
       return element;
     };
-    var deepMerge4 = (element, extend, excludeFrom = []) => {
+    var deepMerge5 = (element, extend, excludeFrom = []) => {
       for (const e in extend) {
         const hasOwnProperty2 = Object.prototype.hasOwnProperty.call(extend, e);
         if (!hasOwnProperty2 || excludeFrom.includes(e) || e.startsWith("__"))
@@ -538,7 +538,7 @@ var require_object = __commonJS({
         const elementProp = element[e];
         const extendProp = extend[e];
         if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
-          deepMerge4(elementProp, extendProp, excludeFrom);
+          deepMerge5(elementProp, extendProp, excludeFrom);
         } else if (elementProp === void 0) {
           element[e] = extendProp;
         }
@@ -578,7 +578,7 @@ var require_object = __commonJS({
       return o;
     };
     var mergeArrayExclude = (arr, excl = []) => {
-      return arr.reduce((acc, curr) => deepMerge4(acc, deepCloneExclude(curr, excl)), {});
+      return arr.reduce((acc, curr) => deepMerge5(acc, deepCloneExclude(curr, excl)), {});
     };
     var deepClone4 = (obj, excludeFrom = [], cleanUndefined = false) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
@@ -630,7 +630,7 @@ var require_object = __commonJS({
       const spaces = "  ".repeat(indent);
       let str = "{\n";
       for (const [key, value2] of Object.entries(obj)) {
-        const keyNotAllowdChars = (0, import_string.stringIncludesAny)(key, ["-", ":", "@", ".", "/", "!"]);
+        const keyNotAllowdChars = (0, import_string.stringIncludesAny)(key, ["&", "*", "-", ":", "@", ".", "/", "!"]);
         const stringedKey = keyNotAllowdChars ? `'${key}'` : key;
         str += `${spaces}  ${stringedKey}: `;
         if ((0, import_types.isArray)(value2)) {
@@ -856,7 +856,7 @@ var require_object = __commonJS({
     };
     var mergeIfExisted = (a, b) => {
       if ((0, import_types.isObjectLike)(a) && (0, import_types.isObjectLike)(b))
-        return deepMerge4(a, b);
+        return deepMerge5(a, b);
       return a || b;
     };
     var flattenRecursive = (param, prop, stack = []) => {
@@ -2229,7 +2229,7 @@ var require_text = __commonJS({
       default: () => text_default
     });
     module2.exports = __toCommonJS2(text_exports);
-    var import__2 = require_cjs8();
+    var import__ = require_cjs8();
     var import_utils24 = require_cjs();
     var text_default = (param, element, node2) => {
       let prop = (0, import_utils24.exec)(param, element);
@@ -2246,7 +2246,7 @@ var require_text = __commonJS({
           if (element.__text.node)
             element.__text.node.nodeValue = prop;
         } else
-          (0, import__2.create)({ tag: "string", text: prop }, element, "__text");
+          (0, import__.create)({ tag: "string", text: prop }, element, "__text");
       }
     };
   }
@@ -2991,17 +2991,17 @@ var require_registry = __commonJS({
       parseFilters: () => parseFilters
     });
     module2.exports = __toCommonJS2(registry_exports);
-    var import__2 = require_mixins();
+    var import__ = require_mixins();
     var registry_default = {
-      attr: import__2.attr,
-      style: import__2.style,
-      text: import__2.text,
-      html: import__2.html,
-      content: import__2.content,
-      data: import__2.data,
-      class: import__2.classList,
-      state: import__2.state,
-      scope: import__2.scope,
+      attr: import__.attr,
+      style: import__.style,
+      text: import__.text,
+      html: import__.html,
+      content: import__.content,
+      data: import__.data,
+      class: import__.classList,
+      state: import__.state,
+      scope: import__.scope,
       deps: (param, el) => param || el.parent.deps,
       extend: {},
       childExtend: {},
@@ -3597,7 +3597,7 @@ var require_object2 = __commonJS({
       METHODS_EXL: () => METHODS_EXL,
       clone: () => clone,
       deepClone: () => deepClone4,
-      deepMerge: () => deepMerge4,
+      deepMerge: () => deepMerge5,
       flattenRecursive: () => flattenRecursive,
       mergeAndCloneIfArray: () => mergeAndCloneIfArray,
       mergeArray: () => mergeArray,
@@ -3617,7 +3617,7 @@ var require_object2 = __commonJS({
       import_state2.IGNORE_STATE_PARAMS,
       import_props.IGNORE_PROPS_PARAMS
     );
-    var deepMerge4 = (element, extend, exclude = METHODS_EXL) => {
+    var deepMerge5 = (element, extend, exclude = METHODS_EXL) => {
       for (const e in extend) {
         if (exclude.includes(e))
           continue;
@@ -3626,7 +3626,7 @@ var require_object2 = __commonJS({
         if (elementProp === void 0) {
           element[e] = extendProp;
         } else if ((0, import_utils24.isObjectLike)(elementProp) && (0, import_utils24.isObject)(extendProp)) {
-          deepMerge4(elementProp, extendProp);
+          deepMerge5(elementProp, extendProp);
         }
       }
       return element;
@@ -3698,11 +3698,11 @@ var require_object2 = __commonJS({
     };
     var mergeIfExisted = (a, b) => {
       if ((0, import_utils24.isObjectLike)(a) && (0, import_utils24.isObjectLike)(b))
-        return deepMerge4(a, b);
+        return deepMerge5(a, b);
       return a || b;
     };
     var mergeArray = (arr, exclude = ["parent", "node", "__element", "state", "context", "__ref"]) => {
-      return arr.reduce((a, c) => deepMerge4(a, deepClone4(c, exclude)), {});
+      return arr.reduce((a, c) => deepMerge5(a, deepClone4(c, exclude)), {});
     };
     var mergeAndCloneIfArray = (obj) => {
       return (0, import_utils24.isArray)(obj) ? mergeArray(obj) : deepClone4(obj);
@@ -3849,8 +3849,10 @@ var require_extendUtils = __commonJS({
     var fallbackStringExtend = (extend, context, options = {}) => {
       const COMPONENTS = context && context.components || options.components;
       if ((0, import_utils24.isString)(extend)) {
-        if (COMPONENTS && COMPONENTS[extend]) {
-          return COMPONENTS[extend];
+        const componentExists = COMPONENTS[extend] || COMPONENTS["smbls." + extend];
+        console.log(extend, componentExists);
+        if (COMPONENTS && componentExists) {
+          return componentExists;
         } else {
           if (ENV2 !== "test" || ENV2 !== "development") {
             console.warn("Extend is string but component was not found:", extend);
@@ -4810,7 +4812,7 @@ var require_object3 = __commonJS({
       deepClone: () => deepClone4,
       deepCloneExclude: () => deepCloneExclude,
       deepDestringify: () => deepDestringify,
-      deepMerge: () => deepMerge4,
+      deepMerge: () => deepMerge5,
       deepStringify: () => deepStringify,
       detachFunctionsFromObject: () => detachFunctionsFromObject,
       diff: () => diff,
@@ -4863,7 +4865,7 @@ var require_object3 = __commonJS({
       }
       return element;
     };
-    var deepMerge4 = (element, extend, excludeFrom = []) => {
+    var deepMerge5 = (element, extend, excludeFrom = []) => {
       for (const e in extend) {
         const hasOwnProperty = Object.prototype.hasOwnProperty.call(extend, e);
         if (!hasOwnProperty || excludeFrom.includes(e) || e.startsWith("__"))
@@ -4871,7 +4873,7 @@ var require_object3 = __commonJS({
         const elementProp = element[e];
         const extendProp = extend[e];
         if ((0, import_types.isObjectLike)(elementProp) && (0, import_types.isObjectLike)(extendProp)) {
-          deepMerge4(elementProp, extendProp);
+          deepMerge5(elementProp, extendProp);
         } else if (elementProp === void 0) {
           element[e] = extendProp;
         }
@@ -4911,7 +4913,7 @@ var require_object3 = __commonJS({
       return o;
     };
     var mergeArrayExclude = (arr, excl = []) => {
-      return arr.reduce((acc, curr) => deepMerge4(acc, deepCloneExclude(curr, excl)), {});
+      return arr.reduce((acc, curr) => deepMerge5(acc, deepCloneExclude(curr, excl)), {});
     };
     var deepClone4 = (obj, excludeFrom = []) => {
       const o = (0, import_types.isArray)(obj) ? [] : {};
@@ -5156,7 +5158,7 @@ var require_object3 = __commonJS({
     };
     var mergeIfExisted = (a, b) => {
       if ((0, import_types.isObjectLike)(a) && (0, import_types.isObjectLike)(b))
-        return deepMerge4(a, b);
+        return deepMerge5(a, b);
       return a || b;
     };
     var flattenRecursive = (param, prop, stack = []) => {
@@ -6073,26 +6075,26 @@ var require_set2 = __commonJS({
     var import_utils24 = require_cjs();
     var import_set = __toESM2(require_set(), 1);
     var import_update = __toESM2(require_update2(), 1);
-    var import__2 = require_methods2();
+    var import__ = require_methods2();
     var import_content = require_content();
     var addMethods = (element, parent) => {
       const proto = {
         set: import_set.default.bind(element),
         update: import_update.default.bind(element),
-        remove: import__2.remove.bind(element),
+        remove: import__.remove.bind(element),
         updateContent: import_content.updateContent.bind(element),
         removeContent: import_content.removeContent.bind(element),
-        setProps: import__2.setProps.bind(element),
-        lookup: import__2.lookup.bind(element),
-        spotByPath: import__2.spotByPath.bind(element),
-        parse: import__2.parse.bind(element),
-        parseDeep: import__2.parseDeep.bind(element),
-        keys: import__2.keys.bind(element),
-        nextElement: import__2.nextElement.bind(element),
-        previousElement: import__2.previousElement.bind(element)
+        setProps: import__.setProps.bind(element),
+        lookup: import__.lookup.bind(element),
+        spotByPath: import__.spotByPath.bind(element),
+        parse: import__.parse.bind(element),
+        parseDeep: import__.parseDeep.bind(element),
+        keys: import__.keys.bind(element),
+        nextElement: import__.nextElement.bind(element),
+        previousElement: import__.previousElement.bind(element)
       };
       if ((0, import_utils24.isDevelopment)())
-        proto.log = import__2.log.bind(element);
+        proto.log = import__.log.bind(element);
       Object.setPrototypeOf(element, proto);
     };
   }
@@ -6535,11 +6537,11 @@ var require_cjs9 = __commonJS({
       return to;
     };
     var __toCommonJS2 = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
-    var domql_exports2 = {};
-    __export2(domql_exports2, {
+    var domql_exports = {};
+    __export2(domql_exports, {
       default: () => domql_default
     });
-    module2.exports = __toCommonJS2(domql_exports2);
+    module2.exports = __toCommonJS2(domql_exports);
     var import_element = require_cjs8();
     var create2 = (element, parent, key, options) => {
       return (0, import_element.create)(element, parent, key, options);
@@ -7203,7 +7205,7 @@ var require_cjs10 = __commonJS({
           const spaces = "  ".repeat(indent);
           let str = "{\n";
           for (const [key, value2] of Object.entries(obj)) {
-            const keyNotAllowdChars = (0, import_string.stringIncludesAny)(key, ["-", ":", "@", ".", "/", "!"]);
+            const keyNotAllowdChars = (0, import_string.stringIncludesAny)(key, ["&", "*", "-", ":", "@", ".", "/", "!"]);
             const stringedKey = keyNotAllowdChars ? `'${key}'` : key;
             str += `${spaces}  ${stringedKey}: `;
             if ((0, import_types.isArray)(value2)) {
@@ -8676,9 +8678,9 @@ var require_cjs10 = __commonJS({
       const ratioVar = `${prefix2}-ratio`;
       vars[ratioVar] = ratio;
       const [first, middle, second] = getSubratio(base, ratio);
-      vars[`${prefix2}-sub-ratio-1`] = first;
-      vars[`${prefix2}-sub-ratio-2`] = middle;
-      vars[`${prefix2}-sub-ratio-3`] = second;
+      vars[`${prefix2}-sub-ratio-1`] = `calc(var(${prefix2}-ratio) * ${first / ratio})`;
+      vars[`${prefix2}-sub-ratio-2`] = `calc(var(${prefix2}-ratio) * ${middle / ratio})`;
+      vars[`${prefix2}-sub-ratio-3`] = `calc(var(${prefix2}-ratio) * ${second / ratio})`;
     };
     var applySequenceVars = (FACTORY2, options = {}) => {
       const CONFIG22 = getActiveConfig3();
@@ -10175,237 +10177,237 @@ var require_cjs14 = __commonJS({
   }
 });
 
-// ../../uikit/icons/default-icons/src/logo.svg
+// ../icons/default/src/logo.svg
 var require_logo = __commonJS({
-  "../../uikit/icons/default-icons/src/logo.svg"() {
+  "../icons/default/src/logo.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-down-circle.svg
+// ../icons/default/src/arrow-down-circle.svg
 var require_arrow_down_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-down-circle.svg"() {
+  "../icons/default/src/arrow-down-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-down-left.svg
+// ../icons/default/src/arrow-down-left.svg
 var require_arrow_down_left = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-down-left.svg"() {
+  "../icons/default/src/arrow-down-left.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-down-right.svg
+// ../icons/default/src/arrow-down-right.svg
 var require_arrow_down_right = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-down-right.svg"() {
+  "../icons/default/src/arrow-down-right.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-down.svg
+// ../icons/default/src/arrow-down.svg
 var require_arrow_down = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-down.svg"() {
+  "../icons/default/src/arrow-down.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-left-circle.svg
+// ../icons/default/src/arrow-left-circle.svg
 var require_arrow_left_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-left-circle.svg"() {
+  "../icons/default/src/arrow-left-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-left.svg
+// ../icons/default/src/arrow-left.svg
 var require_arrow_left = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-left.svg"() {
+  "../icons/default/src/arrow-left.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-right.svg
+// ../icons/default/src/arrow-right.svg
 var require_arrow_right = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-right.svg"() {
+  "../icons/default/src/arrow-right.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-right-circle.svg
+// ../icons/default/src/arrow-right-circle.svg
 var require_arrow_right_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-right-circle.svg"() {
+  "../icons/default/src/arrow-right-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-up-circle.svg
+// ../icons/default/src/arrow-up-circle.svg
 var require_arrow_up_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-up-circle.svg"() {
+  "../icons/default/src/arrow-up-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-up-left.svg
+// ../icons/default/src/arrow-up-left.svg
 var require_arrow_up_left = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-up-left.svg"() {
+  "../icons/default/src/arrow-up-left.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-up-right.svg
+// ../icons/default/src/arrow-up-right.svg
 var require_arrow_up_right = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-up-right.svg"() {
+  "../icons/default/src/arrow-up-right.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/arrow-up.svg
+// ../icons/default/src/arrow-up.svg
 var require_arrow_up = __commonJS({
-  "../../uikit/icons/default-icons/src/arrow-up.svg"() {
+  "../icons/default/src/arrow-up.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/check-circle.svg
+// ../icons/default/src/check-circle.svg
 var require_check_circle = __commonJS({
-  "../../uikit/icons/default-icons/src/check-circle.svg"() {
+  "../icons/default/src/check-circle.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/check.svg
+// ../icons/default/src/check.svg
 var require_check = __commonJS({
-  "../../uikit/icons/default-icons/src/check.svg"() {
+  "../icons/default/src/check.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/chevron-down.svg
+// ../icons/default/src/chevron-down.svg
 var require_chevron_down = __commonJS({
-  "../../uikit/icons/default-icons/src/chevron-down.svg"() {
+  "../icons/default/src/chevron-down.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/chevron-left.svg
+// ../icons/default/src/chevron-left.svg
 var require_chevron_left = __commonJS({
-  "../../uikit/icons/default-icons/src/chevron-left.svg"() {
+  "../icons/default/src/chevron-left.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/chevron-right.svg
+// ../icons/default/src/chevron-right.svg
 var require_chevron_right = __commonJS({
-  "../../uikit/icons/default-icons/src/chevron-right.svg"() {
+  "../icons/default/src/chevron-right.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/chevron-up.svg
+// ../icons/default/src/chevron-up.svg
 var require_chevron_up = __commonJS({
-  "../../uikit/icons/default-icons/src/chevron-up.svg"() {
+  "../icons/default/src/chevron-up.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/copy.svg
+// ../icons/default/src/copy.svg
 var require_copy = __commonJS({
-  "../../uikit/icons/default-icons/src/copy.svg"() {
+  "../icons/default/src/copy.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/dribbble.svg
+// ../icons/default/src/dribbble.svg
 var require_dribbble = __commonJS({
-  "../../uikit/icons/default-icons/src/dribbble.svg"() {
+  "../icons/default/src/dribbble.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/eye-off.svg
+// ../icons/default/src/eye-off.svg
 var require_eye_off = __commonJS({
-  "../../uikit/icons/default-icons/src/eye-off.svg"() {
+  "../icons/default/src/eye-off.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/eye.svg
+// ../icons/default/src/eye.svg
 var require_eye = __commonJS({
-  "../../uikit/icons/default-icons/src/eye.svg"() {
+  "../icons/default/src/eye.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/file.svg
+// ../icons/default/src/file.svg
 var require_file = __commonJS({
-  "../../uikit/icons/default-icons/src/file.svg"() {
+  "../icons/default/src/file.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/info.svg
+// ../icons/default/src/info.svg
 var require_info = __commonJS({
-  "../../uikit/icons/default-icons/src/info.svg"() {
+  "../icons/default/src/info.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/minus.svg
+// ../icons/default/src/minus.svg
 var require_minus = __commonJS({
-  "../../uikit/icons/default-icons/src/minus.svg"() {
+  "../icons/default/src/minus.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/moon.svg
+// ../icons/default/src/moon.svg
 var require_moon = __commonJS({
-  "../../uikit/icons/default-icons/src/moon.svg"() {
+  "../icons/default/src/moon.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/more-horizontal.svg
+// ../icons/default/src/more-horizontal.svg
 var require_more_horizontal = __commonJS({
-  "../../uikit/icons/default-icons/src/more-horizontal.svg"() {
+  "../icons/default/src/more-horizontal.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/more-vertical.svg
+// ../icons/default/src/more-vertical.svg
 var require_more_vertical = __commonJS({
-  "../../uikit/icons/default-icons/src/more-vertical.svg"() {
+  "../icons/default/src/more-vertical.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/sun.svg
+// ../icons/default/src/sun.svg
 var require_sun = __commonJS({
-  "../../uikit/icons/default-icons/src/sun.svg"() {
+  "../icons/default/src/sun.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/send.svg
+// ../icons/default/src/send.svg
 var require_send = __commonJS({
-  "../../uikit/icons/default-icons/src/send.svg"() {
+  "../icons/default/src/send.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/smile.svg
+// ../icons/default/src/smile.svg
 var require_smile = __commonJS({
-  "../../uikit/icons/default-icons/src/smile.svg"() {
+  "../icons/default/src/smile.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/search.svg
+// ../icons/default/src/search.svg
 var require_search = __commonJS({
-  "../../uikit/icons/default-icons/src/search.svg"() {
+  "../icons/default/src/search.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/phone.svg
+// ../icons/default/src/phone.svg
 var require_phone = __commonJS({
-  "../../uikit/icons/default-icons/src/phone.svg"() {
+  "../icons/default/src/phone.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/twitch.svg
+// ../icons/default/src/twitch.svg
 var require_twitch = __commonJS({
-  "../../uikit/icons/default-icons/src/twitch.svg"() {
+  "../icons/default/src/twitch.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/upload.svg
+// ../icons/default/src/upload.svg
 var require_upload = __commonJS({
-  "../../uikit/icons/default-icons/src/upload.svg"() {
+  "../icons/default/src/upload.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/video.svg
+// ../icons/default/src/video.svg
 var require_video = __commonJS({
-  "../../uikit/icons/default-icons/src/video.svg"() {
+  "../icons/default/src/video.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/x.svg
+// ../icons/default/src/x.svg
 var require_x = __commonJS({
-  "../../uikit/icons/default-icons/src/x.svg"() {
+  "../icons/default/src/x.svg"() {
   }
 });
 
-// ../../uikit/icons/default-icons/src/plus.svg
+// ../icons/default/src/plus.svg
 var require_plus = __commonJS({
-  "../../uikit/icons/default-icons/src/plus.svg"() {
+  "../icons/default/src/plus.svg"() {
   }
 });
 
@@ -11929,9 +11931,9 @@ var updateReset = (config, RC_FILE, options = UPDATE_OPTIONS) => {
 __reExport(utilImports_exports, __toESM(require_cjs11(), 1));
 __reExport(utilImports_exports, __toESM(require_cjs12(), 1));
 
-// ../../uikit/domql/index.js
-var domql_exports = {};
-__export(domql_exports, {
+// ../uikit/index.js
+var uikit_exports = {};
+__export(uikit_exports, {
   Animation: () => Animation,
   Avatar: () => Avatar,
   AvatarBundle: () => AvatarBundle,
@@ -11945,6 +11947,7 @@ __export(domql_exports, {
   ButtonSet: () => ButtonSet,
   CancelConfirmButtons: () => CancelConfirmButtons,
   Caption: () => Caption,
+  Card: () => Card,
   CardLabel: () => CardLabel,
   ChatUser: () => ChatUser,
   CheckIndicator: () => CheckIndicator,
@@ -11958,8 +11961,6 @@ __export(domql_exports, {
   Clickable: () => Clickable,
   Collection: () => Collection,
   CommonButton: () => CommonButton,
-  CommonField: () => CommonField,
-  CommonFieldTemplate: () => CommonFieldTemplate,
   CommonForm: () => CommonForm,
   CompleteProcess: () => CompleteProcess,
   ContactForm: () => ContactForm,
@@ -11977,6 +11978,8 @@ __export(domql_exports, {
   DropdownParent: () => DropdownParent,
   Field: () => Field,
   FieldTemplate: () => FieldTemplate,
+  FieldWithTitle: () => FieldWithTitle,
+  FieldWithTitleTemplate: () => FieldWithTitleTemplate,
   FileIcon: () => FileIcon,
   Flex: () => Flex,
   Focusable: () => Focusable,
@@ -12024,7 +12027,6 @@ __export(domql_exports, {
   Modal: () => Modal,
   Notification: () => Notification,
   NotificationIndicator: () => NotificationIndicator,
-  NumberField: () => NumberField,
   NumberInput: () => NumberInput,
   Overflow: () => Overflow,
   P: () => P,
@@ -12073,16 +12075,18 @@ __export(domql_exports, {
   Tab: () => Tab,
   Table: () => Table,
   Text: () => Text,
+  TextAreaField: () => TextAreaField,
   Textarea: () => Textarea,
   TextareaWithButton: () => TextareaWithButton,
-  TextareaWithTitle: () => TextareaWithTitle,
   Theme: () => Theme,
   TimePicker: () => TimePicker,
   TimePickerItem: () => TimePickerItem,
   TimeSwitcher: () => TimeSwitcher,
   Timing: () => Timing,
+  Title: () => Title,
   TitleParagraph: () => TitleParagraph,
-  TitleParagraphWithButton: () => TitleParagraphWithButton,
+  TitleParagraphButton: () => TitleParagraphButton,
+  TitleParagraphRows: () => TitleParagraphRows,
   Toggle: () => Toggle,
   ToggleTitleParagraph: () => ToggleTitleParagraph,
   Tooltip: () => Tooltip,
@@ -12095,7 +12099,8 @@ __export(domql_exports, {
   UnitValueWithLabel: () => UnitValueWithLabel,
   UnitValueWithTitle: () => UnitValueWithTitle,
   UploadButton: () => UploadButton,
-  UploadButtonWithIcon: () => UploadButtonWithIcon,
+  UploadButtonWithBackground: () => UploadButtonWithBackground,
+  UploadFooter: () => UploadFooter,
   UploadIcon: () => UploadIcon,
   UploadImage: () => UploadImage,
   UploadLabel: () => UploadLabel,
@@ -12114,6 +12119,7 @@ __export(domql_exports, {
   UploadingProcess4: () => UploadingProcess4,
   User: () => User,
   UserButtonSet: () => UserButtonSet,
+  UserButtonSetCircle: () => UserButtonSetCircle,
   UserMessage: () => UserMessage,
   UserWithButton: () => UserWithButton,
   UserWithLabel: () => UserWithLabel,
@@ -12124,7 +12130,7 @@ __export(domql_exports, {
   keySetters: () => keySetters
 });
 
-// ../../uikit/domql/Atoms/Block.js
+// ../uikit/Atoms/Block.js
 var import_scratch3 = __toESM(require_cjs10());
 var Block = {
   deps: { getSpacingBasedOnRatio: import_scratch3.getSpacingBasedOnRatio, getSpacingByKey: import_scratch3.getSpacingByKey, transfromGap: import_scratch3.transfromGap },
@@ -12234,7 +12240,7 @@ var Block = {
     },
     flexFlow: ({ props: props4 }) => props4.flexFlow && {
       display: "flex",
-      flexFlow: props4.flexFlow
+      flexFlow: props4.flexFlow + (props4.reverse ? "-reverse" : "")
     },
     flexAlign: ({ props: props4 }) => {
       if (typeof props4.flexAlign !== "string")
@@ -12298,7 +12304,7 @@ var Gutter = {
   }
 };
 
-// ../../uikit/domql/Atoms/Direction.js
+// ../uikit/Atoms/Direction.js
 var Direction = {
   props: {
     direction: "ltr"
@@ -12308,13 +12314,13 @@ var Direction = {
   }
 };
 
-// ../../uikit/domql/Atoms/Flex.js
+// ../uikit/Atoms/Flex.js
 var Flex = {
   props: {
     display: "flex"
   },
   class: {
-    flow: ({ props: props4 }) => props4.flow && { flexFlow: props4.flow },
+    flow: ({ props: props4 }) => props4.flow && { flexFlow: props4.flow + (props4.reverse ? "-reverse" : "") },
     wrap: ({ props: props4 }) => props4.wrap && { flexWrap: props4.wrap },
     align: ({ props: props4 }) => {
       if (typeof props4.align !== "string")
@@ -12325,7 +12331,7 @@ var Flex = {
   }
 };
 
-// ../../uikit/domql/Atoms/Grid.js
+// ../uikit/Atoms/Grid.js
 var import_scratch4 = __toESM(require_cjs10());
 var Grid = {
   deps: { getSpacingBasedOnRatio: import_scratch4.getSpacingBasedOnRatio },
@@ -12350,7 +12356,7 @@ var Grid = {
   }
 };
 
-// ../../uikit/domql/Atoms/Img.js
+// ../uikit/Atoms/Img.js
 var Img = {
   tag: "img",
   attr: {
@@ -12360,7 +12366,7 @@ var Img = {
   }
 };
 
-// ../../uikit/domql/Atoms/Form.js
+// ../uikit/Atoms/Form.js
 var Form = {
   tag: "form",
   attr: {
@@ -12370,16 +12376,16 @@ var Form = {
   }
 };
 
-// ../../uikit/domql/Atoms/Media.js
+// ../uikit/Atoms/Media.js
 var import_utils6 = __toESM(require_cjs());
 
-// ../../uikit/domql/Atoms/Theme.js
+// ../uikit/Atoms/Theme.js
 var import_scratch7 = __toESM(require_cjs10());
 
-// ../../uikit/domql/Atoms/Shape/style.js
+// ../uikit/Atoms/Shape/style.js
 var import_scratch6 = __toESM(require_cjs10());
 
-// ../../uikit/domql/Atoms/Timing.js
+// ../uikit/Atoms/Timing.js
 var import_scratch5 = __toESM(require_cjs10());
 var Timing = {
   deps: {
@@ -12410,7 +12416,7 @@ var Timing = {
   }
 };
 
-// ../../uikit/domql/Atoms/Shape/style.js
+// ../uikit/Atoms/Shape/style.js
 var CONFIG2 = (0, import_scratch6.getActiveConfig)();
 var depth = {
   4: { boxShadow: `rgba(0,0,0,.10) 0 2${CONFIG2.UNIT.default} 4${CONFIG2.UNIT.default}` },
@@ -12600,7 +12606,7 @@ var SHAPES = {
   }
 };
 
-// ../../uikit/domql/Atoms/Theme.js
+// ../uikit/Atoms/Theme.js
 var import_utils5 = __toESM(require_cjs());
 var getSystemTheme = ({ context, state }) => {
   const rootState = state && state.__root;
@@ -12736,7 +12742,7 @@ var Theme = {
   }
 };
 
-// ../../uikit/domql/Atoms/Media.js
+// ../uikit/Atoms/Media.js
 var keySetters = {
   "@": (key, props4, result, element, isSubtree) => applyMediaProps(
     key,
@@ -12932,7 +12938,7 @@ var Media = {
   on: { beforeClassAssign }
 };
 
-// ../../uikit/domql/Atoms/Iframe.js
+// ../uikit/Atoms/Iframe.js
 var Iframe = {
   tag: "iframe",
   props: {
@@ -12950,7 +12956,7 @@ var Iframe = {
   }
 };
 
-// ../../uikit/domql/Atoms/Interaction.js
+// ../uikit/Atoms/Interaction.js
 var Interaction = {
   class: {
     userSelect: ({ props: props4 }) => props4.userSelect && { userSelect: props4.userSelect },
@@ -12959,7 +12965,7 @@ var Interaction = {
   }
 };
 
-// ../../uikit/domql/Atoms/InteractiveComponent.js
+// ../uikit/Atoms/InteractiveComponent.js
 var style = {
   appearance: "none",
   border: "none",
@@ -13030,14 +13036,14 @@ var FocusableComponent = {
   }
 };
 
-// ../../uikit/domql/Atoms/Overflow.js
+// ../uikit/Atoms/Overflow.js
 var Overflow = {
   class: {
     overflow: ({ props: props4 }) => props4.overflow && { overflow: props4.overflow }
   }
 };
 
-// ../../uikit/domql/Atoms/Collection.js
+// ../uikit/Atoms/Collection.js
 var import_state = __toESM(require_cjs5());
 var import_utils7 = __toESM(require_cjs());
 var Collection = {
@@ -13143,7 +13149,7 @@ var Collection = {
   }
 };
 
-// ../../uikit/domql/Atoms/Position.js
+// ../uikit/Atoms/Position.js
 var import_scratch8 = __toESM(require_cjs10());
 var Position = {
   deps: { getSpacingByKey: import_scratch8.getSpacingByKey },
@@ -13162,7 +13168,7 @@ var Position = {
   }
 };
 
-// ../../uikit/domql/Atoms/Picture.js
+// ../uikit/Atoms/Picture.js
 var Picture = {
   deps: { getSystemTheme },
   tag: "picture",
@@ -13190,14 +13196,14 @@ var Picture = {
   })
 };
 
-// ../../uikit/domql/Atoms/Pseudo.js
+// ../uikit/Atoms/Pseudo.js
 var Pseudo = {
   class: {
     content: ({ props: props4 }) => props4.content && { content: props4.content }
   }
 };
 
-// ../../uikit/domql/Atoms/Svg.js
+// ../uikit/Atoms/Svg.js
 var Svg = {
   tag: "svg",
   deps: { init },
@@ -13235,7 +13241,7 @@ var Svg = {
   }
 };
 
-// ../../uikit/domql/Atoms/Shape/index.js
+// ../uikit/Atoms/Shape/index.js
 var import_utils8 = __toESM(require_cjs());
 var import_scratch9 = __toESM(require_cjs10());
 var transformBorderRadius = (radius, props4, propertyName) => {
@@ -13272,7 +13278,7 @@ var Shape = {
   }
 };
 
-// ../../uikit/domql/Atoms/Text.js
+// ../uikit/Atoms/Text.js
 var import_scratch10 = __toESM(require_cjs10());
 var Text = {
   deps: { getFontSizeByKey: import_scratch10.getFontSizeByKey, getFontFamily: import_scratch10.getFontFamily },
@@ -13316,6 +13322,7 @@ var Strong = {
 };
 var Underline = { tag: "u" };
 var Italic = { tag: "i" };
+var Title = {};
 var Headline = {
   tag: "h6",
   props: { fontSize: "B", fontWeight: 500 }
@@ -13329,7 +13336,7 @@ var Footnote = {
   props: { fontSize: "Z" }
 };
 
-// ../../uikit/domql/Atoms/Transform.js
+// ../uikit/Atoms/Transform.js
 var Transform = {
   class: {
     transform: ({ props: props4 }) => props4.transform && { transform: props4.transform },
@@ -13337,14 +13344,14 @@ var Transform = {
   }
 };
 
-// ../../uikit/domql/Atoms/XYZ.js
+// ../uikit/Atoms/XYZ.js
 var XYZ = {
   class: {
     zIndex: ({ props: props4 }) => props4.zIndex && { zIndex: props4.zIndex }
   }
 };
 
-// ../../uikit/domql/Atoms/Animation.js
+// ../uikit/Atoms/Animation.js
 var import_scratch11 = __toESM(require_cjs10());
 var import_utils9 = __toESM(require_cjs());
 var applyAnimationProps = (animation, element) => {
@@ -13395,7 +13402,7 @@ var Animation = {
   }
 };
 
-// ../../uikit/domql/Box/index.js
+// ../uikit/Box/index.js
 var import_utils10 = __toESM(require_cjs());
 var PropsCSS = {
   class: {
@@ -13438,7 +13445,7 @@ var Circle = {
   }
 };
 
-// ../../uikit/domql/Icon/index.js
+// ../uikit/Icon/index.js
 var import_utils11 = __toESM(require_cjs());
 var Icon = {
   extend: Svg,
@@ -13518,59 +13525,59 @@ var FileIcon = {
   }
 };
 
-// ../../uikit/domql/Indicator/StatusIndicator.js
+// ../uikit/Indicator/StatusIndicator.js
 var StatusIndicator = {
   props: {
-    boxSize: "Z",
+    boxSize: "Z+V",
     background: "green2",
     round: "100%",
-    border: "solid, black 0",
-    borderWidth: "1px"
+    border: "solid, gray",
+    borderWidth: "2px"
   }
 };
 
-// ../../uikit/domql/Indicator/CheckIndicator.js
+// ../uikit/Indicator/CheckIndicator.js
 var CheckIndicator = {
   extend: Flex,
   props: {
-    align: "center center",
-    padding: "X",
+    padding: "Y1",
     boxSize: "fit-content fit-content",
     round: "100%",
-    theme: "primary",
-    aspectRatio: "1 / 1",
-    fontSize: "X"
+    theme: "primary"
   },
   Icon: {
     extend: Icon,
-    props: { name: "check" }
+    props: {
+      name: "check",
+      fontSize: "B1"
+    }
   }
 };
 var CheckIndicatorWithLabel = {
   extend: Flex,
   props: {
     align: "center flex-start",
-    gap: "Z1"
-  },
-  CheckIndicator: {
-    fontSize: "D2",
-    padding: "W"
+    gap: "Z"
   },
+  CheckIndicator: {},
   Caption: {
-    text: "Label",
-    fontSize: "B"
+    text: "Step",
+    fontWeight: "400",
+    fontSize: "Z2"
   }
 };
 
-// ../../uikit/domql/Indicator/CountIndicator.js
+// ../uikit/Indicator/CountIndicator.js
 var CountIndicator = {
   extend: Flex,
   props: {
     text: "2",
     theme: "primary",
-    boxSize: "fit-content",
+    boxSize: "A1",
+    minWidth: "fit-content",
+    boxSizing: "content-box",
     lineHeight: "1em",
-    padding: "X1",
+    padding: "X",
     round: "100%",
     align: "center center",
     aspectRatio: "1 / 1",
@@ -13578,16 +13585,16 @@ var CountIndicator = {
   }
 };
 
-// ../../uikit/domql/Indicator/RadioIndicator.js
+// ../uikit/Indicator/RadioIndicator.js
 var RadioIndicator = {
   props: {
-    padding: "Z",
-    theme: "primary",
+    padding: "Z+V",
+    theme: "tertiary",
     boxSize: "fit-content",
     round: "100%",
     ":after": {
       content: '""',
-      boxSize: "Z1",
+      boxSize: "Z",
       background: "white",
       display: "block",
       round: "100%"
@@ -13598,16 +13605,17 @@ var RadioIndicatorWithLabel = {
   extend: Flex,
   props: {
     align: "center flex-start",
-    gap: "Z1"
+    gap: "Z"
   },
   RadioIndicator: {},
   Caption: {
-    text: "Label",
-    fontSize: "B"
+    text: "Step",
+    fontWeight: "500",
+    fontSize: "Z2"
   }
 };
 
-// ../../uikit/domql/Indicator/SuccessIndicator.js
+// ../uikit/Indicator/SuccessIndicator.js
 var SuccessIndicator = {
   extend: CheckIndicator,
   props: {
@@ -13617,42 +13625,57 @@ var SuccessIndicator = {
   }
 };
 
-// ../../uikit/domql/TitleParagraph/index.js
+// ../uikit/TitleParagraph/index.js
 var TitleParagraph = {
   extend: Flex,
-  props: {
-    flow: "column",
-    gap: "Y"
-  },
+  props: { flow: "column", gap: "Y" },
   Title: {
     extend: Flex,
-    props: { align: "center space-between" },
-    h5: {
-      props: {
-        fontSize: "A",
-        text: "Title",
-        lineHeight: "1em"
-      }
+    props: {
+      lineHeight: "1em",
+      fontWeight: "700",
+      alignItems: "center"
     }
   },
   Paragraph: {
     extend: Flex,
-    p: {
-      props: {
-        text: "Paragraph",
-        fontSize: "Z",
-        lineHeight: "1em",
-        margin: "0",
-        color: "gray2"
-      }
-    }
+    props: {
+      margin: "0",
+      fontWeight: "400",
+      color: "gray4",
+      "> p": { margin: "0" }
+    }
+  }
+  // Title: {
+  //   extend: Flex,
+  //   props: ({ scope, parent }) => ({
+  //     text: parent.props.title,
+  //     lineHeight: '1em'
+  //   })
+  // },
+  // Paragraph: {
+  //   extend: Flex,
+  //   props: ({ scope, parent }) => ({
+  //     text: parent.props.paragraph,
+  //     margin: '0'
+  //   })
+  // }
+};
+var TitleParagraphRows = {
+  extend: TitleParagraph,
+  Title: {
+    extend: Flex,
+    props: { align: "center space-between" }
+  },
+  Paragraph: {
+    extend: Flex
   }
 };
-var TitleParagraphWithButton = {
-  extend: TitleParagraph,
+var TitleParagraphButton = {
+  extend: TitleParagraphRows,
   Title: {
     props: { justifyContent: "space-between" },
-    h5: {},
+    Span: {},
     Button: {
       props: {
         background: "transparent",
@@ -13668,14 +13691,14 @@ var TitleParagraphWithButton = {
   Paragraph: {}
 };
 
-// ../../uikit/domql/UnitValue/index.js
+// ../uikit/UnitValue/index.js
 var UnitValue = {
   extend: Flex,
   props: {
-    color: "#818186",
+    color: "gray2",
     align: "center flex-start",
     gap: "V",
-    fontSize: "Z",
+    fontWeight: "400",
     "> *": { lineHeight: "1em" }
   },
   Value: { props: { text: "72" } },
@@ -13721,8 +13744,8 @@ var UnitValueWithLabel = {
     props: {
       background: "purple",
       padding: "Z",
-      round: "Y",
-      fontSize: "Z",
+      round: "Y1",
+      fontSize: "Y2",
       gap: "0",
       color: "white"
     },
@@ -13734,26 +13757,26 @@ var UnitValueWithTitle = {
   extend: Flex,
   props: {
     align: "center flex-start",
-    gap: "Y"
+    gap: "Y",
+    fontSize: "Z1"
   },
   Title: {
     tag: "caption",
     props: {
-      text: "balance:",
-      fontSize: "Z1",
-      textTransform: "capitalize",
-      color: "gray4"
+      text: "balance :",
+      textTransform: "capitalize"
     }
   },
   UnitValue: {
     textTransform: "uppercase",
     gap: "Y",
+    color: "currentColor",
     Value: { text: "0" },
     Unit: { text: "bnb" }
   }
 };
 
-// ../../uikit/domql/Link/index.js
+// ../uikit/Link/index.js
 var import_router = __toESM(require_cjs12());
 var Link = {
   extend: Focusable,
@@ -13800,7 +13823,7 @@ var RouteLink = {
   extend: [Link, RouterLink]
 };
 
-// ../../uikit/domql/Video/index.js
+// ../uikit/Video/index.js
 var Video = {
   tag: "video",
   childExtend: {
@@ -13824,7 +13847,7 @@ var Video = {
   }
 };
 
-// ../../uikit/domql/DoubleHr/index.js
+// ../uikit/DoubleHr/index.js
 var DoubleHr = {
   extend: Flex,
   props: {
@@ -13848,7 +13871,7 @@ var DoubleHr = {
   }
 };
 
-// ../../uikit/domql/Input/Input.js
+// ../uikit/Input/Input.js
 var import_utils12 = __toESM(require_cjs());
 var Input = {
   tag: "input",
@@ -13885,10 +13908,25 @@ var Input = {
   }
 };
 
-// ../../uikit/domql/Input/Number.js
+// ../uikit/Input/NumberInput.js
 var NumberInput = {
-  extend: Input,
-  props: { type: "number" },
+  extend: [Input, Flex],
+  props: {
+    type: "number",
+    fontSize: "E",
+    boxSize: "C+X",
+    align: "center center",
+    textAlign: "center",
+    round: "Y1",
+    theme: "transparent",
+    border: "solid, gray3",
+    borderWidth: "1px",
+    placeholder: "0",
+    fontWeight: "400",
+    "::-webkit-inner-spin-button": {
+      appearance: "none"
+    }
+  },
   attr: {
     step: ({ props: props4 }) => props4.step,
     min: ({ props: props4 }) => props4.min,
@@ -13896,7 +13934,7 @@ var NumberInput = {
   }
 };
 
-// ../../uikit/domql/Input/Checkbox.js
+// ../uikit/Input/Checkbox.js
 var Checkbox = {
   extend: Focusable,
   tag: "label",
@@ -13945,13 +13983,13 @@ var CheckboxTitleParagraph = {
     gap: "A"
   },
   Checkbox: { tag: "div" },
-  TitleParagraph: {
+  TitleParagraphRows: {
     gap: "Z1",
     margin: "Y - - -"
   }
 };
 
-// ../../uikit/domql/Input/Radio.js
+// ../uikit/Input/Radio.js
 var Radio = {
   extend: Checkbox,
   Input: {
@@ -13982,7 +14020,7 @@ var RadioTitleParagraph = {
   Radio: {}
 };
 
-// ../../uikit/domql/Input/Toggle.js
+// ../uikit/Input/Toggle.js
 var Toggle = {
   extend: Checkbox,
   Input: {
@@ -13997,7 +14035,7 @@ var Toggle = {
       padding: "- W",
       round: "D",
       align: "center flex-start",
-      background: "gray .8 +68",
+      background: "gray",
       border: "none",
       transition: "opacity .15s ease",
       ":after": {
@@ -14017,18 +14055,21 @@ var ToggleTitleParagraph = {
   Toggle: {}
 };
 
-// ../../uikit/domql/Input/Textarea.js
+// ../uikit/Input/Textarea.js
 var Textarea = {
   tag: "textarea",
   extend: [Input, Flex],
   props: {
     variant: "outlined",
-    round: "Z2",
-    width: "H",
+    fontfamily: "Avenir",
+    round: "Z1",
+    maxWidth: "H",
     minHeight: "E",
     placeholder: "Leave us a message...",
     padding: "A",
+    theme: "transparent",
     color: "white",
+    border: "none",
     style: { resize: "none" }
   },
   ".simple": {
@@ -14042,10 +14083,7 @@ var Textarea = {
   },
   ".outlined": {
     props: {
-      border: "1px solid #3F3F43",
       background: "transparent",
-      round: "Y+W",
-      //
       width: "G1",
       height: "D2+W",
       lineHeight: 1.4,
@@ -14056,24 +14094,6 @@ var Textarea = {
     }
   }
 };
-var TextareaWithTitle = {
-  extend: Flex,
-  props: {
-    flow: "column",
-    boxSize: "fit-content fit-content",
-    gap: "Y+W"
-  },
-  Title: {
-    props: {
-      text: "Label",
-      fontSize: "Z",
-      lineHeight: "1em",
-      padding: "- - - Z",
-      color: "gray4"
-    }
-  },
-  Textarea: {}
-};
 var TextareaWithButton = {
   extend: Flex,
   props: { gap: "Y2" },
@@ -14094,7 +14114,7 @@ var TextareaWithButton = {
   }
 };
 
-// ../../uikit/domql/Select/index.js
+// ../uikit/Select/index.js
 var Select = {
   extend: Focusable,
   tag: "select",
@@ -14124,41 +14144,49 @@ var Select = {
   }
 };
 
-// ../../uikit/domql/Field/Field.js
+// ../uikit/Field/Field.js
 var Field = {
   tag: "label",
   extend: [Focusable, IconText],
   props: {
-    minWidth: "G",
-    maxWidth: "G",
-    minHeight: "C+X",
+    minWidth: "F2+Z2",
+    maxWidth: "F2+Z2",
+    minHeight: "C+V",
     align: "center flex-start",
-    gap: "Y+W",
+    gap: "Y",
     boxSizing: "border-box",
-    padding: "- Z+W",
-    round: "Y+W",
-    border: "1px solid #3F3F43",
+    padding: "- A - Z2",
+    round: "Z1",
+    border: "solid, gray .45 +80",
+    borderWidth: ".8px",
     position: "relative",
     ":focus-within": { outline: "1px solid #0474F2" },
+    Icon: {
+      color: "gray2",
+      fontSize: "Z2"
+    },
     Button: {
       padding: "0",
       background: "transparent",
-      color: "white",
-      margin: "- - - auto"
+      color: "gray2",
+      margin: "- - - auto",
+      fontSize: "Z2"
     }
   },
   Input: {
     props: {
+      fontSize: "Z",
+      fontWeight: "400",
       padding: "0",
       background: "rgba(0, 0, 0, 0)",
       round: "0",
-      color: "white",
+      color: "gray2",
       fontFamily: "avenir",
       placeholder: "Placeholder",
       flex: "1",
       minHeight: "100%",
       outline: "none !important",
-      fontWeight: "400"
+      "::placeholder": { color: "gray 1 +64" }
     }
   }
 };
@@ -14168,41 +14196,37 @@ var FieldTemplate = {
   Input: {},
   Button: { Icon: { name: "eye" } }
 };
-
-// ../../uikit/domql/Field/CommonField.js
-var CommonField = {
+var FieldWithTitle = {
   extend: Flex,
-  tag: "label",
   props: {
     flow: "column",
     boxSize: "fit-content fit-content",
-    gap: "Z"
+    gap: "Y1",
+    // border: '.05px solid red',
+    Hint: {
+      color: "gray 1 +64",
+      align: "center flex-start",
+      fontSize: "Y",
+      gap: "Y",
+      padding: "W Y2 - Y2"
+    }
   },
   Title: {
     props: {
       text: "Label",
+      fontSize: "Z",
       lineHeight: "1em",
-      padding: "- - - V2",
-      color: "gray4"
+      color: "gray2",
+      fontWeight: "400",
+      padding: "- Y1"
     }
   },
   Field: {
-    tag: "div"
-  },
-  Hint: {
-    extend: IconText,
-    props: {
-      color: "gray4",
-      align: "center flex-start",
-      text: "",
-      fontSize: "Z1",
-      gap: "Y",
-      padding: "W - - W"
-    }
+    extend: Field
   }
 };
-var CommonFieldTemplate = {
-  extend: CommonField,
+var FieldWithTitleTemplate = {
+  extend: FieldWithTitle,
   Title: {},
   Field: {
     Icon: { props: { name: "info" } },
@@ -14210,69 +14234,48 @@ var CommonFieldTemplate = {
     Button: { icon: "eye" }
   },
   Hint: {
-    Icon: { props: { name: "info" } },
-    text: "Description"
-  }
-};
-
-// ../../uikit/domql/Field/NumberField.js
-var NumberField = {
-  extend: Field,
-  props: {
-    minWidth: "D+Y2",
-    maxWidth: "D+Y2",
-    minHeight: "D+Y2",
-    padding: "0"
-  },
-  Input: null,
-  NumberInput: {
+    extend: IconText,
     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"
-        }
-      }
+      icon: "info",
+      text: "Description"
     }
   }
 };
 
-// ../../uikit/domql/Field/Search.js
+// ../uikit/Field/Search.js
 var Search = {
   extend: Field,
   props: {
-    maxWidth: "H",
-    gap: "Y2",
-    padding: "Z2 A1",
-    background: "gray .92 +8"
-  },
-  Icon: {
-    props: {
-      opacity: ".65",
+    maxWidth: "G3",
+    gap: "Z",
+    theme: "dialog",
+    padding: "Z+V Z+V2",
+    Icon: {
       name: "search",
-      fontSize: "B",
-      margin: "0 - - -"
+      fontSize: "C",
+      color: "gray2",
+      margin: "V - - -"
     }
   },
+  Icon: {},
   Input: {
-    props: { placeholder: "Type a command or search" }
+    props: {
+      placeholder: "type a command or search",
+      fontSize: "Z",
+      "::placeholder": { color: "gray 1 +68" }
+    }
   }
 };
 var SearchWithButton = {
   extend: Search,
+  props: {
+    Button: { fontSize: "B" }
+  },
   Icon: {},
   Input: { props: { ":focus ~ button": { opacity: "1" } } },
   Button: {
     props: {
       opacity: "0",
-      fontSize: "D",
       icon: "x"
     },
     Icon: {
@@ -14287,20 +14290,48 @@ var SearchWithButton = {
 var SearchWithDropDownButton = {
   extend: SearchWithButton,
   props: {
-    padding: "- A - 0",
     theme: "tertiary",
-    maxWidth: "H+C"
+    maxWidth: "G3+C",
+    padding: "0 A 0 0",
+    gap: "Z"
   },
-  DropDownButton: {
-    background: "gray",
-    margin: "- Z - -"
+  DropDownButton: {},
+  Input: { props: { padding: "- - - X" } },
+  Button: {},
+  Icon: {}
+};
+
+// ../uikit/Field/TextAreaField.js
+var TextAreaField = {
+  tag: "label",
+  extend: Focusable,
+  props: {
+    boxSize: "fit-content",
+    border: "solid, gray .45 +80",
+    borderWidth: ".8px",
+    overflow: "hidden",
+    round: "Z1",
+    ":focus-within": { outline: "1px solid #0474F2" }
   },
-  Icon: {},
-  Input: {},
-  Button: {}
+  TextArea: {
+    tag: "textarea",
+    attr: { placeholder: "Leave us a message..." },
+    props: {
+      fontSize: "Z",
+      minWidth: "H",
+      minHeight: "D2+Y1",
+      padding: "A",
+      fontFamily: "avenir",
+      theme: "transparent",
+      border: "none",
+      outline: "none",
+      style: { resize: "none" },
+      "::placeholder": { color: "gray 1 +64" }
+    }
+  }
 };
 
-// ../../uikit/domql/Button/index.js
+// ../uikit/Button/index.js
 var Button = {
   extend: [IconText, FocusableComponent],
   tag: "button",
@@ -14346,18 +14377,20 @@ var CommonButton = {
   props: {
     theme: "primary",
     boxSize: "fit-content",
-    padding: "A A2",
-    round: "Z2",
-    gap: "Y2",
+    padding: "Z2 A2",
+    round: "Z1",
+    gap: "X1",
     position: "relative"
   },
   Icon: {
-    props: { fontSize: "C" }
+    props: { fontSize: "B1" }
   },
-  Caption: {
+  caption: {
     props: {
       text: "Button",
-      lineHeight: "1em"
+      line_height: "1em",
+      fontSize: "Z2",
+      letterSpacing: ".005em"
     }
   }
 };
@@ -14366,10 +14399,10 @@ var IconCommonButton = {
   props: {
     Icon: { name: "smile" },
     boxSize: "fit-content fit-content",
-    padding: "A",
-    background: "gray3"
+    padding: "Z2",
+    theme: "tertiary"
   },
-  Caption: null
+  caption: null
 };
 var ButtonSet = {
   tag: "nav",
@@ -14378,32 +14411,30 @@ var ButtonSet = {
 };
 var CancelConfirmButtons = {
   extend: Flex,
+  props: {
+    gap: "Z2",
+    maxWidth: "fit-content"
+  },
   childExtend: {
     extend: CommonButton,
     props: {
-      minWidth: "D2",
       ":first-child": {
-        background: "transparent",
-        border: "1px solid #20202B"
-      },
-      ":last-child": {}
+        theme: "transparent",
+        padding: "- Y1"
+      }
     }
   },
   ...[
-    { Caption: { text: "No" } },
-    { Caption: { text: "Yes" } }
-  ],
-  props: {
-    gap: "Z",
-    maxWidth: "fit-content"
-  }
+    { caption: { props: { text: "No" } } },
+    { caption: { props: { text: "Yes" } } }
+  ]
 };
 var IcontextButton = {
   extend: CommonButton,
   props: {
-    padding: "A A1",
     position: "relative",
-    background: "gray3",
+    theme: "tertiary",
+    padding: "Z2 A",
     Icon: { name: "smile" }
   }
 };
@@ -14412,32 +14443,33 @@ var DropDownButton = {
   props: {
     gap: "X2",
     boxSize: "fit-content fit-content",
-    padding: "Z2 B Z2 A",
-    round: "Z",
-    background: "#141416",
+    padding: "Z1 A1 Z Z1",
+    theme: "dialog",
     color: "white",
     Icon: {
       name: "chevronDown",
       fontSize: "D"
     },
-    Caption: { text: "All" }
+    caption: { text: "All" }
   }
 };
 var DropDownButtonWithAvatar = {
   extend: DropDownButton,
   props: {
-    gap: "Z",
-    padding: "Y1 Z",
-    round: "Y2",
-    background: "gray3"
+    gap: "Y",
+    padding: "Y",
+    round: "Z1",
+    theme: "dialog",
+    Icon: { fontSize: "B1" }
   },
   Avatar: {
-    boxSize: "A1 A1"
+    boxSize: "A2+V1"
   },
-  Caption: {
+  caption: {
     text: "ETH",
     props: {
-      fontSize: "Z1"
+      fontSize: "Y1",
+      fontWeight: "400"
     }
   }
 };
@@ -14458,14 +14490,14 @@ var PlusMinusButtons = {
   }
 };
 
-// ../../uikit/domql/Progress/ProgressLine.js
+// ../uikit/Progress/ProgressLine.js
 var ProgressLine = {
   tag: "progress",
   props: {
     value: 0.7,
-    height: "Y+V",
-    minWidth: "G+C",
-    round: "W",
+    height: "X1",
+    minWidth: "F2+B1",
+    round: "2px",
     overflow: "hidden",
     theme: "primary @dark .inactive",
     "::-webkit-progress-bar": {
@@ -14486,13 +14518,15 @@ var ProgressLineWithUnitValue = {
   extend: Flex,
   props: {
     align: "center flex-start",
-    gap: "A"
+    gap: "Z1"
+  },
+  ProgressLine: {
+    minWidth: "F2+B1"
   },
-  ProgressLine: {},
   UnitValue: {}
 };
 
-// ../../uikit/domql/Progress/ProgressCircle.js
+// ../uikit/Progress/ProgressCircle.js
 var ProgressCircle = {
   props: {
     boxSize: "D D",
@@ -14557,19 +14591,19 @@ var ProgressCircleWithSideUnitValue = {
   props: {
     align: "center flex-start",
     boxSize: "fit-content fit-content",
-    gap: "X+V"
+    gap: "Y"
   },
   ProgressCircle: {
-    boxSize: "A A",
+    boxSize: "A",
     ":after": {
       width: "calc(100% - 5px)",
       height: "calc(100% - 5px)"
     }
   },
-  UnitValue: {}
+  UnitValue: { fontSize: "Y1" }
 };
 
-// ../../uikit/domql/Range/index.js
+// ../uikit/Range/index.js
 var import_utils13 = __toESM(require_cjs());
 var import_scratch12 = __toESM(require_cjs10());
 var props = {
@@ -14717,7 +14751,7 @@ var RangeWithButtons = {
   }
 };
 
-// ../../uikit/domql/Slider/style.js
+// ../uikit/Slider/style.js
 var style_default = {
   appearance: "none",
   width: "100%",
@@ -14736,9 +14770,30 @@ var style_default = {
   }
 };
 
-// ../../uikit/domql/Slider/index.js
+// ../uikit/Slider/index.js
 var import_scratch13 = __toESM(require_cjs10());
 var import_utils14 = __toESM(require_cjs());
+(0, import_scratch13.set)({
+  theme: {
+    sliderThumb: {
+      background: "white 0.2",
+      "&::-webkit-slider-thumb": {
+        background: "#232526",
+        borderColor: (0, import_scratch13.opacify)("#454646", 0.75)
+      },
+      "&:hover": {
+        "&::-webkit-slider-thumb": {
+          borderColor: (0, import_scratch13.opacify)("#fff", 0.35)
+        }
+      },
+      "&:focus, &:active": {
+        "&::-webkit-slider-thumb": {
+          borderColor: "#3C6AC0"
+        }
+      }
+    }
+  }
+});
 var RangeSlider = {
   style: style_default,
   props: {
@@ -14807,16 +14862,17 @@ var Slider = {
   }
 };
 
-// ../../uikit/domql/Label/index.js
+// ../uikit/Label/index.js
 var Label = {
   extend: Flex,
   props: {
     text: "-2.902x",
-    fontSize: "Y",
+    fontSize: "X2",
     boxSize: "fit-content fit-content",
-    theme: "secondary",
-    padding: "W Y",
-    round: "Y"
+    background: "#F4454E",
+    padding: "W2 Y2",
+    round: "Y1",
+    fontWeight: "400"
   }
 };
 var LabelButton = {
@@ -14847,19 +14903,19 @@ var CardLabel = {
   }
 };
 
-// ../../uikit/domql/Avatar/Avatar.js
+// ../uikit/Avatar/Avatar.js
 var Avatar = {
   extend: Img,
   props: ({ key, props: props4 }) => ({
     display: "block",
-    avatarType: "initials",
+    avatarType: "adventurer-neutral",
     borderRadius: "100%",
     boxSize: "C+X C+X",
     src: `https://api.dicebear.com/7.x/${props4.avatarType || "initials"}/svg?seed=${props4.key || key || "no-avatar"}`
   })
 };
 
-// ../../uikit/domql/Avatar/AvatarIndicator.js
+// ../uikit/Avatar/AvatarIndicator.js
 var AvatarIndicator = {
   props: {
     boxSize: "fit-content",
@@ -14870,11 +14926,11 @@ var AvatarIndicator = {
   StatusIndicator: {
     position: "absolute",
     bottom: "V",
-    right: "0"
+    right: "-V"
   }
 };
 
-// ../../uikit/domql/Avatar/AvatarBundle.js
+// ../uikit/Avatar/AvatarBundle.js
 var AvatarBundle = {
   extend: Flex,
   props: {
@@ -14894,16 +14950,15 @@ var AvatarBundle = {
   $setPropsCollection: ({ props: props4 }) => props4.options
 };
 
-// ../../uikit/domql/Avatar/AvatarChooser.js
+// ../uikit/Avatar/AvatarChooser.js
 var AvatarChooser = {
   extend: Button,
   tag: "label",
   state: { key: "am" },
   props: {
-    round: "C",
+    round: "A2",
     width: "fit-content",
-    gap: "Y",
-    padding: "W2 A W2 W2",
+    padding: "X2 Y2+V X2 X2",
     theme: "tertiary",
     position: "relative",
     cursor: "pointer"
@@ -14920,15 +14975,15 @@ var AvatarChooser = {
       outline: "none",
       pointerEvents: "All",
       appearance: "none",
-      border: "none",
-      width: "100%",
       height: "100%",
       background: "none",
       color: "currentColor",
-      fontSize: "A",
+      fontSize: "Z2",
       lineHeight: 1,
-      margin: "0 0 0 -B1+X",
-      padding: "0 A 0 B1+X",
+      padding: "- B - Y1",
+      zIndex: "2",
+      flex: "1",
+      fontWeight: "500",
       ":focus-visible": {
         outline: "none"
       }
@@ -14951,11 +15006,18 @@ var AvatarChooser = {
     }
   },
   Icon: {
-    name: "arrowDown"
+    props: {
+      icon: "chevronDown",
+      fontSize: "C",
+      margin: "V - - -",
+      position: "absolute",
+      right: "Y1",
+      pointerEvents: "none"
+    }
   }
 };
 
-// ../../uikit/domql/Notification/index.js
+// ../uikit/Notification/index.js
 var Notification = {
   extend: Flex,
   props: {
@@ -14978,6 +15040,7 @@ var Notification = {
       gap: "X2"
     },
     Title: {
+      tag: "h6",
       props: {
         fontWeight: "600",
         lineHeight: "1em",
@@ -15007,7 +15070,7 @@ var NotificationIndicator = {
   }
 };
 
-// ../../uikit/domql/Tooltip/index.js
+// ../uikit/Tooltip/index.js
 var import_utils15 = __toESM(require_cjs());
 var Tooltip = {
   extend: Flex,
@@ -15115,7 +15178,7 @@ var TooltipParent = {
   }
 };
 
-// ../../uikit/domql/Pills/index.js
+// ../uikit/Pills/index.js
 var Pills = {
   extend: Flex,
   props: {
@@ -15141,22 +15204,21 @@ var Pills = {
   $setPropsCollection: ({ props: props4, state }) => new Array(props4.qty).fill({})
 };
 
-// ../../uikit/domql/Tab/index.js
+// ../uikit/Tab/index.js
 var Tab = {
   extend: IcontextButton,
   props: {
     boxSize: "fit-content fit-content",
-    theme: "secondary",
     align: "center flex-start",
-    gap: "Z",
-    position: "relative"
+    position: "relative",
+    padding: "Z Z1"
   },
   Icon: {},
-  Caption: {},
+  caption: {},
   CountIndicator: {
-    fontSize: "Y2",
-    margin: "- -X - X",
-    text: "19"
+    fontSize: "Y1",
+    text: "19",
+    margin: "- - - X1"
   }
 };
 var IconTab = {
@@ -15165,27 +15227,25 @@ var IconTab = {
   Span: null,
   CountIndicator: {
     position: "absolute",
-    top: "-Y1",
-    right: "-Y1",
-    fontSize: "Y",
-    fontWeight: "500",
-    padding: "X1",
+    top: "-Y2",
+    right: "-Y2",
+    fontSize: "X",
     text: "19"
   }
 };
 
-// ../../uikit/domql/Steps/CheckSteps.js
+// ../uikit/Steps/CheckSteps.js
 var CheckStep = {
   extend: Flex,
   props: {
     boxSize: "fit-content",
     align: "center flex-start",
-    gap: "Y2"
+    gap: "Z1"
   },
   CheckIndicatorWithLabel: {
     CheckIndicator: {
       theme: "transparent",
-      border: "2px solid #1C1C1F",
+      border: "1.5px solid #1C1C1F",
       ".isActive": {
         theme: "primary",
         border: "none"
@@ -15194,12 +15254,11 @@ var CheckStep = {
   },
   ProgressLine: {
     value: 0,
-    height: "W",
+    height: "V2",
     minWidth: "E",
     maxWidth: "E",
-    ".isActive": {
-      value: 1
-    }
+    round: "D",
+    ".isActive": { value: 1 }
   }
 };
 var CheckSteps = {
@@ -15207,7 +15266,7 @@ var CheckSteps = {
   props: {
     boxSize: "fit-content fit-content",
     align: "center flex-start",
-    gap: "Y+V",
+    gap: "Z1",
     childProps: {
       ":last-child > progress": { display: "none" }
     }
@@ -15237,21 +15296,18 @@ var CheckSteps = {
   ]
 };
 
-// ../../uikit/domql/Steps/RadioSteps.js
+// ../uikit/Steps/RadioSteps.js
 var RadioStep = {
   extend: CheckStep,
   CheckIndicatorWithLabel: null,
   RadioIndicatorWithLabel: {
     RadioIndicator: {
-      theme: "transparent",
-      border: "2px solid #3F3F43",
-      ":after": {
-        background: "transparent"
-      },
+      theme: "dialog",
+      ":after": {},
       ".isActive": {
-        theme: "primary",
+        theme: "dialog",
         border: "none",
-        ":after": { background: "white" }
+        ":after": { theme: "primary" }
       }
     }
   },
@@ -15262,7 +15318,7 @@ var RadioSteps = {
   props: {
     boxSize: "fit-content fit-content",
     align: "center flex-start",
-    gap: "Y+V",
+    gap: "Z",
     childProps: {
       ":last-child > progress": { display: "none" }
     }
@@ -15292,7 +15348,7 @@ var RadioSteps = {
   ]
 };
 
-// ../../uikit/domql/Steps/LineSteps.js
+// ../uikit/Steps/LineSteps.js
 var LineSteps = {
   extend: Flex,
   props: {
@@ -15303,7 +15359,7 @@ var LineSteps = {
     extend: ProgressLine,
     props: {
       value: 1,
-      height: "Y",
+      height: "X2",
       minWidth: "F",
       round: "X"
     }
@@ -15318,25 +15374,22 @@ var LineStepsWithTitleParagraph = {
   extend: Flex,
   props: {
     flow: "column",
-    padding: "A1 B B",
-    background: "gray",
-    round: "A",
+    padding: "A A1",
+    theme: "dialog",
+    round: "A1",
     boxSize: "fit-content",
-    gap: "B"
+    gap: "A1"
   },
   TitleParagraph: {
-    gap: "Z1",
+    gap: "Y1",
     Title: {
-      h5: {
-        text: "Symbols",
-        fontSize: "B"
-      }
+      text: "Symbols",
+      fontSize: "D1"
     },
     Paragraph: {
-      p: {
-        text: "The easiest way to build your own website.",
-        fontSIze: "A"
-      }
+      text: "The easiest way to build your own website.",
+      fontSize: "Z1",
+      color: "gray4"
     }
   },
   LineSteps: {
@@ -15347,17 +15400,18 @@ var LineStepsWithTitleParagraph = {
   }
 };
 
-// ../../uikit/domql/ParagraphButton/index.js
+// ../uikit/ParagraphButton/index.js
 var ParagraphButton = {
   extend: Flex,
   props: {
     alignItems: "center",
-    gap: "Y2"
+    gap: "Y2",
+    fontSize: "Y1"
   },
   P: {
     props: {
       text: "Didn't get the code?",
-      color: "gray2",
+      color: "gray4",
       margin: "0"
     }
   },
@@ -15366,7 +15420,9 @@ var ParagraphButton = {
     padding: "0",
     background: "transparent",
     color: "white",
-    textDecoration: "underline"
+    textDecoration: "underline",
+    fontWeight: "500",
+    Icon: { display: "none" }
   }
 };
 var ParagraphButtonWithCheckbox = {
@@ -15380,44 +15436,42 @@ var ParagraphButtonWithCheckbox = {
     tag: "div",
     props: {
       Input: {},
-      Flex: {
-        fontSize: "A1"
-      }
+      Flex: { fontSize: "A" }
     }
   },
   ParagraphButton: {
-    fontSize: "Z",
-    P: { color: "white" }
+    P: { text: "You agree to" },
+    Button: { text: "privacy policy" }
   }
 };
 
-// ../../uikit/domql/SocialLink/index.js
+// ../uikit/SocialLink/index.js
 var SocialLink = {
   extend: [Link, IconText],
   props: {
     fontWeight: "500",
+    text: "Continue with Twitch",
+    fontSize: "Z1",
     gap: "Z",
     boxSize: "fit-content",
     padding: "A A2",
     background: "gray3",
-    round: "Y+W",
+    round: "Z1",
     maxHeight: `${48 / 16}em`,
     cursor: "pointer",
     Icon: {
       name: "twitch",
       boxSize: "A2"
-    },
-    text: "Continue with Twitch"
+    }
   }
 };
 
-// ../../uikit/domql/Dialog/index.js
+// ../uikit/Dialog/index.js
 var Dialog = {
   extend: Flex,
   props: {
     theme: "dialog",
-    round: "Z2",
-    padding: "- Z - -"
+    round: "Z2"
   }
 };
 var DialogFooter = {
@@ -15459,119 +15513,117 @@ var DialogFooter = {
   }
 };
 
-// ../../uikit/domql/Modal/Modal.js
+// ../uikit/Modal/Modal.js
 var Modal = {
   extend: Dialog,
   props: {
     flow: "column",
-    boxSize: "fit-content fit-content",
-    padding: "A",
-    gap: "B1",
-    minWidth: "G3+Z1"
+    boxSize: "fit-content",
+    minWidth: "G3",
+    position: "relative",
+    padding: "Z1 Z2",
+    round: "A1"
   },
   Header: {
-    extend: TitleParagraphWithButton,
+    extend: TitleParagraph,
+    props: {
+      minWidth: "100%",
+      gap: "A"
+    },
     Title: {
-      h5: {
+      props: { align: "center space-between" },
+      caption: {
         props: {
-          fontSize: "B",
-          fontWeight: "700"
+          text: "Title",
+          fontSize: "D",
+          padding: "W2 W2 - W2"
         }
       },
-      Button: { props: { fontSize: "C" } }
+      x: {
+        extend: Button,
+        props: {
+          icon: "x",
+          fontSize: "B2",
+          boxSize: "fit-content",
+          theme: "transparent",
+          padding: "0"
+        }
+      }
     },
     Paragraph: {
-      p: { props: { color: "white" } }
+      props: {
+        fontSize: "Z",
+        color: "gray4",
+        padding: "- Y"
+      }
     }
-  },
-  Content: { extend: Flex },
-  Footer: { extend: Flex }
+  }
 };
 
-// ../../uikit/domql/Modal/CompleteProcess.js
+// ../uikit/Modal/CompleteProcess.js
 var CompleteProcess = {
   extend: Modal,
   props: {
-    maxWidth: "G3",
-    gap: "B1"
+    alignItems: "center",
+    gap: "B",
+    padding: "A A A+V A"
   },
   Header: {
     Title: {
-      h5: null,
-      Button: {
-        props: {
-          margin: "- - - auto"
-        }
-      }
+      caption: null,
+      x: { props: { margin: "- - - auto" } }
     },
     Paragraph: null
   },
-  Content: {
-    props: {
-      flow: "column",
-      align: "center flex-start",
-      gap: "B1"
-    },
-    SuccessIndicator: {
-      fontSize: "G"
+  SuccessIndicator: { fontSize: "F2" },
+  TitleParagraph: {
+    alignItems: "center",
+    gap: "Y",
+    Title: {
+      text: "Reset complete!",
+      fontSize: "D1"
     },
-    TitleParagraph: {
-      props: {
-        align: "center flex-start",
-        gap: "Z1"
-      },
-      Title: {
-        h5: {
-          props: {
-            text: "Reset complete!",
-            fontSize: "B",
-            fontWeight: "700"
-          }
-        }
-      },
-      Paragraph: {
-        p: {
-          props: {
-            text: "Your request has been approved!",
-            fontSize: "Z"
-          }
-        }
-      }
+    Paragraph: {
+      text: "Your request has been approved!",
+      fontSize: "Z",
+      color: "gray2"
     }
   },
-  Footer: {
-    extend: CommonButton,
-    props: {
-      minWidth: "100%",
+  CommonButton: {
+    minWidth: "100%",
+    margin: "Y - - -",
+    caption: {
+      text: "Done",
       fontWeight: "500"
     }
   }
 };
 
-// ../../uikit/domql/Modal/Message.js
+// ../uikit/Modal/Message.js
 var Message = {
   extend: Modal,
   props: {
     maxWidth: "G3",
-    gap: "A"
+    padding: "Z1 Z2 Z2 Z2"
   },
   Header: {
-    props: { gap: "A" },
-    Title: { h5: { text: "Message" } },
+    Title: {
+      caption: {
+        props: { text: "Message", fontSize: "C2" }
+      },
+      x: {
+        props: { padding: "V2" }
+      }
+    },
     Paragraph: {
-      p: {
-        props: {
-          text: "Yes. If you change your mind and no longer wish to keep your iPhone, you have the option to return it to us. The returned iPhone must be in good condition and in the original packaging, which contains all accessories, manuals and instructions. Returns are subject to Apple\u2019s Sales and Refunds Policy.",
-          lineHeight: "1.4em"
-        }
+      props: {
+        text: "Yes. If you change your mind and no longer wish to keep your iPhone, you have the option to return it to us. The returned iPhone must be in good condition and in the original packaging, which contains all accessories, manuals and instructions. Returns are subject to Apple\u2019s Sales and Refunds Policy."
       }
     }
-  },
-  Content: null,
-  Footer: null
+  }
 };
 
-// ../../uikit/domql/Modal/Pricing.js
+// ../uikit/Modal/Pricing.js
 var Pricing = {
   extend: Modal,
   props: {
@@ -15629,105 +15681,12 @@ var Pricing = {
   }
 };
 
-// ../../uikit/domql/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: {
-        props: {
-          text: "Verification code has been sent to you. Enter the code below.",
-          lineHeight: "1.5em"
-        }
-      }
-    }
-  },
-  Content: {
-    props: {
-      flow: "column",
-      gap: "A2"
-    },
-    Fields: {
-      extend: Flex,
-      props: {
-        justifyContent: "space-between",
-        flex: "1"
-      },
-      childExtend: {
-        extend: NumberField,
-        NumberInput: {
-          props: ({ parent, state }) => ({
-            ...NumberField.NumberInput.props,
-            value: state.value[parent.key] || ""
-          }),
-          on: {
-            keydown: (event, { node: node2 }) => {
-              const { value: value2 } = node2;
-              if (value2.length > 1)
-                return false;
-            },
-            keyup: (event, { parent, state }) => {
-              const { target, keyCode } = event;
-              const { value: value2 } = target;
-              const next2 = parent.nextElement();
-              const previous = parent.previousElement();
-              const isNumber = keyCode >= 48 && keyCode <= 57 || keyCode >= 96 && keyCode <= 105;
-              const isBackspace = event.keyCode === 8 || event.keyCode === 46;
-              target.select();
-              if (isNumber && value2.length && next2)
-                next2.NumberInput.node.focus();
-              if ((!value2.length || isBackspace) && previous)
-                previous.NumberInput.node.focus();
-              state.value[parent.key] = value2;
-            },
-            paste: (event, { state }) => {
-              event.preventDefault();
-              const paste = (event.clipboardData || window.clipboardData).getData("text");
-              if (!paste)
-                return;
-              const value2 = paste.split("");
-              state.update({ value: value2 }, { overwrite: "shallow" });
-            }
-          }
-        }
-      },
-      ...[{}, {}, {}, {}]
-    },
-    ParagraphButton: {
-      extend: ParagraphButton,
-      props: { padding: "- - - Y" }
-    }
-  },
-  Footer: {
-    props: {
-      justifyContent: "flex-end",
-      padding: "Y2 - - -"
-    },
-    Buttons: {
-      extend: CancelConfirmButtons,
-      props: { childProps: { ":first-child": { border: "none" } } },
-      ...[
-        { Caption: { text: "Cancel" } },
-        { Caption: { text: "Verify" } }
-      ]
-    }
-  }
-};
-
-// ../../uikit/domql/List/List.js
+// ../uikit/List/List.js
 var List = {
   props: {
     position: "relative",
     overflow: "hidden",
-    round: "Z1",
+    round: "A",
     minWidth: "F1",
     theme: "dialog",
     ":before, &:after": {
@@ -15759,8 +15718,10 @@ var List = {
         padding: "Z1 A1",
         position: "relative",
         cursor: "pointer",
+        fontSize: "A1",
+        color: "gray4",
         ":hover": {
-          background: "gray .92 +8"
+          background: "gray .92 +4"
         },
         childProps: { position: "relative" }
       }
@@ -15789,14 +15750,13 @@ var ListTemplate = {
   }
 };
 
-// ../../uikit/domql/List/ListWithTitle.js
+// ../uikit/List/ListWithTitle.js
 var ListWithTitle = {
   extend: Flex,
   props: {
     flow: "column",
-    background: "gray",
     overflow: "hidden",
-    round: "Z1",
+    round: "A",
     maxWidth: "F1"
   },
   Title: {
@@ -15817,8 +15777,8 @@ var ListWithTitle = {
     extend: List,
     props: {
       round: "0",
-      background: "transparent",
       minWidth: "100%"
+      // theme: 'tertiary'
     }
   }
 };
@@ -15838,7 +15798,7 @@ var ListWithTitleTemplate = {
   }
 };
 
-// ../../uikit/domql/List/GroupList.js
+// ../uikit/List/GroupList.js
 var GroupList = {
   extend: Flex,
   props: {
@@ -15846,28 +15806,38 @@ var GroupList = {
     overflow: "hidden",
     theme: "dialog",
     maxHeight: "H",
-    round: "Z1",
+    round: "A",
     maxWidth: "G"
   },
   Header: {
     extend: Flex,
     props: {
-      padding: "Z - Z A"
-    },
-    h4: {
-      props: {
-        text: "Header",
-        fontSize: "A",
-        fontWeight: "500",
-        color: "gray4"
-      }
+      text: "Header",
+      padding: "Z2 A",
+      fontSize: "A2",
+      fontWeight: "500",
+      color: "white"
     }
   },
   Groups: {
     props: {
-      ...List.props,
-      theme: null,
-      round: "0"
+      position: "relative",
+      ":before, &:after": {
+        content: '""',
+        position: "absolute",
+        boxSize: "A2 100%",
+        zIndex: "2",
+        left: "0",
+        pointerEvents: "none"
+      },
+      ":before": {
+        top: "0",
+        background: "linear-gradient(to bottom, var(--theme-dialog-dark-background) 0%, transparent 100%)"
+      },
+      ":after": {
+        bottom: "0",
+        background: "linear-gradient(to top, var(--theme-dialog-dark-background) 0%, transparent 100%)"
+      }
     },
     Flex: {
       extend: Flex,
@@ -15885,10 +15855,11 @@ var GroupList = {
           overflow: "visible",
           background: "transparent"
         },
-        Title: {},
+        Title: { props: { theme: "transparent" } },
         List: {
           props: {
             overflow: "visible",
+            theme: "transparent",
             ":before": { display: "none" },
             ":after": { display: "none" }
           },
@@ -15971,26 +15942,27 @@ var GroupListTemplate = {
   }
 };
 
-// ../../uikit/domql/List/GroupListWithSearch.js
+// ../uikit/List/GroupListWithSearch.js
 var GroupListWithSearch = {
   extend: GroupList,
-  props: { maxWidth: "G1" },
+  props: {
+    maxWidth: "G1"
+  },
   Header: {},
   SearchContainer: {
     extend: Flex,
     props: {
-      padding: "X Y"
+      padding: "0 Z1 Y2 Z1",
+      background: "transparent"
     },
     Search: {
       extend: Search,
       props: {
         maxWidth: "100%",
         minWidth: "100%",
-        minHeight: "C+Y",
-        round: "C",
-        fontSize: "Z2",
-        border: "none",
-        background: "black .25"
+        minHeight: "C",
+        theme: "transparent",
+        round: "Z1"
       },
       Icon: {
         props: {
@@ -16022,16 +15994,6 @@ var GroupListWithSearchTemplate = {
   SearchContainer: {},
   Groups: {
     Flex: {
-      props: {
-        childProps: {
-          Title: { padding: "A A A A2" },
-          List: {
-            Flex: {
-              childProps: { padding: "Z1 A1 Z1 B" }
-            }
-          }
-        }
-      },
       ...[
         {
           Title: null,
@@ -16075,7 +16037,7 @@ var GroupListWithSearchTemplate = {
   }
 };
 
-// ../../uikit/domql/TimePicker/TimePickerItem.js
+// ../uikit/TimePicker/TimePickerItem.js
 var props2 = {
   align: "center center",
   flow: "column",
@@ -16116,7 +16078,7 @@ var TimePickerItem = {
   Button_minus: { icon: "minus" }
 };
 
-// ../../uikit/domql/TimePicker/TimeSwitcher.js
+// ../uikit/TimePicker/TimeSwitcher.js
 var props3 = {
   boxSize: "C B2",
   flow: "column",
@@ -16153,7 +16115,7 @@ var TimeSwitcher = {
   pm: { text: "pm" }
 };
 
-// ../../uikit/domql/TimePicker/index.js
+// ../uikit/TimePicker/index.js
 var TimePicker = {
   extend: [Dialog, Flex],
   state: {
@@ -16219,7 +16181,7 @@ var TimePicker = {
   }
 };
 
-// ../../uikit/domql/Dropdown/index.js
+// ../uikit/Dropdown/index.js
 var DropdownList = {
   extend: Flex,
   props: {
@@ -16280,309 +16242,380 @@ var DropdownParent = {
   }
 };
 
-// ../../uikit/domql/Form/CommonForm.js
+// ../uikit/Form/CommonForm.js
 var CommonForm = {
-  extend: [Form, Grid],
-  tag: "form",
+  extend: Modal,
   props: {
-    gap: "B2",
-    height: "fit-content",
-    margin: "0",
-    width: "100%"
+    gap: "B",
+    boxSizing: "border-box",
+    padding: "A+V A"
   },
-  childExtend: {
-    extend: CommonField,
+  Header: {
+    props: { gap: "Z" },
+    Title: {
+      caption: { props: { padding: "Y W2 - W2" } },
+      x: {
+        props: {
+          margin: "-Y+V - - -",
+          fontSize: "C"
+        }
+      }
+    }
+  },
+  Form: {
+    extend: Flex,
     props: {
-      minWidth: "100%",
-      Textarea: {
-        width: "100%",
-        maxWidth: "100%"
+      flow: "column",
+      "> div ~ button": { padding: "Z2+V1 -" },
+      "> div ~ div:last-child > button": { padding: "Z2+V1 B" },
+      "> div ~ div:last-child > button:first-child": { padding: "Z2+V Z" }
+    },
+    Fields: {
+      extend: Grid,
+      props: {
+        columnGap: "A",
+        rowGap: "A1"
       },
-      Hint: { color: "gray .92 +68" }
+      childExtend: {
+        extend: FieldWithTitle,
+        props: {
+          width: "100%",
+          Field: { minWidth: "100%" }
+        }
+      }
     },
-    Title: {},
-    Field: {
-      props: { minWidth: "100%" }
+    Submit: {
+      props: {
+        minWidth: "100%",
+        margin: "C - - -"
+      }
     }
   }
 };
 
-// ../../uikit/domql/Form/ResetPassword.js
-var ResetPassword = {
-  extend: Modal,
-  props: {
-    minWidth: "H+B",
-    gap: "B1",
-    Content: {}
-  },
+// ../uikit/Form/VerificationCode.js
+var VerificationCode = {
+  extend: CommonForm,
+  // state: { value: NUMBERS },
   Header: {
-    props: { gap: "Z2" },
-    Title: { h5: { text: "Choose new password" } },
-    Paragraph: { p: { text: "Almost done. Enter your new password and you're all set" } }
-  },
-  Content: {
-    extend: CommonForm,
-    props: { flow: "column" },
-    ...[{
-      Title: { text: "Old password" },
-      Field: {},
-      Hint: null
-    }, {
-      Title: { text: "New password" },
-      Field: {},
-      Hint: {
-        Icon: { props: { name: "info" } },
-        text: "8 character minimum"
-      }
-    }, {
-      Title: { text: "Confirm new password" },
-      Field: {},
-      Hint: {
-        Icon: { props: { name: "info" } },
-        text: "8 character minimum"
+    props: { gap: "A" },
+    Title: { caption: { props: { text: "Verify your email" } } },
+    Paragraph: {
+      props: {
+        text: "Verification code has been sent to you. Enter the code below.",
+        maxWidth: "G1+Y"
       }
-    }]
+    }
   },
-  Footer: {
-    props: { justifyContent: "flex-end" },
-    Buttons: {
+  Form: {
+    props: {
+      "> div ~ div:last-child > button": { padding: "Z1+V1 B+V" },
+      "> div ~ div:last-child > button:first-child": { padding: "Z1+V1 Y1" }
+    },
+    Fields: {
+      props: {
+        display: "flex",
+        columnGap: "A",
+        childProps: { flex: "1" }
+      },
+      childExtend: NumberInput,
+      ...[{}, {}, {}, {}]
+    },
+    ParagraphButton: { padding: "Z1 Z2 - Z2" },
+    Submit: {
       extend: CancelConfirmButtons,
-      props: { childProps: { ":first-child": { border: "none" } } },
+      props: { justifyContent: "flex-end" },
       ...[
-        { Caption: { text: "Cancel" } },
-        { Caption: { text: "Reset password" } }
+        { caption: { props: { text: "Cancel" } } },
+        { caption: { props: { text: "Verify" } } }
       ]
     }
   }
-};
-
-// ../../uikit/domql/Form/ContactForm.js
-var ContactForm = {
-  extend: Modal,
-  props: {
-    minWidth: "H+B",
-    maxWidth: "H+B",
-    gap: "B2",
-    padding: "A2 A2"
-  },
+  // Form: {
+  //   extend: Flex,
+  //   props: { flow: 'column' },
+  //   NumberFields: {
+  //     justifyContent: 'space-between',
+  //     gap: 'A1',
+  //     childProps: {
+  //       round: 'Y1',
+  //       flex: '1'
+  //     }
+  //   },
+  //   ParagraphButton: {
+  //     fontSize: 'Y2',
+  //     padding: 'A - - Z1'
+  //   },
+  //   Buttons: {
+  //     extend: CancelConfirmButtons,
+  //     props: {
+  //       minWidth: '100%',
+  //       justifyContent: 'flex-end',
+  //       margin: 'C - - -'
+  //     },
+  //     ...[
+  //       { caption: { text: 'Cancel' } },
+  //       { caption: { text: 'Verify' } }
+  //     ]
+  //   }
+  // }
+  // Header: {
+  //   props: { gap: 'A' },
+  //   Title: { h5: { text: 'Verify your email' } },
+  //   Paragraph: {
+  //     p: {
+  //       props: {
+  //         text: 'Verification code has been sent to you. Enter the code below.',
+  //         lineHeight: '1.5em'
+  //       }
+  //     }
+  //   }
+  // },
+  // Content: {
+  //   props: {
+  //     flow: 'column',
+  //     gap: 'A2'
+  //   },
+  //   Fields: {
+  //     extend: Flex,
+  //     props: {
+  //       justifyContent: 'space-between',
+  //       flex: '1'
+  //     },
+  //     // childExtend: {
+  //     //   // extend: NumberField,
+  //     //   NumberInput: {
+  //     //     props: ({ parent, state }) => ({
+  //     //       ...NumberField.NumberInput.props,
+  //     //       value: state.value[parent.key] || ''
+  //     //     }),
+  //     //     on: {
+  //     //       keydown: (event, { node }) => {
+  //     //         const { value } = node
+  //     //         if (value.length > 1) return false
+  //     //       },
+  //     //       keyup: (event, { parent, state }) => {
+  //     //         const { target, keyCode } = event
+  //     //         const { value } = target
+  //     //         const next = parent.nextElement()
+  //     //         const previous = 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 && next) next.NumberInput.node.focus()
+  //     //         if ((!value.length || isBackspace) && previous) previous.NumberInput.node.focus()
+  //     //         state.value[parent.key] = value
+  //     //       },
+  //     //       paste: (event, { 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,
+  //     props: { padding: '- - - Y' }
+  //   }
+  // },
+  // Footer: {
+  //   props: {
+  //     justifyContent: 'flex-end',
+  //     padding: 'Y2 - - -'
+  //   },
+  //   Buttons: {
+  //     extend: CancelConfirmButtons,
+  //     props: { childProps: { ':first-child': { border: 'none' } } },
+  //     ...[
+  //       { Caption: { text: 'Cancel' } },
+  //       { Caption: { text: 'Verify' } }
+  //     ]
+  //   }
+  // }
+};
+
+// ../uikit/Form/ResetPassword.js
+var ResetPassword = {
+  extend: CommonForm,
+  props: { minWidth: "G3+D" },
   Header: {
-    props: {
-      gap: "Y2"
-    },
-    Title: {
-      h5: {
-        props: {
-          text: "We\u2019d love to help",
-          fontSize: "D1"
-        }
-      }
-    },
-    Paragraph: {
-      p: {
-        props: {
-          text: "Reach out and we\u2019ll get in touch within 24 hours.",
-          color: "gray4"
-        }
-      }
-    }
+    Title: { caption: { props: { text: "Choose new password" } } },
+    Paragraph: { props: { text: "Almost done. Enter your new password and you\u2019re all set" } }
   },
-  Content: {
-    props: { flow: "column" },
-    Form: {
-      extend: CommonForm,
-      props: { columns: "repeat(2, 1fr)" },
+  Form: {
+    Fields: {
       ...[
         {
-          Title: { text: "First name" },
-          Field: { Input: { placeholder: "First name" } },
-          Hint: null
-        },
-        {
-          Title: { text: "Last name" },
-          Field: { Input: { placeholder: "Last name" } },
-          Hint: null
+          Title: { props: { text: "Old password" } },
+          Field: {}
         },
         {
-          props: { gridColumn: "1 / span 2" },
-          Title: { text: "Email" },
-          Field: { Input: { placeholder: "example@email.com" } },
-          Hint: null
+          Title: { props: { text: "New password" } },
+          Field: {},
+          Hint: {
+            extend: IconText,
+            props: {
+              icon: "info",
+              text: "8 character minimum"
+            }
+          }
         },
         {
-          props: { gridColumn: "1 / span 2" },
-          Title: { text: "Message" },
-          Field: null,
-          Textarea: {},
-          Hint: null
+          Title: { props: { text: "Confirm new password" } },
+          Field: {},
+          Hint: {
+            extend: IconText,
+            props: {
+              icon: "info",
+              text: "8 character minimum"
+            }
+          }
         }
       ]
     },
-    ParagraphButtonWithCheckbox: {
-      padding: "A1 Z - W",
-      Checkbox: {},
-      ParagraphButton: {
-        P: { text: "You agree to" },
-        Button: { text: "Privacy Policy" }
-      }
-    }
-  },
-  Footer: {
-    Button: {
-      text: "Send message",
-      theme: "primary",
-      flex: "1",
-      round: "Y+W",
-      fontWeight: "500",
-      padding: "A -"
+    Submit: {
+      extend: CancelConfirmButtons,
+      props: { justifyContent: "flex-end" },
+      ...[
+        { caption: { props: { text: "Cancel" } } },
+        { caption: { props: { text: "Reset password" } } }
+      ]
     }
   }
 };
 
-// ../../uikit/domql/Form/SignUp.js
-var SignUp = {
-  extend: Modal,
-  props: {
-    minWidth: "H+B",
-    maxWidth: "H+B",
-    padding: "A2 A2"
-  },
+// ../uikit/Form/ContactForm.js
+var ContactForm = {
+  extend: CommonForm,
   Header: {
-    props: { gap: "Y1" },
-    Title: {
-      h5: {
-        props: {
-          text: "Create your account",
-          fontSize: "D1"
-        }
-      }
-    },
-    Paragraph: {
-      p: {
-        props: {
-          text: "Let\u2019s get started with your 30 days free trial",
-          color: "gray4"
-        }
-      }
-    }
+    Title: { caption: { props: { text: "We\u2019d love to help" } } },
+    Paragraph: { props: { text: "Reach out and we\u2019ll get in touch within 24 hours." } }
   },
-  Content: {
-    props: { flow: "column" },
-    Form: {
-      extend: CommonForm,
-      props: {
-        gap: "B",
-        padding: "B - - -",
-        childProps: {
+  Form: {
+    Fields: {
+      props: { columns: "repeat(2, 1fr)" },
+      ...[
+        {
+          props: { gridColumn: "1" },
+          Title: { props: { text: "First name" } },
+          Field: { Input: { props: { placeholder: "First name" } } }
+        },
+        {
+          props: { gridColumn: "2" },
+          Title: { props: { text: "Last name" } },
+          Field: { Input: { props: { placeholder: "Last name" } } }
+        },
+        {
+          props: { gridColumn: "1 / span 2" },
+          Title: { props: { text: "Email" } },
+          Field: { Input: { props: { placeholder: "example@email.com" } } }
+        },
+        {
+          props: { gridColumn: "1 / span 2" },
+          Title: { props: { text: "Message" } },
           Field: {
-            background: "gray3",
-            border: "none"
+            extend: TextAreaField
           }
         }
-      },
+      ]
+    },
+    ParagraphButtonWithCheckbox: { padding: "Z1 Z - Z" },
+    Submit: {
+      extend: CommonButton,
+      caption: { props: { text: "Send message" } }
+    }
+  }
+};
+
+// ../uikit/Form/SignUp.js
+var SignUp = {
+  extend: CommonForm,
+  props: { minWidth: "H" },
+  Header: {
+    Title: { caption: { props: { text: "Create your account" } } },
+    Paragraph: { props: { text: "Let\u2019s get started with your 30 days free trial" } }
+  },
+  Form: {
+    Fields: {
       ...[
         {
-          Title: { text: "Full name" },
-          Field: { Input: { placeholder: "Enter your full name" } }
+          Title: { props: { text: "Full name" } },
+          Field: { Input: { props: { placeholder: "Enter your full name" } } }
         },
         {
-          Title: { text: "Email" },
-          Field: { Input: { placeholder: "Email address" } }
+          Title: { props: { text: "Email" } },
+          Field: { Input: { props: { placeholder: "Email address" } } }
         },
         {
-          Title: { text: "Password" },
-          Field: { Input: { placeholder: "Create a password" } },
+          Title: { props: { text: "Password" } },
+          Field: { Input: { props: { placeholder: "Create a password" } } },
           Hint: {
-            Icon: { props: { name: "info" } },
-            text: "8 characters reqired"
+            extend: IconText,
+            props: {
+              icon: "info",
+              text: "8 character minimum"
+            }
           }
         },
         {
-          Title: { text: "Confirm password" },
-          Field: { Input: { placeholder: "Repeat password" } },
+          Title: { props: { text: "Confirm password" } },
+          Field: { Input: { props: { placeholder: "Repeat password" } } },
           Hint: {
-            Icon: { props: { name: "info" } },
-            text: "8 characters reqired"
+            extend: IconText,
+            props: {
+              icon: "info",
+              text: "8 character minimum"
+            }
           }
         }
       ]
     },
     ParagraphButtonWithCheckbox: {
-      padding: "A1 Z - W",
-      Checkbox: {},
-      ParagraphButton: {
-        P: { text: "You agree to" },
-        Button: { text: "Privacy Policy" }
-      }
-    }
-  },
-  Footer: {
-    CommonButton: {
-      flex: "1",
-      round: "Y+W",
-      Caption: { text: "Create an account" }
+      padding: "Z2 Z1 - Z1",
+      justifyContent: "flex-end"
+    },
+    Submit: {
+      extend: CommonButton,
+      caption: { props: { text: "Create an account" } }
     }
   }
 };
 
-// ../../uikit/domql/Form/LogIn.js
+// ../uikit/Form/LogIn.js
 var LogIn = {
-  extend: Modal,
-  props: {
-    minWidth: "H+B",
-    maxWidth: "H+B",
-    padding: "B A"
-  },
+  extend: CommonForm,
+  props: { minWidth: "G3+C1" },
   Header: {
-    props: { gap: "Y1" },
-    Title: {
-      h5: {
-        props: {
-          text: "Log in to your account",
-          fontSize: "D1"
-        }
-      }
-    },
-    Paragraph: {
-      p: {
-        props: {
-          text: "Enter your email address and password to log in.",
-          color: "gray4"
-        }
-      }
-    }
+    Title: { caption: { props: { text: "Log in to your account" } } },
+    Paragraph: { props: { text: "Enter your email address and password to log in." } }
   },
-  Content: {
+  Form: {
     props: {
-      flow: "column",
-      padding: "B - - -"
+      ParagraphButtonWithCheckbox: { margin: "A -" }
     },
-    Form: {
-      extend: CommonForm,
-      props: {
-        gap: "B",
-        childProps: {
-          Field: {
-            background: "gray3",
-            border: "none"
-          }
-        }
-      },
+    Fields: {
       ...[
         {
-          Title: { text: "Email" },
-          Field: { Input: { placeholder: "Enter your email" } }
+          Title: { props: { text: "Email" } },
+          Field: { Input: { props: { placeholder: "Enter your email" } } }
         },
         {
-          Title: { text: "Password" },
+          Title: { props: { text: "Password" } },
           Field: {
-            Input: { placeholder: "Enter your password" },
-            Button: { Icon: { name: "eye" } }
+            Icon: null,
+            Input: { props: { placeholder: "Enter your password" } },
+            Button: { props: { icon: "eye" } }
           }
         }
       ]
     },
     ParagraphButtonWithCheckbox: {
-      padding: "A Z A Y",
+      padding: "- Y1",
       Checkbox: {},
       ParagraphButton: {
         flex: "1",
@@ -16590,53 +16623,46 @@ var LogIn = {
         P: { text: "Keep me logged in" },
         Button: {
           text: "Forgot your password?",
+          fontWeight: "400",
           textDecoration: "none"
         }
       }
     },
-    CommonButton: {
-      minWidth: "100%",
-      round: "Y+W",
-      Caption: { text: "Sign in" }
-    },
-    DoubleHr: {
-      padding: "B -"
+    Submit: {
+      extend: CommonButton,
+      props: { margin: "A - - -" },
+      caption: { props: { text: "Sign in" } }
     }
   },
+  DoubleHr: {},
   Footer: {
+    extend: Flex,
     props: {
       flow: "column",
-      gap: "A"
+      gap: "Z2"
     },
     childExtend: {
       extend: SocialLink,
       props: {
-        width: "100%"
+        minWidth: "100%",
+        color: "gray4"
       }
     },
-    ...[
-      {},
-      {
-        props: {
-          Icon: { name: "facebook" },
-          text: "Continue with Facebook"
-        }
-      }
-    ]
+    ...[{}, {}]
   }
 };
 
-// ../../uikit/domql/Upload/UploadImage.js
+// ../uikit/Upload/UploadImage.js
 var UploadImage = {
   props: {
-    padding: "A1",
-    background: "#57575C",
+    padding: "A+V",
+    theme: "tertiary",
     boxSize: "fit-content",
-    round: "Z"
+    round: "Z2"
   },
   Icon: {
     name: "file",
-    fontSize: "D"
+    fontSize: "C2"
   }
 };
 var UploadIcon = {
@@ -16683,7 +16709,7 @@ var UploadIcon = {
   }
 };
 
-// ../../uikit/domql/Upload/UploadButton.js
+// ../uikit/Upload/UploadButton.js
 var UploadButton = {
   extend: CommonButton,
   props: {
@@ -16693,14 +16719,16 @@ var UploadButton = {
     color: "#0474F2",
     boxSize: "fit-content fit-content",
     overflow: "hidden",
-    fontWeight: "500",
-    cursor: "pointer",
-    Caption: { text: "Choose file" }
+    cursor: "pointer"
+  },
+  caption: {
+    props: {
+      text: "Choose file"
+    }
   },
   Input: {
     type: "file",
     inset: "0 0 0 0",
-    border: "2px solid red",
     position: "absolute",
     boxSize: "100% 100%",
     top: "0",
@@ -16709,65 +16737,63 @@ var UploadButton = {
     cursor: "pointer"
   }
 };
-var UploadButtonWithIcon = {
+var UploadButtonWithBackground = {
   extend: UploadButton,
   props: {
-    gap: "Z",
+    fontFamily: "Avenir",
     theme: "primary",
-    padding: "A B",
-    round: "A",
-    color: "white"
-  },
-  Icon: {
-    props: {
-      name: "upload",
-      fontSize: "B"
-    }
+    color: "white",
+    padding: "Z2 A1"
   },
-  Caption: { text: "Browse files" }
+  caption: { props: { text: "Browse files" } }
 };
 
-// ../../uikit/domql/Upload/UploadLabel.js
+// ../uikit/Upload/UploadLabel.js
 var UploadLabel = {
   extend: Flex,
   props: {
     flow: "column",
     align: "center flex-start",
     boxSize: "fit-content fit-content",
-    gap: "C",
-    background: "gray",
-    padding: "C D+Z",
-    round: "Z+X",
-    border: "1px dashed #57575C"
+    gap: "B2",
+    padding: "C D1",
+    round: "A",
+    border: "solid, gray2 .05",
+    borderWidth: "1px",
+    theme: "dialog"
   },
   Icon: {
-    name: "upload",
-    fontSize: "I",
+    name: "file",
+    fontSize: "I1",
     color: "#818186"
   },
   TitleParagraph: {
     props: {
       align: "center flex-start",
-      gap: "Y"
+      gap: "Z",
+      fontWeight: "400"
     },
     Title: {
       props: {
-        gap: "Y",
-        h5: {
-          text: "Drag & drop your files here or",
-          fontSize: "A",
-          fontWeight: "400"
-        }
+        text: "Drag & drop your files here or",
+        flow: "row-reverse",
+        fontWeight: "400",
+        gap: "Y2",
+        align: "center flex-start",
+        fontSize: "Z1",
+        color: "gray2"
       },
-      h5: {},
-      UploadButton: {}
+      UploadButton: {
+        caption: {
+          fontSize: "A1",
+          fontWeight: "500"
+        }
+      }
     },
     Paragraph: {
       props: {
-        p: {
-          text: "50 MB max file size",
-          fontSize: "Z"
-        }
+        text: "50 MB max file size",
+        fontSize: "Z"
       }
     }
   }
@@ -16775,89 +16801,108 @@ var UploadLabel = {
 var UploadLabel2 = {
   extend: UploadLabel,
   props: {
-    gap: "B",
-    padding: "C E+A"
-  },
-  Icon: { name: "file" },
-  TitleParagraph: {
-    Title: {
-      h5: { text: "Drag & drop your files here" },
-      UploadButton: { display: "none" }
-    },
-    Paragraph: {
-      p: { text: "50 MB max file size" }
-    }
+    padding: "B2 E1",
+    gap: "B"
   },
-  UploadButtonWithIcon: {}
+  Icon: {},
+  TitleParagraph: { Title: { UploadButton: null } },
+  UploadButtonWithBackground: {
+    padding: "A C",
+    margin: "Z - - -",
+    caption: { fontWeight: "500" }
+  }
 };
 
-// ../../uikit/domql/Upload/UploadModal.js
-var UploadModal = {
-  extend: Modal,
-  props: { gap: "A" },
-  Header: {
-    props: { padding: "- X" },
-    Title: { h5: { text: "File Upload" } },
-    Paragraph: null
+// ../uikit/Upload/UploadModal.js
+var UploadFooter = {
+  extend: Flex,
+  props: {
+    gap: "E",
+    align: "center space-between",
+    boxSize: "fit-content"
   },
-  Content: {
-    extend: UploadLabel,
-    props: { padding: "C E" },
-    Icon: {},
-    TitleParagraph: {
-      Title: {
-        h5: {},
-        UploadButton: null
-      }
+  IconText: {
+    extend: IconText,
+    props: {
+      icon: "info",
+      text: "Support",
+      gap: "Y",
+      fontSize: "Z",
+      fontWeight: "400"
     }
   },
-  Footer: {
-    UploadButtonWithIcon: {
-      flex: 1,
-      Icon: { display: "none" },
-      Caption: { text: "Choose file" }
-    }
+  Buttons: {
+    extend: CancelConfirmButtons,
+    props: {
+      childProps: {
+        padding: "Z2 A1",
+        ":first-child": {
+          theme: "tertiary",
+          padding: "- A1"
+        },
+        caption: {
+          fontSize: "Z2",
+          fontWeight: "400",
+          letterSpacing: ".3px"
+        }
+      }
+    },
+    ...[
+      { caption: { props: { text: "Cancel" } } },
+      {
+        extend: UploadButtonWithBackground,
+        caption: { props: { text: "Attach file" } }
+      }
+    ]
   }
 };
-var UploadModal2 = {
+var UploadModal = {
   extend: Modal,
-  props: { gap: "A" },
-  Header: {
-    props: { padding: "- X" },
-    Title: { h5: { text: "File Upload" } },
-    Paragraph: null
+  props: {
+    gap: "A",
+    round: "A1",
+    padding: "A"
   },
-  Content: { extend: UploadLabel },
-  Footer: {
-    props: {
-      align: "center space-between",
-      padding: "- X"
-    },
-    IconText: {
-      Icon: { name: "info" },
-      text: "Support",
-      gap: "Z"
-    },
-    CancelConfirmButtons: {
-      props: {
-        childProps: {
-          ":first-child": { background: "gray" }
+  Header: {
+    Title: {
+      caption: {
+        props: {
+          text: "File Upload",
+          fontSize: "C"
         }
       },
-      ...[
-        { Caption: { text: "Cancel" } },
-        { Caption: { text: "Attach file" } }
-      ]
-    }
+      x: {
+        props: { margin: "-V2 - - -" }
+      }
+    },
+    Paragraph: null
+  },
+  UploadLabel: {},
+  UploadFooter: {
+    props: { minWidth: "100%", margin: "-W - - -" },
+    IconText: { props: { padding: "- Z" } },
+    Buttons: { props: { gap: "Z2" } }
+  }
+};
+var UploadModal2 = {
+  extend: UploadModal,
+  Header: {},
+  UploadLabel: null,
+  UploadLabel2: {
+    width: "100%",
+    Icon: {},
+    TitleParagraph: {},
+    UploadButtonWithBackground: { theme: "tertiary" }
   }
 };
 var UploadModal3 = {
   extend: UploadModal2,
   Header: {},
-  Content: { extend: UploadLabel2 },
-  Footer: {
+  UploadLabel2: {},
+  UploadFooter: {
+    props: { padding: "0" },
     IconText: null,
-    CancelConfirmButtons: {
+    Buttons: {
       props: {
         minWidth: "100%",
         childProps: { flex: "1" }
@@ -16868,193 +16913,220 @@ var UploadModal3 = {
 var UploadModal4 = {
   extend: UploadModal3,
   Header: {},
-  Content: {},
+  UploadLabel2: {},
   UploadingProcess4: {
-    minWidth: "100%",
-    background: "black",
-    ProgressCircleWithUnitValue: {
-      boxSize: "C+A C+A"
-    }
+    minWidth: "100%"
   },
-  Footer: {}
+  UploadFooter: {}
 };
 
-// ../../uikit/domql/Upload/UploadingProcess.js
+// ../uikit/Upload/UploadingProcess.js
 var UploadingProcess = {
-  extend: Flex,
+  extend: Dialog,
   props: {
-    background: "#141416",
-    boxSize: "fit-content fit-content",
-    padding: "Z A Z Z",
-    round: "Z+X",
-    gap: "Z"
+    boxSize: "fit-content",
+    padding: "Y2 Z2 Y2 Y2",
+    round: "A",
+    gap: "Y2",
+    position: "relative"
   },
   Image: { extend: UploadImage },
   Flex: {
+    extend: TitleParagraph,
     props: {
-      flex: "1",
-      flow: "column",
-      boxSizing: "border-box",
-      justifyContent: "center",
-      gap: "Y2"
+      justifyContent: "space-between",
+      padding: "W2 -"
     },
-    TitleParagraph: {
-      extend: TitleParagraphWithButton,
-      props: { gap: "Y2" },
-      Title: { h5: { text: "Image.jpg" } },
-      Paragraph: {
-        p: null,
-        DoubleUnitValue: {}
+    Title: {
+      props: { justifyContent: "space-between" },
+      caption: {
+        props: {
+          text: "Image.jpg",
+          fontSize: "Z2"
+        }
+      },
+      x: {
+        extend: Button,
+        props: {
+          icon: "x",
+          fontSize: "B",
+          boxSize: "fit-content",
+          padding: "0",
+          theme: "transparent",
+          margin: "- -V1 - -"
+        }
       }
     },
-    ProgressLine: {}
+    Paragraph: {
+      props: {
+        flow: "column",
+        gap: "Y2"
+      },
+      DoubleUnitValue: { fontSize: "Y" },
+      ProgressLine: {}
+    }
   }
 };
 var UploadedProcess = {
   extend: UploadingProcess,
   Image: {},
   Flex: {
-    TitleParagraph: {
-      Title: {},
-      Paragraph: {
-        p: { props: { text: "Done" } },
-        DoubleUnitValue: null
+    Title: {},
+    Paragraph: {
+      DoubleUnitValue: null,
+      span: {
+        props: {
+          text: "Done",
+          fontSize: "Y",
+          lineHeight: "1em",
+          color: "gray2",
+          display: "block"
+        }
+      },
+      ProgressLine: {
+        value: "1",
+        style: { "&::-webkit-progress-value": { background: "#04F214" } }
       }
-    },
-    ProgressLine: {
-      value: "1",
-      style: { "&::-webkit-progress-value": { background: "#04F214" } }
     }
   }
 };
 var UploadingProcess2 = {
   extend: UploadingProcess,
   props: {
-    border: "1px solid #3F3F43"
+    border: "solid, gray3",
+    borderWidth: "1px"
+  },
+  Image: {
+    props: { padding: "Z2" },
+    Icon: { fontSize: "D" }
   },
-  Image: { props: { padding: "Z+Y" } },
   Flex: {
-    props: {
-      justifyContent: "center",
-      padding: "0 0 0 0",
-      gap: "Y2",
-      position: "relative"
-    },
-    TitleParagraph: {
-      Title: {},
-      Paragraph: null
-    },
-    ProgressLine: null,
-    ProgressLineWithUnitValue: {}
+    Title: { caption: { props: { fontSize: "A1" } } },
+    Paragraph: {
+      ProgressLineWithUnitValue: {
+        ProgressLine: {},
+        UnitValue: { fontSize: "Y1" }
+      },
+      DoubleUnitValue: null,
+      ProgressLine: null
+    }
   }
 };
 var UploadedProcess2 = {
   extend: UploadingProcess2,
   Image: {},
   Flex: {
-    TitleParagraph: {},
-    ProgressLineWithUnitValue: {
-      ProgressLine: {
-        value: 1,
-        style: { "&::-webkit-progress-value": { background: "#04F214" } }
-      },
-      UnitValue: { Value: { text: "100" } }
+    props: { margin: "- - -V2 -" },
+    Title: {},
+    Paragraph: {
+      ProgressLineWithUnitValue: {
+        ProgressLine: {
+          value: 1,
+          style: { "&::-webkit-progress-value": { background: "#04F214" } }
+        },
+        UnitValue: { Value: { text: "100" } }
+      }
     }
   }
 };
 var UploadingProcess3 = {
   extend: UploadingProcess2,
   props: {
-    minWidth: "G+E"
+    minWidth: "G+C2",
+    gap: "Z"
   },
   Image: {},
   Flex: {
-    TitleParagraph: {
-      Title: {
-        h5: {},
-        Button: {
-          props: {
-            padding: "Y",
-            background: "#252527",
-            position: "absolute",
-            top: "50%",
-            right: "0",
-            transform: "translate(0%, -50%)"
-          }
-        }
+    props: {
+      padding: "0",
+      justifyContent: "center",
+      gap: "Z"
+    },
+    Title: {
+      caption: {
+        props: { fontSize: "Z2" }
       },
-      Paragraph: null
+      x: {
+        props: {
+          position: "absolute",
+          top: "50%",
+          right: "B+W1",
+          transform: "translate(50%, -50%)",
+          padding: "Y",
+          fontSize: "A1",
+          theme: "tertiary"
+        }
+      }
     },
-    ProgressLineWithUnitValue: null,
-    ProgressCircleWithSideUnitValue: {}
+    Paragraph: {
+      ProgressLineWithUnitValue: null,
+      ProgressCircleWithSideUnitValue: {}
+    }
   }
 };
 var UploadedProcess3 = {
   extend: UploadingProcess3,
   Image: {},
   Flex: {
-    TitleParagraph: {},
-    ProgressCircleWithSideUnitValue: {
-      ProgressCircle: {
-        Progress: {
-          value: 1,
-          style: { "&::-webkit-progress-value": { background: "#04F214" } }
+    Title: {},
+    Paragraph: {
+      ProgressCircleWithSideUnitValue: {
+        ProgressCircle: {
+          Progress: {
+            value: 1,
+            style: { "&::-webkit-progress-value": { background: "#04F214" } }
+          }
+        },
+        UnitValue: {
+          Value: { text: "Done" },
+          Unit: { display: "none" }
         }
-      },
-      UnitValue: {
-        Value: { text: "Done" },
-        Unit: { display: "none" }
       }
     }
   }
 };
 var UploadingProcess4 = {
-  extend: UploadingProcess,
+  extend: UploadingProcess3,
   props: {
-    minWidth: "G+E",
-    background: "transparent",
-    border: "1px solid #3F3F43",
-    gap: "A",
-    padding: "A",
-    round: "Z+X"
+    alignItems: "center",
+    padding: "Y2 Y2 Y2 Z",
+    gap: "Z1"
   },
   Image: null,
-  ProgressCircleWithUnitValue: {},
+  ProgressCircleWithIcon: {
+    boxSize: "C+X1",
+    Icon: { fontSize: "C" }
+  },
   Flex: {
     props: {
-      justifyContent: "center",
-      position: "relative"
+      gap: "Y1",
+      padding: "W2 - - -"
     },
-    TitleParagraph: {
-      props: { justifyContent: "center" },
-      Title: {
-        h5: {},
-        Button: {
-          props: {
-            position: "absolute",
-            top: "50%",
-            right: "0",
-            transform: "translate(0%, -50%)",
-            padding: "0"
-          }
-        }
+    Title: {},
+    Paragraph: {
+      tag: "p",
+      props: {
+        text: "Uploading . . .",
+        margin: "0",
+        padding: "0",
+        fontSize: "Y1",
+        color: "gray2"
       },
-      Paragraph: {
-        p: { text: "Uploading..." },
-        DoubleUnitValue: { display: "none" }
-      }
-    },
-    ProgressLine: null
+      ProgressCircleWithSideUnitValue: null
+    }
   }
 };
 var UploadedProcess4 = {
   extend: UploadingProcess4,
-  ProgressCircleWithUnitValue: null,
   ProgressCircleWithIcon: {
+    ":after": {
+      width: "calc(100% - 3px)",
+      height: "calc(100% - 3px)"
+    },
     Icon: {
       name: "check",
       color: "#04F214",
-      fontSize: "H"
+      fontSize: "E1"
     },
     Progress: {
       value: 1,
@@ -17064,126 +17136,117 @@ var UploadedProcess4 = {
     }
   },
   Flex: {
-    TitleParagraph: {
-      Title: {},
-      Paragraph: { p: { text: "Uploaded" } }
-    }
+    Title: {},
+    Paragraph: { text: "Uploaded" }
   }
 };
 
-// ../../uikit/domql/User/User.js
+// ../uikit/User/User.js
 var User = {
   extend: Flex,
   props: {
-    align: "center flex-start",
-    gap: "Z2"
+    boxSize: "fit-content",
+    theme: "dialog",
+    padding: "Z A Z Z",
+    round: "A",
+    gap: "Y1",
+    align: "center flex-start"
   },
-  AvatarIndicator: {
-    margin: "0 - - -"
+  Avatar: {
+    extend: AvatarIndicator,
+    Avatar: { props: { boxSize: "C+V" } }
   },
   Notes: {
     extend: TitleParagraph,
     props: {
-      gap: "Y2",
-      margin: "W - - -"
+      justifyContent: "center",
+      gap: "W2",
+      margin: "X2 - - -"
     },
     Title: {
-      h5: {
-        props: {
-          text: "Erin Schleifer",
-          fontWeight: "500",
-          fontSize: "A"
-        }
+      props: {
+        fontSize: "A1",
+        fontWeight: "500"
       }
     },
     Paragraph: {
-      p: {
-        props: {
-          text: "email@symbols.com",
-          fontSize: "Z1"
-        }
+      props: {
+        fontSize: "Z",
+        alignItems: "center"
       }
     }
   }
 };
 
-// ../../uikit/domql/User/ChatUser.js
+// ../uikit/User/ChatUser.js
 var ChatUser = {
   extend: User,
-  props: {
-    boxSize: "fit-content",
-    background: "gray3",
-    padding: "A",
-    round: "Z"
-  },
-  AvatarIndicator: { margin: "0" },
+  props: { gap: "Y2" },
+  Avatar: {},
   Notes: {
-    props: { flex: "1" },
+    props: { gap: "X1" },
     Title: {
-      props: {
-        align: "center space-between",
-        minWidth: "100%"
-      },
-      h5: {},
+      props: { align: "center space-between" },
+      caption: { props: { text: "Maria Kenter" } },
       time: {
         extend: UnitValue,
         props: {
-          gap: "X1"
+          fontSize: "X1",
+          gap: "X2"
         },
-        Value: { text: "2:20" },
-        Unit: { text: "AM" }
+        Unit: { props: { text: "2:22" } },
+        Value: { props: { text: "AM" } }
       }
     },
     Paragraph: {
-      props: {
-        align: "center space-between",
-        gap: "C2"
-      },
+      props: { gap: "C1" },
       p: {
+        extend: Flex,
         props: {
           text: "Hey team, I\u2019ve finished the requirements document",
-          maxWidth: "F+B1",
+          maxWidth: "F1",
           overflow: "hidden",
-          whiteSpace: "nowrap",
-          fontSize: "Z"
+          whiteSpace: "nowrap"
         }
       },
-      CountIndicator: {
-        fontSize: "Y2"
+      notification: {
+        extend: CountIndicator,
+        props: { fontSize: "X2" }
       }
     }
   }
 };
 
-// ../../uikit/domql/User/UserButtonSet.js
+// ../uikit/User/UserButtonSet.js
 var UserButtonSet = {
   extend: Flex,
   props: {
-    gap: "E2",
-    background: "gray",
     boxSize: "fit-content",
-    padding: "A",
-    round: "Z2"
+    theme: "dialog",
+    padding: "Z1 Z1 Z Z",
+    round: "A",
+    alignItems: "center",
+    gap: "E"
   },
   User: {
-    AvatarIndicator: { fontSize: "A2" },
+    padding: "0",
+    gap: "Y2",
+    Avatar: { fontSize: "A1" },
     Notes: {
+      margin: "W - - -",
+      gap: "X2",
       Title: {
-        h5: {
-          fontSize: "C",
-          fontWeight: "700"
-        }
+        text: "Group",
+        fontSize: "C1"
       },
       Paragraph: {
-        p: {
-          text: "Active now",
-          fontSize: "Y2"
-        }
+        text: "Active now",
+        fontSize: "Y",
+        padding: "- - - W1"
       }
     }
   },
   ButtonSet: {
-    extend: ButtonSet,
     props: { gap: "Y2" },
     ...[
       { props: { Icon: { name: "phone" } } },
@@ -17192,111 +17255,111 @@ var UserButtonSet = {
     ]
   }
 };
+var UserButtonSetCircle = {
+  extend: UserButtonSet,
+  User: {},
+  ButtonSet: {
+    childExtend: {
+      props: {
+        round: "100%"
+      }
+    }
+  }
+};
 
-// ../../uikit/domql/User/UserMessage.js
+// ../uikit/User/UserMessage.js
 var UserMessage = {
   extend: User,
-  props: { gap: "Z" },
-  AvatarIndicator: {
-    fontSize: "Z"
-  },
+  props: { gap: "Z", theme: "transparent" },
+  Avatar: {},
   Notes: {
     Title: null,
+    props: { margin: "0" },
     Paragraph: {
-      p: {
-        props: {
-          text: "Can you please review the latest design?",
-          fontSize: "Z",
-          padding: "Z2 A",
-          round: "Z2",
-          theme: "secondary"
-        }
+      props: {
+        text: "Can you please review the latest design?",
+        padding: "Z1 Z2",
+        round: "Z2",
+        theme: "dialog",
+        color: "white"
       }
     }
   }
 };
 
-// ../../uikit/domql/User/UserWithLabel.js
+// ../uikit/User/UserWithLabel.js
 var UserWithLabel = {
   extend: User,
-  AvatarIndicator: {
+  props: { gap: "Y2" },
+  Avatar: {
     StatusIndicator: null,
-    Avatar: { boxSize: "B" }
+    Avatar: { props: { boxSize: "B2+W" } }
   },
   Notes: {
-    props: { gap: "X" },
+    props: { margin: "V2 - - -" },
     Title: {
       props: {
-        justifyContent: "flex-start",
-        gap: "Y2"
-      },
-      h5: {
-        props: {
-          text: "ETHDOWN",
-          fontSize: "Z"
-        }
+        gap: "Y1",
+        fontSize: "Z2"
       },
-      Label: {}
+      caption: { props: { text: "ETHDOWN" } },
+      label: { extend: Label }
     },
     Paragraph: {
-      p: {
-        props: {
-          fontSize: "Y2",
-          text: "Short ETH with up to 4x Leverage"
-        }
+      tag: "p",
+      props: {
+        text: "Short ETH with up to 4x Leverage",
+        fontSize: "Y1"
       }
     }
   }
 };
 
-// ../../uikit/domql/User/UserWithButton.js
+// ../uikit/User/UserWithButton.js
 var UserWithButton = {
-  extend: User,
+  extend: Flex,
   props: {
-    background: "gray",
     boxSize: "fit-content",
-    padding: "X X2",
-    round: "Z",
+    theme: "dialog",
     border: "1px, solid, gray3",
-    gap: "Y2"
+    padding: "Y Z2 Y Y",
+    alignItems: "center",
+    gap: "B",
+    round: "A"
   },
-  AvatarIndicator: {
+  User: {
+    extend: User,
+    props: { padding: "0" },
     Avatar: {
-      round: "Y"
+      Avatar: {
+        props: { fontSize: "Z2", round: "Z1" }
+      },
+      StatusIndicator: null
     },
-    StatusIndicator: null
-  },
-  Notes: {
-    Title: {
-      h5: {
+    Notes: {
+      props: { gap: "X" },
+      Title: {
         props: {
           text: "Wallet ID",
-          fontSize: "Y2"
+          fontSize: "Y1"
         }
-      }
-    },
-    Paragraph: {
-      p: {
+      },
+      Paragraph: {
         props: {
           text: "0xfb59...d862",
-          fontSize: "Y2"
+          fontSize: "Y1"
         }
       }
     }
   },
   IconCommonButton: {
-    round: "Y1",
     background: "transparent",
     theme: null,
     color: "currentColor",
     opacity: "0.5",
     transition: "A defaultBezier",
     transitionProperty: "opacity, background",
-    ":hover": {
-      opacity: "1",
-      theme: "secondary"
-    },
-    margin: "- - - Z2",
+    padding: "0",
     Icon: {
       name: "copy",
       fontSize: "C"
@@ -17304,51 +17367,104 @@ var UserWithButton = {
   }
 };
 
-// ../../uikit/domql/Table/index.js
+// ../uikit/Table/index.js
 var Table = {};
 
-// ../../uikit/domql/Card/BalanceCard.js
-var BalanceCard = {
-  extend: TitleParagraphWithButton,
+// ../uikit/Card/Card.js
+var Card = {
+  extend: Flex,
   props: {
     boxSize: "fit-content",
     padding: "Z2 A",
-    round: "Z",
     gap: "Z1",
-    background: "linear-gradient(to right, #0474F2, #003067)"
+    round: "Z2",
+    theme: "card"
+  }
+};
+
+// ../uikit/Card/BalanceCard.js
+var BalanceCard = {
+  extend: [Card, TitleParagraph],
+  props: {
+    theme: "card .secondary",
+    gap: "Z2",
+    padding: "A A"
   },
   Title: {
-    props: { gap: "E1" },
-    h5: { props: { text: "Total crypto assets" } },
-    Button: { props: { Icon: { name: "arrowUpRight" } } }
+    props: {
+      justifyContent: "space-between",
+      gap: "E"
+    },
+    caption: {
+      props: {
+        text: "Total crypto assets",
+        fontSize: "Z2",
+        fontWeight: "500"
+      }
+    },
+    arrowBtn: {
+      extend: Button,
+      props: {
+        padding: "0",
+        theme: "transparent",
+        fontSize: "D",
+        color: "gray4",
+        margin: "-X -W2 - -",
+        Icon: { name: "arrowUpRight" }
+      }
+    }
   },
   Paragraph: {
     props: {
       flow: "column",
-      gap: "Z1"
+      align: "flex-start flex-start",
+      gap: "A"
     },
     UnitValueWithLabel: {
       UnitValue: {},
-      UnitValue2: {
-        background: "black .35",
-        color: "white"
-      }
+      UnitValue2: { theme: "card .secondary .child" }
     },
     UnitValue: {
-      color: "gray4",
       flow: "row-reverse",
-      justifyContent: "flex-end",
-      gap: "X",
-      fontSize: "Z",
+      color: "white .75",
       fontWeight: "400",
-      Unit: { text: "Last update:" },
-      Value: { text: "an hour ago" }
-    },
-    p: null
-  }
-};
-
-// ../../uikit/domql/Card/StepCard.js
+      fontSize: "Z",
+      gap: "Y",
+      Value: { text: "an hour ago" },
+      Unit: { text: "Last update:" }
+    }
+  }
+  // Title: {
+  //   props: { gap: 'E1' },
+  //   h5: { props: { text: 'Total crypto assets' } },
+  //   Button: { props: { Icon: { name: 'arrowUpRight' } } }
+  // },
+  // Paragraph: {
+  //   props: {
+  //     flow: 'column',
+  //     gap: 'Z1'
+  //   },
+  //   UnitValueWithLabel: {
+  //     UnitValue: {},
+  //     UnitValue2: {
+  //       theme: 'card .secondary .child'
+  //     }
+  //   },
+  //   UnitValue: {
+  //     color: 'gray4',
+  //     flow: 'row-reverse',
+  //     justifyContent: 'flex-end',
+  //     gap: 'X',
+  //     fontSize: 'Z',
+  //     fontWeight: '400',
+  //     Unit: { text: 'Last update:' },
+  //     Value: { text: 'an hour ago' }
+  //   },
+  //   p: null
+  // }
+};
+
+// ../uikit/Card/StepCard.js
 var StepCard = {
   props: {
     boxSize: "fit-content",
@@ -17376,113 +17492,125 @@ var StepCard = {
   }
 };
 
-// ../../uikit/domql/Card/ConvertCard.js
+// ../uikit/Card/ConvertCard.js
 var ConvertCard = {
-  extend: TitleParagraph,
+  extend: [Card, TitleParagraph],
   props: {
-    boxSize: "fit-content",
-    gap: "A",
-    background: "gray",
-    padding: "Z2 A",
-    round: "Z"
+    minWidth: "G1",
+    theme: "dialog",
+    round: "Z2",
+    padding: "A Z2+V Y1 Z2+V",
+    gap: "A1"
   },
   Title: {
-    props: { gap: "F" },
-    h5: {
+    props: {
+      justifyContent: "space-between",
+      fontWeight: "400",
+      color: "gray4"
+    },
+    caption: {
       props: {
-        text: "From",
-        fontSize: "Z1",
-        color: "gray4",
-        fontWeight: "400"
+        text: "From"
       }
     },
-    UnitValueWithTitle: {}
+    balance: {
+      extend: UnitValueWithTitle,
+      props: {
+        // border: '1px sol'
+      }
+    }
   },
   Paragraph: {
-    p: null,
-    UnitValue: {
+    props: {
+      align: "center space-between",
+      margin: "0",
+      padding: "0"
+    },
+    value: {
       props: {
-        justifyContent: "space-between",
-        flex: "1"
-      },
-      Value: {
-        props: {
-          text: "0.00",
-          fontSize: "F"
-        }
-      },
-      Unit: null,
-      DropDownButtonWithAvatar: {}
-    }
-  }
-};
-
-// ../../uikit/domql/Card/CurrencyConvertCard.js
+        text: "0.00",
+        fontSize: "E2"
+      }
+    },
+    dropDownButton: {
+      extend: DropDownButtonWithAvatar,
+      props: {
+        theme: "tertiary",
+        margin: "- -V"
+      }
+    }
+  }
+  // props: {
+  //   boxSize: 'fit-content',
+  //   gap: 'A',
+  //   padding: 'Z2'
+  // },
+  // Title: {
+  //   props: { gap: 'F' },
+  //   caption: {
+  //     props: {
+  //       text: 'From',
+  //       fontSize: 'Z1',
+  //       fontWeight: '400'
+  //     }
+  //   },
+  //   UnitValueWithTitle: { props: { fontWeight: '400' } }
+  // },
+  // Paragraph: {
+  //   props: { align: 'center space-between' },
+  //   Value: {
+  //     props: {
+  //       text: '0.00',
+  //       fontSize: 'E2'
+  //     }
+  //   },
+  //   DropDownButtonWithAvatar: { theme: 'card .child' }
+  // }
+};
+
+// ../uikit/Card/CurrencyConvertCard.js
 var CurrencyConvert = {
-  extend: Modal,
+  extend: Flex,
   props: {
     boxSize: "fit-content",
-    minWidth: "fit-content",
-    gap: "A",
-    padding: "A"
+    gap: "Z",
+    padding: "Z A A A",
+    flow: "column",
+    theme: "dialog",
+    round: "A1"
   },
-  Header: {
-    Title: {
-      h5: {
-        props: {
-          text: "Convert",
-          fontSize: "Z1"
-        }
-      },
-      Button: null
-    },
-    Paragraph: null
+  Title: {
+    props: {
+      text: "convert",
+      textTransform: "capitalize",
+      fontSize: "A2",
+      padding: "- W",
+      fontWeight: "500"
+    }
   },
-  Content: {
+  Cards: {
+    extend: Flex,
     props: {
-      margin: "- -X2",
       flow: "column",
-      gap: "Z"
+      gap: "A"
     },
     childExtend: {
       extend: ConvertCard,
       props: {
-        theme: "dialog @dark .helper"
+        theme: "tertiary",
+        Paragraph: {
+          dropDownButton: { theme: "secondary" }
+        }
       }
     },
     ...[{}, {}]
   },
-  Footer: {
-    props: {
-      margin: "- -X2 -X2"
-    },
-    CommonButton: {
-      extend: {
-        extend: "Button",
-        props: {
-          theme: "primary",
-          boxSize: "fit-content",
-          padding: "A A2",
-          round: "Z2",
-          gap: "Y2",
-          position: "relative"
-        },
-        Icon: {
-          props: { fontSize: "C" }
-        },
-        Caption: {
-          props: {
-            text: "Button",
-            line_height: "1em"
-          }
-        }
-      },
-      props: {
-        flex: "1",
-        padding: "Z1 -",
-        round: "Z",
-        Caption: { text: "Convert", fontWeight: "500" }
-      }
+  CommonButton: {
+    minWidth: "100%",
+    margin: "Z - - -",
+    caption: {
+      text: "convert",
+      textTransform: "capitalize"
     }
   }
 };
@@ -17697,7 +17825,8 @@ var DESIGN_SYSTEM_OPTIONS = {
   useIconSprite: true,
   useSvgSprite: true,
   useDocumentTheme: true,
-  useFontImport: true
+  useFontImport: true,
+  useDefaultConfig: true
 };
 var CREATE_OPTIONS = {
   defaultConfig: true,
@@ -17713,8 +17842,8 @@ var CREATE_OPTIONS = {
 };
 var options_default = CREATE_OPTIONS;
 
-// ../../uikit/icons/default-icons/index.js
-var default_icons_default = {
+// ../icons/default/index.js
+var default_default = {
   symbols: require_logo(),
   arrowDownCircle: require_arrow_down_circle(),
   arrowDownLeft: require_arrow_down_left(),
@@ -17779,10 +17908,14 @@ var COLOR = {
   gray4: "#BDBDC1"
 };
 var GRADIENT = {
-  "gradient-blue": `linear-gradient(to right,
+  "gradient-blue-light": `linear-gradient(to right,
     rgba(4, 116, 242, 1),
     rgba(0, 48, 103, 1)
   )`,
+  "gradient-blue-dark": `linear-gradient(to right,
+    #0474F2,
+    #003067
+  )`,
   "gradient-dark": `linear-gradient(0deg,
     rgba(0,0,0,0.06) 0%,
     rgba(0,0,0,0.07) 100%
@@ -17906,7 +18039,9 @@ var PRIORITIES = {
         background: "gradient-dark-active"
       }
     }
-  },
+  }
+};
+var STATES = {
   alert: {
     "@dark": {
       color: "white",
@@ -17927,6 +18062,44 @@ var PRIORITIES = {
 };
 var UI = {
   field: "--tertiary",
+  label: {
+    "@dark": {
+      color: "white",
+      background: "gray .92 +8"
+    },
+    "@light": {
+      background: "gray .1"
+    },
+    ".light": {
+      color: "white",
+      background: "gray3"
+    },
+    ".dark": {
+      color: "white",
+      background: "black .35"
+    }
+  },
+  card: {
+    "@dark": {
+      color: "white",
+      background: "gray .92 +8"
+    },
+    "@light": {
+      background: "gray .1"
+    },
+    ".child": {
+      color: "white",
+      background: "gray3"
+    },
+    ".secondary": {
+      color: "white",
+      background: "gradient-blue-dark",
+      ".child": {
+        color: "white",
+        background: "black .35"
+      }
+    }
+  },
   dialog: {
     "@dark": {
       color: "white",
@@ -17954,6 +18127,7 @@ var THEME = {
     }
   },
   ...PRIORITIES,
+  ...STATES,
   ...UI,
   none: {
     color: "none",
@@ -18001,7 +18175,7 @@ var DEFAULT_CONFIG = {
   FONT,
   FONT_FAMILY,
   TIMING: {},
-  ICONS: default_icons_default,
+  ICONS: default_default,
   MEDIA: {
     tv: "(min-width: 2780px)",
     screenL: "(max-width: 1920px)",
@@ -18033,7 +18207,8 @@ var initEmotion = (key, options = DESIGN_SYSTEM_OPTIONS) => {
   if (!initOptions.emotion)
     initOptions.emotion = emotion;
   const registry = options.registry || transformDOMQLEmotion(initOptions.emotion, options);
-  const designSystem = options.designSystem || (options.defaultConfig ? (0, import_utils20.deepClone)(src_default) : {});
+  const defaultDesignSystem = (0, import_utils20.deepClone)(src_default);
+  const designSystem = options.useDefaultConfig ? (0, import_utils20.deepMerge)(options.designSystem, defaultDesignSystem) : options.designSystem;
   const scratchSystem2 = init(designSystem, {
     key,
     emotion: emotion2,
@@ -21507,7 +21682,7 @@ var DevFocus = {
         if ((0, import_utils21.isObject)(components)) {
           const { Content, ...rest } = components;
           for (const key in rest) {
-            if (domql_exports[key])
+            if (uikit_exports[key])
               continue;
             if (!rest[key].__ref)
               rest[key].__ref = {};
@@ -21746,7 +21921,7 @@ var create = async (App, options = options_default, optionsExternalFile) => {
   if (App && App.state)
     (0, import_utils23.deepMerge)(state, App.state);
   const pages = options.pages || {};
-  const components = options.components ? { ...domql_exports, ...options.components } : domql_exports;
+  const components = options.components ? { ...uikit_exports, ...options.components } : uikit_exports;
   const designSystem = scratcDesignhSystem || {};
   const snippets = { ...utilImports_exports, ...import_scratch2.scratchUtils, ...options.snippets || {} };
   const define = options.define || defaultDefine;
@@ -21814,7 +21989,7 @@ var createSync = (App, options = options_default, optionsExternalFile) => {
   else
     state = {};
   const pages = options.pages || {};
-  const components = options.components ? { ...domql_exports, ...options.components } : domql_exports;
+  const components = options.components ? { ...uikit_exports, ...options.components } : uikit_exports;
   const designSystem = scratcDesignhSystem || {};
   const snippets = { ...utilImports_exports, ...import_scratch2.scratchUtils, ...options.snippets || {} };
   const define = options.define || defaultDefine;