project-booster-vue 9.47.0 → 9.47.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.47.0",
+  "version": "9.47.1",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -32,11 +32,11 @@
   ],
   "dependencies": {
     "@contentful/rich-text-html-renderer": "15.0.0",
-    "@mozaic-ds/css-dev-tools": "1.24.0",
-    "@mozaic-ds/icons": "1.20.0",
-    "@mozaic-ds/styles": "1.24.1",
-    "@mozaic-ds/tokens": "1.22.0",
-    "@mozaic-ds/web-fonts": "1.22.0",
+    "@mozaic-ds/css-dev-tools": "^1.47.0",
+    "@mozaic-ds/icons": "^1.49.0",
+    "@mozaic-ds/styles": "^1.49.1",
+    "@mozaic-ds/tokens": "^1.47.0",
+    "@mozaic-ds/web-fonts": "^1.22.0",
     "@types/lodash.isempty": "4.4.6",
     "@xstate/vue": "0.8.1",
     "ajv": "8.6.0",
@@ -156,17 +156,21 @@
     "msw": "0.39.1",
     "msw-storybook-addon": "1.6.3",
     "mutationobserver-shim": "0.3.7",
-    "postcss": "8.3.11",
-    "postcss-loader": "4.2.0",
-    "postcss-scss": "4.0.1",
+    "postcss": "^8.4.18",
+    "postcss-html": "^1.5.0",
+    "postcss-loader": "^7.0.1",
+    "postcss-scss": "^4.0.5",
     "prettier": "2.5.0",
     "pretty-quick": "3.1.1",
     "puppeteer": "10.4.0",
     "semantic-release": "17.4.4",
     "semantic-release-gitmoji": "1.3.4",
-    "stylelint": "13.13.1",
-    "stylelint-config-prettier": "8.0.2",
-    "stylelint-config-standard": "22.0.0",
+    "stylelint": "^14.14.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-recommended-scss": "^7.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "^22.0.0",
+    "stylelint-config-standard-scss": "^5.0.0",
     "stylelint-order": "4.1.0",
     "stylelint-scss": "3.21.0",
     "stylelint-webpack-plugin": "2.2.0",

package/src/assets/styles/common/layout/_color.scss

@@ -14,7 +14,6 @@ $themes: (
         'warning',
         'success'
 );
-
 $colors: get-token(color);
 
 @each $theme in $themes {

package/src/assets/styles/common/layout/_screens.scss

@@ -8,12 +8,9 @@ $screens: get-token(screen);
       @content;
     }
     /* stylelint-disable-next-line at-rule-empty-line-before, block-closing-brace-newline-after */
-  }
-
-  @else {
+  } @else {
     /* stylelint-disable-line at-rule-empty-line-before, block-closing-brace-newline-after */
-    @error "the `#{$size}` key does not exist in the screen map."
-      + "Please make sure to use an authorized value";
+    @error "the `#{$size}` key does not exist in the screen map." + "Please make sure to use an authorized value";
   }
 }
 
@@ -26,9 +23,7 @@ $major-screens: ('s', 'm', 'l', 'xl', 'xxl');
     @if $size == 's' {
       @content;
       /* stylelint-disable-next-line at-rule-empty-line-before, block-closing-brace-newline-after */
-    }
-
-    @else {
+    } @else {
       @include set-to-screen($size) {
         &\@from-#{$size} {
           @content;

package/src/assets/styles/common/layout/_spacing.scss

@@ -24,12 +24,10 @@ $magic-units-multipliers: (
   18,
   20
 );
-
 $spacing-properties: (
   'padding': 'p',
   'margin': 'm',
 );
-
 $spacing-directions: (
   'a': (
     '',
@@ -61,13 +59,9 @@ $spacing-directions: (
 
   @if $magic-unit-multiplier >= 1 {
     $magic-unit-label: 100 * $magic-unit-multiplier;
-  }
-
-  @else if $magic-unit-multiplier == 0 {
+  } @else if $magic-unit-multiplier == 0 {
     $magic-unit-label: '000';
-  }
-
-  @else {
+  } @else {
     $magic-unit-label: "0" + #{100 * $magic-unit-multiplier};
   }
 

package/src/assets/styles/kozikaza/_roboto-fonts-faces.scss

@@ -1,5 +1,5 @@
 @mixin import-font-families() {
-  @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
+  @import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap';
 }
 
 $font-weights: (
@@ -9,16 +9,14 @@ $font-weights: (
 );
 
 @mixin set-font-family() {
-  font-family: 'Roboto', sans-serif;
+  font-family: Roboto, sans-serif;
 }
 
 @mixin set-font-weight($weight: 'regular') {
   @if map-has-key($font-weights, $weight) {
     font-weight: map-get($font-weights, $weight);
     /* stylelint-disable-next-line */
-  }
-
-  @else {
+  } @else {
     @warn 'you are trying to use a font-weight that is not supported : "#{$weight}"';
   }
 }

package/src/components/appointment/PbAppointmentStartSection.vue

@@ -127,6 +127,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-appointment-section {
@@ -145,6 +146,7 @@ $responsive-breakpoint: 'm';
     &-title {
       @include set-font-face('semi-bold');
       @include set-font-scale('09', 'm');
+
       color: $color-grey-900;
       text-align: start;
 
@@ -157,6 +159,7 @@ $responsive-breakpoint: 'm';
       &-title {
         @include set-font-face('regular');
         @include set-font-scale('07', 'm');
+
         color: $color-grey-800;
         margin-bottom: $mu075;
         margin-top: $mu200;

package/src/components/cards/PbCard.vue

@@ -400,6 +400,7 @@ $responsive-breakpoint: 's';
 
   &--clickable {
     @include set-box-shadow('m');
+
     border: transparent;
     transition: box-shadow 200ms;
   }

package/src/components/configurations/list/PbConfigurationsList.vue

@@ -207,7 +207,7 @@ $responsive-breakpoint: 'm';
 
 .pb-configurations-list {
   box-sizing: border-box;
-  margin: -$mu100;
+  margin: (-$mu100);
   padding: 0;
   width: calc(100% + 2 * #{$mu100});
 

package/src/components/estimates/PbEstimatesList.vue

@@ -228,7 +228,7 @@ $responsive-breakpoint: 'm';
   }
 
   &__cards-container {
-    margin: -$mu100;
+    margin: (-$mu100);
     max-width: none !important;
     padding: 0;
     width: calc(100% + 2 * #{$mu100});

package/src/components/items/PbItemCard.vue

@@ -61,6 +61,7 @@ $responsive-breakpoint: 's';
 
   &--clickable {
     @include set-box-shadow('m');
+
     border: transparent;
     transition: box-shadow 200ms;
   }

package/src/components/landing/PbProjectsLanding.vue

@@ -634,7 +634,7 @@ $responsive-breakpoint: 'm';
       }
 
       &--image-shadow {
-        box-shadow: -$mu100 $mu100 $color-primary-01-200;
+        box-shadow: (-$mu100) $mu100 $color-primary-01-200;
         display: none;
         margin-bottom: $mu100;
         margin-left: 1rem;
@@ -752,7 +752,7 @@ $responsive-breakpoint: 'm';
     width: calc(100% + 2 * #{$mu050});
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: -$mu100 $mu100 $mu100 -#{$mu100};
+      margin: (-$mu100) $mu100 $mu100 -#{$mu100};
       width: calc(100% + 2 * #{$mu100});
     }
   }

package/src/components/landing/PbProjectsLandingEstimators.vue

@@ -186,7 +186,7 @@ $responsive-breakpoint: 'm';
     margin: -$mu050 $mu050 $mu050 -#{$mu050};
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: -$mu100 $mu100 $mu100 -#{$mu100};
+      margin: (-$mu100) $mu100 $mu100 -#{$mu100};
     }
   }
 

package/src/components/loader/PbAnimableLoader.vue

@@ -169,7 +169,7 @@ $responsive-breakpoint: 'l';
     #circle2 {
       animation: rotate 2s linear infinite both;
       stroke: $color-primary-01-500;
-      stroke-dasharray: 31.415926;
+      stroke-dasharray: 31.4159;
       transform-origin: center;
       transition: transform 0.2s ease-out, stroke 0.2s ease-in-out;
 
@@ -199,19 +199,19 @@ $responsive-breakpoint: 'l';
   }
 
   250% {
-    stroke-dashoffset: 31.415926;
+    stroke-dashoffset: 31.4159;
   }
 
   50% {
-    stroke-dashoffset: 62.831853;
+    stroke-dashoffset: 62.8319;
   }
 
   75% {
-    stroke-dashoffset: 94.2477796;
+    stroke-dashoffset: 94.2478;
   }
 
   100% {
-    stroke-dashoffset: 125.66370614;
+    stroke-dashoffset: 125.6637;
   }
 }
 

package/src/components/media/PbMedia.vue

@@ -395,7 +395,7 @@ $responsive-breakpoint: 'l';
   }
 
   &__tabs {
-    box-shadow: 0px 10px 10px -10px $color-grey-200;
+    box-shadow: 0 10px 10px -10px $color-grey-200;
     margin-bottom: $mu250;
     width: 100%;
 

package/src/components/media/list/PbMediaList.vue

@@ -317,7 +317,7 @@ $responsive-breakpoint: 'l';
     width: calc(100% + 2 * #{$mu050});
 
     @include set-from-screen($responsive-breakpoint) {
-      margin: -$mu100;
+      margin: (-$mu100);
       width: calc(100% + 2 * #{$mu100});
     }
 

package/src/components/media/upload/PbMediaUpload.vue

@@ -720,6 +720,7 @@ $responsive-breakpoint: 'l';
 
     &-document-types {
       @include set-font-scale('05', 'm');
+
       color: $color-grey-900;
       display: flex;
       flex-direction: column;

package/src/components/mopinion/PbMOpinion.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="surveyContent"></div>
+  <div id="survey-content"></div>
 </template>
 
 <script lang="ts">
@@ -14,7 +14,7 @@ export default defineComponent({
 
 $responsive-breakpoint: 'm';
 
-#surveyContent {
+#survey-content {
   width: 100%;
 
   :deep(.mopinion-survey-content) {

package/src/components/mozaic/buttons/MButton.vue

@@ -469,6 +469,7 @@ $responsive-breakpoint: 'm';
     }
   }
 }
+
 $text-primary: (
   'background': $color-grey-000,
   'font': $color-success-500,
@@ -482,7 +483,6 @@ $text-primary: (
     'border': transparent,
   ),
 );
-
 $text-primary-02: (
   'background': $color-grey-000,
   'font': $color-primary-02-500,

package/src/components/mozaic/layer/MLayer.vue

@@ -273,6 +273,7 @@ $responsive-breakpoint: 'm';
     box-sizing: border-box;
     max-height: 100%;
     padding-bottom: 0;
+
     /* Override mozaic */
     pointer-events: all;
     position: fixed;

package/src/components/pedagogy/PbPedagogy.vue

@@ -155,6 +155,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-pedagogy {
@@ -235,6 +236,7 @@ $responsive-breakpoint: 'm';
       &-title {
         @include set-font-scale('07', 'm');
         @include set-font-face('semi-bold');
+
         margin-bottom: $mu100;
       }
     }
@@ -242,6 +244,7 @@ $responsive-breakpoint: 'm';
     &__button-informations {
       @include set-font-scale('07', 'm');
       @include set-font-face('semi-bold');
+
       margin-bottom: ($mu100 * -1);
       margin-top: $mu200;
     }

package/src/components/products/PbProducts.vue

@@ -151,6 +151,7 @@ $responsive-breakpoint: 'm';
 
 .pb-products {
   @include set-font-face('regular');
+
   flex-grow: 1;
   margin: 0 auto;
   padding: 0 $mu100;
@@ -176,13 +177,15 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('semi-bold');
     @include set-font-scale('07', 's');
+
     color: $color-grey-700;
     max-width: 100%;
-    padding: 0 0 0 0;
+    padding: 0;
     text-align: center;
 
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('08', 'm');
+
       padding: 0 $mu100 $mu100 $mu100;
       text-align: center;
       width: auto;

package/src/components/progress/PbProgressBar.vue

@@ -31,6 +31,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .progress-bar {

package/src/components/progress/PbProgressBarHeader.vue

@@ -34,6 +34,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-progress-bar-header {

package/src/components/projects/project-hub/PbProjectHub.vue

@@ -1473,7 +1473,7 @@ $appear-duration: 100ms;
         width: calc(100% + 2 * #{$mu050});
 
         @include set-from-screen($responsive-breakpoint) {
-          margin: -$mu100;
+          margin: (-$mu100);
           width: calc(100% + 2 * #{$mu100});
         }
       }

package/src/components/projects/project-item-save/PbProjectItemSave.vue

@@ -490,6 +490,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-project-item-save {
@@ -569,7 +570,6 @@ $responsive-breakpoint: 'm';
 
   :deep(.pb-loader__title .pb-loader__title-icon-container) {
     position: relative !important;
-    -webkit-transform: none !important;
     transform: none !important;
   }
 

package/src/components/projects/project-item-save/PbProjectItemSaveProjectsList.vue

@@ -113,6 +113,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint-l: 'l';
 
 .pb-project-item-project {

package/src/components/projects/projects-list/PbProjectHub.vue

@@ -1469,7 +1469,7 @@ $appear-duration: 100ms;
         width: calc(100% + 2 * #{$mu050});
 
         @include set-from-screen($responsive-breakpoint) {
-          margin: -$mu100;
+          margin: (-$mu100);
           width: calc(100% + 2 * #{$mu100});
         }
       }

package/src/components/question/PbQuestion.vue

@@ -1174,6 +1174,7 @@ $answers-apparition-duration: '0.5s';
 
     :deep(.m-dialog__header) {
       @include set-font-scale('04', 'm');
+
       color: $color-grey-600;
       padding: $mu150 $mu350 $mu150 $mu150;
     }
@@ -1232,6 +1233,7 @@ $answers-apparition-duration: '0.5s';
 
       &-text {
         @include set-font-scale('04', 'l');
+
         color: $color-grey-600;
         margin-top: $mu050;
       }
@@ -1251,7 +1253,7 @@ $answers-apparition-duration: '0.5s';
     }
 
     &-footer {
-      box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
       padding: $mu100;
     }
   }
@@ -1274,12 +1276,14 @@ $answers-apparition-duration: '0.5s';
 
 <style lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-question {
   &__dialog-help {
     &__title {
       @include set-font-scale('06', 'm');
+
       padding: $mu100 $mu250 $mu050 $mu250;
 
       @include set-from-screen($responsive-breakpoint) {
@@ -1289,6 +1293,7 @@ $responsive-breakpoint: 'm';
       h2 {
         @include set-font-scale('08', 'm');
         @include set-font-face('semi-bold');
+
         margin-bottom: $mu025;
       }
 

package/src/components/question/incremental-amount-input/PbIncrementalAmountInput.vue

@@ -292,7 +292,7 @@ $responsive-breakpoint: 'm';
     flex-grow: 1;
 
     @include set-from-screen($responsive-breakpoint) {
-      //width: calc(100% - #{$mu050} - #{$mu050});
+      // width: calc(100% - #{$mu050} - #{$mu050});
       width: 314px;
     }
   }
@@ -310,7 +310,7 @@ $responsive-breakpoint: 'm';
     color: $color-grey-700;
     margin-bottom: 10px;
     max-width: 100%;
-    padding: 0 0 0 0;
+    padding: 0;
     text-align: center;
     width: 384px;
 

package/src/components/question/space-input/PbSpaceInput.vue

@@ -471,6 +471,7 @@ $responsive-breakpoint: 'm';
       h2 {
         @include set-font-face('semi-bold');
         @include set-font-scale('07', 's');
+
         padding: $mu250 $mu250 0 $mu250;
       }
     }
@@ -500,6 +501,7 @@ $responsive-breakpoint: 'm';
 
 .pb-space-input__dialog__body p {
   @include set-font-scale('05', 'm');
+
   margin: $mu100 0;
 }
 </style>

package/src/components/restitution/PbRestitution.vue

@@ -291,6 +291,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 $space-top: $mu200;
 $space-left: $mu300;

package/src/components/restitution/PbRestitutionExit.vue

@@ -70,6 +70,7 @@ export default defineComponent({
 
 <style scoped lang="scss">
 @import 'pb-variables';
+
 $responsive-breakpoint: 'l';
 
 .pb-restitution-exit {

package/src/components/restitution/PbRestitutionList.vue

@@ -310,6 +310,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 .hidden {
   display: none;
@@ -321,6 +322,7 @@ $responsive-breakpoint: 'm';
 
 .pb-restitution-list {
   @include set-font-face('regular');
+
   margin: 0 auto;
   position: relative;
   width: 100%;
@@ -350,6 +352,7 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('semi-bold');
     @include set-font-scale('10', 's');
+
     padding: $mu250 0 0 $mu100;
     text-align: left;
 
@@ -368,7 +371,7 @@ $responsive-breakpoint: 'm';
       position: absolute;
       right: 0;
       text-align: center;
-      top: 0px;
+      top: 0;
       @include set-font-scale('07', 's');
 
       &::after {
@@ -378,7 +381,7 @@ $responsive-breakpoint: 'm';
   }
 
   &__footer {
-    background: #ffffff;
+    background: #fff;
     bottom: 0;
     justify-self: flex-end;
     left: 0;
@@ -413,6 +416,7 @@ $responsive-breakpoint: 'm';
       &__title {
         @include set-font-face('semi-bold');
         @include set-font-scale('07', 's');
+
         margin-bottom: $mu150;
       }
 
@@ -447,7 +451,7 @@ $responsive-breakpoint: 'm';
           &::before {
             border-color: transparent transparent $color-primary-01-100 transparent;
             border-style: solid;
-            border-width: 0 10px 16px 10px;
+            border-width: 0 10px 16px;
             content: '';
             height: 0;
             left: 10px;
@@ -494,6 +498,7 @@ $responsive-breakpoint: 'm';
               &:first-child {
                 @include set-font-face('regular');
                 @include set-font-scale('05', 's');
+
                 margin-bottom: $mu050;
                 width: 100%;
 
@@ -505,6 +510,7 @@ $responsive-breakpoint: 'm';
 
               &:last-child {
                 @include set-font-face('semi-bold');
+
                 width: 100%;
 
                 @include set-from-screen($responsive-breakpoint) {

package/src/components/restitution/PbRestitutionListBlock.vue

@@ -78,10 +78,12 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-restitution-list-block {
   @include set-box-shadow('l');
+
   margin-bottom: $mu100;
   padding: $mu150;
 
@@ -93,6 +95,7 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('semi-bold');
     @include set-font-scale('07', 's');
+
     margin-bottom: $mu050;
   }
 
@@ -115,6 +118,7 @@ $responsive-breakpoint: 'm';
 
       &__title {
         @include set-font-face('regular');
+
         width: 100%;
 
         @include set-from-screen($responsive-breakpoint) {
@@ -155,6 +159,7 @@ $responsive-breakpoint: 'm';
       &__price {
         @include set-font-face('semi-bold');
         @include set-font-scale('05', 's');
+
         display: flex;
         width: 100%;
 
@@ -194,6 +199,7 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('regular');
     @include set-font-scale('06', 's');
+
     margin-bottom: $mu050;
     width: 100%;
 
@@ -205,6 +211,7 @@ $responsive-breakpoint: 'm';
   &__price {
     @include set-font-face('semi-bold');
     @include set-font-scale('06', 's');
+
     display: flex;
     width: 100%;
 

package/src/components/restitution/PbRestitutionListLine.vue

@@ -36,6 +36,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-restitution-list-line {
@@ -52,6 +53,7 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('regular');
     @include set-font-scale('06', 's');
+
     margin-bottom: $mu050;
     width: 100%;
 
@@ -65,6 +67,7 @@ $responsive-breakpoint: 'm';
   &__price {
     @include set-font-face('semi-bold');
     @include set-font-scale('06', 's');
+
     display: flex;
     width: 100%;
 

package/src/components/tasks/contentul-preview/PbTasksContentfulPreview.vue

@@ -439,6 +439,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 @import 'pb-variables';
+
 $responsive-breakpoint: 'm';
 
 .pb-tasks-contentful-preview {

package/src/components/tasks/details/PbTaskDetails.vue

@@ -592,7 +592,7 @@ div:empty {
 
       :deep(.m-heading__label) {
         -webkit-box-orient: vertical;
-        display: -webkit-box;
+        display: box;
         -webkit-line-clamp: 2;
         overflow: hidden;
       }
@@ -699,18 +699,15 @@ div:empty {
     }
   }
 
-  &__card-links {
-    margin-bottom: $mu150;
-    margin-top: $mu100;
-    width: 99%;
-  }
-
   &__card-link-container {
     box-sizing: border-box;
     padding: $mu075;
   }
 
   &__card-links {
+    margin-bottom: $mu150;
+    margin-top: $mu100;
+    width: 99%;
     height: 100%;
 
     :deep(.pb-card) {
@@ -719,7 +716,7 @@ div:empty {
 
     :deep(.pb-card__title) {
       -webkit-box-orient: vertical;
-      display: -webkit-box;
+      display: box;
       -webkit-line-clamp: 2;
       overflow: hidden;
 
@@ -734,7 +731,7 @@ div:empty {
 
     :deep(.pb-card__text) {
       -webkit-box-orient: vertical;
-      display: -webkit-box;
+      display: box;
       -webkit-line-clamp: 4;
       overflow: hidden;
     }

package/src/components/trezor/PbTrezor.vue

@@ -328,6 +328,7 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('semi-bold');
     @include set-font-scale('08', 'm');
+
     max-width: calc(100% - 60px);
     padding: 30px;
     position: relative;
@@ -366,11 +367,13 @@ $responsive-breakpoint: 'm';
     &__label {
       @include set-font-face('regular');
       @include set-font-scale('04', 's');
+
       margin-bottom: $mu050;
 
       span {
         @include set-font-face('regular');
         @include set-font-scale('03', 's');
+
         color: $color-grey-500;
       }
     }

package/src/components/warning-message/PbWarningMessage.vue

@@ -250,6 +250,7 @@ $small-responsive-breakpoint: 's-large';
 $responsive-breakpoint: 'm';
 .pb-warning-message {
   @include set-font-face('regular');
+
   flex-grow: 1;
   margin: 0 auto;
   padding: 0 $mu100;
@@ -284,12 +285,14 @@ $responsive-breakpoint: 'm';
   &__title {
     @include set-font-face('semi-bold');
     @include set-font-scale('07', 'm');
+
     color: $color-grey-700;
     max-width: 100%;
-    padding: 0 0 0 0;
+    padding: 0;
     width: 384px;
     @include set-from-screen($responsive-breakpoint) {
       @include set-font-scale('07', 'm');
+
       padding: $mu250 $mu100 $mu100 $mu100;
       text-align: center;
       width: auto;
@@ -315,6 +318,7 @@ $responsive-breakpoint: 'm';
     &__text {
       @include set-font-face('semi-bold');
       @include set-font-scale('05', 's');
+
       text-align: center;
     }
   }
@@ -323,6 +327,7 @@ $responsive-breakpoint: 'm';
     h3 {
       @include set-font-face('semi-bold');
       @include set-font-scale('05', 's');
+
       margin: $mu100 0 0 0;
     }
 
@@ -359,6 +364,7 @@ $responsive-breakpoint: 'm';
   &__container--background {
     @extend .pb-warning-message__container;
     @include set-border-radius('m');
+
     background: $color-warning-100;
     border: 1px solid $color-warning-500;
     margin: $mu150 0 0 0;
@@ -391,6 +397,7 @@ $responsive-breakpoint: 'm';
       h2 {
         @include set-font-scale('08', 'm');
         @include set-font-face('semi-bold');
+
         margin: 0 0 $mu050 0;
       }
     }
@@ -400,6 +407,7 @@ $responsive-breakpoint: 'm';
 
       p {
         @include set-font-scale('06', 'm');
+
         margin: $mu075 0;
       }