ds-one 0.3.0-alpha.3 → 0.3.0-alpha.5

package/dist/ds-one.bundle.js

@@ -1925,20 +1925,17 @@ i2._$litElement$ = true, i2["finalized"] = true, s.litElementHydrateSupport?.({
 const o$1 = s.litElementPolyfillSupport;
 o$1?.({ LitElement: i2 });
 (s.litElementVersions ?? (s.litElementVersions = [])).push("4.2.1");
-const styles$f = '/* ds-text.css */\n/* Text component styles for displaying translations */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(16px * var(--sf));\n  font-family: var(--typeface-regular);\n  font-size: var(--type-size-default);\n  font-weight: var(--type-weight-default);\n  line-height: calc(var(--type-lineheight-default) * var(--sf));\n  letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));\n  text-align: center;\n  text-transform: var(--text-transform-default);\n  text-decoration: var(--text-decoration-default);\n  vertical-align: middle;\n}\n\n:host([data-language="ja"]) {\n  font-family: var(--typeface-regular-jp);\n}\n\n:host([data-language="zh"]),\n:host([data-language="zh-hant"]) {\n  font-family: var(--typeface-regular-zh-hant);\n  font-weight: 800;\n}\n\n:host([data-language="zh-hans"]) {\n  font-family: var(--typeface-regular-zh-hans);\n  font-weight: 800;\n}\n';
+const styles$f = '/* ds-text.css */\n/* Text component styles for displaying translations */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  height: calc(16px * var(--sf));\n  font-family: var(--typeface-regular);\n  font-size: var(--type-size-default);\n  font-weight: var(--type-weight-default);\n  line-height: calc(var(--type-lineheight-default) * var(--sf));\n  letter-spacing: calc(var(--type-letterspacing-default) * var(--sf));\n  text-align: left;\n  text-transform: var(--text-transform-default);\n  text-decoration: var(--text-decoration-default);\n  vertical-align: middle;\n  white-space: nowrap;\n}\n\n:host([data-language="ja"]) {\n  font-family: var(--typeface-regular-jp);\n}\n\n:host([data-language="zh"]),\n:host([data-language="zh-hant"]) {\n  font-family: var(--typeface-regular-zh-hant);\n  font-weight: 800;\n}\n\n:host([data-language="zh-hans"]) {\n  font-family: var(--typeface-regular-zh-hans);\n  font-weight: 800;\n}\n';
 const _Text = class _Text extends i2 {
   static get properties() {
     return {
       text: { type: String, reflect: true },
-      fallback: { type: String, reflect: true },
-      // Kept for backward compatibility
       _text: { type: String, state: true }
     };
   }
   constructor() {
     super();
     this.text = "";
-    this.fallback = "";
     this._text = "";
     this._currentLanguage = currentLanguage.value;
     this.boundHandlers = {
@@ -2002,17 +1999,17 @@ const _Text = class _Text extends i2 {
   }
   _loadText() {
     if (!this.text) {
-      this._text = this.fallback || "";
+      this._text = "";
       this._updateLanguageAttribute();
       this.requestUpdate();
       return;
     }
     try {
       const translatedText = getText(this.text);
-      this._text = translatedText || this.fallback || this.text;
+      this._text = translatedText || this.text;
     } catch (error) {
       console.error("Error loading text for text:", this.text, error);
-      this._text = this.fallback || this.text;
+      this._text = this.text;
     }
     this._updateLanguageAttribute();
     this.requestUpdate();
@@ -2024,19 +2021,16 @@ const _Text = class _Text extends i2 {
 _Text.styles = r$1(styles$f);
 let Text = _Text;
 customElements.define("ds-text", Text);
-const styles$e = "/* ds-button.css */\n/* Core button component styles */\n\nbutton {\n  max-height: calc(var(--08) * var(--sf));\n  height: calc(var(--08) * var(--sf));\n  min-height: calc(var(--08) * var(--sf));\n  width: fit-content;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  cursor: pointer;\n  padding: 0 calc(0.5px * var(--sf));\n  color: var(--button-text-color);\n  font-family: var(--typeface-regular);\n  -webkit-tap-highlight-color: transparent;\n}\n\nbutton.title {\n  background-color: var(--button-background-color-secondary);\n  color: var(--button-text-color);\n}\n\nbutton.primary {\n  background-color: var(--accent-color);\n  color: var(--button-text-color);\n  text-decoration-line: none;\n  font-family: var(--typeface-regular);\n}\n\nbutton.secondary {\n  background-color: var(--button-background-color-secondary);\n  color: var(--button-text-color);\n  font-family: var(--typeface-regular);\n}\n\nbutton.text {\n  background-color: transparent;\n  color: var(--button-color, var(--button-text-color));\n  font-family: var(--typeface-regular);\n  padding: 0;\n  text-decoration: none;\n}\n\nbutton.text:hover {\n  opacity: 0.8;\n  text-decoration: none;\n}\n\nbutton[bold] {\n  font-weight: var(--type-weight-bold);\n  font-family: var(--typeface-medium);\n}\n\nbutton[no-background] {\n  background-color: transparent;\n  max-height: var(--1);\n  padding: 0;\n  color: var(--button-color, var(--button-text-color-secondary));\n}\n\nbutton[no-background][bold] {\n  font-weight: var(--type-weight-bold);\n  font-family: var(--typeface-medium);\n  color: var(--button-color, var(--button-text-color-secondary));\n}\n\n.loading {\n  opacity: 0.7;\n}\n";
+const styles$e = "/* ds-button.css */\n/* Core button component styles */\n\n:host {\n  display: inline-flex;\n  min-width: 0;\n  flex: 0 1 auto;\n  max-width: 100%;\n  overflow: hidden;\n}\n\nbutton {\n  max-height: calc(var(--08) * var(--sf));\n  height: calc(var(--08) * var(--sf));\n  min-height: calc(var(--08) * var(--sf));\n  width: 100%;\n  max-width: 100%;\n  min-width: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border: none;\n  cursor: pointer;\n  padding: 0;\n  color: var(--button-color, var(--button-text-color));\n  font-family: var(--typeface-regular);\n  -webkit-tap-highlight-color: transparent;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  /* Default to no-background when no variant is specified */\n  background-color: transparent;\n  text-decoration: none;\n}\n\nbutton ds-text,\nbutton ::slotted(*) {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  max-width: 100%;\n  text-align: left;\n  justify-content: flex-start;\n}\n\nbutton[primary] {\n  background-color: var(--accent-color);\n  color: var(--button-text-color);\n  text-decoration-line: none;\n  font-family: var(--typeface-regular);\n  padding: 0 calc(0.5px * var(--sf));\n}\n\nbutton[secondary] {\n  background-color: var(--button-background-color-secondary);\n  color: var(--button-text-color);\n  font-family: var(--typeface-regular);\n  padding: 0 calc(0.5px * var(--sf));\n}\n\n.loading {\n  opacity: 0.7;\n}\n";
 const _Button = class _Button extends i2 {
   constructor() {
     super();
-    this.variant = "title";
+    this.primary = false;
+    this.secondary = false;
     this.disabled = false;
-    this.bold = false;
-    this["no-background"] = false;
     this.blank = false;
-    this.text = "";
-    this.fallback = "";
     this.language = "en-US";
-    this.defaultText = "";
+    this.text = "";
     this.href = "";
     this._loading = false;
   }
@@ -2044,20 +2038,15 @@ const _Button = class _Button extends i2 {
     super.connectedCallback();
   }
   render() {
-    const hasTextProps = this.text || this.defaultText || this.fallback;
+    const hasTextProps = this.text;
     return x`
       <button
-        class=${this.variant}
+        ?primary=${this.primary}
+        ?secondary=${this.secondary}
         ?disabled=${this.disabled}
-        ?bold=${this.bold}
-        ?no-background=${this["no-background"]}
         @click=${this._handleClick}
       >
-        ${hasTextProps ? x`<ds-text
-              .text=${this.text}
-              .defaultValue=${this.defaultText}
-              .fallback=${this.fallback}
-            ></ds-text>` : x`<slot></slot>`}
+        ${hasTextProps ? x`<ds-text .text=${this.text}></ds-text>` : x`<slot></slot>`}
       </button>
     `;
   }
@@ -2080,19 +2069,12 @@ const _Button = class _Button extends i2 {
   }
 };
 _Button.properties = {
-  variant: { type: String, reflect: true },
+  primary: { type: Boolean, reflect: true },
+  secondary: { type: Boolean, reflect: true },
   disabled: { type: Boolean, reflect: true },
-  bold: { type: Boolean, reflect: true },
-  "no-background": {
-    type: Boolean,
-    reflect: true,
-    attribute: "no-background"
-  },
   blank: { type: Boolean, reflect: true },
-  text: { type: String },
-  fallback: { type: String },
   language: { type: String },
-  defaultText: { type: String, attribute: "default-text" },
+  text: { type: String },
   href: { type: String },
   _loading: { type: Boolean, state: true }
 };
@@ -2341,6 +2323,7 @@ const iconNameToSvgMap = {
   "down": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.49645 12.5178V2.86102e-06H8.50702L8.50841 12.5174L11.4156 9.61018L12.1095 10.317L8.00173 14.4248L3.8905 10.3135L4.59784 9.60619L7.49645 12.5178Z" fill="#1E1E1E"/>\n</svg>',
   "duplicate": '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect x="3" y="3" width="8" height="8" rx="1" stroke="currentColor" stroke-width="1.2" fill="none"/>\n<path d="M9 3V2C9 1.44772 8.55228 1 8 1H2C1.44772 1 1 1.44772 1 2V8C1 8.55228 1.44772 9 2 9H3" stroke="currentColor" stroke-width="1.2" fill="none"/>\n</svg>',
   "email": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="11" viewBox="0 0 16 11" fill="none">\n  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.0871 0.989435L0.930906 0.988037L0.930542 11L13.0753 11H14.0871V0.989435ZM7.50709 8.0566L1.94249 2.49201L1.94248 9.98814H13.0753V2.48839L7.50709 8.0566ZM2.85116 2L7.50709 6.65593L12.1515 1.99952L2.85116 2Z" fill="currentColor"/>\n</svg>',
+  "exercise": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M9.11131 4.50523C8.89226 4.50523 8.69548 4.45325 8.52098 4.3493C8.34648 4.24163 8.20539 4.10054 8.09772 3.92604C7.99377 3.75154 7.94179 3.55662 7.94179 3.34128C7.94179 3.12594 7.99377 2.93102 8.09772 2.75652C8.20539 2.5783 8.34648 2.43722 8.52098 2.33326C8.69548 2.2293 8.89226 2.17732 9.11131 2.17732C9.32665 2.17732 9.52157 2.2293 9.69607 2.33326C9.87057 2.43722 10.0098 2.5783 10.1138 2.75652C10.2214 2.93102 10.2753 3.12594 10.2753 3.34128C10.2753 3.55662 10.2214 3.75154 10.1138 3.92604C10.0098 4.10054 9.87057 4.24163 9.69607 4.3493C9.52157 4.45325 9.32665 4.50523 9.11131 4.50523ZM7.29019 9.12207C7.13797 9.03668 6.98389 8.94386 6.82795 8.84361C6.67202 8.73965 6.55692 8.60228 6.48267 8.43149C6.40841 8.25699 6.41584 8.01938 6.50494 7.71864L6.9282 6.19269C6.9579 6.09616 6.94305 6.0219 6.88365 5.96992C6.82424 5.91794 6.7537 5.89567 6.67202 5.90309L5.93132 5.95322L5.70855 7.49031C5.66029 7.83559 5.48022 7.99524 5.16834 7.96925C5.01983 7.9544 4.90659 7.89314 4.82862 7.78547C4.75066 7.67409 4.72281 7.53486 4.74509 7.36778L5.00127 5.47984C5.01983 5.3239 5.07738 5.19952 5.17391 5.1067C5.27044 5.01388 5.39482 4.9619 5.54705 4.95077L7.40715 4.82268C7.89723 4.78555 8.30193 4.83753 8.62123 4.97861C8.94052 5.11598 9.22084 5.34989 9.46217 5.68033L10.3755 6.94453L11.701 6.3542C11.8495 6.28737 11.985 6.27251 12.1075 6.30964C12.2338 6.34677 12.3284 6.43402 12.3915 6.57139C12.4584 6.70877 12.4658 6.83871 12.4138 6.96123C12.3618 7.08376 12.2597 7.17843 12.1075 7.24526L10.4256 7.9971C10.3143 8.04908 10.1992 8.05836 10.0803 8.02495C9.96525 7.99153 9.87429 7.92284 9.80746 7.81889L9.21713 6.9668C9.16143 6.88512 9.09089 6.84985 9.0055 6.86099C8.9201 6.87213 8.86441 6.92596 8.83842 7.0225L8.44301 8.38137L10.4312 9.68456C10.5834 9.7848 10.6688 9.9296 10.6874 10.119C10.7059 10.3083 10.6503 10.4568 10.5203 10.5645L8.69362 12.1183C8.54511 12.2445 8.3966 12.3021 8.24809 12.2909C8.10329 12.2835 7.98634 12.2297 7.89723 12.1294C7.81184 12.0292 7.77286 11.9085 7.78028 11.7674C7.78771 11.6226 7.86382 11.4908 8.00862 11.372L9.30066 10.2526L7.29019 9.12207ZM3.73707 13.6999C3.6294 13.6034 3.56814 13.4772 3.55329 13.3212C3.54215 13.1653 3.60712 13.0186 3.74821 12.8813L5.53034 11.1103L6.15409 8.89373C6.25062 9.01997 6.37128 9.13878 6.51608 9.25016C6.66088 9.35783 6.83352 9.46736 7.03401 9.57874L7.2178 9.68456L6.50494 11.5224C6.46039 11.6338 6.42326 11.7117 6.39356 11.7563C6.36386 11.7971 6.31188 11.8547 6.23762 11.9289L4.51675 13.6275C4.38309 13.7575 4.24572 13.8224 4.10463 13.8224C3.96355 13.8262 3.84103 13.7853 3.73707 13.6999Z" fill="currentColor"/>\n</svg>',
   "expand": '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">\n  <path d="M0 5.81415V0H5.80924L5.81842 0.990424H1.70698L11.0089 10.2943L10.9997 6.18585H12V12H6.19076L6.18158 11.0096H10.293L0.99115 1.70573L1.00033 5.81415H0Z" fill="currentColor"/>\n</svg>',
   "gallery": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M0 16V0H16L0 16ZM0.706055 0.769531V1.80957H3.60547V10H4.83984V1.80957H7.73926V0.769531H0.706055Z" fill="#1E1E1E"/>\n</svg>',
   "globe": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M6.87775 12.5554C7.08028 12.6051 7.28795 12.6416 7.49983 12.664V11.8571C7.2467 11.5176 7.00708 11.1483 6.79982 10.753C6.49693 10.8285 6.20261 10.9278 5.9183 11.0454C6.19879 11.6048 6.53384 12.111 6.87775 12.5554Z" fill="#1E1E1E"/>\n<path d="M5.19187 8.49193C5.23389 9.09581 5.36568 9.66767 5.55639 10.2017C5.83545 10.0858 6.12511 9.9844 6.42434 9.90232C6.26416 9.4557 6.15312 8.98405 6.11253 8.49193H5.19187Z" fill="#1E1E1E"/>\n<path d="M6.87775 3.42868C7.08028 3.37904 7.28795 3.34252 7.49983 3.3201V4.12696C7.2467 4.46645 7.00708 4.83584 6.79982 5.23109C6.49693 5.15561 6.20261 5.05627 5.9183 4.93873C6.19879 4.37926 6.53384 3.87306 6.87775 3.42868Z" fill="#1E1E1E"/>\n<path d="M5.19187 7.49217C5.23389 6.88828 5.36568 6.31643 5.55639 5.7824C5.83545 5.89834 6.12511 5.9997 6.42434 6.08178C6.26416 6.52839 6.15312 7.00004 6.11253 7.49217H5.19187Z" fill="#1E1E1E"/>\n<path d="M2.30171 7.99205H3.30171C3.30172 7.82319 3.31063 7.65642 3.32801 7.49217C3.42195 6.60422 3.76325 5.79004 4.28172 5.11985C3.98894 4.93686 3.71427 4.74365 3.45958 4.54857C2.73299 5.50512 2.30174 6.69824 2.30171 7.99205Z" fill="#1E1E1E"/>\n<path d="M2.30171 7.99205C2.30174 9.28585 2.73299 10.479 3.45958 11.4355C3.71427 11.2404 3.98894 11.0472 4.28172 10.8642C3.76325 10.1941 3.42195 9.37987 3.32801 8.49193C3.31063 8.32768 3.30172 8.1609 3.30171 7.99205H2.30171Z" fill="#1E1E1E"/>\n<path d="M9.12215 12.5552C8.91963 12.6048 8.71196 12.6414 8.50008 12.6638V11.8569C8.75321 11.5174 8.99283 11.148 9.20009 10.7528C9.50298 10.8283 9.7973 10.9276 10.0816 11.0452C9.80112 11.6046 9.46607 12.1108 9.12215 12.5552Z" fill="#1E1E1E"/>\n<path d="M10.808 8.49171C10.766 9.0956 10.6342 9.66745 10.4435 10.2015C10.1645 10.0855 9.87479 9.98418 9.57557 9.90211C9.73575 9.45549 9.84678 8.98384 9.88738 8.49171H10.808Z" fill="#1E1E1E"/>\n<path d="M9.12215 3.42847C8.91963 3.37883 8.71196 3.34231 8.50008 3.31989V4.12675C8.75321 4.46624 8.99283 4.83563 9.20009 5.23088C9.50298 5.1554 9.7973 5.05606 10.0816 4.93852C9.80112 4.37905 9.46607 3.87284 9.12215 3.42847Z" fill="#1E1E1E"/>\n<path d="M10.808 7.49196C10.766 6.88807 10.6342 6.31622 10.4435 5.78218C10.1645 5.89813 9.87479 5.99949 9.57557 6.08156C9.73575 6.52818 9.84678 6.99983 9.88738 7.49196H10.808Z" fill="#1E1E1E"/>\n<path d="M13.6982 7.99205L12.6982 7.99184C12.6982 7.82298 12.6893 7.65621 12.6719 7.49196C12.578 6.60401 12.2367 5.78983 11.7182 5.11964C12.011 4.93665 12.2856 4.74344 12.5403 4.54836C13.2669 5.5049 13.6982 6.69824 13.6982 7.99205Z" fill="#1E1E1E"/>\n<path d="M13.6982 7.99205C13.6982 9.28585 13.2669 10.4788 12.5403 11.4353C12.2856 11.2402 12.011 11.047 11.7182 10.864C12.2367 10.1938 12.578 9.37966 12.6719 8.49171C12.6893 8.32746 12.6982 8.16069 12.6982 7.99184L13.6982 7.99205Z" fill="#1E1E1E"/>\n<path d="M6.872 13.5787C7.2366 13.6519 7.61379 13.6903 7.99995 13.6903V12.6903C7.83102 12.6903 7.66416 12.6814 7.49983 12.664C7.28795 12.6416 7.08028 12.6051 6.87775 12.5554C6.14481 12.3758 5.47939 12.0241 4.9267 11.5457C4.62544 11.7252 4.3403 11.9201 4.0736 12.1216C4.83631 12.847 5.79974 13.3633 6.872 13.5787Z" fill="#1E1E1E"/>\n<path d="M3.45958 11.4355C3.64564 11.6805 3.85108 11.9099 4.0736 12.1216C4.3403 11.9201 4.62544 11.7252 4.9267 11.5457C4.68981 11.3407 4.47363 11.1123 4.28172 10.8642C3.98894 11.0472 3.71427 11.2404 3.45958 11.4355Z" fill="#1E1E1E"/>\n<path d="M4.9267 11.5457C5.24061 11.3587 5.57202 11.1885 5.9183 11.0454C5.78333 10.7762 5.661 10.4946 5.55639 10.2017C5.10182 10.3906 4.6754 10.6182 4.28172 10.8642C4.47363 11.1123 4.68981 11.3407 4.9267 11.5457Z" fill="#1E1E1E"/>\n<path d="M5.9183 11.0454C6.20261 10.9278 6.49693 10.8285 6.79982 10.753C6.65732 10.4812 6.53011 10.1972 6.42434 9.90232C6.12511 9.9844 5.83545 10.0858 5.55639 10.2017C5.661 10.4946 5.78333 10.7762 5.9183 11.0454Z" fill="#1E1E1E"/>\n<path d="M6.79982 10.753C7.02849 10.696 7.26203 10.6526 7.49983 10.6253V9.70209C7.12963 9.73818 6.77058 9.80734 6.42434 9.90232C6.53011 10.1972 6.65732 10.4812 6.79982 10.753Z" fill="#1E1E1E"/>\n<path d="M7.49983 12.664C7.66416 12.6814 7.83102 12.6903 7.99995 12.6903V7.99205H3.30171C3.30172 8.1609 3.31063 8.32768 3.32801 8.49193H5.19187H6.11253H7.49983V9.70209V10.6253V11.8571V12.664Z" fill="#1E1E1E"/>\n<path d="M7.99995 12.6903C8.16889 12.6903 8.33575 12.6812 8.50008 12.6638V11.8569V10.6251V9.70188V8.49171H9.88738H10.808H12.6719C12.6893 8.32746 12.6982 8.16069 12.6982 7.99184L7.99995 7.99205V12.6903Z" fill="#1E1E1E"/>\n<path d="M8.50008 10.6251C8.73788 10.6524 8.97142 10.6958 9.20009 10.7528C9.34259 10.481 9.4698 10.197 9.57557 9.90211C9.22932 9.80713 8.87028 9.73797 8.50008 9.70188V10.6251Z" fill="#1E1E1E"/>\n<path d="M9.20009 10.7528C9.50298 10.8283 9.7973 10.9276 10.0816 11.0452C10.2166 10.7759 10.3389 10.4944 10.4435 10.2015C10.1645 10.0855 9.87479 9.98418 9.57557 9.90211C9.4698 10.197 9.34259 10.481 9.20009 10.7528Z" fill="#1E1E1E"/>\n<path d="M10.0816 11.0452C10.4279 11.1883 10.7593 11.3585 11.0732 11.5455C11.3101 11.3404 11.5263 11.1121 11.7182 10.864C11.3245 10.618 10.8981 10.3904 10.4435 10.2015C10.3389 10.4944 10.2166 10.7759 10.0816 11.0452Z" fill="#1E1E1E"/>\n<path d="M11.9263 12.1214C12.1488 11.9097 12.3543 11.6803 12.5403 11.4353C12.2856 11.2402 12.011 11.047 11.7182 10.864C11.5263 11.1121 11.3101 11.3404 11.0732 11.5455C11.3745 11.725 11.6596 11.9199 11.9263 12.1214Z" fill="#1E1E1E"/>\n<path d="M7.99995 13.6903C8.38611 13.6903 8.7633 13.6517 9.12791 13.5784C10.2002 13.3631 11.1636 12.8468 11.9263 12.1214C11.6596 11.9199 11.3745 11.725 11.0732 11.5455C10.5205 12.0239 9.8551 12.3756 9.12215 12.5552C8.91963 12.6048 8.71196 12.6414 8.50008 12.6638C8.33575 12.6812 8.16889 12.6903 7.99995 12.6903V13.6903Z" fill="#1E1E1E"/>\n<path d="M9.20009 5.23088C8.97142 5.28786 8.73788 5.33124 8.50008 5.3586V6.28179C8.87028 6.24571 9.22932 6.17654 9.57557 6.08156C9.4698 5.78665 9.34259 5.50265 9.20009 5.23088Z" fill="#1E1E1E"/>\n<path d="M7.49983 5.35882C7.26203 5.33145 7.02849 5.28807 6.79982 5.23109C6.65732 5.50286 6.53011 5.78686 6.42434 6.08178C6.77058 6.17675 7.12963 6.24592 7.49983 6.282V5.35882Z" fill="#1E1E1E"/>\n<path d="M6.79982 5.23109C6.49693 5.15561 6.20261 5.05627 5.9183 4.93873C5.78333 5.20794 5.661 5.48948 5.55639 5.7824C5.83545 5.89834 6.12511 5.9997 6.42434 6.08178C6.53011 5.78686 6.65732 5.50286 6.79982 5.23109Z" fill="#1E1E1E"/>\n<path d="M5.9183 4.93873C5.57202 4.79556 5.24061 4.62538 4.9267 4.43838C4.68981 4.64343 4.47363 4.87178 4.28172 5.11985C4.6754 5.36592 5.10182 5.59352 5.55639 5.7824C5.661 5.48948 5.78333 5.20794 5.9183 4.93873Z" fill="#1E1E1E"/>\n<path d="M4.0736 3.86253C3.85108 4.07417 3.64564 4.30362 3.45958 4.54857C3.71427 4.74365 3.98894 4.93686 4.28172 5.11985C4.47363 4.87178 4.68981 4.64343 4.9267 4.43838C4.62544 4.25892 4.3403 4.06396 4.0736 3.86253Z" fill="#1E1E1E"/>\n<path d="M7.99995 2.29381C7.61379 2.29381 7.2366 2.33222 6.872 2.40544C5.79974 2.62077 4.83631 3.13711 4.0736 3.86253C4.3403 4.06396 4.62544 4.25892 4.9267 4.43838C5.47939 3.95997 6.14481 3.60833 6.87775 3.42868C7.08028 3.37904 7.28795 3.34252 7.49983 3.3201C7.66416 3.30271 7.83102 3.2938 7.99995 3.2938V2.29381Z" fill="#1E1E1E"/>\n<path d="M7.99995 3.2938C7.83102 3.2938 7.66416 3.30271 7.49983 3.3201V4.12696V5.35882V6.282V7.49217H6.11253H5.19187H3.32801C3.31063 7.65642 3.30172 7.82319 3.30171 7.99205H7.99995V3.2938Z" fill="#1E1E1E"/>\n<path d="M8.50008 3.31989C8.33575 3.3025 8.16889 3.2938 7.99995 3.2938V7.99205L12.6982 7.99184C12.6982 7.82298 12.6893 7.65621 12.6719 7.49196H10.808H9.88738H8.50008V6.28179V5.3586V4.12675V3.31989Z" fill="#1E1E1E"/>\n<path d="M9.12791 2.40523C8.7633 2.33201 8.38611 2.29381 7.99995 2.29381V3.2938C8.16889 3.2938 8.33575 3.3025 8.50008 3.31989C8.71196 3.34231 8.91963 3.37883 9.12215 3.42847C9.8551 3.60812 10.5205 3.95976 11.0732 4.43817C11.3745 4.25871 11.6596 4.06375 11.9263 3.86232C11.1636 3.13689 10.2002 2.62056 9.12791 2.40523Z" fill="#1E1E1E"/>\n<path d="M10.0816 4.93852C9.7973 5.05606 9.50298 5.1554 9.20009 5.23088C9.34259 5.50265 9.4698 5.78665 9.57557 6.08156C9.87479 5.99949 10.1645 5.89813 10.4435 5.78218C10.3389 5.48926 10.2166 5.20772 10.0816 4.93852Z" fill="#1E1E1E"/>\n<path d="M11.0732 4.43817C10.7593 4.62517 10.4279 4.79535 10.0816 4.93852C10.2166 5.20772 10.3389 5.48926 10.4435 5.78218C10.8981 5.5933 11.3245 5.3657 11.7182 5.11964C11.5263 4.87157 11.3101 4.64322 11.0732 4.43817Z" fill="#1E1E1E"/>\n<path d="M12.5403 4.54836C12.3543 4.3034 12.1488 4.07396 11.9263 3.86232C11.6596 4.06375 11.3745 4.25871 11.0732 4.43817C11.3101 4.64322 11.5263 4.87157 11.7182 5.11964C12.011 4.93665 12.2856 4.74344 12.5403 4.54836Z" fill="#1E1E1E"/>\n</svg>',
@@ -2351,6 +2334,7 @@ const iconNameToSvgMap = {
   "icon": '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect x="1" y="1" width="10" height="10" rx="2" stroke="currentColor" stroke-width="1.2" fill="none"/>\n<circle cx="6" cy="6" r="2.5" fill="currentColor"/>\n</svg>',
   "in": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.1361 3.56571L7.99688 7.72965L3.86423 3.57226L4.5628 2.85638L7.48765 5.79873L7.49661 9.59381e-07L8.51508 0L8.50612 5.79873L11.4244 2.84983L12.1361 3.56571Z" fill="#1E1E1E"/>\n<path d="M3.86395 12.3337L8.00314 8.16974L12.1358 12.3271L11.4372 13.043L8.51238 10.1007L8.49783 16H7.47936L7.4939 10.1007L4.57558 13.0496L3.86395 12.3337Z" fill="#1E1E1E"/>\n</svg>',
   "left": '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="9" viewBox="0 0 16 9" fill="none">\n  <path d="M1.90697 3.60594H15.0636V4.61651L1.90734 4.61791L4.81456 7.52513L4.10774 8.21898L-1.23978e-05 4.11123L4.11122 0L4.81855 0.707338L1.90697 3.60594Z" fill="currentColor"/>\n</svg>',
+  "life": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M3.76595 12.3556L12.2336 12.3556V13.3529L4.76332 13.3529L3.76595 13.3529V12.3556Z" fill="currentColor"/>\n<path d="M4.76332 13.3529L3.76595 13.3529V7.16597L4.76329 7.16597L4.76332 13.3529Z" fill="currentColor"/>\n<path d="M12.2336 13.3529H11.2363L11.2363 7.16599L12.2336 7.16597V13.3529Z" fill="currentColor"/>\n<path d="M11.6251 6.4395H10.6278L10.6278 4.16374L11.6251 4.16372V6.4395Z" fill="currentColor"/>\n<path d="M7.99993 2.64708L13.4713 8.11835L12.7661 8.82358L7.2947 3.35231L7.99993 2.64708Z" fill="currentColor"/>\n<path d="M3.23393 8.82358L2.52869 8.11832L7.99993 2.64708L8.70517 3.3523L3.23393 8.82358Z" fill="currentColor"/>\n</svg>',
   "lock": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M8 2.60742C9.53669 2.60746 10.7822 3.85296 10.7822 5.38965V7.64746H11.5996V13.3926H4.40039V7.64746H5.21777V5.38965C5.21779 3.85295 6.4633 2.60744 8 2.60742ZM8 3.62695C7.02663 3.62697 6.23733 4.41628 6.2373 5.38965V7.64746H9.7627V5.38965C9.76267 4.41629 8.97336 3.62699 8 3.62695Z" fill="#1E1E1E"/>\n</svg>',
   "loop": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.0037 1.96826L12.0037 7.12486L14.9023 4.21328L15.6096 4.92061L11.4984 9.03184L7.39064 4.92409L8.08449 4.21727L10.9917 7.12449L10.9931 2.98673L5.00853 3.00323V1.98475L12.0037 1.96826Z" fill="#1E1E1E"/>\n<path d="M3.99657 14.0318L3.99657 8.87523L1.09796 11.7868L0.390625 11.0795L4.50185 6.96825L8.6096 11.076L7.91576 11.7828L5.00853 8.8756L5.00714 13.0134L10.9917 12.9972V14.0157L3.99657 14.0318Z" fill="#1E1E1E"/>\n<path d="M10.9917 12.9972V14.0157H12.0037V12.9973V9.85949L10.9917 9.85912V12.9972Z" fill="#1E1E1E"/>\n<path d="M3.99657 5.1225V6.14098H5.00853V5.12251V1.98475L3.99657 1.98438V5.1225Z" fill="#1E1E1E"/>\n</svg>',
   "mic": '<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">\n<rect x="2.5" y="1" width="5" height="7" rx="2.5" stroke="currentColor" stroke-width="1.2" fill="none"/>\n<path d="M1 6C1 8.76142 2.79086 11 5 11C7.20914 11 9 8.76142 9 6" stroke="currentColor" stroke-width="1.2" fill="none"/>\n<line x1="5" y1="11" x2="5" y2="13" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>\n</svg>',
@@ -2362,6 +2346,7 @@ const iconNameToSvgMap = {
   "plus": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.50235 2.6739L8.4996 7.5035L13.3334 7.51044L13.325 8.50193L8.49328 8.49569L8.49951 13.3274L7.49764 13.3268L7.50039 8.49717L2.66663 8.49024L2.67503 7.49875L7.50672 7.50499L7.50117 2.67261L8.50235 2.6739Z" fill="#1E1E1E"/>\n</svg>',
   "right": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M13.1566 8.60594H0V9.61651L13.1562 9.61791L10.249 12.5251L10.9558 13.219L15.0636 9.11123L10.9524 5L10.245 5.70734L13.1566 8.60594Z" fill="#1E1E1E"/>\n</svg>',
   "row": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M3.87698 4.67614L8.01617 0.536957L12.1488 4.66961L11.4503 5.38124L8.5254 2.45639L8.49306 13.5436L11.4114 10.6122L12.123 11.3239L7.98382 15.463L3.85117 11.3304L4.54974 10.6188L7.47459 13.5436L7.50693 2.45639L4.58861 5.38777L3.87698 4.67614Z" fill="#1E1E1E"/>\n</svg>',
+  "school": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M5.48751 11.2972L10.4354 11.2964H5.49535L5.48751 11.2972Z" fill="currentColor"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M5.49535 13.0423C4.81691 13.0423 4.2588 12.5265 4.19152 11.8658L4.18468 4.00851C4.18468 3.42828 4.65521 2.95775 5.23544 2.95775H10.7646C11.3448 2.95775 11.8153 3.42829 11.8153 4.00851V10.4123C11.8153 10.7646 11.6092 11.0692 11.3109 11.2115V12.1689C11.5526 12.169 11.7527 12.3649 11.7527 12.6066C11.7527 12.8483 11.5526 13.0421 11.3109 13.0423H5.49535ZM5.06017 11.7316C5.06017 11.5214 5.20914 11.3456 5.40729 11.3049L5.48751 11.2972L5.49535 11.2964H10.4354V12.1668H5.49535L5.40729 12.1574C5.20923 12.1167 5.06023 11.9417 5.06017 11.7316ZM10.798 4.09446H5.20187V5.49349H10.798V4.09446Z" fill="currentColor"/>\n</svg>',
   "sdown": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.50361 11.1717L8.50222 2.92134L7.49165 2.92134L7.49165 11.1713L4.58442 8.26409L3.89058 8.97091L7.99833 13.0787L12.1096 8.96744L11.4022 8.2601L8.50361 11.1717Z" fill="#1E1E1E"/>\n</svg>',
   "search": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M9.08545 6.62646C9.08545 5.25128 7.9704 4.13623 6.59521 4.13623C5.22003 4.13623 4.10498 5.25128 4.10498 6.62646C4.10498 8.00165 5.22003 9.1167 6.59521 9.1167C7.9704 9.1167 9.08545 8.00165 9.08545 6.62646ZM10.105 6.62646C10.105 7.39551 9.85647 8.10577 9.43701 8.68408L12.9146 12.1616L12.1929 12.8833L8.72412 9.41455C8.13339 9.86631 7.39632 10.1362 6.59521 10.1362C4.6567 10.1362 3.08545 8.56498 3.08545 6.62646C3.08545 4.68795 4.6567 3.1167 6.59521 3.1167C8.53373 3.1167 10.105 4.68795 10.105 6.62646Z" fill="#1E1E1E"/>\n</svg>',
   "see": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M8.07669 3.70416C10.1007 3.70416 11.795 4.74149 12.9566 5.73248C13.5418 6.23179 14.005 6.72991 14.3218 7.10358C14.4804 7.29069 14.6032 7.44763 14.687 7.55865C14.7289 7.61411 14.7615 7.65861 14.7837 7.68951C14.7947 7.70477 14.8031 7.71711 14.8091 7.72565C14.812 7.72971 14.8143 7.73297 14.8159 7.73541C14.8167 7.73644 14.8174 7.73762 14.8179 7.73834L14.8189 7.73932C14.819 7.73947 14.8195 7.74054 14.4409 8.00006L14.8189 8.25983L14.8179 8.2608C14.8174 8.2616 14.8168 8.26345 14.8159 8.26471C14.8142 8.26716 14.812 8.27042 14.8091 8.27448C14.8031 8.28303 14.7947 8.29531 14.7837 8.31061C14.7615 8.34152 14.7289 8.38597 14.687 8.44147C14.6032 8.5525 14.4805 8.70941 14.3218 8.89655C14.005 9.27021 13.5418 9.76835 12.9566 10.2676C11.795 11.2586 10.1006 12.296 8.07669 12.296C6.05499 12.296 4.32326 11.2606 3.12552 10.2725C2.52184 9.77448 2.04049 9.27717 1.7095 8.90436C1.54374 8.71764 1.4147 8.56095 1.32669 8.45026C1.28274 8.39498 1.24843 8.35111 1.22513 8.32037C1.21356 8.30511 1.20507 8.29275 1.19876 8.28424C1.19566 8.28005 1.19275 8.27694 1.19095 8.27448C1.19016 8.27341 1.18952 8.27227 1.189 8.27155L1.18802 8.27057V8.26959L0.99173 8.00006L1.18802 7.73053V7.72955L1.189 7.72858C1.18953 7.72784 1.19013 7.72676 1.19095 7.72565C1.19276 7.72318 1.19563 7.72011 1.19876 7.71588C1.20506 7.70738 1.21356 7.69502 1.22513 7.67975C1.24842 7.64902 1.28277 7.6051 1.32669 7.54987C1.4147 7.43918 1.54374 7.28248 1.7095 7.09576C2.04048 6.72296 2.52183 6.22565 3.12552 5.7276C4.32326 4.73948 6.05499 3.70417 8.07669 3.70416ZM8.07669 4.62213C6.36481 4.62213 4.83715 5.50531 3.7095 6.43561C3.15087 6.8965 2.70364 7.35865 2.39603 7.70514C2.29735 7.81629 2.21535 7.91722 2.147 8.00006C2.21534 8.08289 2.29738 8.18387 2.39603 8.29498C2.70365 8.64147 3.15087 9.10363 3.7095 9.56451C4.83715 10.4948 6.36481 11.378 8.07669 11.378C9.7862 11.378 11.2738 10.4968 12.3609 9.5694C12.9 9.10949 13.3285 8.64854 13.6216 8.3028C13.7189 8.18799 13.7987 8.0844 13.8648 8.00006C13.7987 7.91573 13.7189 7.81214 13.6216 7.69733C13.3285 7.35158 12.9 6.89064 12.3609 6.43073C11.2738 5.50334 9.78624 4.62213 8.07669 4.62213ZM14.9976 8.00006L14.8199 8.25983L14.4409 8.00006L14.8199 7.7403L14.9976 8.00006Z" fill="#1E1E1E"/>\n<path d="M8.15292 5.66766C9.44109 5.66766 10.4858 6.71157 10.4859 7.99969C10.4859 9.28796 9.44119 10.3327 8.15292 10.3327C6.8648 10.3325 5.82089 9.28786 5.82089 7.99969C5.82106 6.71167 6.8649 5.66783 8.15292 5.66766Z" fill="#1E1E1E" stroke="#1E1E1E" stroke-width="0.81"/>\n</svg>',
@@ -2379,7 +2364,8 @@ const iconNameToSvgMap = {
   "unsee": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M12.4541 12.789L13.1743 12.0688L12.6027 11.4967L12.6 11.4994L12.0137 10.9144C11.7332 11.103 11.4336 11.283 11.1164 11.4457L11.4068 11.7363L11.4046 11.7385L12.4541 12.789Z" fill="#1E1E1E"/>\n<path d="M5.96371 6.28857L9.79315 10.1213C10.0642 9.91923 10.2966 9.66816 10.4772 9.38122L6.69735 5.60959C6.41317 5.78931 6.16435 6.0199 5.96371 6.28857Z" fill="#1E1E1E"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M3.68238 4.00893L3.09583 3.42183L3.79957 2.7181L3.816 2.70167L5.35651 4.24363L6.05746 4.94524L6.712 5.6004L10.4818 9.3738L11.3559 10.2487L12.0181 10.9115L12.6027 11.4967L12.6 11.4994L12.0137 10.9144C11.7332 11.103 11.4336 11.283 11.1164 11.4457L11.4068 11.7363L11.4046 11.7385L11.1136 11.4472L10.4275 10.7604L9.79075 10.1231L5.96207 6.29078L5.08276 5.41064L4.4124 4.73965L3.68238 4.00893ZM12.6382 10.4584C12.7502 10.37 12.8582 10.2812 12.9619 10.1927C13.5472 9.69339 14.0104 9.19525 14.3271 8.82158C14.4858 8.63445 14.6085 8.47754 14.6924 8.36651C14.7343 8.31101 14.7669 8.26656 14.7891 8.23565L14.7965 8.22527L14.8089 8.20741L14.8145 8.19951L14.8213 8.18975C14.8218 8.18905 14.8222 8.18816 14.8225 8.18737L14.8232 8.18584L14.8242 8.18487L15.0029 7.9251L14.8252 7.66533L14.4463 7.9251C14.8248 7.66558 14.8243 7.66451 14.8242 7.66436L14.8232 7.66338L14.8213 7.66045L14.8145 7.65069C14.8085 7.64215 14.8 7.62981 14.7891 7.61455C14.7669 7.58365 14.7343 7.53915 14.6924 7.48369C14.6085 7.37267 14.4858 7.21573 14.3271 7.02862C14.0104 6.65495 13.5472 6.15682 12.9619 5.65752C11.8003 4.66652 10.106 3.6292 8.08203 3.6292C7.38933 3.6292 6.73067 3.75074 6.11587 3.95029L6.86093 4.69373C7.25481 4.60011 7.6629 4.54717 8.08203 4.54717C9.79158 4.54717 11.2792 5.42838 12.3662 6.35576C12.9053 6.81567 13.3338 7.27662 13.627 7.62237C13.7119 7.72259 13.7835 7.81425 13.8443 7.89203L13.8701 7.9251L13.8442 7.95828C13.7834 8.03603 13.7119 8.12766 13.627 8.22783C13.3338 8.57358 12.9053 9.03452 12.3662 9.49444C12.2436 9.599 12.116 9.70298 11.9835 9.80517L12.6382 10.4584ZM5.58478 6.99004L9.09135 10.4996C8.80023 10.6051 8.48611 10.6626 8.15857 10.6626C6.64663 10.6626 5.42096 9.43698 5.42096 7.92504C5.42096 7.59666 5.47878 7.28179 5.58478 6.99004ZM10.371 11.7804L9.65051 11.0593C9.15436 11.2126 8.62958 11.303 8.08203 11.303C6.37015 11.303 4.84249 10.4199 3.71484 9.48955C3.15622 9.02867 2.70899 8.56651 2.40137 8.22002C2.31556 8.12337 2.24231 8.03438 2.17972 7.95834L2.15234 7.9251L2.17972 7.89186C2.24231 7.81582 2.31553 7.72686 2.40137 7.63018C2.70898 7.28369 3.15621 6.82154 3.71484 6.36065C3.93564 6.17849 4.17177 5.99814 4.42162 5.82588L3.76309 5.16678C3.53867 5.32681 3.32756 5.49036 3.13086 5.65264C2.52717 6.15069 2.04582 6.648 1.71484 7.0208C1.54908 7.20752 1.42004 7.36421 1.33203 7.4749C1.28811 7.53014 1.25376 7.57406 1.23047 7.60479C1.22314 7.61446 1.21704 7.62297 1.21196 7.63006L1.2041 7.64092C1.20236 7.64328 1.20069 7.64527 1.19925 7.647L1.19629 7.65069L1.19434 7.65362L1.19336 7.65557L0.99707 7.9251L1.19336 8.19561L1.19434 8.19658L1.19629 8.19951L1.19926 8.20322C1.20071 8.20495 1.20238 8.20695 1.2041 8.20928L1.21195 8.22013C1.21704 8.22723 1.22314 8.23575 1.23047 8.24541C1.25377 8.27615 1.28809 8.32002 1.33203 8.3753C1.42004 8.48598 1.54908 8.64268 1.71484 8.8294C2.04583 9.20221 2.52718 9.69952 3.13086 10.1976C4.3286 11.1857 6.06033 12.221 8.08203 12.221C8.90391 12.221 9.67144 12.0499 10.371 11.7804ZM10.8048 8.62904C10.8644 8.4044 10.8962 8.16843 10.8962 7.92504C10.8962 6.4131 9.6705 5.18743 8.15857 5.18743C7.91309 5.18743 7.67517 5.21974 7.44881 5.28033L10.8048 8.62904ZM9.79315 10.1213L5.96371 6.28857C6.16435 6.0199 6.41317 5.78931 6.69735 5.60959L10.4772 9.38122C10.2966 9.66816 10.0642 9.91923 9.79315 10.1213Z" fill="#1E1E1E"/>\n</svg>',
   "unstar": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M10.1972 12.3545L7.99995 10.7617L4.3857 13.4014L5.7773 9.2666L2.42281 7.01758H4.86031L10.1972 12.3545Z" fill="#1E1E1E"/>\n<path d="M13.039 12.6807L12.3193 13.4014L2.96089 4.03418L3.68062 3.31348L13.039 12.6807Z" fill="#1E1E1E"/>\n<path d="M9.49507 7.01758H13.5771L10.5205 9.06738L7.01363 5.56055L7.99995 2.58496L9.49507 7.01758Z" fill="#1E1E1E"/>\n</svg>',
   "untitle": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M3.76358 3.06275L3.06079 3.76553L4.35081 5.05677L4.35297 5.05461L7.35278 8.05725V6.65465L5.08414 4.38431H4.45378V3.75347L3.76358 3.06275Z" fill="#1E1E1E"/>\n<path d="M12.4191 13.1326L13.1232 12.4403L11.9204 11.2257L8.58778 7.89058V9.29342L11.3717 12.0799L11.3695 12.0821L12.4191 13.1326Z" fill="#1E1E1E"/>\n<path fill-rule="evenodd" clip-rule="evenodd" d="M6.16399 4.38431L5.12477 3.34431H11.4868V4.38431H8.58778V6.80992L7.35278 5.57399V4.38431H6.16399ZM7.35278 9.13802V12.5743H8.58778V10.3742L7.35278 9.13802Z" fill="#1E1E1E"/>\n<path d="M8.58778 7.89058L7.35278 6.65465V8.05725L8.58778 9.29342V7.89058Z" fill="#1E1E1E"/>\n<path d="M4.45378 3.75347V4.38431H5.08414L4.45378 3.75347Z" fill="#1E1E1E"/>\n</svg>',
-  "up": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z" fill="#1E1E1E"/>\n</svg>'
+  "up": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path d="M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z" fill="#1E1E1E"/>\n</svg>',
+  "work": '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">\n<path fill-rule="evenodd" clip-rule="evenodd" d="M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z" fill="currentColor"/>\n</svg>'
 };
 const _Icon = class _Icon extends i2 {
   constructor() {
@@ -2413,7 +2399,7 @@ _Icon.properties = {
 _Icon.styles = r$1(styles$c);
 let Icon = _Icon;
 customElements.define("ds-icon", Icon);
-const styles$b = "/* ds-cycle.css */\n/* Cycle component styles for cycling through options */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cycle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--025);\n}\n\n.color-preview {\n  width: var(--05);\n  height: var(--05);\n  border-radius: 999px;\n  border: 1px solid color-mix(in srgb, var(--text-color-primary) 20%, transparent);\n  flex: 0 0 auto;\n}\n";
+const styles$b = "/* ds-cycle.css */\n/* Cycle component styles for cycling through options */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n}\n\n.cycle {\n  display: inline-flex;\n  align-items: center;\n}\n";
 const saveAccentColor = (color) => {
   localStorage.setItem("accentColor", color);
 };
@@ -2767,7 +2753,7 @@ const _Cycle = class _Cycle extends i2 {
     return x`
       <div class="cycle">
         <ds-button
-          variant=${this.variant || (this.type === "language" || this.type === "theme" ? "secondary" : "primary")}
+          variant=${this.type === "accent-color" ? "primary" : this.variant || (this.type === "language" || this.type === "theme" ? "secondary" : "primary")}
           ?disabled=${this.disabled}
           @click=${this.handleButtonClick}
         >
@@ -2777,7 +2763,7 @@ const _Cycle = class _Cycle extends i2 {
               >` : this.type === "language" ? x`<ds-text
                   text=${this.getValueDisplay(this.currentValue)}
                 ></ds-text>` : this.type === "theme" ? x`<ds-text
-                    text=${this.currentValue}
+                    text=${this.currentValue === "light" ? "Light" : "Dark"}
                   ></ds-text>` : this.type === "accent-color" ? x`<ds-text
                       text=${this.getColorKey(this.currentValue)}
                     ></ds-text>` : this.type === "page-style" ? x`<ds-text
@@ -2786,13 +2772,6 @@ const _Cycle = class _Cycle extends i2 {
                         text=${this.getValueDisplay(this.currentValue)}
                       ></ds-text>`}
         </ds-button>
-
-        ${this.type === "accent-color" ? x`
-              <div
-                class="color-preview"
-                style="background-color: var(${this.currentValue})"
-              ></div>
-            ` : ""}
       </div>
     `;
   }
@@ -3106,7 +3085,7 @@ _Tooltip.properties = {
 _Tooltip.styles = r$1(styles$7);
 let Tooltip = _Tooltip;
 customElements.define("ds-tooltip", Tooltip);
-const styles$6 = "/* ds-row.css */\n/* Row component styles */\n\n:host {\n  display: flex;\n  flex-direction: row;\n  align-items: end;\n}\n\n:host([fill]) {\n  justify-content: space-between;\n  height: calc(var(--1) * var(--sf));\n}\n\n:host([centered]) {\n  justify-content: center;\n  height: calc(var(--1) * var(--sf));\n  gap: calc(var(--025) * var(--sf));\n}\n\n:host([end]) {\n  justify-content: flex-end;\n  height: calc(var(--1) * var(--sf));\n  gap: calc(var(--025) * var(--sf));\n}\n";
+const styles$6 = "/* ds-row.css */\n/* Row component styles */\n\n:host {\n  display: flex;\n  flex-direction: row;\n  align-items: end;\n}\n\n:host([fill]) {\n  justify-content: space-between;\n  height: calc(var(--1) * var(--sf));\n  width: 100%;\n}\n\n:host([centered]) {\n  justify-content: center;\n  height: calc(var(--1) * var(--sf));\n  gap: calc(var(--025) * var(--sf));\n}\n\n:host([end]) {\n  justify-content: flex-end;\n  height: calc(var(--1) * var(--sf));\n  gap: calc(var(--025) * var(--sf));\n}\n";
 const _Row = class _Row extends i2 {
   constructor() {
     super();
@@ -3519,37 +3498,23 @@ const _Layout = class _Layout extends i2 {
     const isApp = this.mode === "app";
     const isList = this.mode === "list";
     const isHome = this.mode === "home";
+    const isSettings = this.mode === "settings";
     return x`
       <slot></slot>
       ${isView ? x`
             <div class="view-overlay">
-              ${isHome ? x`
+              ${isSettings ? x`
                     <div class="view-area view-banner">
                       <div class="grid-area-label">
                         <ds-text text="banner"></ds-text>
                       </div>
                     </div>
-                    <div class="view-area view-header">
-                      <div class="grid-area-label">
-                        <ds-text text="header"></ds-text>
-                      </div>
-                    </div>
-                    <div class="view-area view-message">
-                      <div class="grid-area-label">
-                        <ds-text text="message"></ds-text>
-                      </div>
-                    </div>
-                    <div class="view-area view-lists">
-                      <div class="grid-area-label">
-                        <ds-text text="lists"></ds-text>
-                      </div>
-                    </div>
-                    <div class="view-area view-footer">
+                    <div class="view-area view-settings">
                       <div class="grid-area-label">
-                        <ds-text text="footer"></ds-text>
+                        <ds-text text="settings"></ds-text>
                       </div>
                     </div>
-                  ` : isList ? x`
+                  ` : isHome ? x`
                       <div class="view-area view-banner">
                         <div class="grid-area-label">
                           <ds-text text="banner"></ds-text>
@@ -3560,12 +3525,22 @@ const _Layout = class _Layout extends i2 {
                           <ds-text text="header"></ds-text>
                         </div>
                       </div>
-                      <div class="view-area view-board">
+                      <div class="view-area view-message">
                         <div class="grid-area-label">
-                          <ds-text text="board"></ds-text>
+                          <ds-text text="message"></ds-text>
                         </div>
                       </div>
-                    ` : isApp ? x`
+                      <div class="view-area view-lists">
+                        <div class="grid-area-label">
+                          <ds-text text="lists"></ds-text>
+                        </div>
+                      </div>
+                      <div class="view-area view-footer">
+                        <div class="grid-area-label">
+                          <ds-text text="footer"></ds-text>
+                        </div>
+                      </div>
+                    ` : isList ? x`
                         <div class="view-area view-banner">
                           <div class="grid-area-label">
                             <ds-text text="banner"></ds-text>
@@ -3576,30 +3551,30 @@ const _Layout = class _Layout extends i2 {
                             <ds-text text="header"></ds-text>
                           </div>
                         </div>
-                        <div class="view-area view-main">
-                          <div class="grid-area-label">
-                            <ds-text text="main"></ds-text>
-                          </div>
-                        </div>
-                        <div class="view-area view-page-dots">
+                        <div class="view-area view-board">
                           <div class="grid-area-label">
-                            <ds-text text="page-dots"></ds-text>
+                            <ds-text text="board"></ds-text>
                           </div>
                         </div>
-                        <div class="view-area view-footer">
-                          <div class="grid-area-label">
-                            <ds-text text="footer"></ds-text>
+                      ` : isApp ? x`
+                          <div class="view-area view-banner">
+                            <div class="grid-area-label">
+                              <ds-text text="banner"></ds-text>
+                            </div>
                           </div>
-                        </div>
-                      ` : isCompany ? x`
                           <div class="view-area view-header">
                             <div class="grid-area-label">
                               <ds-text text="header"></ds-text>
                             </div>
                           </div>
-                          <div class="view-area view-content">
+                          <div class="view-area view-main">
+                            <div class="grid-area-label">
+                              <ds-text text="main"></ds-text>
+                            </div>
+                          </div>
+                          <div class="view-area view-page-dots">
                             <div class="grid-area-label">
-                              <ds-text text="content"></ds-text>
+                              <ds-text text="page-dots"></ds-text>
                             </div>
                           </div>
                           <div class="view-area view-footer">
@@ -3607,35 +3582,15 @@ const _Layout = class _Layout extends i2 {
                               <ds-text text="footer"></ds-text>
                             </div>
                           </div>
-                        ` : isPortfolio ? x`
-                            <div class="view-area view-square">
-                              <div class="grid-area-label">
-                                <ds-text text="square"></ds-text>
-                              </div>
-                            </div>
-                            <div class="view-area view-title">
-                              <div class="grid-area-label">
-                                <ds-text text="title"></ds-text>
-                              </div>
-                            </div>
+                        ` : isCompany ? x`
                             <div class="view-area view-header">
                               <div class="grid-area-label">
                                 <ds-text text="header"></ds-text>
                               </div>
                             </div>
-                            <div class="view-area view-projects">
-                              <div class="grid-area-label">
-                                <ds-text text="projects"></ds-text>
-                              </div>
-                            </div>
-                            <div class="view-area view-bio">
-                              <div class="grid-area-label">
-                                <ds-text text="bio"></ds-text>
-                              </div>
-                            </div>
-                            <div class="view-area view-nav">
+                            <div class="view-area view-content">
                               <div class="grid-area-label">
-                                <ds-text text="nav"></ds-text>
+                                <ds-text text="content"></ds-text>
                               </div>
                             </div>
                             <div class="view-area view-footer">
@@ -3643,7 +3598,43 @@ const _Layout = class _Layout extends i2 {
                                 <ds-text text="footer"></ds-text>
                               </div>
                             </div>
-                          ` : ""}
+                          ` : isPortfolio ? x`
+                              <div class="view-area view-square">
+                                <div class="grid-area-label">
+                                  <ds-text text="square"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-title">
+                                <div class="grid-area-label">
+                                  <ds-text text="title"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-header">
+                                <div class="grid-area-label">
+                                  <ds-text text="header"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-projects">
+                                <div class="grid-area-label">
+                                  <ds-text text="projects"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-bio">
+                                <div class="grid-area-label">
+                                  <ds-text text="bio"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-nav">
+                                <div class="grid-area-label">
+                                  <ds-text text="nav"></ds-text>
+                                </div>
+                              </div>
+                              <div class="view-area view-footer">
+                                <div class="grid-area-label">
+                                  <ds-text text="footer"></ds-text>
+                                </div>
+                              </div>
+                            ` : ""}
             </div>
           ` : ""}
     `;
@@ -3657,568 +3648,753 @@ _Layout.properties = {
 _Layout.styles = [
   r$1(styles),
   i$2`
-    :host {
-      display: grid;
-      position: relative;
-      width: 100%;
-    }
+      :host {
+        display: grid;
+        position: relative;
+        width: 100%;
+      }
 
-    slot {
-      display: contents;
-    }
+      slot {
+        display: contents;
+      }
 
-    :host([mode="portfolio"]) {
-      --portfolio-cols: 120px 480px 40px;
-      --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px 120px;
-      --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
-        ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
-      --portfolio-overlay-cols: 120px 480px;
-      --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
-        ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
-      grid-template-columns: var(--portfolio-cols);
-      grid-template-rows: var(--portfolio-rows);
-      grid-template-areas: var(--portfolio-areas);
-      min-height: 600px;
-      background-color: rgba(165, 165, 165, 0.03);
-      max-width: 640px;
-      margin: 0;
-    }
+      :host([mode="portfolio"]) {
+        --portfolio-cols: 120px 480px 40px;
+        --portfolio-rows: 120px 120px 60px 180px 60px 120px 60px 20px 120px
+          120px;
+        --portfolio-areas: "square . ." ". title ." ". header ." ". projects ."
+          ". . ." ". bio ." ". . ." ". nav ." ". . ." ". footer ." ". . .";
+        --portfolio-overlay-cols: 120px 480px;
+        --portfolio-overlay-areas: "square ." ". title" ". header" ". projects"
+          ". ." ". bio" ". ." ". nav" ". ." ". footer" ". .";
+        grid-template-columns: var(--portfolio-cols);
+        grid-template-rows: var(--portfolio-rows);
+        grid-template-areas: var(--portfolio-areas);
+        min-height: 600px;
+        background-color: rgba(165, 165, 165, 0.03);
+        max-width: 640px;
+        margin: 0;
+      }
 
-    :host([mode="portfolio"]) .view-overlay {
-      grid-template-columns: var(--portfolio-overlay-cols);
-      grid-template-rows: var(--portfolio-rows);
-      grid-template-areas: var(--portfolio-overlay-areas);
-    }
+      :host([mode="portfolio"]) .view-overlay {
+        grid-template-columns: var(--portfolio-overlay-cols);
+        grid-template-rows: var(--portfolio-rows);
+        grid-template-areas: var(--portfolio-overlay-areas);
+      }
 
-    :host([mode="company"]) {
-      --company-cols: auto 400px auto;
-      --company-rows: 80px 20px 20px 120px 20px 120px;
-      --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
-        ". footer .";
-      grid-template-columns: var(--company-cols);
-      grid-template-rows: var(--company-rows);
-      grid-template-areas: var(--company-areas);
-      gap: 0;
-      max-width: 100%;
-    }
+      :host([mode="company"]) {
+        --company-cols: auto 400px auto;
+        --company-rows: 80px 20px 20px 120px 20px 120px;
+        --company-areas: ". . ." ". header ." ". . ." ". content ." ". . ."
+          ". footer .";
+        grid-template-columns: var(--company-cols);
+        grid-template-rows: var(--company-rows);
+        grid-template-areas: var(--company-areas);
+        gap: 0;
+        max-width: 100%;
+      }
 
-    :host([mode="company"]) .view-overlay {
-      grid-template-columns: var(--company-cols);
-      grid-template-rows: var(--company-rows);
-      grid-template-areas: var(--company-areas);
-      gap: 0;
-    }
+      :host([mode="company"]) .view-overlay {
+        grid-template-columns: var(--company-cols);
+        grid-template-rows: var(--company-rows);
+        grid-template-areas: var(--company-areas);
+        gap: 0;
+      }
 
-    :host([align="left"]),
-    :host([mode="portfolio"][align="left"]),
-    :host([mode="company"][align="left"]),
-    :host([mode="app"][align="left"]),
-    :host([mode="list"][align="left"]),
-    :host([mode="home"][align="left"]) {
-      margin: 0;
-      justify-self: start;
-    }
+      :host([align="left"]),
+      :host([mode="portfolio"][align="left"]),
+      :host([mode="company"][align="left"]),
+      :host([mode="app"][align="left"]),
+      :host([mode="list"][align="left"]),
+      :host([mode="home"][align="left"]),
+      :host([mode="settings"][align="left"]) {
+        margin: 0;
+        justify-self: start;
+      }
 
-    :host([align="center"]),
-    :host([mode="portfolio"][align="center"]),
-    :host([mode="company"][align="center"]),
-    :host([mode="app"][align="center"]),
-    :host([mode="list"][align="center"]),
-    :host([mode="home"][align="center"]) {
-      margin: 0 auto;
-      justify-self: center;
-    }
+      :host([align="center"]),
+      :host([mode="portfolio"][align="center"]),
+      :host([mode="company"][align="center"]),
+      :host([mode="app"][align="center"]),
+      :host([mode="list"][align="center"]),
+      :host([mode="home"][align="center"]),
+      :host([mode="settings"][align="center"]) {
+        margin: 0 auto;
+        justify-self: center;
+      }
 
-    :host([align="right"]),
-    :host([mode="portfolio"][align="right"]),
-    :host([mode="company"][align="right"]),
-    :host([mode="app"][align="right"]),
-    :host([mode="list"][align="right"]),
-    :host([mode="home"][align="right"]) {
-      margin: 0 0 0 auto;
-      justify-self: end;
-    }
+      :host([align="right"]),
+      :host([mode="portfolio"][align="right"]),
+      :host([mode="company"][align="right"]),
+      :host([mode="app"][align="right"]),
+      :host([mode="list"][align="right"]),
+      :host([mode="home"][align="right"]),
+      :host([mode="settings"][align="right"]) {
+        margin: 0 0 0 auto;
+        justify-self: end;
+      }
 
-    /* App mode - Base */
-    :host([mode="app"]) {
-      --app-cols: 100%;
-      --app-overlay-cols: 100%;
-      grid-template-columns: var(--app-cols);
-      grid-template-rows: var(--app-layout);
-      grid-template-areas: var(--app-layout-areas);
-      min-height: 100vh;
-      background-color: transparent;
-      width: calc(240px * var(--sf, 1));
-      max-width: calc(240px * var(--sf, 1));
-      margin: 0 auto;
-    }
+      /* App mode - Base */
+      :host([mode="app"]) {
+        --app-cols: 100%;
+        --app-overlay-cols: 100%;
+        grid-template-columns: var(--app-cols);
+        grid-template-rows: var(--app-layout);
+        grid-template-areas: var(--app-layout-areas);
+        min-height: 100vh;
+        background-color: transparent;
+        width: calc(240px * var(--sf, 1));
+        max-width: calc(240px * var(--sf, 1));
+        margin: 0 auto;
+      }
 
-    :host([mode="app"]) .view-overlay {
-      grid-template-columns: var(--app-overlay-cols);
-      grid-template-rows: var(--app-layout);
-      grid-template-areas: var(--app-layout-areas);
-    }
+      :host([mode="app"]) .view-overlay {
+        grid-template-columns: var(--app-overlay-cols);
+        grid-template-rows: var(--app-layout);
+        grid-template-areas: var(--app-layout-areas);
+      }
 
-    /* List mode - Base */
-    :host([mode="list"]) {
-      --list-cols: 100%;
-      --list-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
-        calc(var(--unit) * var(--sf)) calc(var(--twenty) * var(--sf));
-      --list-areas: "banner" "." "header" "board";
-      --list-overlay-cols: 100%;
-      --list-overlay-rows: calc(var(--unit) * var(--sf))
-        calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
-        calc(var(--twenty) * var(--sf));
-      --list-overlay-areas: "banner" "." "header" "board";
-      grid-template-columns: var(--list-cols);
-      grid-template-rows: var(--list-rows);
-      grid-template-areas: var(--list-areas);
-      min-height: 100vh;
-      background-color: transparent;
-      width: calc(240px * var(--sf, 1));
-      max-width: calc(240px * var(--sf, 1));
-      margin: 0 auto;
-    }
+      /* List mode - Base */
+      :host([mode="list"]) {
+        --list-cols: 100%;
+        --list-rows: calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+          calc(var(--unit) * var(--sf)) calc(var(--twenty) * var(--sf));
+        --list-areas: "banner" "." "header" "board";
+        --list-overlay-cols: 100%;
+        --list-overlay-rows: calc(var(--unit) * var(--sf))
+          calc(var(--unit) * var(--sf)) calc(var(--unit) * var(--sf))
+          calc(var(--twenty) * var(--sf));
+        --list-overlay-areas: "banner" "." "header" "board";
+        grid-template-columns: var(--list-cols);
+        grid-template-rows: var(--list-rows);
+        grid-template-areas: var(--list-areas);
+        min-height: 100vh;
+        background-color: transparent;
+        width: calc(240px * var(--sf, 1));
+        max-width: calc(240px * var(--sf, 1));
+        margin: 0 auto;
+      }
 
-    :host([mode="list"]) .view-overlay {
-      grid-template-columns: var(--list-overlay-cols);
-      grid-template-rows: var(--list-overlay-rows);
-      grid-template-areas: var(--list-overlay-areas);
-    }
+      :host([mode="list"]) .view-overlay {
+        grid-template-columns: var(--list-overlay-cols);
+        grid-template-rows: var(--list-overlay-rows);
+        grid-template-areas: var(--list-overlay-areas);
+      }
 
-    /* Home mode - Base */
-    :host([mode="home"]) {
-      --home-cols: 100%;
-      --home-areas: "banner" "." "header" "." "message" "lists" "." "footer";
-      --home-overlay-cols: 100%;
-      --home-overlay-areas: "banner" "." "header" "." "message" "lists" "."
-        "footer";
-      grid-template-columns: var(--home-cols);
-      grid-template-rows: var(--home-layout);
-      grid-template-areas: var(--home-areas);
-      min-height: 100vh;
-      background-color: transparent;
-      width: calc(240px * var(--sf, 1));
-      max-width: calc(240px * var(--sf, 1));
-      margin: 0 auto;
-    }
+      /* Home mode - Base */
+      :host([mode="home"]) {
+        --home-cols: 100%;
+        --home-areas: "banner" "." "header" "." "lists";
+        --home-overlay-cols: 100%;
+        --home-overlay-areas: "banner" "." "header" "." "lists";
+        grid-template-columns: var(--home-cols);
+        grid-template-rows: var(--home-layout);
+        grid-template-areas: var(--home-areas);
+        min-height: 100vh;
+        background-color: transparent;
+        width: calc(240px * var(--sf, 1));
+        max-width: calc(240px * var(--sf, 1));
+        margin: 0 auto;
+      }
 
-    :host([mode="home"]) .view-overlay {
-      grid-template-columns: var(--home-overlay-cols);
-      grid-template-rows: var(--home-layout);
-      grid-template-areas: var(--home-overlay-areas);
-    }
+      :host([mode="home"]) .view-overlay {
+        grid-template-columns: var(--home-overlay-cols);
+        grid-template-rows: var(--home-layout);
+        grid-template-areas: var(--home-overlay-areas);
+      }
 
-    .view-overlay {
-      position: absolute;
-      margin-left: -1px;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      pointer-events: none;
-      z-index: 1000;
-      display: grid;
-    }
+      /* Settings mode - Base */
+      :host([mode="settings"]) {
+        --settings-cols: 100%;
+        --settings-overlay-cols: 100%;
+        grid-template-columns: var(--settings-cols);
+        grid-template-rows: var(--settings-layout);
+        grid-template-areas: var(--settings-layout-areas);
+        min-height: 100vh;
+        background-color: transparent;
+        width: calc(240px * var(--sf, 1));
+        max-width: calc(240px * var(--sf, 1));
+        margin: 0 auto;
+      }
 
-    .view-area {
-      display: flex;
-      width: calc(240px * var(--sf, 1));
-      height: 100%;
-      align-items: center;
-      justify-content: center;
-      font-family: var(--typeface-regular);
-      font-size: calc(var(--type-size-default) * var(--05));
-      color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-      background-color: color-mix(
-        in srgb,
-        var(--accent-color) 25%,
-        transparent
-      );
-      opacity: 1;
-      position: relative;
-    }
+      :host([mode="settings"]) .view-overlay {
+        grid-template-columns: var(--settings-overlay-cols);
+        grid-template-rows: var(--settings-layout);
+        grid-template-areas: var(--settings-layout-areas);
+      }
 
-    .grid-area-label {
-      position: absolute;
-      top: calc(-20px * var(--sf, 1));
-      left: 0;
-      height: calc(20px * var(--sf, 1));
-      width: fit-content;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 calc(4px * var(--sf, 1));
-      border-radius: calc(2px * var(--sf, 1));
-      z-index: 10000;
-      pointer-events: none;
-      white-space: nowrap;
-    }
+      .view-overlay {
+        position: absolute;
+        margin-left: -1px;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+        z-index: 1000;
+        display: grid;
+      }
 
-    /* Banner label stays inside the area (first item) */
-    :host([mode="app"]) .view-area.view-banner .grid-area-label,
-    :host([mode="list"]) .view-area.view-banner .grid-area-label,
-    :host([mode="home"]) .view-area.view-banner .grid-area-label,
-    :host([mode="company"]) .view-area.view-header .grid-area-label,
-    :host([mode="portfolio"]) .view-area.view-square .grid-area-label {
-      top: 0;
-    }
+      .view-area {
+        display: flex;
+        width: calc(240px * var(--sf, 1));
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        font-family: var(--typeface-regular);
+        font-size: calc(var(--type-size-default) * var(--05));
+        color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+        background-color: color-mix(
+          in srgb,
+          var(--accent-color) 25%,
+          transparent
+        );
+        opacity: 1;
+        position: relative;
+      }
 
-    .grid-area-label ds-text {
-      font-size: calc(11px * var(--sf, 1));
-      line-height: 1;
-      color: white;
-      text-transform: lowercase;
-    }
+      .grid-area-label {
+        position: absolute;
+        top: calc(-20px * var(--sf, 1));
+        left: 0;
+        height: calc(20px * var(--sf, 1));
+        width: fit-content;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0 calc(4px * var(--sf, 1));
+        border-radius: calc(2px * var(--sf, 1));
+        z-index: 10000;
+        pointer-events: none;
+        white-space: nowrap;
+      }
 
-    :host([mode="portfolio"]) .view-area:nth-of-type(1) {
-      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(2) {
-      border-color: var(--sharp-blue);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(3) {
-      border-color: var(--yellow);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(4) {
-      border-color: var(--apple-green);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(4) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
-          color-mix(in srgb, var(--apple-green) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(5) {
-      border-color: var(--pink);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(5) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--pink) 70%, black) 0%,
-          color-mix(in srgb, var(--pink) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(6) {
-      border-color: var(--orange);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(6) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--orange) 70%, black) 0%,
-          color-mix(in srgb, var(--orange) 70%, black) 100%
-        );
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(7) {
-      border-color: var(--zenith-blue);
-    }
-    :host([mode="portfolio"]) .view-area:nth-of-type(7) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--zenith-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--zenith-blue) 70%, black) 100%
-        );
-    }
+      /* Banner label stays inside the area (first item) */
+      :host([mode="app"]) .view-area.view-banner .grid-area-label,
+      :host([mode="list"]) .view-area.view-banner .grid-area-label,
+      :host([mode="home"]) .view-area.view-banner .grid-area-label,
+      :host([mode="settings"]) .view-area.view-banner .grid-area-label,
+      :host([mode="company"]) .view-area.view-header .grid-area-label,
+      :host([mode="portfolio"]) .view-area.view-square .grid-area-label {
+        top: 0;
+      }
 
-    :host([mode="company"]) .view-area:nth-of-type(1) {
-      border-color: var(--tuned-red);
-    }
-    :host([mode="company"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="company"]) .view-area:nth-of-type(2) {
-      border-color: var(--sharp-blue);
-    }
-    :host([mode="company"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
-        );
-    }
-    :host([mode="company"]) .view-area:nth-of-type(3) {
-      border-color: var(--yellow);
-    }
-    :host([mode="company"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
-        );
-    }
+      .grid-area-label ds-text {
+        font-size: calc(11px * var(--sf, 1));
+        line-height: 1;
+        color: white;
+        text-transform: lowercase;
+      }
 
-    :host([mode="app"]) .view-area:nth-of-type(1) {
-      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="app"]) .view-area:nth-of-type(2) {
-      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
-        );
-    }
-    :host([mode="app"]) .view-area:nth-of-type(3) {
-      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
-        );
-    }
-    :host([mode="app"]) .view-area:nth-of-type(4) {
-      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(4) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
-          color-mix(in srgb, var(--apple-green) 70%, black) 100%
-        );
-    }
-    :host([mode="app"]) .view-area:nth-of-type(5) {
-      background-color: color-mix(in srgb, var(--pink) 25%, transparent);
-    }
-    :host([mode="app"]) .view-area:nth-of-type(5) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--pink) 70%, black) 0%,
-          color-mix(in srgb, var(--pink) 70%, black) 100%
-        );
-    }
+      :host([mode="portfolio"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(2) {
+        border-color: var(--sharp-blue);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(3) {
+        border-color: var(--yellow);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(4) {
+        border-color: var(--apple-green);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(4) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+            color-mix(in srgb, var(--apple-green) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(5) {
+        border-color: var(--pink);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(5) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--pink) 70%, black) 0%,
+            color-mix(in srgb, var(--pink) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(6) {
+        border-color: var(--orange);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(6) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--orange) 70%, black) 0%,
+            color-mix(in srgb, var(--orange) 70%, black) 100%
+          );
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(7) {
+        border-color: var(--zenith-blue);
+      }
+      :host([mode="portfolio"]) .view-area:nth-of-type(7) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--zenith-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--zenith-blue) 70%, black) 100%
+          );
+      }
 
-    :host([mode="list"]) .view-area:nth-of-type(1) {
-      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-    }
-    :host([mode="list"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="list"]) .view-area:nth-of-type(2) {
-      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
-    }
-    :host([mode="list"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
-        );
-    }
-    :host([mode="list"]) .view-area:nth-of-type(3) {
-      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
-    }
-    :host([mode="list"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
+      :host([mode="company"]) .view-area:nth-of-type(1) {
+        border-color: var(--tuned-red);
+      }
+      :host([mode="company"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="company"]) .view-area:nth-of-type(2) {
+        border-color: var(--sharp-blue);
+      }
+      :host([mode="company"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="company"]) .view-area:nth-of-type(3) {
+        border-color: var(--yellow);
+      }
+      :host([mode="company"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+
+      :host([mode="app"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="app"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="app"]) .view-area:nth-of-type(2) {
+        background-color: color-mix(
+          in srgb,
+          var(--sharp-blue) 25%,
+          transparent
         );
-    }
-    :host([mode="list"]) .view-area:nth-of-type(4) {
-      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
-    }
-    :host([mode="list"]) .view-area:nth-of-type(4) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
-          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+      }
+      :host([mode="app"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="app"]) .view-area:nth-of-type(3) {
+        background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+      }
+      :host([mode="app"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+      :host([mode="app"]) .view-area:nth-of-type(4) {
+        background-color: color-mix(
+          in srgb,
+          var(--apple-green) 25%,
+          transparent
         );
-    }
+      }
+      :host([mode="app"]) .view-area:nth-of-type(4) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+            color-mix(in srgb, var(--apple-green) 70%, black) 100%
+          );
+      }
+      :host([mode="app"]) .view-area:nth-of-type(5) {
+        background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+      }
+      :host([mode="app"]) .view-area:nth-of-type(5) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--pink) 70%, black) 0%,
+            color-mix(in srgb, var(--pink) 70%, black) 100%
+          );
+      }
 
-    :host([mode="home"]) .view-area:nth-of-type(1) {
-      background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(1) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
-          color-mix(in srgb, var(--tuned-red) 70%, black) 100%
-        );
-    }
-    :host([mode="home"]) .view-area:nth-of-type(2) {
-      background-color: color-mix(in srgb, var(--sharp-blue) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(2) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
-          color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+      :host([mode="list"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="list"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="list"]) .view-area:nth-of-type(2) {
+        background-color: color-mix(
+          in srgb,
+          var(--sharp-blue) 25%,
+          transparent
         );
-    }
-    :host([mode="home"]) .view-area:nth-of-type(3) {
-      background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(3) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--yellow) 70%, black) 0%,
-          color-mix(in srgb, var(--yellow) 70%, black) 100%
+      }
+      :host([mode="list"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="list"]) .view-area:nth-of-type(3) {
+        background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+      }
+      :host([mode="list"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+      :host([mode="list"]) .view-area:nth-of-type(4) {
+        background-color: color-mix(
+          in srgb,
+          var(--apple-green) 25%,
+          transparent
         );
-    }
-    :host([mode="home"]) .view-area:nth-of-type(4) {
-      background-color: color-mix(in srgb, var(--apple-green) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(4) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--apple-green) 70%, black) 0%,
-          color-mix(in srgb, var(--apple-green) 70%, black) 100%
+      }
+      :host([mode="list"]) .view-area:nth-of-type(4) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+            color-mix(in srgb, var(--apple-green) 70%, black) 100%
+          );
+      }
+
+      :host([mode="home"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="home"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="home"]) .view-area:nth-of-type(2) {
+        background-color: color-mix(
+          in srgb,
+          var(--sharp-blue) 25%,
+          transparent
         );
-    }
-    :host([mode="home"]) .view-area:nth-of-type(5) {
-      background-color: color-mix(in srgb, var(--pink) 25%, transparent);
-    }
-    :host([mode="home"]) .view-area:nth-of-type(5) .grid-area-label {
-      background-image:
-        linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%),
-        linear-gradient(
-          90deg,
-          color-mix(in srgb, var(--pink) 70%, black) 0%,
-          color-mix(in srgb, var(--pink) 70%, black) 100%
+      }
+      :host([mode="home"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
+      :host([mode="home"]) .view-area:nth-of-type(3) {
+        background-color: color-mix(in srgb, var(--yellow) 25%, transparent);
+      }
+      :host([mode="home"]) .view-area:nth-of-type(3) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--yellow) 70%, black) 0%,
+            color-mix(in srgb, var(--yellow) 70%, black) 100%
+          );
+      }
+      :host([mode="home"]) .view-area:nth-of-type(4) {
+        background-color: color-mix(
+          in srgb,
+          var(--apple-green) 25%,
+          transparent
         );
-    }
+      }
+      :host([mode="home"]) .view-area:nth-of-type(4) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--apple-green) 70%, black) 0%,
+            color-mix(in srgb, var(--apple-green) 70%, black) 100%
+          );
+      }
+      :host([mode="home"]) .view-area:nth-of-type(5) {
+        background-color: color-mix(in srgb, var(--pink) 25%, transparent);
+      }
+      :host([mode="home"]) .view-area:nth-of-type(5) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--pink) 70%, black) 0%,
+            color-mix(in srgb, var(--pink) 70%, black) 100%
+          );
+      }
 
-    .view-square {
-      grid-area: square;
-    }
+      .view-square {
+        grid-area: square;
+      }
 
-    .view-title {
-      grid-area: title;
-    }
+      .view-title {
+        grid-area: title;
+      }
 
-    .view-header {
-      grid-area: header;
-    }
+      .view-header {
+        grid-area: header;
+      }
 
-    .view-projects {
-      grid-area: projects;
-    }
+      .view-projects {
+        grid-area: projects;
+      }
 
-    .view-bio {
-      grid-area: bio;
-    }
+      .view-bio {
+        grid-area: bio;
+      }
 
-    .view-nav {
-      grid-area: nav;
-    }
+      .view-nav {
+        grid-area: nav;
+      }
 
-    .view-footer {
-      grid-area: footer;
-    }
+      .view-footer {
+        grid-area: footer;
+      }
 
-    .view-content {
-      grid-area: content;
-    }
+      .view-content {
+        grid-area: content;
+      }
 
-    .view-banner {
-      grid-area: banner;
-    }
+      .view-banner {
+        grid-area: banner;
+      }
 
-    .view-main {
-      grid-area: main;
-    }
+      .view-main {
+        grid-area: main;
+      }
 
-    .view-page-dots {
-      grid-area: page-dots;
-    }
+      .view-page-dots {
+        grid-area: page-dots;
+      }
 
-    .view-board {
-      grid-area: board;
-    }
+      .view-board {
+        grid-area: board;
+      }
 
-    .view-message {
-      grid-area: message;
-    }
+      .view-message {
+        grid-area: message;
+      }
 
-    .view-lists {
-      grid-area: lists;
-    }
+      .view-lists {
+        grid-area: lists;
+      }
+
+      .view-settings {
+        grid-area: settings;
+      }
+
+      :host([mode="settings"]) .view-area:nth-of-type(1) {
+        background-color: color-mix(in srgb, var(--tuned-red) 25%, transparent);
+      }
+      :host([mode="settings"]) .view-area:nth-of-type(1) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 0%,
+            color-mix(in srgb, var(--tuned-red) 70%, black) 100%
+          );
+      }
+      :host([mode="settings"]) .view-area:nth-of-type(2) {
+        background-color: color-mix(
+          in srgb,
+          var(--sharp-blue) 25%,
+          transparent
+        );
+      }
+      :host([mode="settings"]) .view-area:nth-of-type(2) .grid-area-label {
+        background-image:
+          linear-gradient(
+            90deg,
+            rgba(0, 0, 0, 0.2) 0%,
+            rgba(0, 0, 0, 0.2) 100%
+          ),
+          linear-gradient(
+            90deg,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 0%,
+            color-mix(in srgb, var(--sharp-blue) 70%, black) 100%
+          );
+      }
     `
 ];
 let Layout = _Layout;