fix components

libs/ui/src/index.ts

@@ -9,11 +9,17 @@ export * from './lib/util/common';
 export * from './lib/util/dato-cms';
 export * from './lib/util/device-configs';
 export * from './lib/util/environments';
-export * from './lib/util/form-control';
 export * from './lib/util/icon-registry';
 export * from './lib/util/infinite-scroll';
 // ./lib/util/list-configs: omitido(s) por colisión con otro módulo -> featureKey, getFeatureState, initialState
-export { getListMode, ListConfigsFacade, listConfigsReducer, ListModeActionsType, resetListMode, setListMode } from './lib/util/list-configs';
+export {
+  getListMode,
+  ListConfigsFacade,
+  listConfigsReducer,
+  ListModeActionsType,
+  resetListMode,
+  setListMode,
+} from './lib/util/list-configs';
 export type { ListConfigsState, ListMode } from './lib/util/list-configs';
 export * from './lib/util/loaders';
 export * from './lib/util/local-storage';
@@ -40,10 +46,12 @@ export * from './lib/ui/data-grid';
 export * from './lib/ui/data-table';
 export * from './lib/ui/divider';
 export * from './lib/ui/error-status-code';
+export * from './lib/ui/file-upload';
 export * from './lib/ui/form-field';
 export * from './lib/ui/icon';
 export * from './lib/ui/image';
 export * from './lib/ui/list-item';
+export * from './lib/ui/menu';
 export * from './lib/ui/modal';
 export * from './lib/ui/note';
 export * from './lib/ui/notification';
@@ -51,11 +59,36 @@ export * from './lib/ui/paginator';
 export * from './lib/ui/panel';
 export * from './lib/ui/progress';
 export * from './lib/ui/select';
-// ./lib/ui/slide-toggle: omitido(s) por colisión con otro módulo -> PiSlideToggleComponent
 export * from './lib/ui/slider';
 export * from './lib/ui/spinner';
+export * from './lib/ui/stepper';
 export * from './lib/ui/tab';
 // ./lib/ui/text: omitido(s) por colisión con otro módulo -> PiDisabledDirective
-export { PiBaseTextViewerComponent, PiTextAreaExpansionComponent, PiTextCenteredDirective, PiTextColorDirective, PiTextCoveredDirective, PiTextGroupDirective, PiTextGroupIndicatorDirective, PiTextLargeDirective, PiTextLetterSpacingDirective, PiTextMediumDirective, PiTextSizeDirective, PiTextSmallDirective, PiTextViewerComponent, PiTextViewerLinkComponent, PiTextWeightBlackDirective, PiTextWeightBoldDirective, PiTextWeightLightDirective, PiTextWeightMediumDirective, PiTextWeightNormalDirective, PiTextXLargeDirective, PiTextXSmallDirective, PiTextXXLargeDirective, PiTextXXSmallDirective, PiTextXXXLargeDirective } from './lib/ui/text';
+export {
+  PiBaseTextViewerComponent,
+  PiTextAreaExpansionComponent,
+  PiTextCenteredDirective,
+  PiTextColorDirective,
+  PiTextCoveredDirective,
+  PiTextGroupDirective,
+  PiTextGroupIndicatorDirective,
+  PiTextLargeDirective,
+  PiTextLetterSpacingDirective,
+  PiTextMediumDirective,
+  PiTextSizeDirective,
+  PiTextSmallDirective,
+  PiTextViewerComponent,
+  PiTextViewerLinkComponent,
+  PiTextWeightBlackDirective,
+  PiTextWeightBoldDirective,
+  PiTextWeightLightDirective,
+  PiTextWeightMediumDirective,
+  PiTextWeightNormalDirective,
+  PiTextXLargeDirective,
+  PiTextXSmallDirective,
+  PiTextXXLargeDirective,
+  PiTextXXSmallDirective,
+  PiTextXXXLargeDirective,
+} from './lib/ui/text';
 export * from './lib/ui/tooltip';
 export * from './lib/ui/wrapper';

libs/ui/src/lib/styles/common/base/_pi-reset.scss

@@ -538,7 +538,17 @@ template {
 
 button,
 .pi-input,
-[class*='mat-'] {
+// `[class*='mat-']` alcanza a cualquier elemento de Angular Material. Hay que
+// excluir los que forman tabla: el datepicker monta el calendario con una
+// `<table>` real, y forzarla a `display: block` le quita el contexto de
+// formato de tabla y colapsa la rejilla de días en una sola columna.
+//
+// La exclusión va dentro de `:where()` a propósito: `:where()` no aporta
+// especificidad, así que la regla sigue valiendo (0,1,0) como antes. Con un
+// `:not(table):not(tr)...` normal subiría a (0,1,7) y pasaría a ganarle a
+// reglas de Material que hasta ahora respetaba (los afijos de icono de los
+// campos, entre otras).
+[class*='mat-']:not(:where(table, thead, tbody, tfoot, tr, th, td)) {
   display: block;
 }
 

libs/ui/src/lib/styles/common/components/_pi-card.scss

@@ -290,7 +290,7 @@
     justify-content: space-between;
     width: -webkit-fill-available;
     padding: var(--pi-spacing-xx-large);
-    border-radius: var(--pi-border-radius-large);
+    border-radius: var(--pi-theme-card-radius);
     transition: var(--pi-animation);
 
     &:hover {
@@ -318,7 +318,7 @@
 
     // Has Shadow
     &.has-shadow {
-      box-shadow: var(--pi-box-shadow-panel);
+      box-shadow: var(--pi-theme-card-shadow, var(--pi-box-shadow-panel));
     }
     &:not(.has-shadow) {
       box-shadow: none;
@@ -505,7 +505,7 @@
   }
 }
 
-.pi-shell__deale-website,
+// Solo la API `context` de `pi-card`; el tema ya viaja por tokens.
 .is-public {
   .pi-card {
     // Color

libs/ui/src/lib/styles/common/components/_pi-note.scss

@@ -8,7 +8,7 @@
   $min-width: auto
 ) {
   .pi-shell {
-    &.pi-shell__deale-saas {
+    &.pi-shell__default {
       & > div {
         &.has-bottom-sticky-note {
           & > section {

libs/ui/src/lib/styles/common/components/_pi-text.scss

@@ -71,7 +71,7 @@
   }
 }
 
-.pi-shell__deale-saas {
+.pi-shell__default {
   h3 {
     font: {
       size: var(--pi-font-size-medium);

libs/ui/src/lib/styles/common/components/pi-button/_pi-button-fixed.scss

@@ -0,0 +1,78 @@
+// Posicionamiento fijo de botones flotantes (FAB). Es una utilidad de layout,
+// no de tema: aplica igual en todos los shells.
+
+@mixin fixedButtonSideSpacing(
+  $top-spacing: calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
+  $side-spacing: var(--pi-spacing-medium),
+  $bottom-left-spacing: calc(
+      var(--pi-spacing-medium) + env(safe-area-inset-bottom)
+    ),
+  $bottom-right-spacing: calc(
+      5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom)
+    )
+) {
+  .pi-shell {
+    // Fixed
+    button,
+    .pi-icon-button,
+    .pi-action-button {
+      &.is-fixed {
+        position: fixed;
+        z-index: 999;
+        &.is-fixed--top-left,
+        &.is-fixed--top-right {
+          top: $top-spacing;
+          right: $side-spacing;
+        }
+        &.is-fixed--bottom-left {
+          bottom: $bottom-left-spacing;
+          left: $side-spacing;
+        }
+        &.is-fixed--bottom-right {
+          bottom: $bottom-right-spacing;
+          right: $side-spacing;
+        }
+      }
+    }
+  }
+}
+
+html,
+.cdk-overlay-container {
+  // Mobile
+  &.is-mobile {
+    @include fixedButtonSideSpacing(
+      calc(var(--pi-spacing-medium) + env(safe-area-inset-top)),
+      var(--pi-spacing-medium),
+      calc(var(--pi-spacing-medium) + env(safe-area-inset-bottom)),
+      calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
+    );
+  }
+  &.is-tablet {
+    &.is-tablet__small {
+      @include fixedButtonSideSpacing(
+        calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
+        var(--pi-spacing-x-large),
+        calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
+        calc(3.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
+      );
+    }
+    &.is-tablet__large {
+      @include fixedButtonSideSpacing(
+        calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
+        var(--pi-spacing-x-large),
+        calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
+        calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
+      );
+    }
+  }
+  // Tablet & Desktop
+  &.is-desktop {
+    @include fixedButtonSideSpacing(
+      calc(var(--pi-spacing-x-large) + env(safe-area-inset-top)),
+      var(--pi-spacing-x-large),
+      calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom)),
+      calc(5.75rem + var(--pi-spacing-large) + env(safe-area-inset-bottom))
+    );
+  }
+}

libs/ui/src/lib/styles/common/components/pi-button/_pi-button-theme.scss

@@ -1,11 +1,11 @@
-@mixin privateButtonsSizes {
+@mixin themeButtonsSizes {
   &:not(.pi-close-button):not(.pi-hamburger):not(.pi-button__xx-small):not(
       .pi-button__x-large
     ):not(.pi-button__toggle):not(.pi-button__trimmed):not(.ch2-btn):not(
       .pi-button__icon--single
     ) {
     &:not(.pi-button__x-small):not(.pi-button__xx-small) {
-      height: var(--pi-spacing-xxx-large);
+      height: var(--pi-theme-button-height);
     }
   }
 
@@ -36,15 +36,22 @@
 }
 
 // Fill
-@mixin privateButtonFillColor($color) {
+@mixin themeButtonFillColor($color) {
   // Default color
   &:not(.pi-button__appearance--ghost):not(.pi-button__appearance--outline):not(
       .pi-color__white
     ) {
     background-color: var(--pi-color-#{$color});
+    // Un tema puede inyectar aquí un degradado; por defecto es `none` y manda
+    // el `background-color` de arriba.
+    background-image: var(--pi-theme-button-fill-#{$color}, none);
+    box-shadow: var(--pi-theme-button-shadow);
     color: var(--pi-color-white);
+    font-weight: var(--pi-theme-button-font-weight);
     &:disabled {
       background-color: var(--pi-color-#{$color}-200);
+      background-image: none;
+      box-shadow: none;
     }
     &:hover {
       &:enabled {
@@ -64,7 +71,7 @@
 }
 
 // Ghost
-@mixin privateButtonGhostColor($color) {
+@mixin themeButtonGhostColor($color) {
   color: var(--pi-color-#{$color});
   &:hover {
     &:enabled {
@@ -77,7 +84,7 @@
 }
 
 // Outline
-@mixin privateButtonOutlineColor($color) {
+@mixin themeButtonOutlineColor($color) {
   background-color: transparent;
   box-sizing: border-box;
   transition: all 0.16s ease-in;
@@ -101,7 +108,7 @@
   }
 }
 
-@mixin privateButtonsColors {
+@mixin themeButtonsColors {
   // Default
   &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
       .pi-button__toggle
@@ -134,20 +141,20 @@
     // Fill
     // Primary
     &.pi-color__primary {
-      @include privateButtonFillColor(primary);
+      @include themeButtonFillColor(primary);
     }
     // Accent
     &.pi-color__accent {
-      @include privateButtonFillColor(accent);
+      @include themeButtonFillColor(accent);
     }
     // Warn
     &.pi-color__warn {
-      @include privateButtonFillColor(warn);
+      @include themeButtonFillColor(warn);
     }
 
     // Highlighted
     &.pi-color__highlighted {
-      @include privateButtonFillColor(highlighted);
+      @include themeButtonFillColor(highlighted);
     }
 
     // Ghost
@@ -161,19 +168,19 @@
         ):not(.pi-color__black):not(.pi-color__highlighted):not(
           .pi-color__grey
         ) {
-        @include privateButtonGhostColor(primary);
+        @include themeButtonGhostColor(primary);
       }
       // Ghost & Accent
       &.pi-color__accent {
-        @include privateButtonGhostColor(accent);
+        @include themeButtonGhostColor(accent);
       }
       // Ghost & Warn
       &.pi-color__warn {
-        @include privateButtonGhostColor(warn);
+        @include themeButtonGhostColor(warn);
       }
       // Ghost & Highlighted
       &.pi-color__highlighted {
-        @include privateButtonGhostColor(Highlighted);
+        @include themeButtonGhostColor(Highlighted);
       }
       // Ghost & White
       &.pi-color__white {
@@ -224,24 +231,24 @@
       &:not(.pi-color__primary):not(.pi-color__accent):not(.pi-color__warn):not(
           .pi-color__white
         ):not(.pi-color__highlighted):not(.pi-color__black) {
-        @include privateButtonOutlineColor(primary);
+        @include themeButtonOutlineColor(primary);
       }
       // Outline & Accent
       &.pi-color__accent {
-        @include privateButtonOutlineColor(accent);
+        @include themeButtonOutlineColor(accent);
       }
       // Outline & Warn
       &.pi-color__warn {
-        @include privateButtonOutlineColor(warn);
+        @include themeButtonOutlineColor(warn);
       }
 
       // Outline & Highlighted
       &.pi-color__highlighted {
-        @include privateButtonOutlineColor(highlighted);
+        @include themeButtonOutlineColor(highlighted);
       }
 
       &.pi-color__black {
-        @include privateButtonOutlineColor(grey);
+        @include themeButtonOutlineColor(grey);
       }
       // Outline & White
       &.pi-color__white {
@@ -267,24 +274,30 @@
   }
 }
 
+// Implementación única de los botones para todos los temas: lo que cambia
+// entre uno y otro son los tokens `--pi-theme-button-*`, no estos selectores.
 .pi-shell {
-  &.pi-shell__deale-saas {
-    .is-private {
-      button {
-        // Colors
-        @include privateButtonsColors;
-        // Sizes
-        @include privateButtonsSizes;
-      }
-    }
+  // Los `<button>` internos de Angular Material quedan fuera: el calendario del
+  // datepicker, por ejemplo, monta cada día como un `<button>` y el
+  // `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
+  // va en `:where()` para no alterar la especificidad de la regla.
+  button:not(:where([class*='mat-'])) {
+    // Colors
+    @include themeButtonsColors;
+    // Sizes
+    @include themeButtonsSizes;
   }
 }
 
 .cdk-overlay-container {
-  button {
+  // Los `<button>` internos de Angular Material quedan fuera: el calendario del
+  // datepicker, por ejemplo, monta cada día como un `<button>` y el
+  // `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
+  // va en `:where()` para no alterar la especificidad de la regla.
+  button:not(:where([class*='mat-'])) {
     // Colors
-    @include privateButtonsColors;
+    @include themeButtonsColors;
     // Sizes
-    @include privateButtonsSizes;
+    @include themeButtonsSizes;
   }
 }

libs/ui/src/lib/styles/common/components/pi-button/_pi-button.scss

@@ -3,6 +3,10 @@
   font: {
     family: 'Soehne', Helvetica, Arial, sans-serif;
   }
+  // Tematizable: ver `styles/themes/_default.scss`.
+  letter-spacing: var(--pi-theme-button-letter-spacing);
+  text-transform: var(--pi-theme-button-text-transform);
+  transition: var(--pi-theme-button-transition);
   &:hover {
     &:not(:disabled):not(.pi-button__toggle) {
       cursor: pointer;
@@ -30,14 +34,14 @@
         .pi-button__toggle
       ) {
       &:not(.pi-button__x-small) {
-        border-radius: var(--pi-border-radius-medium);
-        -webkit-border-radius: var(--pi-border-radius-medium);
-        -moz-border-radius: var(--pi-border-radius-medium);
+        border-radius: var(--pi-theme-button-radius);
+        -webkit-border-radius: var(--pi-theme-button-radius);
+        -moz-border-radius: var(--pi-theme-button-radius);
       }
       &.pi-button__x-small {
-        border-radius: 0.75rem;
-        -webkit-border-radius: 0.75rem;
-        -moz-border-radius: 0.75rem;
+        border-radius: min(0.75rem, var(--pi-theme-button-radius));
+        -webkit-border-radius: min(0.75rem, var(--pi-theme-button-radius));
+        -moz-border-radius: min(0.75rem, var(--pi-theme-button-radius));
       }
     }
 
@@ -138,7 +142,11 @@
 }
 html,
 .cdk-overlay-container {
-  button {
+  // Los `<button>` internos de Angular Material quedan fuera: el calendario del
+  // datepicker, por ejemplo, monta cada día como un `<button>` y el
+  // `min-width: 5.5rem` de la librería lo sacaba fuera del panel. La exclusión
+  // va en `:where()` para no alterar la especificidad de la regla.
+  button:not(:where([class*='mat-'])) {
     // Default properties
     @include defaultButtonsProperties;
 

libs/ui/src/lib/styles/common/components/pi-button/index.scss

@@ -1,3 +1,5 @@
-@forward 'pi-button-private';
-@forward 'pi-button-public';
+// `theme` implementa los botones una sola vez para todos los temas (lo que
+// varía son los tokens `--pi-theme-button-*`); `fixed` es utilidad de layout.
+@forward 'pi-button-theme';
+@forward 'pi-button-fixed';
 @forward 'pi-button';

libs/ui/src/lib/styles/common/layouts/_pi-02-full-width-layout.scss

@@ -9,7 +9,7 @@
         )
     )
 ) {
-  .pi-shell__deale-saas {
+  .pi-shell {
     & > div {
       // Aside is open
       &.aside-is-open {

libs/ui/src/lib/styles/common/layouts/_pi-07-list-layout.scss

@@ -61,7 +61,7 @@
 }
 
 @mixin listLayoutHeight($height: calc(100vh - var(--pi-height-header-mobile))) {
-  .pi-shell__deale-saas {
+  .pi-shell {
     & > div {
       .pi-layout {
         &.pi-layout__07-list {
@@ -75,7 +75,7 @@
 @mixin paginatorWidth(
   $width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large))
 ) {
-  .pi-shell__deale-saas {
+  .pi-shell {
     & > div {
       .pi-layout {
         &.pi-layout__07-list {
@@ -88,7 +88,7 @@
   }
 }
 
-.pi-shell__deale-saas {
+.pi-shell {
   & > div {
     // Grid mode (Infinite scroll)
     &.is-mode-grid {
@@ -111,7 +111,7 @@ html {
   }
   // Mobile & Tablet
   &:not(.is-desktop) {
-    .pi-shell__deale-saas {
+    .pi-shell {
       .pi-icon-button {
         &.is-sticky {
           position: absolute;
@@ -126,7 +126,7 @@ html {
     }
     // Small device
     @media screen and (max-width: 62rem) {
-      .pi-shell__deale-saas {
+      .pi-shell {
         & > div {
           .pi-layout {
             &.pi-layout__07-list {

libs/ui/src/lib/styles/common/layouts/_pi-container-layout.scss

@@ -3,7 +3,7 @@
   $no-padding-width: 100%
 ) {
   .pi-shell {
-    &.pi-shell__deale-website {
+    &.pi-shell__alternative {
       .pi-container-layout {
         .pi-layout {
           &:not(.pi-layout__06-edge-to-edge):not(.pi-layout__09-pricing) {

libs/ui/src/lib/styles/common/layouts/index.scss

@@ -1,3 +1,14 @@
+// Tipos de layout genéricos. Estaban en `deale-saas/layouts` por herencia, pero
+// no dependen de ninguna marca: solo de las variables globales de `abstracts`.
+@forward 'pi-02-full-width-layout';
+@forward 'pi-02a-full-width-auto-layout';
+@forward 'pi-03-vertically-centered-layout';
+@forward 'pi-04-space-between-layout';
+@forward 'pi-05-splitted-layout';
+@forward 'pi-06-edge-to-edge-layout';
+@forward 'pi-07-list-layout';
+@forward 'pi-07a-list-auto-layout';
+@forward 'pi-08-form-layout';
 @forward 'pi-09-pricing-layout';
 @forward 'pi-container-layout';
 @forward 'pi-layout';

libs/ui/src/lib/styles/common/vendors/_mat-datepicker.scss

@@ -0,0 +1,49 @@
+// Datepicker
+//
+// El reset (`base/_pi-reset.scss`) declara `[class*='mat-'] { display: block }`.
+// Ese selector empata en especificidad con las clases propias de Material
+// (`.mat-calendar-controls`, etc.) y, al cargarse después, le gana: la
+// cabecera del calendario pierde su `display: flex` y los controles se apilan.
+//
+// Aquí se devuelve el layout que Material necesita. Va en `vendors/` porque se
+// carga tras `base/`, así que estas reglas mandan sin subir especificidad.
+//
+// La rejilla de días no hace falta tocarla: el reset ya excluye los elementos
+// de tabla, que era lo que colapsaba el calendario a una sola columna.
+
+.mat-datepicker-content {
+  // Cabecera: mes/año a la izquierda y flechas a la derecha.
+  .mat-calendar-controls {
+    display: flex;
+    align-items: center;
+  }
+
+  // Empuja las flechas al extremo opuesto del selector de periodo.
+  .mat-calendar-spacer {
+    flex: 1 1 auto;
+  }
+
+  // Los botones del calendario son `<button>`, que el reset también pasa a
+  // `block`; en línea vuelven a colocarse dentro de la fila de controles.
+  .mat-calendar-period-button,
+  .mat-calendar-previous-button,
+  .mat-calendar-next-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  // El contenido del selector de periodo (texto + flecha) también es flex.
+  .mat-calendar-period-button .mdc-button__label {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  // Etiqueta solo para lectores de pantalla ("Comparison range"). Material la
+  // oculta, pero su clase contiene `mat-`, así que el reset la devolvía a
+  // `display: block` y aparecía como texto suelto bajo el calendario, además
+  // de ensanchar la celda y descuadrar la rejilla.
+  .mat-calendar-body-hidden-label {
+    display: none;
+  }
+}

libs/ui/src/lib/styles/common/vendors/_mat-expansion-panel.scss

@@ -1,4 +1,4 @@
-.pi-shell__deale-saas {
+.pi-shell__default {
   .mat-mdc-expansion-panel {
     &:not([class*='mat-elevation-z']) {
       box-shadow: unset;

libs/ui/src/lib/styles/common/vendors/_mat-form-field.scss

@@ -13,7 +13,7 @@
       [class*='mdc-notched-outline__'] {
         max-width: unset;
         width: var(--pi-spacing-small);
-        border-width: 1px;
+        border-width: var(--pi-theme-field-border-width);
       }
     }
 
@@ -45,10 +45,12 @@
     }
 
     .mdc-notched-outline__leading {
-      border-radius: 0.875rem 0 0 0.875rem;
+      border-radius: var(--pi-theme-field-radius) 0 0
+        var(--pi-theme-field-radius);
     }
     .mdc-notched-outline__trailing {
-      border-radius: 0 0.875rem 0.875rem 0;
+      border-radius: 0 var(--pi-theme-field-radius) var(--pi-theme-field-radius)
+        0;
     }
 
     .mat-mdc-form-field-label {
@@ -108,13 +110,14 @@
     &:not(.mat-focused):not(.mat-form-field-invalid) {
       &:not(.mdc-text-field--disabled) {
         [class*='mdc-notched-outline__'] {
-          border-color: var(--pi-color-grey-200);
+          border-width: var(--pi-theme-field-border-width);
+          border-color: var(--pi-theme-field-border-color);
         }
       }
       &:hover {
         &:not(.mdc-text-field--disabled) {
           [class*='mdc-notched-outline__'] {
-            border-color: var(--pi-color-grey-300);
+            border-color: var(--pi-theme-field-border-color-hover);
           }
         }
       }
@@ -123,7 +126,7 @@
     &.mat-focused {
       &:not(.mdc-text-field--disabled) {
         [class*='mdc-notched-outline__'] {
-          border-color: var(--pi-color-primary);
+          border-color: var(--pi-theme-field-border-color-focus);
         }
       }
     }
@@ -221,7 +224,10 @@
     }
     &:not(.mdc-text-field--disabled):not(.mdc-text-field--focused) {
       .mdc-floating-label {
-        color: var(--pi-color-grey-300);
+        color: var(--pi-theme-field-label-color);
+        text-transform: var(--pi-theme-field-label-transform, none);
+        letter-spacing: var(--pi-theme-field-label-letter-spacing, normal);
+        font-weight: var(--pi-theme-field-label-weight, inherit);
       }
     }
     &.mdc-text-field--invalid {
@@ -335,7 +341,7 @@
       }
 
       [class*='mdc-notched-outline__'] {
-        background-color: var(--pi-color-white);
+        background-color: var(--pi-theme-field-surface);
         z-index: -99;
       }
 

libs/ui/src/lib/styles/common/vendors/_ngx-slider.scss

@@ -1,5 +1,5 @@
-.pi-shell__deale-saas,
-.pi-shell__deale-website {
+.pi-shell__default,
+.pi-shell__alternative {
   .ngx-slider {
     & > .ngx-slider-pointer {
       background-color: var(--pi-color-primary);

libs/ui/src/lib/styles/common/vendors/index.scss

@@ -1,6 +1,7 @@
 @forward 'ch2-button';
 @forward 'mat-checkbox';
 @forward 'mat-chip';
+@forward 'mat-datepicker';
 @forward 'mat-dialog';
 @forward 'mat-expansion-panel';
 @forward 'mat-form-field';

libs/ui/src/lib/styles/common/wrappers/_pi-header-wrapper.scss

@@ -113,7 +113,7 @@
 html {
   &.is-mobile {
     .pi-shell {
-      &.pi-shell__deale-saas {
+      &.pi-shell__default {
         @include headerWrapperHeight;
       }
     }
@@ -168,7 +168,7 @@ html {
   // Tablet
   &.is-tablet {
     .pi-shell {
-      &.pi-shell__deale-saas {
+      &.pi-shell__default {
         @include headerWrapperHeight(var(--pi-height-layout-header));
       }
     }
@@ -211,7 +211,7 @@ html {
     }
 
     .pi-shell {
-      &.pi-shell__deale-saas {
+      &.pi-shell__default {
         @include headerWrapperHeight(var(--pi-height-layout-header));
       }
     }

libs/ui/src/lib/styles/common/wrappers/_pi-main-wrapper.scss

@@ -1,7 +1,7 @@
 @mixin mainWrapperCentered(
   $height: calc(100% - var(--pi-height-header-mobile))
 ) {
-  .pi-shell__deale-saas {
+  .pi-shell__default {
     & > div {
       // NOT Is fullscreen
       &:not(.is-fullscreen) {

libs/ui/src/lib/styles/configs.ts

@@ -2,13 +2,18 @@
 export const shellTheming = (ShellClass: string) =>
   `pi-shell pi-shell__${ShellClass}`;
 
+/**
+ * Tema visual de toda la app. Se aplica a un contenedor raíz (normalmente
+ * `<body>`) y de él cuelga el aspecto de botones, cards, campos, etc.
+ *
+ * Dentro de un shell se puede forzar el aspecto contrario en un subárbol con
+ * `.is-private` / `.is-public` (p. ej. el input `context` de `pi-card`).
+ */
 export const ShellClass = {
-  // Deale Landings (Public)
-  DealeLandings: shellTheming('deale-landings'),
-  // Deale SaaS (Private)
-  DealeSaaS: shellTheming('deale-saas'),
-  // Deale Website (Public)
-  DealeWebsite: shellTheming('deale-website'),
+  /** Aspecto de aplicación: rellenos planos y sólidos, controles compactos. */
+  Default: shellTheming('default'),
+  /** Aspecto de marketing: degradados, brillo al hover y controles mayores. */
+  Alternative: shellTheming('alternative'),
 };
 
 // View component level
@@ -105,6 +110,10 @@ export const UserTypeClass = {
 // Layouts (Add to any view)
 export const LayoutTypeClass = {
   // Specifics
+  //
+  // Authentication y Dashboard son composiciones de aplicación (estados del
+  // aside, tipos de usuario): la capa genérica no trae su CSS, lo aporta la app
+  // que los use. Ver la página «Layouts» del playground.
   Authentication: 'pi-layout pi-layout__00-authentication',
   Dashboard: 'pi-layout pi-layout__01-dashboard',
   // TODO: Delete old dashboard layout when ready other users
@@ -113,8 +122,11 @@ export const LayoutTypeClass = {
   // Full Width
   FullWidth: 'pi-layout pi-layout__main pi-layout__02-full-width',
   // Full Width Centered
+  // El modificador es `02-full-width--auto`, no `02a-...`: así lo espera
+  // `_pi-02a-full-width-auto-layout.scss`. Con el nombre antiguo la constante
+  // no casaba con ningún selector y el `margin: auto` nunca se aplicaba.
   FullWidthAuto:
-    'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02a-full-width--auto',
+    'pi-layout pi-layout__main pi-layout__02-full-width pi-layout__02-full-width--auto',
   // Main Vertically Centered
   VerticallyCentered: 'pi-layout pi-layout__03-vertically-centered',
   // Main Space Between
@@ -130,18 +142,12 @@ export const LayoutTypeClass = {
   List: 'pi-layout pi-layout__07-list',
   // Infinite Scroll
   ListAuto: 'pi-layout pi-layout__07-list pi-layout__07a-list--auto',
-  // List Left
-  PaginatedList: 'pi-layout pi-layout__07-list pi-layout__07b-list--paginated',
   // Form Layout
   Form: 'pi-layout pi-layout__08-form',
   // Pricing Layout
   Pricing: 'pi-layout pi-layout__09-pricing',
 };
 
-export const WebsiteScreenTypeClass = {
-  ThankYou: 'pi-website-screen pi-website-screen__00-type-thank-you',
-};
-
 // Wrappers
 export const wrapperType = (wrapperClass: string) =>
   `pi-wrapper pi-wrapper__${wrapperClass}`;

libs/ui/src/lib/styles/deale-saas/index.scss

@@ -1,4 +0,0 @@
-@use 'layouts' as *;
-@use 'theming' as *;
-@use 'shell' as *;
-@use 'wrappers' as *;

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00-authentication-layout.scss

@@ -1,367 +0,0 @@
-@use 'pi-00a-authentication-layout-auth';
-@use 'pi-00b-authentication-layout-recover-password';
-@use 'pi-00c-authentication-layout-user-profile';
-@use 'pi-00d-authentication-layout-default-space';
-@use 'pi-00e-authentication-layout-impersonation';
-
-@mixin authenticationLayoutSizes(
-  $width: calc(100% - var(--pi-spacing-xx-large)),
-  $max-width: calc(100% - var(--pi-spacing-xx-large)),
-  $height: 90vh
-) {
-  & > .pi-component {
-    width: $width;
-    max-width: $max-width;
-    & > .pi-panel {
-      width: -webkit-fill-available;
-      & > section {
-        height: $height;
-      }
-    }
-  }
-}
-
-@mixin authenticationLayoutsButtonSize() {
-}
-
-@mixin authenticationLayoutSpacings($spacing, $gap) {
-  .pi-layout__00-authentication {
-    &:not(.pi-layout__00-authentication--auth):not(
-        .pi-layout__00-authentication--default-space
-      ) {
-      .pi-panel {
-        .pi-panel-content__top,
-        .pi-panel-content__bottom {
-          gap: var(--pi-spacing-#{$gap});
-        }
-        &.pi-panel__inner-padding--xxxxl {
-          &.pi-panel__inner-padding {
-            &.pi-panel__flex-direction--column {
-              & > section {
-                & > * {
-                  padding-left: $spacing;
-                  padding-right: $spacing;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin authenticationLayoutMobileSmall {
-  // Mobile S
-  @media screen and (max-height: 41.6875rem) {
-    .pi-wrapper {
-      .pi-wrapper__gap--l {
-        gap: var(--pi-spacing-small);
-      }
-    }
-    .pi-panel {
-      &.pi-panel__inner-padding--xxxl {
-        &.pi-panel__inner-padding {
-          &.pi-panel__flex-direction--column {
-            & > section {
-              & > * {
-                padding-top: var(--pi-spacing-x-large);
-                padding-bottom: var(--pi-spacing-x-large);
-                padding-left: var(--pi-spacing-x-large);
-                padding-right: var(--pi-spacing-x-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.pi-layout__00-authentication {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100vh;
-  width: 100%;
-
-  & > .pi-component {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    & > .pi-panel {
-      background:
-        linear-gradient(rgba(255, 255, 255, 0.95), white) padding-box,
-        linear-gradient(
-            to right,
-            var(--pi-color-primary-50),
-            var(--pi-color-primary-25)
-          )
-          border-box;
-      background-color: rgba(255, 255, 255, 0.66);
-      animation: gradient 0.5s linear infinite;
-      animation-direction: alternate-reverse;
-      background-size: 150% 300%;
-      border: 0.0625rem solid transparent;
-      box-shadow: 0px 0px 30px 0px rgba(69, 97, 199, 0.125);
-      .pi-panel-content__right {
-        & > * {
-          max-width: 21.25rem;
-          height: fit-content;
-        }
-      }
-      .pi-list-item {
-        .pi-text-viewer {
-          article {
-            label,
-            span {
-              line-height: 105%;
-            }
-          }
-        }
-      }
-    }
-    .pi-wrapper__form + .pi-wrapper__action {
-      margin-top: var(--pi-spacing-xxxx-large);
-    }
-    .pi-wrapper__action {
-      .pi-text-centered {
-        margin-top: var(--pi-spacing-x-large);
-      }
-    }
-  }
-  &:not(.pi-layout__00-authentication--auth) {
-    // Panel in other authentication layouts
-    .pi-panel {
-      .pi-panel-content__bottom {
-        position: sticky;
-        bottom: 0;
-      }
-
-      .pi-panel-content__top,
-      .pi-panel-content__bottom {
-        display: flex;
-        gap: var(--pi-spacing-x-small);
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include authenticationLayoutSpacings(var(--pi-spacing-xx-large), x-small);
-    .pi-layout__00-authentication {
-      @include authenticationLayoutSizes;
-      // Mobile S
-      @include authenticationLayoutMobileSmall;
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    &.is-tablet__small {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          @include authenticationLayoutSizes(80%, 80%, 80vh);
-        }
-        &.pi-layout__00-authentication--auth {
-          @include authenticationLayoutSizes(80%, 80%, 85vh);
-        }
-      }
-    }
-    &.is-tablet__large {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          @include authenticationLayoutSizes(
-            calc(100% - 4rem),
-            calc(100% - 4rem),
-            70vh
-          );
-        }
-        &.pi-layout__00-authentication--auth {
-          @include authenticationLayoutSizes(
-            calc(100% - 4rem),
-            calc(100% - 4rem),
-            calc(100vh - 4rem)
-          );
-        }
-      }
-    }
-  }
-
-  // Tablet & Mobile
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-layout__00-authentication {
-        & > .pi-component {
-          // Panel in authentication layout
-          & > .pi-panel {
-            .pi-panel-content__bottom {
-              // Action wrapper in panel bottom content
-              .pi-wrapper {
-                &.pi-wrapper__action {
-                  width: -webkit-fill-available;
-                  // Hide 'Press enter' text viewer on mobile and tablet
-                  & > *:last-child {
-                    display: none;
-                  }
-                }
-              }
-            }
-          }
-        }
-        // Not Auth Layout
-        &:not(.pi-layout__00-authentication--auth) {
-          // Panel in other authentication layouts
-          & > .pi-component {
-            .pi-panel {
-              & > section {
-                overflow: hidden;
-
-                .pi-panel-content__center {
-                  flex-grow: 1;
-                  overflow-y: auto;
-                  // Generic Scroll
-                  &::-webkit-scrollbar {
-                    width: var(--pi-spacing-xxx-small);
-                  }
-
-                  &::-webkit-scrollbar-track {
-                    box-shadow: none;
-                  }
-
-                  &::-webkit-scrollbar-thumb {
-                    background-color: var(--pi-color-primary-50);
-                    border-radius: var(--pi-border-radius-small);
-
-                    &:hover {
-                      transition: var(--pi-animation);
-                      background-color: var(--pi-color-primary-100);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          .pi-panel {
-            position: relative;
-            // Add logo to bottom right corner of panel
-            &::after {
-              content: '';
-              position: absolute;
-              height: 100%;
-              width: 4.375rem;
-              right: var(--pi-spacing-xxx-large);
-              bottom: var(--pi-spacing-xxx-large);
-              background-image: url('https://d2m4265u67f2xu.cloudfront.net/assets/images/deale-logo.svg');
-              background-repeat: no-repeat;
-              background-position: bottom right;
-            }
-          }
-        }
-      }
-    }
-    .pi-shell {
-      .is-public {
-        .pi-layout__00-authentication {
-          &:not(.pi-layout__00-authentication--auth):not(
-              .pi-layout__00-authentication--recover-password
-            ):not(.pi-layout__00-authentication--impersonation) {
-            .pi-panel {
-              & > section {
-                .pi-panel-content__top,
-                .pi-panel-content__bottom {
-                  button {
-                    &:not(.pi-close-button):not(.pi-hamburger):not(
-                        .mdc-switch
-                      ):not(.pi-button__toggle):not(
-                        .pi-button__type--menu-item
-                      ):not(.pi-button__icon--single):not(
-                        .pi-button__xx-small
-                      ):not(.pi-button__trimmed):not(.pi-button__toggle):not(
-                        .ch2-btn
-                      ) {
-                      min-width: 9.5rem;
-                    }
-                  }
-                  button {
-                    &:not(.pi-close-button):not(.pi-hamburger):not(
-                        .mdc-switch
-                      ):not(.pi-button__toggle):not(
-                        .pi-button__type--menu-item
-                      ).pi-button:not(.pi-button__icon):not(
-                        .pi-button__x-small
-                      ):not(.pi-button__small):not(.pi-button__large):not(
-                        .pi-button__large
-                      ):not(.pi-button__trimed):not(.pi-button__xx-small):not(
-                        .pi-button__trimmed
-                      ) {
-                      min-width: 11.5rem;
-                      padding: var(--pi-spacing-xxxx-small)
-                        var(--pi-spacing-x-large);
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.is-desktop {
-    @include authenticationLayoutSpacings(4rem, x-large);
-    // Desktop S
-    &.is-desktop__small {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          @include authenticationLayoutSizes(
-            75%,
-            var(--pi-public-width-container),
-            70vh
-          );
-        }
-        &.pi-layout__00-authentication--auth {
-          @include authenticationLayoutSizes(
-            72%,
-            var(--pi-public-width-container),
-            76vh
-          );
-        }
-      }
-    }
-    // Desktop M & L
-    &.is-desktop__medium,
-    &.is-desktop__large {
-      .pi-layout__00-authentication {
-        &:not(.pi-layout__00-authentication--auth) {
-          @include authenticationLayoutSizes(
-            72%,
-            var(--pi-public-width-container),
-            78vh
-          );
-        }
-        &.pi-layout__00-authentication--auth {
-          @include authenticationLayoutSizes(
-            66.66%,
-            var(--pi-public-width-container),
-            78vh
-          );
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00a-authentication-layout-auth.scss

@@ -1,83 +0,0 @@
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small Device
-    @media screen and (max-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__00-authentication {
-          &.pi-layout__00-authentication--auth {
-            // Panel in authentication layout
-            .pi-panel {
-              .pi-panel-content__left {
-                display: none;
-              }
-              .pi-panel-content__right {
-                padding-top: var(--pi-spacing-xxx-large);
-                @media screen and (max-height: 41.6875rem) {
-                  transform: scale(0.95);
-                  &.pi-wrapper {
-                    &.pi-wrapper__gap--xl {
-                      gap: unset;
-                    }
-                  }
-                }
-              }
-            }
-            // Headline in authentication layout
-            .pi-headline {
-              &.pi-headline__type--logo {
-                & > figure {
-                  max-width: 5.75rem;
-                }
-              }
-            }
-          }
-
-          // Panel in Root auth form
-          &.pi-layout__00-authentication--root-org {
-            // Panel in authentication layout
-            .pi-panel {
-              .pi-panel-content__center {
-                .pi-wrapper {
-                  &:first-child {
-                    margin-top: var(--pi-spacing-medium);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large Device
-    @media screen and (min-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__00-authentication {
-          &.pi-layout__00-authentication--auth {
-            // Panel in authentication layout
-            .pi-panel {
-              .pi-panel-content__left {
-                display: grid;
-                grid-template-rows: repeat(2, 1fr);
-                & > *:nth-child(n + 1) {
-                  align-self: end;
-                }
-              }
-            }
-            // Headline in authentication layout
-            .pi-headline {
-              &.pi-headline__type--logo {
-                & > figure {
-                  max-width: 4.6875rem;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00b-authentication-layout-recover-password.scss

@@ -1,32 +0,0 @@
-html {
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-layout__00-authentication {
-        &.pi-layout__00-authentication--recover-password {
-          .pi-panel {
-            & > section {
-              .pi-panel-content__top,
-              .pi-panel-content__bottom {
-                button {
-                  &:not(.pi-close-button):not(.pi-hamburger):not(
-                      .mdc-switch
-                    ):not(.pi-button__toggle):not(
-                      .pi-button__type--menu-item
-                    ):not(.pi-button__icon--single):not(
-                      .pi-button__xx-small
-                    ):not(.pi-button__trimmed):not(.pi-button__toggle):not(
-                      .ch2-btn
-                    ) {
-                    min-width: 13.5rem;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00c-authentication-layout-user-profile.scss

@@ -1,112 +0,0 @@
-@mixin authenticationLayoutSelectMenuTypeCustom(
-  $columnsNum: 1,
-  $card-height: unset
-) {
-  .pi-layout__00-authentication {
-    &.pi-layout__00-authentication--user-profile {
-      .pi-select {
-        .pi-select-options-menu {
-          padding: unset;
-          background-color: transparent;
-        }
-        &.pi-select__menu-type--custom-grid {
-          .pi-select-options-menu {
-            & > div {
-              display: grid;
-              grid-template-columns: repeat(#{$columnsNum}, 1fr);
-              grid-gap: var(--pi-spacing-large);
-              .pi-card {
-                min-height: $card-height;
-              }
-            }
-          }
-        }
-      }
-      // Grid wrapper 3 cols in Authentiocation User Type layout
-      .pi-wrapper {
-        &.pi-wrapper__grid {
-          &.pi-wrapper__grid--columns-3 {
-            &.is-responsive {
-              grid-template-columns: repeat(#{$columnsNum}, 1fr);
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin authenticationLayoutMobile {
-  .pi-layout__00-authentication {
-    &.pi-layout__00-authentication--user-profile {
-      .pi-select-option__large {
-        width: -webkit-fill-available;
-      }
-      .pi-card {
-        .pi-card-content__bottom {
-          display: none;
-        }
-      }
-      .pi-panel__gap--xxxl {
-        & > section {
-          gap: var(--pi-spacing-x-small);
-        }
-      }
-    }
-  }
-}
-
-.pi-layout__00-authentication {
-  &.pi-layout__00-authentication--user-profile {
-    .pi-card {
-      &.is-active {
-        .pi-card-content__bottom {
-          & > span {
-            font: {
-              weight: 400;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include authenticationLayoutSelectMenuTypeCustom;
-    @include authenticationLayoutMobile;
-  }
-  &:not(.is-desktop) {
-    @media screen and (max-width: 62rem) {
-      .pi-layout__00-authentication {
-        &.pi-layout__00-authentication--user-profile {
-          .pi-panel-content__center {
-            padding-top: var(--pi-spacing-medium);
-          }
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    // Tablet Small
-    &.is-tablet__small {
-      @include authenticationLayoutSelectMenuTypeCustom;
-    }
-    // Tablet L
-    &.is-tablet__large {
-      @include authenticationLayoutSelectMenuTypeCustom(3, 9rem);
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    &.is-desktop__small {
-      @include authenticationLayoutSelectMenuTypeCustom(3, 9.5rem);
-    }
-    &:not(.is-desktop__small) {
-      @include authenticationLayoutSelectMenuTypeCustom(3);
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00d-authentication-layout-default-space.scss

@@ -1,47 +0,0 @@
-@mixin authenticationDefaultSpaceLayoutSpacings($spacing, $gap) {
-  .pi-layout__00-authentication {
-    &.pi-layout__00-authentication--default-space {
-      .pi-panel {
-        .pi-panel-content__top,
-        .pi-panel-content__bottom {
-          gap: var(--pi-spacing-#{$gap});
-        }
-        &.pi-panel__inner-padding--xxxxl {
-          &.pi-panel__inner-padding {
-            &.pi-panel__flex-direction--column {
-              & > section {
-                & > * {
-                  padding-left: $spacing;
-                  padding-right: $spacing;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  &.is-mobile {
-    @include authenticationDefaultSpaceLayoutSpacings(
-      var(--pi-spacing-xxx-large),
-      x-small
-    );
-  }
-  &.is-tablet {
-    &.is-tablet__small {
-      @include authenticationDefaultSpaceLayoutSpacings(
-        var(--pi-spacing-xxxx-large),
-        small
-      );
-    }
-    &.is-tablet__large {
-      @include authenticationDefaultSpaceLayoutSpacings(8rem, x-large);
-    }
-  }
-  &.is-desktop {
-    @include authenticationDefaultSpaceLayoutSpacings(11rem, x-large);
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-00e-authentication-layout-impersonation.scss

@@ -1,32 +0,0 @@
-html {
-  &:not(.is-mobile) {
-    .pi-shell {
-      .is-public {
-        .pi-layout__00-authentication {
-          &.pi-layout__00-authentication--impersonation {
-            .pi-panel {
-              & > section {
-                .pi-panel-content__top,
-                .pi-panel-content__bottom {
-                  button {
-                    &:not(.pi-close-button):not(.pi-hamburger):not(
-                        .mdc-switch
-                      ):not(.pi-button__toggle):not(
-                        .pi-button__type--menu-item
-                      ):not(.pi-button__icon--single):not(
-                        .pi-button__xx-small
-                      ):not(.pi-button__trimmed):not(.pi-button__toggle):not(
-                        .ch2-btn
-                      ) {
-                      min-width: 13.5rem;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout-old.scss

@@ -1,239 +0,0 @@
-.pi-layout {
-  &.pi-layout__01-dashboard-old {
-    .pi-panel__primary {
-      border: none;
-      background-color: var(--pi-color-primary);
-    }
-  }
-}
-
-.is-advisor {
-  .pi-layout {
-    &.pi-layout__01-dashboard-old {
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-layout__01-dashboard-old {
-    &.is-company {
-      .pi-wrapper {
-        &.pi-wrapper__main {
-          & > section {
-            align-items: stretch;
-            .pi-panel {
-              height: 100%;
-              & > section {
-                height: 100%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-layout__01-dashboard-old {
-    &.is-investor {
-      & > div {
-        & > div {
-          & > * {
-            display: block;
-            .pi-panel {
-              height: 100%;
-            }
-          }
-        }
-      }
-      .pi-panel {
-        & > section {
-          height: 100%;
-          // Press component
-          & > div {
-            a {
-              & > .pi-headline {
-                & > figure {
-                  width: unset;
-                  img {
-                    height: 1.75rem;
-                    width: 1.75rem;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-html {
-  // Mobile
-  &.is-mobile {
-    .is-advisor {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-    .is-company {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-
-    .pi-layout {
-      &.pi-layout__01-dashboard-old {
-        &.is-investor {
-          .pi-panel {
-            & > section {
-              // Deal manager component
-              & > .pi-headline {
-                flex-direction: row;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    .is-advisor {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-    .is-company {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-    .is-investor {
-      .pi-layout {
-        &.pi-layout__01-dashboard-old {
-        }
-      }
-    }
-    // Tablet S
-    &.is-tablet__small {
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-  }
-  // Large device
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .is-mode-list {
-        .pi-layout {
-          &.pi-layout__01-dashboard-old {
-            .pi-data-grid {
-              &.pi-data-grid__data-direction--row {
-                height: calc(100% - 2.6563rem);
-                .pi-data-grid__content {
-                  display: flex;
-                  flex-direction: column;
-                  justify-content: space-between;
-                  height: calc(100% - 4.6563rem);
-                  button {
-                    &:not(.pi-close-button):not(.pi-hamburger):not(
-                        .pi-close-button
-                      ):not(.pi-hamburger):not(.pi-button__xx-small) {
-                      height: 2.4rem;
-                      min-height: unset;
-                      padding-left: var(--pi-spacing-medium);
-                      padding-right: var(--pi-spacing-medium);
-                    }
-                  }
-                  .pi-chip-label {
-                    max-width: 15ch;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .is-advisor {
-    }
-    .is-company {
-    }
-    .is-investor {
-    }
-    // Desktop S
-    &.is-desktop__small {
-      .pi-layout__01-dashboard-old {
-        width: 90%;
-      }
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-
-    // Desktop M
-    &.is-desktop__medium {
-      .pi-layout__01-dashboard-old {
-        width: 85%;
-      }
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-
-    // Desktop L
-    &.is-desktop__large {
-      .pi-layout__01-dashboard-old {
-        width: 75%;
-      }
-      .is-advisor {
-      }
-      .is-company {
-      }
-      .is-investor {
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-01-dashboard-layout.scss

@@ -1,55 +0,0 @@
-@mixin dashboardLayoutWidth(
-  $width: calc(100% - var(--pi-spacing-x-large)),
-  $max-width: calc(100% - var(--pi-spacing-x-large)),
-  $margin: var(--pi-height-header-mobile) auto 0
-) {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      width: $width;
-      max-width: $max-width;
-      margin: $margin;
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-layout__01-dashboard {
-    display: grid;
-    align-items: center;
-  }
-}
-
-html {
-  // Maobile & Tablet
-  &:not(.is-desktop) {
-    // Small devices
-    @include dashboardLayoutWidth;
-  }
-  // Large device
-  &:not(.is-mobile) {
-    // Tablet L & Desktop S, M & L > 2400px
-    @media screen and (min-width: 62rem) and (max-width: 140rem) {
-      @include dashboardLayoutWidth(
-        calc(100% - var(--pi-spacing-x-large)),
-        calc(100% - var(--pi-spacing-x-large)),
-        unset
-      );
-    }
-    // X Large device
-    @media screen and (min-width: 140rem) {
-      @include dashboardLayoutWidth(
-        calc(
-          100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(
-              --pi-spacing-x-large
-            )
-        ),
-        calc(
-          100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(
-              --pi-spacing-x-large
-            )
-        ),
-        unset
-      );
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-01a-dashboard-layout-company.scss

@@ -1,333 +0,0 @@
-$pi-seller-dashboard-overviews-height: 7.5rem; // 120px
-
-:root {
-  // Company Dashboard Spacings
-  --pi-seller-dashboard-overviews-height: #{$pi-seller-dashboard-overviews-height}; // 3.125rem; // 50px
-}
-
-@mixin companyDashboardGridMobileAndTablet {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        display: flex;
-        flex-direction: column;
-        gap: var(--pi-spacing-medium);
-        & > *:nth-child(n + 1) {
-          display: block;
-          width: -webkit-fill-available;
-        }
-      }
-    }
-  }
-}
-
-@mixin companyDashboardInsightsPanelEmptyState($width: 66.66%) {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        & > *:nth-child(2) {
-          &.is-empty {
-            & > .pi-panel {
-              .pi-panel-content__center {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                min-height: calc(
-                  100vh - var(--pi-spacing-xxxx-large) - var(
-                      --pi-height-header
-                    ) -
-                    23.65rem
-                );
-                .pi-note {
-                  width: $width;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin companyDashboardGridDesktopSmall {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        grid-template-columns: repeat(2, 1fr);
-        grid-template-areas:
-          'item1 item1'
-          'item2 item3'
-          'item4 item5';
-        & > *:nth-child(2),
-        & > *:nth-child(3) {
-          & > * {
-            max-width: 100%;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin companyDashboardGridDesktop {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        grid-template-columns: repeat(6, 1fr);
-        grid-template-areas:
-          'item1 item1 item1 item1 item3 item3'
-          'item2 item2 item2 item2 item3 item3'
-          'item4 item4 item5 item5 item3 item3';
-
-        & > *:nth-child(3) {
-          & > * {
-            min-height: calc(
-              100vh - var(--pi-spacing-xxxx-large) - var(--pi-height-header)
-            );
-          }
-          .pi-panel-content {
-            // Center
-            &.pi-panel-content__center {
-              padding: unset;
-
-              &:nth-child(2) {
-                & > *:nth-child(n + 1) {
-                  padding-left: var(--pi-spacing-x-large);
-                  padding-right: var(--pi-spacing-x-large);
-                  & > article {
-                    padding-left: var(--pi-spacing-x-small);
-                    padding-right: var(--pi-spacing-x-small);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Accordion horizontal in Insights panel
-@mixin companyDashboardHorizontalAccordionDesktop {
-  .pi-layout {
-    &.pi-layout__01-dashboard {
-      &.is-company {
-        .pi-accordion {
-          &.pi-accordion__direction--horizontal {
-            & > section {
-              &:nth-child(1) {
-                header {
-                  .pi-list-item {
-                    flex-direction: column;
-                    gap: unset;
-                    .pi-list-item-icon {
-                      &.pi-list-item-icon__left {
-                        max-width: 100%;
-                        width: 100%;
-                        // Insights chip
-                        .pi-chip__large {
-                          &:not(.pi-chip__single-icon) {
-                            height: calc(
-                              var(--pi-spacing-xxxx-large) - var(
-                                  --pi-spacing-xxx-small
-                                )
-                            );
-                            max-width: 100%;
-                            width: 100%;
-                          }
-                        }
-                      }
-                    }
-                    .pi-list-item-content {
-                      &.pi-list-item-content__left {
-                        display: flex;
-                        align-items: flex-end;
-                        text-align: center;
-                        font: {
-                          size: var(--pi-font-size-x-small);
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-layout__01-dashboard {
-    &.is-company {
-      @for $i from 1 through 5 {
-        & > *:nth-child(#{$i}) {
-          grid-area: item#{$i};
-          align-self: flex-start;
-        }
-      }
-      grid-gap: var(--pi-spacing-medium);
-      // Overviews
-      & > *:nth-child(1) {
-        .pi-card {
-          min-height: var(--pi-seller-dashboard-overviews-height);
-
-          .pi-card-content {
-            &.pi-card-content__top {
-              padding-left: var(--pi-spacing-large);
-              padding-top: var(--pi-spacing-medium);
-              padding-right: var(--pi-spacing-large);
-            }
-            &.pi-card-content__bottom {
-              flex-direction: row;
-              align-items: center;
-              min-height: var(--pi-spacing-xxxx-large);
-            }
-          }
-          &:hover {
-            border-color: var(--pi-color-primary-100);
-          }
-        }
-      }
-      // TO·DO List
-      & > *:nth-child(3) {
-        .pi-panel {
-          .pi-panel-content {
-            & > .pi-divider {
-              padding-top: var(--pi-spacing-xxx-small);
-              & + * {
-                padding-top: var(--pi-spacing-medium);
-              }
-            }
-
-            & > .pi-text-viewer {
-              padding-left: var(--pi-spacing-x-small);
-              padding-right: var(--pi-spacing-x-small);
-            }
-
-            // Top
-            &.pi-panel-content__top {
-              padding-left: var(--pi-spacing-xx-large);
-              padding-right: var(--pi-spacing-xx-large);
-              & > span {
-                line-height: 105%;
-              }
-            }
-          }
-        }
-        &:not(.is-empty) {
-          & > *:nth-child(3) {
-            .pi-panel {
-              .pi-panel-content {
-                // Center
-                &.pi-panel-content__center {
-                  padding: unset;
-
-                  &:nth-child(2) {
-                    .pi-icon__appearance--fill {
-                      &.pi-color__primary {
-                        background-color: var(--pi-color-primary-50);
-                      }
-                    }
-                    & > *:nth-child(n + 1) {
-                      padding-left: var(--pi-spacing-x-large);
-                      padding-right: var(--pi-spacing-x-large);
-                      & > article {
-                        padding-left: var(--pi-spacing-x-small);
-                        padding-right: var(--pi-spacing-x-small);
-                      }
-                    }
-                    .pi-wrapper__flex-direction--column {
-                      // Only scroll for desktop M & L
-                      @media screen and (min-width: 90rem) {
-                        max-height: calc(
-                          100vh - var(--pi-spacing-xxxx-large) - var(
-                              --pi-height-header
-                            ) -
-                            24rem
-                        );
-                        max-width: calc(100% - var(--pi-spacing-xxx-small));
-                        overflow-y: auto;
-                        // Generic Scroll
-                        &::-webkit-scrollbar {
-                          width: var(--pi-spacing-xxxx-small);
-                        }
-
-                        &::-webkit-scrollbar-track {
-                          box-shadow: none;
-                        }
-
-                        &::-webkit-scrollbar-thumb {
-                          background-color: var(--pi-color-primary-100);
-                          border-radius: var(--pi-border-radius-small);
-
-                          &:hover {
-                            transition: var(--pi-animation);
-                            background-color: var(--pi-color-primary-200);
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-      // Deal manager CTA
-      & > *:nth-child(5) {
-        .pi-headline {
-          height: var(--pi-spacing-xxx-large);
-          width: var(--pi-spacing-xxx-large);
-          &::after {
-            content: '';
-            position: relative;
-            z-index: 99;
-            height: var(--pi-spacing-xx-small);
-            width: var(--pi-spacing-xx-small);
-            margin-top: -4rem;
-            margin-left: 2.25rem;
-            border-radius: 50%;
-            background-color: var(--pi-color-success);
-          }
-        }
-        .pi-list-item-icon {
-          &.pi-list-item-icon__right {
-            display: flex;
-            align-items: center;
-            gap: var(--pi-spacing-xxx-small);
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    @include companyDashboardGridMobileAndTablet;
-  }
-
-  &.is-desktop {
-    // Desktop S
-    &.is-desktop__small {
-      @include companyDashboardGridDesktopSmall;
-      @include companyDashboardInsightsPanelEmptyState;
-    }
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include companyDashboardHorizontalAccordionDesktop;
-    }
-    // Desktop M & L
-    &:not(.is-desktop__small) {
-      @include companyDashboardGridDesktop;
-      @include companyDashboardInsightsPanelEmptyState(50%);
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-05a-splitted-paywall-layout.scss

@@ -1,429 +0,0 @@
-.pi-layout {
-  &.pi-05a-splitted-paywall-layout {
-    width: 100vw;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position-x: right;
-
-    .pi-main-wrapper-content {
-      min-height: unset;
-      // Left
-      &.pi-main-wrapper-content__left {
-        display: flex;
-        flex-direction: column;
-        header {
-          h1 + * {
-            margin-top: var(--pi-spacing-x-small);
-          }
-        }
-      }
-      // Right
-      &.pi-main-wrapper-content__right {
-        display: flex;
-        flex-direction: column;
-      }
-    }
-
-    * + .mat-mdc-radio-group {
-      padding-top: var(--pi-spacing-x-large);
-    }
-    .mat-mdc-radio-group {
-      display: flex;
-      flex-direction: column;
-      label {
-        margin-bottom: unset;
-      }
-    }
-    .mat-mdc-radio-label-content {
-      padding-left: var(--pi-spacing-medium);
-    }
-
-    .pi-panel {
-      box-shadow: var(--pi-box-shadow);
-      transition: var(--pi-animation);
-      width: 100%;
-      max-width: 30rem;
-      &.is-active {
-        border: 1px solid var(--pi-color-primary-100);
-        background-color: var(--pi-color-primary-50);
-      }
-
-      &:hover {
-        cursor: pointer;
-        box-shadow: var(--pi-box-shadow-hover);
-        &:not(.is-active) {
-          border: 1px solid var(--pi-color-primary-200);
-        }
-      }
-      // Padding
-      &.has-padding {
-        width: 100%;
-        padding: var(--pi-spacing-large);
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 6.75rem;
-          @media screen and (max-height: 46.25rem) {
-            min-height: calc(198vh + var(--pi-height-footer));
-          }
-          .pi-main-wrapper-content {
-            // Right
-            &.pi-main-wrapper-content__right {
-              height: calc(
-                100vh - var(--pi-spacing-x-large) - var(
-                    --pi-spacing-x-large
-                  ) - var(--pi-height-footer) -
-                  8rem
-              );
-            }
-            // Left
-            &.pi-main-wrapper-content__left {
-              // Header
-              & > header {
-                transform: scale(0.92);
-                .pi-color__black-primary {
-                  & > article {
-                    display: flex;
-                    gap: var(--pi-spacing-xxx-small);
-                  }
-                }
-              }
-            }
-          }
-
-          // Radio panels
-          .mat-mdc-radio-group {
-            gap: var(--pi-spacing-small);
-            width: 100%;
-            transform: scale(0.92);
-          }
-
-          .pi-button {
-            &:not(.pi-button__icon--single):not(.pi-button__x-small):not(
-                .pi-button__small
-              ):not(.pi-button__large) {
-              padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
-            }
-          }
-        }
-      }
-    }
-  }
-  &.is-tablet {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          padding: var(--pi-spacing-xx-large) var(--pi-spacing-xx-large) 6.75rem;
-          .pi-wrapper__main {
-            .pi-main-wrapper-content {
-              &.pi-main-wrapper-content__left {
-                & > header {
-                  max-width: 66.66%;
-                  margin: 0 auto;
-                }
-              }
-              &.pi-main-wrapper-content__right {
-                min-height: calc(
-                  100vh - var(--pi-spacing-xx-large) - var(
-                      --pi-spacing-xx-large
-                    ) - var(--pi-height-footer) -
-                    20rem
-                );
-              }
-            }
-          }
-          .pi-button {
-            &:not(.pi-button__icon--single):not(.pi-button__x-small):not(
-                .pi-button__small
-              ):not(.pi-button__large) {
-              padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-x-large);
-              min-width: 11rem;
-            }
-          }
-        }
-      }
-    }
-    // Tablet S
-    &.is-tablet__small {
-      .pi-wrapper__main {
-        .pi-main-wrapper-content {
-          & > * + *:not(:last-child) {
-            width: 66.66%;
-            margin: var(--pi-spacing-x-large) auto;
-          }
-        }
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .pi-wrapper__main {
-        .pi-main-wrapper-content {
-          & > * + *:not(:last-child) {
-            width: 50%;
-            margin: var(--pi-spacing-x-large) auto;
-          }
-        }
-      }
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          // Main
-          .pi-wrapper {
-            &.pi-wrapper__main {
-              & > section {
-                padding-bottom: var(--pi-height-header);
-              }
-              .pi-main-wrapper-content {
-                width: 100%;
-                // Left
-                &.pi-main-wrapper-content__left {
-                  & > header {
-                    justify-content: center;
-                    text-align: center;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    h3 {
-                      display: block;
-                    }
-                  }
-                  form {
-                    & > h4 {
-                      text-align: center;
-                    }
-                  }
-                  // Action wrapper
-                  .pi-wrapper__action {
-                    position: fixed;
-                    bottom: 0;
-                    left: 0;
-                    z-index: 999;
-                    height: var(--pi-height-footer);
-                    width: 100%;
-                    margin-top: unset;
-                    background-color: var(--pi-color-white-rgba-06);
-                    box-shadow: var(--pi-box--shadow-top);
-                  }
-                }
-                // Right
-                &.pi-main-wrapper-content__right {
-                  gap: var(--pi-spacing-xxxx-large);
-                  padding-top: 6rem;
-                  background-image: unset;
-
-                  & > form {
-                    display: flex;
-                    justify-content: center;
-                    flex-direction: column;
-                    align-items: center;
-                    width: 100%;
-                  }
-                }
-              }
-            }
-          }
-          .mat-mdc-radio-group {
-            align-items: center;
-          }
-          .mat-mdc-radio-label-content {
-            h3 {
-              font: {
-                size: var(--pi-font-size-xx-large);
-              }
-            }
-          }
-          // Mobile and Tablet S
-          @media screen and (max-width: 62rem) {
-            .pi-main-wrapper-content {
-              &.pi-main-wrapper-content__left {
-                // Header
-                & > header {
-                  h1 {
-                    font: {
-                      size: var(--pi-font-size-x-large);
-                    }
-                  }
-                }
-              }
-            }
-          }
-          // Action wrapper
-          .pi-wrapper__action {
-            justify-content: space-around;
-          }
-        }
-      }
-    }
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__05-splitted {
-          &.pi-05a-splitted-paywall-layout {
-            .mat-mdc-radio-group > * {
-              width: -webkit-fill-available;
-            }
-          }
-        }
-      }
-    }
-  } // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Tablet L and Desktop
-    @media screen and (min-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__05-splitted {
-          &.pi-05a-splitted-paywall-layout {
-            .pi-main-wrapper-content {
-              &.pi-main-wrapper-content__left {
-                // Header
-                & > header {
-                  h1 {
-                    font: {
-                      size: var(--pi-font-size-xx-large);
-                    }
-                  }
-                }
-              }
-            }
-
-            .mat-mdc-radio-label-content {
-              h3 {
-                font: {
-                  size: 2.375rem;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          height: 100vh;
-          overflow-y: hidden;
-          .pi-wrapper__main {
-            .pi-main-wrapper-content {
-              // Left
-              &.pi-main-wrapper-content__left {
-                justify-content: space-between;
-                max-width: 50%;
-                .pi-panel {
-                  &.has-padding {
-                    max-width: 32rem;
-                  }
-                }
-                .pi-wrapper {
-                  &.pi-wrapper__action {
-                    gap: var(--pi-spacing-x-large);
-                  }
-                }
-              }
-              // Right
-              &.pi-main-wrapper-content__right {
-                justify-content: center;
-              }
-            }
-          }
-        }
-      }
-    }
-    &.is-desktop__small {
-      .pi-layout {
-        &.pi-layout__05-splitted {
-          &.pi-05a-splitted-paywall-layout {
-            padding: var(--pi-spacing-xxx-large);
-            gap: var(--pi-spacing-xx-large);
-            .pi-main-wrapper-content {
-              height: calc(
-                100vh - var(--pi-spacing-xxx-large) - var(
-                    --pi-spacing-xxx-large
-                  )
-              );
-              // Left
-              &.pi-main-wrapper-content__left {
-                .mat-mdc-radio-group {
-                  max-width: 70%;
-                }
-              }
-
-              // Right
-              &.pi-main-wrapper-content__right {
-                gap: var(--pi-spacing-medium);
-              }
-            }
-          }
-        }
-      }
-    }
-    &.is-desktop__medium {
-      .pi-layout {
-        &.pi-layout__05-splitted {
-          &.pi-05a-splitted-paywall-layout {
-            padding: var(--pi-spacing-xxx-large);
-            gap: var(--pi-spacing-xxx-large);
-            .pi-main-wrapper-content {
-              // Left
-              &.pi-main-wrapper-content__left {
-                height: calc(
-                  100vh - var(--pi-spacing-xxx-large) - var(
-                      --pi-spacing-xxx-large
-                    )
-                );
-                .mat-mdc-radio-group {
-                  max-width: 66.66%;
-                }
-              }
-              // Right
-              &.pi-main-wrapper-content__right {
-                gap: var(--pi-spacing-x-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  &.is-desktop__large {
-    .pi-layout {
-      &.pi-layout__05-splitted {
-        &.pi-05a-splitted-paywall-layout {
-          padding: var(--pi-spacing-xxxx-large);
-          gap: var(--pi-spacing-xxxx-large);
-
-          .pi-main-wrapper-content {
-            height: calc(
-              100vh - var(--pi-spacing-xxxx-large) - var(
-                  --pi-spacing-xxxx-large
-                )
-            );
-            // Left
-            &.pi-main-wrapper-content__left {
-              .mat-mdc-radio-group {
-                max-width: 50%;
-              }
-              .pi-wrapper__action {
-                margin-top: 5rem;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-container-layout.scss

@@ -1,3 +0,0 @@
-.pi-container-layout {
-  padding-bottom: var(--pi-spacing-xxxx-large);
-}

libs/ui/src/lib/styles/deale-saas/layouts/_pi-layout.scss

@@ -1,217 +0,0 @@
-@mixin layoutHeight(
-  $height: calc(
-      100vh - var(--pi-height-header-mobile) - var(--pi-height-footer) - var(
-          --pi-spacing-x-large
-        ) - var(--pi-spacing-x-large)
-    )
-) {
-  .pi-layout {
-    &.pi-layout__main,
-    &.pi-layout__01-dashboard {
-      height: $height;
-    }
-  }
-}
-
-@mixin layoutWidth(
-  $max-width: calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
-  $margin: var(--pi-height-header-mobile) auto 0
-) {
-  .pi-layout {
-    // Default scroll
-    &.pi-layout__main {
-      max-width: $max-width;
-      margin: $margin;
-    }
-  }
-}
-
-.pi-layout {
-  &:not(.pi-layout__00-authentication):not(.pi-layout__01-dashboard) {
-    display: block;
-  }
-
-  // Default scroll
-  &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
-      .pi-layout__05-splitted
-    ):not(.pi-layout__08-form) {
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-  &.pi-layout__main {
-    & > *:nth-child(1) {
-      margin-top: var(--pi-spacing-xx-large);
-    }
-    & > *:nth-child(n + 2) {
-      margin-top: var(--pi-spacing-x-large);
-    }
-    & > .pi-component {
-      display: block;
-      & > .pi-panel {
-        box-shadow: var(--pi-box-shadow);
-      }
-    }
-  }
-
-  &.pi-layout__no-padding {
-    padding: 0;
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include layoutHeight;
-    @include layoutWidth;
-    .has-bottom-sticky-note {
-      .pi-layout {
-        &.pi-layout__01-dashboard,
-        &.pi-layout__main {
-          padding-bottom: 11.5rem;
-        }
-        &.pi-layout__07-list {
-          & > .pi-wrapper__list {
-            & > section {
-              padding-bottom: 5rem;
-            }
-          }
-        }
-      }
-    }
-    .pi-layout {
-      // Default scroll
-      &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
-          .pi-layout__05-splitted
-        ):not(.pi-layout__08-form) {
-        max-width: calc(
-          100vw - var(--pi-spacing-medium) - var(--pi-spacing-medium)
-        );
-      }
-      &.pi-layout__main {
-        padding: 0 0 calc(var(--pi-spacing-medium) + var(--pi-height-footer));
-        & > *:nth-child(-n + 3) {
-          margin-top: var(--pi-spacing-medium);
-        }
-      }
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    // Tablet S
-    &.is-tablet__small {
-      .has-bottom-sticky-note {
-        @include layoutHeight(
-          calc(
-            100vh - var(--pi-height-header-tablet) - var(--pi-height-footer) -
-              2rem
-          )
-        );
-        .pi-layout {
-          &.pi-layout__main,
-          &.pi-layout__01-dashboard {
-            padding-bottom: 5rem;
-          }
-          &.pi-layout__07-list {
-            & > .pi-wrapper__list {
-              & > section {
-                padding-bottom: 5rem;
-              }
-            }
-          }
-        }
-      }
-
-      @include layoutHeight(
-        calc(100vh - var(--pi-height-header-tablet) - var(--pi-height-footer))
-      );
-      @include layoutWidth(
-        calc(100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)),
-        var(--pi-height-header-tablet) auto 0
-      );
-      .pi-layout {
-        // Default scroll
-        &:not(.pi-layout__07-list):not(.pi-layout__00-authentication):not(
-            .pi-layout__05-splitted
-          ):not(.pi-layout__08-form) {
-          max-width: calc(
-            100vw - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-          );
-        }
-        &.pi-layout__main {
-          padding: 0 0 calc(var(--pi-spacing-x-large) + var(--pi-height-footer));
-          & > *:nth-child(-n + 3) {
-            margin-top: var(--pi-spacing-x-large);
-          }
-        }
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .has-bottom-sticky-note {
-        .pi-layout {
-          &.pi-layout__main,
-          &.pi-layout__01-dashboard {
-            padding-bottom: 5rem;
-          }
-          &.pi-layout__07-list {
-            & > .pi-wrapper__list {
-              & > section {
-                padding-bottom: 5rem;
-              }
-            }
-          }
-        }
-      }
-      @include layoutHeight(
-        calc(100vh - var(--pi-height-header-tablet) - 3.25rem)
-      );
-      @include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-desktop) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-layout {
-        &.pi-layout__main {
-          .pi-layout {
-            &.pi-layout__main {
-              & > *:nth-child(-n + 3) {
-                margin-top: var(--pi-spacing-xx-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Desktop
-  &.is-desktop {
-    .has-bottom-sticky-note {
-      .pi-layout {
-        &.pi-layout__main,
-        &.pi-layout__01-dashboard {
-          padding-bottom: 5rem;
-        }
-        &.pi-layout__07-list {
-          & > .pi-wrapper__list {
-            & > section {
-              padding-bottom: 5rem;
-            }
-          }
-        }
-      }
-    }
-    @include layoutHeight(
-      calc(
-        100vh - var(--pi-height-header-tablet) - var(
-            --pi-spacing-x-large
-          ) - var(--pi-spacing-large)
-      )
-    );
-    @include layoutWidth(calc(100% - var(--pi-spacing-x-large)), unset);
-  }
-}

libs/ui/src/lib/styles/deale-saas/layouts/index.scss

@@ -1,18 +0,0 @@
-@forward 'pi-00-authentication-layout';
-@forward 'pi-01-dashboard-layout';
-@forward 'pi-01a-dashboard-layout-company';
-@forward 'pi-01b-dashboard-layout-investor';
-@forward 'pi-01c-dashboard-layout-advisor';
-@forward 'pi-01-dashboard-layout-old';
-@forward 'pi-02-full-width-layout';
-@forward 'pi-02a-full-width-auto-layout';
-@forward 'pi-03-vertically-centered-layout';
-@forward 'pi-04-space-between-layout';
-@forward 'pi-05-splitted-layout';
-@forward 'pi-05a-splitted-paywall-layout';
-@forward 'pi-06-edge-to-edge-layout';
-@forward 'pi-07-list-layout';
-@forward 'pi-07a-list-auto-layout';
-@forward 'pi-08-form-layout';
-@forward 'pi-container-layout';
-@forward 'pi-layout';

libs/ui/src/lib/styles/deale-saas/shell/_pi-aside.scss

@@ -1,384 +0,0 @@
-@mixin asideActionWrapper() {
-  gap: var(--pi-spacing-medium);
-  & > *:nth-child(n + 1) {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-width: 50%;
-    width: -webkit-fill-available;
-  }
-
-  button {
-    &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
-        .pi-button__toggle
-      ):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
-        .pi-button__trimmed
-      ):not(.pi-button__toggle) {
-      min-width: unset;
-      padding-left: unset;
-      padding-right: unset;
-    }
-  }
-  .pi-button__w100 {
-    button {
-      &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
-          .pi-button__toggle
-        ):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
-          .pi-button__trimmed
-        ):not(.pi-button__toggle) {
-        min-width: 100%;
-      }
-    }
-  }
-}
-.pi-shell__deale-saas {
-  & > div {
-    .pi-saas-aside {
-      display: block;
-      position: fixed;
-      z-index: 99;
-      padding: calc(var(--pi-spacing-xx-large) + env(safe-area-inset-top)) 0
-        calc(var(--pi-spacing-x-large) + env(safe-area-inset-bottom));
-      overflow: hidden;
-      transition: var(--pi-animation);
-      & > .pi-close-button {
-        position: absolute;
-        margin-top: -1rem;
-      }
-      & > .pi-icon {
-        position: absolute;
-        height: var(--pi-spacing-xxx-large);
-        width: var(--pi-spacing-xxx-large);
-        margin-left: var(--pi-spacing-x-small);
-        margin-top: -0.475rem;
-        transition: var(--pi-animation);
-      }
-      &.pi-saas-aside__white {
-        background-color: var(--pi-color-white);
-        border: 1px solid var(--pi-color-white-900);
-        .pi-buyer-companies-list-filters {
-          .pi-accordion + .pi-wrapper {
-            padding: 0 var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
-          }
-        }
-      }
-      .pi-accordion-item-content__header {
-        & > .pi-text-viewer {
-          &.pi-text-viewer__font-size--m-xs {
-            label {
-              font: {
-                size: var(--pi-font-size-small);
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Aside is open
-    &.aside-is-open {
-      .pi-saas-aside {
-        opacity: 1;
-      }
-    }
-
-    // Aside is closed
-    &.aside-is-closed {
-      .pi-saas-aside {
-        transform: translateX(
-          calc(100vw + var(--pi-width-aside) + var(--pi-spacing-x-large))
-        );
-      }
-    }
-    // Aside is closable
-    &.aside-is-closable {
-      .pi-dynamic-menu {
-        & > *:nth-child(2) {
-          padding: var(--pi-spacing-x-large) var(--pi-spacing-x-large) 0;
-
-          .pi-wrapper__action {
-            flex-direction: column;
-            @include asideActionWrapper;
-          }
-        }
-
-        & > *:nth-child(3) {
-          @include asideActionWrapper;
-        }
-      }
-    }
-
-    // Dynamic menu
-    .pi-dynamic-menu {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      height: 100%;
-      overflow-y: scroll;
-
-      .pi-panel {
-        width: 100%;
-      }
-
-      & > *:nth-child(1) {
-        flex-shrink: 0;
-        height: calc(var(--pi-height-header-aside) + env(safe-area-inset-top));
-        .pi-headline {
-          max-width: 50%;
-          margin: auto;
-        }
-      }
-      & > *:nth-child(2) {
-        &.pi-wrapper__flex {
-          overflow-y: auto;
-          height: 100%;
-          // Generic Scroll
-          &::-webkit-scrollbar {
-            width: 0.1875rem;
-          }
-
-          &::-webkit-scrollbar-track {
-            box-shadow: none;
-          }
-
-          &::-webkit-scrollbar-thumb {
-            border-radius: var(--pi-border-radius-small);
-
-            &:hover {
-              transition: var(--pi-animation);
-            }
-          }
-        }
-
-        & > .pi-list-item {
-          border-radius: var(--pi-border-radius-medium);
-          padding: var(--pi-spacing-medium);
-        }
-      }
-      & > *:nth-child(3) {
-        flex-shrink: 0;
-        width: calc(
-          100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-        );
-        margin: 0 auto;
-        .pi-icon-button {
-          margin-bottom: var(--pi-spacing-x-large);
-          width: -webkit-fill-available;
-        }
-      }
-      &.pi-saas-admin-user-profile {
-        .pi-icon__x-large {
-          &.is-stroked {
-            &.pi-icon__appearance--fill {
-              height: 7rem;
-              width: 7rem;
-              border-radius: 50%;
-              .mat-icon {
-                height: 4rem;
-                width: 4rem;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Aside is NOT closable
-  &:not(.aside-is-closable) {
-    .pi-dynamic-menu {
-      & > *:nth-child(1) {
-        padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
-          calc(var(--pi-spacing-x-large) + var(--pi-spacing-large));
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-shell__deale-saas {
-      & > div {
-        .pi-saas-aside {
-          & > .pi-close-button {
-            margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
-          }
-        }
-        // Aside is open
-        &.aside-is-open {
-          .pi-saas-aside {
-            transform: translateX(var(--pi-spacing-x-large));
-          }
-        }
-      }
-    }
-  }
-
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          // Not fullscreen
-          &:not(.is-fullscreen) {
-            .pi-saas-aside {
-              top: 0;
-              height: calc(
-                100vh + env(safe-area-inset-top) + env(safe-area-inset-bottom)
-              );
-              width: 100%;
-              & > .pi-close-button {
-                margin-left: calc(100% - 0.9rem - var(--pi-spacing-large));
-              }
-
-              & > *:nth-child(2) {
-                height: calc(
-                  100% - env(safe-area-inset-top) - env(
-                      safe-area-inset-bottom
-                    ) - var(--pi-height-header-aside) - var(
-                      --pi-height-footer-aside
-                    )
-                );
-              }
-            }
-            // Aside is open
-            &.aside-is-open {
-              overflow: hidden;
-              .pi-saas-aside {
-                transform: translateX(0);
-                transition-duration: 0.4s;
-              }
-
-              & > section,
-              & > .pi-saas-navbar {
-                position: fixed;
-                transform: translateX(calc(-100vw));
-                transition-duration: 0.4s;
-              }
-            }
-            // Aside is closed
-            &.aside-is-closed {
-              overflow: unset;
-              .pi-saas-aside {
-                transition-duration: 0.4s;
-              }
-              & > section,
-              & > .pi-saas-navbar {
-                transform: translateX(calc(0));
-                transition-duration: 0.5s;
-              }
-            }
-
-            .pi-dynamic-menu {
-              & > *:nth-child(3) {
-                height: calc(
-                  var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
-                );
-                margin: 0 auto var(--pi-spacing-xxx-large);
-              }
-              & > *:nth-child(n + 2) {
-                padding: 0 var(--pi-spacing-x-large);
-              }
-            }
-          }
-          // Aside is closable
-          &.aside-is-closable {
-            .pi-dynamic-menu {
-              & > *:nth-child(1) {
-                padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
-                  var(--pi-spacing-xxxx-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          // Not fullscreen
-          &:not(.is-fullscreen) {
-            .pi-saas-aside {
-              top: var(--pi-spacing-x-large);
-              height: calc(
-                100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-              );
-              width: var(--pi-width-aside);
-              border-radius: var(--pi-border-radius-large);
-              box-shadow: var(--pi-box-shadow-panel-double);
-              & > *:nth-child(2) {
-                flex-grow: 1;
-                height: 100%;
-              }
-
-              & > .pi-close-button {
-                margin-left: calc(
-                  var(--pi-width-aside) - 1.125rem - var(--pi-spacing-large)
-                );
-              }
-            }
-            // Aside is open
-            &.aside-is-open {
-              .pi-saas-aside {
-                transform: translateX(
-                  calc(
-                    100vw - var(--pi-width-aside) - var(--pi-spacing-x-large)
-                  )
-                );
-              }
-            }
-            // Aside is closed
-            &.aside-is-closed {
-              .pi-saas-aside {
-                opacity: 0;
-                transition-duration: 0.6s;
-              }
-            }
-            .pi-dynamic-menu {
-              & > *:nth-child(2) {
-                padding: var(--pi-spacing-x-large);
-              }
-              & > *:nth-child(3) {
-                height: calc(
-                  var(--pi-height-footer-aside) + env(safe-area-inset-bottom)
-                );
-                margin: 0 auto;
-                padding: var(--pi-spacing-x-large) 0 0;
-              }
-            }
-
-            // Back link is hidden
-            &.backlink-is-hidden {
-              .pi-dynamic-menu {
-                & > *:nth-child(1) {
-                  padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large);
-                }
-              }
-              .pi-saas-aside {
-                & > .pi-icon {
-                  display: none;
-                }
-              }
-            }
-          }
-          // Aside is closable
-          &.aside-is-closable {
-            .pi-dynamic-menu {
-              & > *:nth-child(1) {
-                padding: 0 var(--pi-spacing-x-large) var(--pi-spacing-x-large)
-                  var(--pi-spacing-x-large);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/_pi-header.scss

@@ -1,380 +0,0 @@
-.pi-shell__deale-saas {
-  & > div {
-    .pi-saas-header {
-      // Private
-      display: flex;
-      border-radius: var(--pi-border-radius-large);
-
-      .pi-saas-header-content {
-        // Left
-        &.pi-saas-header-content__left {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          gap: var(--pi-spacing-xxxx-small);
-        }
-        // Right
-        &.pi-saas-header-content__right {
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-
-          & > *:nth-child(n + 1) {
-            display: flex;
-            align-items: center;
-            transition: var(--pi-animation);
-            &:hover {
-              cursor: pointer;
-            }
-          }
-
-          .pi-icon-button {
-            &.is-active {
-              position: absolute;
-              transform: scale(0);
-              opacity: 0;
-            }
-          }
-          .pi-icon {
-            // Common
-            &:not(.is-stroked) {
-              &:hover {
-                img,
-                .mat-icon {
-                  transition-duration: 0.15s;
-                  transform: scale(1.15);
-                }
-              }
-              &:not(:hover):not(.is-active) {
-                img,
-                .mat-icon {
-                  transition-duration: 0.15s;
-                  transform: scale(1);
-                }
-              }
-            }
-            // Type stroke
-            &.is-stroked {
-              &:hover {
-                transition-duration: 0.15s;
-                transform: scale(1.1);
-              }
-              &:not(:hover):not(.is-active) {
-                transition-duration: 0.15s;
-                transform: scale(1);
-              }
-            }
-            // Active
-            &.is-active {
-              position: absolute;
-              transform: scale(0);
-              opacity: 0;
-            }
-          }
-        }
-      }
-    }
-    // Aside is open
-    &.aside-is-open {
-      .pi-saas-header-content {
-        // Right
-        &.pi-saas-header-content__right {
-          .pi-icon {
-            &.is-active {
-              background-color: var(--pi-color-primary-50);
-              border-radius: 50%;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-saas-header {
-      left: var(--pi-spacing-medium);
-      width: calc(100% - var(--pi-spacing-medium) - var(--pi-spacing-medium));
-      .pi-saas-header-content {
-        // Left
-        &.pi-saas-header-content__left {
-          h2 {
-            max-width: 100%;
-            overflow: hidden;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-          }
-        }
-
-        // Right
-        &.pi-saas-header-content__right {
-          gap: var(--pi-spacing-medium);
-        }
-      }
-    }
-  }
-
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small Devices
-    @media screen and (max-width: 62rem) {
-      .pi-saas-header {
-        position: fixed;
-
-        .pi-saas-header-content {
-          // Left
-          &.pi-saas-header-content__left {
-            & > span {
-              display: flex;
-              gap: var(--pi-spacing-xx-small);
-              & > h1 {
-                font: {
-                  size: var(--pi-font-size-medium);
-                }
-              }
-            }
-          }
-          // Mobile
-          @media screen and (max-width: 40rem) {
-            height: var(--pi-height-header-mobile);
-
-            // Right
-            &.pi-saas-header-content__right {
-              button {
-                &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
-                    .pi-button__toggle
-                  ):not(.pi-button__icon--single):not(.pi-button__xx-small):not(
-                    .pi-button__trimmed
-                  ):not(.pi-button__toggle) {
-                  min-width: unset;
-                  padding-left: var(--pi-spacing-medium);
-                  padding-right: var(--pi-spacing-medium);
-                }
-              }
-              button {
-                &:not(.pi-close-button):not(.pi-hamburger):not(
-                    .pi-button__icon--single
-                  ) {
-                  min-width: var(--pi-spacing-xx-large);
-                }
-                &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
-                  padding: var(--pi-spacing-xxxx-small) unset;
-                }
-                &:not(.pi-close-button):not(
-                    .pi-hamburger
-                  ).pi-button__appearance--outline {
-                  background-color: var(--pi-color-accent-75);
-                  transition: all 0.16s ease-in;
-                  border: unset;
-                }
-                &:not(.pi-close-button):not(.pi-hamburger):not(
-                    .pi-button__x-large
-                  ) {
-                  border-radius: var(--pi-border-radius-medium);
-                  -webkit-border-radius: var(--pi-border-radius-medium);
-                  -moz-border-radius: var(--pi-border-radius-medium);
-                }
-              }
-            }
-          }
-          // Tablet S
-          @media screen and (min-width: 40rem) {
-            height: var(--pi-height-header-tablet);
-            // Right
-            &.pi-saas-header-content__right {
-              button {
-                &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
-                  padding: var(--pi-spacing-xxxx-small)
-                    var(--pi-spacing-x-small);
-                }
-              }
-            }
-          }
-          // Left
-          &.pi-saas-header-content__left {
-            width: 60%;
-            & > span {
-              & > h1 {
-                font: {
-                  size: var(--pi-font-size-medium);
-                }
-              }
-            }
-          }
-
-          // Right
-          &.pi-saas-header-content__right {
-            width: 40%;
-            display: flex;
-            align-items: center;
-
-            .pi-avatar {
-              padding: var(--pi-spacing-xxx-small);
-
-              &:hover,
-              &.is-active {
-                transform: scale(1.05);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    .pi-avatar {
-      picture {
-        width: 3rem;
-        height: 3rem;
-      }
-    }
-    &.is-tablet__small {
-      .pi-saas-header {
-        left: var(--pi-spacing-x-large);
-        width: calc(
-          100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-        );
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .pi-saas-header {
-        .pi-saas-header-content {
-          // Left
-          &.pi-saas-header-content__left {
-            height: var(--pi-height-header-tablet);
-            padding-top: var(--pi-spacing-large);
-          }
-          // Right
-          &.pi-saas-header-content__right {
-            height: var(--pi-height-header-tablet);
-            padding-top: var(--pi-spacing-xx-small);
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet L & Desktop
-  &:not(.is-mobile) {
-    .pi-saas-header {
-      .pi-saas-header-content {
-        // Right
-        &.pi-saas-header-content__right {
-          gap: var(--pi-spacing-medium);
-
-          .pi-icon-button,
-          .pi-icon:nth-of-type(1) {
-            &.is-active {
-              position: absolute;
-              transform: scale(0);
-              opacity: 0;
-            }
-            &:not(.is-active) {
-              &::after {
-                content: '|';
-                color: var(--pi-color-primary-200);
-                margin-left: var(--pi-spacing-medium);
-                font: {
-                  size: var(--pi-font-size-small);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Large Devices
-    @media screen and (min-width: 62rem) {
-      .pi-saas-header-content {
-        // Left
-        &.pi-saas-header-content__left {
-          & span {
-            & > h1 {
-              font: {
-                size: var(--pi-font-size-large);
-              }
-            }
-          }
-        }
-        // Right
-        &.pi-saas-header-content__right {
-          button {
-            &:not(.pi-close-button):not(.pi-hamburger).pi-button__medium {
-              &.pi-button__appearance--ghost {
-                padding: var(--pi-spacing-xxxx-small) 0;
-              }
-              &:not(.pi-button__appearance--ghost) {
-                padding: var(--pi-spacing-xxxx-small) var(--pi-spacing-large);
-              }
-            }
-          }
-        }
-      }
-    }
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          .pi-saas-header {
-            transition: var(--pi-animation);
-            .pi-saas-header-content {
-              // Left
-              &.pi-saas-header-content__left {
-                width: 45%;
-              }
-              // Right
-              &.pi-saas-header-content__right {
-                justify-content: flex-end;
-                width: 55%;
-                .pi-avatar {
-                  padding: 0.375rem;
-
-                  &:hover,
-                  &.is-active {
-                    transform: scale(1.075);
-                  }
-                }
-              }
-            }
-          }
-          // Aside is open
-          &.aside-is-open {
-            .pi-saas-header {
-              width: calc(
-                100% - var(--pi-width-aside) - var(--pi-spacing-x-large)
-              );
-            }
-          }
-          // Aside is closed
-          &.aside-is-closed {
-            .pi-saas-header {
-              width: 100%;
-            }
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-saas-header {
-      .pi-saas-header-content {
-        // Left
-        &.pi-saas-header-content__left {
-          height: var(--pi-height-header);
-          padding-top: var(--pi-spacing-small);
-        }
-        // Right
-        &.pi-saas-header-content__right {
-          height: var(--pi-height-header);
-          padding-top: var(--pi-spacing-medium);
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/_pi-main.scss

@@ -1,164 +0,0 @@
-.pi-shell__deale-saas {
-  & > div {
-    width: 100%;
-
-    // NOT Is fullscreen
-    &:not(.is-fullscreen) {
-      & > section {
-        position: fixed;
-      }
-    }
-    // Is fullscreen
-    &.is-fullscreen {
-      & > section {
-        left: 0;
-        width: 100%;
-      }
-      .pi-saas-header,
-      .pi-saas-navbar {
-        display: none;
-      }
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet S
-  &:not(.is-desktop) {
-    // Tablet L
-    @media screen and (max-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          & > section {
-            width: 100%;
-            padding: 0;
-          }
-          // Footer logo
-          & > .pi-headline {
-            display: none;
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    // Tablet L
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          & > section {
-            height: calc(
-              100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-            );
-          }
-          // Not is fullscreen
-          &:not(.is-fullscreen) {
-            & > section {
-              left: calc(
-                var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
-                  var(--pi-spacing-x-large)
-              );
-              width: calc(
-                100% - var(--pi-width-navbar-collapsed) - var(
-                    --pi-spacing-x-large
-                  ) - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Tablet L & Desktop
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-saas {
-        & > div {
-          height: 100vh;
-          width: 100%;
-          overflow-x: hidden;
-          overflow-y: auto;
-          // Not is fullscreen
-          &:not(.is-fullscreen) {
-            // Layout container
-            & > section {
-              top: var(--pi-spacing-x-large);
-              & > *:nth-child(1) {
-                padding-right: var(--pi-spacing-x-large);
-              }
-            }
-          }
-
-          // Aside is open
-          &.aside-is-open {
-            & > .pi-headline {
-              transform: var(--pi-animation);
-              transform: translateX(0);
-            }
-          }
-          // Aside is closed
-          &.aside-is-closed {
-            & > .pi-headline {
-              transform: var(--pi-animation);
-              transform: translateX(
-                calc(var(--pi-width-aside) + var(--pi-spacing-x-large))
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-shell__deale-saas {
-      & > div {
-        // Not is fullscreen
-        &:not(.is-fullscreen) {
-          // Layout container
-          & > section {
-            height: calc(
-              100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-            );
-            transition: var(--pi-animation);
-            & > *:nth-child(1) {
-              padding-right: var(--pi-spacing-x-large);
-            }
-          }
-          // Navbar is expanded
-          &.navbar-is-expanded {
-            & > section {
-              left: calc(
-                var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
-                  var(--pi-spacing-x-large)
-              );
-
-              width: calc(
-                100% - var(--pi-width-navbar-expanded) - var(
-                    --pi-spacing-x-large
-                  ) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
-              );
-            }
-          }
-          // Navbar is collapsed
-          &.navbar-is-collapsed {
-            & > section {
-              left: calc(
-                var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
-                  var(--pi-spacing-x-large)
-              );
-              width: calc(
-                100% - var(--pi-width-navbar-collapsed) - var(
-                    --pi-spacing-x-large
-                  ) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
-              );
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/_pi-menu.scss

@@ -1,653 +0,0 @@
-@mixin parentMenuEntryAppearance($justify-content, $height) {
-  .pi-saas-navbar {
-    .pi-menu-event-item {
-      display: flex;
-      align-items: center;
-      justify-content: $justify-content;
-      gap: var(--pi-spacing-medium);
-      width: -webkit-fill-available;
-      height: $height;
-    }
-  }
-}
-
-@mixin parentMenuItemExpanded($height: var(--pi-size-menu-item-expanded)) {
-  .pi-shell__deale-saas {
-    & > div {
-      &.navbar-is-expanded {
-        // Navbar
-        .pi-saas-navbar {
-          .pi-menu {
-            & > nav {
-              & > .pi-menu-event-item {
-                .pi-menu-entry {
-                  &.pi-menu-entry__context--parent-menu {
-                    height: var(--pi-size-menu-item-expanded);
-                    width: calc(
-                      100% - var(--pi-spacing-large) - var(--pi-spacing-large)
-                    );
-                    margin-left: var(--pi-spacing-large);
-                    padding: 0 var(--pi-spacing-large);
-                    border-radius: var(--pi-border-radius-medium);
-                    transition: var(--pi-animation);
-                    article {
-                      transition: var(--pi-animation);
-                      transform: scale(1);
-                      transition-delay: 0.1s;
-                      visibility: visible;
-                      opacity: 1;
-                    }
-                    label {
-                      line-height: 1.25;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin parentMenuItemCollapsed(
-  $size: var(--pi-spacing-xxxx-large),
-  $radius: medium,
-  $scale: 1
-) {
-  .pi-saas-navbar {
-    .pi-menu {
-      .pi-menu-entry {
-        &.pi-menu-entry__context--parent-menu {
-          justify-content: center;
-          height: $size;
-          width: $size;
-          border-radius: var(--pi-border-radius-#{$radius});
-          transition: var(--pi-animation);
-
-          article {
-            position: absolute;
-            transform: scale(0.5);
-            visibility: hidden;
-            opacity: 0;
-          }
-        }
-        // Not disabled hover and active effects
-        &:not(.is-disabled) {
-          &.pi-menu-entry__context--parent-menu {
-            &:hover {
-              &:not(.is-active) {
-                .mat-icon {
-                  transform: scale(#{$scale});
-                }
-              }
-            }
-            &.is-active {
-              background-color: var(--pi-color-primary-50);
-              color: var(--pi-color-primary-900);
-              .mat-icon {
-                transform: scale(#{$scale});
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin parentMenuEntryColor {
-  .pi-menu-event-item {
-    &.is-selected {
-      .pi-menu-entry {
-        &:not(.is-disabled) {
-          &:not([class*='pi-menu-entry__context--aside-menu']):not(
-              [class*='children']
-            ) {
-            background-color: var(--pi-color-primary-25);
-            color: var(--pi-color-primary);
-            .mat-icon {
-              color: var(--pi-color-primary);
-            }
-          }
-        }
-      }
-    }
-    &.is-disabled {
-      opacity: 0.3;
-    }
-    &:not(.is-disabled) {
-      .pi-menu-entry {
-        &.pi-menu-entry__context--parent-menu,
-        &.pi-menu-entry__context--children-submenu {
-          &.pi-text-viewer {
-            &.pi-text-viewer__icon-color--black {
-              &:not(.pi-menu-entry__context--children-menu):not(
-                  .pi-menu-entry__context--aside-menu
-                ) {
-                &:not(.is-active) {
-                  color: var(--pi-color-grey);
-                  .mat-icon {
-                    color: var(--pi-color-grey);
-                  }
-                }
-                &:hover {
-                  &:not(.is-active):not(.is-disabled) {
-                    background-color: var(--pi-color-primary-50);
-
-                    span,
-                    label,
-                    .mat-icon {
-                      color: var(--pi-color-primary);
-                    }
-                  }
-                }
-                &:not(.is-disabled) {
-                  &.is-active {
-                    max-width: -webkit-fill-available;
-                    background-color: var(--pi-color-primary-50);
-                    color: var(--pi-color-primary-900);
-                    .mat-icon {
-                      color: var(--pi-color-primary-900);
-                    }
-                  }
-                }
-
-                &:hover {
-                  &:not(.is-active):not(.is-disabled) {
-                    background-color: var(--pi-color-primary-50);
-                    label,
-                    .mat-icon {
-                      color: var(--pi-color-primary);
-                    }
-                  }
-                }
-              }
-            }
-          }
-          &.is-disabled {
-            opacity: 0.3;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin childrenMenuEntryAppearance {
-  .pi-menu-entry {
-    &.pi-menu-entry__context--children-menu {
-      max-width: -webkit-fill-available;
-      padding-left: var(--pi-spacing-xx-small);
-      font: {
-        size: var(--pi-font-size-x-small);
-      }
-    }
-    &.pi-menu-entry__context--children-submenu {
-      height: var(--pi-size-menu-item-expanded);
-      padding: var(--pi-spacing-medium);
-      border-radius: var(--pi-border-radius-medium);
-      transition: var(--pi-animation);
-      article {
-        transition: var(--pi-animation);
-        transform: scale(1);
-        transition-delay: 0.1s;
-        visibility: visible;
-        opacity: 1;
-      }
-      label {
-        line-height: 1.25;
-      }
-    }
-  }
-}
-
-@mixin childrenMenuCollapsed {
-  position: fixed;
-  display: none;
-  visibility: hidden;
-  opacity: 0;
-  transition: var(--pi-animation-slow);
-}
-
-@mixin childrenMenuPosition($left) {
-  // Menu item
-  transform: translate($left, var(--pi-spacing-xxx-large));
-}
-
-@mixin childrenMenuAppearance($width: -webkit-fill-available) {
-  .pi-saas-navbar {
-    .pi-menu__children {
-      position: absolute;
-      flex-direction: column;
-      gap: var(--pi-spacing-x-small);
-      width: $width;
-      padding-top: var(--pi-spacing-x-large);
-      padding-right: var(--pi-spacing-xxxx-small);
-      padding-bottom: var(--pi-spacing-x-large);
-      border-radius: var(--pi-border-radius-large);
-      background-color: var(--pi-color-white);
-      border: 0.5px solid var(--pi-color-grey-50);
-      box-shadow: var(--pi-box-shadow-double);
-
-      // Submenu entries
-      & > *:nth-child(n + 1) {
-        & > *:nth-child(n + 1) {
-          &:not(.pi-menu-entry__context--children-menu) {
-            padding-left: var(--pi-spacing-x-large);
-            padding-right: var(--pi-spacing-x-large);
-          }
-        }
-      }
-
-      .pi-menu-event-children {
-        &.pi-menu-children__entries {
-          display: flex;
-          flex-direction: column;
-          gap: var(--pi-spacing-xxx-small);
-
-          & > section {
-            max-height: 25vh;
-
-            overflow-y: auto;
-            &::-webkit-scrollbar {
-              width: 0.1875rem;
-            }
-            &::-webkit-scrollbar-thumb {
-              background-color: var(--pi-color-grey-50);
-
-              &:hover {
-                background-color: var(--pi-color-grey-75);
-              }
-            }
-          }
-        }
-      }
-      .pi-submenu-children__aside-entries {
-        margin-top: var(--pi-spacing-x-small);
-      }
-      .pi-menu-entry {
-        width: -webkit-fill-available;
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        transition: var(--pi-animation);
-        &:hover {
-          cursor: pointer;
-        }
-        &.pi-menu-entry__context--aside-menu {
-          button {
-            width: -webkit-fill-available;
-          }
-        }
-        &.pi-menu-entry__context--children-menu {
-          padding-bottom: var(--pi-spacing-xxx-small);
-          border-bottom: 1px solid;
-          margin-left: calc(
-            var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)
-          );
-          margin-right: calc(
-            var(--pi-spacing-x-large) + var(--pi-spacing-xxxx-small)
-          );
-
-          &:nth-of-type(1) {
-            border-color: var(--pi-color-grey-100);
-          }
-          &:nth-of-type(2) {
-            border-color: var(--pi-color-primary-75);
-          }
-          &:nth-of-type(3) {
-            border-color: var(--pi-color-accent-75);
-          }
-          &:nth-of-type(n + 2) {
-            margin-top: var(--pi-spacing-x-large);
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin childrenMenuVisibility {
-  & > .pi-menu-event-item {
-    &.has-children {
-      &.is-selected {
-        // Child menu visible
-        .pi-menu__children {
-          &.is-visible {
-            opacity: 1;
-            visibility: visible;
-          }
-
-          &:not(.is-visible) {
-            display: none;
-          }
-        }
-      }
-      &:not(.is-selected) {
-        // Child menu hidden
-        .pi-menu__children {
-          &:not(.is-visible) {
-            display: none;
-            opacity: 0;
-            visibility: hidden;
-          }
-        }
-      }
-    }
-  }
-}
-
-@mixin smallDeviceChildrenMenuPosition {
-  .pi-saas-navbar {
-    .pi-menu {
-      &.pi-menu__children {
-        left: 0;
-        bottom: calc(
-          env(safe-area-inset-bottom) + var(--pi-spacing-medium) +
-            var(--pi-height-footer)
-        );
-        z-index: 99;
-      }
-      & > nav {
-        @include childrenMenuVisibility;
-      }
-    }
-  }
-}
-
-@mixin largeDeviceChildrenMenuPosition {
-  .pi-shell__deale-saas {
-    & > div {
-      .pi-saas-navbar {
-        .pi-menu {
-          &.pi-menu__parent {
-            width: -webkit-fill-available;
-          }
-          & > nav {
-            display: flex;
-            flex-direction: column;
-
-            // Hide - show child menu
-            @include childrenMenuVisibility;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Menu in navbar
-.pi-saas-navbar {
-  @include parentMenuEntryColor;
-  @include childrenMenuAppearance;
-  @include childrenMenuEntryAppearance;
-}
-
-html {
-  &.is-mobile {
-    @include smallDeviceChildrenMenuPosition;
-    .pi-shell__deale-saas {
-      & > div {
-        @include parentMenuItemCollapsed;
-      }
-    }
-  }
-
-  &.is-tablet {
-    &.is-tablet__small {
-      @include smallDeviceChildrenMenuPosition;
-      .pi-shell__deale-saas {
-        & > div {
-          @include parentMenuItemCollapsed(3.375rem, medium, 1.1);
-        }
-      }
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small Device
-    @media screen and (max-width: 62rem) {
-      @include childrenMenuAppearance;
-      .pi-shell__deale-saas {
-        & > div {
-          @include parentMenuEntryAppearance(center, 3.25rem);
-          .pi-saas-navbar {
-            .pi-menu-entry {
-              &.pi-menu-entry__context--parent-menu {
-                gap: 0;
-                transition: var(--pi-animation-slow);
-
-                &:not(.is-active) {
-                  .mat-icon {
-                    color: var(--pi-color-black);
-                  }
-                }
-                article {
-                  display: none;
-                }
-              }
-            }
-
-            .pi-menu {
-              & > nav {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                height: var(--pi-height-footer);
-                padding-left: var(--pi-spacing-xx-small);
-                padding-right: var(--pi-spacing-xx-small);
-              }
-            }
-            .pi-chevron-button {
-              display: none;
-            }
-          }
-        }
-      }
-      // Menu in layout
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    &.is-tablet__large {
-      .pi-shell__deale-saas {
-        & > div {
-          @include parentMenuEntryAppearance(
-            center,
-            var(--pi-size-menu-item-collapsed)
-          );
-          @include parentMenuItemCollapsed(
-            var(--pi-size-menu-item-collapsed),
-            large,
-            1.2
-          );
-          .pi-saas-navbar {
-            // Tablet L
-            .pi-menu {
-              & > nav {
-                gap: var(--pi-spacing-xxx-small);
-                & > .pi-menu-event-item {
-                  .pi-menu-entry {
-                    & > span {
-                      @include childrenMenuCollapsed;
-                    }
-                  }
-                  // Child menu
-                  &.has-children {
-                    .pi-menu__children {
-                      @include childrenMenuPosition(
-                        calc(
-                          var(--pi-width-navbar-collapsed) +
-                            var(--pi-spacing-x-large) +
-                            var(--pi-spacing-x-large) +
-                            var(--pi-spacing-x-large) +
-                            var(--pi-spacing-x-large) +
-                            var(--pi-spacing-xxx-small)
-                        )
-                      );
-                    }
-                    // Is selected and children is visible
-                    &.is-selected {
-                      &:not(.is-disabled) {
-                        .pi-menu-entry {
-                          &:not(.is-active) {
-                            .mat-icon {
-                              color: var(--pi-color-primary);
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Tablet L & Desktop
-    @media screen and (min-width: 62rem) {
-      @include childrenMenuAppearance(var(--pi-width-children-menu-expanded));
-      @include largeDeviceChildrenMenuPosition;
-      // Menu in layout
-      .pi-layout {
-        .pi-menu {
-          &.pi-menu__parent {
-            & > nav {
-              width: calc(
-                var(--pi-width-navbar-expanded) - var(
-                    --pi-spacing-xxxx-large
-                  ) - var(--pi-spacing-xxxx-small)
-              );
-            }
-            .pi-menu-event-item {
-              & > *:nth-child(1) {
-                width: 100%;
-              }
-              &.has-children {
-                padding-left: var(--pi-spacing-large);
-                padding-right: var(--pi-spacing-large);
-                .pi-menu__children {
-                  transform: translate(-1.25rem, -1rem);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Desktop
-  &.is-desktop {
-    @include parentMenuItemExpanded;
-    .pi-shell__deale-saas {
-      & > div {
-        // Cursor styles
-        .pi-menu-event-item {
-          &:not(.is-active) {
-            &:hover {
-              .pi-menu-entry {
-                &:not(.is-disabled) {
-                  cursor: pointer;
-                  label {
-                    &:hover {
-                      &:not(.is-disabled) {
-                        cursor: pointer;
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-
-          .pi-menu-entry {
-            &.pi-menu-entry__context--children-submenu {
-              &:hover {
-                &:not(.is-active):not(.is-disabled) {
-                  cursor: pointer;
-                }
-              }
-              article,
-              span,
-              label {
-                &:hover {
-                  cursor: pointer;
-                }
-              }
-            }
-          }
-        }
-        // Expanded
-        &.navbar-is-expanded {
-          @include parentMenuEntryAppearance(
-            flex-start,
-            var(--pi-size-menu-item-expanded)
-          );
-          // Navbar
-          .pi-saas-navbar {
-            .pi-menu {
-              & > nav {
-                gap: var(--pi-spacing-x-small);
-                & > .pi-menu-event-item {
-                  // Child menu
-                  &.has-children {
-                    .pi-menu__children {
-                      @include childrenMenuPosition(
-                        calc(
-                          var(--pi-width-navbar-expanded) +
-                            var(--pi-spacing-xx-large)
-                        )
-                      );
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        // Collapsed
-        &.navbar-is-collapsed {
-          @include parentMenuEntryAppearance(
-            center,
-            var(--pi-size-menu-item-collapsed)
-          );
-          @include parentMenuItemCollapsed(
-            var(--pi-size-menu-item-collapsed),
-            large,
-            1.2
-          );
-          .pi-saas-navbar {
-            .pi-menu {
-              & > nav {
-                gap: var(--pi-spacing-xxx-small);
-                & > .pi-menu-event-item {
-                  // Child menu
-                  &.has-children {
-                    .pi-menu__children {
-                      @include childrenMenuPosition(
-                        calc(
-                          var(--pi-width-navbar-collapsed) +
-                            var(--pi-spacing-xx-large) +
-                            var(--pi-spacing-xx-large) +
-                            var(--pi-spacing-large) + var(--pi-spacing-x-large)
-                        )
-                      );
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/_pi-navbar.scss

@@ -1,286 +0,0 @@
-.pi-saas-navbar {
-  position: fixed;
-  z-index: 99;
-  background-color: var(--pi-color-white);
-  border: 1px solid var(--pi-color-white-900);
-  border-radius: var(--pi-border-radius-large);
-  .pi-headline {
-    margin: auto;
-  }
-  .pi-saas-navbar-content {
-    &.pi-saas-navbar-content__top {
-      .pi-headline {
-        width: calc(100% - var(--pi-spacing-x-large));
-        padding: var(--pi-spacing-xx-large) 0 0 var(--pi-spacing-x-large);
-      }
-      .pi-chevron-button {
-        width: var(--pi-spacing-x-large);
-        margin-bottom: 1.125rem;
-        padding: 0.1375rem;
-      }
-    }
-  }
-  .pi-chevron-button {
-    position: relative;
-    left: var(--pi-spacing-small);
-    border-radius: 50%;
-    box-shadow: var(--pi-box-shadow);
-  }
-}
-
-@mixin multispaceNavbarGridLargeDevice {
-  .pi-saas-navbar-content {
-    &.pi-saas-navbar-content__center {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--pi-spacing-xxx-small);
-
-      .pi-divider {
-        width: -webkit-fill-available;
-        max-width: calc(100% - var(--pi-spacing-xxxx-large));
-      }
-    }
-  }
-}
-
-@mixin multispaceNavbarGridSmallDevice {
-  // Advisor Profile Multispace
-  .is-advisor {
-    .pi-saas-navbar-content {
-      &.pi-saas-navbar-content__center {
-        display: flex;
-        flex-direction: row-reverse;
-        align-items: center;
-        .pi-menu {
-          &.pi-menu__parent {
-            &:first-of-type {
-              width: 20%;
-              & > nav {
-                padding-left: unset;
-                .pi-menu-event-item {
-                  &.has-children {
-                    border-left: 1px solid var(--pi-color-grey-75);
-                  }
-                }
-              }
-            }
-            &:last-of-type {
-              width: 80%;
-              & > nav {
-                padding-right: unset;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &.is-mobile {
-    @include multispaceNavbarGridSmallDevice;
-    .pi-shell__deale-saas {
-      & > div {
-        .pi-saas-navbar {
-          left: var(--pi-spacing-medium);
-          bottom: var(--pi-spacing-medium);
-          width: calc(
-            100% - var(--pi-spacing-medium) - var(--pi-spacing-medium)
-          );
-        }
-      }
-    }
-  }
-
-  &:not(.is-desktop) {
-    .pi-shell__deale-saas {
-      & > div {
-        .pi-saas-navbar {
-          // Mobile & Tablet S
-          @media screen and (max-width: 62rem) {
-            position: fixed;
-            height: var(--pi-height-footer);
-            box-shadow: var(--pi-box-shadow-panel);
-            .pi-saas-navbar-content {
-              &.pi-saas-navbar-content__top,
-              &.pi-saas-navbar-content__bottom {
-                display: none;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    // Tablet S
-    &.is-tablet__small {
-      @include multispaceNavbarGridSmallDevice;
-      .pi-shell__deale-saas {
-        & > div {
-          .pi-saas-navbar {
-            left: var(--pi-spacing-x-large);
-            bottom: var(--pi-spacing-x-large);
-            width: calc(
-              100% - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-            );
-          }
-        }
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      .pi-shell__deale-saas {
-        & > div {
-          .pi-saas-navbar {
-            width: var(--pi-width-navbar-collapsed);
-            box-shadow: var(--pi-box-shadow-panel);
-            .pi-headline {
-              height: 5.25rem;
-              max-width: 3.35rem;
-              padding: 1.6rem var(--pi-spacing-small);
-            }
-            .pi-chevron-button {
-              display: none;
-            }
-            .pi-saas-navbar-content {
-              &.pi-saas-navbar-content__top {
-                & > .pi-chip {
-                  transform: scale(0.8);
-                  img {
-                    transform: scale(0.8);
-                  }
-                }
-              }
-
-              &.pi-saas-navbar-content__bottom {
-                padding: var(--pi-spacing-x-large) 0;
-                margin: 0 auto;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Tablet L & Desktop
-    @media screen and (min-width: 62rem) {
-      @include multispaceNavbarGridLargeDevice;
-      .pi-shell__deale-saas {
-        & > div {
-          &:not(.is-fullscreen) {
-            .pi-saas-navbar {
-              top: var(--pi-spacing-x-large);
-              left: var(--pi-spacing-x-large);
-              display: flex;
-              flex-direction: column;
-              justify-content: space-between;
-              height: calc(
-                100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
-              );
-              .pi-chip {
-                margin: auto;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Desktop
-    &.is-desktop {
-      .pi-shell__deale-saas {
-        & > div {
-          .pi-saas-navbar {
-            width: var(--pi-width-navbar-expanded);
-            box-shadow: var(--pi-box-shadow-panel);
-            transition: var(--pi-animation);
-            .pi-saas-navbar-content {
-              &.pi-saas-navbar-content__top {
-                & > header {
-                  display: flex;
-                  align-items: flex-end;
-                }
-                & > .pi-chip {
-                  margin: auto;
-                  transform: scale(0.9);
-                  img {
-                    transform: scale(0.9);
-                  }
-                }
-              }
-              &.pi-saas-navbar-content__bottom {
-                padding: var(--pi-spacing-x-large) 0;
-                text-align: center;
-              }
-            }
-
-            .pi-headline {
-              transition: var(--pi-animation);
-            }
-          }
-          // Expanded
-          &.navbar-is-expanded {
-            .pi-saas-navbar {
-              width: var(--pi-width-navbar-expanded);
-
-              .pi-headline {
-                max-width: 8rem;
-                height: 5rem;
-                opacity: 0;
-                &.pi-logo {
-                  transition: var(--pi-animation);
-                  transition-duration: 0.35s;
-                  transition-delay: 0.15s;
-                  opacity: 1;
-                }
-                & > .pi-chip {
-                  transform: scale(0.9);
-                }
-              }
-              .pi-saas-navbar-content {
-                &.pi-saas-navbar-content__center {
-                  padding: var(--pi-spacing-x-large) 0;
-                }
-              }
-            }
-          }
-          // Collapsed
-          &.navbar-is-collapsed {
-            .pi-saas-navbar {
-              width: var(--pi-width-navbar-collapsed);
-              .pi-headline {
-                max-width: 3.35rem;
-                height: 5.25rem;
-                padding: 1.25rem 0 0 var(--pi-spacing-x-large);
-                opacity: 0;
-                transition: var(--pi-animation);
-
-                &.pi-logo-simple {
-                  transition: var(--pi-animation);
-                  transition-duration: 0.35s;
-                  transition-delay: 0.15s;
-                  opacity: 1;
-                }
-              }
-              .pi-saas-navbar-content {
-                &.pi-saas-navbar-content__top {
-                  & > .pi-chip {
-                    transform: scale(0.8);
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/shell/index.scss

@@ -1,5 +0,0 @@
-@forward 'pi-aside';
-@forward 'pi-header';
-@forward 'pi-main';
-@forward 'pi-menu';
-@forward 'pi-navbar';

libs/ui/src/lib/styles/deale-saas/theming/_pi-user-type-theming.scss

@@ -1,293 +0,0 @@
-@mixin asideColor($color) {
-  .pi-shell__deale-saas {
-    & > div {
-      .pi-saas-aside {
-        // Aside theme
-        &.pi-saas-aside__theme {
-          // Not custom
-          &:not(.is-custom) {
-            background-color: var(--pi-color-#{$color}-50);
-            .pi-close-button {
-              &:hover {
-                &::before,
-                &::after {
-                  background-color: var(--pi-color-#{$color});
-                }
-              }
-            }
-            // Dynamic menu
-            .pi-dynamic-menu {
-              & > *:nth-child(2) {
-                &.pi-wrapper__flex {
-                  &::-webkit-scrollbar-thumb {
-                    background-color: var(--pi-color-#{$color}-100);
-
-                    &:hover {
-                      background-color: var(--pi-color-#{$color}-200);
-                    }
-                  }
-                }
-              }
-              & > *:nth-child(3) {
-                border-top-width: 1px;
-                border-top-style: solid;
-                border-top-color: var(--pi-color-#{$color}-100);
-              }
-              .pi-list-item {
-                transition: var(--pi-animation);
-                &.is-clickable {
-                  &:hover {
-                    &.pi-color__primary {
-                      &:not(.is-disabled):not(.is-active) {
-                        background-color: var(--pi-color-#{$color}-75);
-                      }
-                    }
-                  }
-                }
-                &.pi-color__primary {
-                  &.is-active {
-                    background-color: var(--pi-color-#{$color}-75);
-                  }
-                }
-                .pi-chip {
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        border-width: 1px;
-                        border-style: solid;
-                        border-color: var(--pi-color-#{$color});
-                        color: var(--pi-color-#{$color});
-
-                        label {
-                          color: var(--pi-color-#{$color});
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-              // User profile
-              &.pi-saas-admin-user-profile {
-                .pi-chip {
-                  // Profile
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--fill {
-                        &:not(.pi-chip__single-icon) {
-                          background-color: var(--pi-color-#{$color});
-                          border-width: 1px;
-                          border-style: solid;
-                          border-color: var(--pi-color-#{$color});
-                        }
-                      }
-                    }
-                  }
-                  // Subscription
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        border-width: 1px;
-                        border-style: solid;
-                        border-color: var(--pi-color-#{$color});
-                        color: var(--pi-color-#{$color});
-                      }
-                    }
-                  }
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        label {
-                          color: var(--pi-color-#{$color});
-                        }
-                      }
-                    }
-                  }
-                }
-                .pi-icon {
-                  &.is-stroked {
-                    &.pi-icon__appearance--fill {
-                      &.pi-icon__x-large {
-                        border-color: var(--pi-color-#{$color}-200);
-                        background-color: var(--pi-color-#{$color}-75);
-                        .mat-icon {
-                          color: var(--pi-color-#{$color});
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-          // Custom
-          &.is-custom {
-            background-color: var(--pi-color-primary-50);
-            .pi-close-button {
-              &:hover {
-                &::before,
-                &::after {
-                  background-color: var(--pi-color-primary);
-                }
-              }
-            }
-            // Dynamic menu
-            .pi-dynamic-menu {
-              & > *:nth-child(2) {
-                &.pi-wrapper__flex {
-                  &::-webkit-scrollbar-thumb {
-                    background-color: var(--pi-color-primary-100);
-
-                    &:hover {
-                      background-color: var(--pi-color-primary-200);
-                    }
-                  }
-                }
-              }
-              & > *:nth-child(3) {
-                border-top-width: 1px;
-                border-top-style: solid;
-                border-top-color: var(--pi-color-primary-100);
-              }
-              .pi-list-item {
-                transition: var(--pi-animation);
-                &.is-clickable {
-                  &:hover {
-                    &.pi-color__primary {
-                      &:not(.is-disabled):not(.is-active) {
-                        background-color: var(--pi-color-primary-100);
-                      }
-                    }
-                  }
-                }
-                &.pi-color__primary {
-                  &.is-active {
-                    background-color: var(--pi-color-primary-100);
-                  }
-                }
-                .pi-chip {
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        border-width: 1px;
-                        border-style: solid;
-                        border-color: var(--pi-color-primary);
-                        color: var(--pi-color-primary);
-
-                        label {
-                          color: var(--pi-color-primary);
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-              // User profile
-              &.pi-saas-admin-user-profile {
-                .pi-chip {
-                  // Profile
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--fill {
-                        &:not(.pi-chip__single-icon) {
-                          background-color: var(--pi-color-primary);
-                          border-width: 1px;
-                          border-style: solid;
-                          border-color: var(--pi-color-primary);
-                        }
-                      }
-                    }
-                  }
-                  // Subscription
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        border-width: 1px;
-                        border-style: solid;
-                        border-color: var(--pi-color-primary);
-                        color: var(--pi-color-primary);
-                      }
-                    }
-                  }
-                  &:not(.pi-status) {
-                    &.pi-color__primary {
-                      &.pi-chip__appearance--outline {
-                        label {
-                          color: var(--pi-color-primary);
-                        }
-                      }
-                    }
-                  }
-                }
-                .pi-icon {
-                  &.is-stroked {
-                    &.pi-icon__appearance--fill {
-                      &.pi-icon__x-large {
-                        border-color: var(--pi-color-primary-200);
-                        background-color: var(--pi-color-primary-200-rgba);
-                        .mat-icon {
-                          color: var(--pi-color-primary);
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-        // Aside white
-        &.pi-saas-aside__white {
-          // Dynamic menu
-          .pi-dynamic-menu {
-            & > *:nth-child(2) {
-              &.pi-wrapper__flex {
-                &::-webkit-scrollbar-thumb {
-                  background-color: var(--pi-color-grey-25);
-
-                  &:hover {
-                    background-color: var(--pi-color-grey-75);
-                  }
-                }
-              }
-            }
-            & > *:nth-child(3) {
-              border-top-width: 1px;
-              border-top-style: solid;
-              border-top-color: var(--pi-color-white-900);
-            }
-          }
-        }
-      }
-
-      &:not(.is-fullscreen) {
-        // Large device
-        @media screen and (min-width: 62rem) {
-          .pi-saas-aside {
-            &.pi-saas-aside__theme {
-              border-width: 1px;
-              border-style: solid;
-              &:not(.is-custom) {
-                border-color: var(--pi-color-#{$color}-100);
-              }
-              &.is-custom {
-                border-color: var(--pi-color-primary-100);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.is-company {
-  @include asideColor(primary);
-}
-
-.is-investor {
-  @include asideColor(accent);
-}
-
-.is-advisor {
-  @include asideColor(highlighted);
-}

libs/ui/src/lib/styles/deale-saas/theming/index.scss

@@ -1 +0,0 @@
-@forward 'pi-user-type-theming';

libs/ui/src/lib/styles/deale-saas/wrappers/_pi-header-wrapper.scss

@@ -1,47 +0,0 @@
-.pi-wrapper {
-  // Header Wrapper
-  &.pi-wrapper__header {
-    // Center
-    &.pi-wrapper__align-items--center {
-      .pi-header-wrapper-content {
-        align-items: center;
-      }
-    }
-  }
-}
-
-.pi-layout__07-list {
-  .pi-header-wrapper-content {
-    &.pi-header-wrapper-content__left {
-      width: 100%;
-    }
-    &.pi-header-wrapper-content__right {
-      justify-content: flex-end;
-      display: flex;
-      & > aside {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        gap: var(--pi-spacing-xx-small);
-
-        .pi-select {
-          &.pi-select__picked-option-type--button {
-            .pi-select-picked-option {
-              background-color: var(--pi-color-white);
-            }
-            &:not(:hover) {
-              .pi-select-picked-option {
-                box-shadow: var(--pi-box-shadow);
-              }
-            }
-          }
-        }
-        .pi-toggle-button {
-          & > button {
-            border-radius: var(--pi-border-radius-large);
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-saas/wrappers/_pi-wrapper.scss

@@ -1,42 +0,0 @@
-@mixin dealeSaaSWrapperMaxWidth($max-width: 75%) {
-  .pi-shell__deale-saas {
-    .pi-wrapper {
-      // Max width
-      &.pi-wrapper__full-width,
-      &.pi-wrapper__full-width-centered {
-        max-width: $max-width;
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-wrapper {
-      div {
-        // Fixed wrapper
-        &.is-fixed {
-          position: fixed;
-          z-index: 99;
-          left: 0;
-          bottom: calc(var(--pi-height-footer) + env(safe-area-inset-bottom));
-          display: flex;
-          justify-content: flex-end;
-          align-items: center;
-          width: 100%;
-          padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large);
-          right: 0;
-          button {
-            min-width: 50%;
-            box-shadow: var(--pi-box-shadow);
-          }
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    @include dealeSaaSWrapperMaxWidth;
-  }
-}

libs/ui/src/lib/styles/deale-saas/wrappers/index.scss

@@ -1,2 +0,0 @@
-@forward 'pi-header-wrapper';
-@forward 'pi-wrapper';

libs/ui/src/lib/styles/deale-website/components/_pi-text.scss

@@ -1,39 +0,0 @@
-h1 {
-  line-height: 110%;
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-website-text {
-      // xxxxl - 2.875rem - 46px
-      &.pi-website-text__size--xxxxl {
-        font: {
-          size: 2.875rem;
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    .pi-website-text {
-      // xxxxl - 62px
-      &.pi-website-text__size--xxxxl {
-        font: {
-          size: 3.875rem;
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-website-text {
-      // xxxxl - 4.5rem - 72px
-      &.pi-website-text__size--xxxxl {
-        font: {
-          size: var(--pi-public-font-size-xxx-large);
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/components/index.scss

@@ -1 +0,0 @@
-@forward 'pi-text';

libs/ui/src/lib/styles/deale-website/index.scss

@@ -1,5 +0,0 @@
-@use 'components' as *;
-@use 'layouts' as *;
-@use 'screens' as *;
-@use 'shell' as *;
-@use 'wrappers' as *;

libs/ui/src/lib/styles/deale-website/layouts/_pi-02-full-width-layout.scss

@@ -1,106 +0,0 @@
-.pi-layout {
-  &.pi-layout__02-full-width {
-    &:not(.pi-layout__02a-full-width--auto) {
-      & > *:nth-child(1) {
-        &
-          > *:nth-child(n + 1):not(
-            :is(h1, h2, h3, h4, h5, p, i, figcaption, small)
-          ) {
-          margin: 0 auto;
-        }
-        & > *:nth-child(n + 1):is(h1, h2, h3, h4, h5, p, i, figcaption, small) {
-          margin: var(--pi-spacing-medium) auto;
-        }
-      }
-    }
-  }
-}
-@mixin layoutBasicPages(
-  $padding-top-1: calc(
-      var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)
-    ),
-  $padding-top-2: var(--pi-spacing-xxx-large)
-) {
-  .pi-shell__deale-website {
-    .pi-container-layout {
-      &.pi-layout {
-        &.pi-layout__02-full-width {
-          & > *:nth-child(1) {
-            padding-top: $padding-top-1;
-          }
-          & > *:nth-child(2) {
-            padding-top: $padding-top-2;
-            padding-bottom: $padding-top-2;
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  &.is-mobile {
-    @include layoutBasicPages;
-    .pi-layout {
-      &.pi-layout__02-full-width {
-        padding: var(--pi-spacing-x-large);
-      }
-    }
-  }
-  &.is-tablet {
-    @include layoutBasicPages(
-      calc(
-        var(--pi-public-height-header-mobile) + var(--pi-spacing-xxxx-large)
-      ),
-      var(--pi-spacing-xxxx-large)
-    );
-    .pi-layout {
-      &.pi-layout__02-full-width {
-        padding: var(--pi-spacing-xx-large);
-      }
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    .pi-layout {
-      &.pi-layout__02-full-width {
-        max-width: 100%;
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    @include layoutBasicPages(
-      calc(
-        var(--pi-public-height-header-desktop) + var(--pi-spacing-xxxx-large)
-      ),
-      var(--pi-spacing-xxxx-large)
-    );
-    .pi-layout {
-      &.pi-layout__02-full-width {
-        padding: var(--pi-spacing-xxxx-large) var(--pi-spacing-xxxx-large);
-
-        // Desktop M
-        @media screen and (min-width: 90rem) and (max-width: 120rem) {
-          & > *:nth-child(n + 1) {
-            max-width: var(--pi-public-width-container);
-          }
-        }
-        &:not(.pi-container-layout) {
-          // Desktop S
-          @media screen and (min-width: 77.5rem) and (max-width: 90rem) {
-            & > *:nth-child(n + 1) {
-              max-width: 100%;
-            }
-          }
-          // Desktop L
-          @media screen and (min-width: 120rem) {
-            & > *:nth-child(n + 1) {
-              max-width: var(--pi-public-width-container-l);
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-02a-full-width-auto-layout.scss

@@ -1,9 +0,0 @@
-.pi-layout {
-  &.pi-layout__02-full-width {
-    &.pi-layout__02a-full-width--auto {
-      & > *:nth-child(n + 1) {
-        margin: 0 auto;
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-03-vertically-centered-layout.scss

@@ -1,117 +0,0 @@
-@mixin headingsWidth($max-width: 100%) {
-  .pi-container-layout {
-    .pi-layout {
-      &.pi-layout__03-vertically-centered {
-        .pi-text__centered {
-          & > *:nth-child(n + 1) {
-            &:is(h2, h3, h4, h5) {
-              max-width: $max-width;
-              margin: auto;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-//
-
-@mixin thankYouPageHeaderHeight($device: mobile) {
-  .pi-layout {
-    &.pi-layout__03-vertically-centered {
-      &.pi-layout__full {
-        & > .pi-wrapper {
-          &.pi-background-image {
-            min-height: calc(100vh - var(--pi-public-height-header-#{$device}));
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-container-layout {
-  .pi-layout {
-    &.pi-layout__03-vertically-centered {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      background-size: cover;
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    @include headingsWidth;
-    // Small device
-    @media screen and (max-width: 62rem) {
-      @include thankYouPageHeaderHeight;
-    }
-    &:not(.is-desktop__large) {
-      .pi-layout {
-        &.pi-layout__03-vertically-centered {
-          &.pi-layout__02-full-width {
-            &:not(.pi-layout__06-edge-to-edge) {
-              & > *:nth-child(1) {
-                max-width: 100%;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      @include thankYouPageHeaderHeight(desktop);
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-layout {
-      @include headingsWidth(75%);
-      &.pi-layout__03-vertically-centered {
-        &.pi-layout__02-full-width {
-          &:not(.pi-layout__06-edge-to-edge) {
-            max-width: var(--pi-public-width-container-l);
-          }
-
-          &.pi-layout__02a-full-width--auto {
-            margin: auto;
-          }
-        }
-      }
-    }
-    &:not(.is-desktop__large) {
-      .pi-layout {
-        &.pi-layout__03-vertically-centered {
-          & > *:nth-child(1) {
-            max-width: 100%;
-          }
-        }
-      }
-    }
-    &.is-desktop__medium {
-      @include headingsWidth(70%);
-    }
-    &.is-desktop__large {
-      @include headingsWidth(66.66%);
-      .pi-layout {
-        &.pi-layout__03-vertically-centered {
-          &:not(.pi-layout__06-edge-to-edge) {
-            & > *:nth-child(1) {
-              max-width: var(--pi-public-width-container-l);
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-06-edge-to-edge-layout.scss

@@ -1,9 +0,0 @@
-.pi-layout {
-  &.pi-layout__06-edge-to-edge {
-    width: 100%;
-    & > *:nth-child(n + 1) {
-      width: 100%;
-      margin: 0 auto;
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-06b-edge-to-edge-home-users-layout.scss

@@ -1,61 +0,0 @@
-@mixin websiteHomeUserSpacings($max-width) {
-  .pi-layout {
-    &.pi-website-home-user {
-      .pi-list-item-content__left {
-        max-width: $max-width;
-      }
-    }
-  }
-}
-@mixin edgeToEdgeLayoutCarouselBehavior($max-width) {
-  .pi-layout {
-    &.pi-layout__06-edge-to-edge {
-      .pi-carousel {
-        & > main {
-          & > section {
-            max-width: $max-width;
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-layout {
-  &.pi-website-home-user {
-    .pi-carousel {
-      display: block;
-    }
-    .pi-switch-button {
-      margin-top: var(--pi-spacing-xxx-large);
-    }
-    &:not(.pi-website-home-user__advisor) {
-      .pi-carousel {
-        margin-top: var(--pi-spacing-xxx-large);
-      }
-    }
-  }
-}
-
-html {
-  // Desktop
-  &.is-desktop {
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include edgeToEdgeLayoutCarouselBehavior(
-        var(--pi-public-width-container)
-      );
-    }
-    // Desktop M
-    &.is-desktop__medium {
-      @include websiteHomeUserSpacings(80%);
-    }
-    // Desktop L
-    &.is-desktop__large {
-      @include edgeToEdgeLayoutCarouselBehavior(
-        var(--pi-public-width-container-l)
-      );
-      @include websiteHomeUserSpacings(66.66%);
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-07-list-layout.scss

@@ -1,176 +0,0 @@
-.pi-layout {
-  &.pi-layout__07-list {
-    padding: 0;
-    overflow-y: hidden;
-    & > header {
-      position: fixed;
-      z-index: 99;
-      display: flex;
-      align-items: flex-end;
-      width: 100%;
-      margin: auto;
-      background-color: rgba($color: white, $alpha: 0.6);
-      .pi-wrapper {
-        &.pi-wrapper__header {
-          margin: auto;
-          padding-bottom: var(--pi-spacing-xx-small);
-        }
-      }
-    }
-    & > section {
-      footer {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        gap: var(--pi-spacing-medium);
-        height: 7rem;
-        text-align: center;
-        background-color: var(--pi-color-white);
-      }
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    .pi-layout {
-      &.pi-layout__07-list {
-        & > header {
-          .pi-wrapper {
-            &.pi-wrapper__header {
-              min-height: var(--pi-height-layout-header);
-              width: 100%;
-              padding-right: var(--pi-spacing-x-large);
-              padding-left: var(--pi-spacing-x-large);
-              header {
-                display: flex;
-                align-items: center;
-                & > h1 {
-                  margin-top: var(--pi-spacing-medium);
-                  font: {
-                    size: var(--pi-font-size-large);
-                  }
-                }
-              }
-            }
-          }
-        }
-        & > section {
-          padding-top: calc(
-            var(--pi-height-layout-header) - var(--pi-spacing-medium)
-          );
-
-          .pi-wrapper {
-            &.pi-wrapper__list {
-              max-height: calc(
-                100vh - var(--pi-public-height-header-mobile) - var(
-                    --pi-height-layout-header
-                  ) -
-                  7.35rem
-              );
-              .pi-data-grid__mode--grid {
-                justify-content: center;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Desktop
-  &.is-desktop {
-    .pi-layout {
-      &.pi-layout__07-list {
-        & > header {
-          .pi-wrapper {
-            &.pi-wrapper__header {
-              min-height: var(--pi-height-layout-header);
-              padding: var(--pi-spacing-xxx-large) var(--pi-spacing-x-large);
-            }
-          }
-        }
-        & > section {
-          padding-top: calc(
-            var(--pi-height-layout-header) - var(--pi-spacing-medium)
-          );
-
-          .pi-wrapper {
-            &.pi-wrapper__list {
-              max-height: calc(
-                100vh - var(--pi-public-height-header-desktop) - var(
-                    --pi-height-layout-header
-                  ) -
-                  7.35rem
-              );
-              & > section {
-                .pi-data-grid__mode--grid {
-                  justify-content: center;
-                  max-width: var(--pi-width-container-l);
-                  margin: auto;
-                  padding-top: 3rem;
-                  padding-bottom: var(--pi-spacing-xxxx-large);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    // Desktop medium & large
-    &:not(.is-desktop__large) {
-      .pi-layout {
-        &.pi-layout__07-list {
-          & > header {
-            .pi-wrapper {
-              &.pi-wrapper__header {
-                width: 100%;
-                padding-right: var(--pi-spacing-xxxx-large);
-                padding-left: var(--pi-spacing-xxxx-large);
-                header {
-                  width: 80%;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    // Desktop large
-    &.is-desktop__large {
-      .pi-layout {
-        &.pi-layout__07-list {
-          & > header {
-            .pi-wrapper {
-              &.pi-wrapper__header {
-                min-height: var(--pi-height-layout-header);
-                width: var(--pi-public-width-container-l);
-                padding-right: var(--pi-spacing-xxx-large);
-                padding-left: var(--pi-spacing-xxx-large);
-              }
-            }
-          }
-          & > section {
-            padding-top: calc(
-              var(--pi-height-layout-header) - var(--pi-spacing-medium)
-            );
-
-            .pi-wrapper {
-              &.pi-wrapper__list {
-                max-height: calc(
-                  100vh - var(--pi-public-height-header-desktop) - var(
-                      --pi-height-layout-header
-                    ) -
-                    7.35rem
-                );
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-container-layout.scss

@@ -1,57 +0,0 @@
-@mixin containerSpacings(
-  $padding-top: calc(
-      var(--pi-public-height-header-mobile) + var(--pi-spacing-xxx-large)
-    ),
-  $default-vertical-padding: calc(
-      var(--pi-spacing-xxx-large) + var(--pi-spacing-xxx-large)
-    ),
-  $default-vertical-margin: var(--pi-spacing-xx-large)
-) {
-  .pi-container-layout {
-    .pi-layout {
-      &:nth-child(1) {
-        &:not(.pi-layout__09-pricing):not(.pi-website-home-user):not(
-            .pi-layout__03-vertically-centered
-          ) {
-          & > *:nth-child(1) {
-            padding-top: $padding-top;
-          }
-        }
-      }
-    }
-    .pi-layout + .pi-layout__03-vertically-centered {
-      & > *:nth-child(1) {
-        padding-top: $default-vertical-padding;
-        padding-bottom: $default-vertical-padding;
-      }
-    }
-    .pi-layout + .pi-layout {
-      margin-top: $default-vertical-margin;
-    }
-  }
-}
-
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      @include containerSpacings;
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      @include containerSpacings(
-        calc(
-          var(--pi-public-height-header-desktop) +
-            var(--pi-spacing-xxxx-large) + var(--pi-spacing-x-large)
-        ),
-        var(--pi-spacing-xxxx-large),
-        var(--pi-spacing-xx-large)
-      );
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/_pi-layout.scss

@@ -1,33 +0,0 @@
-@mixin layoutSpacings($padding: var(--pi-spacing-xx-large)) {
-  .pi-container-layout {
-    .pi-layout {
-      &:not(.pi-layout__03-vertically-centered) {
-        & > *:first-child {
-          padding-top: $padding;
-        }
-        & > *:last-child {
-          padding-bottom: $padding;
-        }
-      }
-    }
-    .pi-domain-component {
-      display: block;
-      width: -webkit-fill-available;
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include layoutSpacings;
-  }
-  // Tablet
-  &.is-tablet {
-    @include layoutSpacings(var(--pi-spacing-xxx-large));
-  }
-  // Desktop
-  &.is-desktop {
-    @include layoutSpacings(var(--pi-spacing-xxxx-large));
-  }
-}

libs/ui/src/lib/styles/deale-website/layouts/index.scss

@@ -1,8 +0,0 @@
-@forward 'pi-02-full-width-layout';
-@forward 'pi-02a-full-width-auto-layout';
-@forward 'pi-03-vertically-centered-layout';
-@forward 'pi-06-edge-to-edge-layout';
-@forward 'pi-06b-edge-to-edge-home-users-layout';
-@forward 'pi-07-list-layout';
-@forward 'pi-container-layout';
-@forward 'pi-layout';

libs/ui/src/lib/styles/deale-website/screens/_pi-00-thank-you-screen.scss

@@ -1,103 +0,0 @@
-@mixin thankYouScreenHeader($device: mobile) {
-  .pi-website-screen {
-    &.pi-website-screen__00-type-thank-you {
-      & > header {
-        display: block;
-        width: -webkit-fill-available;
-        padding-top: calc(
-          var(--pi-spacing-x-large) + var(--pi-public-height-header-#{$device})
-        );
-      }
-    }
-  }
-}
-
-.pi-website-screen {
-  &.pi-website-screen__00-type-thank-you {
-    justify-content: space-evenly !important;
-
-    & > *:nth-child(n + 1) {
-      text-align: center;
-    }
-    & > picture {
-      & > main {
-        display: grid;
-        height: 100%;
-
-        @for $i from 1 through 2 {
-          & > *:nth-child(#{$i}) {
-            grid-area: item#{$i};
-            align-self: center;
-            height: fit-content;
-          }
-        }
-      }
-    }
-  }
-}
-@mixin thankYouScreenMain(
-  $cols: 4,
-  $rows: 6,
-  $areas: '. . . .' 'item1 item1 . .' 'item1 item1 . .' 'item1 item1 . .'
-    '. . item2 item2' '. . item2 item2',
-  $min-height: 50
-) {
-  .pi-website-screen {
-    &.pi-website-screen__00-type-thank-you {
-      & > picture {
-        & > main {
-          grid-template-columns: repeat(#{$cols}, 1fr);
-          grid-template-rows: repeat(#{$rows}, 1fr);
-          grid-template-areas: $areas;
-          min-height: #{$min-height}vh;
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include thankYouScreenMain;
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small devices
-    @media screen and (max-width: 62rem) {
-      @include thankYouScreenHeader;
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    @include thankYouScreenMain(
-      6,
-      6,
-      '. . . . . .' '. item1 item1 . . .' '. item1 item1 . . .'
-        '. item1 item1 . item2 item2' '. item1 item1 . item2 item2'
-        '. . . . . .',
-      50
-    );
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large devices
-    @media screen and (min-width: 62rem) {
-      @include thankYouScreenHeader(desktop);
-    }
-  }
-
-  &.is-desktop {
-    @include thankYouScreenMain(
-      12,
-      6,
-      '. . . . . . . . . . . .' '. . item1 item1 item1 . . . . . . .'
-        '. . item1 item1 item1 . . . . . . .'
-        '. . item1 item1 item1 . . item2 item2 item2 . .'
-        '. . . . . . . item2 item2 item2 . .' '. . . . . . . . . . . .',
-      50
-    );
-  }
-}

libs/ui/src/lib/styles/deale-website/screens/index.scss

@@ -1 +0,0 @@
-@forward 'pi-00-thank-you-screen';

libs/ui/src/lib/styles/deale-website/shell/_pi-footer.scss

@@ -1,197 +0,0 @@
-@mixin websiteFooterTop($flex-direction: column) {
-  .pi-website-footer {
-    & > footer {
-      flex-direction: $flex-direction;
-    }
-  }
-}
-
-@mixin websiteFooterBottom($flex-direction: column-reverse) {
-  .pi-website-footer {
-    & > aside {
-      flex-direction: $flex-direction;
-    }
-  }
-}
-
-@mixin websiteFooterTopLeft(
-  $flex-direction: column,
-  $width: 100%,
-  $justify-right: flex-start
-) {
-  .pi-website-footer-content__top-left {
-    flex-direction: $flex-direction;
-    width: $width;
-    & > section {
-      justify-content: $justify-right;
-    }
-  }
-}
-
-@mixin websiteFooterTopRight($columns: 2, $width: 100%) {
-  .pi-website-footer-content__top-right {
-    grid-template-columns: repeat($columns, 1fr);
-    width: $width;
-  }
-}
-
-@mixin websiteFooterBottomLeft($text-align: flex-start) {
-  .pi-website-footer-content__bottom-left {
-    text-align: $text-align;
-  }
-}
-
-@mixin websiteFooterBottomRight() {
-  .pi-website-footer-content__bottom-right {
-  }
-}
-
-@mixin websiteFooterGap($gap: var(--pi-spacing-x-large)) {
-  .pi-website-footer {
-    gap: $gap;
-    & > footer,
-    & > aside {
-      gap: $gap;
-    }
-    & > footer {
-      & > .pi-website-footer-content {
-        &.pi-website-footer-content__top-right {
-          gap: $gap;
-        }
-      }
-    }
-  }
-}
-
-@mixin websiteFooterWidth($width: calc(100% - var(--pi-spacing-xx-large))) {
-  .pi-website-footer {
-    & > *:nth-child(n + 2) {
-      width: $width;
-      margin: 0 auto;
-    }
-  }
-}
-
-.pi-website-footer {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-evenly;
-
-  width: -webkit-fill-available;
-  background-color: var(--pi-color-grey-25);
-
-  // divider
-  & > span {
-    width: 100%;
-    height: 4.25rem;
-    left: 0px;
-    background: linear-gradient(
-      to right bottom,
-      var(--pi-color-white) 49%,
-      var(--pi-color-grey-25) 50%
-    );
-  }
-
-  & > footer,
-  & > aside {
-    display: flex;
-    padding: var(--pi-spacing-xx-large);
-  }
-  & > footer {
-    & > .pi-website-footer-content {
-      gap: var(--pi-spacing-small);
-
-      &.pi-website-footer-content__top-left {
-        display: flex;
-        justify-content: space-between;
-        .pi-headline {
-          & > figure {
-            max-width: 5.625rem;
-          }
-        }
-      }
-
-      &.pi-website-footer-content__top-right {
-        margin: 0 auto;
-        display: grid;
-
-        .pi-menu {
-          & > nav {
-            display: flex;
-            flex-direction: column;
-            gap: var(--pi-spacing-small);
-
-            & > .pi-menu-event-item:first-child {
-              margin-bottom: var(--pi-spacing-small);
-              font: {
-                weight: 600;
-              }
-            }
-            & > :nth-child(n + 2) {
-              cursor: pointer;
-            }
-          }
-        }
-      }
-    }
-  }
-  & > aside {
-    align-items: center;
-    justify-content: space-between;
-    max-height: 12.5625rem;
-    border-top: 1px solid var(--pi-color-grey-100);
-    padding: var(--pi-spacing-x-large);
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include websiteFooterBottom;
-    @include websiteFooterBottomLeft(center);
-    @include websiteFooterGap;
-    @include websiteFooterTopLeft;
-    @include websiteFooterTopRight;
-    @include websiteFooterWidth;
-  }
-  // Tablet
-  &.is-tablet {
-    @include websiteFooterWidth(calc(100% - 3rem));
-    // Tablet S
-    @media screen and (max-width: 62rem) {
-      @include websiteFooterTopLeft(row, 100%, flex-end);
-      @include websiteFooterTopRight(3);
-    }
-    // Tablet L
-    @media screen and (min-width: 62rem) {
-      @include websiteFooterTopLeft(column, 25%);
-      @include websiteFooterTopRight(3, 75%);
-    }
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Large device
-    @media screen and (max-width: 62rem) {
-      @include websiteFooterTop;
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    @include websiteFooterBottom(row);
-    @include websiteFooterGap(var(--pi-spacing-xxxx-large));
-  }
-  // Desktop
-  &.is-desktop {
-    @include websiteFooterTop(row);
-    @include websiteFooterTopLeft(column, 25%);
-    @include websiteFooterTopRight(3, 75%);
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include websiteFooterWidth(var(--pi-public-width-container));
-    }
-    // Desktop L
-    &.is-desktop__large {
-      @include websiteFooterWidth(var(--pi-public-width-container-l));
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/_pi-main.scss

@@ -1,36 +0,0 @@
-html {
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-shell {
-        &.pi-shell__deale-website {
-          display: block;
-          max-width: 100vw;
-          overflow-x: hidden;
-          & > div {
-            &.is-menu-open {
-              position: fixed;
-
-              &::after {
-                content: '';
-                position: fixed;
-                z-index: 9;
-                height: 100vh;
-                width: 100%;
-                top: 0;
-                left: 0;
-                background-color: rgba($color: #0d2a6b, $alpha: 0.5);
-              }
-              .pi-container-layout {
-                & > .is-fixed {
-                  display: none;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/_pi-menu-theming.scss

@@ -1,482 +0,0 @@
-@keyframes gradient {
-  0% {
-    background-position: 0%;
-  }
-  25% {
-    background-position: 25%;
-  }
-  50% {
-    background-position: 50%;
-  }
-  75% {
-    background-position: 75%;
-  }
-  100% {
-    background-position: 100%;
-  }
-}
-
-@mixin parentMenuItemColorLargeDevice($color, $border-color, $text-gradient) {
-  &:hover {
-    color: $color;
-    background: $border-color;
-    background-color: rgba($color: white, $alpha: 0.33);
-    animation: gradient 1.5s linear infinite;
-    animation-direction: alternate-reverse;
-    background-size: 150% 300%;
-    border: 0.0625rem solid transparent;
-
-    &::before {
-      background-color: rgba($color: white, $alpha: 0.0125);
-    }
-    & > span {
-      & > span {
-        background-image: $text-gradient;
-      }
-    }
-  }
-}
-
-// Mode light
-@mixin topbarActionButtonLargeDeviceModeLight {
-  .pi-website-topbar-content {
-    &.pi-website-topbar-content__right {
-      // Login
-      .pi-button__action {
-        &.pi-button__type--menu-item {
-          box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66);
-          & > span {
-            & > span {
-              background-color: var(--pi-color-white);
-            }
-          }
-
-          &::before {
-            background-color: rgba($color: white, $alpha: 0.0125);
-          }
-
-          background-color: var(--pi-color-white);
-          border-color: var(--pi-color-primary);
-          & > svg {
-            color: var(--pi-color-highlighted);
-          }
-          & > span {
-            background-image: linear-gradient(
-              30deg,
-              var(--pi-color-highlighted),
-              var(--pi-color-highlighted-900)
-            );
-          }
-        }
-      }
-    }
-  }
-}
-@mixin topbarParentMenuItemLargeDeviceModeLight {
-  .pi-menu {
-    .pi-menu-event-item {
-      box-shadow: 0 0 0 0 rgba($color: white, $alpha: 0.66);
-      & > span {
-        & > span {
-          background-color: var(--pi-color-white);
-        }
-      }
-    }
-  }
-}
-
-@mixin parentMenuItemNotHoverColorModeLight {
-  &:not(:hover) {
-    border-color: rgba($color: white, $alpha: 0.66);
-    background-color: rgba($color: white, $alpha: 0.15);
-  }
-}
-
-@mixin parentMenuItemColorLargeDeviceModeLight {
-  .pi-website-topbar-content {
-    // Center
-    &.pi-website-topbar-content__center {
-      .pi-menu {
-        &.pi-menu__parent {
-          & > nav {
-            & > .pi-menu-event-item {
-              // Company
-              &:nth-child(1) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-primary),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.125),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-primary-200),
-                        var(--pi-color-primary)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-primary),
-                    var(--pi-color-primary-900)
-                  )
-                );
-              }
-              // Investor
-              &:nth-child(2) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-accent),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.125),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-accent-200),
-                        var(--pi-color-accent)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-accent),
-                    var(--pi-color-accent-900)
-                  )
-                );
-              }
-              // Advisor
-              &:nth-child(3) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-highlighted),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.5),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-highlighted-200),
-                        var(--pi-color-highlighted)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-highlighted),
-                    var(--pi-color-highlighted-900)
-                  )
-                );
-              }
-              @include parentMenuItemNotHoverColorModeLight;
-            }
-          }
-        }
-      }
-    }
-    // Right
-    &.pi-website-topbar-content__right {
-      .pi-menu {
-        &:not(.pi-menu__children) {
-          & > nav {
-            & > .pi-menu-event-item {
-              // Prices
-              &:nth-of-type(1) {
-                @include parentMenuItemNotHoverColorModeLight;
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-highlighted),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.95),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-highlighted-200),
-                        var(--pi-color-highlighted)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-highlighted),
-                    var(--pi-color-highlighted-900)
-                  )
-                );
-              }
-            }
-          }
-        }
-      }
-      // Login
-      .pi-button__action {
-        @include parentMenuItemColorLargeDevice(
-          var(--pi-color-highlighted),
-          (
-            linear-gradient(
-                rgba($color: white, $alpha: 0.95),
-                rgba($color: white, $alpha: 1)
-              )
-              padding-box,
-            linear-gradient(
-                to right,
-                var(--pi-color-highlighted-200),
-                var(--pi-color-highlighted)
-              )
-              border-box
-          ),
-          linear-gradient(
-            30deg,
-            var(--pi-color-highlighted),
-            var(--pi-color-highlighted-900)
-          )
-        );
-      }
-    }
-  }
-}
-
-// Mode dark
-@mixin topbarActionButtonLargeDeviceModeDark {
-  .pi-website-topbar-content {
-    &.pi-website-topbar-content__right {
-      // Login
-      .pi-button__action {
-        box-shadow: 0 0 0 0 rgba($color: #0d2a6b, $alpha: 0.66);
-        & > span {
-          background-image: linear-gradient(
-            30deg,
-            var(--pi-color-white),
-            var(--pi-color-white)
-          );
-          & > span {
-            background-color: var(--pi-color-highlighted);
-          }
-        }
-
-        &::before {
-          background-color: rgba($color: #0d2a6b, $alpha: 0.0125);
-        }
-
-        background-color: var(--pi-color-highlighted);
-        border-color: var(--pi-color-highlighted);
-        & > svg {
-          color: var(--pi-color-white);
-        }
-        &:hover {
-          & > span {
-            background-image: linear-gradient(
-              30deg,
-              var(--pi-color-highlighted),
-              var(--pi-color-highlighted)
-            );
-            & > span {
-              background-color: var(--pi-color-highlighted-100);
-            }
-          }
-          & > svg {
-            color: var(--pi-color-highlighted);
-          }
-        }
-      }
-    }
-  }
-}
-@mixin topbarParentMenuItemLargeDeviceModeDark {
-  .pi-menu {
-    .pi-menu-event-item {
-      box-shadow: 0 0 0 0 rgba($color: #3d3d3d, $alpha: 0.26);
-      & > span {
-        & > span {
-          background-color: var(--pi-color-grey);
-        }
-      }
-    }
-  }
-}
-
-@mixin parentMenuItemNotHoverColorModeDark {
-  &:not(:hover) {
-    border-color: rgba($color: #3d3d3d, $alpha: 0.36);
-    background-color: rgba($color: white, $alpha: 0.44);
-  }
-}
-
-@mixin parentMenuItemColorLargeDeviceModeDark {
-  .pi-website-topbar-content {
-    // Center
-    &.pi-website-topbar-content__center {
-      .pi-menu {
-        &.pi-menu__parent {
-          & > nav {
-            & > .pi-menu-event-item {
-              // Company
-              &:nth-child(1) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-primary),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.125),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-primary-75),
-                        var(--pi-color-primary-200)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-primary),
-                    var(--pi-color-primary-900)
-                  )
-                );
-              }
-              // Investor
-              &:nth-child(2) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-accent),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.125),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-accent-100),
-                        var(--pi-color-accent-200)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-accent),
-                    var(--pi-color-accent-900)
-                  )
-                );
-              }
-              // Advisor
-              &:nth-child(3) {
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-highlighted),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.5),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-highlighted-100),
-                        var(--pi-color-highlighted-200)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-highlighted),
-                    var(--pi-color-highlighted-900)
-                  )
-                );
-              }
-              @include parentMenuItemNotHoverColorModeDark;
-            }
-          }
-        }
-      }
-    }
-    // Right
-    &.pi-website-topbar-content__right {
-      .pi-menu {
-        &:not(.pi-menu__children) {
-          & > nav {
-            & > .pi-menu-event-item {
-              // Prices
-              &:nth-of-type(1) {
-                @include parentMenuItemNotHoverColorModeDark;
-                @include parentMenuItemColorLargeDevice(
-                  var(--pi-color-highlighted),
-                  (
-                    linear-gradient(
-                        rgba($color: white, $alpha: 0.95),
-                        rgba($color: white, $alpha: 1)
-                      )
-                      padding-box,
-                    linear-gradient(
-                        to right,
-                        var(--pi-color-highlighted-200),
-                        var(--pi-color-highlighted)
-                      )
-                      border-box
-                  ),
-                  linear-gradient(
-                    30deg,
-                    var(--pi-color-highlighted),
-                    var(--pi-color-highlighted-900)
-                  )
-                );
-              }
-            }
-          }
-        }
-      }
-      // Login
-      .pi-button__action {
-        @include parentMenuItemColorLargeDevice(
-          var(--pi-color-highlighted),
-          (
-            linear-gradient(
-                rgba($color: white, $alpha: 0.95),
-                rgba($color: white, $alpha: 1)
-              )
-              padding-box,
-            linear-gradient(
-                to right,
-                var(--pi-color-highlighted-200),
-                var(--pi-color-highlighted)
-              )
-              border-box
-          ),
-          linear-gradient(
-            30deg,
-            var(--pi-color-highlighted),
-            var(--pi-color-highlighted-900)
-          )
-        );
-      }
-    }
-  }
-}
-
-html {
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      // Topbar
-      .pi-website-topbar {
-        // Mode light (White menu)
-        &:not(.is-mode-dark) {
-          @include parentMenuItemColorLargeDeviceModeLight;
-          @include topbarParentMenuItemLargeDeviceModeLight;
-          @include topbarActionButtonLargeDeviceModeLight;
-        }
-
-        // Mode dark
-        &.is-mode-dark {
-          @include parentMenuItemColorLargeDeviceModeDark;
-          @include topbarParentMenuItemLargeDeviceModeDark;
-          @include topbarActionButtonLargeDeviceModeDark;
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/_pi-menu.scss

@@ -1,518 +0,0 @@
-@keyframes pulse {
-  to {
-    box-shadow: 0 0 0 var(--pi-spacing-xxx-small) transparent;
-  }
-}
-
-@keyframes gradient {
-  0% {
-    background-position: 0%;
-  }
-  25% {
-    background-position: 25%;
-  }
-  50% {
-    background-position: 50%;
-  }
-  75% {
-    background-position: 75%;
-  }
-  100% {
-    background-position: 100%;
-  }
-}
-
-@mixin topbarParentMenuItemLargeDevice {
-  border: 0.0625rem solid;
-  border-radius: var(--pi-border-radius-medium);
-  transition: 0.4s all ease-in-out;
-  animation: pulse 1.5s infinite 2s ease-in;
-  &:hover {
-    cursor: pointer;
-    animation: unset;
-    &::before {
-      height: 2.75rem;
-      width: 6rem;
-      margin-top: -0.125rem;
-      margin-left: -0.125rem;
-      opacity: 1;
-      filter: blur(0.1rem);
-    }
-  }
-  &::before {
-    content: '';
-    position: absolute;
-    transition: all 0.3s ease;
-    border-radius: 0.75rem;
-    opacity: 0;
-    height: 0;
-    width: 0;
-    margin-top: 1.1875rem;
-    margin-left: 2.8125rem;
-  }
-  & > span {
-    & > span {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 2.25rem;
-      width: 6rem;
-      padding-bottom: 0.05rem;
-      background-size: 100%;
-      background-repeat: repeat;
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      -moz-background-clip: text;
-      -moz-text-fill-color: transparent;
-      transition: all 0.45s ease-Out;
-
-      font: {
-        weight: 400;
-      }
-    }
-  }
-}
-
-@mixin largeDeviceChildMenu(
-  $margin-left,
-  $background-color,
-  $grid-template-columns: repeat(2, 1fr)
-) {
-  // Menu item
-  .pi-menu__children {
-    z-index: 99;
-    position: absolute;
-    margin-top: var(--pi-spacing-large);
-    margin-left: $margin-left;
-    border-radius: var(--pi-border-radius-large);
-    background-color: var(--pi-color-white);
-    box-shadow: var(--pi-box-shadow-double);
-    & > div {
-      display: grid;
-      grid-template-columns: $grid-template-columns;
-      gap: var(--pi-spacing-medium);
-    }
-
-    & > aside {
-      background-color: $background-color;
-    }
-
-    // Submenu entry
-    .pi-list-item {
-      min-width: 15.625rem;
-      &:not(:hover) {
-        .pi-list-item-content {
-          &.pi-list-item-content__left {
-            & > span {
-              //
-              &:nth-child(1) {
-                color: var(--pi-color-black);
-              }
-              &:nth-child(2) {
-                color: var(--pi-color-grey-300);
-              }
-            }
-          }
-        }
-      }
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-@mixin largeDeviceChildMenuItemColor($background-color) {
-  // Submenu entry
-  .pi-list-item {
-    &:hover {
-      background-color: $background-color;
-    }
-  }
-}
-// Small device
-@mixin smallDevieMenuSize($topbar-center-content-height: calc(100vh - 10rem)) {
-  .pi-website-topbar-content {
-    // Center
-    &.pi-website-topbar-content__center {
-      height: $topbar-center-content-height;
-      min-height: $topbar-center-content-height;
-      overflow: auto;
-
-      // Generic Scroll
-      &::-webkit-scrollbar {
-        width: var(--pi-spacing-xxx-small);
-      }
-
-      &::-webkit-scrollbar-track {
-        box-shadow: none;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        border-radius: var(--pi-border-radius-small);
-        background-color: var(--pi-color-grey-75);
-
-        &:hover {
-          background-color: var(--pi-color-grey-100);
-          transition: var(--pi-animation);
-        }
-      }
-    }
-  }
-}
-
-@mixin smallDeviceMenuColor($border-color, $color) {
-  & > span {
-    border-color: $border-color;
-    & > span {
-      color: $color;
-    }
-  }
-}
-
-.pi-website-footer-content {
-  &.pi-website-footer-content__top-right {
-    .pi-menu-event-item {
-      &:nth-child(2) {
-        .pi-menu__children {
-          .pi-text {
-            color: var(--pi-color-primary);
-          }
-        }
-      }
-      &:nth-child(3) {
-        .pi-menu__children {
-          .pi-text {
-            color: var(--pi-color-accent);
-          }
-        }
-      }
-      &:nth-child(4) {
-        .pi-menu__children {
-          .pi-text {
-            color: var(--pi-color-highlighted);
-          }
-        }
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include smallDevieMenuSize;
-  }
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      .pi-website-topbar-content {
-        // Center
-        &.pi-website-topbar-content__center {
-          .pi-menu {
-            // Parent
-            &.pi-menu__parent {
-              & > nav {
-                display: flex;
-                flex-direction: column;
-                gap: var(--pi-spacing-xx-large);
-                padding-bottom: var(--pi-spacing-xx-large);
-                .pi-menu-event-item {
-                  &.has-children {
-                    & > span {
-                      display: flex;
-                      width: -webkit-fill-available;
-                      border-bottom: 1px solid;
-                      padding-bottom: var(--pi-spacing-xxx-small);
-
-                      & > span {
-                        padding-left: var(--pi-spacing-xx-small);
-                        font: {
-                          size: var(--pi-font-size-x-small);
-                        }
-                      }
-                    }
-                    // Company
-                    &:nth-child(1) {
-                      @include smallDeviceMenuColor(
-                        var(--pi-color-primary-100),
-                        var(--pi-color-primary)
-                      );
-                    }
-                    // Investor
-                    &:nth-child(2) {
-                      @include smallDeviceMenuColor(
-                        var(--pi-color-accent-100),
-                        var(--pi-color-accent)
-                      );
-                    }
-                    // Advisor
-                    &:nth-child(3) {
-                      @include smallDeviceMenuColor(
-                        var(--pi-color-highlighted-100),
-                        var(--pi-color-highlighted)
-                      );
-                    }
-                  }
-                }
-              }
-            }
-
-            // Children
-            &.pi-menu__children {
-              .pi-list-item {
-                padding-top: var(--pi-spacing-small);
-                padding-bottom: var(--pi-spacing-small);
-                &:nth-child(n + 2) {
-                  padding-left: var(--pi-spacing-x-large);
-                  .pi-list-item-content {
-                    &.pi-list-item-content__left {
-                      & > span {
-                        &:nth-child(1) {
-                          color: var(--pi-color-grey);
-                          font: {
-                            weight: 600;
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-              .pi-list-item-content {
-                &.pi-list-item-content__left {
-                  & > span {
-                    &:nth-child(2) {
-                      color: var(--pi-color-grey-300);
-                      font: {
-                        size: var(--pi-font-size-x-small);
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  // Tablet
-  &.is-tablet {
-    &.is-tablet__small {
-      @include smallDevieMenuSize(calc(100vh - 11.5rem));
-    }
-  }
-
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large device
-    @media screen and (min-width: 62rem) {
-      .pi-shell__deale-website {
-        // Topbar
-        .pi-website-topbar {
-          .pi-menu {
-            .pi-menu-event-item {
-              @include topbarParentMenuItemLargeDevice;
-            }
-            // Parent
-            &.pi-menu__parent {
-              & > nav {
-                display: flex;
-                gap: var(--pi-spacing-medium);
-              }
-              .pi-menu-event-item {
-                &.has-children {
-                  &:not(.is-selected) {
-                    .pi-menu__children {
-                      opacity: 0;
-                      transform: scale(0);
-                    }
-                  }
-                  &.is-selected {
-                    .pi-menu__children {
-                      opacity: 1;
-                      transform: scale(1);
-                    }
-                  }
-                }
-              }
-            }
-
-            // Child
-            &.pi-menu__children {
-              & > div,
-              & > aside {
-                // Menu items
-                & > div {
-                  & > span {
-                    display: flex;
-                    align-items: center;
-                    gap: var(--pi-spacing-xxx-small);
-                  }
-                }
-              }
-              // Child menu
-              & > div {
-                padding: var(--pi-spacing-medium);
-                border-radius: var(--pi-border-radius-large)
-                  var(--pi-border-radius-large) 0 0;
-                // Child Menu items
-                & > div {
-                  & > span {
-                    display: flex;
-                    align-items: center;
-                    gap: var(--pi-spacing-xxx-small);
-                  }
-                }
-              }
-              // Aside menu
-              & > aside {
-                display: flex;
-                justify-content: space-between;
-
-                width: 100%;
-                padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-large)
-                  var(--pi-spacing-medium);
-                border-radius: 0 0 var(--pi-border-radius-large)
-                  var(--pi-border-radius-large);
-                // Aside Menu items
-                & > div {
-                  & > span {
-                    display: flex;
-                    align-items: center;
-                    gap: var(--pi-spacing-xxx-small);
-                  }
-                }
-              }
-            }
-          }
-
-          .pi-website-topbar-content {
-            // Center
-            &.pi-website-topbar-content__center {
-              .pi-menu {
-                &.pi-menu__parent {
-                  & > nav {
-                    & > .pi-menu-event-item {
-                      // Company
-                      &:nth-child(1) {
-                        @include largeDeviceChildMenu(
-                          -18.75rem,
-                          var(--pi-color-primary-25)
-                        );
-                        @include largeDeviceChildMenuItemColor(
-                          var(--pi-color-primary-25)
-                        );
-                      }
-                      // Investor
-                      &:nth-child(2) {
-                        @include largeDeviceChildMenu(
-                          -14.125rem,
-                          var(--pi-color-accent-25)
-                        );
-                        @include largeDeviceChildMenuItemColor(
-                          var(--pi-color-accent-25)
-                        );
-                      }
-                      // Advisor
-                      &:nth-child(3) {
-                        @include largeDeviceChildMenu(
-                          -14.625rem,
-                          var(--pi-color-highlighted-25)
-                        );
-                        @include largeDeviceChildMenuItemColor(
-                          var(--pi-color-highlighted-25)
-                        );
-                      }
-                    }
-                  }
-                }
-              }
-            }
-            // Right
-            &.pi-website-topbar-content__right {
-              display: flex;
-              justify-content: flex-end;
-              align-items: center;
-              gap: var(--pi-spacing-medium);
-              @include largeDeviceChildMenu(-100px, unset, 1fr);
-              .pi-menu {
-                &:not(.pi-menu__children) {
-                  & > nav {
-                    & > .pi-menu-event-item {
-                      @include topbarParentMenuItemLargeDevice;
-
-                      // Prices
-                      &:nth-of-type(1) {
-                        .pi-menu__children {
-                          & > div {
-                            .pi-list-item {
-                              &:hover {
-                                // Company Pricing
-                                &:nth-child(1) {
-                                  color: var(--pi-color-primary);
-                                  background-color: var(--pi-color-primary-25);
-                                }
-                                // Investor Pricing
-                                &:nth-child(2) {
-                                  color: var(--pi-color-accent);
-                                  background-color: var(--pi-color-accent-25);
-                                }
-                                // Advisor Pricing
-                                &:nth-child(3) {
-                                  color: var(--pi-color-highlighted);
-                                  background-color: var(
-                                    --pi-color-highlighted-25
-                                  );
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-
-              // Login
-              .pi-button__type--menu-item {
-                &.pi-button__action {
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  height: 2.25rem;
-                  width: 7rem;
-                  border-radius: var(--pi-border-radius-medium);
-
-                  @include topbarParentMenuItemLargeDevice;
-                  & > span {
-                    padding-bottom: 0.1875rem;
-                    -webkit-background-clip: text;
-                    -webkit-text-fill-color: transparent;
-                    -moz-background-clip: text;
-                    -moz-text-fill-color: transparent;
-
-                    font: {
-                      weight: 400;
-                    }
-                  }
-
-                  position: relative;
-                  transition: all 0.45s ease-Out;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // LargeDevice
-  &.is-desktop {
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/_pi-topbar.scss

@@ -1,334 +0,0 @@
-@mixin topbarCommonSizes(
-  $height: var(--pi-public-height-header-mobile),
-  $max-width: calc(100% - var(--pi-spacing-xx-large)),
-  $small-size: -webkit-fill-available,
-  $large-size: calc(100% - var(--pi-spacing-xxx-small))
-) {
-  .pi-website-topbar {
-    & > header {
-      height: $height;
-      max-width: $max-width;
-      margin: 0 auto;
-
-      .pi-website-topbar-content {
-        // Left
-        &.pi-website-topbar-content__left {
-          width: $small-size;
-        }
-        // Center
-        &.pi-website-topbar-content__center {
-          width: $large-size;
-        }
-        // Right
-        &.pi-website-topbar-content__right {
-          width: $small-size;
-        }
-      }
-    }
-  }
-}
-
-@mixin logoSize($max-width: 7.125rem) {
-  .pi-website-topbar {
-    .pi-website-topbar-content {
-      &.pi-website-topbar-content__left {
-        & > .pi-headline {
-          max-width: $max-width;
-          &:hover {
-            cursor: pointer;
-          }
-        }
-      }
-    }
-  }
-}
-// Topbar menu is closed
-@mixin smallDeviceTopbarMenuIsClosed {
-  .pi-shell {
-    &.pi-shell__deale-website {
-      & > div {
-        // Is Open
-        &:not(.is-menu-open) {
-          .pi-website-topbar {
-            top: 0;
-            left: 0;
-            height: var(--pi-public-height-header-mobile);
-            width: -webkit-fill-available;
-            padding: 0;
-            border-radius: var(--pi-border-radius-large);
-            .pi-website-topbar-content {
-              // Center
-              &.pi-website-topbar-content__center {
-                transform: scale(0);
-                opacity: 0;
-              }
-              // Right
-              &.pi-website-topbar-content__right {
-                display: flex;
-                flex-direction: row-reverse;
-                gap: var(--pi-spacing-x-small);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// Ope topbar menu
-@mixin smallDeviceTopbarMenuIsOpen(
-  $side-spacing: var(--pi-spacing-medium),
-  $height: calc(100vh - var(--pi-spacing-xx-large)),
-  $width: calc(100% - var(--pi-spacing-xx-large))
-) {
-  .pi-shell {
-    &.pi-shell__deale-website {
-      & > div {
-        // Is Open
-        &.is-menu-open {
-          .pi-website-topbar {
-            position: fixed;
-            top: $side-spacing;
-            left: $side-spacing;
-            z-index: 99;
-            height: $height;
-            width: $width;
-            border-radius: var(--pi-border-radius-large);
-            background-color: var(--pi-color-white);
-            box-shadow: var(--pi-box-shadow-double);
-
-            .pi-close-button {
-              position: absolute;
-              top: var(--pi-spacing-large);
-              right: var(--pi-spacing-x-large);
-            }
-            & > header {
-              flex-direction: column;
-              gap: var(--pi-spacing-xxxx-small);
-            }
-            .pi-website-topbar-content {
-              padding-left: calc(
-                var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
-              );
-              padding-right: calc(
-                var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
-              );
-              // Left (=== top)
-              &.pi-website-topbar-content__left {
-                padding-top: var(--pi-spacing-large);
-                padding-bottom: var(--pi-spacing-large);
-              }
-              // Center
-              &.pi-website-topbar-content__center {
-                width: calc(100% - var(--pi-spacing-xx-small));
-                margin: 0 auto;
-                transform: scale(1);
-                opacity: 1;
-              }
-              // Right (=== bottom)
-              &.pi-website-topbar-content__right {
-                padding-bottom: var(--pi-spacing-large);
-                .pi-button__action {
-                  &.pi-button__type--menu-item {
-                    height: var(--pi-spacing-xxx-large);
-                    min-width: var(--pi-spacing-xxx-large);
-                    width: -webkit-fill-available;
-                    border-radius: var(--pi-border-radius-medium);
-                    -webkit-border-radius: var(--pi-border-radius-medium);
-                    -moz-border-radius: var(--pi-border-radius-medium);
-                    color: var(--pi-color-white);
-                    background-image: var(--pi-gradient-primary-dark);
-                    font: {
-                      weight: 400;
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.pi-website-topbar {
-  position: absolute;
-  z-index: 99;
-  width: -webkit-fill-available;
-  background-color: transparent;
-  & > header {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-
-.pi-shell {
-  &.pi-shell__deale-website {
-    & > div {
-      // Is Closed
-      &:not(.is-menu-open) {
-        width: -webkit-fill-available;
-      }
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    @include smallDeviceTopbarMenuIsOpen;
-    .pi-shell {
-      &.pi-shell__deale-website {
-        & > div {
-          // Is Closed
-          &:not(.is-menu-open) {
-            @include logoSize;
-            @include topbarCommonSizes;
-          }
-          // Is Open
-          &.is-menu-open {
-            @include logoSize(6.625rem);
-            @include topbarCommonSizes(
-              var(--pi-public-height-header-mobile),
-              -webkit-fill-available
-            );
-          }
-        }
-      }
-    }
-  }
-  // Tablet
-  &.is-tablet {
-    // Tablet S
-    &.is-tablet__small {
-      @include smallDeviceTopbarMenuIsOpen(
-        var(--pi-spacing-x-large),
-        calc(100vh - 3rem),
-        calc(100% - 3rem)
-      );
-      .pi-shell {
-        &.pi-shell__deale-website {
-          & > div {
-            // Is Closed
-            &:not(.is-menu-open) {
-              @include logoSize(7.5rem);
-              @include topbarCommonSizes(
-                var(--pi-public-height-header-mobile),
-                calc(100% - 3rem)
-              );
-            }
-
-            // Is Open
-            &.is-menu-open {
-              @include logoSize(7.125rem);
-              @include topbarCommonSizes(
-                var(--pi-public-height-header-mobile),
-                -webkit-fill-available
-              );
-            }
-          }
-        }
-      }
-    }
-    // Tablet L
-    &.is-tablet__large {
-      @include topbarCommonSizes(
-        var(--pi-public-height-header-mobile),
-        calc(100% - 3rem)
-      );
-      @include logoSize(8.4375rem);
-    }
-  }
-
-  // Mobile & Tablet
-  &:not(.is-desktop) {
-    // Small device
-    @media screen and (max-width: 62rem) {
-      // Closded menu has equal properties for Mobile & Tablet S
-      @include smallDeviceTopbarMenuIsClosed;
-      .pi-shell {
-        &.pi-shell__deale-website {
-          .pi-website-topbar {
-            & > header {
-              align-items: center;
-            }
-          }
-
-          // Override right content buttons
-          button {
-            &:not(.pi-close-button):not(.pi-hamburger):not(.mdc-switch):not(
-                .pi-button__toggle
-              ):not(.pi-button__type--menu-item).pi-color__white {
-              border-color: var(--pi-color-primary-100);
-              background-color: rgba(255, 255, 255, 0.7);
-              background-image: unset;
-              &:hover {
-                border-color: var(--pi-color-primary-200);
-                background-color: rgba(255, 255, 255, 0.9);
-                .mat-icon {
-                  color: var(--pi-color-primary);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    // Large Device
-    @media screen and (min-width: 62rem) {
-      .pi-website-topbar {
-        & > header {
-          align-items: flex-end;
-        }
-      }
-    }
-  }
-  // Desktop
-  &.is-desktop {
-    .pi-website-topbar-content {
-      display: flex;
-      // Center
-      &.pi-website-topbar-content__center {
-        justify-content: center;
-      }
-      // Right
-      &.pi-website-topbar-content__right {
-        justify-content: flex-end;
-      }
-    }
-    @include logoSize(8.75rem);
-    // Desktop S
-    &.is-desktop__small {
-      @include topbarCommonSizes(
-        var(--pi-public-height-header-desktop),
-        var(--pi-public-width-container),
-        30%,
-        40%
-      );
-    }
-
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include topbarCommonSizes(
-        var(--pi-public-height-header-desktop),
-        var(--pi-public-width-container),
-        30%,
-        40%
-      );
-    }
-    // Desktop L
-    &.is-desktop__large {
-      @include topbarCommonSizes(
-        var(--pi-public-height-header-desktop),
-        var(--pi-public-width-container-l),
-        30%,
-        40%
-      );
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/shell/index.scss

@@ -1,5 +0,0 @@
-@forward 'pi-footer';
-@forward 'pi-main';
-@forward 'pi-menu';
-@forward 'pi-menu-theming';
-@forward 'pi-topbar';

libs/ui/src/lib/styles/deale-website/wrappers/_pi-form-wrapper.scss

@@ -1,62 +0,0 @@
-.pi-shell__deale-website {
-  .pi-wrapper {
-    &.pi-wrapper__form {
-      // Vertically behavior
-      & > form {
-        & > fieldset {
-          & > label {
-            &.pi-text__size--x-small {
-              padding-left: var(--pi-spacing-x-small);
-              padding-bottom: var(--pi-spacing-xxx-small);
-            }
-          }
-          .pi-panel {
-            margin-bottom: var(--pi-spacing-x-small);
-            border: 1px solid var(--pi-color-grey-75);
-          }
-        }
-      }
-      .pi-list-item + .pi-list-item {
-        margin-top: unset;
-      }
-    }
-  }
-  .pi-website-contact-form {
-    .pi-panel__padding--m {
-      padding: var(--pi-spacing-xx-small) var(--pi-spacing-medium);
-    }
-  }
-}
-
-html {
-  // Mobile
-  &.is-mobile {
-    .pi-shell__deale-website {
-      .pi-wrapper {
-        &.pi-wrapper__form {
-          // Vertically behavior
-          & > form {
-            & > *:nth-child(n + 2) {
-              margin-top: var(--pi-spacing-large);
-            }
-          }
-        }
-      }
-    }
-  }
-  // Tablet & Desktop
-  &:not(.is-mobile) {
-    .pi-shell__deale-website {
-      .pi-wrapper {
-        &.pi-wrapper__form {
-          // Vertically behavior
-          & > form {
-            & > *:nth-child(n + 2) {
-              margin-top: var(--pi-spacing-xxx-small);
-            }
-          }
-        }
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/wrappers/_pi-header-wrapper.scss

@@ -1,11 +0,0 @@
-.pi-wrapper {
-  // Header Wrapper
-  &.pi-wrapper__header {
-    // Flex direction
-    &.pi-wrapper__flex-direction--column {
-      .pi-header-wrapper-content {
-        gap: var(--pi-spacing-medium);
-      }
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/wrappers/_pi-wrapper.scss

@@ -1,32 +0,0 @@
-@mixin dealeWebsiteWrapperMaxWidth(
-  $max-width: calc(100% - var(--pi-spacing-xx-large))
-) {
-  .pi-shell__deale-website {
-    .pi-wrapper {
-      // Max width
-      &.pi-wrapper__full-width,
-      &.pi-wrapper__full-width-centered {
-        max-width: $max-width;
-      }
-    }
-  }
-}
-
-html {
-  &.is-mobile {
-    @include dealeWebsiteWrapperMaxWidth;
-  }
-  &.is-tablet {
-    @include dealeWebsiteWrapperMaxWidth(calc(100% - 3rem));
-  }
-  &.is-desktop {
-    // Desktop S & M
-    &:not(.is-desktop__large) {
-      @include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container));
-    }
-    // Desktop L
-    &.is-desktop__large {
-      @include dealeWebsiteWrapperMaxWidth(var(--pi-public-width-container-l));
-    }
-  }
-}

libs/ui/src/lib/styles/deale-website/wrappers/index.scss

@@ -1,3 +0,0 @@
-@forward 'pi-form-wrapper';
-@forward 'pi-header-wrapper';
-@forward 'pi-wrapper';

libs/ui/src/lib/styles/themes/_alternative.scss

@@ -0,0 +1,103 @@
+// TEMA ALTERNATIVO
+//
+// Demuestra hasta dónde llega el theming: no duplica ni un selector de
+// componente, solo redefine tokens. Todo lo que cambia aquí (paleta, formas,
+// tipografía de los controles, superficies) se propaga solo porque los
+// componentes de `common/` consumen `--pi-color-*` y `--pi-theme-*`.
+//
+// Se dejan intactos `warn` y `success`: son colores semánticos (error / éxito)
+// y cambiarlos perjudicaría la lectura del estado.
+
+@mixin alternativeThemeTokens {
+  // --- Paleta de marca --------------------------------------------------
+  // Primary: azul -> violeta
+  --pi-color-primary-10: #fdfcff;
+  --pi-color-primary-25: #fbf9ff;
+  --pi-color-primary-50: #f4f0ff;
+  --pi-color-primary-75: #ede6ff;
+  --pi-color-primary-100: #ded1fb;
+  --pi-color-primary-200: #cbb8ff;
+  --pi-color-primary-200-rgba: rgba(203, 184, 255, 0.15);
+  --pi-color-primary-300: #b096ff;
+  --pi-color-primary-400: #9b7cf2;
+  --pi-color-primary: #8a63f0;
+  --pi-color-primary-900: #6a3fd4;
+
+  // Accent: ámbar -> turquesa
+  --pi-color-accent-10: #f7fefd;
+  --pi-color-accent-25: #edfcfa;
+  --pi-color-accent-50: #e0f7f4;
+  --pi-color-accent-75: #c4efe9;
+  --pi-color-accent-100: #a9e7de;
+  --pi-color-accent-200: #7dd9cc;
+  --pi-color-accent-200-rgba: rgba(125, 217, 204, 0.15);
+  --pi-color-accent-300: #4ec9b8;
+  --pi-color-accent-400: #2fbda9;
+  --pi-color-accent: #14b09a;
+  --pi-color-accent-900: #0d8f7e;
+
+  // Highlighted: azul marino -> ciruela
+  --pi-color-highlighted-10: #fdf9ff;
+  --pi-color-highlighted-25: #faf2ff;
+  --pi-color-highlighted-50: #f5e9ff;
+  --pi-color-highlighted-75: #ecdaff;
+  --pi-color-highlighted-100: #dcbcfa;
+  --pi-color-highlighted-200: #9a64d7;
+  --pi-color-highlighted-200-rgba: rgba(154, 100, 215, 0.15);
+  --pi-color-highlighted-300: #7d43c1;
+  --pi-color-highlighted-400: #521d8a;
+  --pi-color-highlighted: #3b0d6b;
+  --pi-color-highlighted-900: #1c033c;
+
+  // --- Botones: pastilla, degradado, versalitas -------------------------
+  --pi-theme-button-height: 2.875rem;
+  --pi-theme-button-radius: 999px;
+  --pi-theme-button-font-weight: 700;
+  --pi-theme-button-letter-spacing: 0.04em;
+  --pi-theme-button-text-transform: uppercase;
+  --pi-theme-button-shadow: 0 6px 16px -6px rgba(106, 63, 212, 0.55);
+  --pi-theme-button-transition: all 0.2s ease-out;
+  --pi-theme-button-fill-primary: linear-gradient(
+    100deg,
+    var(--pi-color-primary-900),
+    var(--pi-color-primary-400)
+  );
+  --pi-theme-button-fill-accent: linear-gradient(
+    100deg,
+    var(--pi-color-accent-900),
+    var(--pi-color-accent-400)
+  );
+  --pi-theme-button-fill-highlighted: linear-gradient(
+    100deg,
+    var(--pi-color-highlighted),
+    var(--pi-color-highlighted-300)
+  );
+
+  // --- Campos: superficie tintada, borde grueso, etiqueta en versalitas --
+  --pi-theme-field-radius: 999px;
+  --pi-theme-field-border-width: 2px;
+  --pi-theme-field-border-color: var(--pi-color-primary-100);
+  --pi-theme-field-border-color-hover: var(--pi-color-primary-300);
+  --pi-theme-field-border-color-focus: var(--pi-color-primary);
+  --pi-theme-field-surface: var(--pi-color-primary-25);
+  --pi-theme-field-label-color: var(--pi-color-primary-900);
+  --pi-theme-field-label-transform: uppercase;
+  --pi-theme-field-label-letter-spacing: 0.08em;
+  --pi-theme-field-label-weight: 700;
+
+  // --- Superficies ------------------------------------------------------
+  --pi-theme-card-radius: 1.5rem;
+  --pi-theme-card-shadow: 0 10px 30px -12px rgba(59, 13, 107, 0.28);
+  --pi-theme-panel-radius: 1.5rem;
+  --pi-theme-chip-radius: 0.25rem;
+}
+
+.pi-shell__alternative {
+  @include alternativeThemeTokens;
+}
+
+// Los overlays de Material se montan fuera del shell: se les propaga el tema
+// marcando el contenedor (lo hace la app al cambiar de tema).
+.cdk-overlay-container.pi-shell__alternative {
+  @include alternativeThemeTokens;
+}

libs/ui/src/lib/styles/themes/_default.scss

@@ -0,0 +1,75 @@
+// TEMA POR DEFECTO
+//
+// Este fichero es el *contrato* de theming de la librería: declara todos los
+// tokens `--pi-theme-*` que los componentes de `common/` consumen. Un tema
+// alternativo no necesita duplicar selectores: le basta con redefinir estos
+// tokens (ver `_alternative.scss`).
+//
+// Los valores viven en `.pi-shell` (no en `:root`) para que puedan convivir
+// varios temas en la misma página, y se repiten en `.cdk-overlay-container`
+// porque los overlays de Material (diálogos, snackbars, menús) se montan fuera
+// del árbol del shell y no heredarían nada.
+
+@mixin defaultThemeTokens {
+  // --- Botones ---------------------------------------------------------
+  --pi-theme-button-height: var(--pi-spacing-xxx-large);
+  --pi-theme-button-radius: var(--pi-border-radius-medium);
+  --pi-theme-button-font-weight: 600;
+  --pi-theme-button-letter-spacing: normal;
+  --pi-theme-button-text-transform: none;
+  --pi-theme-button-shadow: none;
+  --pi-theme-button-transition: background-color 0.16s ease-in;
+  // Superficie del relleno. Por defecto es plano (solo `background-color`);
+  // un tema puede inyectar aquí un degradado por color de marca.
+  --pi-theme-button-fill-primary: none;
+  --pi-theme-button-fill-accent: none;
+  --pi-theme-button-fill-warn: none;
+  --pi-theme-button-fill-success: none;
+  --pi-theme-button-fill-highlighted: none;
+
+  // --- Campos de formulario --------------------------------------------
+  --pi-theme-field-radius: 0.875rem;
+  --pi-theme-field-border-width: 1px;
+  --pi-theme-field-border-color: var(--pi-color-grey-200);
+  --pi-theme-field-border-color-hover: var(--pi-color-grey-300);
+  --pi-theme-field-border-color-focus: var(--pi-color-primary);
+  --pi-theme-field-surface: var(--pi-color-white);
+  --pi-theme-field-label-color: var(--pi-color-grey-300);
+  // La tipografía de la etiqueta y el radio del chip no se declaran: sus
+  // consumidores usan `var(--token, <valor original>)`, así el tema por
+  // defecto conserva exactamente el aspecto previo a los tokens.
+
+  // --- Superficies ------------------------------------------------------
+  --pi-theme-card-radius: var(--pi-border-radius-large);
+  --pi-theme-card-shadow: var(--pi-box-shadow-panel);
+  --pi-theme-panel-radius: var(--pi-border-radius-large);
+
+  // --- Puente con Angular Material --------------------------------------
+  // Los componentes de Material (slider, checkbox, radio, progress...) pintan
+  // con sus roles `--mat-sys-*`, que `mat.theme()` genera de una paleta propia
+  // y por tanto ignoran `--pi-color-*`. Aquí se reengancha una cosa con otra.
+  //
+  // Se define una sola vez, en el tema por defecto y por indirección
+  // (`var(--pi-color-*)`): como el tema alternativo redefine esas variables,
+  // Material le sigue solo, sin repetir este bloque.
+  --mat-sys-primary: var(--pi-color-primary);
+  --mat-sys-on-primary: var(--pi-color-white);
+  --mat-sys-primary-container: var(--pi-color-primary-100);
+  --mat-sys-on-primary-container: var(--pi-color-primary-900);
+  --mat-sys-secondary: var(--pi-color-accent);
+  --mat-sys-on-secondary: var(--pi-color-white);
+  --mat-sys-secondary-container: var(--pi-color-accent-100);
+  --mat-sys-on-secondary-container: var(--pi-color-accent-900);
+  --mat-sys-tertiary: var(--pi-color-highlighted);
+  --mat-sys-on-tertiary: var(--pi-color-white);
+  --mat-sys-error: var(--pi-color-warn);
+  --mat-sys-on-error: var(--pi-color-white);
+}
+
+// Base para *todos* los shells: así un tema solo tiene que declarar lo que
+// cambia, y lo que no redefina sigue teniendo valor (incluido el puente con
+// Material). Los temas concretos se aplican encima; ver `_alternative.scss`.
+.pi-shell,
+.cdk-overlay-container {
+  @include defaultThemeTokens;
+}

libs/ui/src/lib/styles/themes/index.scss

@@ -0,0 +1,7 @@
+// El orden importa: `default` declara el contrato completo de tokens y
+// `alternative` lo sobreescribe.
+@forward 'default';
+@forward 'alternative';
+
+@use 'default' as *;
+@use 'alternative' as *;

libs/ui/src/lib/ui/accordion/accordion/accordion.component.html

@@ -176,8 +176,8 @@
 
 <ng-template #defaultHeader let-item>
   <pi-text-viewer
-    [label]="item?.title"
-    [value]="item?.subtitle"
+    [label]="item?.title()"
+    [value]="item?.subtitle()"
     flexDirection="column"
     fontWeight="600-300"
     fontSize="m-xs"

libs/ui/src/lib/ui/button/icon-button/icon-button.component.html

@@ -23,7 +23,7 @@
     @if (text()) {
       <span>{{ text() }}</span>
     }
-    <ng-content></ng-content>
+    <span #projectedText><ng-content></ng-content></span>
     <img src="/assets/icons/{{ icon() }}.svg" />
   </button>
 } @else {
@@ -54,7 +54,7 @@
     @if (text()) {
       <span>{{ text() }}</span>
     }
-    <ng-content></ng-content>
+    <span #projectedText><ng-content></ng-content></span>
     @if (!previous()) {
       <mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
     }

libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts

@@ -1,9 +1,11 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
   HostBinding,
   input,
+  signal,
   viewChild,
 } from '@angular/core';
 import { buttonSize, mode } from '../../../styles';
@@ -18,7 +20,10 @@ import { MatIcon } from '@angular/material/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [MatIcon],
 })
-export class PiIconButtonComponent extends PiBaseButtonComponent {
+export class PiIconButtonComponent
+  extends PiBaseButtonComponent
+  implements AfterViewInit
+{
   @HostBinding('class') get classes(): string {
     const customIconClass =
       this.iconType() === 'custom' && 'pi-icon-button__custom-icon';
@@ -58,8 +63,27 @@ export class PiIconButtonComponent extends PiBaseButtonComponent {
     return width ? `pi-button__${width}` : null;
   }
 
+  /**
+   * La etiqueta se puede dar de dos formas: por el input `text` o proyectando
+   * contenido (`<pi-icon-button>Siguiente</pi-icon-button>`). La plantilla
+   * pinta ambas, pero esta clase solo miraba `text`, así que los consumidores
+   * que proyectan (el banner, el paginador) quedaban marcados como «solo
+   * icono» y el botón colapsaba al cuadrado del icono, partiendo el texto.
+   */
+  private readonly projectedText =
+    viewChild<ElementRef<HTMLElement>>('projectedText');
+
+  protected readonly hasProjectedText = signal(false);
+
+  ngAfterViewInit(): void {
+    const el = this.projectedText()?.nativeElement;
+    this.hasProjectedText.set(!!el?.textContent?.trim());
+  }
+
   get textClass(): string | null {
-    return this.text() ? 'has-text' : 'pi-button__icon--single';
+    return this.text() || this.hasProjectedText()
+      ? 'has-text'
+      : 'pi-button__icon--single';
   }
 
   get iconPositionClass(): string | null {

libs/ui/src/lib/ui/chip/styles/_size.scss

@@ -2,7 +2,7 @@
 @mixin chipSize($chip-height, $chip-border-radius) {
   &:not(.pi-chip-date):not(.pi-chip-value) {
     height: var(--pi-spacing-#{$chip-height});
-    border-radius: $chip-border-radius;
+    border-radius: var(--pi-theme-chip-radius, #{$chip-border-radius});
   }
 }
 
@@ -13,12 +13,12 @@
     &.pi-chip__single-icon {
       height: var(--pi-spacing-#{$chip-size});
       width: var(--pi-spacing-#{$chip-size});
-      border-radius: $border-radius;
+      border-radius: var(--pi-theme-chip-radius, #{$border-radius});
 
       .pi-chip-affix {
         height: var(--pi-spacing-#{$chip-size});
         width: var(--pi-spacing-#{$chip-size});
-        border-radius: $border-radius;
+        border-radius: var(--pi-theme-chip-radius, #{$border-radius});
         // Icon
         & > .pi-chip-affix__icon {
           height: var(--pi-spacing-#{$icon-size});
@@ -146,7 +146,7 @@
     &:not(.pi-chip__single-icon) {
       .pi-chip-affix {
         height: $size;
-        border-radius: $affix-border-radius;
+        border-radius: var(--pi-theme-chip-radius, #{$affix-border-radius});
       }
     }
 

libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html

@@ -96,7 +96,10 @@ Data Direction:
 ROW
 -->
 
+<!--
+  Respaldo cuando el consumidor no proporciona `#keysTemplate`/`#valuesTemplate`:
+  se pinta un esqueleto de carga en lugar de un texto de error suelto.
+-->
 <ng-template #defaultErrorTemplate>
-  <!-- Add data grid skeleton template -->
-  <span>Template Error</span>
+  <pi-skeleton [lines]="3" />
 </ng-template>

libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts

@@ -19,12 +19,13 @@ import {
 } from '../entities/data-grid.model';
 import { NgTemplateOutlet } from '@angular/common';
 import { PiGridItemDirective } from '../directives/grid-item.directive';
+import { PiSkeletonComponent } from '../../progress/skeleton/skeleton.component';
 
 @Component({
   selector: 'pi-data-grid',
   templateUrl: './data-grid.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [PiGridItemDirective, NgTemplateOutlet],
+  imports: [PiGridItemDirective, NgTemplateOutlet, PiSkeletonComponent],
 })
 export class PiDataGridComponent<T> {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/file-upload/file-upload/file-upload.component.html

@@ -0,0 +1,58 @@
+<!--
+  La zona es un <button>: así entra en el orden de tabulación y responde a
+  Enter/Espacio sin necesidad de gestionar teclas a mano.
+-->
+<button
+  type="button"
+  class="pi-file-upload__dropzone"
+  [disabled]="disabled()"
+  (click)="openPicker()"
+>
+  <pi-icon icon="upload" color="primary" size="large" />
+  <span class="pi-file-upload__label">{{ label() | translate }}</span>
+  @if (hint()) {
+    <small class="pi-file-upload__hint">{{ hint() | translate }}</small>
+  }
+</button>
+
+<input
+  #fileInput
+  type="file"
+  class="pi-file-upload__native"
+  [accept]="accept()"
+  [multiple]="multiple()"
+  [disabled]="disabled()"
+  [required]="required()"
+  [name]="name()"
+  (change)="onPicked($event)"
+  (blur)="touch.emit()"
+/>
+
+@if (value().length) {
+  <ul class="pi-file-upload__files">
+    @for (file of value(); track file.name + file.size; let i = $index) {
+      <li class="pi-file-upload__file">
+        <pi-icon icon="document" color="grey" size="x-small" />
+        <span class="pi-file-upload__file-name">{{ file.name }}</span>
+        <small>{{ readableSize(file.size) }}</small>
+        <button
+          type="button"
+          class="pi-file-upload__remove"
+          [disabled]="disabled()"
+          [attr.aria-label]="'common.close' | translate"
+          (click)="remove(i)"
+        >
+          <pi-icon icon="close" color="grey" size="x-small" />
+        </button>
+      </li>
+    }
+  </ul>
+}
+
+@if (enableErrorMessage() && hasError()) {
+  <span class="pi-file-upload__error">
+    @for (message of errorMessages(); track message) {
+      {{ message | translate }}
+    }
+  </span>
+}

libs/ui/src/lib/ui/file-upload/file-upload/file-upload.component.scss

@@ -0,0 +1,106 @@
+:host {
+  display: block;
+}
+
+.pi-file-upload {
+  &__dropzone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--pi-spacing-xx-small);
+    width: 100%;
+    padding: var(--pi-spacing-x-large);
+    border: 2px dashed var(--pi-theme-field-border-color);
+    border-radius: var(--pi-theme-field-radius, var(--pi-border-radius-large));
+    background-color: var(--pi-theme-field-surface);
+    color: var(--pi-color-grey);
+    font-family: inherit;
+    cursor: pointer;
+    transition: var(--pi-theme-button-transition);
+
+    &:hover:not(:disabled) {
+      border-color: var(--pi-theme-field-border-color-hover);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  &__label {
+    color: var(--pi-color-black);
+    font-size: var(--pi-font-size-small);
+    font-weight: 600;
+  }
+
+  &__hint {
+    font-size: var(--pi-font-size-xx-small);
+  }
+
+  // El input nativo se oculta: lo abre el botón de la zona de arrastre.
+  &__native {
+    display: none;
+  }
+
+  &__files {
+    display: flex;
+    flex-direction: column;
+    gap: var(--pi-spacing-xxx-small);
+    margin: var(--pi-spacing-x-small) 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__file {
+    display: flex;
+    align-items: center;
+    gap: var(--pi-spacing-xx-small);
+    padding: var(--pi-spacing-xx-small) var(--pi-spacing-x-small);
+    border-radius: var(--pi-border-radius-small);
+    background-color: var(--pi-color-grey-25);
+    font-size: var(--pi-font-size-x-small);
+
+    small {
+      color: var(--pi-color-grey);
+    }
+  }
+
+  &__file-name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--pi-color-black);
+  }
+
+  &__remove {
+    display: flex;
+    padding: 0;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  &__error {
+    display: block;
+    margin-top: var(--pi-spacing-xx-small);
+    color: var(--pi-color-warn);
+    font-size: var(--pi-font-size-x-small);
+  }
+}
+
+// Realce mientras se arrastra un fichero encima.
+:host(.is-dragging) .pi-file-upload__dropzone {
+  border-color: var(--pi-color-primary);
+  background-color: var(--pi-color-primary-50);
+}
+
+:host(.has-error) .pi-file-upload__dropzone {
+  border-color: var(--pi-color-warn);
+}

libs/ui/src/lib/ui/file-upload/file-upload/file-upload.component.ts

@@ -0,0 +1,204 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  HostListener,
+  computed,
+  input,
+  model,
+  output,
+  signal,
+  viewChild,
+  ElementRef,
+} from '@angular/core';
+import { FormValueControl, ValidationError } from '@angular/forms/signals';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ComponentFamilyClass } from '../../../styles';
+import { PiIconComponent } from '../../icon/icon/icon.component';
+
+/** Motivo por el que se descartó un fichero. */
+export type PiFileRejectionReason = 'type' | 'size' | 'max-files';
+
+export interface PiFileRejection {
+  file: File;
+  reason: PiFileRejectionReason;
+}
+
+/**
+ * Subida de ficheros con arrastrar y soltar.
+ *
+ * `ComponentFamilyClass` ya declaraba la familia `file-upload` pero no existía
+ * ni componente ni estilos.
+ *
+ * Implementa `FormValueControl<File[]>`, así que se enlaza con `[formField]`
+ * como cualquier otro campo. La validación de tipo y tamaño se resuelve aquí
+ * (el navegador solo filtra en el diálogo, no al soltar) y lo rechazado se
+ * comunica por `rejected` en vez de descartarse en silencio.
+ */
+@Component({
+  selector: 'pi-file-upload',
+  templateUrl: './file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [PiIconComponent, TranslatePipe],
+})
+export class PiFileUploadComponent implements FormValueControl<File[]> {
+  @HostBinding('class') get classes(): string {
+    return [
+      ComponentFamilyClass.FileUpload,
+      this.isDragging() ? 'is-dragging' : '',
+      this.disabled() ? 'is-disabled' : '',
+      this.hasError() ? 'has-error' : '',
+    ].join(' ');
+  }
+
+  /* --- Contrato FormValueControl --------------------------------------- */
+
+  readonly value = model<File[]>([]);
+
+  readonly errors = input<readonly ValidationError.WithOptionalFieldTree[]>([]);
+  readonly disabled = input(false);
+  readonly required = input(false);
+  readonly name = input('');
+
+  readonly touch = output<void>();
+
+  /* --- Configuración ---------------------------------------------------- */
+
+  /** Igual que el `accept` nativo: `image/*`, `.pdf`, … */
+  readonly accept = input<string>('');
+
+  readonly multiple = input(false);
+
+  /** Tamaño máximo por fichero, en bytes. */
+  readonly maxSizeBytes = input<number>();
+
+  /** Número máximo de ficheros cuando `multiple` está activo. */
+  readonly maxFiles = input<number>();
+
+  readonly label = input('common.fileUpload.dropHere');
+  readonly hint = input<string>();
+
+  readonly enableErrorMessage = input(true);
+
+  /** Ficheros descartados en el último intento. */
+  readonly rejected = output<PiFileRejection[]>();
+
+  private readonly fileInput =
+    viewChild<ElementRef<HTMLInputElement>>('fileInput');
+
+  protected readonly isDragging = signal(false);
+
+  protected readonly errorMessages = computed(() =>
+    this.errors().map((error) => error.message ?? error.kind),
+  );
+
+  protected readonly hasError = computed(() => this.errors().length > 0);
+
+  /* --- Arrastrar y soltar ----------------------------------------------- */
+
+  @HostListener('dragover', ['$event'])
+  protected onDragOver(event: DragEvent): void {
+    if (this.disabled()) return;
+    // Sin `preventDefault` el navegador abriría el fichero en la pestaña.
+    event.preventDefault();
+    this.isDragging.set(true);
+  }
+
+  @HostListener('dragleave', ['$event'])
+  protected onDragLeave(event: DragEvent): void {
+    event.preventDefault();
+    this.isDragging.set(false);
+  }
+
+  @HostListener('drop', ['$event'])
+  protected onDrop(event: DragEvent): void {
+    if (this.disabled()) return;
+    event.preventDefault();
+    this.isDragging.set(false);
+    this.addFiles(Array.from(event.dataTransfer?.files ?? []));
+  }
+
+  protected openPicker(): void {
+    if (this.disabled()) return;
+    this.fileInput()?.nativeElement.click();
+  }
+
+  protected onPicked(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.addFiles(Array.from(input.files ?? []));
+    // Permite volver a elegir el mismo fichero justo después.
+    input.value = '';
+  }
+
+  protected remove(index: number): void {
+    const next = [...this.value()];
+    next.splice(index, 1);
+    this.value.set(next);
+    this.touch.emit();
+  }
+
+  /** Tamaño legible; se usa en la lista de ficheros. */
+  protected readableSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+
+  private addFiles(incoming: File[]): void {
+    if (!incoming.length) return;
+
+    const rejections: PiFileRejection[] = [];
+    const accepted: File[] = [];
+
+    for (const file of incoming) {
+      if (!this.matchesAccept(file)) {
+        rejections.push({ file, reason: 'type' });
+        continue;
+      }
+      const maxSize = this.maxSizeBytes();
+      if (maxSize !== undefined && file.size > maxSize) {
+        rejections.push({ file, reason: 'size' });
+        continue;
+      }
+      accepted.push(file);
+    }
+
+    // En modo simple el último sustituye al anterior.
+    let next = this.multiple() ? [...this.value(), ...accepted] : accepted.slice(-1);
+
+    const maxFiles = this.maxFiles();
+    if (this.multiple() && maxFiles !== undefined && next.length > maxFiles) {
+      for (const file of next.slice(maxFiles)) {
+        rejections.push({ file, reason: 'max-files' });
+      }
+      next = next.slice(0, maxFiles);
+    }
+
+    this.value.set(next);
+    this.touch.emit();
+    if (rejections.length) this.rejected.emit(rejections);
+  }
+
+  /**
+   * Réplica de la comprobación del `accept` nativo, necesaria porque al soltar
+   * ficheros el navegador no filtra nada.
+   */
+  private matchesAccept(file: File): boolean {
+    const accept = this.accept().trim();
+    if (!accept) return true;
+
+    return accept.split(',').some((rawPattern) => {
+      const pattern = rawPattern.trim().toLowerCase();
+      if (!pattern) return false;
+      if (pattern.startsWith('.')) {
+        return file.name.toLowerCase().endsWith(pattern);
+      }
+      if (pattern.endsWith('/*')) {
+        return file.type.toLowerCase().startsWith(pattern.slice(0, -1));
+      }
+      return file.type.toLowerCase() === pattern;
+    });
+  }
+}

libs/ui/src/lib/ui/file-upload/index.ts

@@ -0,0 +1 @@
+export * from './file-upload/file-upload.component';

libs/ui/src/lib/ui/form-field/base-form-field.component.ts

@@ -3,12 +3,16 @@ import {
   Component,
   HostBinding,
   computed,
+  effect,
   input,
   model,
   output,
   signal,
+  viewChild,
 } from '@angular/core';
 import { FormValueControl, ValidationError } from '@angular/forms/signals';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { MatInput } from '@angular/material/input';
 import { ComponentFamilyClass } from '../../styles';
 
 /**
@@ -74,6 +78,35 @@ export abstract class PiBaseFormFieldComponent<
 
   protected readonly hasError = computed(() => this.errors().length > 0);
 
+  /**
+   * `MatInput` normalmente deriva `errorState` de un `NgControl` (`ngModel`,
+   * `formControlName`...); aquí no hay ninguno, el estado vive en `errors()`
+   * (relleno por la directiva `FormField` de Signal Forms). Sin este matcher
+   * Material nunca marca el campo como inválido (ni borde rojo ni mensaje),
+   * pase lo que pase con `touched`/`invalid`.
+   */
+  protected readonly errorStateMatcher: ErrorStateMatcher = {
+    isErrorState: () => this.hasError(),
+  };
+
+  /**
+   * Sin `NgControl`, el `ngDoCheck` de `MatInput` nunca recalcula
+   * `errorState` por sí solo, así que forzamos el recálculo a mano cada vez
+   * que cambian los errores. Si el campo concreto no usa `matInput` (p. ej.
+   * `pi-search-field`), `matInputRef()` sale `undefined` y no hace nada.
+   */
+  private readonly matInputRef = viewChild(MatInput);
+
+  constructor() {
+    effect(() => {
+      this.hasError();
+      const matInput = this.matInputRef();
+      if (!matInput) return;
+      matInput.errorStateMatcher = this.errorStateMatcher;
+      matInput.updateErrorState();
+    });
+  }
+
   protected get focusedClass(): string | boolean {
     return this.focused() ? 'is-focused' : false;
   }

libs/ui/src/lib/ui/form-field/checkbox/checkbox.component.html

@@ -0,0 +1,22 @@
+<mat-checkbox
+  [id]="inputId()"
+  [checked]="checked()"
+  [indeterminate]="indeterminate()"
+  [disabled]="disabled()"
+  [required]="required()"
+  (change)="onChange($any($event).checked)"
+  (blur)="touch.emit()"
+>
+  @if (label()) {
+    {{ label() | translate }}
+  }
+  <ng-content />
+</mat-checkbox>
+
+@if (enableErrorMessage() && hasError()) {
+  <span class="pi-checkbox__error">
+    @for (message of errorMessages(); track message) {
+      {{ message | translate }}
+    }
+  </span>
+}

libs/ui/src/lib/ui/form-field/checkbox/checkbox.component.ts

@@ -0,0 +1,89 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  computed,
+  input,
+  model,
+  output,
+} from '@angular/core';
+import { FormCheckboxControl, ValidationError } from '@angular/forms/signals';
+import { MatCheckbox } from '@angular/material/checkbox';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { ComponentFamilyClass } from '../../../styles';
+
+/** Contador para dar un `id` único a cada instancia. */
+let nextUniqueId = 0;
+
+/**
+ * Casilla de verificación.
+ *
+ * Implementa `FormCheckboxControl` (como `pi-slide-toggle`): el contrato de
+ * Signal Forms para casillas usa `checked` y prohíbe declarar `value`, así que
+ * no puede extender `PiBaseFormFieldComponent`.
+ *
+ * Envuelve `MatCheckbox` a propósito: los estilos de la librería
+ * (`common/vendors/_mat-checkbox.scss`) apuntan a las clases `.mat-mdc-checkbox`
+ * y `.mdc-checkbox__*`, así que heredarlos exige el componente de Material
+ * debajo.
+ */
+@Component({
+  selector: 'pi-checkbox',
+  templateUrl: './checkbox.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatCheckbox, TranslatePipe],
+})
+export class PiCheckboxComponent implements FormCheckboxControl {
+  @HostBinding('class') get classes(): string {
+    return [
+      ComponentFamilyClass.Field,
+      'pi-checkbox',
+      this.checked() ? 'is-checked' : '',
+      this.disabled() ? 'is-disabled' : '',
+      this.hasError() ? 'has-error' : '',
+    ].join(' ');
+  }
+
+  /* --- Contrato FormCheckboxControl ------------------------------------ */
+
+  readonly checked = model(false);
+  readonly disabled = input(false);
+  readonly required = input(false);
+  readonly name = input('');
+  readonly errors = input<readonly ValidationError.WithOptionalFieldTree[]>([]);
+
+  readonly touch = output<void>();
+
+  /* --- Presentación ----------------------------------------------------- */
+
+  /** Texto de la casilla. También se puede proyectar contenido libre. */
+  readonly label = input<string>();
+
+  /** Estado intermedio, para casillas que agrupan a otras. */
+  readonly indeterminate = model(false);
+
+  readonly enableErrorMessage = input(true);
+
+  /** Mismo criterio que `PiBaseFormFieldComponent`. */
+  protected readonly errorMessages = computed(() =>
+    this.errors().map((error) => error.message ?? error.kind),
+  );
+
+  protected readonly hasError = computed(() => this.errors().length > 0);
+
+  /**
+   * `name` solo lo rellena la directiva `FormField`; suelto llega vacío. Sin
+   * este respaldo todas las instancias compartirían `id` y el `for` del
+   * `<label>` apuntaría siempre a la primera de la página.
+   */
+  private readonly uniqueId = `pi-checkbox-${nextUniqueId++}`;
+
+  protected readonly inputId = computed(() => this.name() || this.uniqueId);
+
+  protected onChange(isChecked: boolean): void {
+    this.checked.set(isChecked);
+    this.indeterminate.set(false);
+    this.touch.emit();
+  }
+}

libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.html

@@ -20,12 +20,12 @@
     pi-autofocus
     [isAutofocusSelected]="isAutofocus()"
   />
-
-  @if (enableErrorMessage() && hasError()) {
-    <mat-error>
-      @for (message of errorMessages(); track message) {
-        {{ message | translate }}
-      }
-    </mat-error>
-  }
 </mat-form-field>
+
+@if (enableErrorMessage() && hasError()) {
+  <mat-error>
+    @for (message of errorMessages(); track message) {
+      {{ message | translate }}
+    }
+  </mat-error>
+}

libs/ui/src/lib/ui/form-field/date-field/date-field.component.html

@@ -0,0 +1,28 @@
+<mat-form-field [appearance]="appearance()" floatLabel="always">
+  <mat-label><ng-content select="pi-label"></ng-content></mat-label>
+
+  <input
+    matInput
+    [matDatepicker]="picker"
+    [value]="value()"
+    [min]="min() ?? null"
+    [max]="max() ?? null"
+    [matDatepickerFilter]="dateFilter()"
+    [placeholder]="placeholder()!"
+    [disabled]="disabled()"
+    (dateChange)="onDateChange($any($event).value)"
+    (focus)="onFocus()"
+    (blur)="onBlur()"
+  />
+
+  <mat-datepicker-toggle matSuffix [for]="picker" />
+  <mat-datepicker #picker />
+</mat-form-field>
+
+@if (enableErrorMessage() && hasError()) {
+  <mat-error>
+    @for (message of errorMessages(); track message) {
+      {{ message | translate }}
+    }
+  </mat-error>
+}

libs/ui/src/lib/ui/form-field/date-field/date-field.component.ts

@@ -0,0 +1,68 @@
+import { ChangeDetectionStrategy, Component, HostBinding, input } from '@angular/core';
+import {
+  MatFormField,
+  MatLabel,
+  MatSuffix,
+  MatError,
+} from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import {
+  MatDatepicker,
+  MatDatepickerInput,
+  MatDatepickerToggle,
+} from '@angular/material/datepicker';
+import { provideNativeDateAdapter } from '@angular/material/core';
+import { TranslatePipe } from '@ngx-translate/core';
+
+import { PiBaseFormFieldComponent } from '../base-form-field.component';
+
+/**
+ * Campo de fecha.
+ *
+ * La librería ya traía todo el andamiaje de fechas (`pi-chip-date`,
+ * `pi-chip-time`, `pi-select-period`, el patrón `monthYearPattern`) pero no un
+ * selector. Este lo completa.
+ *
+ * Extiende `PiBaseFormFieldComponent` y envuelve `mat-form-field`, así hereda
+ * sin trabajo extra los tokens de tema y el `errorStateMatcher` que hace
+ * aparecer el borde rojo y el mensaje.
+ *
+ * Se provee aquí el adaptador nativo de fechas (trabaja con `Date`): el
+ * proyecto no tiene instalado ningún adaptador de luxon o moment, así que sin
+ * esto el datepicker fallaría al inyectar `DateAdapter`.
+ */
+@Component({
+  selector: 'pi-date-field',
+  templateUrl: './date-field.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideNativeDateAdapter()],
+  imports: [
+    MatFormField,
+    MatLabel,
+    MatSuffix,
+    MatInput,
+    MatDatepicker,
+    MatDatepickerInput,
+    MatDatepickerToggle,
+    MatError,
+    TranslatePipe,
+  ],
+})
+export class PiDateFieldComponent extends PiBaseFormFieldComponent<Date | null> {
+  @HostBinding('class') className = 'pi-form-field__date';
+
+  /**
+   * `min` y `max` forman parte del contrato `FormUiControl`: si el campo
+   * enlazado declara validadores `minDate`/`maxDate`, la directiva `FormField`
+   * los inyecta aquí.
+   */
+  readonly min = input<Date | undefined>(undefined);
+  readonly max = input<Date | undefined>(undefined);
+
+  /** Deshabilita días sueltos (fines de semana, festivos...). */
+  readonly dateFilter = input<(date: Date | null) => boolean>(() => true);
+
+  protected onDateChange(value: Date | null): void {
+    this.value.set(value);
+  }
+}

libs/ui/src/lib/ui/form-field/email-field/email-field.component.html

@@ -17,12 +17,12 @@
     pi-autofocus
     [isAutofocusSelected]="isAutofocus()"
   />
-
-  @if (enableErrorMessage() && hasError()) {
-    <mat-error>
-      @for (message of errorMessages(); track message) {
-        {{ message | translate }}
-      }
-    </mat-error>
-  }
 </mat-form-field>
+
+@if (enableErrorMessage() && hasError()) {
+  <mat-error>
+    @for (message of errorMessages(); track message) {
+      {{ message | translate }}
+    }
+  </mat-error>
+}

libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.html

@@ -6,7 +6,7 @@
     appearance="fill"
     [isStroked]="true"
   ></pi-icon>
-  <mat-form-field appearance="fill" floatLabel="always">
+  <mat-form-field [appearance]="appearance()" floatLabel="always">
     <mat-label><ng-content select="pi-label"></ng-content></mat-label>
     <input
       [value]="value()"