@policystudio/policy-studio-ui-vue 1.0.28 → 1.0.29

package/dist/css/psui_styles.css

@@ -16969,6 +16969,7 @@ html {
   --text-opacity: 1;
   color: #A2ACB7;
   color: rgba(162, 172, 183, var(--text-opacity));
+  box-sizing: border-box;
 }
 
 .psui-el-input-select.disabled {
@@ -16982,80 +16983,85 @@ html {
     }
 
 .psui-el-input-select.disabled select {
-      --bg-opacity: 1;
-      background-color: #E6ECF2;
-      background-color: rgba(230, 236, 242, var(--bg-opacity));
-      --text-opacity: 1;
-      color: #A2ACB7;
-      color: rgba(162, 172, 183, var(--text-opacity));
-      --border-opacity: 1;
-      border-color: #E6ECF2;
-      border-color: rgba(230, 236, 242, var(--border-opacity))
+      --text-opacity: 1 !important;
+      color: #A2ACB7 !important;
+      color: rgba(162, 172, 183, var(--text-opacity)) !important;
+      --border-opacity: 1 !important;
+      border-color: #E6ECF2 !important;
+      border-color: rgba(230, 236, 242, var(--border-opacity)) !important;
+      --bg-opacity: 1 !important;
+      background-color: #E6ECF2 !important;
+      background-color: rgba(230, 236, 242, var(--bg-opacity)) !important
     }
 
 .psui-el-input-select.disabled::after {
-      z-index: 10;
-    }
-
-.psui-el-input-select.selected select {
-      --border-opacity: 1;
-      border-color: #64B5CE;
-      border-color: rgba(100, 181, 206, var(--border-opacity));
-      --text-opacity: 1;
-      color: #515E6A;
-      color: rgba(81, 94, 106, var(--text-opacity))
+      z-index: 20 !important;
+      --text-opacity: 1 !important;
+      color: #798490 !important;
+      color: rgba(121, 132, 144, var(--text-opacity)) !important;
     }
 
-.psui-el-input-select::after {
-    position: absolute;
-    display: inline-block;
-    --text-opacity: 1;
-    color: #798490;
-    color: rgba(121, 132, 144, var(--text-opacity));
-    content: 'arrow_drop_down';
-    font-family: 'Material Icons Round';
-    font-size: 24px;
-    top: 28px;
-    right: 16px;
-    z-index: -20;
-  }
-
-.psui-el-input-select select {
-    -webkit-appearance: none;
-       -moz-appearance: none;
-            appearance: none;
-    width: 100%;
-    border-width: 1px;
-    background-color: transparent;
-    --border-opacity: 1;
-    border-color: #D6DDE5;
-    border-color: rgba(214, 221, 229, var(--border-opacity));
-    border-radius: 0.375rem;
-    --text-opacity: 1;
-    color: #A2ACB7;
-    color: rgba(162, 172, 183, var(--text-opacity));
-    padding: 10px 16px;
-  }
+.psui-el-input-select.layout-default.selected select {
+        --border-opacity: 1;
+        border-color: #64B5CE;
+        border-color: rgba(100, 181, 206, var(--border-opacity));
+        --text-opacity: 1;
+        color: #515E6A;
+        color: rgba(81, 94, 106, var(--text-opacity))
+      }
 
-.psui-el-input-select select:hover,
-            .psui-el-input-select select:active {
-      --border-opacity: 1;
-      border-color: #64B5CE;
-      border-color: rgba(100, 181, 206, var(--border-opacity));
+.psui-el-input-select.layout-default::after {
+      position: absolute;
+      display: inline-block;
       --text-opacity: 1;
-      color: #515E6A;
-      color: rgba(81, 94, 106, var(--text-opacity))
+      color: #798490;
+      color: rgba(121, 132, 144, var(--text-opacity));
+      content: 'arrow_drop_down';
+      font-family: 'Material Icons Round';
+      font-size: 24px;
+      top: 26px;
+      right: 15px;
+      z-index: -20;
     }
 
-.psui-el-input-select select:focus {
+.psui-el-input-select.layout-default select {
+      -webkit-appearance: none;
+         -moz-appearance: none;
+              appearance: none;
+      background-color: transparent;
+      font-size: 16px;
+      line-height: 130%;
+      width: 100%;
+      border-width: 1px;
       --border-opacity: 1;
-      border-color: #318FAC;
-      border-color: rgba(49, 143, 172, var(--border-opacity));
+      border-color: #D6DDE5;
+      border-color: rgba(214, 221, 229, var(--border-opacity));
+      border-radius: 0.375rem;
       --text-opacity: 1;
-      color: #515E6A;
-      color: rgba(81, 94, 106, var(--text-opacity))
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity));
+      padding: 11.5px 16px;
     }
 
+.psui-el-input-select.layout-default select:hover,
+                .psui-el-input-select.layout-default select:active {
+        --border-opacity: 1;
+        border-color: #64B5CE;
+        border-color: rgba(100, 181, 206, var(--border-opacity));
+        --text-opacity: 1;
+        color: #515E6A;
+        color: rgba(81, 94, 106, var(--text-opacity))
+      }
+
+.psui-el-input-select.layout-default select:focus {
+        --border-opacity: 1;
+        border-color: #318FAC;
+        border-color: rgba(49, 143, 172, var(--border-opacity));
+        --text-opacity: 1;
+        color: #515E6A;
+        color: rgba(81, 94, 106, var(--text-opacity))
+      }
+
 .psui-el-input-select label {
     display: flex;
     --text-opacity: 1;
@@ -17077,6 +17083,64 @@ html {
     line-height: 120%;
   }
 
+.psui-el-input-select.layout-mini select {
+      font-size: 14px;
+      line-height: 130%;
+      -webkit-appearance: none;
+         -moz-appearance: none;
+              appearance: none;
+      background-color: transparent;
+      width: 100%;
+      border-width: 1px;
+      --border-opacity: 1;
+      border-color: #D6DDE5;
+      border-color: rgba(214, 221, 229, var(--border-opacity));
+      border-radius: 4px;
+      padding: 7px 8px;
+    }
+
+.psui-el-input-select.layout-mini select:hover,
+                .psui-el-input-select.layout-mini select:active {
+        --border-opacity: 1;
+        border-color: #5DB883;
+        border-color: rgba(93, 184, 131, var(--border-opacity));
+        --text-opacity: 1;
+        color: #798490;
+        color: rgba(121, 132, 144, var(--text-opacity))
+      }
+
+.psui-el-input-select.layout-mini select:focus {
+        --border-opacity: 1;
+        border-color: #44A06A;
+        border-color: rgba(68, 160, 106, var(--border-opacity));
+        --text-opacity: 1;
+        color: #798490;
+        color: rgba(121, 132, 144, var(--text-opacity))
+      }
+
+.psui-el-input-select.layout-mini::after {
+      position: absolute;
+      display: inline-block;
+      --text-opacity: 1;
+      color: #798490;
+      color: rgba(121, 132, 144, var(--text-opacity));
+      content: 'unfold_more';
+      font-family: 'Material Icons Round';
+      font-size: 18px;
+      top: 4px;
+      right: 4px;
+      z-index: -20;
+    }
+
+.psui-el-input-select.layout-mini.selected select {
+        --border-opacity: 1;
+        border-color: #5DB883;
+        border-color: rgba(93, 184, 131, var(--border-opacity));
+        --text-opacity: 1;
+        color: #44A06A;
+        color: rgba(68, 160, 106, var(--text-opacity))
+      }
+
 .psui-el-input-textarea {
   display: block;
   width: 100%;
@@ -17404,8 +17468,217 @@ html {
               }
 
 .psui-el-inline-selector {
+  width: auto;
+  max-width: 100%;
+  font-size: 20px;
+  line-height: 120%;
+  overflow-x: hidden;
+  position: relative;
+  flex-shrink: 0;
+  --text-opacity: 1;
+  color: #318FAC;
+  color: rgba(49, 143, 172, var(--text-opacity));
+}
+
+.psui-el-inline-selector input {
+    border-bottom-width: 1px;
+    border-style: dashed;
+    --border-opacity: 1;
+    border-color: #64B5CE;
+    border-color: rgba(100, 181, 206, var(--border-opacity));
+    transition: 300ms ease-in all;
+  }
+
+.psui-el-inline-selector input::-moz-placeholder {
+      font-size: 20px;
+      line-height: 120%;
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity))
+    }
+
+.psui-el-inline-selector input:-ms-input-placeholder {
+      font-size: 20px;
+      line-height: 120%;
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity))
+    }
+
+.psui-el-inline-selector input::placeholder {
+      font-size: 20px;
+      line-height: 120%;
+      --text-opacity: 1;
+      color: #A2ACB7;
+      color: rgba(162, 172, 183, var(--text-opacity))
+    }
+
+.psui-el-inline-selector .psui-el-inline-selector-input-wrapper {
+    position: relative;
+  }
+
+.psui-el-inline-selector .psui-el-inline-selector-input-wrapper span {
+      display: block;
+      opacity: 0;
+      min-width: 100px;
+      min-height: 29px;
+    }
+
+.psui-el-inline-selector .psui-el-inline-selector-input-wrapper input {
+      -webkit-appearance: none;
+         -moz-appearance: none;
+              appearance: none;
+      background-color: transparent;
+      display: block;
+      position: absolute;
+      width: 100%;
+      left: 0;
+      top: 0;
+    }
+
+.psui-el-inline-selector .psui-el-inline-selector-input-wrapper input:hover {
+        --text-opacity: 1;
+        color: #64B5CE;
+        color: rgba(100, 181, 206, var(--text-opacity));
+      }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper {
+    transform-origin: top right;
+    position: absolute;
+    overflow-y: auto;
+    left: 0;
+    margin-top: 0.5rem;
+    border-radius: 0.25rem;
+    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.04), 0px 5px 6px rgba(0, 0, 0, 0.1);
+    background-color: #ffffff;
+    padding: 1rem;
+    z-index: 40;
+    max-height: 50vh;
+  }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      background-color: #ffffff;
+    }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown ul {
+        width: 100%;
+      }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown ul li {
+          width: 100%;
+          cursor: pointer;
+          padding: 7.5px 16px;
+        }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown ul li:hover {
+            --text-opacity: 1;
+            color: #318FAC;
+            color: rgba(49, 143, 172, var(--text-opacity));
+            --bg-opacity: 1;
+            background-color: #E0EFF6;
+            background-color: rgba(224, 239, 246, var(--bg-opacity));
+          }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown ul li span > p {
+              font-size: 16px;
+              line-height: 130%;
+              --text-opacity: 1;
+              color: #515E6A;
+              color: rgba(81, 94, 106, var(--text-opacity))
+            }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown ul li span p + p {
+              --text-opacity: 1;
+              color: #A2ACB7;
+              color: rgba(162, 172, 183, var(--text-opacity));
+              font-size: 12px;
+              line-height: 120%;
+            }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown .psui-el-inline-selector-error {
+        width: 100%;
+        padding: 0.75rem;
+        display: flex;
+        flex-direction: column;
+      }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown .psui-el-inline-selector-error h3 {
+          --text-opacity: 1;
+          color: #D65C5A;
+          color: rgba(214, 92, 90, var(--text-opacity))
+        }
+
+.psui-el-inline-selector .psui-el-inline-selector-dropdown-wrapper .psui-el-inline-selector-dropdown .psui-el-inline-selector-error p {
+          --text-opacity: 1;
+          color: #798490;
+          color: rgba(121, 132, 144, var(--text-opacity))
+        }
+
+.psui-el-mini-tag {
+  display: flex;
+  border-radius: 9999px;
+  align-items: center;
+  justify-content: center;
+  flex-direction: row;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
 }
 
+.psui-el-mini-tag div {
+    width: 100%;
+    padding: 3px 8px 3px 8px;
+    font-size: 10px;
+  }
+
+.psui-el-mini-tag-layout-info {
+      --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-mini-tag-layout-success {
+      --bg-opacity: 1;
+      background-color: #DEF8E8;
+      background-color: rgba(222, 248, 232, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #44A06A;
+      color: rgba(68, 160, 106, var(--text-opacity))
+    }
+
+.psui-el-mini-tag-layout-warning {
+      --bg-opacity: 1;
+      background-color: #FDF3E3;
+      background-color: rgba(253, 243, 227, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #B87305;
+      color: rgba(184, 115, 5, var(--text-opacity))
+    }
+
+.psui-el-mini-tag-layout-error {
+      --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-mini-tag-layout-default {
+      --bg-opacity: 1;
+      background-color: #E6ECF2;
+      background-color: rgba(230, 236, 242, var(--bg-opacity));
+      --text-opacity: 1;
+      color: #798490;
+      color: rgba(121, 132, 144, var(--text-opacity))
+    }
+
 .psui-el-toast {
   display: flex;
   align-items: center;
@@ -18151,7 +18424,7 @@ html {
       border-radius: 9999px;
       position: absolute;
       transform-origin: center;
-      background-color: #def8e8;
+      background-color: rgba(93, 184, 131, 0.3);
       border: solid 0px;
       content: '';
       width: 36px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "Policy Studio UI",
   "main": "src/index.js",
   "author": "Policy Studio Team",

package/src/assets/scss/base.scss

@@ -19,6 +19,7 @@
 @import './components/PsDropdown.scss';
 @import './components/PsSlider.scss';
 @import './components/PsToast.scss';
+@import './components/PsMiniTag.scss';
 @import './components/PsInlineSelector.scss';
 @import './components/PsTooltip.scss';
 @import './components/PsInputTextArea.scss';

package/src/assets/scss/components/PsHighlightRippleDot.scss

@@ -9,7 +9,7 @@
 
             &::before, &::after {
                 @apply psui-rounded-full psui-absolute psui-origin-center;
-                background-color: #def8e8;
+                background-color: rgba(93, 184, 131, 0.3);
                 border: solid 0px;
                 content: '';
                 width: 36px;

package/src/assets/scss/components/PsInlineSelector.scss

@@ -1,5 +1,81 @@
 @layer components {
     .psui-el-inline-selector {
-        
+        @apply psui-w-auto psui-max-w-full psui-text-h4 psui-overflow-x-hidden psui-relative psui-flex-shrink-0 psui-text-blue-60;
+
+        input {
+            @apply psui-border-b psui-border-dashed psui-border-blue-50;
+            transition: 300ms ease-in all;
+            
+            &::placeholder {
+                @apply psui-text-h4 psui-text-gray-40
+            }
+        }
+
+        .psui-el-inline-selector-input-wrapper {
+            @apply psui-relative;
+
+            span {
+                @apply psui-block psui-opacity-0;
+                min-width: 100px;
+                min-height: 29px;
+            }
+
+            input {
+                @apply psui-appearance-none psui-bg-transparent psui-block psui-absolute psui-w-full psui-left-0 psui-top-0;
+
+                &:hover {
+                    @apply psui-text-blue-50;
+                }
+            }
+        }
+
+        .psui-el-inline-selector-dropdown-wrapper {
+            @apply psui-origin-top-right psui-absolute psui-overflow-y-auto psui-left-0 psui-mt-2 psui-rounded psui-shadow-elevation-20 psui-bg-white psui-p-4 psui-z-40;
+            max-height: 50vh;
+
+            .psui-el-inline-selector-dropdown {
+                @apply psui-w-full psui-flex psui-flex-wrap psui-bg-white;
+
+                ul {
+                    @apply psui-w-full;
+
+                    li {
+                        @apply psui-w-full psui-cursor-pointer;
+                        padding: 7.5px 16px;
+
+                        &:hover {
+                            @apply psui-text-blue-60 psui-bg-blue-20;
+                        }
+
+                        span {
+
+                            > p {
+                                @apply psui-text-big psui-text-gray-60
+                            }
+
+                            p + p {
+                                @apply psui-text-gray-40;
+                                font-size: 12px;
+                                line-height: 120%;
+                            }
+                        }
+
+                    }
+                }
+
+                .psui-el-inline-selector-error {
+                    @apply psui-w-full psui-p-3 psui-flex psui-flex-col;
+
+                    h3 {
+                        @apply psui-text-red-20
+                    }
+
+                    p {
+                        @apply psui-text-gray-50
+                    }
+                }
+            }
+        }
+
     }
 }

package/src/assets/scss/components/PsInputSelect.scss

@@ -1,6 +1,6 @@
 @layer components {
     .psui-el-input-select {
-        @apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40;
+        @apply psui-w-full psui-flex psui-flex-col psui-relative psui-text-gray-40 psui-box-border;
 
         &.disabled {
             @apply psui-pointer-events-none;
@@ -10,45 +10,49 @@
             }
 
             select {
-                @apply psui-bg-gray-20 psui-text-gray-40 psui-border-gray-20
+                @apply  psui-text-gray-40 psui-border-gray-20 psui-bg-gray-20 !important
             }
 
             &::after {
-                @apply psui-z-10;
+                @apply psui-z-20 psui-text-gray-50 !important;
             }
         }
 
-        &.selected {
-            select {
-                @apply psui-border-blue-50 psui-text-gray-60
-            }
-        }
-
-        &::after {
-            @apply psui-absolute psui-inline-block psui-text-gray-50;
-            content: 'arrow_drop_down';
-            font-family: 'Material Icons Round';
-            font-size: 24px;
-            top: 28px;
-            right: 16px;
-            z-index: -20;
-        }
-
-        select {
-            @apply psui-appearance-none psui-w-full psui-border psui-bg-transparent psui-border-gray-30 psui-rounded-md psui-text-gray-40;
-            padding: 10px 16px;
+        &.layout-default {
 
-            &:hover,
-            &:active {
-                @apply psui-border-blue-50 psui-text-gray-60
+            &.selected {
+                select {
+                    @apply psui-border-blue-50 psui-text-gray-60
+                }
             }
-
-            &:focus {
-                @apply psui-border-blue-60 psui-text-gray-60
+    
+            &::after {
+                @apply psui-absolute psui-inline-block psui-text-gray-50;
+                content: 'arrow_drop_down';
+                font-family: 'Material Icons Round';
+                font-size: 24px;
+                top: 26px;
+                right: 15px;
+                z-index: -20;
+            }
+    
+            select {
+                @apply psui-appearance-none psui-bg-transparent psui-text-big psui-w-full psui-border psui-border-gray-30 psui-rounded-md psui-text-gray-40;
+                padding: 11.5px 16px;
+    
+                &:hover,
+                &:active {
+                    @apply psui-border-blue-50 psui-text-gray-60
+                }
+    
+                &:focus {
+                    @apply psui-border-blue-60 psui-text-gray-60
+                }
             }
 
         }
 
+
         label {
             @apply psui-flex psui-text-gray-80 psui-text-big psui-items-center psui-w-full psui-font-bold psui-pointer-events-none
         }
@@ -58,5 +62,43 @@
             font-size: 12px;
             line-height: 120%;
         }
+
+        &.layout-mini {
+
+
+            select {
+                @apply psui-text-small psui-appearance-none psui-bg-transparent psui-w-full psui-border psui-border-gray-30;
+                border-radius: 4px;
+                padding: 7px 8px;
+
+                &:hover,
+                &:active {
+                    @apply psui-border-green-20 psui-text-gray-50
+                }
+    
+                &:focus {
+                    @apply psui-border-green-70 psui-text-gray-50
+                }
+    
+
+            }
+
+            &::after {
+                @apply psui-absolute psui-inline-block psui-text-gray-50 ;
+                content: 'unfold_more';
+                font-family: 'Material Icons Round';
+                font-size: 18px;
+                top: 4px;
+                right: 4px;
+                z-index: -20;
+            }
+            
+            &.selected {
+                select {
+                    @apply psui-border-green-20 psui-text-green-70
+                }
+            }
+    
+        }
     }
 }

package/src/assets/scss/components/PsMiniTag.scss

@@ -0,0 +1,36 @@
+@layer components {
+    .psui-el-mini-tag {
+        @apply psui-flex psui-rounded-full psui-items-center psui-justify-center psui-flex-row;
+        width: fit-content;
+
+
+        div {
+            @apply psui-w-full;
+            padding: 3px 8px 3px 8px;
+            font-size: 10px;
+
+        }
+
+        &-layout{
+            &-info {
+                @apply psui-bg-blue-20 psui-text-blue-60
+            }
+            
+            &-success {
+                @apply psui-bg-green-10 psui-text-green-70
+            }
+
+            &-warning {
+                @apply psui-bg-yellow-10 psui-text-yellow-70
+            }
+
+            &-error {
+                @apply psui-bg-red-10 psui-text-red-20
+            }
+
+            &-default {
+                @apply psui-bg-gray-20 psui-text-gray-50
+            }
+        }
+    }
+}

package/src/components/badges-and-tags/PsCostEffectBar.vue

@@ -63,7 +63,6 @@ export default {
     },
 
     bgColor() {
-      // console.log(this.value >= this.breakEven ? 'psui-bg-blue-20' : 'psui-bg-red-10')
       return this.value >= this.breakEven
         ? 'psui-bg-blue-20'
         : 'psui-bg-red-10'

package/src/components/badges-and-tags/PsMiniTag.vue

@@ -1,17 +1,23 @@
 <template>
-  <div :class="cssClass">
-    <div class="psui-w-full">{{ message }}</div>
+  <div class="psui-el-mini-tag" :class="getComponentClass">
+    <div>{{ message }}</div>
   </div>
 </template>
 
 <script>
-export const typeOptions = ['informative', 'success', 'warning', 'error']
+export const typeOptions = [
+  'info',
+  'success',
+  'warning',
+  'error',
+  'default',
+]
 export default {
   name: 'PsMiniTag',
   props: {
-    type: {
+    layout: {
       type: String,
-      default: 'informative',
+      default: 'info',
       validator: (value) => typeOptions.indexOf(value) !== -1,
     },
     message: {
@@ -19,28 +25,13 @@ export default {
       required: true,
     },
   },
-  data() {
-    return {
-      colors: {
-        informative: { background: 'blue-20', color: 'blue-60' },
-        success: { background: 'green-10', color: 'green-70' },
-        warning: { background: 'yellow-10', color: 'yellow-70' },
-        error: { background: 'red-10', color: 'red-20' },
-      },
-    }
-  },
   computed: {
-    cssClass() {
-      return `fit-content psui-flex psui-rounded-lg psui-px-2 psui-items-center psui-justify-center psui-flex-row psui-mx-6 psui-bg-${
-        this.colors[this.type].background
-      } psui-text-${this.colors[this.type].color}`
+    getComponentClass() {
+      return `psui-el-mini-tag-layout-${this.layout}`
     },
   },
 }
 </script>
 
-<style scoped>
-.fit-content {
-  width: fit-content;
-}
-</style>
+<style> /* Please, use the file src/assets/scss/components/PsMiniTag.scss */ </style>
+

package/src/components/controls/PsInlineSelector.vue

@@ -1,15 +1,135 @@
 <template>
-  <div class="psui-el-inline-selector">
-      <input type="text">
+  <div 
+    class="psui-el-inline-selector"
+    @keydown.up="$emit('keydown-up', $event)"
+    @keydown.down="$emit('keydown-down', $event)"
+    @keydown.enter="$emit('keydown-enter', $event)"
+    @keydown.tab="$emit('keydown-tab',$event)"
+    @keydown.esc="$emit('keydown-esc',$event)"
+    @mouseleave="$emit('mouse-leave',$event)"
+  >
+
+    <div class='psui-el-inline-selector-input-wrapper'>
+      <span> {{ search ? search : placeholder }} </span>
+      <input
+        ref="input"
+        v-model="search"
+        :label="label"
+        :placeholder="placeholder"
+        @input="$emit('input', $event)"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+        autocomplete="chrome-off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </div>
+    <transition
+        enter-active-class="transition ease-out duration-100 transform"
+        enter-class="opacity-0 scale-95"
+        enter-to-class="opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-100 transform"
+        leave-class="opacity-100 scale-100"
+        leave-to-class="opacity-0 scale-95"
+      >
+      <div 
+        v-if="search"
+        role="menu" 
+        aria-orientation="vertical"
+        class="psui-el-inline-selector-dropdown-wrapper"
+      >
+      <slot name='loader'></slot>
+        <div>
+          <div v-if="requestFetched && !jurisdictions.length">
+            <h3>Hmmmm</h3>
+            <p>Please check the spelling and try again</p>
+          </div>
+          <ul v-else>
+            <li
+              tabindex="0"
+              v-for="(jurisdiction, index) in jurisdictions"
+              :key="`dropdown-jurisdiction-${jurisdiction.id}`"
+              :id="`jurisdiction-list-item-${index}`"
+              @click="$emit('click', $event)"
+              @mouseover="('mouse-over', $event)"
+            >
+              <span >
+                <h3>{{jurisdiction.title}}</h3>
+                <h3 >{{jurisdiction.type}}</h3>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </transition>
   </div>
 </template>
 
 <script>
 export default {
-
+  name: 'PsInlineSelector',
+  props: {
+    width: {
+      default: 244
+    },
+    focusOnMount: {
+      default: false
+    },
+    shouldScroll: {
+      default: false
+    },
+    inputClass: {
+      default: 'text-gray02'
+    },
+    label: {
+      type: String,
+      default: 'Type a City or County'
+    },
+    selectOnlyFirstClimateZone: {
+      type: Boolean,
+      default: false
+    },
+    jurisdictionSelected: {
+      type: [ Object, Boolean ]
+    },
+    search: {
+      type: String,
+      default: '',
+      required: true
+    },
+    jurisdictions: {
+      type: Array,
+      default: () => [],
+      required: true
+    },
+    requestFetched: {
+      type: Boolean,
+    },
+    showDropDown:{
+      type: Boolean,
+      default: true,
+    },
+    currentSelected:{
+      type: Number,
+      default: 0,
+    },
+    isFocused:{
+      type: Boolean,
+      default: false,
+    }
+  },
+  computed:{
+    placeholder(){
+      return this.jurisdictionsAsText && !this.isFocused ? this.jurisdictionsAsText : this.label
+    },
+    jurisdictionsAsText(){
+      return this.jurisdictionSelected?.title_type ?? false
+    }
+  },
+  mounted(){
+    if(this.focusOnMount) this.$refs.input.focus()
+  },
 }
 </script>
 
-<style>
-
-</style>

package/src/components/forms/PsDropdownCopy.vue

@@ -0,0 +1,212 @@
+<template>
+<div class="background-temporary">
+  <div 
+    class="psui-el-dropdown-menu"
+    ref="PSDropdown"
+  >
+
+    <div class="psui-bg-red" ref="PSDropdownTrigger" v-if="$slots.dropdownTrigger" @click="show && !toggleWhenActive ? '' : toggle()" >
+      <slot name="dropdownTrigger" ></slot>
+    </div>
+
+    <button
+      v-else
+      @click="show && !toggleWhenActive ? '' : toggle()" 
+      type="button" 
+      class="psui-el-dropdown-menu-button" 
+      :class="[buttonClasses]"
+      :id="id"
+      aria-haspopup="true" 
+      aria-expanded="true"
+      ref="PSDropdownTrigger"
+    >
+      <slot v-if="show && $slots.buttonLabelOnShow" name="buttonLabelOnShow"></slot>
+      <slot v-else name="buttonLabel"></slot>
+    </button>
+
+    <div 
+      ref="PSDropdownDialog"
+      role="menu" 
+      class="psui-el-dropdown-menu-dialog" 
+      aria-orientation="vertical" 
+      :aria-labelledby="id"
+      :class="[dialogClasses]"
+      :style="{ minWidth: minWidthDropdown, marginLeft: marginLeft }"
+    >
+
+      <div class="psui-el-dropdown-menu-dialog-category-divider">
+        <h2 class="ts--accent--1" v-if="title">{{ title }}</h2>
+        <slot name="items"></slot>
+      </div>
+
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import { randomString, getParentScrollableEl } from '../../util/GeneralFunctions'
+
+export default {
+  name: 'PsDropdown',
+  props: {
+    buttonClasses: {
+      type: String,
+      default: 'psui-bg-white psui-border psui-border-blue'
+    },
+    title: {
+      type: String,
+    },
+    dialogClasses: {
+      type: String,
+      default: 'psui-p-6 psui-left-0 psui-bg-white'
+    },
+    minWidthDropdown: {
+      type: [String, Number],
+    },
+    maxWidthDropDown: {
+      type: String,
+      default: '340px'
+    },
+    buttonLabelOnShow: {
+      type: Boolean,
+      default: false
+    },
+    toggleWhenActive: {
+      type: Boolean,
+      default: true
+    },
+  },
+  data() {
+    return {
+      show: false,
+      id: randomString(8),
+      marginLeft: '-0px',
+      scrollableParentEl : null 
+    }
+  },
+  computed: {
+    getMaxWidth() {
+      let bounds = this.$refs.PSDropdown.getBoundingClientRect()
+      return (document.documentElement.clientWidth - bounds['left']) -30
+    }
+  },
+  beforeDestroy() {
+    this.unwatchParentScrolling()
+  },
+  methods: {
+    toggle() {
+      if (!this.show) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+    watchParentScrolling() {
+      this.scrollableParentEl = getParentScrollableEl(this.$refs.PSDropdown)
+      if (this.scrollableParentEl) {
+        this.scrollableParentEl.addEventListener('scroll', this.updatePosition)
+      }
+    },
+    unwatchParentScrolling() {
+      if (this.scrollableParentEl) {
+        this.scrollableParentEl.removeEventListener('scroll', this.updatePosition)
+      }
+    },
+    updatePosition() {
+      
+      const PSDropdownDialog = this.$refs.PSDropdownDialog
+      const PSDropdownTrigger = this.$refs.PSDropdownTrigger
+      if (!PSDropdownDialog || !PSDropdownTrigger) return 
+
+      const rectTrigger = PSDropdownTrigger.getBoundingClientRect()
+      const rectDialog = PSDropdownDialog.getBoundingClientRect()
+      const windowWidth = document.documentElement.clientWidth
+
+      PSDropdownDialog.style.position = 'fixed'
+      PSDropdownDialog.style.top = `${rectTrigger.y + rectTrigger.height }px`
+      
+      if (( rectTrigger.x + rectDialog.width + 20 ) > windowWidth ) {
+        PSDropdownDialog.style.left = `${windowWidth - rectDialog.width - 30}px`
+      } else {        
+        PSDropdownDialog.style.left = `${rectTrigger.x}px`
+      }
+
+      if(rectTrigger.top < 10) {
+        this.close()
+        console.warn('The dropdown are too close from the top of the page')
+        return
+      }
+
+      setTimeout(() => { PSDropdownDialog.style.opacity = 1 }, 10)
+
+    },
+    open() {
+      this.$emit('open')
+      this.show = true
+      this.$refs.PSDropdownDialog.style.opacity = 0
+      this.$refs.PSDropdownDialog.style.display = 'block'
+      setTimeout(() => {
+        this.updatePosition()
+        this.watchParentScrolling()
+        document.addEventListener("keyup", this.handleEsc)
+        window.addEventListener("resize", this.updatePosition)
+        window.addEventListener("click", this.clickOutside)
+      }, 10)
+    },
+    close() {
+      if (this.show) {
+        this.$emit('close')
+        this.$refs.PSDropdownDialog.style.display = 'none'
+        this.$refs.PSDropdownDialog.style.opacity = 0
+        this.show = false
+        this.unwatchParentScrolling()
+      }
+      document.removeEventListener("keyup", this.handleEsc)
+      document.removeEventListener("resize", this.updatePosition)
+      document.removeEventListener("click", this.clickOutside)
+    },
+    handleEsc(evt) {
+      if (this.show && evt.keyCode === 27) this.close()
+    },
+    clickOutside(event) {
+      if(!this.show) return
+      if (!(this.$refs.PSDropdown == event.target || this.$refs.PSDropdown.contains(event.target))) {
+        this.close()
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+  .background-temporary {
+    width: 300px;
+    height: 200px;
+    left: 0;
+    top: 8px;
+
+    background-color: #e6ecf2;
+    border: 1.5px dashed #7b61ff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* .dropdown-button {
+    background-color: transparent;
+    padding-top: 2.5px;
+    padding-bottom: 2.5px;
+    min-height: 27px;
+  } */
+
+  /* .dropdown-button:focus {
+    outline: none;
+  } */
+
+  /* .psui-dropdown-dialog {
+    transition: opacity 150ms ease-in-out;
+  } */
+  
+</style>

package/src/components/forms/PsInputSelect.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="psui-el-input-select" :class="[{'disabled':disabled}, {'selected':selectedClass}]">
+  <div class="psui-el-input-select" :class="[{'disabled':disabled}, getComponentClass, {'selected':selectedClass}]">
     <label :for='label' v-if="label" >{{ label }}</label>
     <select 
       :name="label"
@@ -9,7 +9,7 @@
       <option value='' disabled>Select</option>
       <option v-for="item in getItems" :value="item[keyValue]" :key="item[keyValue]">{{ item[keyLabel] }}</option>
     </select>
-    <p v-if="optionalLabel && !disabled" class="psui-el-input-helper">{{ optionalLabel }}</p>
+    <p v-if="optionalLabel && !disabled && layout !== 'mini'" class="psui-el-input-helper">{{ optionalLabel }}</p>
   </div>
 </template>
 
@@ -40,6 +40,11 @@ export default {
     disabled: {
       type: Boolean,
       default: false
+    },
+    layout:{
+      type: String,
+      default: 'default',
+      validator: (value) => ['default','mini'].includes(value)
     }
   },
   data(){
@@ -48,6 +53,9 @@ export default {
     }
   },
   computed: {
+    getComponentClass(){
+      return `layout-${this.layout}`
+    },
     childValue: {
       get() {
         return this.value

package/src/components/notifications/PsToast.vue

@@ -36,3 +36,6 @@ export default {
   },
 }
 </script>
+
+<style> /* Please, use the file src/assets/scss/components/PsToast.scss */ </style>
+

package/src/stories/InlineSelector.stories.js

@@ -9,8 +9,10 @@ const TemplateDefault = (args, {argTypes}) => ({
     props: Object.keys(argTypes),
     components: {PsInlineSelector},
     template: `
+    <div style="width: auto; margin-right: auto; display: flex; align-items: center;">  
         <PsInlineSelector v-bind="$props"></PsInlineSelector>
-    `
+    </div>
+        `
 })
 
 export const Default = TemplateDefault.bind({})

package/src/stories/InputSelect.stories.js

@@ -9,10 +9,18 @@ const TemplateDefault = (args, {argTypes})=> ({
     props: Object.keys(argTypes),
     components: {PsInputSelect},
     template: `
+  <div style='display:flex; gap: 30px;'>  
     <div style='width:300px; display:flex; flex-direction: column; gap:20px;'>
+        <span>Default Select</span>
         <PsInputSelect v-bind="$props" label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
         <PsInputSelect v-bind="$props" disabled label="Gender" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
     </div>
+    <div style='width:90px; display:flex; flex-direction: column; gap:20px;'>
+        <span>Mini Select</span>
+        <PsInputSelect v-bind="$props" layout="mini" keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+        <PsInputSelect v-bind="$props" layout="mini" disabled keyLabel="title" keyValue="value" optionalLabel="Optional helper/feedback text"/>
+    </div>
+  </div>
     `
 })
 

package/src/stories/MiniTag.stories.js

@@ -21,26 +21,32 @@ const Template = (args, { argTypes }) => ({
   template: '<PsMiniTag v-bind="$props" />',
 })
 
-export const Informative = Template.bind({})
-Informative.args = {
-  type: 'informative',
+export const Info = Template.bind({})
+Info.args = {
+  layout: 'info',
   message: 'This is an info alert',
 }
 
 export const Success = Template.bind({})
 Success.args = {
-  type: 'success',
+  layout: 'success',
   message: 'This is a success alert',
 }
 
 export const Warning = Template.bind({})
 Warning.args = {
-  type: 'warning',
+  layout: 'warning',
   message: 'This is a warning alert',
 }
 
 export const Error = Template.bind({})
 Error.args = {
-  type: 'error',
+  layout: 'error',
   message: 'This is an error alert',
 }
+
+export const Default = Template.bind({})
+Default.args = {
+  layout: 'default',
+  message: 'This is a default color',
+}

package/src/components/badges-and-tags/PsCostEffectBar.Copy.vue

@@ -1,72 +0,0 @@
-<template>
-    <div class="psui-el-cost-effect-bar">
-      
-      <div
-        :class="{
-          'psui-bg-blue-20': value >= breakEven,
-          'psui-bg-red-10': value < breakEven,
-        }"
-      >
-        
-        <span :style="breakEvenPosition"> </span>
-
-        <div class="psui-overflow-hidden">
-
-        <input
-          type="number"
-          :style="{ width: `${value}px` }"
-          :class="{
-            'psui-bg-blue-60': value >= breakEven,
-            'psui-bg-red-20': value < breakEven,
-          }"
-        />
-        </div>
-
-      </div>
-    </div>
-</template>
-
-<script>
-export default {
-  name: 'PsCostEffectBar',
-
-  props: {
-    value: {
-      type: Number,
-      required: true,
-      default: 0,
-    },
-    breakEven: {
-      type: Number,
-      required: true,
-      default: 1,
-    },
-  },
-  data() {
-    return {
-      errors: [],
-    }
-  },
-
-  computed: {
-    valueBar() {
-      if (this.value > 100) return 100
-      else if (this.value < 0) return 0
-      else return this.value
-    },
-
-    breakEvenPosition() {
-      return `left: ${this.breakEven}px`
-    },
-    
-    getIsBreakEven() {
-      if (this.breakEven < 0) return 0
-      else if (this.breakEven > 100) return 100
-      else return this.breakEven
-    },
-  },
-}
-</script>
-
-<style> /* Please, use the file src/assets/scss/components/PsCostEffectBar.scss */</style>
-