@policystudio/policy-studio-ui-vue 1.1.90-beta.71 → 1.1.90-beta.73

package/dist/css/psui_styles_output.css

@@ -4969,42 +4969,49 @@ video {
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content {
-  padding: 5px 8px 4px 8px;
+  padding: 10px 16px 12px 16px;
   border-radius: 4px;
+  font-family: Lato, sans-serif;
+  font-style: normal;
 }
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content h2 {
+  font-size: 12px;
+  line-height: 120%;
   font-weight: 700;
 }
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content .psui-el-tooltip-content-wrapper {
   font-size: 12px;
-  line-height: 130%;
+  line-height: 120%;
+  font-weight: 400;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content .psui-el-tooltip-content-wrapper {
-  font-weight: 700;
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content .psui-el-tooltip-content-wrapper h2,
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content .psui-el-tooltip-content-wrapper p {
+  font-size: 12px;
+  line-height: 120%;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray {
-  --tw-bg-opacity: 1;
-  background-color: rgb(214, 221, 229, var(--tw-bg-opacity, 1));
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content .psui-el-tooltip-content-wrapper h2 {
+  font-weight: 700;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray {
-  --tw-text-opacity: 1;
-  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content .psui-el-tooltip-content-wrapper p {
+  font-weight: 400;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-blue, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-red, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-blue, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-red, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green {
   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 {
-  margin-top: 0.25rem;
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray {
+  --tw-bg-opacity: 1;
+  background-color: rgb(214, 221, 229, var(--tw-bg-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray .psui-el-tooltip-content-wrapper {
-  font-weight: 400;
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-gray {
+  --tw-text-opacity: 1;
+  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
 }
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-blue {
   --tw-bg-opacity: 1;
@@ -5014,22 +5021,6 @@ video {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-blue {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-blue {
-  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 {
-  margin-top: 0.25rem;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-blue .psui-el-tooltip-content-wrapper {
-  font-weight: 400;
-}
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-red {
   --tw-bg-opacity: 1;
   background-color: rgb(252, 235, 235, var(--tw-bg-opacity, 1));
@@ -5038,283 +5029,126 @@ video {
   --tw-text-opacity: 1;
   color: rgb(170, 57, 55, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-red {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-red {
-  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 {
-  margin-top: 0.25rem;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-red .psui-el-tooltip-content-wrapper {
-  font-weight: 400;
-}
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green {
   align-items: center;
 }
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green {
-  padding: 10px 16px 12px 16px;
   gap: 4px;
   border-radius: 6px;
   background: linear-gradient(270deg, #5db883 0%, #28b08e 100%);
-  font-size: 12px;
-  line-height: 120%;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green h2 {
-  font-weight: 700;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green h2 {
-  --tw-text-opacity: 1;
-  color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green .psui-el-tooltip-content-wrapper {
-  font-weight: 400;
 }
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green h2,
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-green .psui-el-tooltip-content-wrapper {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
   display: flex;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
   flex-direction: column;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
   --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
   --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 10px 15px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
   gap: 8.8px;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white h2 {
-  font-weight: 700;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white h2 {
-  --tw-text-opacity: 1;
-  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white h2 {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white h2, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark h2, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color h2 {
   font-size: 17px;
   line-height: 120%;
+  font-weight: 700;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper {
   display: flex;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper {
   flex-direction: column;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper {
-  font-weight: 400;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper {
-  --tw-text-opacity: 1;
-  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper {
   gap: 13.6px;
   font-size: 14px;
   line-height: 120%;
+  font-weight: 400;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button {
   border-radius: 0.375rem;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button {
   font-weight: 700;
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button {
-  --tw-text-opacity: 1;
-  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button {
   padding: 7px 16px;
   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 {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button:focus, .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button:focus, .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-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
-  display: flex;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
-  flex-direction: column;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white {
   --tw-bg-opacity: 1;
-  background-color: rgb(0, 70, 95, var(--tw-bg-opacity, 1));
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
-  --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
-  --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 10px 15px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
-  gap: 8.8px;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark h2 {
-  font-weight: 700;
+  background-color: rgb(255, 255, 255, var(--tw-bg-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark h2 {
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white h2 {
   --tw-text-opacity: 1;
-  color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
+  color: rgb(40, 50, 59, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark h2 {
-  font-size: 17px;
-  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 {
+  --tw-text-opacity: 1;
+  color: rgb(121, 132, 144, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper {
-  display: flex;
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button {
+  --tw-bg-opacity: 1;
+  background-color: rgb(224, 239, 246, var(--tw-bg-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper {
-  flex-direction: column;
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-white .psui-el-tooltip-content-wrapper button {
+  --tw-text-opacity: 1;
+  color: rgb(49, 143, 172, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper {
-  font-weight: 400;
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark {
+  --tw-bg-opacity: 1;
+  background-color: rgb(0, 70, 95, var(--tw-bg-opacity, 1));
 }
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark h2,
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper {
-  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 {
-  border-radius: 0.375rem;
-}
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button {
   --tw-bg-opacity: 1;
   background-color: rgb(49, 143, 172, var(--tw-bg-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button {
-  font-weight: 700;
-}
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-dark .psui-el-tooltip-content-wrapper button {
-  padding: 7px 16px;
-  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 {
-  display: flex;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
-  flex-direction: column;
-}
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
   --tw-bg-opacity: 1;
   background-color: rgb(100, 181, 206, var(--tw-bg-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
-  padding-left: 1.5rem;
-  padding-right: 1.5rem;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
-  --tw-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05), 0px 10px 15px rgba(0, 0, 0, 0.15);
-  --tw-shadow-colored: 0px 0px 8px var(--tw-shadow-color), 0px 10px 15px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow);
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color {
-  gap: 8.8px;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color h2 {
-  font-weight: 700;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color h2 {
-  --tw-text-opacity: 1;
-  color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color h2 {
-  font-size: 17px;
-  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 {
-  display: flex;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper {
-  flex-direction: column;
-}
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper {
-  font-weight: 400;
-}
+.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color h2,
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper {
-  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 {
-  border-radius: 0.375rem;
-}
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button {
   --tw-bg-opacity: 1;
   background-color: rgb(49, 143, 172, var(--tw-bg-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button {
-  font-weight: 700;
-}
 .psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button {
   --tw-text-opacity: 1;
   color: rgb(255, 255, 255, var(--tw-text-opacity, 1));
 }
-.psui-el-tooltip .psui-el-tooltip-wrapper .psui-el-tooltip-dialog .psui-el-tooltip-content.layout-color .psui-el-tooltip-content-wrapper button {
-  padding: 7px 16px;
-  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-input-textarea {
   display: block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@policystudio/policy-studio-ui-vue",
-  "version": "1.1.90-beta.71",
+  "version": "1.1.90-beta.73",
   "description": "Policy Studio UI",
   "author": "Policy Studio Team",
   "scripts": {

package/src/assets/scss/components/PsTooltip.scss

@@ -10,151 +10,141 @@
 
         .psui-el-tooltip-content {
           @apply psui-flex psui-flex-col psui-bg-gray-50 psui-text-white;
-          padding: 5px 8px 4px 8px;
+          padding: 10px 16px 12px 16px;
           border-radius: 4px;
+          font-family: Lato, sans-serif;
+          font-style: normal;
 
           h2 {
-            @apply psui-font-bold;
+            font-size: 12px;
+            line-height: 120%;
+            font-weight: 700;
           }
 
           .psui-el-tooltip-content-wrapper {
-            @apply psui-text-xsmall psui-font-bold;
-          }
+            font-size: 12px;
+            line-height: 120%;
+            font-weight: 400;
 
-          &.layout {
-            &-gray {
-              @apply psui-bg-gray-30 psui-text-gray-80 psui-shadow-none;
+            h2,
+            p {
               font-size: 12px;
               line-height: 120%;
-              padding: 10px 16px 12px 16px;
-
-              .psui-el-tooltip-content-wrapper {
-                @apply psui-font-normal psui-mt-1;
-              }
             }
 
-            &-blue {
-              @apply psui-bg-blue-70 psui-text-white psui-shadow-none;
-              font-size: 12px;
-              line-height: 120%;
-              padding: 10px 16px 12px 16px;
+            h2 {
+              font-weight: 700;
+            }
 
-              .psui-el-tooltip-content-wrapper {
-                @apply psui-font-normal psui-mt-1;
-              }
+            p {
+              font-weight: 400;
             }
+          }
 
-            &-red {
-              @apply psui-bg-red-10 psui-text-red-70 psui-shadow-none;
-              font-size: 12px;
-              line-height: 120%;
-              padding: 10px 16px 12px 16px;
+          &.layout-gray,
+          &.layout-blue,
+          &.layout-red,
+          &.layout-green {
+            @apply psui-shadow-none;
+            font-size: 12px;
+            line-height: 120%;
+            padding: 10px 16px 12px 16px;
+          }
 
-              .psui-el-tooltip-content-wrapper {
-                @apply psui-font-normal psui-mt-1;
-              }
-            }
+          &.layout-gray {
+            @apply psui-bg-gray-30 psui-text-gray-80;
+          }
 
-            &-green {
-              @apply psui-items-center psui-shadow-none;
-              padding: 10px 16px 12px 16px;
-              gap: 4px;
-              border-radius: 6px;
-              background: linear-gradient(270deg, #5db883 0%, #28b08e 100%);
-              font-size: 12px;
-              line-height: 120%;
+          &.layout-blue {
+            @apply psui-bg-blue-70 psui-text-white;
+          }
 
-              h2 {
-                @apply psui-text-white psui-font-bold;
-              }
+          &.layout-red {
+            @apply psui-bg-red-10 psui-text-red-70;
+          }
 
-              .psui-el-tooltip-content-wrapper {
-                @apply psui-text-white psui-font-normal;
-              }
+          &.layout-green {
+            @apply psui-items-center;
+            gap: 4px;
+            border-radius: 6px;
+            background: linear-gradient(270deg, #5db883 0%, #28b08e 100%);
+
+            h2,
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-text-white;
             }
+          }
 
-            &-white {
-              @apply psui-bg-white psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
-              gap: 8.8px;
+          &.layout-white,
+          &.layout-dark,
+          &.layout-color {
+            @apply psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
+            gap: 8.8px;
 
-              h2 {
-                @apply psui-text-gray-80 psui-font-bold;
-                font-size: 17px;
-                line-height: 120%;
-              }
+            h2 {
+              font-size: 17px;
+              line-height: 120%;
+              font-weight: 700;
+            }
 
-              .psui-el-tooltip-content-wrapper {
-                @apply psui-text-gray-50 psui-font-normal psui-flex psui-flex-col;
-                gap: 13.6px;
-                font-size: 14px;
-                line-height: 120%;
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-flex psui-flex-col;
+              gap: 13.6px;
+              font-size: 14px;
+              line-height: 120%;
+              font-weight: 400;
 
-                button {
-                  @apply psui-rounded-md psui-bg-blue-20 psui-text-blue-60 psui-font-bold;
-                  padding: 7px 16px;
-                  width: fit-content;
+              button {
+                @apply psui-rounded-md psui-font-bold;
+                padding: 7px 16px;
+                width: fit-content;
 
-                  &:focus {
-                    outline: none;
-                  }
+                &:focus {
+                  outline: none;
                 }
               }
             }
+          }
 
-            &-dark {
-              @apply psui-bg-blue-70 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
-              gap: 8.8px;
+          &.layout-white {
+            @apply psui-bg-white;
 
-              h2 {
-                @apply psui-text-white psui-font-bold;
-                font-size: 17px;
-                line-height: 120%;
-              }
-
-              .psui-el-tooltip-content-wrapper {
-                @apply psui-text-white psui-font-normal  psui-flex psui-flex-col;
-                gap: 13.6px;
-                font-size: 14px;
-                line-height: 120%;
+            h2 {
+              @apply psui-text-gray-80;
+            }
 
-                button {
-                  @apply psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
-                  padding: 7px 16px;
-                  width: fit-content;
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-text-gray-50;
 
-                  &:focus {
-                    outline: none;
-                  }
-                }
+              button {
+                @apply psui-bg-blue-20 psui-text-blue-60;
               }
             }
+          }
 
-            &-color {
-              @apply psui-bg-blue-50 psui-py-4 psui-px-6 psui-flex psui-flex-col psui-shadow-elevation-30;
-              gap: 8.8px;
+          &.layout-dark {
+            @apply psui-bg-blue-70;
 
-              h2 {
-                @apply psui-text-white psui-font-bold;
-                font-size: 17px;
-                line-height: 120%;
-              }
+            h2,
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-text-white;
+            }
+
+            .psui-el-tooltip-content-wrapper button {
+              @apply psui-bg-blue-60 psui-text-white;
+            }
+          }
 
-              .psui-el-tooltip-content-wrapper {
-                @apply psui-text-white psui-font-normal psui-flex psui-flex-col;
-                gap: 13.6px;
-                font-size: 14px;
-                line-height: 120%;
+          &.layout-color {
+            @apply psui-bg-blue-50;
 
-                button {
-                  @apply psui-rounded-md psui-bg-blue-60 psui-text-white psui-font-bold;
-                  padding: 7px 16px;
-                  width: fit-content;
+            h2,
+            .psui-el-tooltip-content-wrapper {
+              @apply psui-text-white;
+            }
 
-                  &:focus {
-                    outline: none;
-                  }
-                }
-              }
+            .psui-el-tooltip-content-wrapper button {
+              @apply psui-bg-blue-60 psui-text-white;
             }
           }
         }

package/src/components/table-results/PsTableResults.vue

@@ -285,7 +285,7 @@
                   v-if="column.isSwitch && item.data[column.key] != null"
                   class="psui-inline-flex"
                   v-tooltip="{
-                    content: item.tooltip_text ? `<p class='psui-text-white psui-text-xsmall psui-font-bold'>${item.tooltip_text}</p>` : false,
+                    content: item.tooltip_text ? `<h2>${item.tooltip_text}</h2>` : false,
                     classes: 'layout-blue',
                   }"
                 >
@@ -720,9 +720,9 @@ const getTooltipContent = (item) => {
     content.classes = 'layout-blue'
     content.content = item.tooltip_text
   } else if (item.tooltip_text) {
-    content.content = `<p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">${item.tooltip_text}</p>`
+    content.content = `<h2>${item.tooltip_text}</h2>`
   } else if (item.is_disabled) {
-    content.content = `<p class="psui-font-bold psui-text-gray-80 psui-text-xsmall">${item.title} buildings are <br>not allowed.</p>`
+    content.content = `<h2>${item.title} buildings are <br>not allowed.</h2>`
   }
   return content
 }