plataforma-fundacao-componentes 2.26.9 → 2.26.11

package/dist/index.css

@@ -2211,7 +2211,7 @@ h5 {
   .component-checkbox-classic[data-checked='true']::after {
     background-color: #3fa110; }
 
-@use "sass:map";
+@use 'sass:map';
 :export {
   widthXs: 575.98px;
   widthSm: 767.98px;
@@ -2240,9 +2240,13 @@ h5 {
   warningDark: #765f00; }
 
 .component-col {
+  box-sizing: border-box;
   display: flex;
-  flex-direction: row;
-  width: 100%; }
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-flow: row wrap;
+  width: 100%;
+  padding: var(--spacing); }
   .component-col:not(.no-padding) {
     padding: var(--colPadding); }
   .component-col.no-padding-top {
@@ -2254,239 +2258,238 @@ h5 {
     justify-content: flex-end;
     align-items: center; }
   .component-col.button-actions-col {
-    padding: 0;
     flex-wrap: wrap; }
-    .component-col.button-actions-col button {
-      margin: var(--colPadding); }
-      @media screen and (max-width: 575.98px) {
-        .component-col.button-actions-col button {
-          width: 100% !important; } }
-  .component-col.component-col-xl-1 {
+    @media screen and (max-width: 575.98px) {
+      .component-col.button-actions-col button {
+        width: 100% !important; } }
+  .component-col.fullfill {
+    flex: 1 1 0%; }
+  .component-col.component-col-xs-1 {
     flex: 0 0 calc(100% * 1 / 12);
     max-width: calc(100% * 1 / 12); }
-  .component-col.component-col-xl-2 {
+  .component-col.component-col-xs-2 {
     flex: 0 0 calc(100% * 2 / 12);
     max-width: calc(100% * 2 / 12); }
-  .component-col.component-col-xl-3 {
+  .component-col.component-col-xs-3 {
     flex: 0 0 calc(100% * 3 / 12);
     max-width: calc(100% * 3 / 12); }
-  .component-col.component-col-xl-4 {
+  .component-col.component-col-xs-4 {
     flex: 0 0 calc(100% * 4 / 12);
     max-width: calc(100% * 4 / 12); }
-  .component-col.component-col-xl-5 {
+  .component-col.component-col-xs-5 {
     flex: 0 0 calc(100% * 5 / 12);
     max-width: calc(100% * 5 / 12); }
-  .component-col.component-col-xl-6 {
+  .component-col.component-col-xs-6 {
     flex: 0 0 calc(100% * 6 / 12);
     max-width: calc(100% * 6 / 12); }
-  .component-col.component-col-xl-7 {
+  .component-col.component-col-xs-7 {
     flex: 0 0 calc(100% * 7 / 12);
     max-width: calc(100% * 7 / 12); }
-  .component-col.component-col-xl-8 {
+  .component-col.component-col-xs-8 {
     flex: 0 0 calc(100% * 8 / 12);
     max-width: calc(100% * 8 / 12); }
-  .component-col.component-col-xl-9 {
+  .component-col.component-col-xs-9 {
     flex: 0 0 calc(100% * 9 / 12);
     max-width: calc(100% * 9 / 12); }
-  .component-col.component-col-xl-10 {
+  .component-col.component-col-xs-10 {
     flex: 0 0 calc(100% * 10 / 12);
     max-width: calc(100% * 10 / 12); }
-  .component-col.component-col-xl-11 {
+  .component-col.component-col-xs-11 {
     flex: 0 0 calc(100% * 11 / 12);
     max-width: calc(100% * 11 / 12); }
-  .component-col.component-col-xl-12 {
+  .component-col.component-col-xs-12 {
     flex: 0 0 calc(100% * 12 / 12);
     max-width: calc(100% * 12 / 12); }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-1 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-1 {
       flex: 0 0 calc(100% * 1 / 12);
       max-width: calc(100% * 1 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-2 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-2 {
       flex: 0 0 calc(100% * 2 / 12);
       max-width: calc(100% * 2 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-3 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-3 {
       flex: 0 0 calc(100% * 3 / 12);
       max-width: calc(100% * 3 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-4 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-4 {
       flex: 0 0 calc(100% * 4 / 12);
       max-width: calc(100% * 4 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-5 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-5 {
       flex: 0 0 calc(100% * 5 / 12);
       max-width: calc(100% * 5 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-6 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-6 {
       flex: 0 0 calc(100% * 6 / 12);
       max-width: calc(100% * 6 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-7 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-7 {
       flex: 0 0 calc(100% * 7 / 12);
       max-width: calc(100% * 7 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-8 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-8 {
       flex: 0 0 calc(100% * 8 / 12);
       max-width: calc(100% * 8 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-9 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-9 {
       flex: 0 0 calc(100% * 9 / 12);
       max-width: calc(100% * 9 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-10 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-10 {
       flex: 0 0 calc(100% * 10 / 12);
       max-width: calc(100% * 10 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-11 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-11 {
       flex: 0 0 calc(100% * 11 / 12);
       max-width: calc(100% * 11 / 12); } }
-  @media screen and (max-width: 1199.98px) {
-    .component-col.component-col-lg-12 {
+  @media screen and (min-width: 575.98px) {
+    .component-col.component-col-sm-12 {
       flex: 0 0 calc(100% * 12 / 12);
       max-width: calc(100% * 12 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-1 {
       flex: 0 0 calc(100% * 1 / 12);
       max-width: calc(100% * 1 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-2 {
       flex: 0 0 calc(100% * 2 / 12);
       max-width: calc(100% * 2 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-3 {
       flex: 0 0 calc(100% * 3 / 12);
       max-width: calc(100% * 3 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-4 {
       flex: 0 0 calc(100% * 4 / 12);
       max-width: calc(100% * 4 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-5 {
       flex: 0 0 calc(100% * 5 / 12);
       max-width: calc(100% * 5 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-6 {
       flex: 0 0 calc(100% * 6 / 12);
       max-width: calc(100% * 6 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-7 {
       flex: 0 0 calc(100% * 7 / 12);
       max-width: calc(100% * 7 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-8 {
       flex: 0 0 calc(100% * 8 / 12);
       max-width: calc(100% * 8 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-9 {
       flex: 0 0 calc(100% * 9 / 12);
       max-width: calc(100% * 9 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-10 {
       flex: 0 0 calc(100% * 10 / 12);
       max-width: calc(100% * 10 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-11 {
       flex: 0 0 calc(100% * 11 / 12);
       max-width: calc(100% * 11 / 12); } }
-  @media screen and (max-width: 991.98px) {
+  @media screen and (min-width: 767.98px) {
     .component-col.component-col-md-12 {
       flex: 0 0 calc(100% * 12 / 12);
       max-width: calc(100% * 12 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-1 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-1 {
       flex: 0 0 calc(100% * 1 / 12);
       max-width: calc(100% * 1 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-2 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-2 {
       flex: 0 0 calc(100% * 2 / 12);
       max-width: calc(100% * 2 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-3 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-3 {
       flex: 0 0 calc(100% * 3 / 12);
       max-width: calc(100% * 3 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-4 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-4 {
       flex: 0 0 calc(100% * 4 / 12);
       max-width: calc(100% * 4 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-5 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-5 {
       flex: 0 0 calc(100% * 5 / 12);
       max-width: calc(100% * 5 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-6 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-6 {
       flex: 0 0 calc(100% * 6 / 12);
       max-width: calc(100% * 6 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-7 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-7 {
       flex: 0 0 calc(100% * 7 / 12);
       max-width: calc(100% * 7 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-8 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-8 {
       flex: 0 0 calc(100% * 8 / 12);
       max-width: calc(100% * 8 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-9 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-9 {
       flex: 0 0 calc(100% * 9 / 12);
       max-width: calc(100% * 9 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-10 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-10 {
       flex: 0 0 calc(100% * 10 / 12);
       max-width: calc(100% * 10 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-11 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-11 {
       flex: 0 0 calc(100% * 11 / 12);
       max-width: calc(100% * 11 / 12); } }
-  @media screen and (max-width: 767.98px) {
-    .component-col.component-col-sm-12 {
+  @media screen and (min-width: 991.98px) {
+    .component-col.component-col-lg-12 {
       flex: 0 0 calc(100% * 12 / 12);
       max-width: calc(100% * 12 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-1 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-1 {
       flex: 0 0 calc(100% * 1 / 12);
       max-width: calc(100% * 1 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-2 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-2 {
       flex: 0 0 calc(100% * 2 / 12);
       max-width: calc(100% * 2 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-3 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-3 {
       flex: 0 0 calc(100% * 3 / 12);
       max-width: calc(100% * 3 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-4 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-4 {
       flex: 0 0 calc(100% * 4 / 12);
       max-width: calc(100% * 4 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-5 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-5 {
       flex: 0 0 calc(100% * 5 / 12);
       max-width: calc(100% * 5 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-6 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-6 {
       flex: 0 0 calc(100% * 6 / 12);
       max-width: calc(100% * 6 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-7 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-7 {
       flex: 0 0 calc(100% * 7 / 12);
       max-width: calc(100% * 7 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-8 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-8 {
       flex: 0 0 calc(100% * 8 / 12);
       max-width: calc(100% * 8 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-9 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-9 {
       flex: 0 0 calc(100% * 9 / 12);
       max-width: calc(100% * 9 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-10 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-10 {
       flex: 0 0 calc(100% * 10 / 12);
       max-width: calc(100% * 10 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-11 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-11 {
       flex: 0 0 calc(100% * 11 / 12);
       max-width: calc(100% * 11 / 12); } }
-  @media screen and (max-width: 575.98px) {
-    .component-col.component-col-xs-12 {
+  @media screen and (min-width: 1199.98px) {
+    .component-col.component-col-xl-12 {
       flex: 0 0 calc(100% * 12 / 12);
       max-width: calc(100% * 12 / 12); } }
 
@@ -2640,8 +2643,6 @@ max-width	100%	540px	720px	960px	1140px
     cursor: pointer; }
   .component-control-label span {
     padding-top: 2px; }
-  .component-control-label > button {
-    min-width: 18px; }
 
 :export {
   widthXs: 575.98px;
@@ -3903,9 +3904,10 @@ max-width	100%	540px	720px	960px	1140px
   warningDark: #765f00; }
 
 .component-row {
+  box-sizing: border-box;
   display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
+  flex-flow: row wrap;
+  align-items: stretch;
   width: 100%;
   padding: var(--rowPadding); }
   .component-row.centralized {
@@ -6263,8 +6265,50 @@ h5 {
   warningDark: #765f00; }
 
 .component-switch {
-  position: relative;
   display: flex;
+  position: relative; }
+  .component-switch:not(:disabled) {
+    cursor: pointer; }
+  .component-switch:disabled {
+    cursor: not-allowed; }
+
+/* THEME */
+.component-switch.ios {
+  border: none;
+  cursor: pointer;
+  align-items: center;
+  position: relative;
+  background-color: #cdd3cd;
+  border-radius: 250px;
+  width: 46px;
+  height: 24px;
+  box-shadow: inset 0 1px 2px 0 rgba(90, 100, 90, 0.3);
+  transition: background-color 0.3s ease; }
+  .component-switch.ios:focus-visible {
+    outline: #33820d; }
+  .component-switch.ios::after {
+    content: '';
+    position: absolute;
+    display: flex;
+    background-color: white;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    transition: left 0.3s ease, background-color 0.3s ease;
+    left: 2px;
+    box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3); }
+  .component-switch.ios[data-checked='true'] {
+    background-color: #3fa110; }
+    .component-switch.ios[data-checked='true']::after {
+      left: calc(100% - 20px - 2px); }
+  .component-switch.ios:disabled {
+    background-color: #cdd3cd !important; }
+    .component-switch.ios:disabled::after {
+      background-color: #5a645a !important; }
+  .component-switch.ios[data-error='true'] {
+    background-color: #e60000 !important; }
+
+.component-switch.android {
   align-items: center;
   justify-items: center;
   background-color: rgba(0, 0, 0, 0);
@@ -6273,14 +6317,9 @@ h5 {
   margin-bottom: 4px;
   padding: 0;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
-  .component-switch:focus {
+  .component-switch.android:focus {
     outline: none; }
-  .component-switch .component-switch-track {
-    width: 38px;
-    height: 14px;
-    border-radius: 50px;
-    transition: background-color 0.3s ease; }
-  .component-switch .component-switch-thumb {
+  .component-switch.android .component-switch-thumb {
     align-self: center;
     transition: left 0.3s ease, right 0.3s ease, background-color 0.3s ease;
     width: 20px;
@@ -6288,31 +6327,28 @@ h5 {
     position: absolute;
     border-radius: 100%;
     box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3); }
-  .component-switch.component-switch-on .component-switch-thumb {
-    left: 20px; }
-  .component-switch.component-switch-off .component-switch-thumb {
-    left: -2px; }
-  .component-switch:not(:disabled) {
-    cursor: pointer; }
-
-/* THEME */
-.component-switch:not(:disabled).component-switch-on .component-switch-thumb {
-  background-color: #3fa110; }
-
-.component-switch:not(:disabled).component-switch-on .component-switch-track {
-  background-color: #33820d; }
-
-.component-switch:not(:disabled).component-switch-off .component-switch-thumb {
-  background-color: #fefefe; }
-
-.component-switch:not(:disabled).component-switch-off .component-switch-track {
-  background-color: #828a82; }
-
-.component-switch:disabled .component-switch-thumb {
-  background-color: #828a82; }
-
-.component-switch:disabled .component-switch-track {
-  background-color: #cdd3cd; }
+  .component-switch.android .component-switch-track {
+    width: 38px;
+    height: 14px;
+    border-radius: 50px;
+    transition: background-color 0.3s ease;
+    background-color: #33820d; }
+  .component-switch.android[data-checked='true'] .component-switch-thumb {
+    left: 20px;
+    background-color: #3fa110; }
+  .component-switch.android[data-checked='false'] .component-switch-thumb {
+    left: -2px;
+    background-color: #fefefe; }
+  .component-switch.android[data-checked='false'] .component-switch-track {
+    background-color: #828a82; }
+  .component-switch.android:disabled .component-switch-thumb {
+    background-color: #828a82; }
+  .component-switch.android:disabled .component-switch-track {
+    background-color: #cdd3cd; }
+  .component-switch.android[data-error='true'] .component-switch-thumb {
+    background-color: #ab4745; }
+  .component-switch.android[data-error='true'] .component-switch-track {
+    background-color: #e60000; }
 
 :export {
   widthXs: 575.98px;
@@ -8992,3 +9028,109 @@ h6.tp {
     h6.tp {
       font-size: 14px;
       line-height: 16px; } }
+
+:export {
+  white: #fefefe;
+  darkenWhite: #efefef;
+  black: #121212;
+  transparent: rgba(0, 0, 0, 0);
+  primary: #3fa110;
+  primaryDark: #33820d;
+  primaryLight: #d7e6c8;
+  secondaryDarker: #323c32;
+  secondaryDark: #5a645a;
+  blueDarker: #2b517b;
+  secondary: #828a82;
+  secondaryLight: #cdd3cd;
+  secondaryLighter: #f8f9f7;
+  danger: #e60000;
+  dangerLight: #ffb4b4;
+  dangerDark: #ab4745;
+  warning: #ffcd00;
+  warningLight: #ffeb98;
+  warningDark: #765f00; }
+
+:export {
+  widthXs: 575.98px;
+  widthSm: 767.98px;
+  widthMd: 991.98px;
+  widthLg: 1199.98px; }
+
+.v-slider {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  display: flex;
+  width: 100%;
+  height: auto;
+  gap: 16px;
+  padding: 4px; }
+  .v-slider[aria-disabled='true'] {
+    cursor: not-allowed !important; }
+    .v-slider[aria-disabled='true'] .v-slider-thumb {
+      cursor: not-allowed !important;
+      background-color: #5a645a !important; }
+    .v-slider[aria-disabled='true'] .v-slider-track {
+      background-color: #cdd3cd !important; }
+    .v-slider[aria-disabled='true'] .v-slider-fill {
+      background-color: #828a82 !important; }
+    .v-slider[aria-disabled='true'] .v-slider-option {
+      cursor: not-allowed !important; }
+  .v-slider .v-slider-input {
+    display: flex; }
+    .v-slider .v-slider-input .v-slider-track {
+      transition: background-color 0.3s ease;
+      position: relative;
+      height: 100%;
+      width: 24px;
+      display: flex;
+      flex-flow: column nowrap;
+      align-items: center;
+      justify-content: flex-end;
+      background-color: #d9d9d9;
+      border-radius: 50px;
+      box-shadow: inset 0 1px 2px 0 rgba(90, 100, 90, 0.3);
+      overflow: hidden; }
+      .v-slider .v-slider-input .v-slider-track .v-slider-fill {
+        width: 100%;
+        height: 70px;
+        border-top-left-radius: 24px;
+        border-top-right-radius: 24px;
+        background-color: #33820d;
+        transition: background-color 0.3s ease, height 0.3s ease, box-shadow 0.3s ease;
+        box-shadow: inset 0 0px 2px 0 rgba(40, 50, 40, 0.6); }
+        .v-slider .v-slider-input .v-slider-track .v-slider-fill[data-checked='false'] {
+          background-color: #d9d9d9;
+          box-shadow: inset 0 2px 2px 0 rgba(40, 50, 40, 0); }
+        .v-slider .v-slider-input .v-slider-track .v-slider-fill.grabbing {
+          background-color: #d7e6c8 !important;
+          box-shadow: inset 0 0 2px 0 rgba(40, 50, 40, 0.3); }
+      .v-slider .v-slider-input .v-slider-track .v-slider-thumb {
+        cursor: grab;
+        width: 20px;
+        height: 20px;
+        margin: 2px;
+        background-color: #fefefe;
+        border-radius: 20px;
+        box-shadow: 0 1px 2px 0 rgba(90, 100, 90, 0.3);
+        transition: background-color 0.3s ease;
+        touch-action: none; }
+        .v-slider .v-slider-input .v-slider-track .v-slider-thumb:active {
+          cursor: grabbing; }
+  .v-slider .v-slider-options {
+    display: flex;
+    flex-flow: column-reverse nowrap;
+    flex: 1 0 auto;
+    gap: 16px; }
+    .v-slider .v-slider-options .v-slider-option {
+      position: relative;
+      cursor: pointer;
+      height: 24px;
+      font-family: "Nunito", sans-serif;
+      font-size: 16px;
+      font-weight: 300;
+      line-height: 24px;
+      text-align: left;
+      color: #323c32; }
+      .v-slider .v-slider-options .v-slider-option[data-checked='true'] {
+        font-weight: 500; }

package/dist/index.d.ts

@@ -188,6 +188,7 @@ import ScrollArrowOverflow from './components/scrollArrowOverflow/ScrollArrowOve
 import { LeftControlWithLabel } from './components/table/components/leftControlWithLabel/LeftControlWithLabel';
 import TooltipElement from './components/tooltipElement/TooltipElement';
 import Typography from './components/typography/Typography';
+import VerticalSlider from './components/verticalSlider/verticalSlider';
 import VideoPlayer from './components/videoPlayer/VideoPlayer';
 import useCallbackedState from './hooks/useCallbackedState/useCallbackedState';
 import useCarouselBehaviour from './hooks/useCarouselBehaviour/useCarouselBehaviour';
@@ -236,10 +237,10 @@ export { Accordion, ActionCard, ActionsColumn, AnimatedLink, Banner, BigBlockBut
 /**
  * @deprecated Use LeftControlWithLabel instead
  */
-LeftControlWithLabel as LeftCheckboxWithLabel, LeftControlWithLabel, Menu, MenuItem, Modal, ModalManager, MoneyByMonth, MoneyMonthLineChart, Notification, NotificationPanel, PageSubTitle, PageTitle, Pagination, Paginator, PreviaVideo, QRCode, RadioButton, Row, ScrollArrowOverflow, Search, Select, Switch, Table, TableActions, TableFileNameAndAction, TableWithOverflow, Tabs, TextEditor, Title, Toast, ToastManager, Tooltip, TooltipManager, TopLoader, TypedTable, VideoModal, VideoPlayer, };
+LeftControlWithLabel as LeftCheckboxWithLabel, LeftControlWithLabel, Menu, MenuItem, Modal, ModalManager, MoneyByMonth, MoneyMonthLineChart, Notification, NotificationPanel, PageSubTitle, PageTitle, Pagination, Paginator, PreviaVideo, QRCode, RadioButton, Row, ScrollArrowOverflow, Search, Select, Switch, Table, TableActions, TableFileNameAndAction, TableWithOverflow, Tabs, TextEditor, Title, Toast, ToastManager, Tooltip, TooltipManager, TopLoader, TypedTable, VerticalSlider, VideoModal, VideoPlayer, };
 export { useCallbackedState, useCarouselBehaviour, useControlledTimer, useDraggableContainer, useDropOpened, useEvent, useFloatingPanel, useHTMLShare, useModalManager, useOutsideClick, usePagination, useProgressiveCount, usePublicMenuList, useScreenSize, useScrollTo, useStorageState, useSystemInfo, useTimeElapsed, useToastManager, useValidatedState, };
-export { ATMIcon, AconteceuIcon, AddAssemblyIcon, 
+export { AconteceuIcon, AddAssemblyIcon, 
 /**
  * @deprecated Use AddIcon instead
  */
-AddIcon as AddCircleIcon, AddIcon, AgencyIcon, AlertIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, ArrowLeftIcon, ArrowRightIcon, AssembleiasIcon, BackOfficeIcon, BarChartIcon, BeeIcon, Bell16Icon, BellIcon, BigPlayIcon, BoldIcon, CalendarCheckIcon, CalendarIcon, CardsIcon, CataventoVerde, CheckCircleIcon, CheckIcon, ChequeIcon, ChevronArrowDownIcon, ChevronArrowLeftIcon, ChevronArrowRightIcon, Chip, CircleArrowLeft, CircleArrowRight, ClockIcon, CloseIcon, CloudDownloadIcon, CloudUploadIcon, ComitesIcon, ComunidadeIcon, CopyIcon, CreditIcon, CrescerIcon, CrescerLogo, DevicePlusIcon, DownloadIcon, DraggableIcon, EditIcon, EvidenciasIcon, ExclamationIcon, ExitIconArrowLeft, ExitIconArrowRight, EyeIcon, FilePlusIcon, FilesIcon, FilterIcon, FontColorIcon, FontIcon, FormacaoIcon, FundacaoLogo, FundoSocialIcon, GlobeIcon, GraduationIcon, HamburgerIcon, HandUpIcon, HomeIcon, InformationIcon, InvestimentIcon, ItalicIcon, LinkIcon, LinksUteisIcon, ListDotIcon, ListIcon, LoaderIcon, LocalIcon, LockIcon, MessageIcon, MiniInformationIcon, MoneyFileIcon, NavigatorWithMouse, NotebookIcon, OptionsIcon, ParticipantesIcon, PaymentIcon, PercentLoaderIcon, PhonePlusIcon, PieChartIcon, PlayIcon, PrintIcon, QRCodeIcon, QRCodeWhatsapp, RedoIcon, RefreshIcon, SearchIcon, Settings16Icon, SettingsIcon, SicrediLogo, SquaresIcon, SustentabilidadeIcon, ThreeDotsLoader, ThumbsUpIcon, TimesCircleIcon, TooltipElement, TransferenciaIcon, TrashIcon, TrianguloInferior, TwoFileIcon, Typography, UnderlineIcon, UndoIcon, UserIcon, WebsiteIcon, };
+AddIcon as AddCircleIcon, AddIcon, AgencyIcon, AlertIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, ArrowLeftIcon, ArrowRightIcon, AssembleiasIcon, ATMIcon, BackOfficeIcon, BarChartIcon, BeeIcon, Bell16Icon, BellIcon, BigPlayIcon, BoldIcon, CalendarCheckIcon, CalendarIcon, CardsIcon, CataventoVerde, CheckCircleIcon, CheckIcon, ChequeIcon, ChevronArrowDownIcon, ChevronArrowLeftIcon, ChevronArrowRightIcon, Chip, CircleArrowLeft, CircleArrowRight, ClockIcon, CloseIcon, CloudDownloadIcon, CloudUploadIcon, ComitesIcon, ComunidadeIcon, CopyIcon, CreditIcon, CrescerIcon, CrescerLogo, DevicePlusIcon, DownloadIcon, DraggableIcon, EditIcon, EvidenciasIcon, ExclamationIcon, ExitIconArrowLeft, ExitIconArrowRight, EyeIcon, FilePlusIcon, FilesIcon, FilterIcon, FontColorIcon, FontIcon, FormacaoIcon, FundacaoLogo, FundoSocialIcon, GlobeIcon, GraduationIcon, HamburgerIcon, HandUpIcon, HomeIcon, InformationIcon, InvestimentIcon, ItalicIcon, LinkIcon, LinksUteisIcon, ListDotIcon, ListIcon, LoaderIcon, LocalIcon, LockIcon, MessageIcon, MiniInformationIcon, MoneyFileIcon, NavigatorWithMouse, NotebookIcon, OptionsIcon, ParticipantesIcon, PaymentIcon, PercentLoaderIcon, PhonePlusIcon, PieChartIcon, PlayIcon, PrintIcon, QRCodeIcon, QRCodeWhatsapp, RedoIcon, RefreshIcon, SearchIcon, Settings16Icon, SettingsIcon, SicrediLogo, SquaresIcon, SustentabilidadeIcon, ThreeDotsLoader, ThumbsUpIcon, TimesCircleIcon, TooltipElement, TransferenciaIcon, TrashIcon, TrianguloInferior, TwoFileIcon, Typography, UnderlineIcon, UndoIcon, UserIcon, WebsiteIcon, };