@zthun/romulator-web 1.3.5 → 1.5.0

package/dist/assets/{index-GdtABegS.js → index-BO4ogTAe.js}

@@ -209,12 +209,12 @@ function _object_spread$2$2(target) {
     return ZCircusWaitOptionsBuilder;
 }();
 
-function _array_like_to_array$d(arr, len) {
+function _array_like_to_array$f(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$d(arr) {
+function _array_with_holes$f(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$u(gen, resolve, reject, _next, _throw, key, arg) {
@@ -264,7 +264,7 @@ function _create_class$3$4(Constructor, protoProps, staticProps) {
     if (staticProps) _defineProperties$3$4(Constructor, staticProps);
     return Constructor;
 }
-function _iterable_to_array_limit$c(arr, i) {
+function _iterable_to_array_limit$d(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -288,19 +288,19 @@ function _iterable_to_array_limit$c(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$d() {
+function _non_iterable_rest$f() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$c(arr, i) {
-    return _array_with_holes$d(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
+function _sliced_to_array$d(arr, i) {
+    return _array_with_holes$f(arr) || _iterable_to_array_limit$d(arr, i) || _unsupported_iterable_to_array$f(arr, i) || _non_iterable_rest$f();
 }
-function _unsupported_iterable_to_array$d(o, minLen) {
+function _unsupported_iterable_to_array$f(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$f(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$f(o, minLen);
 }
 function _ts_generator$u(thisArg, body) {
     var f, y, t, _ = {
@@ -547,7 +547,7 @@ var _selector = function(root, name) {
                                     driver.query(selector)
                                 ];
                             case 1:
-                                _ref = _sliced_to_array$c.apply(void 0, [
+                                _ref = _sliced_to_array$d.apply(void 0, [
                                     _state.sent(),
                                     1
                                 ]), found = _ref[0];
@@ -1316,13 +1316,13 @@ function isEmptyObject(candidate) {
  * @returns
  *        The first value for where predicate returns true for the given argument value.
  *        If first and all values of remaining fail the predicate then fallback is returned.
- */ function _array_like_to_array$2$1(arr, len) {
+ */ function _array_like_to_array$2$2(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
 function _array_without_holes$2(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array$2$1(arr);
+    if (Array.isArray(arr)) return _array_like_to_array$2$2(arr);
 }
 function _iterable_to_array$2(iter) {
     if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
@@ -1331,15 +1331,15 @@ function _non_iterable_spread$2() {
     throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _to_consumable_array$2(arr) {
-    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$2$1(arr) || _non_iterable_spread$2();
+    return _array_without_holes$2(arr) || _iterable_to_array$2(arr) || _unsupported_iterable_to_array$2$2(arr) || _non_iterable_spread$2();
 }
-function _unsupported_iterable_to_array$2$1(o, minLen) {
+function _unsupported_iterable_to_array$2$2(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2$1(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$2$2(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2$2(o, minLen);
 }
 function firstWhere(predicate, fallback, first) {
     for(var _len = arguments.length, remaining = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++){
@@ -2543,15 +2543,15 @@ function _ts_generator$1$1(thisArg, body) {
  *   }
  * `
  * ```
- */ function _array_like_to_array$c(arr, len) {
+ */ function _array_like_to_array$d(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$c(arr) {
+function _array_with_holes$d(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$5(arr, i) {
+function _iterable_to_array_limit$c(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -2575,25 +2575,25 @@ function _iterable_to_array_limit$5(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$c() {
+function _non_iterable_rest$d() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$5(arr, i) {
-    return _array_with_holes$c(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
+function _sliced_to_array$c(arr, i) {
+    return _array_with_holes$d(arr) || _iterable_to_array_limit$c(arr, i) || _unsupported_iterable_to_array$d(arr, i) || _non_iterable_rest$d();
 }
-function _unsupported_iterable_to_array$c(o, minLen) {
+function _unsupported_iterable_to_array$d(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$d(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$d(o, minLen);
 }
 function tag(strings) {
     for(var _len = arguments.length, expressions = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++){
         expressions[_key - 1] = arguments[_key];
     }
-    var _strings = _sliced_to_array$5(strings, 1), result = _strings[0];
+    var _strings = _sliced_to_array$c(strings, 1), result = _strings[0];
     for(var i = 1, l = strings.length; i < l; i++){
         result += expressions[i - 1];
         result += strings[i];
@@ -7301,6 +7301,9 @@ function _define_property$4$3(obj, key, value) {
  * Vary sizes vary with the area for which they exist in or to the content which exists in them.
  */ var ZSizeVaried = /*#__PURE__*/ function(ZSizeVaried) {
     /**
+   * Fall back to the default behavior of the component.
+   */ ZSizeVaried["Default"] = "default";
+    /**
    * Fit to whatever is inside the box.
    */ ZSizeVaried["Fit"] = "fit";
     /**
@@ -7330,7 +7333,7 @@ function _define_property$3$3(obj, key, value) {
  *        to css supported values.
  */ function createSizeChartVariedCss() {
     var _obj;
-    return _obj = {}, _define_property$3$3(_obj, ZSizeVaried.Fit, "auto"), _define_property$3$3(_obj, ZSizeVaried.Full, "100%"), _obj;
+    return _obj = {}, _define_property$3$3(_obj, ZSizeVaried.Default, "auto"), _define_property$3$3(_obj, ZSizeVaried.Fit, "fit-content"), _define_property$3$3(_obj, ZSizeVaried.Full, "100%"), _obj;
 }
 
 /**
@@ -7438,7 +7441,7 @@ function _object_spread_props$1(target, source) {
 var ZFashionTailor = /*#__PURE__*/ function() {
     function ZFashionTailor() {
         _class_call_check$G(this, ZFashionTailor);
-        _define_property$1$5(this, "_gaps", _object_spread_props$1(_object_spread$g({}, createSizeChartFixedCss(createSizeChartFixedFibonacci(0.5, 1), "rem"), createSizeChartVoidCss()), _define_property$1$5({}, ZSizeVaried.Fit, "auto")));
+        _define_property$1$5(this, "_gaps", _object_spread_props$1(_object_spread$g({}, createSizeChartFixedCss(createSizeChartFixedFibonacci(0.5, 1), "rem"), createSizeChartVoidCss()), _define_property$1$5({}, ZSizeVaried.Default, "auto")));
         _define_property$1$5(this, "_thickness", _object_spread$g({}, createSizeChartFixedCss(createSizeChartFixedArithmetic(0.0625, 0.0625), "rem"), createSizeChartVoidCss()));
         _define_property$1$5(this, "_rounding", _object_spread_props$1(_object_spread$g({}, createSizeChartFixedCss(createSizeChartFixedArithmetic(0.15, 0.25), "rem"), createSizeChartVoidCss()), _define_property$1$5({}, ZSizeVaried.Full, "50%")));
         _define_property$1$5(this, "gapsChart", this._sizeChart.bind(this, "_gaps"));
@@ -7667,12 +7670,12 @@ function _unsupported_iterable_to_array$1$3(o, minLen) {
  *        The output from rgb(255, 255, 255, 1);
  */ var white = rgb.bind(null, 255, 255, 255, 1);
 
-function _array_like_to_array$5(arr, len) {
+function _array_like_to_array$c(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$5(arr) {
+function _array_with_holes$c(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _iterable_to_array_limit(arr, i) {
@@ -7699,19 +7702,19 @@ function _iterable_to_array_limit(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$5() {
+function _non_iterable_rest$c() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 function _sliced_to_array(arr, i) {
-    return _array_with_holes$5(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
+    return _array_with_holes$c(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array$c(arr, i) || _non_iterable_rest$c();
 }
-function _unsupported_iterable_to_array$5(o, minLen) {
+function _unsupported_iterable_to_array$c(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$c(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$c(o, minLen);
 }
 /**
  * Constructs a css color from a number.
@@ -12499,14 +12502,14 @@ var _ZOperatorsUnaryLookup = keyBy(ZOperatorsUnary);
  */ function isUnaryOperator(candidate) {
     return candidate != null && Object.prototype.hasOwnProperty.call(_ZOperatorsUnaryLookup, candidate);
 }
-var _obj$6;
+var _obj$5;
 /**
  * Comparators for unary operators.
- */ var ZUnaryComparators = (_obj$6 = {}, _define_property$9$1(_obj$6, "null", function(data) {
+ */ var ZUnaryComparators = (_obj$5 = {}, _define_property$9$1(_obj$5, "null", function(data) {
     return data == null;
-}), _define_property$9$1(_obj$6, "is-not-null", function(data) {
+}), _define_property$9$1(_obj$5, "is-not-null", function(data) {
     return data != null;
-}), _obj$6);
+}), _obj$5);
 
 function _class_call_check$f$1(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -12581,12 +12584,12 @@ function _create_class$f$1(Constructor, protoProps, staticProps) {
  * A list of all possible filter operators in one collection.
  */ var ZOperatorsFilter = [].concat(ZOperatorsBinary).concat(ZOperatorsCollection).concat(ZOperatorsLogic).concat(ZOperatorsUnary);
 
-function _array_like_to_array$2(arr, len) {
+function _array_like_to_array$2$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$2(arr) {
+function _array_with_holes$2$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function _class_call_check$e$1(instance, Constructor) {
@@ -12607,7 +12610,7 @@ function _create_class$e$1(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties$e$1(Constructor.prototype, protoProps);
     return Constructor;
 }
-function _iterable_to_array_limit$2(arr, i) {
+function _iterable_to_array_limit$2$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -12631,19 +12634,19 @@ function _iterable_to_array_limit$2(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$2() {
+function _non_iterable_rest$2$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$2(arr, i) {
-    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+function _sliced_to_array$2$1(arr, i) {
+    return _array_with_holes$2$1(arr) || _iterable_to_array_limit$2$1(arr, i) || _unsupported_iterable_to_array$2$1(arr, i) || _non_iterable_rest$2$1();
 }
-function _unsupported_iterable_to_array$2(o, minLen) {
+function _unsupported_iterable_to_array$2$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$2$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2$1(o, minLen);
 }
 /**
  * Represents a parser object that can parse an {@link IZFilter} from a string.
@@ -12665,7 +12668,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
    * @throws
    *        If there is a syntax error in candidate.
    */ function deserialize(candidate) {
-                var _this__parseFilter = _sliced_to_array$2(this._parseFilter(candidate), 2), filter = _this__parseFilter[0], rest = _this__parseFilter[1];
+                var _this__parseFilter = _sliced_to_array$2$1(this._parseFilter(candidate), 2), filter = _this__parseFilter[0], rest = _this__parseFilter[1];
                 if (trim$2(rest).length > 0) {
                     throw new Error("Extraneous characters found at the end of the candidate filter: ".concat(rest));
                 }
@@ -12675,7 +12678,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
         {
             key: "_peelBetweenParens",
             value: function _peelBetweenParens(args) {
-                var _peelBetween = _sliced_to_array$2(peelBetween(args, "(", ")"), 2), argList = _peelBetween[0], rest = _peelBetween[1];
+                var _peelBetween = _sliced_to_array$2$1(peelBetween(args, "(", ")"), 2), argList = _peelBetween[0], rest = _peelBetween[1];
                 if (argList == null) {
                     throw new Error("Unable to find opening and closing parenthesis for ".concat(args, ".  Check syntax."));
                 }
@@ -12689,7 +12692,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
             key: "_splitArgs",
             value: function _splitArgs(operator, args, minArgs) {
                 var maxArgs = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : minArgs;
-                var _this__peelBetweenParens = _sliced_to_array$2(this._peelBetweenParens(args), 2), argList = _this__peelBetweenParens[0], rest = _this__peelBetweenParens[1];
+                var _this__peelBetweenParens = _sliced_to_array$2$1(this._peelBetweenParens(args), 2), argList = _this__peelBetweenParens[0], rest = _this__peelBetweenParens[1];
                 var splitArgs = argList.split(",").filter(function(x) {
                     return !!x;
                 });
@@ -12712,8 +12715,8 @@ function _unsupported_iterable_to_array$2(o, minLen) {
         {
             key: "_parseUnaryFilter",
             value: function _parseUnaryFilter(operator, args) {
-                var _this__splitArgs = _sliced_to_array$2(this._splitArgs(operator, args, 1), 2), argList = _this__splitArgs[0], rest = _this__splitArgs[1];
-                var _argList = _sliced_to_array$2(argList, 1), subject = _argList[0];
+                var _this__splitArgs = _sliced_to_array$2$1(this._splitArgs(operator, args, 1), 2), argList = _this__splitArgs[0], rest = _this__splitArgs[1];
+                var _argList = _sliced_to_array$2$1(argList, 1), subject = _argList[0];
                 subject = trim$2(subject);
                 return [
                     new ZFilterUnaryBuilder().operator(operator).subject(subject).build(),
@@ -12724,8 +12727,8 @@ function _unsupported_iterable_to_array$2(o, minLen) {
         {
             key: "_parseBinaryFilter",
             value: function _parseBinaryFilter(operator, args) {
-                var _this__splitArgs = _sliced_to_array$2(this._splitArgs(operator, args, 2), 2), argList = _this__splitArgs[0], rest = _this__splitArgs[1];
-                var _argList = _sliced_to_array$2(argList, 2), subject = _argList[0], value = _argList[1];
+                var _this__splitArgs = _sliced_to_array$2$1(this._splitArgs(operator, args, 2), 2), argList = _this__splitArgs[0], rest = _this__splitArgs[1];
+                var _argList = _sliced_to_array$2$1(argList, 2), subject = _argList[0], value = _argList[1];
                 subject = trim$2(subject);
                 value = JSON.parse(value);
                 return [
@@ -12737,8 +12740,8 @@ function _unsupported_iterable_to_array$2(o, minLen) {
         {
             key: "_parseCollectionFilter",
             value: function _parseCollectionFilter(operator, args) {
-                var _this__splitArgs = _sliced_to_array$2(this._splitArgs(operator, args, 1, Infinity), 2), argList = _this__splitArgs[0], rest = _this__splitArgs[1];
-                var _argList = _sliced_to_array$2(argList, 1), subject = _argList[0];
+                var _this__splitArgs = _sliced_to_array$2$1(this._splitArgs(operator, args, 1, Infinity), 2), argList = _this__splitArgs[0], rest = _this__splitArgs[1];
+                var _argList = _sliced_to_array$2$1(argList, 1), subject = _argList[0];
                 subject = trim$2(subject);
                 var values = argList.slice(1).map(function(a) {
                     return JSON.parse(trim$2(a));
@@ -12753,14 +12756,14 @@ function _unsupported_iterable_to_array$2(o, minLen) {
             key: "_parseLogicFilter",
             value: function _parseLogicFilter(operator, args) {
                 var argsList = this._peelBetweenParens(trim$2(args));
-                var _argsList = _sliced_to_array$2(argsList, 1), remaining = _argsList[0];
-                var _argsList1 = _sliced_to_array$2(argsList, 2), rest = _argsList1[1];
+                var _argsList = _sliced_to_array$2$1(argsList, 1), remaining = _argsList[0];
+                var _argsList1 = _sliced_to_array$2$1(argsList, 2), rest = _argsList1[1];
                 var builder = new ZFilterLogicBuilder().operator(operator);
                 while(remaining){
                     var split = this._parseFilter(remaining);
-                    var _split = _sliced_to_array$2(split, 1), clause = _split[0];
+                    var _split = _sliced_to_array$2$1(split, 1), clause = _split[0];
                     var ref;
-                    ref = _sliced_to_array$2(split, 2), remaining = ref[1];
+                    ref = _sliced_to_array$2$1(split, 2), remaining = ref[1];
                     remaining = trimStart(remaining, " ,");
                     builder = builder.clause(clause);
                 }
@@ -12773,7 +12776,7 @@ function _unsupported_iterable_to_array$2(o, minLen) {
         {
             key: "_parseFilter",
             value: function _parseFilter(candidate) {
-                var _peel = _sliced_to_array$2(peel(trim$2(candidate), ZOperatorsFilter), 2), operator = _peel[0], rest = _peel[1];
+                var _peel = _sliced_to_array$2$1(peel(trim$2(candidate), ZOperatorsFilter), 2), operator = _peel[0], rest = _peel[1];
                 if (isUnaryOperator(operator)) {
                     return this._parseUnaryFilter(operator, rest);
                 }
@@ -14178,15 +14181,15 @@ function _ts_generator$t(thisArg, body) {
     return ZDataSourceStatic;
 }();
 
-function _array_like_to_array$4$1(arr, len) {
+function _array_like_to_array$5(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$4$1(arr) {
+function _array_with_holes$5(arr) {
     if (Array.isArray(arr)) return arr;
 }
-function _iterable_to_array_limit$4$1(arr, i) {
+function _iterable_to_array_limit$5(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -14210,19 +14213,19 @@ function _iterable_to_array_limit$4$1(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$4$1() {
+function _non_iterable_rest$5() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$4$1(arr, i) {
-    return _array_with_holes$4$1(arr) || _iterable_to_array_limit$4$1(arr, i) || _unsupported_iterable_to_array$4$1(arr, i) || _non_iterable_rest$4$1();
+function _sliced_to_array$5(arr, i) {
+    return _array_with_holes$5(arr) || _iterable_to_array_limit$5(arr, i) || _unsupported_iterable_to_array$5(arr, i) || _non_iterable_rest$5();
 }
-function _unsupported_iterable_to_array$4$1(o, minLen) {
+function _unsupported_iterable_to_array$5(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$4$1(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$5(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$5(o, minLen);
 }
 /**
  * A type of state where the value is used from the props in the case of them being set.
@@ -14247,7 +14250,7 @@ function _unsupported_iterable_to_array$4$1(o, minLen) {
  *        A tuple where the first item is the current state and the 2nd item is a mutator
  *        method to modify the state.
  */ function useAmbassadorState(current, setCurrent, initial) {
-    var _useState = _sliced_to_array$4$1(reactExports.useState(current || initial), 2), localCurrent = _useState[0], setLocalCurrent = _useState[1];
+    var _useState = _sliced_to_array$5(reactExports.useState(current || initial), 2), localCurrent = _useState[0], setLocalCurrent = _useState[1];
     var _current = current === undefined ? localCurrent : current;
     var _setCurrent = function(val) {
         setLocalCurrent(val);
@@ -14268,12 +14271,12 @@ function _unsupported_iterable_to_array$4$1(o, minLen) {
     ];
 }
 
-function _array_like_to_array$3$1(arr, len) {
+function _array_like_to_array$4$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
     return arr2;
 }
-function _array_with_holes$3$1(arr) {
+function _array_with_holes$4$1(arr) {
     if (Array.isArray(arr)) return arr;
 }
 function asyncGeneratorStep$s(gen, resolve, reject, _next, _throw, key, arg) {
@@ -14312,7 +14315,7 @@ function _instanceof$2(left, right) {
         return left instanceof right;
     }
 }
-function _iterable_to_array_limit$3$1(arr, i) {
+function _iterable_to_array_limit$4$1(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
     var _arr = [];
@@ -14336,19 +14339,19 @@ function _iterable_to_array_limit$3$1(arr, i) {
     }
     return _arr;
 }
-function _non_iterable_rest$3$1() {
+function _non_iterable_rest$4$1() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
-function _sliced_to_array$3$1(arr, i) {
-    return _array_with_holes$3$1(arr) || _iterable_to_array_limit$3$1(arr, i) || _unsupported_iterable_to_array$3$1(arr, i) || _non_iterable_rest$3$1();
+function _sliced_to_array$4$1(arr, i) {
+    return _array_with_holes$4$1(arr) || _iterable_to_array_limit$4$1(arr, i) || _unsupported_iterable_to_array$4$1(arr, i) || _non_iterable_rest$4$1();
 }
-function _unsupported_iterable_to_array$3$1(o, minLen) {
+function _unsupported_iterable_to_array$4$1(o, minLen) {
     if (!o) return;
-    if (typeof o === "string") return _array_like_to_array$3$1(o, minLen);
+    if (typeof o === "string") return _array_like_to_array$4$1(o, minLen);
     var n = Object.prototype.toString.call(o).slice(8, -1);
     if (n === "Object" && o.constructor) n = o.constructor.name;
     if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$3$1(o, minLen);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$4$1(o, minLen);
 }
 function _ts_generator$s(thisArg, body) {
     var f, y, t, _ = {
@@ -14459,7 +14462,7 @@ function _ts_generator$s(thisArg, body) {
  *        the 2nd argument is a refresh function to refresh the data.
  */ function useAsyncState(load) {
     var deps = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-    var _useState = _sliced_to_array$3$1(reactExports.useState(ZAsyncLoading), 2), current = _useState[0], setCurrent = _useState[1];
+    var _useState = _sliced_to_array$4$1(reactExports.useState(ZAsyncLoading), 2), current = _useState[0], setCurrent = _useState[1];
     var subscription = reactExports.useRef(new Subscription());
     var _refresh = function() {
         subscription.current.unsubscribe();
@@ -14728,6 +14731,78 @@ function _define_property$s(obj, key, value) {
     };
 }
 
+function _array_like_to_array$2(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes$2(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit$2(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest$2() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array$2(arr, i) {
+    return _array_with_holes$2(arr) || _iterable_to_array_limit$2(arr, i) || _unsupported_iterable_to_array$2(arr, i) || _non_iterable_rest$2();
+}
+function _unsupported_iterable_to_array$2(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array$2(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array$2(o, minLen);
+}
+/**
+ * Represents a useState where changing the initial state resets the internal state.
+ *
+ * This is useful for form like flows where you internally keep track
+ * of changes to data, commit the changes, and then want to reflect the new
+ * updated state.
+ *
+ * @param initial -
+ *        The initial state or a callback to retrieve the initial state.
+ *
+ * @returns
+ *        A set state tuple where the first value is the current set value,
+ *        and the 2nd value is a setter for the internal state.
+ */ function useSyncState(initial) {
+    var _useState = _sliced_to_array$2(reactExports.useState(initial), 2), value = _useState[0], setValue = _useState[1];
+    reactExports.useEffect(function() {
+        setValue(initial);
+    }, [
+        initial
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+
 function _array_like_to_array$1$1(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
     for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
@@ -15441,7 +15516,7 @@ function rulesheet (callback) {
 }
 
 /**
- * react-router v7.9.3
+ * react-router v7.9.4
  *
  * Copyright (c) Remix Software Inc.
  *
@@ -17214,7 +17289,7 @@ var isBrowser = typeof window !== "undefined" && typeof window.document !== "und
 try {
   if (isBrowser) {
     window.__reactRouterVersion = // @ts-expect-error
-    "7.9.3";
+    "7.9.4";
   }
 } catch (e) {
 }
@@ -20901,14 +20976,14 @@ var ZHttpCodeSuccess = /*#__PURE__*/ function(ZHttpCodeSuccess) {
    */ ZHttpCodeSuccess[ZHttpCodeSuccess["IMUsed"] = 226] = "IMUsed";
     return ZHttpCodeSuccess;
 }({});
-var _obj$5;
+var _obj;
 /**
  * Friendly english names of success codes.
- */ var ZHttpCodeSuccessNames = (_obj$5 = {}, _define_property$2$1(_obj$5, 200, "OK"), _define_property$2$1(_obj$5, 201, "Created"), _define_property$2$1(_obj$5, 202, "Accepted"), _define_property$2$1(_obj$5, 203, "Non-Authoritative Information"), _define_property$2$1(_obj$5, 204, "No Content"), _define_property$2$1(_obj$5, 205, "Reset Content"), _define_property$2$1(_obj$5, 206, "Partial Content"), _define_property$2$1(_obj$5, 207, "Multi Status"), _define_property$2$1(_obj$5, 208, "Already Reported"), _define_property$2$1(_obj$5, 226, "IM Used"), _obj$5);
-var _obj1$5;
+ */ var ZHttpCodeSuccessNames = (_obj = {}, _define_property$2$1(_obj, 200, "OK"), _define_property$2$1(_obj, 201, "Created"), _define_property$2$1(_obj, 202, "Accepted"), _define_property$2$1(_obj, 203, "Non-Authoritative Information"), _define_property$2$1(_obj, 204, "No Content"), _define_property$2$1(_obj, 205, "Reset Content"), _define_property$2$1(_obj, 206, "Partial Content"), _define_property$2$1(_obj, 207, "Multi Status"), _define_property$2$1(_obj, 208, "Already Reported"), _define_property$2$1(_obj, 226, "IM Used"), _obj);
+var _obj1;
 /**
  * Friendly english descriptions of success codes.
- */ var ZHttpCodeSuccessDescriptions = (_obj1$5 = {}, _define_property$2$1(_obj1$5, 200, "The request was successful."), _define_property$2$1(_obj1$5, 201, "The request has been fulfilled, resulting in the creation of a new resource."), _define_property$2$1(_obj1$5, 202, "The request has been accepted for processing, but the processing has not been completed."), _define_property$2$1(_obj1$5, 203, "The server is a transforming proxy that received an OK from its origin,but is returning a modified version of the response."), _define_property$2$1(_obj1$5, 204, "The server successfully processed the request and is not returning any content."), _define_property$2$1(_obj1$5, 205, "The server successfully processed the request, but is not returning any content.  The document view must be refreshed."), _define_property$2$1(_obj1$5, 206, "he server is delivering only part of the resource due to a range header sent by the client."), _define_property$2$1(_obj1$5, 207, "The message body that follows is by default an XML message and can contain a number of separate response codes, depending on how many sub-requests were made."), _define_property$2$1(_obj1$5, 208, "The members of a DAV binding have already been enumerated in a preceding part of the response, and are not being included again."), _define_property$2$1(_obj1$5, 226, "The server has fulfilled a request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance."), _obj1$5);
+ */ var ZHttpCodeSuccessDescriptions = (_obj1 = {}, _define_property$2$1(_obj1, 200, "The request was successful."), _define_property$2$1(_obj1, 201, "The request has been fulfilled, resulting in the creation of a new resource."), _define_property$2$1(_obj1, 202, "The request has been accepted for processing, but the processing has not been completed."), _define_property$2$1(_obj1, 203, "The server is a transforming proxy that received an OK from its origin,but is returning a modified version of the response."), _define_property$2$1(_obj1, 204, "The server successfully processed the request and is not returning any content."), _define_property$2$1(_obj1, 205, "The server successfully processed the request, but is not returning any content.  The document view must be refreshed."), _define_property$2$1(_obj1, 206, "he server is delivering only part of the resource due to a range header sent by the client."), _define_property$2$1(_obj1, 207, "The message body that follows is by default an XML message and can contain a number of separate response codes, depending on how many sub-requests were made."), _define_property$2$1(_obj1, 208, "The members of a DAV binding have already been enumerated in a preceding part of the response, and are not being included again."), _define_property$2$1(_obj1, 226, "The server has fulfilled a request for the resource, and the response is a representation of the result of one or more instance-manipulations applied to the current instance."), _obj1);
 /**
  * Gets the english friendly name of a code.
  *
@@ -21688,7 +21763,7 @@ function useFashionDevice() {
     return reactExports.useContext(ZFashionDeviceContext);
 }
 
-function _tagged_template_literal$z(strings, raw) {
+function _tagged_template_literal$A(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -21698,13 +21773,13 @@ function _tagged_template_literal$z(strings, raw) {
         }
     }));
 }
-function _templateObject$z() {
-    var data = _tagged_template_literal$z([
+function _templateObject$A() {
+    var data = _tagged_template_literal$A([
         "\n    body {\n      background-color: ",
         ";\n      color: ",
         ";\n      margin: 0;\n      position: relative;\n      height: 100vh;\n    }\n  "
     ]);
-    _templateObject$z = function _templateObject() {
+    _templateObject$A = function _templateObject() {
         return data;
     };
     return data;
@@ -21779,14 +21854,14 @@ function _templateObject$z() {
  */ function ZStyled(props) {
     var children = props.children, className = props.className;
     var body = useFashionTheme().body;
-    useGlobalCss(css$1(_templateObject$z(), body.idle.main, body.idle.contrast));
+    useGlobalCss(css$1(_templateObject$A(), body.idle.main, body.idle.contrast));
     return /*#__PURE__*/ jsxRuntimeExports.jsx("div", {
         className: cssJoinDefined("ZStyled-root", className),
         children: children
     });
 }
 
-function _tagged_template_literal$y(strings, raw) {
+function _tagged_template_literal$z(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -21796,8 +21871,8 @@ function _tagged_template_literal$y(strings, raw) {
         }
     }));
 }
-function _templateObject$y() {
-    var data = _tagged_template_literal$y([
+function _templateObject$z() {
+    var data = _tagged_template_literal$z([
         "\n    &.ZAlert-root {\n      align-items: center;\n      background: ",
         ";\n      border-color: ",
         ";\n      border-radius: 0.25rem;\n      border-style: double;\n      box-shadow: 0 0 0 ",
@@ -21809,7 +21884,7 @@ function _templateObject$y() {
         ";\n    }\n\n    .ZAlert-heading {\n      grid-area: heading;\n      margin-bottom: ",
         ";\n    }\n\n    .ZAlert-message {\n      grid-area: message;\n    }\n  "
     ]);
-    _templateObject$y = function _templateObject() {
+    _templateObject$z = function _templateObject() {
         return data;
     };
     return data;
@@ -21823,7 +21898,7 @@ function ZAlert(props) {
     var boxWidth = tailor.thickness(ZSizeFixed.ExtraSmall);
     var px = tailor.gap(ZSizeFixed.Small);
     var py = tailor.gap(ZSizeFixed.ExtraSmall);
-    var _className = useCss(css$1(_templateObject$y(), picker.idle.main, picker.idle.border, boxWidth, picker.idle.border, picker.idle.contrast, px, py, tailor.gap(ZSizeFixed.Medium), tailor.gap(ZSizeFixed.Small)));
+    var _className = useCss(css$1(_templateObject$z(), picker.idle.main, picker.idle.border, boxWidth, picker.idle.border, picker.idle.contrast, px, py, tailor.gap(ZSizeFixed.Medium), tailor.gap(ZSizeFixed.Small)));
     return /*#__PURE__*/ jsxRuntimeExports.jsxs("div", {
         className: cssJoinDefined("ZAlert-root", className, _className),
         "data-name": name,
@@ -22276,7 +22351,7 @@ function _is_native_reflect_construct$t() {
 }(ZCircusComponentModel);
 _define_property$T(ZBannerMainComponentModel, "Selector", ".ZBannerMain-root");
 
-function _tagged_template_literal$x(strings, raw) {
+function _tagged_template_literal$y(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -22286,15 +22361,15 @@ function _tagged_template_literal$x(strings, raw) {
         }
     }));
 }
-function _templateObject$x() {
-    var data = _tagged_template_literal$x([
+function _templateObject$y() {
+    var data = _tagged_template_literal$y([
         "\n    &.ZBanner-root {\n      background: ",
         ";\n      box-sizing: border-box;\n      color: ",
         ";\n      left: 0;\n      padding: ",
         "\n        ",
         ";\n      position: sticky;\n      right: 0;\n      top: 0;\n      z-index: 1100;\n    }\n  "
     ]);
-    _templateObject$x = function _templateObject() {
+    _templateObject$y = function _templateObject() {
         return data;
     };
     return data;
@@ -22304,7 +22379,7 @@ function ZBanner(props) {
     var tailor = useFashionTailor();
     var children = props.children, className = props.className, fashion = props.fashion;
     var picker = new ZColorPicker(firstDefined(primary, fashion));
-    var _className = useCss(css$1(_templateObject$x(), picker.idle.main, picker.idle.contrast, tailor.gap(ZSizeFixed.ExtraSmall), tailor.gap(ZSizeFixed.Small)));
+    var _className = useCss(css$1(_templateObject$y(), picker.idle.main, picker.idle.contrast, tailor.gap(ZSizeFixed.ExtraSmall), tailor.gap(ZSizeFixed.Small)));
     return /*#__PURE__*/ jsxRuntimeExports.jsx("div", {
         className: cssJoinDefined("ZBanner-root", className, _className),
         role: "banner",
@@ -22340,7 +22415,7 @@ function _object_spread$o(target) {
     }
     return target;
 }
-function ownKeys$k(object, enumerableOnly) {
+function ownKeys$i(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -22348,12 +22423,12 @@ function ownKeys$k(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$k(target, source) {
+function _object_spread_props$i(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$k(Object(source)).forEach(function(key) {
+        ownKeys$i(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -22386,7 +22461,7 @@ function _object_without_properties_loose$9(source, excluded) {
     }
     return target;
 }
-function _tagged_template_literal$w(strings, raw) {
+function _tagged_template_literal$x(strings, raw) {
     if (!raw) {
         raw = strings.slice(0);
     }
@@ -22396,8 +22471,8 @@ function _tagged_template_literal$w(strings, raw) {
         }
     }));
 }
-function _templateObject$w() {
-    var data = _tagged_template_literal$w([
+function _templateObject$x() {
+    var data = _tagged_template_literal$x([
         "\n    & {\n      background-color: ",
         ";\n      border-color: ",
         ";\n\n      border-bottom-style: ",
@@ -22440,12 +22515,12 @@ function _templateObject$w() {
         " {\n      & {\n        max-width: ",
         ";\n      }\n    }\n  "
     ]);
-    _templateObject$w = function _templateObject() {
+    _templateObject$x = function _templateObject() {
         return data;
     };
     return data;
 }
-var WidthChart$4 = _object_spread_props$k(_object_spread$o({}, createSizeChartFixedCss(createSizeChartFixedGeometric(1.4, 18), "rem"), createSizeChartVariedCss(), createSizeChartVoidCss()), _define_property$S({}, ZSizeVaried.Fit, "fit-content"));
+var WidthChart$4 = _object_spread$o({}, createSizeChartFixedCss(createSizeChartFixedGeometric(1.4, 18), "rem"), createSizeChartVariedCss(), createSizeChartVoidCss());
 function ZBox(props) {
     var device = useFashionDevice();
     var tailor = useFashionTailor();
@@ -22470,8 +22545,8 @@ function ZBox(props) {
     var _padding = new ZQuadrilateralBuilder(ZSizeVoid.None).from(padding).build();
     var _margin = new ZQuadrilateralBuilder(ZSizeVoid.None).from(margin).build();
     var _width = new ZDeviceValues(width, ZSizeVaried.Full);
-    var _className = useCss(css$1(_templateObject$w(), picker.idle.main, picker.idle.border, trim.bottom, trim.left, trim.right, trim.top, tailor.thickness(edge.bottom), tailor.thickness(edge.left), tailor.thickness(edge.right), tailor.thickness(edge.top), tailor.rounding(radius.bottomLeft), tailor.rounding(radius.bottomRight), tailor.rounding(radius.topLeft), tailor.rounding(radius.topRight), picker.idle.contrast, cursor, tailor.gap(_padding.bottom), tailor.gap(_padding.left), tailor.gap(_padding.right), tailor.gap(_padding.top), tailor.gap(_margin.bottom), tailor.gap(_margin.left), tailor.gap(_margin.right), tailor.gap(_margin.top), WidthChart$4[_width.xl], justification, interactive ? picker.focus.main : picker.idle.main, interactive ? picker.focus.border : picker.idle.border, interactive ? picker.focus.contrast : picker.idle.contrast, interactive ? picker.hover.main : picker.idle.main, interactive ? picker.hover.border : picker.idle.border, interactive ? picker.hover.contrast : picker.idle.contrast, device.break(ZSizeFixed.Large), WidthChart$4[_width.lg], device.break(ZSizeFixed.Medium), WidthChart$4[_width.md], device.break(ZSizeFixed.Small), WidthChart$4[_width.sm], device.break(ZSizeFixed.ExtraSmall), WidthChart$4[_width.xs]));
-    return /*#__PURE__*/ jsxRuntimeExports.jsx("div", _object_spread_props$k(_object_spread$o({}, events), {
+    var _className = useCss(css$1(_templateObject$x(), picker.idle.main, picker.idle.border, trim.bottom, trim.left, trim.right, trim.top, tailor.thickness(edge.bottom), tailor.thickness(edge.left), tailor.thickness(edge.right), tailor.thickness(edge.top), tailor.rounding(radius.bottomLeft), tailor.rounding(radius.bottomRight), tailor.rounding(radius.topLeft), tailor.rounding(radius.topRight), picker.idle.contrast, cursor, tailor.gap(_padding.bottom), tailor.gap(_padding.left), tailor.gap(_padding.right), tailor.gap(_padding.top), tailor.gap(_margin.bottom), tailor.gap(_margin.left), tailor.gap(_margin.right), tailor.gap(_margin.top), WidthChart$4[_width.xl], justification, interactive ? picker.focus.main : picker.idle.main, interactive ? picker.focus.border : picker.idle.border, interactive ? picker.focus.contrast : picker.idle.contrast, interactive ? picker.hover.main : picker.idle.main, interactive ? picker.hover.border : picker.idle.border, interactive ? picker.hover.contrast : picker.idle.contrast, device.break(ZSizeFixed.Large), WidthChart$4[_width.lg], device.break(ZSizeFixed.Medium), WidthChart$4[_width.md], device.break(ZSizeFixed.Small), WidthChart$4[_width.sm], device.break(ZSizeFixed.ExtraSmall), WidthChart$4[_width.xs]));
+    return /*#__PURE__*/ jsxRuntimeExports.jsx("div", _object_spread_props$i(_object_spread$o({}, events), {
         className: cssJoinDefined("ZBox-root", className, _className),
         tabIndex: tabIndex,
         children: children
@@ -22519,7 +22594,7 @@ function _object_spread$n(target) {
     }
     return target;
 }
-function ownKeys$j(object, enumerableOnly) {
+function ownKeys$h(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -22527,12 +22602,12 @@ function ownKeys$j(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$j(target, source) {
+function _object_spread_props$h(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$j(Object(source)).forEach(function(key) {
+        ownKeys$h(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -22565,8 +22640,49 @@ function _object_without_properties_loose$8(source, excluded) {
     }
     return target;
 }
+function _tagged_template_literal$w(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject$w() {
+    var data = _tagged_template_literal$w([
+        "\n    & {\n      align-content: ",
+        ";\n      align-items: ",
+        ";\n      display: ",
+        ";\n      flex-direction: ",
+        ";\n      flex-wrap: ",
+        ";\n      gap: ",
+        ";\n      height: ",
+        ";\n      justify-content: ",
+        ";\n      width: ",
+        ";\n    }\n\n    ",
+        " {\n      height: ",
+        ";\n      width: ",
+        ";\n    }\n\n    ",
+        " {\n      height: ",
+        ";\n      width: ",
+        ";\n    }\n\n    ",
+        " {\n      height: ",
+        ";\n      width: ",
+        ";\n    }\n\n    ",
+        " {\n      height: ",
+        ";\n      width: ",
+        ";\n    }\n  "
+    ]);
+    _templateObject$w = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+var DimensionChart$1 = createSizeChartVariedCss();
 function ZStack(props) {
-    var className = props.className, align = props.align, justify = props.justify, gap = props.gap, name = props.name, orientation = props.orientation, children = props.children, inline = props.inline, wrap = props.wrap, dom = _object_without_properties$8(props, [
+    var className = props.className, align = props.align, justify = props.justify, gap = props.gap, name = props.name, orientation = props.orientation, children = props.children, inline = props.inline, wrap = props.wrap, height = props.height, width = props.width, dom = _object_without_properties$8(props, [
         "className",
         "align",
         "justify",
@@ -22575,21 +22691,24 @@ function ZStack(props) {
         "orientation",
         "children",
         "inline",
-        "wrap"
+        "wrap",
+        "height",
+        "width"
     ]);
+    var device = useFashionDevice();
     var tailor = useFashionTailor();
-    return /*#__PURE__*/ jsxRuntimeExports.jsx("div", _object_spread_props$j(_object_spread$n({
-        className: cssJoinDefined("ZStack-root", className),
-        style: {
-            alignContent: align === null || align === void 0 ? void 0 : align.content,
-            alignItems: align === null || align === void 0 ? void 0 : align.items,
-            display: inline ? "inline-flex" : "flex",
-            flexDirection: orientation === ZOrientation.Horizontal ? "row" : "column",
-            gap: tailor.gap(firstDefined(ZSizeVoid.None, gap)),
-            justifyContent: justify === null || justify === void 0 ? void 0 : justify.content,
-            justifyItems: justify === null || justify === void 0 ? void 0 : justify.items,
-            flexWrap: wrap
-        }
+    var _display = inline ? "inline-flex" : "flex";
+    var _direction = orientation === ZOrientation.Horizontal ? "row" : "column";
+    var _gap = tailor.gap(firstDefined(ZSizeVoid.None, gap));
+    var _alignItems = firstDefined("stretch", align === null || align === void 0 ? void 0 : align.items);
+    var _alignContent = firstDefined("normal", align === null || align === void 0 ? void 0 : align.content);
+    var _justifyContent = firstDefined("start", justify === null || justify === void 0 ? void 0 : justify.content);
+    var _wrap = firstDefined("nowrap", wrap);
+    var _width = new ZDeviceValues(width, ZSizeVaried.Default);
+    var _height = new ZDeviceValues(height, ZSizeVaried.Default);
+    var _className = useCss(css$1(_templateObject$w(), _alignContent, _alignItems, _display, _direction, _wrap, _gap, DimensionChart$1[_height.xl], _justifyContent, DimensionChart$1[_width.xl], device.break(ZSizeFixed.Large), DimensionChart$1[_height.lg], DimensionChart$1[_width.lg], device.break(ZSizeFixed.Medium), DimensionChart$1[_height.md], DimensionChart$1[_width.md], device.break(ZSizeFixed.Small), DimensionChart$1[_height.sm], DimensionChart$1[_width.sm], device.break(ZSizeFixed.ExtraSmall), DimensionChart$1[_height.xs], DimensionChart$1[_width.xs]));
+    return /*#__PURE__*/ jsxRuntimeExports.jsx("div", _object_spread_props$h(_object_spread$n({
+        className: cssJoinDefined("ZStack-root", _className, className)
     }, dom), {
         "data-orientation": orientation,
         "data-name": name,
@@ -22626,7 +22745,7 @@ function _object_spread$m(target) {
     }
     return target;
 }
-function ownKeys$i(object, enumerableOnly) {
+function ownKeys$g(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -22634,12 +22753,12 @@ function ownKeys$i(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$i(target, source) {
+function _object_spread_props$g(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$i(Object(source)).forEach(function(key) {
+        ownKeys$g(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -22742,7 +22861,7 @@ function Typography(props) {
         "weight"
     ]);
     var _className = useTypographyCss(props);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Element, _object_spread_props$i(_object_spread$m({}, dom), {
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Element, _object_spread_props$g(_object_spread$m({}, dom), {
         className: cssJoinDefined("ZTypography-root", className, _className),
         "data-compact": compact,
         "data-fashion": fashion === null || fashion === void 0 ? void 0 : fashion.name,
@@ -22757,7 +22876,7 @@ var ZH1 = function(_param) {
     var className = _param.className, props = _object_without_properties$7(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$i(_object_spread$m({
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$g(_object_spread$m({
         Element: "h1"
     }, props), {
         className: cssJoinDefined("ZH1-root", className),
@@ -22769,7 +22888,7 @@ var ZH2 = function(_param) {
     var className = _param.className, props = _object_without_properties$7(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$i(_object_spread$m({
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$g(_object_spread$m({
         Element: "h2"
     }, props), {
         className: cssJoinDefined("ZH2-root", className),
@@ -22781,7 +22900,7 @@ var ZH3 = function(_param) {
     var className = _param.className, props = _object_without_properties$7(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$i(_object_spread$m({
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$g(_object_spread$m({
         Element: "h3"
     }, props), {
         className: cssJoinDefined("ZH3-root", className),
@@ -22793,7 +22912,7 @@ var ZH5 = function(_param) {
     var className = _param.className, props = _object_without_properties$7(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$i(_object_spread$m({
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$g(_object_spread$m({
         Element: "h5"
     }, props), {
         className: cssJoinDefined("ZH5-root", className),
@@ -22806,7 +22925,7 @@ var ZParagraph = function(_param) {
     var className = _param.className, props = _object_without_properties$7(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$i(_object_spread$m({
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$g(_object_spread$m({
         Element: "p"
     }, props), {
         className: cssJoinDefined("ZParagraph-root", className),
@@ -22818,7 +22937,7 @@ var ZCaption = function(_param) {
     var className = _param.className, props = _object_without_properties$7(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$i(_object_spread$m({
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$g(_object_spread$m({
         Element: "sub"
     }, props), {
         className: cssJoinDefined("ZCaption-root", className),
@@ -22830,7 +22949,7 @@ var ZSubtitle = function(_param) {
     var className = _param.className, props = _object_without_properties$7(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$i(_object_spread$m({
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$g(_object_spread$m({
         Element: "sub"
     }, props), {
         className: cssJoinDefined("ZSubtitle-root", className),
@@ -22842,7 +22961,7 @@ var ZButtonText = function(_param) {
     var className = _param.className, props = _object_without_properties$7(_param, [
         "className"
     ]);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$i(_object_spread$m({
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(Typography, _object_spread_props$g(_object_spread$m({
         Element: "div"
     }, props), {
         className: cssJoinDefined("ZButtonText-root", className),
@@ -23066,7 +23185,7 @@ function _object_spread$k(target) {
     }
     return target;
 }
-function ownKeys$h(object, enumerableOnly) {
+function ownKeys$f(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -23074,12 +23193,12 @@ function ownKeys$h(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$h(target, source) {
+function _object_spread_props$f(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$h(Object(source)).forEach(function(key) {
+        ownKeys$f(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -23148,7 +23267,7 @@ function ZLabel(props) {
         size: ZSizeFixed.Small
     });
     var _className = useCss(css$1(_templateObject$t(), error.idle.main, tailor.thickness(ZSizeFixed.Medium)));
-    return /*#__PURE__*/ jsxRuntimeExports.jsx("label", _object_spread_props$h(_object_spread$k({}, dom), {
+    return /*#__PURE__*/ jsxRuntimeExports.jsx("label", _object_spread_props$f(_object_spread$k({}, dom), {
         className: cssJoinDefined("ZLabel-root", _className, _typography, className),
         htmlFor: htmlFor,
         "data-required": required,
@@ -23184,7 +23303,7 @@ function _object_spread$j(target) {
     }
     return target;
 }
-function ownKeys$g(object, enumerableOnly) {
+function ownKeys$e(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -23192,12 +23311,12 @@ function ownKeys$g(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$g(target, source) {
+function _object_spread_props$e(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$g(Object(source)).forEach(function(key) {
+        ownKeys$e(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -23243,11 +23362,11 @@ function ZLabeled(props) {
     ]);
     var items = orientation === ZOrientation.Horizontal ? "center" : undefined;
     var renderLabel = function(_position) {
-        return position === _position && label && /*#__PURE__*/ jsxRuntimeExports.jsx(ZLabel, _object_spread_props$g(_object_spread$j({}, LabelProps), {
+        return position === _position && label && /*#__PURE__*/ jsxRuntimeExports.jsx(ZLabel, _object_spread_props$e(_object_spread$j({}, LabelProps), {
             children: label
         }));
     };
-    return /*#__PURE__*/ jsxRuntimeExports.jsxs(ZStack, _object_spread_props$g(_object_spread$j({}, dom), {
+    return /*#__PURE__*/ jsxRuntimeExports.jsxs(ZStack, _object_spread_props$e(_object_spread$j({}, dom), {
         align: {
             items: items
         },
@@ -25117,7 +25236,7 @@ function _object_spread$h(target) {
     }
     return target;
 }
-function ownKeys$e(object, enumerableOnly) {
+function ownKeys$c(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -25125,12 +25244,12 @@ function ownKeys$e(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$e(target, source) {
+function _object_spread_props$c(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$e(Object(source)).forEach(function(key) {
+        ownKeys$c(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -25197,7 +25316,7 @@ function ZLink(props) {
     ]);
     var picker = new ZColorPicker(firstDefined(primary, fashion));
     var _className = useCss(css$1(_templateObject$q(), picker.idle.main, picker.active.main, picker.hover.main, picker.focus.main));
-    return /*#__PURE__*/ jsxRuntimeExports.jsx("a", _object_spread_props$e(_object_spread$h({}, rest), {
+    return /*#__PURE__*/ jsxRuntimeExports.jsx("a", _object_spread_props$c(_object_spread$h({}, rest), {
         className: cssJoinDefined("ZLink-root", _className, className),
         href: href,
         "data-name": name,
@@ -26022,7 +26141,7 @@ function _object_spread$e(target) {
     }
     return target;
 }
-function ownKeys$c(object, enumerableOnly) {
+function ownKeys$a(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -26030,12 +26149,12 @@ function ownKeys$c(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$c(target, source) {
+function _object_spread_props$a(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$c(Object(source)).forEach(function(key) {
+        ownKeys$a(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -26137,9 +26256,9 @@ var WidthChart$2 = createSizeChartVariedCss();
     var component = useFashionTheme().component;
     var tailor = useFashionTailor();
     var picker = new ZColorPicker(firstDefined(component, fashion));
-    var _width = new ZDeviceValues(width, ZSizeVaried.Fit);
+    var _width = new ZDeviceValues(width, ZSizeVaried.Default);
     var _className = useCss(css$1(_templateObject$n(), tailor.gap(ZSizeFixed.ExtraSmall), outline ? "transparent" : picker.idle.main, picker.idle.main, borderless ? "none" : "solid", outline ? picker.idle.main : picker.idle.contrast, compact ? 0 : tailor.gap(ZSizeFixed.ExtraSmall), WidthChart$2[_width.xl], tailor.thickness(ZSizeFixed.Medium), picker.focus.main, picker.focus.border, picker.hover.main, picker.hover.border, picker.hover.contrast, picker.active.main, picker.active.border, picker.active.contrast, device.break(ZSizeFixed.Large), WidthChart$2[_width.lg], device.break(ZSizeFixed.Medium), WidthChart$2[_width.md], device.break(ZSizeFixed.Small), WidthChart$2[_width.sm], device.break(ZSizeFixed.ExtraSmall), WidthChart$2[_width.xs]));
-    return /*#__PURE__*/ jsxRuntimeExports.jsx("button", _object_spread_props$c(_object_spread$e({}, dom), {
+    return /*#__PURE__*/ jsxRuntimeExports.jsx("button", _object_spread_props$a(_object_spread$e({}, dom), {
         className: cssJoinDefined("ZButton-root", className, _className),
         disabled: disabled,
         name: name,
@@ -26526,7 +26645,7 @@ function _object_spread$d(target) {
     }
     return target;
 }
-function ownKeys$b(object, enumerableOnly) {
+function ownKeys$9(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -26534,12 +26653,12 @@ function ownKeys$b(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$b(target, source) {
+function _object_spread_props$9(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$b(Object(source)).forEach(function(key) {
+        ownKeys$9(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -26594,10 +26713,10 @@ function ZCard(props) {
     var className = props.className, children = props.children, footer = props.footer, fashion = props.fashion, name = props.name, width = props.width, height = props.height, TitleProps = props.TitleProps;
     var _fashion = firstDefined(surface, fashion);
     var picker = new ZColorPicker(_fashion);
-    var _width = new ZDeviceValues(width, ZSizeVaried.Fit);
-    var _height = new ZDeviceValues(height, ZSizeVaried.Fit);
+    var _width = new ZDeviceValues(width, ZSizeVaried.Default);
+    var _height = new ZDeviceValues(height, ZSizeVaried.Default);
     var _className = useCss(css$1(_templateObject$m(), surface.idle.main, surface.idle.contrast, WidthChart$1[_width.xl], HeightChart$4[_height.xl], picker.idle.main, picker.idle.contrast, tailor.gap(ZSizeFixed.Small), tailor.gap(ZSizeFixed.Small), tailor.gap(ZSizeFixed.Small), device.break(ZSizeFixed.Large), WidthChart$1[_width.lg], HeightChart$4[_height.lg], device.break(ZSizeFixed.Medium), WidthChart$1[_width.md], HeightChart$4[_height.md], device.break(ZSizeFixed.Small), WidthChart$1[_width.sm], HeightChart$4[_height.sm], device.break(ZSizeFixed.ExtraSmall), WidthChart$1[_width.xs], HeightChart$4[_height.xs]));
-    return /*#__PURE__*/ jsxRuntimeExports.jsxs(ZStack, _object_spread_props$b(_object_spread$d({
+    return /*#__PURE__*/ jsxRuntimeExports.jsxs(ZStack, _object_spread_props$9(_object_spread$d({
         align: {
             items: "stretch"
         },
@@ -26607,7 +26726,7 @@ function ZCard(props) {
     }, pickDataAttributes(props)), {
         "data-fashion": _fashion.name,
         children: [
-            /*#__PURE__*/ jsxRuntimeExports.jsx(ZContentTitle, _object_spread_props$b(_object_spread$d({}, TitleProps), {
+            /*#__PURE__*/ jsxRuntimeExports.jsx(ZContentTitle, _object_spread_props$9(_object_spread$d({}, TitleProps), {
                 className: "ZCard-header"
             })),
             /*#__PURE__*/ jsxRuntimeExports.jsx("article", {
@@ -26980,8 +27099,8 @@ var DimensionChart = createSizeChartVariedCss();
     var tailor = useFashionTailor();
     var device = useFashionDevice();
     var align = props.align, className = props.className, children = props.children, columns = props.columns, gap = props.gap, justify = props.justify, rows = props.rows, width = props.width, height = props.height;
-    var _width = new ZDeviceValues(width, ZSizeVaried.Fit);
-    var _height = new ZDeviceValues(height, ZSizeVaried.Fit);
+    var _width = new ZDeviceValues(width, ZSizeVaried.Default);
+    var _height = new ZDeviceValues(height, ZSizeVaried.Default);
     var _columns = new ZDeviceValues(columns, undefined);
     var _gap = new ZDeviceValues(gap, ZSizeVoid.None);
     var _className = useCss(css$1(_templateObject$k(), align === null || align === void 0 ? void 0 : align.content, align === null || align === void 0 ? void 0 : align.items, rows, justify === null || justify === void 0 ? void 0 : justify.content, justify === null || justify === void 0 ? void 0 : justify.items, tailor.gap(_gap.xl), _columns.xl, DimensionChart[_height.xl], DimensionChart[_width.xl], device.break(ZSizeFixed.Large), tailor.gap(_gap.lg), _columns.lg, DimensionChart[_height.lg], DimensionChart[_width.lg], device.break(ZSizeFixed.Medium), tailor.gap(_gap.md), _columns.md, DimensionChart[_height.md], DimensionChart[_width.md], device.break(ZSizeFixed.Small), tailor.gap(_gap.sm), _columns.sm, DimensionChart[_height.sm], DimensionChart[_width.sm], device.break(ZSizeFixed.ExtraSmall), tailor.gap(_gap.xs), _columns.xs, DimensionChart[_height.xs], DimensionChart[_width.xs]));
@@ -27939,26 +28058,7 @@ function _object_spread$9(target) {
     }
     return target;
 }
-function ownKeys$8(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props$8(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$8(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-_object_spread_props$8(_object_spread$9({}, createSizeChartFixedCss(createSizeChartFixedArithmetic(5, 10), "rem"), createSizeChartVariedCss()), _define_property$r({}, ZSizeVaried.Fit, "fit-content"));
+_object_spread$9({}, createSizeChartFixedCss(createSizeChartFixedArithmetic(5, 10), "rem"), createSizeChartVariedCss());
 
 function _define_property$q(obj, key, value) {
     if (key in obj) {
@@ -27988,7 +28088,7 @@ function _object_spread$8(target) {
     }
     return target;
 }
-function ownKeys$7(object, enumerableOnly) {
+function ownKeys$6(object, enumerableOnly) {
     var keys = Object.keys(object);
     if (Object.getOwnPropertySymbols) {
         var symbols = Object.getOwnPropertySymbols(object);
@@ -27996,12 +28096,12 @@ function ownKeys$7(object, enumerableOnly) {
     }
     return keys;
 }
-function _object_spread_props$7(target, source) {
+function _object_spread_props$6(target, source) {
     source = source != null ? source : {};
     if (Object.getOwnPropertyDescriptors) {
         Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
     } else {
-        ownKeys$7(Object(source)).forEach(function(key) {
+        ownKeys$6(Object(source)).forEach(function(key) {
             Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
         });
     }
@@ -28070,7 +28170,7 @@ function ZListItem(props) {
     var py = compact ? tailor.gap(ZSizeFixed.ExtraSmall) : tailor.gap(ZSizeFixed.Small);
     var px = compact ? tailor.gap(ZSizeFixed.ExtraSmall) : tailor.gap(ZSizeFixed.Large);
     var _className = useCss(css$1(_templateObject$g(), cursor, py, px));
-    return /*#__PURE__*/ jsxRuntimeExports.jsx("li", _object_spread_props$7(_object_spread$8({}, dom), {
+    return /*#__PURE__*/ jsxRuntimeExports.jsx("li", _object_spread_props$6(_object_spread$8({}, dom), {
         className: cssJoinDefined("ZListItem-root", _className, className),
         "data-name": name,
         "data-interactive": interactive,
@@ -29444,29 +29544,8 @@ function _object_spread$7(target) {
     }
     return target;
 }
-function ownKeys$6(object, enumerableOnly) {
-    var keys = Object.keys(object);
-    if (Object.getOwnPropertySymbols) {
-        var symbols = Object.getOwnPropertySymbols(object);
-        keys.push.apply(keys, symbols);
-    }
-    return keys;
-}
-function _object_spread_props$6(target, source) {
-    source = source != null ? source : {};
-    if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-        ownKeys$6(Object(source)).forEach(function(key) {
-            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-        });
-    }
-    return target;
-}
-var _obj;
-Object.freeze(_object_spread_props$6(_object_spread$7({}, createSizeChartFixedCss(createSizeChartFixedArithmetic(10, 20), "rem")), (_obj = {}, _define_property$n(_obj, ZSizeVaried.Full, "100%"), _define_property$n(_obj, ZSizeVaried.Fit, undefined), _obj)));
-var _obj1;
-Object.freeze(_object_spread_props$6(_object_spread$7({}, createSizeChartFixedCss(createSizeChartFixedArithmetic(3, 20), "rem")), (_obj1 = {}, _define_property$n(_obj1, ZSizeVaried.Full, "100%"), _define_property$n(_obj1, ZSizeVaried.Fit, undefined), _obj1)));
+Object.freeze(_object_spread$7({}, createSizeChartFixedCss(createSizeChartFixedArithmetic(10, 20), "rem"), createSizeChartVariedCss()));
+Object.freeze(_object_spread$7({}, createSizeChartFixedCss(createSizeChartFixedArithmetic(3, 20), "rem"), createSizeChartVariedCss()));
 
 function _assert_this_initialized$e(self) {
     if (self === void 0) {
@@ -32638,8 +32717,8 @@ var ImageSizeChart = _object_spread$2({}, createSizeChartFixedCss(createSizeChar
  */ function ZImageSource(props) {
     var device = useFashionDevice();
     var className = props.className, src = props.src, height = props.height, width = props.width, name = props.name;
-    var _height = new ZDeviceValues(height, ZSizeVaried.Fit);
-    var _width = new ZDeviceValues(width, ZSizeVaried.Fit);
+    var _height = new ZDeviceValues(height, ZSizeVaried.Default);
+    var _width = new ZDeviceValues(width, ZSizeVaried.Default);
     var _className = useCss(css$1(_templateObject$5(), ImageSizeChart[_width.xl], ImageSizeChart[_height.xl], device.break(ZSizeFixed.Large), ImageSizeChart[_width.lg], ImageSizeChart[_height.lg], device.break(ZSizeFixed.Medium), ImageSizeChart[_width.md], ImageSizeChart[_height.md], device.break(ZSizeFixed.Small), ImageSizeChart[_width.sm], ImageSizeChart[_height.sm], device.break(ZSizeFixed.ExtraSmall), ImageSizeChart[_width.xs], ImageSizeChart[_height.xs]));
     var imageClass = cssJoinDefined("ZImageSource-root", className, _className);
     if (!src) {
@@ -52145,35 +52224,62 @@ function ZRomulatorSettingsPage() {
     });
 }
 
-function ZRomulatorSystemAvatarCard(props) {
-    const { system, CardProps } = props;
-    const src = `/systems/wheel/${system.id}.png`;
-    const _className = useCss(css$1`
-    &.ZRomulatorSystemCard-root .ZRomulatorSystemCard-avatar {
-      height: 100%;
-      width: 100%;
-    }
-  `);
-    return /*#__PURE__*/ jsxRuntimeExports.jsx(ZCard, {
-        className: cssJoinDefined("ZRomulatorSystemCard-root", _className),
-        name: system.id,
-        ...CardProps,
-        children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZStack, {
-            className: "ZRomulatorSystemCard-avatar",
-            orientation: ZOrientation.Horizontal,
-            justify: {
-                content: "center",
-                items: "center"
-            },
-            align: {
-                content: "center",
-                items: "center"
-            },
-            children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZImageSource, {
-                src: src,
-                width: ZSizeFixed.ExtraLarge
+function createDefaultGamesService() {
+    const { api } = new ZRomulatorEnvironmentBuilder().build();
+    const endpoint = new ZUrlBuilder().parse(api).append("games").build();
+    const http = new ZHttpService();
+    return new ZRestfulService(http, endpoint);
+}
+const ZRomulatorGamesServiceContext = /*#__PURE__*/ reactExports.createContext(createDefaultGamesService());
+const useGamesService = ()=>reactExports.useContext(ZRomulatorGamesServiceContext);
+
+function ZRomulatorGamesList(props) {
+    const { value, onValueChange } = props;
+    const [request, setRequest] = useAmbassadorState(value, onValueChange, new ZDataRequestBuilder().build());
+    const games = useGamesService();
+    const { body } = useFashionTheme();
+    const navigate = useNavigate();
+    const renderTile = (value)=>{
+        const { api } = new ZRomulatorEnvironmentBuilder().build();
+        const id = `${value.id}-marquees`;
+        const wheel = `${api}/media/${id}`;
+        return /*#__PURE__*/ jsxRuntimeExports.jsx(ZBox, {
+            className: "ZRomulatorGameTile-root",
+            fashion: body,
+            interactive: true,
+            cursor: "pointer",
+            padding: ZSizeFixed.Small,
+            "data-name": value.id,
+            onClick: ()=>navigate(`/games/${value.id}`),
+            children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZStack, {
+                justify: {
+                    content: "center"
+                },
+                align: {
+                    items: "center"
+                },
+                height: ZSizeVaried.Full,
+                children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZImageSource, {
+                    src: wheel,
+                    width: ZSizeVaried.Full
+                })
             })
-        })
+        }, value.id);
+    };
+    return /*#__PURE__*/ jsxRuntimeExports.jsx(ZGridView, {
+        GridProps: {
+            columns: {
+                xl: "1fr 1fr 1fr 1fr",
+                lg: "1fr 1fr 1fr",
+                md: "1fr 1fr",
+                sm: "1fr"
+            },
+            gap: ZSizeFixed.Medium
+        },
+        dataSource: games,
+        renderItem: renderTile,
+        value: request,
+        onValueChange: setRequest
     });
 }
 
@@ -52212,9 +52318,17 @@ function ZRomulatorSystemPage() {
     const { id } = useParams();
     const { error } = useFashionTheme();
     const [system] = useSystem(firstDefined("", id));
+    const gameFilter = reactExports.useMemo(()=>new ZFilterBinaryBuilder().subject("system").equal().value(id).build(), [
+        id
+    ]);
+    const baseGameRequest = reactExports.useMemo(()=>new ZDataRequestBuilder().filter(gameFilter).build(), [
+        gameFilter
+    ]);
+    const [userRequest, setGameRequest] = useSyncState(baseGameRequest);
     const renderSystemInformation = ()=>{
         if (isStateLoading(system)) {
             return /*#__PURE__*/ jsxRuntimeExports.jsx(ZSuspenseProgress, {
+                name: "system-loading",
                 height: ZSizeFixed.Large
             });
         }
@@ -52225,13 +52339,41 @@ function ZRomulatorSystemPage() {
                 message: system.message
             });
         }
-        return /*#__PURE__*/ jsxRuntimeExports.jsx(ZRomulatorSystemAvatarCard, {
-            system: system
+        return /*#__PURE__*/ jsxRuntimeExports.jsxs(ZStack, {
+            gap: ZSizeFixed.Medium,
+            children: [
+                /*#__PURE__*/ jsxRuntimeExports.jsx(ZCard, {
+                    name: "system-info",
+                    TitleProps: {
+                        avatar: /*#__PURE__*/ jsxRuntimeExports.jsx(ZIconFontAwesome, {
+                            name: "puzzle-piece",
+                            width: ZSizeFixed.Medium
+                        }),
+                        heading: system.name,
+                        subHeading: `Generation ${system.generation}`
+                    }
+                }),
+                /*#__PURE__*/ jsxRuntimeExports.jsx(ZCard, {
+                    name: "game-list",
+                    TitleProps: {
+                        avatar: /*#__PURE__*/ jsxRuntimeExports.jsx(ZIconFontAwesome, {
+                            name: "gamepad",
+                            width: ZSizeFixed.Medium
+                        }),
+                        heading: "Games",
+                        subHeading: `Your ${system.name} Games`
+                    },
+                    children: /*#__PURE__*/ jsxRuntimeExports.jsx(ZRomulatorGamesList, {
+                        value: userRequest,
+                        onValueChange: setGameRequest
+                    })
+                })
+            ]
         });
     };
     return /*#__PURE__*/ jsxRuntimeExports.jsxs(ZStack, {
         gap: ZSizeFixed.Medium,
-        className: cssJoinDefined("ZRomulatorSystemPage-root"),
+        className: "ZRomulatorSystemPage-root",
         children: [
             /*#__PURE__*/ jsxRuntimeExports.jsx(ZBreadcrumbsLocation, {}),
             renderSystemInformation()