@festo-ui/web-essentials 7.3.0-dev.461 → 7.3.0-dev.464

package/dist/scss/_chips.scss

@@ -1,6 +1,9 @@
+@use "icons";
+@use "variables";
+
 %chip-lg {
-  font-size: $font-size-base;
-  border-radius: $border-radius-xl;
+  font-size: variables.$font-size-base;
+  border-radius: variables.$border-radius-xl;
   padding: 0px 16px;
   height: 32px;
   i[class^="fwe-icon-"],
@@ -45,13 +48,13 @@
   position: relative;
   display: flex;
   align-items: center;
-  font-size: $font-size-md;
+  font-size: variables.$font-size-md;
   text-align: center;
-  border-radius: $border-radius-l;
+  border-radius: variables.$border-radius-l;
   cursor: pointer;
-  background: $control;
-  color: $text;
-  border: 1px solid $control;
+  background: variables.$control;
+  color: variables.$text;
+  border: 1px solid variables.$control;
   box-sizing: border-box;
   padding: 0px 12px;
   i[class^="fwe-icon-"],
@@ -62,18 +65,18 @@
     line-height: 1;
   }
   &:hover {
-    background: $control-hover;
-    border: 1px solid $control-hover;
+    background: variables.$control-hover;
+    border: 1px solid variables.$control-hover;
   }
   &:active {
-    background: $control-active;
-    border: 1px solid $control-active;
+    background: variables.$control-active;
+    border: 1px solid variables.$control-active;
   }
   &.fwe-selected {
     cursor: default;
     background: transparent;
-    border: 1px solid $hero;
-    color: $hero;
+    border: 1px solid variables.$hero;
+    color: variables.$hero;
     &.fwe-category {
       cursor: pointer;
       padding-right: 24px;
@@ -87,13 +90,13 @@
         background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYTAwMzhlNDEtMjFlNi00ZjBlLWFmZjctMzViMzY2MWQ0ZDhlIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCgk8ZyBpZD0iZmQwZDc0NmQtZTE2My00Yjk4LTkxYTctYjk0MGYyYTlkZDc4IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCI+DQoJCTxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIvPg0KCTwvZz4NCgk8ZyBpZD0iYTE4OTFiZmMtNDBjMS00Y2EwLWFmOTgtMmJiOTQ1YTdmMDFmIiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCI+DQoJCTxwb2x5Z29uIHBvaW50cz0iMTAuMjQgNS4wNSA4IDcuMyA1Ljc1IDUuMDUgNS4wNSA1Ljc2IDcuMjkgOCA1LjA1IDEwLjI1IDUuNzUgMTAuOTUgOCA4LjcxIDEwLjI0IDEwLjk1IDEwLjk1IDEwLjI1IDguNyA4IDEwLjk1IDUuNzYgMTAuMjQgNS4wNSAxMC4yNCA1LjA1IiBmaWxsPSIjMzMzIi8+DQoJPC9nPg0KPC9zdmc+");
       }
       &:hover {
-        background: $gray-100;
+        background: variables.$gray-100;
         &::after {
           background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iYTAwMzhlNDEtMjFlNi00ZjBlLWFmZjctMzViMzY2MWQ0ZDhlIiBkYXRhLW5hbWU9ImNvbnRlbnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDE2IDE2Ij4NCgk8ZyBpZD0iZmQwZDc0NmQtZTE2My00Yjk4LTkxYTctYjk0MGYyYTlkZDc4IiBkYXRhLW5hbWU9ImFiYjU1YWU4LWNhNTUtNDcwYy04N2MzLTRiMDY3MzhiNDM2MCI+DQoJCTxyZWN0IHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0ibm9uZSIvPg0KCTwvZz4NCgk8ZyBpZD0iYTE4OTFiZmMtNDBjMS00Y2EwLWFmOTgtMmJiOTQ1YTdmMDFmIiBkYXRhLW5hbWU9ImI2NGIxZWQyLWI4MzEtNDM1Yy05Y2VlLWI5OTY0MjYwMjA5ZCI+DQoJCTxwb2x5Z29uIHBvaW50cz0iMTAuMjQgNS4wNSA4IDcuMyA1Ljc1IDUuMDUgNS4wNSA1Ljc2IDcuMjkgOCA1LjA1IDEwLjI1IDUuNzUgMTAuOTUgOCA4LjcxIDEwLjI0IDEwLjk1IDEwLjk1IDEwLjI1IDguNyA4IDEwLjk1IDUuNzYgMTAuMjQgNS4wNSAxMC4yNCA1LjA1IiBmaWxsPSIjMDA5MWRjIi8+DQoJPC9nPg0KPC9zdmc+");
         }
       }
       &:active {
-        background: $gray-200;
+        background: variables.$gray-200;
       }
     }
     &.fwe-filter {
@@ -109,24 +112,24 @@
         background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+DQoJPGcgaWQ9ImJhNmJmZGNhLWJhMzgtNDczMC04MjlkLTcyYmIzNzI3YjUzNCIgZGF0YS1uYW1lPSJjb250ZW50Ij4NCgkJPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJub25lIi8+DQoJCTxwb2x5Z29uIHBvaW50cz0iNi4xNDEgMTIuODE0IDEuOTM0IDguNjA3IDMuMzQ4IDcuMTkzIDYuMTQxIDkuOTg2IDEyLjkzNCAzLjE5MyAxNC4zNDggNC42MDcgNi4xNDEgMTIuODE0IiBmaWxsPSIjMDA5MWRjIi8+DQoJPC9nPg0KPC9zdmc+");
       }
       &:hover {
-        background: $gray-100;
+        background: variables.$gray-100;
       }
       &:active {
-        background: $gray-200;
+        background: variables.$gray-200;
       }
     }
   }
   &.fwe-readonly {
     cursor: default;
     background: transparent;
-    color: $text-light;
-    border: 1px solid $text-light;
+    color: variables.$text-light;
+    border: 1px solid variables.$text-light;
   }
   &.fwe-disabled {
     cursor: default;
-    background: $control-disabled;
-    border: 1px solid $control-disabled;
-    color: $text-disabled;
+    background: variables.$control-disabled;
+    border: 1px solid variables.$control-disabled;
+    color: variables.$text-disabled;
 
     &.fwe-filter.fwe-selected {
       cursor: default;

package/dist/scss/_colors.scss

@@ -1,4 +1,6 @@
-@each $key, $value in $colors {
+@use "variables";
+
+@each $key, $value in variables.$colors {
   .fwe-color-#{$key} {
     color: $value !important;
   }

package/dist/scss/_display.scss

@@ -1,4 +1,8 @@
-@import "mixins";
+@use "sass:map";
+@use "mixins";
+@use "utils";
+@use "variables";
+
 @mixin displays($infix: "") {
   .fwe-d#{$infix}-none {
     display: none !important;
@@ -41,9 +45,9 @@
   }
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $size: map-get($grid-breakpoints, $breakpoint);
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
 
   @if $size == 0 {
     @include displays();
@@ -55,5 +59,5 @@
 }
 
 .fwe-sr-only {
-  @include visual-hidden();
+  @include mixins.visual-hidden();
 }

package/dist/scss/_flex.scss

@@ -1,3 +1,8 @@
+@use "sass:list";
+@use "sass:map";
+@use "utils";
+@use "variables";
+
 $basic-keywords: normal, stretch, center, start, end, flex-start, flex-end;
 $baseline-keywords: baseline, first baseline, last baseline, safe center, unsafe center;
 $positional-keywords: left, right;
@@ -157,8 +162,8 @@ $flex-properties: (
   }
 
   @each $classname, $properties in $flex-properties {
-    $property: nth($properties, 1);
-    $value: nth($properties, 2);
+    $property: list.nth($properties, 1);
+    $value: list.nth($properties, 2);
 
     .fwe-flex#{$infix}-#{$classname} {
       #{$property}: $value !important;
@@ -250,9 +255,9 @@ $flex-properties: (
   }
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $size: map-get($grid-breakpoints, $breakpoint);
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
 
   @if $size == 0 {
     @include flex-helpers();

package/dist/scss/_fonts.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 /* Festo regular */
 @font-face {
   font-family: "Festo";
@@ -39,27 +41,27 @@
 }
 
 .fwe-font-size-small {
-  font-size: $font-size-small;
+  font-size: variables.$font-size-small;
 }
 
 .fwe-font-size-md {
-  font-size: $font-size-md;
+  font-size: variables.$font-size-md;
 }
 
 .fwe-font-size-base {
-  font-size: $font-size-base;
+  font-size: variables.$font-size-base;
 }
 
 .fwe-font-size-xl {
-  font-size: $font-size-xl;
+  font-size: variables.$font-size-xl;
 }
 
 .fwe-font-size-xxl {
-  font-size: $font-size-xxl;
+  font-size: variables.$font-size-xxl;
 }
 
 .fwe-line-height-base {
-  line-height: $line-height-base;
+  line-height: variables.$line-height-base;
 }
 
 .fwe-line-height-1 {
@@ -67,22 +69,22 @@
 }
 
 .fwe-font-weight-base {
-  font-weight: $font-weight-base;
+  font-weight: variables.$font-weight-base;
 }
 
 .fwe-font-weight-normal {
-  font-weight: $font-weight-normal;
+  font-weight: variables.$font-weight-normal;
 }
 
 .fwe-font-weight-bold {
-  font-weight: $font-weight-bold;
+  font-weight: variables.$font-weight-bold;
 }
 
 .fwe-font-family-sans-serif {
-  font-family: $font-family-sans-serif;
+  font-family: variables.$font-family-sans-serif;
 }
 
 .fwe-font-family-monospace,
 .fwe-font-family-code {
-  font-family: $font-family-monospace;
+  font-family: variables.$font-family-monospace;
 }

package/dist/scss/_grid.scss

@@ -1,9 +1,13 @@
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-  $size: map-get($grid-breakpoints, $breakpoint);
+@use "sass:map";
+@use "utils";
+@use "variables";
+
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $infix: utils.breakpoint-infix($breakpoint, variables.$grid-breakpoints);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
 
   @media (min-width: $size) {
-    @for $i from 1 through $grid-columns {
+    @for $i from 1 through variables.$grid-columns {
       .fwe-col#{$infix}-#{$i} {
         grid-column-end: span $i;
       }
@@ -12,7 +16,7 @@
         grid-column-start: 1;
       }
 
-      @if $i < $grid-columns {
+      @if $i < variables.$grid-columns {
         .fwe-offset#{$infix}-#{$i} {
           grid-column-start: $i + 1;
         }
@@ -23,8 +27,8 @@
 
 .fwe-grid {
   display: grid;
-  grid-template-columns: repeat($grid-columns, 1fr);
-  gap: $grid-gap;
+  grid-template-columns: repeat(variables.$grid-columns, 1fr);
+  gap: variables.$grid-gap;
 
   &.fwe-no-gap {
     gap: 0px;

package/dist/scss/_icons.scss

@@ -1,6 +1,8 @@
+@use "variables";
+
 .fwe-icon {
-  font-family: $font-family-icons-16; // this is needed to center the icons vertically
-  font-size: $font-size-base;
+  font-family: variables.$font-family-icons-16; // this is needed to center the icons vertically
+  font-size: variables.$font-size-base;
   display: inline-block;
   &:before {
     line-height: 1;
@@ -12,35 +14,35 @@
     text-transform: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: $font-family-icons-16;
+    font-family: variables.$font-family-icons-16;
   }
 }
 
 .fwe-icon-lg {
   font-size: 24px;
   &:before {
-    font-family: $font-family-icons-24 !important;
+    font-family: variables.$font-family-icons-24 !important;
   }
 }
 
 .fwe-icon-2x {
   font-size: 32px;
   &:before {
-    font-family: $font-family-icons-32 !important;
+    font-family: variables.$font-family-icons-32 !important;
   }
 }
 
 .fwe-icon-3x {
   font-size: 48px;
   &:before {
-    font-family: $font-family-icons-24 !important;
+    font-family: variables.$font-family-icons-24 !important;
   }
 }
 
 .fwe-icon-4x {
   font-size: 64px;
   &:before {
-    font-family: $font-family-icons-32 !important;
+    font-family: variables.$font-family-icons-32 !important;
   }
 }
 

package/dist/scss/_layout.scss

@@ -1,12 +1,15 @@
+@use "sass:map";
+@use "variables";
+
 .fwe-container {
-  padding: $container-padding;
+  padding: variables.$container-padding;
   box-sizing: border-box;
   width: 100%;
 }
 
-@each $breakpoint in map-keys($grid-breakpoints) {
-  $padding: map-get($container-paddings, $breakpoint);
-  $size: map-get($grid-breakpoints, $breakpoint);
+@each $breakpoint in map.keys(variables.$grid-breakpoints) {
+  $padding: map.get(variables.$container-paddings, $breakpoint);
+  $size: map.get(variables.$grid-breakpoints, $breakpoint);
 
   @if $size != 0 {
     @media (min-width: $size) {
@@ -26,15 +29,15 @@
     max-width: 1920px - 128;
     margin-right: 64px;
     margin-left: 64px;
-    @media (max-width: $grid-breakpoint-lg) {
+    @media (max-width: variables.$grid-breakpoint-lg) {
       margin-right: 32px;
       margin-left: 32px;
     }
-    @media (max-width: $grid-breakpoint-sm) {
+    @media (max-width: variables.$grid-breakpoint-sm) {
       margin-right: 16px;
       margin-left: 16px;
     }
-    @media (max-width: $grid-breakpoint-xs) {
+    @media (max-width: variables.$grid-breakpoint-xs) {
       margin-right: 8px;
       margin-left: 8px;
     }

package/dist/scss/_list.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 ul.fwe-list-group {
   margin: 0;
   padding: 0;
@@ -44,7 +46,7 @@ ul.fwe-list-group {
       display: flex;
       flex-grow: 1;
       width: 100%;
-      font-weight: $font-weight-bold;
+      font-weight: variables.$font-weight-bold;
       margin-bottom: 24px;
       margin-top: 16px;
     }
@@ -56,7 +58,7 @@ ul.fwe-list-group {
 
     .fwe-list-group-item-footer {
       width: 100%;
-      font-size: $font-size-small;
+      font-size: variables.$font-size-small;
       margin-bottom: 16px;
     }
 
@@ -67,7 +69,7 @@ ul.fwe-list-group {
       bottom: 0;
       width: 1px;
       left: 0;
-      background-color: $hero;
+      background-color: variables.$hero;
       transform-origin: left top;
       transform: scaleX(0);
       transition: transform 0.3s;
@@ -79,25 +81,25 @@ ul.fwe-list-group {
       }
 
       .fwe-list-group-item-head {
-        color: $hero;
+        color: variables.$hero;
       }
     }
 
     &.fwe-disabled {
-      color: $text-disabled;
+      color: variables.$text-disabled;
       &::before {
-        background-color: $control-hover;
+        background-color: variables.$control-hover;
       }
     }
   }
 
   a.fwe-list-group-item {
     cursor: pointer;
-    color: $text;
+    color: variables.$text;
 
     &:not(.fwe-disabled):hover {
-      color: $text;
-      background-color: $sucanul;
+      color: variables.$text;
+      background-color: variables.$sucanul;
     }
   }
 
@@ -110,14 +112,14 @@ ul.fwe-list-group {
     cursor: pointer;
 
     &:not(.fwe-disabled):hover {
-      background-color: $sucanul;
+      background-color: variables.$sucanul;
     }
   }
 
   &.fwe-list-group-border {
     .fwe-list-group-item,
     button.fwe-list-group-item {
-      border-bottom: 1px solid $border;
+      border-bottom: 1px solid variables.$border;
       &:last-child {
         border-bottom: none;
       }
@@ -150,28 +152,28 @@ ul.fwe-list-group {
         right: 0;
         width: 100%;
         height: 1px;
-        background-color: $hero;
+        background-color: variables.$hero;
         transform-origin: center bottom;
         transform: scaleY(0);
         transition: transform 0.3s;
       }
 
       &.fwe-active {
-        color: $hero;
+        color: variables.$hero;
 
         &::before {
           transform: scaleY(4);
         }
 
         .fwe-list-group-item-head {
-          color: $hero;
+          color: variables.$hero;
         }
       }
 
       &.fwe-disabled {
-        color: $text-disabled;
+        color: variables.$text-disabled;
         &::before {
-          background-color: $control-hover;
+          background-color: variables.$control-hover;
         }
       }
     }
@@ -189,7 +191,7 @@ ul.fwe-list-group {
       width: auto;
 
       &:not(.fwe-disabled):hover {
-        color: $hero;
+        color: variables.$hero;
         background-color: unset;
       }
     }
@@ -200,7 +202,7 @@ ul.fwe-list-group {
   display: flex;
   align-items: center;
   padding: 14px 24px;
-  border-bottom: 1px solid $border;
+  border-bottom: 1px solid variables.$border;
 
   button {
     margin-left: auto;

package/dist/scss/_loading-indicator.scss

@@ -1,10 +1,12 @@
+@use "variables";
+
 $spinner-duration: 3s;
 $pulsing-duration: 1s;
 
 @media (prefers-reduced-motion: reduce) {
   .fwe-waiting-circle-1 {
     animation: non-motion-animation $pulsing-duration infinite alternate !important;
-    border-color: $hero !important;
+    border-color: variables.$hero !important;
   }
 
   .fwe-waiting-circle-2,
@@ -23,7 +25,7 @@ $pulsing-duration: 1s;
   align-items: center;
   .fwe-waiting-content-container {
     margin-top: 12px;
-    color: $hero;
+    color: variables.$hero;
   }
 }
 
@@ -47,9 +49,9 @@ $pulsing-duration: 1s;
     position: absolute;
     width: 96px;
     height: 96px;
-    border: 8px solid $hero;
+    border: 8px solid variables.$hero;
     border-radius: 50%;
-    border-color: $hero transparent transparent transparent;
+    border-color: variables.$hero transparent transparent transparent;
   }
   .fwe-waiting-circle-1 {
     animation: fwe-wi-animation-1 $spinner-duration linear infinite;

package/dist/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "variables";
+
 @mixin firefox-only {
   @at-root {
     @-moz-document url-prefix() {
@@ -24,7 +26,7 @@
 @mixin custom-scrollbar {
   @-moz-document url-prefix() {
     scrollbar-width: thin;
-    scrollbar-color: $control-scrollbar transparent;
+    scrollbar-color: variables.$control-scrollbar transparent;
   }
   @media (pointer: fine) {
     &::-webkit-scrollbar {
@@ -37,7 +39,7 @@
 
     &::-webkit-scrollbar-thumb {
       overflow: visible;
-      background-color: $control-scrollbar;
+      background-color: variables.$control-scrollbar;
       // use $gray-100 with opacity 0 for effect of margins of scrollbar
       border: 3px solid rgba(242, 243, 245, 0);
       // hide the background with background clip

package/dist/scss/_mobile-flyout.scss

@@ -1,3 +1,6 @@
+@use "mixins";
+@use "variables";
+
 .fwe-mobile-flyout {
   position: relative;
 
@@ -16,12 +19,12 @@
       display: block;
       height: 24px;
       width: 24px;
-      background-color: $text;
+      background-color: variables.$text;
     }
     @media (hover: hover) and (pointer: fine) {
       &:hover {
         &::after {
-          background-color: $hero;
+          background-color: variables.$hero;
         }
       }
     }
@@ -43,20 +46,19 @@
   .fwe-mobile-flyout-container {
     position: fixed;
     display: flex;
-    top: $navbar-height;
+    top: variables.$navbar-height;
     left: 0px;
     width: 384px;
-    height: calc(100vh - #{$navbar-height});
-    background-color: $white;
+    height: calc(100vh - #{variables.$navbar-height});
+    background-color: variables.$white;
     flex-direction: column;
     box-shadow: 0px 1px 4px #00000029;
     overflow: hidden;
     transform: translateX(-105%);
-
-    @media (max-width: $grid-breakpoint-xs) {
+    transition: transform 0.3s ease;
+    @media (max-width: variables.$grid-breakpoint-xs) {
       width: 100% !important;
     }
-    transition: transform 0.3s ease;
     &.fwe-opened {
       transform: translateX(0%);
     }
@@ -64,7 +66,7 @@
 }
 
 .fwe-mobile-flyout-page {
-  background: $white;
+  background: variables.$white;
   position: absolute;
   left: 0;
   top: 0;
@@ -72,9 +74,9 @@
   bottom: 0;
   transform: translateX(100%);
   transition: transform 0.3s ease;
-  @include custom-scrollbar;
   overflow-x: hidden;
   overflow-y: auto;
+  @include mixins.custom-scrollbar;
 
   &.fwe-opened {
     transform: translateX(0%);
@@ -85,7 +87,7 @@
     height: 53px;
     display: flex;
     align-items: center;
-    background: $background;
+    background: variables.$background;
     position: relative;
     padding-left: 40px;
     &::after {
@@ -98,7 +100,7 @@
       background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMTZWMGgxNnYxNnoiLz48cGF0aCBmaWxsPSIjMzMzIiBkPSJNMTAuMzU0IDQuMzU0IDYuNzA3IDhsMy42NDcgMy42NDYtLjcwOC43MDhMNS4yOTMgOGw0LjM1My00LjM1NC43MDguNzA4eiIvPjwvc3ZnPg==");
     }
     &:hover {
-      background: $control;
+      background: variables.$control;
     }
     div {
       margin-top: -1px;
@@ -108,19 +110,19 @@
 
   .fwe-mobile-flyout-item-container {
     padding: 24px;
-    @media (max-width: $grid-breakpoint-xs) {
+    @media (max-width: variables.$grid-breakpoint-xs) {
       padding: 16px;
     }
   }
 }
 
 .fwe-mobile-flyout-item {
-  color: $text;
+  color: variables.$text;
   cursor: pointer;
   display: flex;
   align-items: center;
   height: 56px;
   &.fwe-active {
-    color: $hero;
+    color: variables.$hero;
   }
 }