@underlayerdev/ui 0.16.0 → 0.17.0

package/fesm2022/underlayerdev-ui.mjs

@@ -1,10 +1,10 @@
 import * as i1$1 from "@angular/cdk/accordion";
 import { CdkAccordion, CdkAccordionItem } from "@angular/cdk/accordion";
 import * as i0 from "@angular/core";
-import { Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, Pipe, SecurityContext, ViewChild, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, model, output, signal, viewChild } from "@angular/core";
+import { Component, DestroyRef, Directive, ElementRef, HostBinding, HostListener, Injectable, PLATFORM_ID, Pipe, SecurityContext, ViewChild, ViewEncapsulation, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
 import { takeUntilDestroyed, toSignal } from "@angular/core/rxjs-interop";
 import * as i1 from "@angular/common";
-import { CommonModule, CurrencyPipe, NgTemplateOutlet } from "@angular/common";
+import { CommonModule, CurrencyPipe, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
 import { RouterLink } from "@angular/router";
 import { CdkMenu, CdkMenuItem, CdkMenuTrigger } from "@angular/cdk/menu";
 import { CdkTrapFocus } from "@angular/cdk/a11y";
@@ -8434,6 +8434,2763 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+var variables_default = {
+	"primitive": { "color": {
+		"cyan": {
+			"transparent": {
+				"8 - 30": {
+					"type": "color",
+					"value": "rgba(88, 183, 188, 0.3)"
+				},
+				"8 - 20": {
+					"type": "color",
+					"value": "rgba(88, 183, 188, 0.2)"
+				},
+				"8 - 10": {
+					"type": "color",
+					"value": "rgba(88, 183, 188, 0.1)"
+				},
+				"8 - 0": {
+					"type": "color",
+					"value": "rgba(88, 183, 188, 0)"
+				}
+			},
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#0e2728"
+				},
+				"2": {
+					"type": "color",
+					"value": "#09383a"
+				},
+				"3": {
+					"type": "color",
+					"value": "#0c494c"
+				},
+				"4": {
+					"type": "color",
+					"value": "#105e63"
+				},
+				"5": {
+					"type": "color",
+					"value": "#14767b"
+				},
+				"6": {
+					"type": "color",
+					"value": "#158389"
+				},
+				"7": {
+					"type": "color",
+					"value": "#3aa7ad"
+				},
+				"8": {
+					"type": "color",
+					"value": "#58b7bc"
+				},
+				"9": {
+					"type": "color",
+					"value": "#84d5da"
+				},
+				"10": {
+					"type": "color",
+					"value": "#ace2e6"
+				}
+			}
+		},
+		"blue": {
+			"transparent": {
+				"8 - 30": {
+					"type": "color",
+					"value": "rgba(87, 164, 241, 0.3)"
+				},
+				"8 - 20": {
+					"type": "color",
+					"value": "rgba(87, 164, 241, 0.2)"
+				},
+				"8 - 10": {
+					"type": "color",
+					"value": "rgba(87, 164, 241, 0.1)"
+				},
+				"8 - 0": {
+					"type": "color",
+					"value": "rgba(87, 164, 241, 0)"
+				}
+			},
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#11263a"
+				},
+				"2": {
+					"type": "color",
+					"value": "#08325c"
+				},
+				"3": {
+					"type": "color",
+					"value": "#0a4179"
+				},
+				"4": {
+					"type": "color",
+					"value": "#0d549c"
+				},
+				"5": {
+					"type": "color",
+					"value": "#0f69c2"
+				},
+				"6": {
+					"type": "color",
+					"value": "#1275d9"
+				},
+				"7": {
+					"type": "color",
+					"value": "#3692ee"
+				},
+				"8": {
+					"type": "color",
+					"value": "#57a4f1"
+				},
+				"9": {
+					"type": "color",
+					"value": "#86c0fb"
+				},
+				"10": {
+					"type": "color",
+					"value": "#aed5fc"
+				}
+			}
+		},
+		"pink": {
+			"transparent": {
+				"8 - 30": {
+					"type": "color",
+					"value": "rgba(251, 127, 209, 0.3)"
+				},
+				"8 - 20": {
+					"type": "color",
+					"value": "rgba(251, 127, 209, 0.2)"
+				},
+				"8 - 10": {
+					"type": "color",
+					"value": "rgba(251, 127, 209, 0.1)"
+				},
+				"8 - 0": {
+					"type": "color",
+					"value": "rgba(251, 127, 209, 0)"
+				}
+			},
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#381b2e"
+				},
+				"2": {
+					"type": "color",
+					"value": "#61234c"
+				},
+				"3": {
+					"type": "color",
+					"value": "#7f2e64"
+				},
+				"4": {
+					"type": "color",
+					"value": "#a33b81"
+				},
+				"5": {
+					"type": "color",
+					"value": "#c3469a"
+				},
+				"6": {
+					"type": "color",
+					"value": "#e653b5"
+				},
+				"7": {
+					"type": "color",
+					"value": "#fb65c9"
+				},
+				"8": {
+					"type": "color",
+					"value": "#fb7fd1"
+				},
+				"9": {
+					"type": "color",
+					"value": "#fda7e0"
+				},
+				"10": {
+					"type": "color",
+					"value": "#ffc2eb"
+				}
+			}
+		},
+		"orange": {
+			"transparent": {
+				"8 - 30": {
+					"type": "color",
+					"value": "rgba(255, 171, 110, 0.3)"
+				},
+				"8 - 20": {
+					"type": "color",
+					"value": "rgba(255, 171, 110, 0.2)"
+				},
+				"8 - 10": {
+					"type": "color",
+					"value": "rgba(255, 171, 110, 0.1)"
+				},
+				"8 - 0": {
+					"type": "color",
+					"value": "rgba(255, 171, 110, 0)"
+				}
+			},
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#3a2414"
+				},
+				"2": {
+					"type": "color",
+					"value": "#6b3610"
+				},
+				"3": {
+					"type": "color",
+					"value": "#8c4715"
+				},
+				"4": {
+					"type": "color",
+					"value": "#b55c1b"
+				},
+				"5": {
+					"type": "color",
+					"value": "#e87523"
+				},
+				"6": {
+					"type": "color",
+					"value": "#ff8126"
+				},
+				"7": {
+					"type": "color",
+					"value": "#ff9a51"
+				},
+				"8": {
+					"type": "color",
+					"value": "#ffab6e"
+				},
+				"9": {
+					"type": "color",
+					"value": "#ffd9af"
+				},
+				"10": {
+					"type": "color",
+					"value": "#ffd8bc"
+				}
+			}
+		},
+		"yellow": {
+			"transparent": {
+				"8 - 30": {
+					"type": "color",
+					"value": "rgba(255, 229, 143, 0.3)"
+				},
+				"8 - 20": {
+					"type": "color",
+					"value": "rgba(255, 229, 143, 0.2)"
+				},
+				"8 - 10": {
+					"type": "color",
+					"value": "rgba(255, 229, 143, 0.1)"
+				},
+				"8 - 0": {
+					"type": "color",
+					"value": "rgba(255, 229, 143, 0)"
+				}
+			},
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#3e351a"
+				},
+				"2": {
+					"type": "color",
+					"value": "#695719"
+				},
+				"3": {
+					"type": "color",
+					"value": "#8a7121"
+				},
+				"4": {
+					"type": "color",
+					"value": "#b2922b"
+				},
+				"5": {
+					"type": "color",
+					"value": "#e4bb37"
+				},
+				"6": {
+					"type": "color",
+					"value": "#face3c"
+				},
+				"7": {
+					"type": "color",
+					"value": "#ffda5f"
+				},
+				"8": {
+					"type": "color",
+					"value": "#ffe58f"
+				},
+				"9": {
+					"type": "color",
+					"value": "#ffe9a3"
+				},
+				"10": {
+					"type": "color",
+					"value": "#fff1c1"
+				}
+			}
+		},
+		"green": {
+			"transparent": {
+				"8 - 30": {
+					"type": "color",
+					"value": "rgba(80, 192, 108, 0.3)"
+				},
+				"8 - 20": {
+					"type": "color",
+					"value": "rgba(80, 192, 108, 0.2)"
+				},
+				"8 - 10": {
+					"type": "color",
+					"value": "rgba(80, 192, 108, 0.1)"
+				},
+				"8 - 0": {
+					"type": "color",
+					"value": "rgba(80, 192, 108, 0)"
+				}
+			},
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#152e1b"
+				},
+				"2": {
+					"type": "color",
+					"value": "#053c13"
+				},
+				"3": {
+					"type": "color",
+					"value": "#074f19"
+				},
+				"4": {
+					"type": "color",
+					"value": "#096620"
+				},
+				"5": {
+					"type": "color",
+					"value": "#0b7a27"
+				},
+				"6": {
+					"type": "color",
+					"value": "#0e892d"
+				},
+				"7": {
+					"type": "color",
+					"value": "#32b051"
+				},
+				"8": {
+					"type": "color",
+					"value": "#50c06c"
+				},
+				"9": {
+					"type": "color",
+					"value": "#7edc96"
+				},
+				"10": {
+					"type": "color",
+					"value": "#a9e7b9"
+				}
+			}
+		},
+		"red": {
+			"transparent": {
+				"8 - 30": {
+					"type": "color",
+					"value": "rgba(243, 112, 112, 0.3)"
+				},
+				"8 - 20": {
+					"type": "color",
+					"value": "rgba(243, 112, 112, 0.2)"
+				},
+				"8 - 10": {
+					"type": "color",
+					"value": "rgba(243, 112, 112, 0.1)"
+				},
+				"8 - 0": {
+					"type": "color",
+					"value": "rgba(243, 112, 112, 0)"
+				}
+			},
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#3a1a1a"
+				},
+				"2": {
+					"type": "color",
+					"value": "#5a1b1b"
+				},
+				"3": {
+					"type": "color",
+					"value": "#762323"
+				},
+				"4": {
+					"type": "color",
+					"value": "#982d2d"
+				},
+				"5": {
+					"type": "color",
+					"value": "#c33a3a"
+				},
+				"6": {
+					"type": "color",
+					"value": "#d64040"
+				},
+				"7": {
+					"type": "color",
+					"value": "#f15353"
+				},
+				"8": {
+					"type": "color",
+					"value": "#f37070"
+				},
+				"9": {
+					"type": "color",
+					"value": "#f69d9d"
+				},
+				"10": {
+					"type": "color",
+					"value": "#fdb9b9"
+				}
+			}
+		},
+		"white": {
+			"0": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0)"
+			},
+			"5": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.05)"
+			},
+			"7": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.07)"
+			},
+			"10": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.1)"
+			},
+			"20": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.2)"
+			},
+			"30": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.3)"
+			},
+			"50": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.5)"
+			},
+			"70": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.7)"
+			},
+			"100": {
+				"type": "color",
+				"value": "#ffffff"
+			}
+		},
+		"black": {
+			"0": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0)"
+			},
+			"5": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.05)"
+			},
+			"7": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.07)"
+			},
+			"10": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.1)"
+			},
+			"20": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.2)"
+			},
+			"30": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.3)"
+			},
+			"50": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.5)"
+			},
+			"70": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.7)"
+			},
+			"100": {
+				"type": "color",
+				"value": "#000000"
+			}
+		},
+		"grey": {
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#0a0a0a"
+				},
+				"2": {
+					"type": "color",
+					"value": "#232323"
+				},
+				"3": {
+					"type": "color",
+					"value": "#3b3b3b"
+				},
+				"4": {
+					"type": "color",
+					"value": "#545454"
+				},
+				"5": {
+					"type": "color",
+					"value": "#6c6c6c"
+				},
+				"6": {
+					"type": "color",
+					"value": "#858585"
+				},
+				"7": {
+					"type": "color",
+					"value": "#9d9d9d"
+				},
+				"8": {
+					"type": "color",
+					"value": "#b6b6b6"
+				},
+				"9": {
+					"type": "color",
+					"value": "#cecece"
+				},
+				"10": {
+					"type": "color",
+					"value": "#e7e7e7"
+				}
+			},
+			"transparent": { "1-70": {
+				"type": "color",
+				"value": "rgba(10, 10, 10, 0.7)"
+			} }
+		},
+		"purple": {
+			"solid": {
+				"1": {
+					"type": "color",
+					"value": "#291c44"
+				},
+				"2": {
+					"type": "color",
+					"value": "#351f68"
+				},
+				"3": {
+					"type": "color",
+					"value": "#452988"
+				},
+				"4": {
+					"type": "color",
+					"value": "#5935af"
+				},
+				"5": {
+					"type": "color",
+					"value": "#6f3de0"
+				},
+				"6": {
+					"type": "color",
+					"value": "#7e4af7"
+				},
+				"7": {
+					"type": "color",
+					"value": "#9668ff"
+				},
+				"8": {
+					"type": "color",
+					"value": "#a781ff"
+				},
+				"9": {
+					"type": "color",
+					"value": "#c2a8ff"
+				},
+				"10": {
+					"type": "color",
+					"value": "#d6c5ff"
+				}
+			},
+			"transparent": {
+				"8 - 30": {
+					"type": "color",
+					"value": "rgba(167, 129, 255, 0.3)"
+				},
+				"8 - 20": {
+					"type": "color",
+					"value": "rgba(167, 129, 255, 0.2)"
+				},
+				"8 - 10": {
+					"type": "color",
+					"value": "rgba(167, 129, 255, 0.1)"
+				},
+				"8 - 0": {
+					"type": "color",
+					"value": "rgba(167, 129, 255, 0)"
+				}
+			}
+		}
+	} },
+	"color": {
+		"background": {
+			"main": {
+				"type": "color",
+				"value": "#0a0a0a"
+			},
+			"grey-lvl-1": {
+				"type": "color",
+				"value": "#232323"
+			},
+			"grey-lvl-2": {
+				"type": "color",
+				"value": "#3b3b3b"
+			},
+			"white-light": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.1)"
+			},
+			"black-strong": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.7)"
+			},
+			"black-medium": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.3)"
+			},
+			"white-extra-light": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.05)"
+			},
+			"main-strong": {
+				"type": "color",
+				"value": "rgba(10, 10, 10, 0.7)"
+			},
+			"purple": {
+				"type": "color",
+				"value": "#6f3de0"
+			},
+			"purple-light": {
+				"type": "color",
+				"value": "#c2a8ff"
+			},
+			"white": {
+				"type": "color",
+				"value": "#ffffff"
+			},
+			"white-medium-strong": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.5)"
+			},
+			"green-light": {
+				"type": "color",
+				"value": "#7edc96"
+			},
+			"green": {
+				"type": "color",
+				"value": "#0b7a27"
+			},
+			"red-light": {
+				"type": "color",
+				"value": "#f69d9d"
+			},
+			"red": {
+				"type": "color",
+				"value": "#c33a3a"
+			},
+			"orange-light": {
+				"type": "color",
+				"value": "#ffd9af"
+			},
+			"orange": {
+				"type": "color",
+				"value": "#e87523"
+			},
+			"white-medium-light": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.2)"
+			}
+		},
+		"interactive-surface": {
+			"solid": {
+				"grey-lvl-1": {
+					"hover": {
+						"type": "color",
+						"value": "#3b3b3b"
+					},
+					"active": {
+						"type": "color",
+						"value": "#232323"
+					},
+					"selected": {
+						"type": "color",
+						"value": "#3b3b3b"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "#232323"
+					},
+					"enabled": {
+						"type": "color",
+						"value": "#232323"
+					}
+				},
+				"grey-lvl-2": {
+					"hover": {
+						"type": "color",
+						"value": "#545454"
+					},
+					"active": {
+						"type": "color",
+						"value": "#3b3b3b"
+					},
+					"selected": {
+						"type": "color",
+						"value": "#545454"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "#232323"
+					},
+					"enabled": {
+						"type": "color",
+						"value": "#3b3b3b"
+					}
+				},
+				"purple": {
+					"enabled": {
+						"type": "color",
+						"value": "#6f3de0"
+					},
+					"hover": {
+						"type": "color",
+						"value": "#7e4af7"
+					},
+					"active": {
+						"type": "color",
+						"value": "#5935af"
+					},
+					"selected": {
+						"type": "color",
+						"value": "#7e4af7"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "#232323"
+					}
+				},
+				"red": {
+					"enabled": {
+						"type": "color",
+						"value": "#c33a3a"
+					},
+					"hover": {
+						"type": "color",
+						"value": "#d64040"
+					},
+					"active": {
+						"type": "color",
+						"value": "#982d2d"
+					},
+					"selected": {
+						"type": "color",
+						"value": "#d64040"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "#232323"
+					}
+				},
+				"white": {
+					"enabled": {
+						"type": "color",
+						"value": "#ffffff"
+					},
+					"hover": {
+						"type": "color",
+						"value": "#e7e7e7"
+					},
+					"active": {
+						"type": "color",
+						"value": "#ffffff"
+					},
+					"selected": {
+						"type": "color",
+						"value": "#ffffff"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "#232323"
+					}
+				},
+				"yellow": {
+					"enabled": {
+						"type": "color",
+						"value": "#ffe9a3"
+					},
+					"hover": {
+						"type": "color",
+						"value": "#fff1c1"
+					},
+					"active": {
+						"type": "color",
+						"value": "#ffe58f"
+					},
+					"selected": {
+						"type": "color",
+						"value": "#fff1c1"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "#232323"
+					}
+				},
+				"green": {
+					"enabled": {
+						"type": "color",
+						"value": "#0b7a27"
+					},
+					"hover": {
+						"type": "color",
+						"value": "#0e892d"
+					},
+					"active": {
+						"type": "color",
+						"value": "#096620"
+					},
+					"selected": {
+						"type": "color",
+						"value": "#0e892d"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "#232323"
+					}
+				},
+				"orange": {
+					"enabled": {
+						"type": "color",
+						"value": "#e87523"
+					},
+					"hover": {
+						"type": "color",
+						"value": "#ff8126"
+					},
+					"active": {
+						"type": "color",
+						"value": "#b55c1b"
+					},
+					"selected": {
+						"type": "color",
+						"value": "#ff8126"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "#232323"
+					}
+				}
+			},
+			"transparent": {
+				"purple": {
+					"enabled": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0.2)"
+					},
+					"hover": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0.3)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0.2)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0.3)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.05)"
+					}
+				},
+				"red": {
+					"enabled": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0.2)"
+					},
+					"hover": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0.3)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0.2)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0.3)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.05)"
+					}
+				},
+				"white": {
+					"enabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.1)"
+					},
+					"hover": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.2)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.1)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.2)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.05)"
+					}
+				},
+				"orange": {
+					"enabled": {
+						"type": "color",
+						"value": "rgba(255, 171, 110, 0.2)"
+					},
+					"hover": {
+						"type": "color",
+						"value": "rgba(255, 171, 110, 0.3)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(255, 171, 110, 0.2)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(255, 171, 110, 0.3)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.05)"
+					}
+				},
+				"green": {
+					"enabled": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0.2)"
+					},
+					"hover": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0.3)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0.2)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0.3)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.05)"
+					}
+				},
+				"black": {
+					"enabled": {
+						"type": "color",
+						"value": "rgba(0, 0, 0, 0.3)"
+					},
+					"hover": {
+						"type": "color",
+						"value": "rgba(0, 0, 0, 0.5)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(0, 0, 0, 0.7)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(0, 0, 0, 0.5)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.05)"
+					}
+				},
+				"yellow": {
+					"enabled": {
+						"type": "color",
+						"value": "rgba(255, 229, 143, 0.2)"
+					},
+					"hover": {
+						"type": "color",
+						"value": "rgba(255, 229, 143, 0.3)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(255, 229, 143, 0.2)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(255, 229, 143, 0.3)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.05)"
+					}
+				}
+			},
+			"ghost": {
+				"purple": {
+					"hover": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0.3)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0.2)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0.3)"
+					},
+					"enabled": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(167, 129, 255, 0)"
+					}
+				},
+				"red": {
+					"hover": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0.3)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0.2)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0.3)"
+					},
+					"enabled": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(243, 112, 112, 0)"
+					}
+				},
+				"white": {
+					"hover": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.2)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.1)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0.2)"
+					},
+					"enabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(255, 255, 255, 0)"
+					}
+				},
+				"green": {
+					"hover": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0.3)"
+					},
+					"active": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0.2)"
+					},
+					"selected": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0.3)"
+					},
+					"enabled": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0)"
+					},
+					"disabled": {
+						"type": "color",
+						"value": "rgba(80, 192, 108, 0)"
+					}
+				}
+			},
+			"outline": {
+				"white": {
+					"border-enabled": { "value": "rgba(255, 255, 255, 0.3)" },
+					"border-hover": { "value": "#ffffff" },
+					"border-active": { "value": "rgba(255, 255, 255, 0.5)" },
+					"border-disabled": { "value": "#6c6c6c" },
+					"text": { "value": "#ffffff" }
+				},
+				"purple": {
+					"border-enabled": { "value": "#c2a8ff" },
+					"border-hover": { "value": "#c2a8ff" },
+					"border-active": { "value": "#c2a8ff" },
+					"border-disabled": { "value": "#6c6c6c" },
+					"text": { "value": "#c2a8ff" }
+				},
+				"red": {
+					"border-enabled": { "value": "#f69d9d" },
+					"border-hover": { "value": "#f69d9d" },
+					"border-active": { "value": "#f69d9d" },
+					"border-disabled": { "value": "#6c6c6c" },
+					"text": { "value": "#f69d9d" }
+				},
+				"green": {
+					"border-enabled": { "value": "#7edc96" },
+					"border-hover": { "value": "#7edc96" },
+					"border-active": { "value": "#7edc96" },
+					"border-disabled": { "value": "#6c6c6c" },
+					"text": { "value": "#7edc96" }
+				}
+			}
+		},
+		"text": {
+			"primary": {
+				"type": "color",
+				"value": "#ffffff"
+			},
+			"secondary": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.7)"
+			},
+			"tertiary": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.5)"
+			},
+			"disabled": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.3)"
+			},
+			"purple": {
+				"type": "color",
+				"value": "#c2a8ff"
+			},
+			"green": {
+				"type": "color",
+				"value": "#7edc96"
+			},
+			"red": {
+				"type": "color",
+				"value": "#f69d9d"
+			},
+			"orange": {
+				"type": "color",
+				"value": "#ffd9af"
+			},
+			"yellow": {
+				"type": "color",
+				"value": "#ffe9a3"
+			},
+			"inverted": {
+				"type": "color",
+				"value": "#000000"
+			},
+			"purple-inverted": {
+				"type": "color",
+				"value": "#6f3de0"
+			},
+			"inverted-strong": {
+				"type": "color",
+				"value": "rgba(0, 0, 0, 0.7)"
+			}
+		},
+		"border": {
+			"white-light": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.1)"
+			},
+			"white-medium-strong": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.5)"
+			},
+			"purple": {
+				"type": "color",
+				"value": "#c2a8ff"
+			},
+			"white-medium": {
+				"type": "color",
+				"value": "rgba(255, 255, 255, 0.3)"
+			},
+			"grey": {
+				"type": "color",
+				"value": "#6c6c6c"
+			},
+			"black": {
+				"type": "color",
+				"value": "#0a0a0a"
+			},
+			"white": {
+				"type": "color",
+				"value": "#ffffff"
+			},
+			"red": {
+				"type": "color",
+				"value": "#f69d9d"
+			},
+			"green": {
+				"type": "color",
+				"value": "#7edc96"
+			},
+			"orange": {
+				"type": "color",
+				"value": "#ffd9af"
+			},
+			"yellow": {
+				"type": "color",
+				"value": "#ffe9a3"
+			}
+		},
+		"link": {
+			"enabled": {
+				"type": "color",
+				"value": "#c2a8ff"
+			},
+			"hover": {
+				"type": "color",
+				"value": "#d6c5ff"
+			},
+			"active": {
+				"type": "color",
+				"value": "#a781ff"
+			}
+		}
+	},
+	"typography": { "font": {
+		"family": {
+			"headline-s": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"body-m": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"caption-l": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"brand-caption-l": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			},
+			"caption-mono": {
+				"type": "fontFamily",
+				"value": "Roboto Mono"
+			},
+			"body-l": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"headline-m": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"headline-l": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"headline-xl": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"headline-2xl": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"headline-3xl": {
+				"type": "fontFamily",
+				"value": "Underlayer Nunito Sans"
+			},
+			"brand-body-m": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			},
+			"brand-body-l": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			},
+			"brand-headline-s": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			},
+			"brand-headline-m": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			},
+			"brand-headline-l": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			},
+			"brand-headline-xl": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			},
+			"brand-headline-2xl": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			},
+			"brand-headline-3xl": {
+				"type": "fontFamily",
+				"value": "Underlayer Brand"
+			}
+		},
+		"line-height": {
+			"headline-s": {
+				"type": "dimension",
+				"value": "36px"
+			},
+			"caption-l": {
+				"type": "dimension",
+				"value": "20px"
+			},
+			"body-m": {
+				"type": "dimension",
+				"value": "24px"
+			},
+			"body-l": {
+				"type": "dimension",
+				"value": "28px"
+			},
+			"headline-m": {
+				"type": "dimension",
+				"value": "36px"
+			},
+			"headline-xl": {
+				"type": "dimension",
+				"value": "44px"
+			},
+			"headline-l": {
+				"type": "dimension",
+				"value": "40px"
+			},
+			"headline-2xl": {
+				"type": "dimension",
+				"value": "48px"
+			},
+			"headline-3xl": {
+				"type": "dimension",
+				"value": "48px"
+			},
+			"caption-mono": {
+				"type": "dimension",
+				"value": "20px"
+			},
+			"brand-caption-l": {
+				"type": "dimension",
+				"value": "20px"
+			},
+			"brand-body-m": {
+				"type": "dimension",
+				"value": "24px"
+			},
+			"brand-body-l": {
+				"type": "dimension",
+				"value": "28px"
+			},
+			"brand-headline-s": {
+				"type": "dimension",
+				"value": "36px"
+			},
+			"brand-headline-m": {
+				"type": "dimension",
+				"value": "36px"
+			},
+			"brand-headline-l": {
+				"type": "dimension",
+				"value": "40px"
+			},
+			"brand-headline-xl": {
+				"type": "dimension",
+				"value": "44px"
+			},
+			"brand-headline-2xl": {
+				"type": "dimension",
+				"value": "48px"
+			},
+			"brand-headline-3xl": {
+				"type": "dimension",
+				"value": "48px"
+			}
+		},
+		"size": {
+			"body-l": {
+				"type": "dimension",
+				"value": "18px"
+			},
+			"caption-l": {
+				"type": "dimension",
+				"value": "14px"
+			},
+			"body-m": {
+				"type": "dimension",
+				"value": "16px"
+			},
+			"headline-s": {
+				"type": "dimension",
+				"value": "24px"
+			},
+			"headline-m": {
+				"type": "dimension",
+				"value": "28px"
+			},
+			"headline-l": {
+				"type": "dimension",
+				"value": "32px"
+			},
+			"headline-xl": {
+				"type": "dimension",
+				"value": "36px"
+			},
+			"headline-2xl": {
+				"type": "dimension",
+				"value": "40px"
+			},
+			"headline-3xl": {
+				"type": "dimension",
+				"value": "48px"
+			},
+			"caption-mono": {
+				"type": "dimension",
+				"value": "14px"
+			},
+			"brand-caption-l": {
+				"type": "dimension",
+				"value": "14px"
+			},
+			"brand-body-m": {
+				"type": "dimension",
+				"value": "16px"
+			},
+			"brand-body-l": {
+				"type": "dimension",
+				"value": "18px"
+			},
+			"brand-headline-s": {
+				"type": "dimension",
+				"value": "24px"
+			},
+			"brand-headline-m": {
+				"type": "dimension",
+				"value": "28px"
+			},
+			"brand-headline-l": {
+				"type": "dimension",
+				"value": "32px"
+			},
+			"brand-headline-xl": {
+				"type": "dimension",
+				"value": "36px"
+			},
+			"brand-headline-2xl": {
+				"type": "dimension",
+				"value": "40px"
+			},
+			"brand-headline-3xl": {
+				"type": "dimension",
+				"value": "48px"
+			}
+		},
+		"letter-spacing": {
+			"caption-l": {
+				"type": "dimension",
+				"value": "0.14px"
+			},
+			"body-m": {
+				"type": "dimension",
+				"value": "0px"
+			},
+			"body-l": {
+				"type": "dimension",
+				"value": "0px"
+			},
+			"headline-s": {
+				"type": "dimension",
+				"value": "-0.24px"
+			},
+			"headline-m": {
+				"type": "dimension",
+				"value": "-0.28px"
+			},
+			"headline-l": {
+				"type": "dimension",
+				"value": "-0.32px"
+			},
+			"headline-xl": {
+				"type": "dimension",
+				"value": "-0.36px"
+			},
+			"headline-2xl": {
+				"type": "dimension",
+				"value": "-0.4px"
+			},
+			"headline-3xl": {
+				"type": "dimension",
+				"value": "-0.48px"
+			},
+			"caption-mono": {
+				"type": "dimension",
+				"value": "0px"
+			},
+			"brand-headline-3xl": {
+				"type": "dimension",
+				"value": "4.8px"
+			},
+			"brand-headline-2xl": {
+				"type": "dimension",
+				"value": "4px"
+			},
+			"brand-headline-xl": {
+				"type": "dimension",
+				"value": "3.6px"
+			},
+			"brand-headline-l": {
+				"type": "dimension",
+				"value": "3.2px"
+			},
+			"brand-headline-m": {
+				"type": "dimension",
+				"value": "2.8px"
+			},
+			"brand-caption-l": {
+				"type": "dimension",
+				"value": "1.4px"
+			},
+			"brand-body-m": {
+				"type": "dimension",
+				"value": "1.6px"
+			},
+			"brand-body-l": {
+				"type": "dimension",
+				"value": "2px"
+			},
+			"brand-headline-s": {
+				"type": "dimension",
+				"value": "2.4px"
+			}
+		},
+		"weight": {
+			"extrablack": {
+				"type": "number",
+				"value": "1000"
+			},
+			"regular": {
+				"type": "number",
+				"value": "400"
+			},
+			"extrabold": {
+				"type": "number",
+				"value": "800"
+			},
+			"medium": {
+				"type": "number",
+				"value": "500"
+			}
+		}
+	} },
+	"spacing": { "spacing": {
+		"1": {
+			"type": "dimension",
+			"value": "4px"
+		},
+		"2": {
+			"type": "dimension",
+			"value": "8px"
+		},
+		"3": {
+			"type": "dimension",
+			"value": "12px"
+		},
+		"4": {
+			"type": "dimension",
+			"value": "16px"
+		},
+		"5": {
+			"type": "dimension",
+			"value": "20px"
+		},
+		"6": {
+			"type": "dimension",
+			"value": "24px"
+		},
+		"7": {
+			"type": "dimension",
+			"value": "28px"
+		},
+		"8": {
+			"type": "dimension",
+			"value": "32px"
+		},
+		"9": {
+			"type": "dimension",
+			"value": "36px"
+		},
+		"10": {
+			"type": "dimension",
+			"value": "40px"
+		},
+		"11": {
+			"type": "dimension",
+			"value": "44px"
+		},
+		"12": {
+			"type": "dimension",
+			"value": "48px"
+		},
+		"14": {
+			"type": "dimension",
+			"value": "56px"
+		},
+		"15": {
+			"type": "dimension",
+			"value": "60px"
+		},
+		"16": {
+			"type": "dimension",
+			"value": "64px"
+		},
+		"20": {
+			"type": "dimension",
+			"value": "80px"
+		},
+		"24": {
+			"type": "dimension",
+			"value": "96px"
+		},
+		"28": {
+			"type": "dimension",
+			"value": "112px"
+		},
+		"32": {
+			"type": "dimension",
+			"value": "128px"
+		},
+		"36": {
+			"type": "dimension",
+			"value": "144px"
+		},
+		"40": {
+			"type": "dimension",
+			"value": "160px"
+		},
+		"44": {
+			"type": "dimension",
+			"value": "176px"
+		},
+		"48": {
+			"type": "dimension",
+			"value": "192px"
+		},
+		"52": {
+			"type": "dimension",
+			"value": "208px"
+		},
+		"56": {
+			"type": "dimension",
+			"value": "224px"
+		},
+		"60": {
+			"type": "dimension",
+			"value": "240px"
+		},
+		"64": {
+			"type": "dimension",
+			"value": "256px"
+		},
+		"72": {
+			"type": "dimension",
+			"value": "288px"
+		},
+		"80": {
+			"type": "dimension",
+			"value": "320px"
+		},
+		"88": {
+			"type": "dimension",
+			"value": "352px"
+		},
+		"96": {
+			"type": "dimension",
+			"value": "384px"
+		},
+		"104": {
+			"type": "dimension",
+			"value": "416px"
+		},
+		"112": {
+			"type": "dimension",
+			"value": "448px"
+		},
+		"120": {
+			"type": "dimension",
+			"value": "480px"
+		},
+		"128": {
+			"type": "dimension",
+			"value": "512px"
+		}
+	} },
+	"radius": { "radius": {
+		"1": {
+			"type": "dimension",
+			"value": "4px"
+		},
+		"2": {
+			"type": "dimension",
+			"value": "8px"
+		},
+		"3": {
+			"type": "dimension",
+			"value": "12px"
+		},
+		"4": {
+			"type": "dimension",
+			"value": "16px"
+		},
+		"6": {
+			"type": "dimension",
+			"value": "24px"
+		},
+		"8": {
+			"type": "dimension",
+			"value": "32px"
+		},
+		"16": {
+			"type": "dimension",
+			"value": "64px"
+		},
+		"full": {
+			"type": "dimension",
+			"value": "4096px"
+		}
+	} },
+	"iconography": { "font": {
+		"family": { "icon": { "value": "Underlayer Icons" } },
+		"weight": {
+			"medium": { "value": "Medium" },
+			"bold": { "value": "Bold" }
+		},
+		"size": {
+			"3": {
+				"type": "dimension",
+				"value": "12px"
+			},
+			"4": {
+				"type": "dimension",
+				"value": "16px"
+			},
+			"5": {
+				"type": "dimension",
+				"value": "20px"
+			},
+			"6": {
+				"type": "dimension",
+				"value": "24px"
+			},
+			"7": {
+				"type": "dimension",
+				"value": "28px"
+			},
+			"8": {
+				"type": "dimension",
+				"value": "32px"
+			},
+			"10": {
+				"type": "dimension",
+				"value": "40px"
+			},
+			"12": {
+				"type": "dimension",
+				"value": "48px"
+			},
+			"16": {
+				"type": "dimension",
+				"value": "64px"
+			},
+			"24": {
+				"type": "dimension",
+				"value": "96px"
+			},
+			"32": {
+				"type": "dimension",
+				"value": "128px"
+			}
+		},
+		"line-height": {
+			"4": {
+				"type": "dimension",
+				"value": "16px"
+			},
+			"5": {
+				"type": "dimension",
+				"value": "20px"
+			},
+			"6": {
+				"type": "dimension",
+				"value": "24px"
+			},
+			"7": {
+				"type": "dimension",
+				"value": "28px"
+			},
+			"8": {
+				"type": "dimension",
+				"value": "32px"
+			},
+			"10": {
+				"type": "dimension",
+				"value": "40px"
+			},
+			"12": {
+				"type": "dimension",
+				"value": "48px"
+			},
+			"16": {
+				"type": "dimension",
+				"value": "64px"
+			},
+			"24": {
+				"type": "dimension",
+				"value": "96px"
+			},
+			"32": {
+				"type": "dimension",
+				"value": "128px"
+			}
+		}
+	} },
+	"component": {
+		"dropdown-list-max-height": {
+			"type": "dimension",
+			"value": "316px"
+		},
+		"container": {
+			"gallery": { "max-width": {
+				"type": "dimension",
+				"value": "2176px"
+			} },
+			"product": { "max-width": {
+				"type": "dimension",
+				"value": "1920px"
+			} },
+			"form": { "max-width": {
+				"type": "dimension",
+				"value": "720px"
+			} }
+		},
+		"control": {
+			"height": {
+				"xs": {
+					"type": "dimension",
+					"value": "24px"
+				},
+				"sm": {
+					"type": "dimension",
+					"value": "32px"
+				},
+				"md": {
+					"type": "dimension",
+					"value": "40px"
+				},
+				"lg": {
+					"type": "dimension",
+					"value": "48px"
+				},
+				"xl": {
+					"type": "dimension",
+					"value": "64px"
+				}
+			},
+			"min-width": {
+				"xs": {
+					"type": "dimension",
+					"value": "64px"
+				},
+				"sm": {
+					"type": "dimension",
+					"value": "96px"
+				},
+				"md": {
+					"type": "dimension",
+					"value": "112px"
+				},
+				"lg": {
+					"type": "dimension",
+					"value": "144px"
+				}
+			},
+			"icon-only-size": {
+				"xs": {
+					"type": "dimension",
+					"value": "24px"
+				},
+				"sm": {
+					"type": "dimension",
+					"value": "32px"
+				},
+				"md": {
+					"type": "dimension",
+					"value": "40px"
+				},
+				"lg": {
+					"type": "dimension",
+					"value": "48px"
+				}
+			},
+			"vertical-width": { "lg": {
+				"type": "dimension",
+				"value": "164px"
+			} }
+		},
+		"avatar-size-2xl": {
+			"type": "dimension",
+			"value": "128px"
+		},
+		"avatar-size-3xl": {
+			"type": "dimension",
+			"value": "160px"
+		}
+	},
+	"breakpoint": {
+		"xs": {
+			"type": "dimension",
+			"value": "0px"
+		},
+		"sm": {
+			"type": "dimension",
+			"value": "768px"
+		},
+		"md": {
+			"type": "dimension",
+			"value": "1024px"
+		},
+		"lg": {
+			"type": "dimension",
+			"value": "1280px"
+		},
+		"xl": {
+			"type": "dimension",
+			"value": "1600px"
+		}
+	},
+	"content": { "icon-glyph": {
+		"placeholder": { "value": "placeholder" },
+		"activity": { "value": "activity" },
+		"arrow_trending_down": { "value": "arrow_trending_down" },
+		"arrow_trending_up": { "value": "arrow_trending_up" },
+		"bar_chart_peak": { "value": "bar_chart_peak" },
+		"bar_chart_rise": { "value": "bar_chart_rise" },
+		"circular_chart": { "value": "circular_chart" },
+		"credit_card": { "value": "credit_card" },
+		"paypal": { "value": "paypal" },
+		"shopping_bag": { "value": "shopping_bag" },
+		"shopping_cart": { "value": "shopping_cart" },
+		"shopping_cart_add": { "value": "shopping_cart_add" },
+		"shopping_cart_dashed": { "value": "shopping_cart_dashed" },
+		"store": { "value": "store" },
+		"visa": { "value": "visa" },
+		"wallet": { "value": "wallet" },
+		"compass": { "value": "compass" },
+		"globe": { "value": "globe" },
+		"globe_lock": { "value": "globe_lock" },
+		"globe_minus": { "value": "globe_minus" },
+		"globe_plus": { "value": "globe_plus" },
+		"globe_dashed": { "value": "globe_dashed" },
+		"map": { "value": "map" },
+		"map_pin": { "value": "map_pin" },
+		"navigation": { "value": "navigation" },
+		"path": { "value": "path" },
+		"cloud": { "value": "cloud" },
+		"cloud_drizzle": { "value": "cloud_drizzle" },
+		"cloud_lightning": { "value": "cloud_lightning" },
+		"cloud_dashed": { "value": "cloud_dashed" },
+		"cloud_rain": { "value": "cloud_rain" },
+		"cloud_snow": { "value": "cloud_snow" },
+		"drop": { "value": "drop" },
+		"flame": { "value": "flame" },
+		"ice": { "value": "ice" },
+		"moon": { "value": "moon" },
+		"sun": { "value": "sun" },
+		"sunrise": { "value": "sunrise" },
+		"sunset": { "value": "sunset" },
+		"thermometer": { "value": "thermometer" },
+		"wind": { "value": "wind" },
+		"zap": { "value": "zap" },
+		"apple": { "value": "apple" },
+		"chrome": { "value": "chrome" },
+		"crossplatform": { "value": "crossplatform" },
+		"linux": { "value": "linux" },
+		"windows": { "value": "windows" },
+		"xbox": { "value": "xbox" },
+		"discord": { "value": "discord" },
+		"facebook": { "value": "facebook" },
+		"linkedin": { "value": "linkedin" },
+		"medium": { "value": "medium" },
+		"telegram": { "value": "telegram" },
+		"twitter": { "value": "twitter" },
+		"youtube": { "value": "youtube" },
+		"at_sign": { "value": "at_sign" },
+		"beta": { "value": "beta" },
+		"blockchain": { "value": "blockchain" },
+		"bluetooth": { "value": "bluetooth" },
+		"branch": { "value": "branch" },
+		"camera": { "value": "camera" },
+		"camera_dashed": { "value": "camera_dashed" },
+		"cloud_download": { "value": "cloud_download" },
+		"cloud_upload": { "value": "cloud_upload" },
+		"code_brackets": { "value": "code_brackets" },
+		"coins_pile": { "value": "coins_pile" },
+		"collectible": { "value": "collectible" },
+		"compatible": { "value": "compatible" },
+		"computer": { "value": "computer" },
+		"crypto": { "value": "crypto" },
+		"crypto_add": { "value": "crypto_add" },
+		"crypto_exchanged": { "value": "crypto_exchanged" },
+		"crypto_received": { "value": "crypto_received" },
+		"crypto_sent": { "value": "crypto_sent" },
+		"demo": { "value": "demo" },
+		"dlc": { "value": "dlc" },
+		"exception": { "value": "exception" },
+		"headphones": { "value": "headphones" },
+		"mail": { "value": "mail" },
+		"merge": { "value": "merge" },
+		"message": { "value": "message" },
+		"message_chat": { "value": "message_chat" },
+		"mic": { "value": "mic" },
+		"mic_dashed": { "value": "mic_dashed" },
+		"monitor_zap": { "value": "monitor_zap" },
+		"network": { "value": "network" },
+		"phone": { "value": "phone" },
+		"phone_call": { "value": "phone_call" },
+		"phone_forwarded": { "value": "phone_forwarded" },
+		"phone_incoming": { "value": "phone_incoming" },
+		"phone_missed": { "value": "phone_missed" },
+		"phone_dashed": { "value": "phone_dashed" },
+		"phone_outgoing": { "value": "phone_outgoing" },
+		"photo": { "value": "photo" },
+		"photo_dashed": { "value": "photo_dashed" },
+		"printer": { "value": "printer" },
+		"rss": { "value": "rss" },
+		"score": { "value": "score" },
+		"screen": { "value": "screen" },
+		"server": { "value": "server" },
+		"smartphone": { "value": "smartphone" },
+		"smart_contract": { "value": "smart_contract" },
+		"streaming": { "value": "streaming" },
+		"tablet": { "value": "tablet" },
+		"terminal": { "value": "terminal" },
+		"translate": { "value": "translate" },
+		"apps_cloud": { "value": "apps_cloud" },
+		"usb": { "value": "usb" },
+		"video": { "value": "video" },
+		"widgets": { "value": "widgets" },
+		"widgets_add": { "value": "widgets_add" },
+		"wifi": { "value": "wifi" },
+		"wifi_dashed": { "value": "wifi_dashed" },
+		"application": { "value": "application" },
+		"apps_grid": { "value": "apps_grid" },
+		"close": { "value": "close" },
+		"external_link": { "value": "external_link" },
+		"layers": { "value": "layers" },
+		"log_in": { "value": "log_in" },
+		"log_out": { "value": "log_out" },
+		"menu": { "value": "menu" },
+		"search": { "value": "search" },
+		"sidebar": { "value": "sidebar" },
+		"windows_maximize": { "value": "windows_maximize" },
+		"window_minimize": { "value": "window_minimize" },
+		"window_normalize": { "value": "window_normalize" },
+		"zoom_in": { "value": "zoom_in" },
+		"zoom_out": { "value": "zoom_out" },
+		"equal": { "value": "equal" },
+		"equal_circle": { "value": "equal_circle" },
+		"hash": { "value": "hash" },
+		"inequal": { "value": "inequal" },
+		"infinite": { "value": "infinite" },
+		"minus": { "value": "minus" },
+		"minus_circle": { "value": "minus_circle" },
+		"percent": { "value": "percent" },
+		"plus": { "value": "plus" },
+		"plus_circle": { "value": "plus_circle" },
+		"x_circle": { "value": "x_circle" },
+		"australian_dollar": { "value": "australian_dollar" },
+		"bitcoin": { "value": "bitcoin" },
+		"brazilian_real": { "value": "brazilian_real" },
+		"canadian_dollar": { "value": "canadian_dollar" },
+		"dollar": { "value": "dollar" },
+		"ether": { "value": "ether" },
+		"euro": { "value": "euro" },
+		"indian_rupee": { "value": "indian_rupee" },
+		"korean_won": { "value": "korean_won" },
+		"krona": { "value": "krona" },
+		"mexican_peso": { "value": "mexican_peso" },
+		"new_zealand_dollar": { "value": "new_zealand_dollar" },
+		"pound_sterling": { "value": "pound_sterling" },
+		"swedish_krona": { "value": "swedish_krona" },
+		"swiss_franc": { "value": "swiss_franc" },
+		"yen": { "value": "yen" },
+		"yuan": { "value": "yuan" },
+		"currency_exchange": { "value": "currency_exchange" },
+		"currency_receive": { "value": "currency_receive" },
+		"currency_send": { "value": "currency_send" },
+		"marketplace_auction": { "value": "marketplace_auction" },
+		"marketplace_cancel": { "value": "marketplace_cancel" },
+		"marketplace_fixed": { "value": "marketplace_fixed" },
+		"marketplace_inverted_auction": { "value": "marketplace_inverted_auction" },
+		"nft": { "value": "nft" },
+		"refund": { "value": "refund" },
+		"refund_hand": { "value": "refund_hand" },
+		"resell": { "value": "resell" },
+		"resell_cancel": { "value": "resell_cancel" },
+		"resell_dashed": { "value": "resell_dashed" },
+		"trade": { "value": "trade" },
+		"trade_dashed": { "value": "trade_dashed" },
+		"anchors": { "value": "anchors" },
+		"archive": { "value": "archive" },
+		"auction_hammer": { "value": "auction_hammer" },
+		"award": { "value": "award" },
+		"award_dashed": { "value": "award_dashed" },
+		"balance": { "value": "balance" },
+		"bell_dashed": { "value": "bell_dashed" },
+		"bell_on": { "value": "bell_on" },
+		"book": { "value": "book" },
+		"bookmark": { "value": "bookmark" },
+		"box": { "value": "box" },
+		"box_closed": { "value": "box_closed" },
+		"box_open": { "value": "box_open" },
+		"cards": { "value": "cards" },
+		"chess": { "value": "chess" },
+		"chest": { "value": "chest" },
+		"company": { "value": "company" },
+		"company_add": { "value": "company_add" },
+		"company_ban": { "value": "company_ban" },
+		"company_freeze": { "value": "company_freeze" },
+		"crown": { "value": "crown" },
+		"diamond": { "value": "diamond" },
+		"dice": { "value": "dice" },
+		"explosion": { "value": "explosion" },
+		"factory": { "value": "factory" },
+		"feather": { "value": "feather" },
+		"fiole": { "value": "fiole" },
+		"flag": { "value": "flag" },
+		"forge": { "value": "forge" },
+		"gamepad": { "value": "gamepad" },
+		"gamepad_oldschool": { "value": "gamepad_oldschool" },
+		"gamepad_dashed": { "value": "gamepad_dashed" },
+		"gem": { "value": "gem" },
+		"gift": { "value": "gift" },
+		"glove": { "value": "glove" },
+		"gun_pointer": { "value": "gun_pointer" },
+		"helmet": { "value": "helmet" },
+		"home": { "value": "home" },
+		"inbox": { "value": "inbox" },
+		"key": { "value": "key" },
+		"lightbulb": { "value": "lightbulb" },
+		"lock_close": { "value": "lock_close" },
+		"lock_open": { "value": "lock_open" },
+		"megaphone": { "value": "megaphone" },
+		"painting_palette": { "value": "painting_palette" },
+		"podium": { "value": "podium" },
+		"puzzle": { "value": "puzzle" },
+		"repair": { "value": "repair" },
+		"rocket": { "value": "rocket" },
+		"shield": { "value": "shield" },
+		"shield_dashed": { "value": "shield_dashed" },
+		"plaintext": { "value": "plaintext" },
+		"skull": { "value": "skull" },
+		"sport": { "value": "sport" },
+		"sword": { "value": "sword" },
+		"swords": { "value": "swords" },
+		"sword_shield": { "value": "sword_shield" },
+		"tag": { "value": "tag" },
+		"ticket": { "value": "ticket" },
+		"trophy": { "value": "trophy" },
+		"vr": { "value": "vr" },
+		"cast": { "value": "cast" },
+		"copyright": { "value": "copyright" },
+		"fast_forward": { "value": "fast_forward" },
+		"image": { "value": "image" },
+		"image_add": { "value": "image_add" },
+		"image_dashed": { "value": "image_dashed" },
+		"image_landscape": { "value": "image_landscape" },
+		"image_portrait": { "value": "image_portrait" },
+		"live": { "value": "live" },
+		"maximize": { "value": "maximize" },
+		"minimize": { "value": "minimize" },
+		"music": { "value": "music" },
+		"pause": { "value": "pause" },
+		"play": { "value": "play" },
+		"play_dashed": { "value": "play_dashed" },
+		"power": { "value": "power" },
+		"rewind": { "value": "rewind" },
+		"screen_share": { "value": "screen_share" },
+		"skip_back": { "value": "skip_back" },
+		"skip_forward": { "value": "skip_forward" },
+		"volume_0": { "value": "volume_0" },
+		"volume_1": { "value": "volume_1" },
+		"volume_2": { "value": "volume_2" },
+		"volume_x": { "value": "volume_x" },
+		"alert": { "value": "alert" },
+		"asterisk": { "value": "asterisk" },
+		"block": { "value": "block" },
+		"certified": { "value": "certified" },
+		"check": { "value": "check" },
+		"check_circle": { "value": "check_circle" },
+		"check_double": { "value": "check_double" },
+		"cross": { "value": "cross" },
+		"cross_circle": { "value": "cross_circle" },
+		"dix_huit_plus": { "value": "dix_huit_plus" },
+		"info": { "value": "info" },
+		"admin": { "value": "admin" },
+		"user": { "value": "user" },
+		"user_add": { "value": "user_add" },
+		"user_check": { "value": "user_check" },
+		"user_group": { "value": "user_group" },
+		"user_group_add": { "value": "user_group_add" },
+		"user_group_check": { "value": "user_group_check" },
+		"user_group_remove": { "value": "user_group_remove" },
+		"user_profile": { "value": "user_profile" },
+		"user_remove": { "value": "user_remove" },
+		"user_swap": { "value": "user_swap" },
+		"user_team": { "value": "user_team" },
+		"calendar": { "value": "calendar" },
+		"calendar_dashed": { "value": "calendar_dashed" },
+		"clock": { "value": "clock" },
+		"clock_dashed": { "value": "clock_dashed" },
+		"history": { "value": "history" },
+		"hourglass": { "value": "hourglass" },
+		"align_center": { "value": "align_center" },
+		"align_justify": { "value": "align_justify" },
+		"align_left": { "value": "align_left" },
+		"align_right": { "value": "align_right" },
+		"bold": { "value": "bold" },
+		"delete": { "value": "delete" },
+		"emoji": { "value": "emoji" },
+		"italic": { "value": "italic" },
+		"list_bullets": { "value": "list_bullets" },
+		"list_number": { "value": "list_number" },
+		"paragraph": { "value": "paragraph" },
+		"type": { "value": "type" },
+		"type_1": { "value": "type_1" },
+		"type_2": { "value": "type_2" },
+		"type_3": { "value": "type_3" },
+		"underline": { "value": "underline" },
+		"attachment": { "value": "attachment" },
+		"center_to_fit": { "value": "center_to_fit" },
+		"copy": { "value": "copy" },
+		"crop": { "value": "crop" },
+		"download": { "value": "download" },
+		"drag": { "value": "drag" },
+		"edit": { "value": "edit" },
+		"eye_dashed": { "value": "eye_dashed" },
+		"eye_on": { "value": "eye_on" },
+		"filter": { "value": "filter" },
+		"heart": { "value": "heart" },
+		"heart_fill": { "value": "heart_fill" },
+		"link_alt": { "value": "link_alt" },
+		"link_unlink": { "value": "link_unlink" },
+		"more_options": { "value": "more_options" },
+		"save": { "value": "save" },
+		"settings": { "value": "settings" },
+		"share": { "value": "share" },
+		"sliders": { "value": "sliders" },
+		"sort": { "value": "sort" },
+		"star": { "value": "star" },
+		"star_filled": { "value": "star_filled" },
+		"thumbs_down": { "value": "thumbs_down" },
+		"thumbs_up": { "value": "thumbs_up" },
+		"trash": { "value": "trash" },
+		"uninstall": { "value": "uninstall" },
+		"upload": { "value": "upload" },
+		"view_grid": { "value": "view_grid" },
+		"view_list": { "value": "view_list" },
+		"wishlist_remove": { "value": "wishlist_remove" },
+		"arrow_corner_down_left": { "value": "arrow_corner_down_left" },
+		"arrow_corner_down_right": { "value": "arrow_corner_down_right" },
+		"arrow_corner_left_down": { "value": "arrow_corner_left_down" },
+		"arrow_corner_left_up": { "value": "arrow_corner_left_up" },
+		"arrow_corner_right_down": { "value": "arrow_corner_right_down" },
+		"arrow_corner_right_up": { "value": "arrow_corner_right_up" },
+		"arrow_corner_up_left": { "value": "arrow_corner_up_left" },
+		"arrow_corner_up_right": { "value": "arrow_corner_up_right" },
+		"arrow_down": { "value": "arrow_down" },
+		"arrow_down_left": { "value": "arrow_down_left" },
+		"arrow_down_right": { "value": "arrow_down_right" },
+		"arrow_left": { "value": "arrow_left" },
+		"arrow_right": { "value": "arrow_right" },
+		"arrow_up": { "value": "arrow_up" },
+		"arrow_up_left": { "value": "arrow_up_left" },
+		"arrow_up_right": { "value": "arrow_up_right" },
+		"chevron_down": { "value": "chevron_down" },
+		"chevron_left": { "value": "chevron_left" },
+		"chevron_right": { "value": "chevron_right" },
+		"chevron_up": { "value": "chevron_up" },
+		"collapse": { "value": "collapse" },
+		"collapse_horizontal": { "value": "collapse_horizontal" },
+		"crossing_arrows": { "value": "crossing_arrows" },
+		"exchange_horizontal": { "value": "exchange_horizontal" },
+		"exchange_vertical": { "value": "exchange_vertical" },
+		"expand": { "value": "expand" },
+		"expand_horizontal": { "value": "expand_horizontal" },
+		"move": { "value": "move" },
+		"receive": { "value": "receive" },
+		"refresh_ccw": { "value": "refresh_ccw" },
+		"refresh_cw": { "value": "refresh_cw" },
+		"repeat": { "value": "repeat" },
+		"rotate_ccw": { "value": "rotate_ccw" },
+		"rotate_cw": { "value": "rotate_cw" },
+		"send": { "value": "send" },
+		"shuffle": { "value": "shuffle" },
+		"clipboard": { "value": "clipboard" },
+		"clipboard_text": { "value": "clipboard_text" },
+		"file": { "value": "file" },
+		"file_encrypted": { "value": "file_encrypted" },
+		"file_text": { "value": "file_text" },
+		"file_text_double": { "value": "file_text_double" },
+		"folder": { "value": "folder" },
+		"games": { "value": "games" },
+		"league": { "value": "league" },
+		"double_elim": { "value": "double_elim" },
+		"gauntlet": { "value": "gauntlet" },
+		"round_robin": { "value": "round_robin" },
+		"simple_stage": { "value": "simple_stage" },
+		"single_elim": { "value": "single_elim" },
+		"swiss_system": { "value": "swiss_system" },
+		"bracket_group": { "value": "bracket_group" },
+		"screen_wide": { "value": "screen_wide" },
+		"workshop": { "value": "workshop" },
+		"cpu": { "value": "cpu" },
+		"ultra_games_logo": { "value": "ultra_games_logo" },
+		"no_result": { "value": "no_result" },
+		"library": { "value": "library" },
+		"minus_small": { "value": "minus_small" },
+		"x": { "value": "X" },
+		"twitch": { "value": "twitch" },
+		"instagram": { "value": "insta" },
+		"resell_lock": { "value": "resell_lock" },
+		"lock_exclusive_locked": { "value": "lock_exclusive_locked" },
+		"lock_exclusive_open": { "value": "lock_exclusive_open" }
+	} }
+};
+const lineWidths = {
+	96: 6,
+	64: 6,
+	48: 5,
+	32: 4,
+	24: 4,
+	20: 3,
+	16: 3
+};
+var RadialComponent = class RadialComponent {
+	size = input(96, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	infinite = input(false, {
+		...ngDevMode ? { debugName: "infinite" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	percentage = input(0, ...ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	lineWidth = computed(() => lineWidths[this.size()], ...ngDevMode ? [{ debugName: "lineWidth" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: RadialComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: RadialComponent,
+		isStandalone: true,
+		selector: "ul-radial",
+		inputs: {
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			infinite: {
+				classPropertyName: "infinite",
+				publicName: "infinite",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			percentage: {
+				classPropertyName: "percentage",
+				publicName: "percentage",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div\n  class=\"ul-radial\"\n  role=\"progressbar\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-valuenow]=\"percentage()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [class.ul-radial--infinite]=\"infinite()\"\n  [style.width.px]=\"size()\"\n  [style.padding.px]=\"lineWidth()\"\n  [style.--ul-radial-percentage]=\"percentage() + '%'\"\n></div>\n",
+		styles: [".ul-radial{width:96px;padding:6px;aspect-ratio:1;border-radius:50%;background:#fff}.ul-radial--infinite{--ul-radial-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;animation:ul-radial-rotation 1s infinite linear}.ul-radial:not(.ul-radial--infinite){--ul-radial-percentage: 25%;--ul-radial-mask: conic-gradient( #fff var(--ul-radial-percentage), transparent var(--ul-radial-percentage) ), linear-gradient(#000 0 0) content-box}.ul-radial{-webkit-mask:var(--ul-radial-mask);mask:var(--ul-radial-mask);-webkit-mask-composite:source-out;mask-composite:subtract}@keyframes ul-radial-rotation{to{transform:rotate(1turn)}}\n"]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RadialComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ul-radial",
+			template: "<div\n  class=\"ul-radial\"\n  role=\"progressbar\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-valuenow]=\"percentage()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [class.ul-radial--infinite]=\"infinite()\"\n  [style.width.px]=\"size()\"\n  [style.padding.px]=\"lineWidth()\"\n  [style.--ul-radial-percentage]=\"percentage() + '%'\"\n></div>\n",
+			styles: [".ul-radial{width:96px;padding:6px;aspect-ratio:1;border-radius:50%;background:#fff}.ul-radial--infinite{--ul-radial-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;animation:ul-radial-rotation 1s infinite linear}.ul-radial:not(.ul-radial--infinite){--ul-radial-percentage: 25%;--ul-radial-mask: conic-gradient( #fff var(--ul-radial-percentage), transparent var(--ul-radial-percentage) ), linear-gradient(#000 0 0) content-box}.ul-radial{-webkit-mask:var(--ul-radial-mask);mask:var(--ul-radial-mask);-webkit-mask-composite:source-out;mask-composite:subtract}@keyframes ul-radial-rotation{to{transform:rotate(1turn)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		infinite: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "infinite",
+				required: false
+			}]
+		}],
+		percentage: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "percentage",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var LoadMoreComponent = class LoadMoreComponent {
+	hasMore = input(false, ...ngDevMode ? [{ debugName: "hasMore" }] : /* istanbul ignore next */ []);
+	loading = input(false, ...ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []);
+	error = input(false, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	autoLoadPages = input(2, ...ngDevMode ? [{ debugName: "autoLoadPages" }] : /* istanbul ignore next */ []);
+	showEnd = input(true, ...ngDevMode ? [{ debugName: "showEnd" }] : /* istanbul ignore next */ []);
+	rootMargin = input("600px", ...ngDevMode ? [{ debugName: "rootMargin" }] : /* istanbul ignore next */ []);
+	loadingLabel = input("Loading", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+	resetKey = input(null, ...ngDevMode ? [{ debugName: "resetKey" }] : /* istanbul ignore next */ []);
+	loadMore = output();
+	retry = output();
+	sentinel = viewChild("sentinel", ...ngDevMode ? [{ debugName: "sentinel" }] : /* istanbul ignore next */ []);
+	isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+	destroyRef = inject(DestroyRef);
+	autoLoaded = signal(0, ...ngDevMode ? [{ debugName: "autoLoaded" }] : /* istanbul ignore next */ []);
+	isWide = signal(false, ...ngDevMode ? [{ debugName: "isWide" }] : /* istanbul ignore next */ []);
+	isAuto = computed(() => !this.isWide() || this.autoLoaded() < this.autoLoadPages(), ...ngDevMode ? [{ debugName: "isAuto" }] : /* istanbul ignore next */ []);
+	showButton = computed(() => this.hasMore() && !this.error() && !this.isAuto(), ...ngDevMode ? [{ debugName: "showButton" }] : /* istanbul ignore next */ []);
+	showEndContent = computed(() => !this.hasMore() && !this.loading() && !this.error() && this.showEnd(), ...ngDevMode ? [{ debugName: "showEndContent" }] : /* istanbul ignore next */ []);
+	canObserve = computed(() => this.hasMore() && !this.loading() && !this.error() && this.isAuto(), ...ngDevMode ? [{ debugName: "canObserve" }] : /* istanbul ignore next */ []);
+	constructor() {
+		if (!this.isBrowser) return;
+		const media = window.matchMedia(`(min-width: ${variables_default.breakpoint.sm.value})`);
+		this.isWide.set(media.matches);
+		const onChange = (event) => this.isWide.set(event.matches);
+		media.addEventListener("change", onChange);
+		this.destroyRef.onDestroy(() => media.removeEventListener("change", onChange));
+		effect(() => {
+			this.resetKey();
+			untracked(() => this.autoLoaded.set(0));
+		});
+		effect((onCleanup) => {
+			const element = this.sentinel()?.nativeElement;
+			if (!element || !this.canObserve()) return;
+			const observer = new IntersectionObserver(([entry]) => {
+				if (!entry.isIntersecting) return;
+				observer.disconnect();
+				this.autoLoaded.update((count) => count + 1);
+				this.loadMore.emit();
+			}, { rootMargin: this.rootMargin() });
+			observer.observe(element);
+			onCleanup(() => observer.disconnect());
+		});
+	}
+	onButtonClick() {
+		this.autoLoaded.update((count) => count + 1);
+		this.loadMore.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: LoadMoreComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: LoadMoreComponent,
+		isStandalone: true,
+		selector: "ul-load-more",
+		inputs: {
+			hasMore: {
+				classPropertyName: "hasMore",
+				publicName: "hasMore",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoLoadPages: {
+				classPropertyName: "autoLoadPages",
+				publicName: "autoLoadPages",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showEnd: {
+				classPropertyName: "showEnd",
+				publicName: "showEnd",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			rootMargin: {
+				classPropertyName: "rootMargin",
+				publicName: "rootMargin",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingLabel: {
+				classPropertyName: "loadingLabel",
+				publicName: "loadingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			resetKey: {
+				classPropertyName: "resetKey",
+				publicName: "resetKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			loadMore: "loadMore",
+			retry: "retry"
+		},
+		host: { classAttribute: "ul-load-more" },
+		viewQueries: [{
+			propertyName: "sentinel",
+			first: true,
+			predicate: ["sentinel"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div #sentinel class=\"ul-load-more__sentinel\" aria-hidden=\"true\"></div>\n\n<div class=\"ul-load-more__status\" aria-live=\"polite\">\n  @if (loading()) {\n    <ul-radial [size]=\"32\" [infinite]=\"true\" [ariaLabel]=\"loadingLabel()\" />\n  } @else if (error()) {\n    <span class=\"ul-load-more__message\">\n      <ng-content select=\"[ulLoadMoreError]\" />\n    </span>\n  } @else if (showEndContent()) {\n    <span class=\"ul-load-more__message\">\n      <ng-content select=\"[ulLoadMoreEnd]\" />\n    </span>\n  }\n</div>\n\n@if (error()) {\n  <ul-button theme=\"outline-white\" (buttonClick)=\"retry.emit()\">\n    <ng-content select=\"[ulLoadMoreRetry]\" />\n  </ul-button>\n} @else if (showButton() && !loading()) {\n  <ul-button theme=\"outline-white\" (buttonClick)=\"onButtonClick()\">\n    <ng-content />\n  </ul-button>\n}\n",
+		styles: [".ul-load-more{display:flex;flex-direction:column;align-items:center;gap:16px;padding-block:24px}.ul-load-more__sentinel{width:100%;height:1px}.ul-load-more__status{display:flex;align-items:center;justify-content:center}.ul-load-more__message{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}\n"],
+		dependencies: [{
+			kind: "component",
+			type: ButtonComponent,
+			selector: "ul-button",
+			inputs: [
+				"size",
+				"theme",
+				"iconOnly",
+				"vertical",
+				"disabled",
+				"type",
+				"ariaLabel"
+			],
+			outputs: ["buttonClick"]
+		}, {
+			kind: "component",
+			type: RadialComponent,
+			selector: "ul-radial",
+			inputs: [
+				"size",
+				"infinite",
+				"percentage",
+				"ariaLabel"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: LoadMoreComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ul-load-more",
+			imports: [ButtonComponent, RadialComponent],
+			host: { class: "ul-load-more" },
+			template: "<div #sentinel class=\"ul-load-more__sentinel\" aria-hidden=\"true\"></div>\n\n<div class=\"ul-load-more__status\" aria-live=\"polite\">\n  @if (loading()) {\n    <ul-radial [size]=\"32\" [infinite]=\"true\" [ariaLabel]=\"loadingLabel()\" />\n  } @else if (error()) {\n    <span class=\"ul-load-more__message\">\n      <ng-content select=\"[ulLoadMoreError]\" />\n    </span>\n  } @else if (showEndContent()) {\n    <span class=\"ul-load-more__message\">\n      <ng-content select=\"[ulLoadMoreEnd]\" />\n    </span>\n  }\n</div>\n\n@if (error()) {\n  <ul-button theme=\"outline-white\" (buttonClick)=\"retry.emit()\">\n    <ng-content select=\"[ulLoadMoreRetry]\" />\n  </ul-button>\n} @else if (showButton() && !loading()) {\n  <ul-button theme=\"outline-white\" (buttonClick)=\"onButtonClick()\">\n    <ng-content />\n  </ul-button>\n}\n",
+			styles: [".ul-load-more{display:flex;flex-direction:column;align-items:center;gap:16px;padding-block:24px}.ul-load-more__sentinel{width:100%;height:1px}.ul-load-more__status{display:flex;align-items:center;justify-content:center}.ul-load-more__message{font-family:Underlayer Nunito Sans;line-height:24px;font-size:16px;letter-spacing:0px;font-weight:400;color:#ffffffb3}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		hasMore: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasMore",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		autoLoadPages: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoLoadPages",
+				required: false
+			}]
+		}],
+		showEnd: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showEnd",
+				required: false
+			}]
+		}],
+		rootMargin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rootMargin",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}],
+		resetKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resetKey",
+				required: false
+			}]
+		}],
+		loadMore: [{
+			type: i0.Output,
+			args: ["loadMore"]
+		}],
+		retry: [{
+			type: i0.Output,
+			args: ["retry"]
+		}],
+		sentinel: [{
+			type: i0.ViewChild,
+			args: ["sentinel", { isSignal: true }]
+		}]
+	}
+});
 var NavbarLogoSlotDirective = class NavbarLogoSlotDirective {
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -9664,121 +12421,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-const lineWidths = {
-	96: 6,
-	64: 6,
-	48: 5,
-	32: 4,
-	24: 4,
-	20: 3,
-	16: 3
-};
-var RadialComponent = class RadialComponent {
-	size = input(96, ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
-	infinite = input(false, {
-		...ngDevMode ? { debugName: "infinite" } : /* istanbul ignore next */ {},
-		transform: booleanAttribute
-	});
-	percentage = input(0, ...ngDevMode ? [{ debugName: "percentage" }] : /* istanbul ignore next */ []);
-	ariaLabel = input(null, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
-	lineWidth = computed(() => lineWidths[this.size()], ...ngDevMode ? [{ debugName: "lineWidth" }] : /* istanbul ignore next */ []);
-	static ɵfac = i0.ɵɵngDeclareFactory({
-		minVersion: "12.0.0",
-		version: "22.2.2",
-		ngImport: i0,
-		type: RadialComponent,
-		deps: [],
-		target: i0.ɵɵFactoryTarget.Component
-	});
-	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
-		version: "22.2.2",
-		type: RadialComponent,
-		isStandalone: true,
-		selector: "ul-radial",
-		inputs: {
-			size: {
-				classPropertyName: "size",
-				publicName: "size",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			infinite: {
-				classPropertyName: "infinite",
-				publicName: "infinite",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			percentage: {
-				classPropertyName: "percentage",
-				publicName: "percentage",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			},
-			ariaLabel: {
-				classPropertyName: "ariaLabel",
-				publicName: "ariaLabel",
-				isSignal: true,
-				isRequired: false,
-				transformFunction: null
-			}
-		},
-		ngImport: i0,
-		template: "<div\n  class=\"ul-radial\"\n  role=\"progressbar\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-valuenow]=\"percentage()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [class.ul-radial--infinite]=\"infinite()\"\n  [style.width.px]=\"size()\"\n  [style.padding.px]=\"lineWidth()\"\n  [style.--ul-radial-percentage]=\"percentage() + '%'\"\n></div>\n",
-		styles: [".ul-radial{width:96px;padding:6px;aspect-ratio:1;border-radius:50%;background:#fff}.ul-radial--infinite{--ul-radial-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;animation:ul-radial-rotation 1s infinite linear}.ul-radial:not(.ul-radial--infinite){--ul-radial-percentage: 25%;--ul-radial-mask: conic-gradient( #fff var(--ul-radial-percentage), transparent var(--ul-radial-percentage) ), linear-gradient(#000 0 0) content-box}.ul-radial{-webkit-mask:var(--ul-radial-mask);mask:var(--ul-radial-mask);-webkit-mask-composite:source-out;mask-composite:subtract}@keyframes ul-radial-rotation{to{transform:rotate(1turn)}}\n"]
-	});
-};
-i0.ɵɵngDeclareClassMetadata({
-	minVersion: "12.0.0",
-	version: "22.2.2",
-	ngImport: i0,
-	type: RadialComponent,
-	decorators: [{
-		type: Component,
-		args: [{
-			selector: "ul-radial",
-			template: "<div\n  class=\"ul-radial\"\n  role=\"progressbar\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-valuenow]=\"percentage()\"\n  aria-valuemin=\"0\"\n  aria-valuemax=\"100\"\n  [class.ul-radial--infinite]=\"infinite()\"\n  [style.width.px]=\"size()\"\n  [style.padding.px]=\"lineWidth()\"\n  [style.--ul-radial-percentage]=\"percentage() + '%'\"\n></div>\n",
-			styles: [".ul-radial{width:96px;padding:6px;aspect-ratio:1;border-radius:50%;background:#fff}.ul-radial--infinite{--ul-radial-mask: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;animation:ul-radial-rotation 1s infinite linear}.ul-radial:not(.ul-radial--infinite){--ul-radial-percentage: 25%;--ul-radial-mask: conic-gradient( #fff var(--ul-radial-percentage), transparent var(--ul-radial-percentage) ), linear-gradient(#000 0 0) content-box}.ul-radial{-webkit-mask:var(--ul-radial-mask);mask:var(--ul-radial-mask);-webkit-mask-composite:source-out;mask-composite:subtract}@keyframes ul-radial-rotation{to{transform:rotate(1turn)}}\n"]
-		}]
-	}],
-	propDecorators: {
-		size: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "size",
-				required: false
-			}]
-		}],
-		infinite: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "infinite",
-				required: false
-			}]
-		}],
-		percentage: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "percentage",
-				required: false
-			}]
-		}],
-		ariaLabel: [{
-			type: i0.Input,
-			args: [{
-				isSignal: true,
-				alias: "ariaLabel",
-				required: false
-			}]
-		}]
-	}
-});
 var RichTextComponent = class RichTextComponent {
 	content = input(null, ...ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []);
 	size = input("body-l", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
@@ -13453,6 +16095,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
-export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LongPressDirective, MenuComponent, MenuItemComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
+export { AccordionComponent, AccordionItemComponent, AreaCodeComponent, AvatarComponent, AvatarGroupComponent, BreadcrumbComponent, ButtonComponent, CalendarComponent, CardComponent, CategoryPickerComponent, CheckboxComponent, CollapseComponent, CustomCurrencyPipe, DockComponent, DockItemComponent, DockItemContentSlotDirective, DropdownComponent, FileInputComponent, FooterComponent, FormFieldHelperComponent, FormFieldLabelComponent, HeroComponent, IconComponent, ImageCropperComponent, ImageNotFoundComponent, ImageNotFoundDirective, InputComponent, ListItemComponent, LoadMoreComponent, LongPressDirective, MenuComponent, MenuItemComponent, MenuItemsComponent, MenuTriggerComponent, ModalComponent, NavbarAppNameSlotDirective, NavbarAvatarSlotDirective, NavbarComponent, NavbarLogoSlotDirective, NavbarSearchSlotDirective, PeHeroActionsSlotDirective, PeHeroBadgesSlotDirective, PeHeroContentSlotDirective, PeHeroSubtitleSlotDirective, PeHeroTitleSlotDirective, PillComponent, PriceButtonComponent, RadialComponent, RadioComponent, RadioGroupComponent, RichTextComponent, SearchInputComponent, SearchSelectComponent, SelectComponent, SelectableRowComponent, SidebarComponent, SkeletonComponent, StatusComponent, StepperComponent, TableComponent, TextareaComponent, TextareaFieldDirective, ToastContainerComponent, ToastService, ToggleComponent, TooltipComponent, createFormFieldIds, getFormFieldDescribedBy, toastIcon };
 
 //# sourceMappingURL=underlayerdev-ui.mjs.map