@symbo.ls/uikit 2.11.212 → 2.11.215

package/dist/index.cjs.js

@@ -99,7 +99,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_key2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/key.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/key.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -136,7 +136,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_env2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/env.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/env.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -172,7 +172,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_globals2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/globals.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -206,7 +206,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_node2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/node.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/node.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -241,7 +241,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_types2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/types.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/types.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -326,7 +326,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_array2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/array.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/array.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -423,7 +423,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_string2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/string.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/string.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -481,7 +481,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_object2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/object.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/object.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -931,7 +931,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_function2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/function.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/function.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -1004,7 +1004,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_log2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/log.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/log.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -1043,7 +1043,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_cookie2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/cookie.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -1097,7 +1097,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_tags2 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/tags.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -1260,7 +1260,7 @@ var require_cjs = __commonJS({
       }
     });
     var require_cjs22 = __commonJS2({
-      "../../../domql/packages/utils/dist/cjs/index.js"(exports2, module22) {
+      "../../node_modules/@domql/utils/dist/cjs/index.js"(exports2, module22) {
         "use strict";
         var __defProp22 = Object.defineProperty;
         var __getOwnPropDesc22 = Object.getOwnPropertyDescriptor;
@@ -1442,7 +1442,7 @@ var require_cjs = __commonJS({
       setVariables: () => setVariables
     });
     var import_globals = __toESM2(require_cjs7(), 1);
-    var import_utils13 = __toESM2(require_cjs22(), 1);
+    var import_utils14 = __toESM2(require_cjs22(), 1);
     var ENV = "development";
     var colorStringToRgbaArray = (color) => {
       if (color === "")
@@ -1570,9 +1570,9 @@ var require_cjs = __commonJS({
       return `rgba(${arr})`;
     };
     var getRgbTone = (rgb, tone) => {
-      if ((0, import_utils13.isString)(rgb))
+      if ((0, import_utils14.isString)(rgb))
         rgb = rgb.split(", ").map((v) => parseFloat(v));
-      if ((0, import_utils13.isNumber)(tone))
+      if ((0, import_utils14.isNumber)(tone))
         tone += "";
       const toHex = rgbArrayToHex(rgb);
       const abs2 = tone.slice(0, 1);
@@ -1963,19 +1963,21 @@ var require_cjs = __commonJS({
       const isNegative = letterVal.slice(0, 1) === "-" ? "-" : "";
       let absValue = isNegative ? letterVal.slice(1) : letterVal;
       let mediaName = "";
-      if (absValue.includes("-")) {
-        mediaName = "-" + absValue.split("-")[1].toLowerCase();
-        absValue = absValue.split("-")[0];
+      if (absValue.includes("_")) {
+        mediaName = "_" + absValue.split("_")[1].toLowerCase();
+        absValue = absValue.split("_")[0];
       }
-      const varValue = (v) => `var(${prefix2}${v}${mediaName})`;
+      const varValue = (v) => startsWithDashOrLetterRegex.test(v) ? `var(${prefix2}${v}${mediaName})` : v;
       if (absValue.includes("+")) {
-        const args = absValue.split("+");
-        const [first, second] = args;
+        const [first, second] = absValue.split("+");
         const joint = `${varValue(first)} + ${varValue(second)}`;
         return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
+      } else if (absValue.includes("*")) {
+        const [first, second] = absValue.split("*");
+        const joint = `${varValue(first)} * ${varValue(second)}`;
+        return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
       } else if (absValue.includes("-")) {
-        const args = absValue.split("-");
-        const [first, second] = args;
+        const [first, second] = absValue.split("-");
         const joint = `${varValue(first)} - ${varValue(second)}`;
         return isNegative ? `calc((${joint}) * -1)` : `calc(${joint})`;
       }
@@ -2039,14 +2041,14 @@ var require_cjs = __commonJS({
           let underMediaQuery = CSS_VARS2[`@media ${query}`];
           if (!underMediaQuery)
             underMediaQuery = CSS_VARS2[`@media ${query}`] = {};
-          underMediaQuery[item.variable] = `var(${item.variable + "-" + mediaName})`;
-          CSS_VARS2[item.variable + "-" + mediaName] = value;
+          underMediaQuery[item.variable] = `var(${item.variable + "_" + mediaName})`;
+          CSS_VARS2[item.variable + "_" + mediaName] = value;
         } else {
           if (options.useDefault === false) {
             CSS_VARS2[item.variable] = value;
           } else {
-            CSS_VARS2[item.variable + "-default"] = value;
-            CSS_VARS2[item.variable] = `var(${item.variable + "-default"})`;
+            CSS_VARS2[item.variable + "_default"] = value;
+            CSS_VARS2[item.variable] = `var(${item.variable + "_default"})`;
           }
         }
       }
@@ -3032,9 +3034,9 @@ var require_cjs = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/key.js
+// ../../node_modules/@domql/utils/dist/cjs/key.js
 var require_key = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/key.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/key.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3071,9 +3073,9 @@ var require_key = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/env.js
+// ../../node_modules/@domql/utils/dist/cjs/env.js
 var require_env = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/env.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/env.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3109,9 +3111,9 @@ var require_env = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/globals.js
+// ../../node_modules/@domql/utils/dist/cjs/globals.js
 var require_globals = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/globals.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/globals.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3145,9 +3147,9 @@ var require_globals = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/node.js
+// ../../node_modules/@domql/utils/dist/cjs/node.js
 var require_node = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/node.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/node.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3182,9 +3184,9 @@ var require_node = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/types.js
+// ../../node_modules/@domql/utils/dist/cjs/types.js
 var require_types = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/types.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/types.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3209,7 +3211,7 @@ var require_types = __commonJS({
       is: () => is,
       isArray: () => isArray3,
       isBoolean: () => isBoolean,
-      isDefined: () => isDefined,
+      isDefined: () => isDefined2,
       isFunction: () => isFunction3,
       isNot: () => isNot2,
       isNull: () => isNull,
@@ -3237,7 +3239,7 @@ var require_types = __commonJS({
         return false;
       return typeof arg === "object";
     };
-    var isDefined = (arg) => {
+    var isDefined2 = (arg) => {
       return isObject4(arg) || isObjectLike2(arg) || isString6(arg) || isNumber(arg) || isFunction3(arg) || isArray3(arg) || isObjectLike2(arg) || isBoolean(arg) || isNull(arg);
     };
     var isUndefined2 = (arg) => {
@@ -3254,7 +3256,7 @@ var require_types = __commonJS({
       objectLike: isObjectLike2,
       node: import_node.isNode,
       htmlElement: import_node.isHtmlElement,
-      defined: isDefined
+      defined: isDefined2
     };
     var is = (arg) => {
       return (...args) => {
@@ -3269,9 +3271,9 @@ var require_types = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/array.js
+// ../../node_modules/@domql/utils/dist/cjs/array.js
 var require_array = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/array.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/array.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3368,9 +3370,9 @@ var require_array = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/string.js
+// ../../node_modules/@domql/utils/dist/cjs/string.js
 var require_string = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/string.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/string.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3428,9 +3430,9 @@ var require_string = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/object.js
+// ../../node_modules/@domql/utils/dist/cjs/object.js
 var require_object = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/object.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/object.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3880,9 +3882,9 @@ var require_object = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/function.js
+// ../../node_modules/@domql/utils/dist/cjs/function.js
 var require_function = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/function.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/function.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3955,9 +3957,9 @@ var require_function = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/log.js
+// ../../node_modules/@domql/utils/dist/cjs/log.js
 var require_log = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/log.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/log.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -3996,9 +3998,9 @@ var require_log = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/cookie.js
+// ../../node_modules/@domql/utils/dist/cjs/cookie.js
 var require_cookie = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/cookie.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/cookie.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4052,9 +4054,9 @@ var require_cookie = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/tags.js
+// ../../node_modules/@domql/utils/dist/cjs/tags.js
 var require_tags = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/tags.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/tags.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4217,9 +4219,9 @@ var require_tags = __commonJS({
   }
 });
 
-// ../../../domql/packages/utils/dist/cjs/index.js
+// ../../node_modules/@domql/utils/dist/cjs/index.js
 var require_cjs2 = __commonJS({
-  "../../../domql/packages/utils/dist/cjs/index.js"(exports, module2) {
+  "../../node_modules/@domql/utils/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4252,9 +4254,9 @@ var require_cjs2 = __commonJS({
   }
 });
 
-// ../../../domql/packages/state/dist/cjs/ignore.js
+// ../../node_modules/@domql/state/dist/cjs/ignore.js
 var require_ignore = __commonJS({
-  "../../../domql/packages/state/dist/cjs/ignore.js"(exports, module2) {
+  "../../node_modules/@domql/state/dist/cjs/ignore.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4301,9 +4303,9 @@ var require_ignore = __commonJS({
   }
 });
 
-// ../../../domql/packages/event/dist/cjs/on.js
+// ../../node_modules/@domql/event/dist/cjs/on.js
 var require_on = __commonJS({
-  "../../../domql/packages/event/dist/cjs/on.js"(exports, module2) {
+  "../../node_modules/@domql/event/dist/cjs/on.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4331,12 +4333,12 @@ var require_on = __commonJS({
       triggerEventOnUpdate: () => triggerEventOnUpdate
     });
     module2.exports = __toCommonJS2(on_exports);
-    var import_utils13 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var applyEvent = (param, element, state, context, options) => {
       return param(element, state || element.state, context || element.context, options);
     };
     var triggerEventOn = (param, element, options) => {
-      if (element.on && (0, import_utils13.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils14.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEvent(element.on[param], element, state, context, options);
       }
@@ -4345,7 +4347,7 @@ var require_on = __commonJS({
       return param(updatedObj, element, state || element.state, context || element.context, options);
     };
     var triggerEventOnUpdate = (param, updatedObj, element, options) => {
-      if (element.on && (0, import_utils13.isFunction)(element.on[param])) {
+      if (element.on && (0, import_utils14.isFunction)(element.on[param])) {
         const { state, context } = element;
         return applyEventUpdate(element.on[param], updatedObj, element, state, context, options);
       }
@@ -4356,7 +4358,7 @@ var require_on = __commonJS({
         if (param === "init" || param === "beforeClassAssign" || param === "render" || param === "renderRouter" || param === "attachNode" || param === "stateInit" || param === "stateCreated" || param === "initStateUpdated" || param === "stateUpdated" || param === "initUpdate" || param === "update")
           continue;
         const appliedFunction = element.on[param];
-        if ((0, import_utils13.isFunction)(appliedFunction)) {
+        if ((0, import_utils14.isFunction)(appliedFunction)) {
           const { state, context } = element;
           node2.addEventListener(param, (event) => appliedFunction(event, element, state, context));
         }
@@ -4365,9 +4367,9 @@ var require_on = __commonJS({
   }
 });
 
-// ../../../domql/plugins/report/dist/cjs/index.js
+// ../../node_modules/@domql/report/dist/cjs/index.js
 var require_cjs3 = __commonJS({
-  "../../../domql/plugins/report/dist/cjs/index.js"(exports, module2) {
+  "../../node_modules/@domql/report/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4462,9 +4464,9 @@ ${element}` : ""
   }
 });
 
-// ../../../domql/packages/event/dist/cjs/can.js
+// ../../node_modules/@domql/event/dist/cjs/can.js
 var require_can = __commonJS({
-  "../../../domql/packages/event/dist/cjs/can.js"(exports, module2) {
+  "../../node_modules/@domql/event/dist/cjs/can.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4489,17 +4491,17 @@ var require_can = __commonJS({
     });
     module2.exports = __toCommonJS2(can_exports);
     var import_report = require_cjs3();
-    var import_utils13 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var canRender = (element) => {
       const tag = element.tag || "div";
-      return (0, import_utils13.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
+      return (0, import_utils14.isValidHtmlTag)(tag) || (0, import_report.report)("HTMLInvalidTag");
     };
   }
 });
 
-// ../../../domql/packages/event/dist/cjs/index.js
+// ../../node_modules/@domql/event/dist/cjs/index.js
 var require_cjs4 = __commonJS({
-  "../../../domql/packages/event/dist/cjs/index.js"(exports, module2) {
+  "../../node_modules/@domql/event/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4522,9 +4524,9 @@ var require_cjs4 = __commonJS({
   }
 });
 
-// ../../../domql/packages/state/dist/cjs/methods.js
+// ../../node_modules/@domql/state/dist/cjs/methods.js
 var require_methods = __commonJS({
-  "../../../domql/packages/state/dist/cjs/methods.js"(exports, module2) {
+  "../../node_modules/@domql/state/dist/cjs/methods.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4557,11 +4559,11 @@ var require_methods = __commonJS({
       toggle: () => toggle
     });
     module2.exports = __toCommonJS2(methods_exports);
-    var import_utils13 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var import_ignore = require_ignore();
     var parse2 = function() {
       const state = this;
-      if ((0, import_utils13.isObject)(state)) {
+      if ((0, import_utils14.isObject)(state)) {
         const obj = {};
         for (const param in state) {
           if (!import_ignore.IGNORE_STATE_PARAMS.includes(param)) {
@@ -4569,7 +4571,7 @@ var require_methods = __commonJS({
           }
         }
         return obj;
-      } else if ((0, import_utils13.isArray)(state)) {
+      } else if ((0, import_utils14.isArray)(state)) {
         return state.filter((item) => !import_ignore.IGNORE_STATE_PARAMS.includes(item));
       }
     };
@@ -4589,7 +4591,7 @@ var require_methods = __commonJS({
       const state = this;
       const element = state.__element;
       const stateKey = element.__ref.__state;
-      if ((0, import_utils13.isString)(stateKey)) {
+      if ((0, import_utils14.isString)(stateKey)) {
         element.parent.state.remove(stateKey, { isHoisted: true, ...options });
         return element.state;
       }
@@ -4624,10 +4626,10 @@ var require_methods = __commonJS({
     };
     var add = function(value, options = {}) {
       const state = this;
-      if ((0, import_utils13.isArray)(state)) {
+      if ((0, import_utils14.isArray)(state)) {
         state.push(value);
         state.update(state.parse(), { overwrite: "replace", ...options });
-      } else if ((0, import_utils13.isObject)(state)) {
+      } else if ((0, import_utils14.isObject)(state)) {
         const key = Object.keys(state).length;
         state.update({ [key]: value }, options);
       }
@@ -4638,10 +4640,10 @@ var require_methods = __commonJS({
     };
     var remove = function(key, options = {}) {
       const state = this;
-      if ((0, import_utils13.isArray)(state))
-        (0, import_utils13.removeFromArray)(state, key);
-      if ((0, import_utils13.isObject)(state))
-        (0, import_utils13.removeFromObject)(state, key);
+      if ((0, import_utils14.isArray)(state))
+        (0, import_utils14.removeFromArray)(state, key);
+      if ((0, import_utils14.isObject)(state))
+        (0, import_utils14.removeFromObject)(state, key);
       return state.update(state.parse(), { replace: true, ...options });
     };
     var set3 = function(value, options = {}) {
@@ -4650,7 +4652,7 @@ var require_methods = __commonJS({
     };
     var apply = function(func, options = {}) {
       const state = this;
-      if ((0, import_utils13.isFunction)(func)) {
+      if ((0, import_utils14.isFunction)(func)) {
         func(state);
         return state.update(state, { replace: true, ...options });
       }
@@ -4658,9 +4660,9 @@ var require_methods = __commonJS({
   }
 });
 
-// ../../../domql/packages/state/dist/cjs/inherit.js
+// ../../node_modules/@domql/state/dist/cjs/inherit.js
 var require_inherit = __commonJS({
-  "../../../domql/packages/state/dist/cjs/inherit.js"(exports, module2) {
+  "../../node_modules/@domql/state/dist/cjs/inherit.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4690,7 +4692,7 @@ var require_inherit = __commonJS({
       isState: () => isState2
     });
     module2.exports = __toCommonJS2(inherit_exports);
-    var import_utils13 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var import_ignore = require_ignore();
     var getParentStateInKey = (stateKey, parentState) => {
       if (!stateKey.includes("../"))
@@ -4742,11 +4744,11 @@ var require_inherit = __commonJS({
     var createInheritedState = (element, parent) => {
       const ref = element.__ref;
       const inheritedState = findInheritedState(element, parent);
-      if ((0, import_utils13.isUndefined)(inheritedState))
+      if ((0, import_utils14.isUndefined)(inheritedState))
         return element.state;
-      if ((0, import_utils13.is)(inheritedState)("object", "array")) {
-        return (0, import_utils13.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
-      } else if ((0, import_utils13.is)(inheritedState)("string", "number", "boolean")) {
+      if ((0, import_utils14.is)(inheritedState)("object", "array")) {
+        return (0, import_utils14.deepClone)(inheritedState, import_ignore.IGNORE_STATE_PARAMS);
+      } else if ((0, import_utils14.is)(inheritedState)("string", "number", "boolean")) {
         ref.__stateType = typeof inheritedState;
         return { value: inheritedState };
       }
@@ -4755,12 +4757,12 @@ var require_inherit = __commonJS({
     var checkIfInherits = (element) => {
       const ref = element.__ref;
       const stateKey = ref.__state;
-      if (stateKey && (0, import_utils13.is)(stateKey)("number", "string", "boolean"))
+      if (stateKey && (0, import_utils14.is)(stateKey)("number", "string", "boolean"))
         return true;
       return false;
     };
     var isState2 = function(state) {
-      if (!(0, import_utils13.isObjectLike)(state))
+      if (!(0, import_utils14.isObjectLike)(state))
         return false;
       return state.update && state.parse && state.clean && state.create && state.parent && state.destroy && state.rootUpdate && state.parentUpdate && state.toggle && state.add && state.apply && state.__element && state.__children;
     };
@@ -4780,9 +4782,9 @@ var require_inherit = __commonJS({
   }
 });
 
-// ../../../domql/packages/state/dist/cjs/updateState.js
+// ../../node_modules/@domql/state/dist/cjs/updateState.js
 var require_updateState = __commonJS({
-  "../../../domql/packages/state/dist/cjs/updateState.js"(exports, module2) {
+  "../../node_modules/@domql/state/dist/cjs/updateState.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4809,7 +4811,7 @@ var require_updateState = __commonJS({
     var import_report = require_cjs3();
     var import_event = require_cjs4();
     var import_ignore = require_ignore();
-    var import_utils13 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var import_inherit = require_inherit();
     var STATE_UPDATE_OPTIONS = {
       overwrite: true,
@@ -4823,7 +4825,7 @@ var require_updateState = __commonJS({
       const state = this;
       const element = state.__element;
       if (!options.updateByState)
-        (0, import_utils13.merge)(options, STATE_UPDATE_OPTIONS);
+        (0, import_utils14.merge)(options, STATE_UPDATE_OPTIONS);
       if (!state.__element)
         (0, import_report.report)("ElementOnStateIsNotDefined");
       if (options.preventInheritAtCurrentState === true) {
@@ -4853,10 +4855,10 @@ var require_updateState = __commonJS({
       const shallow = overwrite === "shallow";
       const merge22 = overwrite === "merge";
       if (merge22) {
-        (0, import_utils13.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
+        (0, import_utils14.deepMerge)(state, obj, import_ignore.IGNORE_STATE_PARAMS);
         return;
       }
-      const overwriteFunc = shallow ? import_utils13.overwriteShallow : import_utils13.overwriteDeep;
+      const overwriteFunc = shallow ? import_utils14.overwriteShallow : import_utils14.overwriteDeep;
       overwriteFunc(state, obj, import_ignore.IGNORE_STATE_PARAMS);
     };
     var hoistStateUpdate = (state, obj, options) => {
@@ -4920,9 +4922,9 @@ var require_updateState = __commonJS({
   }
 });
 
-// ../../../domql/packages/state/dist/cjs/create.js
+// ../../node_modules/@domql/state/dist/cjs/create.js
 var require_create = __commonJS({
-  "../../../domql/packages/state/dist/cjs/create.js"(exports, module2) {
+  "../../node_modules/@domql/state/dist/cjs/create.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -4948,7 +4950,7 @@ var require_create = __commonJS({
     });
     module2.exports = __toCommonJS2(create_exports);
     var import_event = require_cjs4();
-    var import_utils13 = require_cjs2();
+    var import_utils14 = require_cjs2();
     var import_ignore = require_ignore();
     var import_methods = require_methods();
     var import_updateState = require_updateState();
@@ -4962,13 +4964,13 @@ var require_create = __commonJS({
       if (objectizeState === false)
         return parent.state || {};
       else
-        element.state = (0, import_utils13.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
+        element.state = (0, import_utils14.deepClone)(objectizeState, import_ignore.IGNORE_STATE_PARAMS);
       const whatInitReturns = (0, import_event.triggerEventOn)("stateInit", element, options);
       if (whatInitReturns === false)
         return element.state;
       if ((0, import_inherit.checkIfInherits)(element)) {
         const inheritedState = (0, import_inherit.createInheritedState)(element, parent);
-        element.state = (0, import_utils13.isUndefined)(inheritedState) ? {} : inheritedState;
+        element.state = (0, import_utils14.isUndefined)(inheritedState) ? {} : inheritedState;
       }
       const dependentState = applyDependentState(element, element.state);
       if (dependentState)
@@ -4981,17 +4983,17 @@ var require_create = __commonJS({
       const { __ref: ref } = state;
       if (!ref)
         return;
-      const dependentState = (0, import_utils13.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
+      const dependentState = (0, import_utils14.deepClone)(ref, import_ignore.IGNORE_STATE_PARAMS);
       const newDepends = { [element.key]: dependentState };
-      ref.__depends = (0, import_utils13.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
+      ref.__depends = (0, import_utils14.isObject)(ref.__depends) ? { ...ref.__depends, ...newDepends } : newDepends;
       return dependentState;
     };
     var checkForTypes = (element) => {
       const { state, __ref: ref } = element;
-      if ((0, import_utils13.isFunction)(state)) {
+      if ((0, import_utils14.isFunction)(state)) {
         ref.__state = state;
-        return (0, import_utils13.exec)(state, element);
-      } else if ((0, import_utils13.is)(state)("string", "number")) {
+        return (0, import_utils14.exec)(state, element);
+      } else if ((0, import_utils14.is)(state)("string", "number")) {
         ref.__state = state;
         return {};
       } else if (state === true) {
@@ -5038,7 +5040,7 @@ var require_create = __commonJS({
         __children: {},
         __root: ref.__root ? ref.__root.state : state
       };
-      if ((0, import_utils13.isArray)(state)) {
+      if ((0, import_utils14.isArray)(state)) {
         addProtoToArray(state, proto);
       } else {
         Object.setPrototypeOf(state, proto);
@@ -5050,9 +5052,9 @@ var require_create = __commonJS({
   }
 });
 
-// ../../../domql/packages/state/dist/cjs/index.js
+// ../../node_modules/@domql/state/dist/cjs/index.js
 var require_cjs5 = __commonJS({
-  "../../../domql/packages/state/dist/cjs/index.js"(exports, module2) {
+  "../../node_modules/@domql/state/dist/cjs/index.js"(exports, module2) {
     "use strict";
     var __defProp2 = Object.defineProperty;
     var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
@@ -5108,8 +5110,8 @@ var require_cjs6 = __commonJS({
       router: () => router
     });
     module2.exports = __toCommonJS2(router_exports);
-    var import_utils13 = require_cjs2();
-    var getActiveRoute = (level = 0, route = import_utils13.window.location.pathname) => {
+    var import_utils14 = require_cjs2();
+    var getActiveRoute = (level = 0, route = import_utils14.window.location.pathname) => {
       const routeArray = route.split("/");
       const activeRoute = routeArray[level + 1];
       if (activeRoute)
@@ -5123,7 +5125,7 @@ var require_cjs6 = __commonJS({
       initialRender: false,
       scrollToTop: true,
       scrollToNode: false,
-      scrollNode: import_utils13.document && import_utils13.document.documentElement,
+      scrollNode: import_utils14.document && import_utils14.document.documentElement,
       scrollBody: false,
       useFragment: false,
       updateState: true,
@@ -5138,13 +5140,13 @@ var require_cjs6 = __commonJS({
       const route = getActiveRoute(options.level, pathname);
       const content = element.routes[route || "/"] || element.routes["/*"];
       const scrollNode = options.scrollToNode ? rootNode : options.scrollNode;
-      const hashChanged = hash2 && hash2 !== import_utils13.window.location.hash.slice(1);
+      const hashChanged = hash2 && hash2 !== import_utils14.window.location.hash.slice(1);
       const pathChanged = pathname !== lastPathname;
       lastPathname = pathname;
       if (!content)
         return;
       if (options.pushState) {
-        import_utils13.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
+        import_utils14.window.history.pushState(state, null, pathname + (hash2 ? `#${hash2}` : ""));
       }
       if (pathChanged || !hashChanged) {
         if (options.updateState) {
@@ -5170,7 +5172,7 @@ var require_cjs6 = __commonJS({
         });
       }
       if (hash2) {
-        const activeNode = import_utils13.document.getElementById(hash2);
+        const activeNode = import_utils14.document.getElementById(hash2);
         if (activeNode) {
           const top = activeNode.getBoundingClientRect().top + rootNode.scrollTop - options.scrollToOffset || 0;
           scrollNode.scrollTo({
@@ -5862,7 +5864,7 @@ var SHAPES = {
 var import_utils = __toESM(require_cjs2());
 var getSystemTheme = ({ context, state }) => {
   const rootState = state && state.__root;
-  return rootState ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
+  return rootState && rootState.globalTheme ? rootState.globalTheme : context.designSystem && context.designSystem.globalTheme;
 };
 var Theme = {
   deps: {
@@ -5960,6 +5962,9 @@ var Theme = {
     textShadow: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.textShadow) && {
       textShadow: deps.transformShadow(props4.textShadow)
     },
+    backdropFilter: ({ props: props4, deps }) => !(0, import_utils.isUndefined)(props4.backdropFilter) && {
+      backdropFilter: props4.backdropFilter
+    },
     opacity: ({ props: props4 }) => !(0, import_utils.isUndefined)(props4.opacity) && {
       opacity: props4.opacity
     },
@@ -6322,7 +6327,7 @@ var Collection = {
       const obj = {
         tag: "fragment",
         props: {
-          childProps: el.props.childProps
+          childProps: el.props && el.props.childProps
         }
       };
       for (const key in param) {
@@ -6351,7 +6356,7 @@ var Collection = {
       const obj = {
         tag: "fragment",
         props: {
-          childProps: el.props.childProps
+          childProps: el.props && el.props.childProps
         }
       };
       for (const key in param) {
@@ -8078,7 +8083,7 @@ var Icon = {
   props: ({ key, props: props4, parent, context, deps }) => {
     const { ICONS, useIconSprite, verbose } = context && context.designSystem;
     const { toCamelCase } = context && context.utils;
-    const iconName = props4.inheritedString || props4.name || props4.icon || key;
+    const iconName = props4.name || props4.icon || key;
     const camelCase = toCamelCase(deps.isString(iconName) ? iconName : key);
     const isArray3 = camelCase.split(/([a-z])([A-Z])/g);
     let activeIconName;
@@ -8121,8 +8126,11 @@ var IconText = {
     lineHeight: 1
   },
   Icon: {
-    props: ({ parent, props: props4 }) => ({ icon: parent.props.icon || props4.name || props4.icon }),
-    if: ({ parent, props: props4 }) => parent.props.icon || parent.props.Icon || props4.name || props4.icon
+    props: ({ parent, props: props4 }) => ({ icon: parent.props.icon }),
+    if: ({ parent, props: props4 }) => {
+      const doesExist = parent.props.icon || parent.props.Icon || props4.name || props4.icon;
+      return doesExist;
+    }
   },
   text: ({ props: props4 }) => props4.text,
   ".reversed": {
@@ -8160,11 +8168,14 @@ var StatusIndicator = {
 
 // Indicator/CheckIndicator.js
 var CheckIndicator = {
+  extend: Flex,
   props: {
+    align: "center center",
     padding: "X",
     boxSize: "fit-content fit-content",
     round: "100%",
     theme: "primary",
+    aspectRatio: "1 / 1",
     fontSize: "X"
   },
   Icon: {
@@ -8524,6 +8535,7 @@ var NumberInput = {
 
 // Input/Checkbox.js
 var Checkbox = {
+  extend: Focusable,
   tag: "label",
   props: {
     boxSize: "fit-content fit-content",
@@ -8531,28 +8543,32 @@ var Checkbox = {
     round: "Y"
   },
   Input: {
-    type: "checkbox",
-    display: "none",
-    ":checked + div": {
-      background: "#0474F2",
-      border: "1px solid transparent"
+    props: {
+      type: "checkbox",
+      display: "none",
+      ":checked + div": { theme: "primary" },
+      ":checked + div > svg": {
+        transform: "none",
+        opacity: "1"
+      }
     },
-    ":checked + div > svg": { opacity: "1" }
+    attr: { checked: ({ parent }) => parent.props.checked }
   },
   Flex: {
     props: {
       align: "center center",
       fontSize: "B1",
       padding: "V",
-      border: "1px solid #57575C",
+      theme: "tertiary .outline",
       round: "X2",
-      transition: "background .15s ease-in-out"
+      transition: "background A defaultBezier"
     },
     Icon: {
       props: {
         icon: "check",
         opacity: "0",
-        transition: "opacity .15s ease-in-out"
+        transform: "scale(0.9) rotate(-15deg)",
+        transition: "opacity B defaultBezier"
       }
     }
   }
@@ -8580,6 +8596,7 @@ var Radio = {
     ":checked + div:after": { opacity: "1" }
   },
   Flex: {
+    extend: Pseudo,
     props: {
       round: "100%",
       padding: "Y",
@@ -8923,7 +8940,7 @@ var SearchWithDropDownButton = {
 
 // Button/index.js
 var Button = {
-  extend: [FocusableComponent, IconText],
+  extend: [IconText, FocusableComponent],
   tag: "button",
   props: {
     fontSize: "A",
@@ -8978,7 +8995,7 @@ var CommonButton = {
   Caption: {
     props: {
       text: "Button",
-      line_height: "1em"
+      lineHeight: "1em"
     }
   }
 };
@@ -9257,26 +9274,37 @@ var Range = {
   tag: "input",
   attr: { type: "range" }
 };
-var listenProp = (el, prop, def) => {
-  const val = el.props && el.props[prop];
+var returnPropertyValue = (el, property, def) => {
+  const val = el.props && el.props[property];
   const r = (0, import_utils11.isFunction)(val) ? val(el, el.state) : val !== void 0 ? val : def !== void 0 ? def : 50;
   return r + "";
 };
 var RangeWithButtons = {
+  props: {},
   minus: {
     extend: SquareButton,
     props: { theme: "tertiary", icon: "minus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils11.isFunction)(el.props.onClick) && el.props.onClick(ev, el, s);
+        const parentProps = el.parent.props;
+        if ((0, import_utils11.isFunction)(parentProps.onDecrease)) {
+          parentProps.onDecrease(ev, el.parent, s);
+        } else {
+          const value = parseFloat(s.value);
+          const min = returnPropertyValue(el.parent, "min", 1);
+          const step = returnPropertyValue(el.parent, "step", 1);
+          if (value > min) {
+            s.update({ value: value - step });
+          }
+        }
       }
     }
   },
   value: {
-    style: { width: "4ch" },
+    props: { width: "4ch" },
     tag: "span",
     text: ({ state, parent }) => {
-      const unit = listenProp(parent.input, "unit", "");
+      const unit = returnPropertyValue(parent, "unit", "");
       return "" + (state.value || 50) + unit;
     }
   },
@@ -9284,13 +9312,27 @@ var RangeWithButtons = {
     extend: Range,
     attr: {
       value: (el, s) => parseFloat(el.state.value),
-      min: (el, s) => listenProp(el, "min", 0),
-      max: (el, s) => listenProp(el, "max", 100),
-      step: (el, s) => listenProp(el, "step", 1)
+      min: (el, s) => returnPropertyValue(el.parent, "min", 0),
+      max: (el, s) => returnPropertyValue(el.parent, "max", 100),
+      step: (el, s) => returnPropertyValue(el.parent, "step", 1)
     },
     on: {
-      input: (ev, el, s) => el.props && (0, import_utils11.isFunction)(el.props.onInput) && el.props.onInput(ev, el, el.state),
-      change: (ev, el, s) => el.props && (0, import_utils11.isFunction)(el.props.onChange) && el.props.onChange(ev, el, el.state)
+      input: (ev, el, s) => {
+        const parentProps = el.parent.props;
+        if ((0, import_utils11.isFunction)(parentProps.onInput)) {
+          parentProps.onInput(ev, el, s);
+        } else {
+          s.update({ value: parseFloat(el.node.value) });
+        }
+      },
+      change: (ev, el, s) => {
+        const parentProps = el.parent.props;
+        if ((0, import_utils11.isFunction)(parentProps.onChange)) {
+          parentProps.onChange(ev, el, s);
+        } else {
+          s.update({ value: parseFloat(el.node.value) });
+        }
+      }
     }
   },
   plus: {
@@ -9298,7 +9340,17 @@ var RangeWithButtons = {
     props: { theme: "tertiary", icon: "plus" },
     on: {
       click: (ev, el, s) => {
-        el.props && (0, import_utils11.isFunction)(el.props.onClick) && el.props.onClick(ev, el, el.state);
+        const parentProps = el.parent.props;
+        if ((0, import_utils11.isFunction)(parentProps.onIncrease)) {
+          parentProps.onIncrease(ev, el.parent, s);
+        } else {
+          const value = parseFloat(s.value);
+          const max = returnPropertyValue(el.parent, "max", 1);
+          const step = returnPropertyValue(el.parent, "step", 1);
+          if (value < max) {
+            s.update({ value: value + step });
+          }
+        }
       }
     }
   }
@@ -9355,7 +9407,7 @@ var RangeSlider = {
   tag: "input",
   attr: { type: "range" }
 };
-var listenProp2 = (el, prop, def) => {
+var listenProp = (el, prop, def) => {
   const val = el && el.props && el.props[prop];
   const r = ((0, import_utils12.isFunction)(val) ? val() : val) || (def !== void 0 ? def : 50);
   return r;
@@ -9380,18 +9432,18 @@ var Slider = {
     style: { width: "4ch" },
     tag: "span",
     text: (el, s) => {
-      const value = listenProp2(el.parent.input, "value");
-      const unit = listenProp2(el.parent.input, "unit", "");
+      const value = listenProp(el.parent.input, "value");
+      const unit = listenProp(el.parent.input, "unit", "");
       return "" + value + unit;
     }
   },
   range: {
     extend: RangeSlider,
     attr: {
-      value: (el, s) => listenProp2(el, "value", 50),
-      min: (el, s) => listenProp2(el, "min", 0),
-      max: (el, s) => listenProp2(el, "max", 100),
-      step: (el, s) => listenProp2(el, "step", 1)
+      value: (el, s) => listenProp(el, "value", 50),
+      min: (el, s) => listenProp(el, "min", 0),
+      max: (el, s) => listenProp(el, "max", 100),
+      step: (el, s) => listenProp(el, "step", 1)
     },
     on: {
       input: (ev, el, s) => el.props && (0, import_utils12.isFunction)(el.props.input) && el.props.input(ev, el, s),
@@ -9463,7 +9515,7 @@ var Avatar = {
     avatarType: "initials",
     borderRadius: "100%",
     boxSize: "C+X C+X",
-    src: `https://api.dicebear.com/7.x/${props4.avatarType || "initials"}/svg?seed=${props4.key || key}`
+    src: `https://api.dicebear.com/7.x/${props4.avatarType || "initials"}/svg?seed=${props4.key || key || "no-avatar"}`
   })
 };
 
@@ -9498,13 +9550,15 @@ var AvatarBundle = {
       }
     }
   },
-  childExtend: Avatar
+  childExtend: Avatar,
+  $setPropsCollection: ({ props: props4 }) => props4.options
 };
 
 // Avatar/AvatarChooser.js
 var AvatarChooser = {
   extend: Button,
   tag: "label",
+  state: { key: "am" },
   props: {
     round: "C",
     width: "fit-content",
@@ -9551,8 +9605,8 @@ var AvatarChooser = {
     },
     on: {
       change: (ev, { state }) => {
-        state.update({ key: ev.target.value });
         console.log(state.key);
+        state.update({ key: ev.target.value });
       }
     }
   },
@@ -9614,6 +9668,7 @@ var NotificationIndicator = {
 };
 
 // Tooltip/index.js
+var import_utils13 = __toESM(require_cjs2());
 var Tooltip = {
   extend: Flex,
   props: {
@@ -9632,20 +9687,24 @@ var Tooltip = {
   },
   attr: { tooltip: true },
   Title: {
-    props: {
+    if: ({ parent, props: props4 }) => (0, import_utils13.isDefined)(parent.props.title) || props4.text,
+    props: ({ parent }) => ({
+      width: "fit-content",
       fontWeight: 500,
       color: "gray12",
-      text: "And tooltip is coming"
-    }
+      text: parent.props.title
+    })
   },
   P: {
-    props: {
+    if: ({ parent, props: props4 }) => (0, import_utils13.isDefined)(parent.props.description) || props4.text,
+    props: ({ parent }) => ({
+      width: "fit-content",
       fontSize: "Z2",
       margin: "0",
       color: "gray6",
-      text: "and winter too",
-      fontWeight: "400"
-    }
+      fontWeight: "400",
+      text: parent.props.description
+    })
   }
 };
 var TooltipHidden = {
@@ -9698,7 +9757,7 @@ var TooltipHidden = {
 var TooltipParent = {
   props: ({ Tooltip: Tooltip2, TooltipHidden: TooltipHidden2 }) => {
     const TooltipElem = Tooltip2 || TooltipHidden2;
-    const TooltipActive = TooltipElem && TooltipElem[".active"];
+    const TooltipActive = TooltipElem && TooltipElem.props[".active"];
     return {
       position: "relative",
       zIndex: 999,
@@ -10682,14 +10741,12 @@ var props2 = {
   align: "center center",
   flow: "column",
   gap: "X",
-  style: {
-    "> button": {
-      padding: "0",
-      background: "transparent",
-      color: "white",
-      fontSize: `${12 / 16}em`,
-      display: "none"
-    }
+  "> button": {
+    padding: "0",
+    background: "transparent",
+    color: "white",
+    fontSize: "Z",
+    display: "none"
   }
 };
 var TimePickerItem = {
@@ -10747,8 +10804,8 @@ var TimeSwitcher = {
       ".active": { theme: "primary" }
     }),
     on: {
-      click: (event, { key, state }) => {
-        console.log(event, key, state);
+      click: (ev, { key, state }) => {
+        console.log(ev, key, state);
         state.update({ activeShift: key });
       }
     }
@@ -10792,7 +10849,7 @@ var TimePicker = {
           max: "11"
         }
       },
-      Span: ":",
+      Span: { text: ":" },
       TimePickerItem_mm: {
         NumberInput: {
           placeholder: "MM",
@@ -10800,7 +10857,7 @@ var TimePicker = {
           max: "59"
         }
       },
-      Span_2: ":",
+      Span_2: { text: ":" },
       TimePickerItem_ss: {
         NumberInput: {
           placeholder: "SS",
@@ -10864,7 +10921,8 @@ var DropdownList = {
         borderWidth: "1px 0 0"
       }
     })
-  }
+  },
+  $setPropsCollection: ({ props: props4 }) => props4.options
 };
 var DropdownParent = {
   props: {
@@ -11681,9 +11739,8 @@ var User = {
     align: "center flex-start",
     gap: "Z2"
   },
-  Avatar: {
-    extend: AvatarIndicator,
-    props: { margin: "0 - - -" }
+  AvatarIndicator: {
+    margin: "0 - - -"
   },
   Notes: {
     extend: TitleParagraph,
@@ -11720,7 +11777,7 @@ var ChatUser = {
     padding: "A",
     round: "Z"
   },
-  Avatar: { props: { margin: "0" } },
+  AvatarIndicator: { margin: "0" },
   Notes: {
     props: { flex: "1" },
     Title: {
@@ -11770,7 +11827,7 @@ var UserButtonSet = {
     round: "Z2"
   },
   User: {
-    Avatar: { fontSize: "A2" },
+    AvatarIndicator: { fontSize: "A2" },
     Notes: {
       Title: {
         h5: {
@@ -11801,8 +11858,8 @@ var UserButtonSet = {
 var UserMessage = {
   extend: User,
   props: { gap: "Z" },
-  Avatar: {
-    props: { fontSize: "Z" }
+  AvatarIndicator: {
+    fontSize: "Z"
   },
   Notes: {
     Title: null,
@@ -11823,7 +11880,7 @@ var UserMessage = {
 // User/UserWithLabel.js
 var UserWithLabel = {
   extend: User,
-  Avatar: {
+  AvatarIndicator: {
     StatusIndicator: null,
     Avatar: { boxSize: "B" }
   },
@@ -11864,7 +11921,7 @@ var UserWithButton = {
     border: "1px, solid, gray3",
     gap: "Y2"
   },
-  Avatar: {
+  AvatarIndicator: {
     Avatar: {
       round: "Y"
     },