@policystudio/policy-studio-ui-vue 1.0.30 → 1.0.33

package/dist/css/psui_styles.css

@@ -7371,6 +7371,16 @@ video {
   cursor: not-allowed;
 }
 
+.psui-cursor-grab{
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+.psui-cursor-grabbing{
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
 .psui-block{
   display: block;
 }
@@ -8024,17 +8034,17 @@ video {
 
 .psui-text-p{
   font-size: 16px;
-  line-height: 120%;
+  line-height: 130%;
 }
 
 .psui-text-h1{
   font-size: 28px;
-  line-height: 120%;
+  line-height: 130%;
 }
 
 .psui-text-h2{
   font-size: 24px;
-  line-height: 120%;
+  line-height: 130%;
 }
 
 .psui-text-h3{
@@ -17171,6 +17181,143 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
+.psui-el-draggable {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  grid-gap: 0.5rem;
+  gap: 0.5rem;
+}
+
+.psui-el-draggable .psui-el-draggable-wrapper {
+    width: 100%;
+    border-radius: 0.5rem;
+    --bg-opacity: 1;
+    background-color: #E6ECF2;
+    background-color: rgba(230, 236, 242, var(--bg-opacity));
+    padding: 0.5rem;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 8px 8px 0px 8px;
+  }
+
+.psui-el-draggable .psui-el-draggable-title {
+    width: 100%;
+    display: flex;
+    border-radius: 0.125rem;
+    align-items: center;
+    cursor: -webkit-grab;
+    cursor: grab;
+    vertical-align: middle;
+  }
+
+.psui-el-draggable .psui-el-draggable-title:active {
+      cursor: -webkit-grabbing;
+      cursor: grabbing;
+    }
+
+.psui-el-draggable .psui-el-draggable-title{
+    padding: 6px 16px;
+}
+
+.psui-el-draggable .psui-el-draggable-title h2 {
+      width: 100%;
+      --text-opacity: 1;
+      color: #28323B;
+      color: rgba(40, 50, 59, var(--text-opacity));
+      font-weight: 700;
+      text-transform: uppercase;
+      font-size: 12px;
+    }
+
+.psui-el-draggable .psui-el-draggable-title i {
+      font-family: 'Material Icons Round';
+      font-weight: normal;
+      font-style: normal;
+      font-size: 24px;
+      line-height: 1;
+      letter-spacing: normal;
+      text-transform: none;
+      display: inline-block;
+      white-space: nowrap;
+      word-wrap: normal;
+      direction: ltr;
+      -webkit-font-feature-settings: 'liga';
+      -webkit-font-smoothing: antialiased;
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity));
+      font-size: 18px;
+    }
+
+.psui-el-draggable .psui-el-draggable-list-items-wrapper {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+.psui-el-draggable .psui-el-draggable-list-items-wrapper li {
+      width: 100%;
+      margin-bottom: 0.5rem;
+      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.03), 0px 1px 2px rgba(0, 0, 0, 0.1);
+      background-color: #ffffff;
+      border-radius: 0.25rem;
+      display: flex;
+      align-items: center;
+      padding: 7px 16px;
+    }
+
+.psui-el-draggable .psui-el-draggable-list-items-wrapper li:hover {
+        --text-opacity: 1;
+        color: #798490;
+        color: rgba(121, 132, 144, var(--text-opacity));
+        cursor: -webkit-grab;
+        cursor: grab
+      }
+
+.psui-el-draggable .psui-el-draggable-list-items-wrapper li:active {
+        cursor: -webkit-grabbing;
+        cursor: grabbing
+      }
+
+.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-wrapper {
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none;
+      width: 100%;
+      display: flex;
+      align-items: center
+    }
+
+.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-icon {
+      display: flex;
+      justify-content: flex-end;
+      margin-left: auto;
+    }
+
+.psui-el-draggable .psui-el-draggable-list-items-wrapper .psui-el-draggable-item-icon i {
+        font-family: 'Material Icons Round';
+        font-weight: normal;
+        font-style: normal;
+        font-size: 24px;
+        line-height: 1;
+        letter-spacing: normal;
+        text-transform: none;
+        display: inline-block;
+        white-space: nowrap;
+        word-wrap: normal;
+        direction: ltr;
+        -webkit-font-feature-settings: 'liga';
+        -webkit-font-smoothing: antialiased;
+        --text-opacity: 1;
+        color: #D6DDE5;
+        color: rgba(214, 221, 229, var(--text-opacity));
+        font-size: 18px;
+      }
+
 .psui-el-input-select {
   width: 100%;
   display: flex;
@@ -17180,6 +17327,7 @@ html {
   color: #A2ACB7;
   color: rgba(162, 172, 183, var(--text-opacity));
   box-sizing: border-box;
+  transition: ease 130ms;
 }
 
 .psui-el-input-select.disabled {
@@ -17229,7 +17377,7 @@ html {
       content: 'arrow_drop_down';
       font-family: 'Material Icons Round';
       font-size: 24px;
-      top: 26px;
+      top: 38px;
       right: 15px;
       z-index: -20;
     }
@@ -17277,12 +17425,12 @@ html {
     --text-opacity: 1;
     color: #28323B;
     color: rgba(40, 50, 59, var(--text-opacity));
-    font-size: 16px;
-    line-height: 130%;
     align-items: center;
     width: 100%;
     font-weight: 700;
-    pointer-events: none
+    pointer-events: none;
+    font-size: 16px;
+    line-height: 32px;
   }
 
 .psui-el-input-select .psui-el-input-helper {
@@ -17290,7 +17438,7 @@ html {
     color: #798490;
     color: rgba(121, 132, 144, var(--text-opacity));
     font-size: 12px;
-    line-height: 120%;
+    line-height: 24px;
   }
 
 .psui-el-input-select.layout-mini select {
@@ -17388,6 +17536,7 @@ html {
 .psui-el-input-textarea .psui-el-input-textarea-wrapper {
     display: flex;
     flex-direction: column;
+    transition: ease 130ms;
   }
 
 .psui-el-input-textarea .psui-el-input-textarea-wrapper label {
@@ -17398,7 +17547,9 @@ html {
       font-size: 16px;
       line-height: 130%;
       padding-top: 0.25rem;
-      padding-bottom: 0.25rem
+      padding-bottom: 0.25rem;
+      font-size: 16px;
+      line-height: 32px;
     }
 
 .psui-el-input-textarea .psui-el-input-textarea-wrapper textarea {
@@ -17452,7 +17603,7 @@ html {
     display: flex;
     font-weight: 400;
     font-size: 12px;
-    line-height: 120%;
+    line-height: 24px;
     padding: 5px 0px;
   }
 
@@ -17462,24 +17613,22 @@ html {
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog {
       position: fixed;
-      display: none;
       opacity: 0;
       transition-property: opacity;
-      transition-duration: 500ms;
+      transition-duration: 300ms;
       transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      transition-delay: 0.4s;
     }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content {
         display: flex;
         flex-direction: column;
-        border-radius: 0.375rem;
-        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
-        z-index: 20;
         --bg-opacity: 1;
         background-color: #798490;
         background-color: rgba(121, 132, 144, var(--bg-opacity));
         color: #ffffff;
-        padding: 5px 8px;
+        padding: 5px 8px 4px 8px;
+        border-radius: 4px;
       }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content h2 {
@@ -17499,9 +17648,10 @@ html {
             --text-opacity: 1;
             color: #28323B;
             color: rgba(40, 50, 59, var(--text-opacity));
-            padding: 1rem;
+            box-shadow: none;
             font-size: 12px;
             line-height: 120%;
+            padding: 10px 16px 12px 16px;
           }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray .psui-el-tooltip-content-wrapper {
@@ -17514,9 +17664,10 @@ html {
             background-color: #00465F;
             background-color: rgba(0, 70, 95, var(--bg-opacity));
             color: #ffffff;
-            padding: 1rem;
+            box-shadow: none;
             font-size: 12px;
             line-height: 120%;
+            padding: 10px 16px 12px 16px;
           }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-blue .psui-el-tooltip-content-wrapper {
@@ -17531,9 +17682,10 @@ html {
             --text-opacity: 1;
             color: #AA3937;
             color: rgba(170, 57, 55, var(--text-opacity));
-            padding: 1rem;
+            box-shadow: none;
             font-size: 12px;
             line-height: 120%;
+            padding: 10px 16px 12px 16px;
           }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-red .psui-el-tooltip-content-wrapper {
@@ -17548,9 +17700,9 @@ html {
             padding-left: 1.5rem;
             padding-right: 1.5rem;
             display: flex;
-            grid-gap: 0.75rem;
-            gap: 0.75rem;
             flex-direction: column;
+            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
+            gap: 8.8px;
           }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white h2 {
@@ -17566,13 +17718,12 @@ html {
               --text-opacity: 1;
               color: #798490;
               color: rgba(121, 132, 144, var(--text-opacity));
-              font-size: 14px;
-              line-height: 130%;
               font-weight: 400;
               display: flex;
               flex-direction: column;
-              grid-gap: 0.75rem;
-              gap: 0.75rem;
+              gap: 13.6px;
+              font-size: 14px;
+              line-height: 120%;
             }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button {
@@ -17583,12 +17734,17 @@ html {
                 --text-opacity: 1;
                 color: #318FAC;
                 color: rgba(49, 143, 172, var(--text-opacity));
+                font-weight: 700;
                 padding: 7px 16px;
                 width: -webkit-fit-content;
                 width: -moz-fit-content;
                 width: fit-content;
               }
 
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button:focus {
+                  outline: none;
+                }
+
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
             --bg-opacity: 1;
             background-color: #00465F;
@@ -17598,9 +17754,9 @@ html {
             padding-left: 1.5rem;
             padding-right: 1.5rem;
             display: flex;
-            grid-gap: 0.75rem;
-            gap: 0.75rem;
             flex-direction: column;
+            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
+            gap: 8.8px;
           }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark h2 {
@@ -17612,13 +17768,12 @@ html {
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper {
               color: #ffffff;
-              font-size: 14px;
-              line-height: 130%;
               font-weight: 400;
               display: flex;
               flex-direction: column;
-              grid-gap: 0.75rem;
-              gap: 0.75rem;
+              gap: 13.6px;
+              font-size: 14px;
+              line-height: 120%;
             }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button {
@@ -17627,12 +17782,17 @@ html {
                 background-color: #318FAC;
                 background-color: rgba(49, 143, 172, var(--bg-opacity));
                 color: #ffffff;
+                font-weight: 700;
                 padding: 7px 16px;
                 width: -webkit-fit-content;
                 width: -moz-fit-content;
                 width: fit-content;
               }
 
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button:focus {
+                  outline: none;
+                }
+
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
             --bg-opacity: 1;
             background-color: #64B5CE;
@@ -17642,9 +17802,9 @@ html {
             padding-left: 1.5rem;
             padding-right: 1.5rem;
             display: flex;
-            grid-gap: 0.75rem;
-            gap: 0.75rem;
             flex-direction: column;
+            box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
+            gap: 8.8px;
           }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color h2 {
@@ -17656,13 +17816,12 @@ html {
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper {
               color: #ffffff;
-              font-size: 14px;
-              line-height: 130%;
               font-weight: 400;
               display: flex;
               flex-direction: column;
-              grid-gap: 0.75rem;
-              gap: 0.75rem;
+              gap: 13.6px;
+              font-size: 14px;
+              line-height: 120%;
             }
 
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button {
@@ -17671,12 +17830,17 @@ html {
                 background-color: #318FAC;
                 background-color: rgba(49, 143, 172, var(--bg-opacity));
                 color: #ffffff;
+                font-weight: 700;
                 padding: 7px 16px;
                 width: -webkit-fit-content;
                 width: -moz-fit-content;
                 width: fit-content;
               }
 
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button:focus {
+                  outline: none;
+                }
+
 .psui-el-inline-selector {
   width: auto;
   max-width: 100%;
@@ -17928,6 +18092,7 @@ html {
   padding-right: 1rem;
   border-radius: 0.375rem;
   font-weight: 700;
+  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
 }
 
 .psui-el-toast .psui-el-toast-icon {
@@ -17943,7 +18108,9 @@ html {
 .psui-el-toast .psui-el-toast-actions {
     display: flex;
     grid-gap: 1rem;
-    gap: 1rem
+    gap: 1rem;
+    font-size: 12px;
+    line-height: 130%;
   }
 
 .psui-el-toast.fill-intense.layout-info {
@@ -17976,7 +18143,7 @@ html {
       color: rgba(49, 143, 172, var(--text-opacity));
       --bg-opacity: 1;
       background-color: #E0EFF6;
-      background-color: rgba(224, 239, 246, var(--bg-opacity))
+      background-color: rgba(224, 239, 246, var(--bg-opacity));
     }
 
 .psui-el-toast.fill-soft.layout-success {
@@ -18018,29 +18185,48 @@ html {
       line-height: 130%
     }
 
-.psui-el-dropdown-menu {
-  position: relative;
-  display: inline-block;
-  text-align: left;
-  background-color: #ffffff;
-  padding: 0px 20px;
-  width: 230px;
+.psui-el-dropdown-menu-list {
+  width: 100%;
+  font-weight: 700;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
 }
 
-.psui-el-dropdown-menu:hover {
-    cursor: pointer;
-    --bg-opacity: 1;
-    background-color: #ECF7FB;
-    background-color: rgba(236, 247, 251, var(--bg-opacity));
+.psui-el-dropdown-menu-list li {
+    width: 100%;
     --text-opacity: 1;
-    color: #318FAC;
-    color: rgba(49, 143, 172, var(--text-opacity));
+    color: #515E6A;
+    color: rgba(81, 94, 106, var(--text-opacity));
+    font-size: 14px;
+    line-height: 130%;
+    list-style-type: none;
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+    padding: 7px 20px;
+    font-weight: 700;
   }
 
-.psui-el-dropdown-menu:first-child {
-  }
+.psui-el-dropdown-menu-list li:hover {
+      --text-opacity: 1;
+      color: #318FAC;
+      color: rgba(49, 143, 172, var(--text-opacity));
+      --bg-opacity: 1;
+      background-color: #ECF7FB;
+      background-color: rgba(236, 247, 251, var(--bg-opacity));
+    }
+
+.psui-el-dropdown-menu-list li span {
+      width: 100%;
+    }
+
+.psui-el-dropdown-menu {
+  position: relative;
+  display: inline-block;
+  text-align: left;
+}
 
-.psui-el-dropdown-menu-button {
+.psui-el-dropdown-menu button {
     display: inline-flex;
     justify-content: center;
     align-items: center;
@@ -18054,37 +18240,30 @@ html {
     font-size: 0.875rem;
   }
 
-.psui-el-dropdown-menu-button:focus {
+.psui-el-dropdown-menu button:focus {
       outline: none;
       box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
     }
 
-.psui-el-dropdown-menu-dialog {
+.psui-el-dropdown-menu-dialog-wrapper {
     display: none;
     transform-origin: top right;
+    background-color: #ffffff;
     position: fixed;
-    margin-top: 0.5rem;
     width: auto;
-    border-radius: 0.25rem;
-    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
+    border-radius: 0.375rem;
     z-index: 50;
     opacity: 0;
-    transition: opacity 150ms ease-in-out;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
+    transition-property: all;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
   }
 
-.psui-el-dropdown-menu-dialog-category-divider {
+.psui-el-dropdown-menu-dialog-wrapper-dialog {
       width: 100%;
     }
 
-.psui-el-dropdown-menu-dialog-category-divider h2 {
-        --text-opacity: 1;
-        color: #E6ECF2;
-        color: rgba(230, 236, 242, var(--text-opacity));
-        font-weight: 700;
-        white-space: nowrap;
-        margin-bottom: 1rem;
-      }
-
 .psui-el-simple-progress-bar {
   position: relative;
   height: 0.5rem;
@@ -18148,7 +18327,7 @@ html {
           border-radius: 9999px;
           transition-property: all;
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          transition-duration: 500ms;
+          transition-duration: 300ms;
           box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
           left: 2px;
@@ -18170,7 +18349,7 @@ html {
           border-radius: 9999px;
           transition-property: all;
           transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-          transition-duration: 500ms;
+          transition-duration: 300ms;
           box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
           box-shadow: 0 0 98px 6px rgba(0, 0, 0, 0.2);
           left: 16px;
@@ -18214,7 +18393,7 @@ html {
         border-radius: 9999px;
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 500ms;
+        transition-duration: 300ms;
         box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
         left: 2px;
         top: 2px;
@@ -18235,7 +18414,7 @@ html {
         border-radius: 9999px;
         transition-property: all;
         transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 500ms;
+        transition-duration: 300ms;
         box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
         left: 24px;
         top:2px;
@@ -18247,6 +18426,10 @@ html {
   --text-opacity: 1;
   color: #798490;
   color: rgba(121, 132, 144, var(--text-opacity));
+  display: flex;
+  --bg-opacity: 1;
+  background-color: #F3F6F9;
+  background-color: rgba(243, 246, 249, var(--bg-opacity));
 }
 
 .psui-el-radio.disabled .psui-el-checkmark {
@@ -18284,8 +18467,9 @@ html {
       }
 
 .psui-el-radio.size-small .psui-el-checkmark {
-      display: block;
       cursor: pointer;
+      display: flex;
+      align-items: center;
       height: 18px;
     }
 
@@ -18298,7 +18482,6 @@ html {
         --text-opacity: 1;
         color: #A2ACB7;
         color: rgba(162, 172, 183, var(--text-opacity));
-        vertical-align: text-bottom;
         font-family: 'Material Icons Round';
         font-size: 18px;
       }
@@ -18325,8 +18508,9 @@ html {
       }
 
 .psui-el-radio.size-big .psui-el-checkmark {
-      display: block;
       cursor: pointer;
+      display: flex;
+      align-items: center;
       height: 24px;
     }
 
@@ -18339,7 +18523,6 @@ html {
         --text-opacity: 1;
         color: #A2ACB7;
         color: rgba(162, 172, 183, var(--text-opacity));
-        vertical-align: text-bottom;
         font-family: 'Material Icons Round';
         font-size: 24px;
       }
@@ -18420,9 +18603,9 @@ html {
   align-items: flex-start;
   padding-right: 0.75rem;
   padding-left: 0.5rem;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
   border-radius: 0.375rem;
+  padding-top: 8.8px;
+  padding-bottom: 8.8px;
 }
 
 .psui-el-dialog-wrapper {
@@ -18452,10 +18635,9 @@ html {
     }
 
 .psui-el-dialog.layout-vertical {
-    padding-right: 0.5rem;
-    padding-left: 0.5rem;
     display: flex;
     align-items: flex-start;
+    padding: 9.6px 9.6px 11.2px 9.6px;
   }
 
 .psui-el-dialog.layout-vertical .psui-el-dialog-wrapper {
@@ -18541,6 +18723,9 @@ html {
   --text-opacity: 1;
   color: #798490;
   color: rgba(121, 132, 144, var(--text-opacity));
+  --bg-opacity: 1;
+  background-color: #F3F6F9;
+  background-color: rgba(243, 246, 249, var(--bg-opacity));
 }
 
 .psui-el-checkbox.disabled .psui-el-checkmark {
@@ -18586,8 +18771,9 @@ html {
       }
 
 .psui-el-checkbox.size-small .psui-el-checkmark {
-      display: block;
+      display: flex;
       cursor: pointer;
+      align-items: center;
       height: 18px;
     }
 
@@ -18600,7 +18786,6 @@ html {
         --text-opacity: 1;
         color: #A2ACB7;
         color: rgba(162, 172, 183, var(--text-opacity));
-        vertical-align: text-bottom;
         font-family:'Material Icons Round';
         font-size: 18px;
       }
@@ -18637,12 +18822,11 @@ html {
 .psui-el-checkbox.size-big .psui-el-checkmark {
       display: flex;
       cursor: pointer;
-      align-content: center;
+      align-items: center;
       height: 24px;
     }
 
 .psui-el-checkbox.size-big .psui-el-checkmark span {
-        margin-top: 1px;
         margin-left: 8px;
       }
 
@@ -18713,6 +18897,19 @@ html {
       border-bottom: 0;
     }
 
+.psui-el-table-rich thead th {
+        padding: 15px 16px;
+      }
+
+.psui-el-table-rich tbody th,
+        .psui-el-table-rich tbody td,
+        .psui-el-table-rich tbody tr {
+        padding: 7px 16px;
+        --text-opacity: 1;
+        color: #28323B;
+        color: rgba(40, 50, 59, var(--text-opacity));
+      }
+
 .psui-el-highlight-ripple-icon {
   position: static;
   box-sizing: border-box;
@@ -18887,7 +19084,7 @@ html {
 
 .psui-el-chart-legend-total {
     font-size: 16px;
-    line-height: 120%;
+    line-height: 130%;
     --text-opacity: 1;
     color: #28323B;
     color: rgba(40, 50, 59, var(--text-opacity));
@@ -18930,10 +19127,10 @@ html {
 .psui-el-card-infos-content {
     width: 100%;
     display: flex;
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
     font-size: 16px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
 .psui-el-card-infos-icon {
@@ -18956,7 +19153,9 @@ html {
   display: flex;
   align-content: center;
   border-radius: 0.375rem;
-  transition: cubic-bezier(.17,.67,.83,.67) 250ms;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 130ms;
 }
 
 .psui-el-button span {
@@ -19004,7 +19203,7 @@ html {
     display: flex;
     align-items: center;
     align-content: center;
-    padding: 7px 16px;
+    padding: 7px 13px;
     font-size: 14px;
   }
 
@@ -19129,9 +19328,14 @@ html {
     color: rgba(49, 143, 172, var(--text-opacity));
   }
 
-.psui-el-button.layout-ghost.hover, 
-      .psui-el-button.layout-ghost:active:not(.disabled) {
-      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05);
+.psui-el-button.layout-ghost.hover {
+      --bg-opacity: 1;
+      background-color: #ECF7FB;
+      background-color: rgba(236, 247, 251, var(--bg-opacity))
+    }
+
+.psui-el-button.layout-ghost:active:not(.disabled) {
+      box-shadow: inset 0px 1px 2px rgba(0,0,0,0.05)
     }
 
 .psui-el-button.layout-ghost.disabled {
@@ -19164,6 +19368,35 @@ html {
       color: rgba(100, 181, 206, var(--text-opacity))
     }
 
+.psui-el-button.layout-caution {
+    --bg-opacity: 1;
+    background-color: #FCEBEB;
+    background-color: rgba(252, 235, 235, var(--bg-opacity));
+    --text-opacity: 1;
+    color: #D65C5A;
+    color: rgba(214, 92, 90, var(--text-opacity));
+  }
+
+.psui-el-button.layout-caution.hover, 
+      .psui-el-button.layout-caution:active:not(.disabled) {
+      --bg-opacity: 1;
+      background-color: #FCEBEB;
+      background-color: rgba(252, 235, 235, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #AA3937;
+      color: rgba(170, 57, 55, var(--text-opacity));
+    }
+
+.psui-el-button.layout-caution.disabled {
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity));
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      cursor: default
+    }
+
 .psui-el-chips {
   display: inline-flex;
   position: relative;
@@ -19220,7 +19453,9 @@ html {
       --text-opacity: 1;
       color: #798490;
       color: rgba(121, 132, 144, var(--text-opacity));
-      background-color: #ffffff;
+      --bg-opacity: 1;
+      background-color: #F3F6F9;
+      background-color: rgba(243, 246, 249, var(--bg-opacity));
       transition-property: all;
       cursor: pointer;
       border-radius: 0.25rem;
@@ -19244,6 +19479,9 @@ html {
         --text-opacity: 1;
         color: #318FAC;
         color: rgba(49, 143, 172, var(--text-opacity));
+        --bg-opacity: 1;
+        background-color: #F3F6F9;
+        background-color: rgba(243, 246, 249, var(--bg-opacity));
       }
 
 .psui-el-chips.type-checkbox label:hover:before, .psui-el-chips.type-radio label:hover:before {
@@ -19275,9 +19513,6 @@ html {
       --text-opacity: 1;
       color: #515E6A;
       color: rgba(81, 94, 106, var(--text-opacity));
-      --bg-opacity: 1;
-      background-color: #F3F6F9;
-      background-color: rgba(243, 246, 249, var(--bg-opacity));
       transition-property: all;
       cursor: pointer;
       border-radius: 0.25rem;
@@ -19287,6 +19522,7 @@ html {
       padding-right: 0.75rem;
       font-size: 14px;
       line-height: 130%;
+      background-color: #F6F7F8;
     }
 
 .psui-el-chips.type-button label:hover {
@@ -19361,11 +19597,12 @@ html {
         padding-right: 0.5rem;
       }
 
-.psui-el-chips.type-button.layout-rich label:hover {
-          --text-opacity: 1;
-          color: #798490;
-          color: rgba(121, 132, 144, var(--text-opacity));
-        }
+.psui-el-chips.type-button.layout-rich label:hover,
+            .psui-el-chips.type-button.layout-rich label:hover .psui-el-chips-close {
+            --text-opacity: 1;
+            color: #798490;
+            color: rgba(121, 132, 144, var(--text-opacity));
+          }
 
 .psui-el-chips.type-button.layout-rich label:hover .psui-el-chips-icon-prepend {
             --bg-opacity: 1;
@@ -19378,11 +19615,17 @@ html {
           --bg-opacity: 1;
           background-color: #E0EFF6;
           background-color: rgba(224, 239, 246, var(--bg-opacity));
-          --text-opacity: 1;
-          color: #318FAC;
-          color: rgba(49, 143, 172, var(--text-opacity));
         }
 
+.psui-el-chips.type-button.layout-rich label:focus,
+            .psui-el-chips.type-button.layout-rich label:focus .psui-el-chips-close,
+            .psui-el-chips.type-button.layout-rich label:active,
+            .psui-el-chips.type-button.layout-rich label:active .psui-el-chips-close {
+            --text-opacity: 1;
+            color: #318FAC;
+            color: rgba(49, 143, 172, var(--text-opacity));
+          }
+
 .psui-el-chips.type-button.layout-rich label:focus .psui-el-chips-icon-prepend, .psui-el-chips.type-button.layout-rich label:active .psui-el-chips-icon-prepend {
             --bg-opacity: 1;
             background-color: #318FAC;
@@ -19400,6 +19643,11 @@ html {
           border-radius: 9999px;
           color: #ffffff;
           margin-right: 0.5rem;
+          width: 1.5rem;
+          height: 1.5rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
         }
 
 .psui-el-chips.type-button.layout-rich .psui-el-chips-close {
@@ -19409,28 +19657,23 @@ html {
         display: flex;
         align-items: center;
         justify-content: center;
+        margin-left: 0.5rem;
       }
 
-.psui-el-chips.type-button.layout-rich .psui-el-chips-close span {
-          margin-left: 0.5rem;
-        }
-
 .psui-el-toggle {
   display: flex;
-  border-radius: 0.125rem;
   --bg-opacity: 1;
   background-color: #F3F6F9;
   background-color: rgba(243, 246, 249, var(--bg-opacity));
-  grid-column-gap: 1px;
-  -moz-column-gap: 1px;
-       column-gap: 1px;
+  align-items: center;
   padding: 2px;
+  gap: 2px;
+  border-radius: 4px;
 }
 
 .psui-el-toggle button {
     transition: cubic-bezier(.17,.67,.83,.67) 250ms;
     display: inline-flex;
-    border-radius: 0.125rem;
     font-size: 14px;
     line-height: 130%;
     --bg-opacity: 1;
@@ -19439,8 +19682,11 @@ html {
     --text-opacity: 1;
     color: #318FAC;
     color: rgba(49, 143, 172, var(--text-opacity));
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    vertical-align: middle;
+    border-radius: 4px;
+    padding:1px 8px;
   }
 
 .psui-el-toggle button.status-active {
@@ -19476,6 +19722,10 @@ html {
       cursor: not-allowed
     }
 
+.psui-el-tab-header button:focus {
+      outline: none;
+    }
+
 .psui-el-tab-header.status-disabled .psui-el-input-wrapper {
       --bg-opacity: 1;
       background-color: #E6ECF2;
@@ -19499,6 +19749,7 @@ html {
       color: #515E6A;
       color: rgba(81, 94, 106, var(--text-opacity));
       padding: 6px 12px;
+      box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
     }
 
 .psui-el-tab-header.layout-standard button:not(:last-child) {
@@ -19519,6 +19770,7 @@ html {
         --text-opacity: 1;
         color: #318FAC;
         color: rgba(49, 143, 172, var(--text-opacity));
+        box-shadow: inset 0px 0px 8px rgba(40, 50, 59, 0.05);
       }
 
 .psui-el-tab-header.layout-standard button.status-active {
@@ -19553,6 +19805,12 @@ html {
       padding: 11.5px 0;
     }
 
+.psui-el-tab-header.layout-underline button:hover {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+      }
+
 .psui-el-tab-header.layout-underline button:not(:last-child) {
         margin-right: 20px;
       }
@@ -19586,6 +19844,12 @@ html {
       padding: 9px 12px;
     }
 
+.psui-el-tab-header.layout-folder button:hover {
+        --text-opacity: 1;
+        color: #318FAC;
+        color: rgba(49, 143, 172, var(--text-opacity));
+      }
+
 .psui-el-tab-header.layout-folder button:not(:last-child) {
         margin-right: 4px;
       }
@@ -19627,18 +19891,28 @@ html {
         color: rgba(49, 143, 172, var(--text-opacity));
       }
 
-.psui-el-accordion-item-content {
-      padding-bottom: 24px;
-    }
-
 .psui-el-accordion-item-icon {
+      font-family: 'Material Icons Round';
+      font-weight: normal;
+      font-style: normal;
+      font-size: 24px;
+      line-height: 1;
+      letter-spacing: normal;
+      text-transform: none;
+      display: inline-block;
+      white-space: nowrap;
+      word-wrap: normal;
+      direction: ltr;
+      -webkit-font-feature-settings: 'liga';
+      -webkit-font-smoothing: antialiased;
       font-size: 20px;
       width: 20px;
+      transition: transform 0.4s ease-in-out;
     }
 
 .psui-el-accordion.layout-big .psui-el-accordion-item-header, .psui-el-accordion.layout-big .psui-el-accordion-item-content {
-        padding-left: 16px;
-        padding-right: 16px;
+        padding-left: 1rem;
+        padding-right: 1rem;
       }
 
 .psui-el-accordion.layout-big .psui-el-accordion-item-title {
@@ -19662,9 +19936,13 @@ html {
 .psui-el-accordion.layout-medium .psui-el-accordion-item-icon {
         --text-opacity: 1;
         color: #515E6A;
-        color: rgba(81, 94, 106, var(--text-opacity))
+        color: rgba(81, 94, 106, var(--text-opacity));
       }
 
+.psui-el-accordion.layout-medium .psui-el-accordion-item.status-opened .psui-el-accordion-item-icon {
+          transform: rotate(180deg);
+        }
+
 .psui-el-accordion .psui-el-accordion-item.status-opened .psui-el-accordion-item-header, .psui-el-accordion .psui-el-accordion-item-header:hover {
       --text-opacity: 1;
       color: #318FAC;
@@ -19677,6 +19955,27 @@ html {
         color: rgba(49, 143, 172, var(--text-opacity));
       }
 
+.psui-el-accordion .psui-el-accordion-item-content {
+    list-style-type: none;
+    --text-opacity: 1;
+    color: #515E6A;
+    color: rgba(81, 94, 106, var(--text-opacity));
+    margin-bottom: 1.25rem;
+  }
+
+.psui-el-accordion .accordion-fade-enter-active,
+    .psui-el-accordion .accordion-fade-leave-active {
+    will-change: height, margin-bottom;
+    transition: height 0.4s ease, margin-bottom 0.4s ease-in-out;
+    overflow: hidden;
+  }
+
+.psui-el-accordion .accordion-fade-enter,
+    .psui-el-accordion .accordion-fade-leave-to {
+    height: 0 !important;
+    margin-bottom: 0 !important;
+  }
+
 .psui-el-input {
   /* Layout Default */
   /* ----------------------------------------- Layout Default */
@@ -19701,9 +20000,9 @@ html {
     --text-opacity: 1;
     color: #798490;
     color: rgba(121, 132, 144, var(--text-opacity));
+    margin-top: 0.25rem;
     font-size: 12px;
-    line-height: 130%;
-    margin-top: 0.25rem
+    line-height: 24px;
   }
 
 .psui-el-input-wrapper {
@@ -19716,14 +20015,15 @@ html {
     border-radius: 0.375rem;
     background-color: #ffffff;
     display: flex;
-    transition: cubic-bezier(.17,.67,.83,.67) 250ms
+    transition: ease 130ms;
   }
 
 .psui-el-input label {
     font-weight: 700;
     --text-opacity: 1;
     color: #28323B;
-    color: rgba(40, 50, 59, var(--text-opacity))
+    color: rgba(40, 50, 59, var(--text-opacity));
+    line-height: 32px;
   }
 
 .psui-el-input input {
@@ -19775,7 +20075,7 @@ html {
 
 .psui-el-input.layout-default input {
       font-size: 16px;
-      line-height: 120%;
+      line-height: 130%;
       padding: 11.5px 16px;
     }
 
@@ -24631,6 +24931,16 @@ html {
     cursor: not-allowed;
   }
 
+  .sm\:psui-cursor-grab{
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+
+  .sm\:psui-cursor-grabbing{
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+
   .sm\:psui-block{
     display: block;
   }
@@ -25284,17 +25594,17 @@ html {
 
   .sm\:psui-text-p{
     font-size: 16px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .sm\:psui-text-h1{
     font-size: 28px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .sm\:psui-text-h2{
     font-size: 24px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .sm\:psui-text-h3{
@@ -39041,6 +39351,16 @@ html {
     cursor: not-allowed;
   }
 
+  .md\:psui-cursor-grab{
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+
+  .md\:psui-cursor-grabbing{
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+
   .md\:psui-block{
     display: block;
   }
@@ -39694,17 +40014,17 @@ html {
 
   .md\:psui-text-p{
     font-size: 16px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .md\:psui-text-h1{
     font-size: 28px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .md\:psui-text-h2{
     font-size: 24px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .md\:psui-text-h3{
@@ -53451,6 +53771,16 @@ html {
     cursor: not-allowed;
   }
 
+  .lg\:psui-cursor-grab{
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+
+  .lg\:psui-cursor-grabbing{
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+
   .lg\:psui-block{
     display: block;
   }
@@ -54104,17 +54434,17 @@ html {
 
   .lg\:psui-text-p{
     font-size: 16px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .lg\:psui-text-h1{
     font-size: 28px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .lg\:psui-text-h2{
     font-size: 24px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .lg\:psui-text-h3{
@@ -67861,6 +68191,16 @@ html {
     cursor: not-allowed;
   }
 
+  .xl\:psui-cursor-grab{
+    cursor: -webkit-grab;
+    cursor: grab;
+  }
+
+  .xl\:psui-cursor-grabbing{
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+  }
+
   .xl\:psui-block{
     display: block;
   }
@@ -68514,17 +68854,17 @@ html {
 
   .xl\:psui-text-p{
     font-size: 16px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .xl\:psui-text-h1{
     font-size: 28px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .xl\:psui-text-h2{
     font-size: 24px;
-    line-height: 120%;
+    line-height: 130%;
   }
 
   .xl\:psui-text-h3{