@umbraco-cms/backoffice 16.0.0-rc2 → 16.0.0-rc4

package/dist-cms/apps/backoffice/backoffice.context.js

@@ -56,7 +56,11 @@ export class UmbBackofficeContext extends UmbContextBase {
         this.#activeSectionAlias.setValue(alias);
     }
     async serverUpgradeCheck() {
-        const version = await this.observe(this.version).asPromise();
+        const version = await this.observe(this.version)
+            .asPromise()
+            .catch(() => null);
+        if (!version)
+            return null;
         const repository = new UmbSysinfoRepository(this);
         return repository.serverUpgradeCheck(version);
     }

package/dist-cms/apps/backoffice/components/backoffice-main.element.js

@@ -47,8 +47,10 @@ let UmbBackofficeMainElement = class UmbBackofficeMainElement extends UmbLitElem
         });
         if (newRoutes.length > 0) {
             newRoutes.push({
+                path: '',
+                pathMatch: 'full',
+                awaitStability: true,
                 redirectTo: newRoutes[0].path,
-                path: ``,
             });
             newRoutes.push({
                 path: `**`,

package/dist-cms/css/uui-css.css

@@ -79,132 +79,426 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 /* Color Properties */
 :root {
   --uui-palette-deep-saffron: #f79c37;
-  --uui-palette-deep-saffron-light: rgb(249, 181, 103);
-  --uui-palette-deep-saffron-dark: rgb(222, 145, 56);
-  --uui-palette-deep-saffron-dimmed: rgb(166, 150, 133);
+  --uui-palette-deep-saffron-light: rgb(
+    249,
+    181,
+    103
+  ); /* color($deep-saffron lightness(+ 10%)) */
+  --uui-palette-deep-saffron-dark: rgb(
+    222,
+    145,
+    56
+  ); /* color($deep-saffron blackness(+ 10%)); */
+  --uui-palette-deep-saffron-dimmed: rgb(
+    166,
+    150,
+    133
+  ); /* color(
+    $deep-saffron saturation(- 74%) blackness(+ 1%)
+  ); */
   --uui-palette-sunglow: #fad634;
-  --uui-palette-sunglow-light: rgb(251, 224, 101);
-  --uui-palette-sunglow-dark: rgb(224, 193, 51);
-  --uui-palette-sunglow-dimmed: rgb(166, 160, 133);
+  --uui-palette-sunglow-light: rgb(
+    251,
+    224,
+    101
+  ); /* color($sunglow lightness(+ 10%)); */
+  --uui-palette-sunglow-dark: rgb(
+    224,
+    193,
+    51
+  ); /* color($sunglow blackness(+ 10%)); */
+  --uui-palette-sunglow-dimmed: rgb(
+    166,
+    160,
+    133
+  ); /* color(
+    $sunglow saturation(- 78%) blackness(+ 1%)
+  ); */
   --uui-palette-spanish-pink: #f5c1bc;
-  --uui-palette-spanish-pink-light: rgb(248, 214, 211);
-  --uui-palette-spanish-pink-dark: rgb(232, 192, 189);
-  --uui-palette-spanish-pink-dimmed: rgb(219, 212, 212);
+  --uui-palette-spanish-pink-light: rgb(
+    248,
+    214,
+    211
+  ); /* color($spanish-pink lightness(+ 5%)); */
+  --uui-palette-spanish-pink-dark: rgb(
+    232,
+    192,
+    189
+  ); /* color($spanish-pink blackness(+ 5%)); */
+  --uui-palette-spanish-pink-dimmed: rgb(
+    219,
+    212,
+    212
+  ); /* color(
+    $spanish-pink saturation(- 60%) blackness(+ 1%)
+  ); */
   --uui-palette-gunmetal: #162335;
-  --uui-palette-gunmetal-light: rgb(35, 55, 83);
-  --uui-palette-gunmetal-dark: rgb(23, 27, 33);
-  --uui-palette-gunmetal-dimmed: rgb(54, 54, 54);
+  --uui-palette-gunmetal-light: rgb(
+    35,
+    55,
+    83
+  ); /* color($gunmetal lightness(+ 8%)); */
+  --uui-palette-gunmetal-dark: rgb(
+    23,
+    27,
+    33
+  ); /* color($gunmetal blackness(+ 8%)); */
+  --uui-palette-gunmetal-dimmed: rgb(
+    54,
+    54,
+    54
+  ); /* color(
+    $gunmetal saturation(- 50%) lightness(+ 6%)
+  ); */
   --uui-palette-space-cadet: #1b264f;
-  --uui-palette-space-cadet-light: rgb(38, 53, 110);
-  --uui-palette-space-cadet-dark: rgb(28, 35, 59);
-  --uui-palette-space-cadet-dimmed: rgb(106, 117, 154);
+  --uui-palette-space-cadet-light: rgb(
+    38,
+    53,
+    110
+  ); /* color($space-cadet lightness(+ 8%)); */
+  --uui-palette-space-cadet-dark: rgb(
+    28,
+    35,
+    59
+  ); /* color($space-cadet blackness(+ 8%)); */
+  --uui-palette-space-cadet-dimmed: rgb(
+    106,
+    117,
+    154
+  ); /* color(
+    $space-cadet saturation(- 30%) lightness(+ 30%)
+  ); */
   --uui-palette-violet-blue: #3544b1;
-  --uui-palette-violet-blue-light: rgb(70, 86, 200);
-  --uui-palette-violet-blue-dark: rgb(54, 65, 156);
-  --uui-palette-violet-blue-dimmed: rgb(87, 87, 87);
-
-  /*
-  // not used jet.
-  $matisse: #2152a3;
-  --uui-palette-matisse: $matisse;
-  --uui-palette-matisse-light: color($matisse lightness(+ 8%));
-  --uui-palette-matisse-dark: color($matisse blackness(+ 8%));
-  --uui-palette-matisse-dimmed: color(
-    $matisse saturation(- 30%) blackness(+ 22%)
-  );
-  */
+  --uui-palette-violet-blue-light: rgb(
+    70,
+    86,
+    200
+  ); /* color($violet-blue lightness(+ 8%)); */
+  --uui-palette-violet-blue-dark: rgb(
+    54,
+    65,
+    156
+  ); /* color($violet-blue blackness(+ 8%)); */
+  --uui-palette-violet-blue-dimmed: rgb(
+    87,
+    87,
+    87
+  ); /* color(
+    $violet-blue saturation(- 30%) blackness(+ 22%)
+  ); */
   --uui-palette-malibu: #3879ff;
-  --uui-palette-malibu-light: rgb(97, 150, 255);
-  --uui-palette-malibu-dark: rgb(56, 116, 235);
-  --uui-palette-malibu-dimmed: rgb(115, 120, 130);
-  /*
-  $outline-blue: #3879ff;
-  --uui-palette-outline-blue: $outline-blue;
-  --uui-palette-outline-blue-light: color($outline-blue lightness(+ 8%));
-  --uui-palette-outline-blue-dark: color($outline-blue blackness(+ 8%));
-  --uui-palette-outline-blue-dimmed: color(
-    $outline-blue saturation(- 60%) blackness(+ 26%)
-  );
-*/
+  --uui-palette-malibu-light: rgb(
+    97,
+    150,
+    255
+  ); /* color($malibu lightness(+ 8%)); */
+  --uui-palette-malibu-dark: rgb(
+    56,
+    116,
+    235
+  ); /* color($malibu blackness(+ 8%)); */
+  --uui-palette-malibu-dimmed: rgb(
+    115,
+    120,
+    130
+  ); /* color(
+    $malibu saturation(- 60%) blackness(+ 26%)
+  ); */
   --uui-palette-maroon-flush: #d42054;
-  --uui-palette-maroon-flush-light: rgb(226, 60, 107);
-  --uui-palette-maroon-flush-dark: rgb(191, 33, 78);
-  --uui-palette-maroon-flush-dimmed: rgb(133, 107, 114);
+  --uui-palette-maroon-flush-light: rgb(
+    226,
+    60,
+    107
+  ); /* color($maroon-flush lightness(+ 8%)); */
+  --uui-palette-maroon-flush-dark: rgb(
+    191,
+    33,
+    78
+  ); /* color($maroon-flush blackness(+ 8%)); */
+  --uui-palette-maroon-flush-dimmed: rgb(
+    133,
+    107,
+    114
+  ); /* color(
+    $maroon-flush saturation(- 62%) blackness(+ 2%)
+  ); */
   --uui-palette-jungle-green: #2bc37c;
-  --uui-palette-jungle-green-light: rgb(58, 212, 140);
-  --uui-palette-jungle-green-dark: rgb(43, 179, 115);
-  --uui-palette-jungle-green-dimmed: rgb(102, 135, 120);
+  --uui-palette-jungle-green-light: rgb(
+    58,
+    212,
+    140
+  ); /* color($jungle-green lightness(+ 6%)); */
+  --uui-palette-jungle-green-dark: rgb(
+    43,
+    179,
+    115
+  ); /* color($jungle-green blackness(+ 6%)); */
+  --uui-palette-jungle-green-dimmed: rgb(
+    102,
+    135,
+    120
+  ); /* color(
+    $jungle-green saturation(- 50%) blackness(+ 1%)
+  ); */
   --uui-palette-forest-green: #0b8152;
-  --uui-palette-forest-green-light: rgb(13, 155, 98);
-  --uui-palette-forest-green-dark: rgb(10, 115, 73);
-  --uui-palette-forest-green-dimmed: rgb(46, 89, 72);
+  --uui-palette-forest-green-light: rgb(
+    13,
+    155,
+    98
+  ); /* color($forest-green lightness(+ 6%)); */
+  --uui-palette-forest-green-dark: rgb(
+    10,
+    115,
+    73
+  ); /* color($forest-green blackness(+ 6%)); */
+  --uui-palette-forest-green-dimmed: rgb(
+    46,
+    89,
+    72
+  ); /* color(
+    $forest-green saturation(- 50%) blackness(+ 1%)
+  ); */
   --uui-palette-cocoa-black: #191715;
-  --uui-palette-cocoa-black-light: rgb(39, 36, 32);
-  --uui-palette-cocoa-black-dark: rgb(20, 20, 20);
-  --uui-palette-cocoa-black-dimmed: rgb(48, 48, 48);
+  --uui-palette-cocoa-black-light: rgb(
+    39,
+    36,
+    32
+  ); /* color($cocoa-black lightness(+ 5%)); */
+  --uui-palette-cocoa-black-dark: rgb(
+    20,
+    20,
+    20
+  ); /* color($cocoa-black blackness(+ 5%)); */
+  --uui-palette-cocoa-black-dimmed: rgb(
+    48,
+    48,
+    48
+  ); /* color(
+    $cocoa-black saturation(- 20%) lightness(+ 10%)
+  ); */
   --uui-palette-dune-black: #2e2b29;
-  --uui-palette-dune-black-light: rgb(57, 53, 50);
-  --uui-palette-dune-black-dark: rgb(38, 38, 38);
-  --uui-palette-dune-black-dimmed: rgb(64, 64, 64);
+  --uui-palette-dune-black-light: rgb(
+    57,
+    53,
+    50
+  ); /* color($dune-black lightness(+ 4%)); */
+  --uui-palette-dune-black-dark: rgb(
+    38,
+    38,
+    38
+  ); /* color($dune-black blackness(+ 10%)); */
+  --uui-palette-dune-black-dimmed: rgb(
+    64,
+    64,
+    64
+  ); /* color(
+    $dune-black saturation(- 30%) lightness(+ 8%)
+  ); */
   --uui-palette-cocoa-brown: #332a24;
-  --uui-palette-cocoa-brown-light: rgb(66, 54, 47);
-  --uui-palette-cocoa-brown-dark: rgb(38, 37, 36);
-  --uui-palette-cocoa-brown-dimmed: rgb(43, 43, 43);
+  --uui-palette-cocoa-brown-light: rgb(
+    66,
+    54,
+    47
+  ); /* color($cocoa-brown lightness(+ 5%)); */
+  --uui-palette-cocoa-brown-dark: rgb(
+    38,
+    37,
+    36
+  ); /* color($cocoa-brown blackness(+ 5%)); */
+  --uui-palette-cocoa-brown-dimmed: rgb(
+    43,
+    43,
+    43
+  ); /* color(
+    $cocoa-brown saturation(- 40%) blackness(+ 2%)
+  ); */
   --uui-palette-chamoisee: #9d8057;
-  --uui-palette-chamoisee-light: rgb(175, 148, 110);
-  --uui-palette-chamoisee-dark: rgb(138, 116, 87);
-  --uui-palette-chamoisee-dimmed: rgb(115, 113, 110);
+  --uui-palette-chamoisee-light: rgb(
+    175,
+    148,
+    110
+  ); /* color($chamoisee lightness(+ 8%)); */
+  --uui-palette-chamoisee-dark: rgb(
+    138,
+    116,
+    87
+  ); /* color($chamoisee blackness(+ 8%)); */
+  --uui-palette-chamoisee-dimmed: rgb(
+    115,
+    113,
+    110
+  ); /* color(
+    $chamoisee saturation(- 18%) blackness(+ 8%)
+  ); */
   --uui-palette-timberwolf: #e2dad4;
-  --uui-palette-timberwolf-light: rgb(243, 239, 237);
-  --uui-palette-timberwolf-dark: rgb(208, 208, 208);
-  --uui-palette-timberwolf-dimmed: rgb(207, 207, 207);
+  --uui-palette-timberwolf-light: rgb(
+    243,
+    239,
+    237
+  ); /* color($timberwolf lightness(+ 8%)); */
+  --uui-palette-timberwolf-dark: rgb(
+    208,
+    208,
+    208
+  ); /* color($timberwolf blackness(+ 8%)); */
+  --uui-palette-timberwolf-dimmed: rgb(
+    207,
+    207,
+    207
+  ); /* color(
+    $timberwolf saturation(- 82%) blackness(+ 6%)
+  ); */
   --uui-palette-gravel: #d8d7d9;
-  --uui-palette-gravel-light: rgb(237, 237, 238);
-  --uui-palette-gravel-dark: rgb(200, 200, 200);
-  --uui-palette-gravel-dimmed: rgb(204, 204, 204);
+  --uui-palette-gravel-light: rgb(
+    237,
+    237,
+    238
+  ); /* color($gravel lightness(+ 8%)); */
+  --uui-palette-gravel-dark: rgb(
+    200,
+    200,
+    200
+  ); /* color($gravel blackness(+ 8%)); */
+  --uui-palette-gravel-dimmed: rgb(
+    204,
+    204,
+    204
+  ); /* color($gravel saturation(- 82%) blackness(+ 6%)); */
   --uui-palette-sand: #f3f3f5;
-  --uui-palette-sand-light: rgb(255, 255, 255);
-  --uui-palette-sand-dark: rgb(226, 226, 226);
-  --uui-palette-sand-dimmed: rgb(231, 231, 231);
+  --uui-palette-sand-light: rgb(
+    255,
+    255,
+    255
+  ); /* color($sand lightness(+ 8%)); */
+  --uui-palette-sand-dark: rgb(
+    226,
+    226,
+    226
+  ); /* color($sand blackness(+ 8%)); */
+  --uui-palette-sand-dimmed: rgb(
+    231,
+    231,
+    231
+  ); /* color($sand saturation(- 82%) blackness(+ 6%)); */
   --uui-palette-white: #fefefe;
-  --uui-palette-white-light: rgb(255, 255, 255);
-  --uui-palette-white-dark: rgb(250, 250, 250);
-  --uui-palette-white-dimmed: rgb(228, 228, 228);
+  --uui-palette-white-light: rgb(
+    255,
+    255,
+    255
+  ); /* color($white lightness(+ 2%)); */
+  --uui-palette-white-dark: rgb(
+    250,
+    250,
+    250
+  ); /* color($white blackness(+ 2%)); */
+  --uui-palette-white-dimmed: rgb(
+    228,
+    228,
+    228
+  ); /* color($white saturation(- 100%) blackness(+ 12%)); */
   --uui-palette-black: #060606;
-  --uui-palette-black-light: rgb(26, 26, 26);
-  --uui-palette-black-dark: rgb(5, 5, 5);
-  --uui-palette-black-dimmed: rgb(36, 36, 36);
+  --uui-palette-black-light: rgb(
+    26,
+    26,
+    26
+  ); /* color($black lightness(+ 8%)); */
+  --uui-palette-black-dark: rgb(5, 5, 5); /* color($black blackness(+ 8%)); */
+  --uui-palette-black-dimmed: rgb(
+    36,
+    36,
+    36
+  ); /* color($black saturation(- 100%) lightness(+ 12%)); */
   --uui-palette-grey: #c4c4c4;
-  --uui-palette-grey-light: rgb(222, 222, 222);
-  --uui-palette-grey-dark: rgb(179, 179, 179);
-  --uui-palette-grey-dimmed: rgb(189, 189, 189);
+  --uui-palette-grey-light: rgb(
+    222,
+    222,
+    222
+  ); /* color($grey lightness(+ 10%)); */
+  --uui-palette-grey-dark: rgb(
+    179,
+    179,
+    179
+  ); /* color($grey blackness(+ 10%)); */
+  --uui-palette-grey-dimmed: rgb(
+    189,
+    189,
+    189
+  ); /* color($grey saturation(- 100%) blackness(+ 4%)); */
 
   /** not begin used currently. */
   --uui-palette-dusty-grey: #9b9b9b;
-  --uui-palette-dusty-grey-light: rgb(176, 176, 176);
-  --uui-palette-dusty-grey-dark: rgb(141, 141, 141);
-  --uui-palette-dusty-grey-dimmed: rgb(186, 186, 186);
+  --uui-palette-dusty-grey-light: rgb(
+    176,
+    176,
+    176
+  ); /* color($dusty-grey lightness(+ 8%)); */
+  --uui-palette-dusty-grey-dark: rgb(
+    141,
+    141,
+    141
+  ); /* color($dusty-grey blackness(+ 10%)); */
+  --uui-palette-dusty-grey-dimmed: rgb(
+    186,
+    186,
+    186
+  ); /* color(
+    $dusty-grey saturation(- 100%) lightness(+ 12%)
+  ); */
   --uui-palette-mine-grey: #3e3e3e;
-  --uui-palette-mine-grey-light: rgb(82, 82, 82);
-  --uui-palette-mine-grey-dark: rgb(56, 56, 56);
-  --uui-palette-mine-grey-dimmed: rgb(87, 87, 87);
+  --uui-palette-mine-grey-light: rgb(
+    82,
+    82,
+    82
+  ); /* color($mine-grey lightness(+ 8%)); */
+  --uui-palette-mine-grey-dark: rgb(
+    56,
+    56,
+    56
+  ); /* color($mine-grey blackness(+ 10%)); */
+  --uui-palette-mine-grey-dimmed: rgb(
+    87,
+    87,
+    87
+  ); /* color(
+    $mine-grey saturation(- 100%) lightness(+ 10%)
+  ); */
 }
 :root {
   font-family: 'Roboto', sans-serif;
 
   /* ----- STATES -----  */
   --uui-color-selected: var(--uui-palette-violet-blue,#3544b1);
-  --uui-color-selected-emphasis: var(--uui-palette-violet-blue-light,rgb(70, 86, 200));
-  --uui-color-selected-standalone: var(--uui-palette-violet-blue-dark,rgb(54, 65, 156));
+  --uui-color-selected-emphasis: var(--uui-palette-violet-blue-light,rgb(
+    70,
+    86,
+    200
+  ));
+  --uui-color-selected-standalone: var(--uui-palette-violet-blue-dark,rgb(
+    54,
+    65,
+    156
+  ));
   --uui-color-selected-contrast: #fff;
 
   --uui-color-current: var(--uui-palette-spanish-pink,#f5c1bc);
-  --uui-color-current-emphasis: var(--uui-palette-spanish-pink-light,rgb(248, 214, 211));
-  --uui-color-current-standalone: var(--uui-palette-spanish-pink-dark,rgb(232, 192, 189));
+  --uui-color-current-emphasis: var(--uui-palette-spanish-pink-light,rgb(
+    248,
+    214,
+    211
+  ));
+  --uui-color-current-standalone: var(--uui-palette-spanish-pink-dark,rgb(
+    232,
+    192,
+    189
+  ));
   --uui-color-current-contrast: var(--uui-palette-space-cadet,#1b264f);
 
   --uui-color-disabled: var(--uui-palette-sand,#f3f3f5);
-  --uui-color-disabled-standalone: var(--uui-palette-sand-dark,rgb(226, 226, 226));
+  --uui-color-disabled-standalone: var(--uui-palette-sand-dark,rgb(
+    226,
+    226,
+    226
+  ));
   --uui-color-disabled-contrast: var(--uui-palette-grey,#c4c4c4);
 
   /* ----- UNIVERSAL -----  */
@@ -217,7 +511,11 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   /* ----- SURFACE -----  */
   --uui-color-surface: #fff;
   --uui-color-surface-alt: var(--uui-palette-sand,#f3f3f5);
-  --uui-color-surface-emphasis: var(--uui-palette-white-dark,rgb(250, 250, 250));
+  --uui-color-surface-emphasis: var(--uui-palette-white-dark,rgb(
+    250,
+    250,
+    250
+  ));
 
   --uui-color-background: var(--uui-palette-sand,#f3f3f5);
 
@@ -238,29 +536,61 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
   /* ----- COLORS -----  */
   --uui-color-default: var(--uui-palette-space-cadet,#1b264f);
   --uui-color-default-emphasis: var(--uui-palette-violet-blue,#3544b1);
-  --uui-color-default-standalone: var(--uui-palette-space-cadet-dark,rgb(28, 35, 59));
+  --uui-color-default-standalone: var(--uui-palette-space-cadet-dark,rgb(
+    28,
+    35,
+    59
+  ));
   --uui-color-default-contrast: #fff;
 
   --uui-color-warning: #fbd142;
-  --uui-color-warning-emphasis: var(--uui-palette-sunglow-light,rgb(251, 224, 101));
+  --uui-color-warning-emphasis: var(--uui-palette-sunglow-light,rgb(
+    251,
+    224,
+    101
+  ));
   --uui-color-warning-standalone: #a17700;
   --uui-color-warning-contrast: #000;
   /* --uui-color-warning: var(--uui-palette-sunglow); Contrast not high enough */
   /* --uui-color-warning-standalone: var(--uui-palette-sunglow-dark); Contrast not high enough */
 
   --uui-color-danger: var(--uui-palette-maroon-flush,#d42054);
-  --uui-color-danger-emphasis: var(--uui-palette-maroon-flush-light,rgb(226, 60, 107));
-  --uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark,rgb(191, 33, 78));
+  --uui-color-danger-emphasis: var(--uui-palette-maroon-flush-light,rgb(
+    226,
+    60,
+    107
+  ));
+  --uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark,rgb(
+    191,
+    33,
+    78
+  ));
   --uui-color-danger-contrast: white;
 
   --uui-color-invalid: var(--uui-palette-maroon-flush,#d42054);
-  --uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light,rgb(226, 60, 107));
-  --uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark,rgb(191, 33, 78));
+  --uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light,rgb(
+    226,
+    60,
+    107
+  ));
+  --uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark,rgb(
+    191,
+    33,
+    78
+  ));
   --uui-color-invalid-contrast: white;
 
   --uui-color-positive: var(--uui-palette-forest-green,#0b8152);
-  --uui-color-positive-emphasis: var(--uui-palette-forest-green-light,rgb(13, 155, 98));
-  --uui-color-positive-standalone: var(--uui-palette-forest-green-dark,rgb(10, 115, 73));
+  --uui-color-positive-emphasis: var(--uui-palette-forest-green-light,rgb(
+    13,
+    155,
+    98
+  ));
+  --uui-color-positive-standalone: var(--uui-palette-forest-green-dark,rgb(
+    10,
+    115,
+    73
+  ));
   --uui-color-positive-contrast: #fff;
 }
 :root[data-theme='dark'] {
@@ -340,7 +670,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Black'), local('LatoLatin-Black'),
-    url('../assets/fonts/lato/LatoLatin-Black.woff2') format('woff2');
+    url('../../assets/fonts/lato/LatoLatin-Black.woff2') format('woff2');
   font-style: normal;
   font-display: swap;
   font-weight: 900;
@@ -350,7 +680,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin BlackItalic'), local('LatoLatin-BlackItalic'),
-    url('../assets/fonts/lato/LatoLatin-BlackItalic.woff2') format('woff2');
+    url('../../assets/fonts/lato/LatoLatin-BlackItalic.woff2') format('woff2');
   font-style: italic;
   font-weight: 900;
   font-display: swap;
@@ -360,7 +690,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Bold'), local('LatoLatin-Bold'),
-    url('../assets/fonts/lato/LatoLatin-Bold.woff2') format('woff2');
+    url('../../assets/fonts/lato/LatoLatin-Bold.woff2') format('woff2');
   font-style: normal;
   font-weight: 700;
   font-display: swap;
@@ -370,7 +700,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin BoldItalic'), local('LatoLatin-BoldItalic'),
-    url('../assets/fonts/lato/LatoLatin-BoldItalic.woff2') format('woff2');
+    url('../../assets/fonts/lato/LatoLatin-BoldItalic.woff2') format('woff2');
   font-style: italic;
   font-weight: 700;
   font-display: swap;
@@ -380,7 +710,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Italic'), local('LatoLatin-Italic'),
-    url('../assets/fonts/lato/LatoLatin-Italic.woff2') format('woff2');
+    url('../../assets/fonts/lato/LatoLatin-Italic.woff2') format('woff2');
   font-style: italic;
   font-weight: 400;
   font-display: swap;
@@ -390,7 +720,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Regular'), local('LatoLatin-Regular'),
-    url('../assets/fonts/lato/LatoLatin-Regular.woff2') format('woff2');
+    url('../../assets/fonts/lato/LatoLatin-Regular.woff2') format('woff2');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
@@ -400,7 +730,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin Light'), local('LatoLatin-Light'),
-    url('../assets/fonts/lato/LatoLatin-Light.woff2') format('woff2');
+    url('../../assets/fonts/lato/LatoLatin-Light.woff2') format('woff2');
   font-style: normal;
   font-weight: 300;
   font-display: swap;
@@ -410,7 +740,7 @@ UUI - Mapping-level or specific component name - State - Name - Part - Overwrite
 @font-face {
   font-family: 'Lato';
   src: local('LatoLatin LightItalic'), local('LatoLatin-LightItalic'),
-    url('../assets/fonts/lato/LatoLatin-LightItalic.woff2') format('woff2');
+    url('../../assets/fonts/lato/LatoLatin-LightItalic.woff2') format('woff2');
   font-style: italic;
   font-weight: 300;
   font-display: swap;