@festo-ui/web-essentials 8.2.0-dev.630 → 8.2.0-dev.638

package/dist/css/themes/flatpickr/festo.css

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v8.2.0-dev.630 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v8.2.0-dev.638 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */

package/dist/css/themes/flatpickr/festo.min.css

@@ -1,5 +1,5 @@
 /*!
- * Festo UI - Web Essentials v8.2.0-dev.630 (https://storybook.festo.design/)
+ * Festo UI - Web Essentials v8.2.0-dev.638 (https://storybook.festo.design/)
  * Copyright 2022 Festo SE & Co. KG
  * Licensed under Apache-2.0
  */.fng-flatpickr span{-webkit-user-select:none;-moz-user-select:none;user-select:none}.flatpickr-calendar{display:none;text-align:center;animation:none;direction:ltr;border:0;font-size:var(--fwe-font-size-md);line-height:font-size-md10px;position:absolute;box-sizing:border-box;touch-action:manipulation}.flatpickr-calendar.open{max-height:640px;width:324px;background:var(--fwe-white);box-shadow:0 1px 8px rgba(0,0,0,.3);border-radius:8px;padding:12px;padding-bottom:48px;display:inline-block;z-index:var(--fwe-z-index-dropdown)}.flatpickr-calendar.animate.open{animation:none}.flatpickr-calendar.inline{display:block;position:relative;top:2px;box-shadow:none;background:inherit}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:var(--fwe-z-index-dropdown);display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){box-shadow:none!important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){box-shadow:-2px 0 0 var(--fwe-gray-200),5px 0 0 var(--fwe-gray-200)}.flatpickr-calendar .hasTime .dayContainer,.flatpickr-calendar .hasWeeks .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time{height:40px;border-top:1px solid var(--fwe-gray-200)}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:unset;height:0;width:0;left:32px}.flatpickr-calendar.rightMost:after,.flatpickr-calendar.rightMost:before{left:auto;right:32px}.flatpickr-calendar:before{border-width:7px;margin:0 -7px}.flatpickr-calendar:after{border-width:6px;margin:0 -6px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:rgba(0,0,0,.15)}.flatpickr-calendar.arrowTop:after{border-bottom-color:var(--fwe-white)}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:var(--fwe-border)}.flatpickr-calendar.arrowBottom:after{border-top-color:var(--fwe-white)}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:flex}.flatpickr-months .flatpickr-month{background:0 0;color:var(--fwe-text);fill:var(--fwe-text);height:42px;margin-top:12px;line-height:24px;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;flex:1}.flatpickr-months .flatpickr-next-month,.flatpickr-months .flatpickr-prev-month{text-decoration:none;cursor:pointer;position:absolute;top:0;height:42px;z-index:3;color:var(--fwe-text)}.flatpickr-months .flatpickr-next-month i,.flatpickr-months .flatpickr-prev-month i{position:relative}.flatpickr-months .flatpickr-next-month svg,.flatpickr-months .flatpickr-prev-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-next-month svg path,.flatpickr-months .flatpickr-prev-month svg path{transition:fill .1s;fill:inherit}.flatpickr-months .flatpickr-next-month.flatpickr-disabled,.flatpickr-months .flatpickr-prev-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-next-month:hover,.flatpickr-months .flatpickr-prev-month:hover{color:var(--fwe-text-light)}.flatpickr-months .flatpickr-next-month:hover svg,.flatpickr-months .flatpickr-prev-month:hover svg{fill:var(--fwe-hero)}.flatpickr-months .flatpickr-next-month{padding:24px 20px 0 0;right:0}.flatpickr-months .flatpickr-prev-month{left:0;padding:24px 0 0 20px}.numInputWrapper{position:relative;height:auto}.numInputWrapper input::-webkit-inner-spin-button,.numInputWrapper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.numInputWrapper input[type=number]{-moz-appearance:textfield}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%;font-weight:var(--fwe-font-weight-bold)}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper span{position:absolute;right:-8px;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;box-sizing:border-box}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid var(--fwe-text);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid var(--fwe-text);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:var(--fwe-font-size-base);font-weight:var(--fwe-font-weight-normal);position:absolute;width:75%;left:12.5%;padding:7px 0 0 0;line-height:calc(var(--fwe-font-size-base) + 8px);height:34px;display:inline-block;text-align:center;transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:var(--fwe-font-weight-bold);color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{color:var(--fwe-hero)}.flatpickr-current-month select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:0 0;background-image:url("data:image/svg+xml;utf8,<svg  height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><g><polygon points='8,10.7 3.6,6.4 4.4,5.6 8,9.3 11.6,5.6 12.4,6.4'/></g></svg>");background-repeat:no-repeat;background-position-x:100%;background-position-y:70%;border:none;color:inherit;cursor:pointer;line-height:24px;margin:-1px 0 0 0;outline:0;padding-left:8px;padding-right:16px}.flatpickr-current-month select:hover{color:var(--fwe-hero);background-image:url("data:image/svg+xml;utf8,<svg fill='rgb(0, 145, 220)'  height='16' viewBox='0 0 16 16' width='16' xmlns='http://www.w3.org/2000/svg'><g><polygon points='8,10.7 3.6,6.4 4.4,5.6 8,9.3 11.6,5.6 12.4,6.4'/></g></svg>")}.flatpickr-current-month select option{color:var(--fwe-text)!important}.flatpickr-current-month .numInputWrapper{width:60px;display:inline-block}.flatpickr-current-month .numInputWrapper input{background:0 0;box-sizing:border-box;color:inherit;cursor:text;margin-left:16px;display:inline-block;line-height:24px;border:0;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month .numInputWrapper:hover{color:var(--fwe-hero)}.flatpickr-current-month .numInputWrapper .arrowUp:hover:after{border-bottom-color:var(--fwe-hero)}.flatpickr-current-month .numInputWrapper .arrowDown:hover:after{border-top-color:var(--fwe-hero)}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,.5);background:0 0;pointer-events:none}.flatpickr-monthDropdown-months{font-weight:var(--fwe-font-weight-bold)}.flatpickr-current-month .flatpickr-monthDropdown-months:active,.flatpickr-current-month .flatpickr-monthDropdown-months:focus{outline:0}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:0;padding:0}.flatpickr-weekdays{border-bottom:1px solid var(--fwe-border);background:0 0;text-align:center;overflow:hidden;width:100%;display:flex;align-items:center;height:48px;margin-bottom:4px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:flex;flex:1}span.flatpickr-weekday{cursor:default;font-size:var(--fwe-font-size-md);background:0 0;color:var(--fwe-text-light);line-height:1;margin:0;text-align:center;display:block;flex:1;font-weight:var(--fwe-font-weight-normal)}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:flex;align-items:flex-start;width:304px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:304px;min-width:304px;max-width:304px;box-sizing:border-box;display:inline-block;display:flex;flex-wrap:wrap;justify-content:space-around;transform:translate3d(0,0,0);opacity:1}.dayContainer+.dayContainer{box-shadow:-1px 0 0 var(--fwe-gray-200)}.flatpickr-day{background:0 0;border:2px;border-radius:150px;box-sizing:border-box;color:var(--fwe-text);cursor:pointer;font-weight:var(--fwe-font-weight-normal);width:14.2857143%;flex-basis:14.2857143%;max-width:33px;height:33px;line-height:33px;margin:4px;display:inline-block;position:relative;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus{cursor:pointer;outline:0;background:var(--fwe-gray-200);border-color:var(--fwe-gray-200);font-weight:var(--fwe-font-weight-bold)}.flatpickr-day:hover{cursor:pointer;outline:0;color:var(--fwe-hero-hover)}.flatpickr-day.today{background-color:inherit;font-weight:var(--fwe-font-weight-bold);text-decoration:underline}.flatpickr-day.today:hover{color:var(--fwe-hero-hover)}.flatpickr-day.endRange,.flatpickr-day.endRange.inRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.inRange,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.inRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover{background:var(--fwe-white);box-shadow:none;color:var(--fwe-hero);border:2px solid var(--fwe-hero);font-weight:var(--fwe-font-weight-bold);line-height:28px}.flatpickr-day.endRange.flatpickr-disabled,.flatpickr-day.endRange.inRange.flatpickr-disabled,.flatpickr-day.endRange.nextMonthDay.flatpickr-disabled,.flatpickr-day.endRange.prevMonthDay.flatpickr-disabled,.flatpickr-day.endRange:focus.flatpickr-disabled,.flatpickr-day.endRange:hover.flatpickr-disabled,.flatpickr-day.selected.flatpickr-disabled,.flatpickr-day.selected.inRange.flatpickr-disabled,.flatpickr-day.selected.nextMonthDay.flatpickr-disabled,.flatpickr-day.selected.prevMonthDay.flatpickr-disabled,.flatpickr-day.selected:focus.flatpickr-disabled,.flatpickr-day.selected:hover.flatpickr-disabled,.flatpickr-day.startRange.flatpickr-disabled,.flatpickr-day.startRange.inRange.flatpickr-disabled,.flatpickr-day.startRange.nextMonthDay.flatpickr-disabled,.flatpickr-day.startRange.prevMonthDay.flatpickr-disabled,.flatpickr-day.startRange:focus.flatpickr-disabled,.flatpickr-day.startRange:hover.flatpickr-disabled{color:var(--fwe-text-disabled);background:var(--fwe-control-disabled)}.flatpickr-day.startRange.startRange{border-radius:50px;box-shadow:none}.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px;box-shadow:10px 0 0 var(--fwe-hero)}.flatpickr-day.selected.startRange{border-radius:50px;box-shadow:none}.flatpickr-day.endRange:not(.inRange):not(.startRange),.flatpickr-day.selected.endRange:not(.inRange):not(.startRange){border-radius:50px;position:relative}.flatpickr-day.endRange:not(.inRange):not(.startRange)::before,.flatpickr-day.selected.endRange:not(.inRange):not(.startRange)::before{content:"";position:absolute;height:calc(100% + 4px);z-index:-1;width:42px;background-color:var(--fwe-gray-200);left:-26px;top:-2px}.flatpickr-day.endRange:not(.inRange):not(.startRange).flatpickr-disabled::before,.flatpickr-day.selected.endRange:not(.inRange):not(.startRange).flatpickr-disabled::before{background-color:var(--fwe-gray-200)}.flatpickr-day.endRange.endRange,.flatpickr-day.startRange.endRange{border-radius:50px}.flatpickr-day.startRange:not(:hover):not(.endRange):nth-child(7n)::before{content:"";position:absolute;height:100%;z-index:-1;width:24px;background-color:var(--fwe-gray-200);left:16px}.flatpickr-day.startRange:not(:hover):not(.endRange):nth-child(7n).flatpickr-disabled::before{background-color:var(--fwe-gray-200)}.flatpickr-day.endRange.startRange.endRange,.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange:not(.startRange){box-shadow:none;position:relative}.flatpickr-day.inRange:not(.startRange):not(.endRange):nth-child(7n){border-radius:0;box-shadow:-10px 0 0 var(--fwe-gray-200),24px 0 0 var(--fwe-gray-200)}.flatpickr-day.inRange:not(.startRange):not(.endRange):nth-child(7n).flatpickr-disabled{box-shadow:-10px 0 0 var(--fwe-gray-100),24px 0 0 var(--fwe-gray-100)}.flatpickr-day.inRange:not(.startRange)::before{content:"";position:absolute;height:100%;z-index:-1;width:48px;background-color:var(--fwe-gray-200);left:-28px}.flatpickr-day.inRange:not(.startRange).flatpickr-disabled::before{background-color:var(--fwe-gray-100)}.flatpickr-day.inRange~.flatpickr-day.inRange:not(.selected){border-radius:0;box-shadow:-10px 0 0 var(--fwe-gray-200),24px 0 0 var(--fwe-gray-200)}.flatpickr-day.inRange~.flatpickr-day.inRange:not(.selected).flatpickr-disabled{box-shadow:-10px 0 0 var(--fwe-gray-100),24px 0 0 var(--fwe-gray-100);background:var(--fwe-gray-100)}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:rgba(57,57,57,.3);background:0 0;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,.1)}.flatpickr-day.week.selected{border-radius:0;box-shadow:-5px 0 0 var(--fwe-hero),5px 0 0 var(--fwe-hero)}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;box-shadow:1px 0 0 var(--fwe-gray-200)}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,.3);background:0 0;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:var(--fwe-control-border)}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:var(--fwe-control-border)}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:0 0;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:var(--fwe-text);font-size:var(--fwe-font-size-md);position:relative;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:var(--fwe-font-weight-bold)}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:var(--fwe-font-weight-normal)}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{height:inherit;float:left;line-height:inherit;color:var(--fwe-text);font-weight:var(--fwe-font-weight-bold);width:2%;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:var(--fwe-font-weight-normal)}.flatpickr-time .flatpickr-am-pm:focus,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time input:hover{background:var(--fwe-white)}.flatpickr-input[readonly]{cursor:pointer}@keyframes fpFadeInDown{from{opacity:0;transform:translate3d(0,-20px,0)}to{opacity:1;transform:translate3d(0,0,0)}}

package/dist/scss/_badge.scss

@@ -1,49 +1,49 @@
-@use "variables";
-
-.fwe-badge {
-  display: inline-block;
-  border-radius: 2px;
-  font-size: variables.$font-size-md;
-  padding-left: 6px;
-  padding-right: 6px;
-  color: variables.$white;
-  max-height: 19px;
-  height: 19px;
-  line-height: 17px;
-  background-color: variables.$hero;
-  font-weight: variables.$font-weight-bold;
-
-  &.fwe-badge-sm {
-    font-size: variables.$font-size-small;
-    max-height: 17px;
-    height: 17px;
-    line-height: 16px;
-  }
-
-  &.fwe-badge-md {
-    font-size: variables.$font-size-base;
-    max-height: 22px;
-    height: 22px;
-    line-height: 20px;
-  }
-
-  &.fwe-badge-lg {
-    font-size: variables.$font-size-xl;
-    max-height: 32px;
-    height: 32px;
-    line-height: 30px;
-  }
-
-  &.fwe-badge-xl {
-    font-size: variables.$font-size-xxl;
-    max-height: 44px;
-    height: 44px;
-    line-height: 42px;
-  }
-}
-
-@each $key, $value in variables.$badge-colors {
-  .fwe-badge-#{$key} {
-    background-color: $value !important;
-  }
-}
+@use "variables";
+
+.fwe-badge {
+  display: inline-block;
+  border-radius: 2px;
+  font-size: variables.$font-size-md;
+  padding-left: 6px;
+  padding-right: 6px;
+  color: variables.$white;
+  max-height: 19px;
+  height: 19px;
+  line-height: 17px;
+  background-color: variables.$hero;
+  font-weight: variables.$font-weight-bold;
+
+  &.fwe-badge-sm {
+    font-size: variables.$font-size-small;
+    max-height: 17px;
+    height: 17px;
+    line-height: 16px;
+  }
+
+  &.fwe-badge-md {
+    font-size: variables.$font-size-base;
+    max-height: 22px;
+    height: 22px;
+    line-height: 20px;
+  }
+
+  &.fwe-badge-lg {
+    font-size: variables.$font-size-xl;
+    max-height: 32px;
+    height: 32px;
+    line-height: 30px;
+  }
+
+  &.fwe-badge-xl {
+    font-size: variables.$font-size-xxl;
+    max-height: 44px;
+    height: 44px;
+    line-height: 42px;
+  }
+}
+
+@each $key, $value in variables.$badge-colors {
+  .fwe-badge-#{$key} {
+    background-color: $value !important;
+  }
+}

package/dist/scss/_border.scss

@@ -1,86 +1,86 @@
-@use "sass:map";
-@use "utils";
-@use "variables";
-
-@function border-name($borderKey) {
-  @return if($borderKey != 0, "-#{$borderKey}", null);
-}
-
-@mixin borders($borders, $infix: "") {
-  @each $borderKey, $borderColor in $borders {
-    $borderColorName: border-name($borderKey);
-
-    .fwe-b#{$infix}#{$borderColorName} {
-      border: 1px solid $borderColor !important;
-    }
-
-    .fwe-bt#{$infix}#{$borderColorName} {
-      border-top: 1px solid $borderColor !important;
-    }
-
-    .fwe-bb#{$infix}#{$borderColorName} {
-      border-bottom: 1px solid $borderColor !important;
-    }
-
-    .fwe-bl#{$infix}#{$borderColorName} {
-      border-left: 1px solid $borderColor !important;
-    }
-
-    .fwe-br#{$infix}#{$borderColorName} {
-      border-right: 1px solid $borderColor !important;
-    }
-
-    .fwe-bx#{$infix}#{$borderColorName} {
-      border-left: 1px solid $borderColor !important;
-      border-right: 1px solid $borderColor !important;
-    }
-
-    .fwe-by#{$infix}#{$borderColorName} {
-      border-top: 1px solid $borderColor !important;
-      border-bottom: 1px solid $borderColor !important;
-    }
-
-    .fwe-b#{$infix}-none {
-      border: none !important;
-    }
-
-    .fwe-bt#{$infix}-none {
-      border-top: none !important;
-    }
-
-    .fwe-bb#{$infix}-none {
-      border-bottom: none !important;
-    }
-
-    .fwe-bl#{$infix}-none {
-      border-left: none !important;
-    }
-
-    .fwe-br#{$infix}-none {
-      border-right: none !important;
-    }
-
-    .fwe-bx#{$infix}-none {
-      border-left: none !important;
-      border-right: none !important;
-    }
-
-    .fwe-by#{$infix}-none {
-      border-top: none !important;
-      border-bottom: none !important;
-    }
-  }
-}
-
-@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 borders(variables.$borders);
-  } @else {
-    @media (min-width: $size) {
-      @include borders(variables.$borders, $infix);
-    }
-  }
-}
+@use "sass:map";
+@use "utils";
+@use "variables";
+
+@function border-name($borderKey) {
+  @return if($borderKey != 0, "-#{$borderKey}", null);
+}
+
+@mixin borders($borders, $infix: "") {
+  @each $borderKey, $borderColor in $borders {
+    $borderColorName: border-name($borderKey);
+
+    .fwe-b#{$infix}#{$borderColorName} {
+      border: 1px solid $borderColor !important;
+    }
+
+    .fwe-bt#{$infix}#{$borderColorName} {
+      border-top: 1px solid $borderColor !important;
+    }
+
+    .fwe-bb#{$infix}#{$borderColorName} {
+      border-bottom: 1px solid $borderColor !important;
+    }
+
+    .fwe-bl#{$infix}#{$borderColorName} {
+      border-left: 1px solid $borderColor !important;
+    }
+
+    .fwe-br#{$infix}#{$borderColorName} {
+      border-right: 1px solid $borderColor !important;
+    }
+
+    .fwe-bx#{$infix}#{$borderColorName} {
+      border-left: 1px solid $borderColor !important;
+      border-right: 1px solid $borderColor !important;
+    }
+
+    .fwe-by#{$infix}#{$borderColorName} {
+      border-top: 1px solid $borderColor !important;
+      border-bottom: 1px solid $borderColor !important;
+    }
+
+    .fwe-b#{$infix}-none {
+      border: none !important;
+    }
+
+    .fwe-bt#{$infix}-none {
+      border-top: none !important;
+    }
+
+    .fwe-bb#{$infix}-none {
+      border-bottom: none !important;
+    }
+
+    .fwe-bl#{$infix}-none {
+      border-left: none !important;
+    }
+
+    .fwe-br#{$infix}-none {
+      border-right: none !important;
+    }
+
+    .fwe-bx#{$infix}-none {
+      border-left: none !important;
+      border-right: none !important;
+    }
+
+    .fwe-by#{$infix}-none {
+      border-top: none !important;
+      border-bottom: none !important;
+    }
+  }
+}
+
+@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 borders(variables.$borders);
+  } @else {
+    @media (min-width: $size) {
+      @include borders(variables.$borders, $infix);
+    }
+  }
+}

package/dist/scss/_bottom-navigation.scss

@@ -1,47 +1,47 @@
-@use "variables";
-
-.fwe-bottom-navigation {
-  width: 100%;
-  display: flex;
-  background: variables.$white;
-  align-items: flex-start;
-  justify-content: space-around;
-  border-top: 1px solid variables.$border;
-  height: 84px;
-  padding: 22px 16px;
-  .fwe-bottom-navigation-button {
-    cursor: pointer;
-    -webkit-user-select: none;
-    user-select: none;
-    .fwe-icon {
-      line-height: 0px;
-    }
-    display: flex;
-    align-items: center;
-    background: none;
-    border: none;
-    outline: none;
-    color: variables.$hero-gray;
-    position: relative;
-    :after {
-      content: "";
-      position: absolute;
-      top: -23px;
-      left: 0px;
-      right: 0px;
-      height: 0px;
-      background: variables.$hero;
-      transition: height 0.3s ease;
-    }
-    &.fwe-selected {
-      color: variables.$hero;
-      cursor: default;
-      :after {
-        height: 4px;
-      }
-    }
-    &:active {
-      color: variables.$hero-active;
-    }
-  }
-}
+@use "variables";
+
+.fwe-bottom-navigation {
+  width: 100%;
+  display: flex;
+  background: variables.$white;
+  align-items: flex-start;
+  justify-content: space-around;
+  border-top: 1px solid variables.$border;
+  height: 84px;
+  padding: 22px 16px;
+  .fwe-bottom-navigation-button {
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    .fwe-icon {
+      line-height: 0px;
+    }
+    display: flex;
+    align-items: center;
+    background: none;
+    border: none;
+    outline: none;
+    color: variables.$hero-gray;
+    position: relative;
+    :after {
+      content: "";
+      position: absolute;
+      top: -23px;
+      left: 0px;
+      right: 0px;
+      height: 0px;
+      background: variables.$hero;
+      transition: height 0.3s ease;
+    }
+    &.fwe-selected {
+      color: variables.$hero;
+      cursor: default;
+      :after {
+        height: 4px;
+      }
+    }
+    &:active {
+      color: variables.$hero-active;
+    }
+  }
+}

package/dist/scss/_bottom-sheet.scss

@@ -1,116 +1,116 @@
-@use "mixins";
-@use "variables";
-
-.fwe-bottom-sheet {
-  &-header {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  &-drag-handle-container {
-    width: 100%;
-    height: 36px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-  }
-
-  &-drag-handle {
-    width: variables.$spacer-l;
-    height: variables.$spacer-xxxs;
-    background-color: variables.$hero-gray;
-    border-radius: 3px;
-    margin: variables.$spacer 0;
-  }
-
-  &-toggle-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: variables.$spacer-s;
-  }
-
-  &-close-btn {
-    width: variables.$spacer-m;
-    height: variables.$spacer-m;
-    position: absolute;
-    right: 20px;
-    top: 20px;
-    padding: 0;
-    border: none;
-    min-width: variables.$spacer-m;
-    cursor: pointer;
-    background: variables.$text;
-    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
-  }
-
-  &-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-
-    background: rgba(0, 0, 0, 0.5);
-    z-index: variables.$zindex-modal-backdrop;
-    opacity: 0;
-    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-
-    &--visible {
-      opacity: 1;
-      right: 0;
-      bottom: 0;
-    }
-  }
-
-  &-container {
-    position: fixed;
-    bottom: 0;
-    left: 50%;
-    right: 50%;
-    background: variables.$white;
-    box-shadow: 0px 1px 8px #33333333;
-    z-index: variables.$zindex-modal;
-    border-radius: variables.$spacer-xs variables.$spacer-xs 0 0;
-    overflow: hidden;
-    opacity: 0;
-    max-width: 768px;
-    width: 100%;
-    transform: translateX(-50%) translateY(100%);
-    transition: height 0.3s ease-in-out, transform 0.4s cubic-bezier(0.83, 0, 0.17, 1);
-
-    &--open {
-      height: 12.5vh;
-      opacity: 1;
-      transform: translateX(-50%) translateY(0);
-
-      &.fwe-bottom-sheet-container--expand-from-center {
-        height: 55vh;
-
-        &.fwe-bottom-sheet-container--expanded {
-          height: calc(100vh - 64px);
-        }
-      }
-
-      &.fwe-bottom-sheet-container--closing {
-        transform: translateX(-50%) translateY(100%);
-      }
-    }
-
-    &--expanded {
-      height: calc(100vh - 64px);
-    }
-
-    &--with-backdrop {
-      box-shadow: none;
-    }
-  }
-
-  &-content {
-    padding: variables.$spacer variables.$spacer-l;
-    height: calc(100% - variables.$spacer-l);
-    overflow-y: auto;
-    @include mixins.custom-scrollbar;
-  }
-}
+@use "mixins";
+@use "variables";
+
+.fwe-bottom-sheet {
+  &-header {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &-drag-handle-container {
+    width: 100%;
+    height: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  &-drag-handle {
+    width: variables.$spacer-l;
+    height: variables.$spacer-xxxs;
+    background-color: variables.$hero-gray;
+    border-radius: 3px;
+    margin: variables.$spacer 0;
+  }
+
+  &-toggle-btn {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    left: variables.$spacer-s;
+  }
+
+  &-close-btn {
+    width: variables.$spacer-m;
+    height: variables.$spacer-m;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    padding: 0;
+    border: none;
+    min-width: variables.$spacer-m;
+    cursor: pointer;
+    background: variables.$text;
+    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjExIC0xODMpIj48cGF0aCBkPSJNMCwwSDI0VjI0SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTEgMTgzKSIgZmlsbD0ibm9uZSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIxNSAxODcpIj48cmVjdCB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiLz48cGF0aCBkPSJNMTIuOTUsNC40NjQsMTEuNTM2LDMuMDUsOCw2LjU4Niw0LjQ2NCwzLjA1LDMuMDUsNC40NjQsNi41ODYsOCwzLjA1LDExLjUzNiw0LjQ2NCwxMi45NSw4LDkuNDE0bDMuNTM2LDMuNTM2LDEuNDE0LTEuNDE0TDkuNDE0LDhaIiBmaWxsPSIjMzMzIi8+PC9nPjwvZz48L3N2Zz4=");
+  }
+
+  &-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+
+    background: rgba(0, 0, 0, 0.5);
+    z-index: variables.$zindex-modal-backdrop;
+    opacity: 0;
+    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+    &--visible {
+      opacity: 1;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  &-container {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    right: 50%;
+    background: variables.$white;
+    box-shadow: 0px 1px 8px #33333333;
+    z-index: variables.$zindex-modal;
+    border-radius: variables.$spacer-xs variables.$spacer-xs 0 0;
+    overflow: hidden;
+    opacity: 0;
+    max-width: 768px;
+    width: 100%;
+    transform: translateX(-50%) translateY(100%);
+    transition: height 0.3s ease-in-out, transform 0.4s cubic-bezier(0.83, 0, 0.17, 1);
+
+    &--open {
+      height: 12.5vh;
+      opacity: 1;
+      transform: translateX(-50%) translateY(0);
+
+      &.fwe-bottom-sheet-container--expand-from-center {
+        height: 55vh;
+
+        &.fwe-bottom-sheet-container--expanded {
+          height: calc(100vh - 64px);
+        }
+      }
+
+      &.fwe-bottom-sheet-container--closing {
+        transform: translateX(-50%) translateY(100%);
+      }
+    }
+
+    &--expanded {
+      height: calc(100vh - 64px);
+    }
+
+    &--with-backdrop {
+      box-shadow: none;
+    }
+  }
+
+  &-content {
+    padding: variables.$spacer variables.$spacer-l;
+    height: calc(100% - variables.$spacer-l);
+    overflow-y: auto;
+    @include mixins.custom-scrollbar;
+  }
+}

package/dist/scss/_colors.scss

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