Upgrade primevue to v4

assets/css/scss/atoms/_checkbox.scss

@@ -1,53 +1,87 @@
 .p-checkbox {
-  @apply relative inline-flex select-none align-bottom h-4 w-4;
+  @apply relative inline-flex select-none align-bottom w-4 h-4;
 
   &-input {
-    @apply cursor-pointer;
+    @apply cursor-pointer appearance-none absolute start-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none outline-0 border border-transparent rounded-full;
   }
 
   &-box {
-    @apply flex justify-center items-center;
-  }
+    @apply flex justify-center items-center rounded border border-gray-50 w-4 h-4 transition outline-transparent;
+
+    .p-checkbox-checked & {
+      @apply border-gray-50 bg-white;
+    }
+
+    .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) & {
+      @apply border-primary bg-white;
+    }
+
+    .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) & {
+      @apply border-primary drop-shadow-lg outline-none outline-0
+    }
 
-  & &-input {
-    @apply appearance-none absolute top-0 left-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none border-2 border-support-3 rounded;
+    .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:focus-visible) & {
+      @apply border-primary;
+    }
+
+    .p-checkbox.p-variant-filled & { }
+
+    .p-checkbox-checked.p-variant-filled & {}
+
+    .p-checkbox-checked.p-variant-filled:not(.p-disabled):has(.p-checkbox-input:hover) & { }
   }
 
-  & &-box {
-    @apply border-2 border-support-3 bg-white w-4 h-4 text-primary rounded transition-none outline-none;
+  &-icon {
+    @apply duration-200 text-gray-90 text-body-2 w-3 h-3;
 
-    .p-checkbox-icon {
-      @apply duration-200 text-white text-tiny;
+    .p-checkbox-checked & {
+      @apply text-gray-90;
+    }
 
-      &.p-icon {
-        @apply w-2.5 h-2.5;
+    .p-checkbox-checked:not(.p-disabled):has(.p-checkbox-input:hover) & {
+      @apply text-primary;
+    }
+  }
+
+  &:not(.p-disabled) {
+    &:has(.p-checkbox-input:hover) {
+      .p-checkbox-box {
+        @apply border-primary;
       }
     }
   }
 
-  &:has(&-input--legacy:checked) &-box,
-  &.p-highlight &-box {
-    @apply border-primary bg-primary;
+  &.p-invalid > & {
+    @apply border-danger;
   }
 
-  &:not(.p-disabled):has(&-input:hover) {
-    .p-checkbox-box {
-      @apply border-primary;
-    }
+  &.p-disabled {
+    @apply opacity-100;
+
+    & .p-checkbox-box {
+      @apply border-gray-50 bg-gray-20;
 
-    &:has(.p-checkbox-input--legacy:checked) .p-checkbox-box,
-    &.p-highlight .p-checkbox-box {
-      @apply border-primary bg-primary text-white;
+      .p-checkbox-icon {
+        @apply text-gray-50;
+      }
     }
   }
 
-  &:not(.p-disabled):has(&-input:focus-visible) {
-    .p-checkbox-box {
-      @apply outline-none drop-shadow-lg bg-primary;
-    }
+  &-sm,
+  &-sm &-box {
+    @apply w-2 h-2;
+  }
+
+  &-sm &-icon {
+    @apply text-body-2 w-2 h-2;
+  }
+
+  &-lg,
+  &-lg &-box {
+    @apply w-6 h-6;
   }
 
-  &.p-invalid > &-box {
-    @apply border-error;
+  &-lg &-icon {
+    @apply text-body-2 w-5 h-5;
   }
 }

assets/css/scss/atoms/_dropdown.scss

@@ -1,85 +1,132 @@
-.p-dropdown, .p-multiselect {
-  @apply inline-flex cursor-pointer relative select-none
-      border border-support-3 bg-white rounded-lg transition w-full duration-200
-    hover:border-primary hover:text-gray-90 hover:outline-0 hover:outline-none
-    focus:border-primary focus:text-gray-90 focus:outline-0 focus:outline-none;
+.p-select {
+  @apply inline-flex cursor-pointer relative select-none bg-white border border-gray-50 transition rounded-lg outline-none shadow-none drop-shadow-none w-full;
 
-  font-size: 14px;
+  &:not(.p-disabled) {
+    @apply hover:border-primary hover:text-gray-90;
 
-  .p-dropdown-panel, .p-multiselect-panel {
-    @apply min-w-full;
+    &.p-focus {
+      @apply border-primary text-gray-90 outline-0 outline-none
+    }
   }
 
-  &.p-invalid.p-component {
-    @apply border-error text-error;
+  &.p-variant-filled {
+    &:not(.p-disabled) {
+      &:hover {}
+
+      &.p-focus {}
+    }
   }
-}
 
-select.p-dropdown {
-  @apply px-4 py-2;
-}
+  &.p-invalid {
+    @apply border-danger text-danger;
+  }
+
+  &.p-disabled {
+    @apply bg-gray-25 opacity-60;
+  }
 
-.p-dropdown {
   &-clear-icon {
     @apply absolute top-1/2 -mt-2;
   }
 
-  & &-clear-icon {
-    @apply right-12;
+  &-dropdown {
+    @apply flex items-center justify-center shrink-0 bg-transparent rounded-r-lg pr-4 py-2 text-gray-90 text-body-2;
+
+    .p-select-sm & .p-icon {}
+
+    .p-select-lg & .p-icon {}
   }
-}
 
-.p-dropdown-trigger {
-  @apply flex items-center justify-center flex-shrink-0
-      bg-transparent rounded-r-lg w-9;
-}
+  &-label {
+    @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] px-4 py-3 overflow-ellipsis cursor-pointer text-gray-90 text-body-2 bg-transparent border-none border-0 outline-none outline-0;
 
-.p-dropdown-label, .p-multiselect-label {
-  @apply block whitespace-nowrap overflow-hidden flex-auto w-[1%] overflow-ellipsis cursor-pointer
-      bg-transparent border-none
-    focus:outline-0 focus:outline-none;
-}
+    &.p-placeholder {
+      @apply text-gray-50;
 
-.p-dropdown-label-empty {
-  @apply overflow-hidden opacity-0;
-}
+      .p-select.p-invalid & {}
+    }
 
-.p-dropdown-panel, .p-multiselect-panel {
-  @apply absolute min-w-full top-2 left-0
-    bg-white rounded-lg text-gray-90 drop-shadow-lg;
+    .p-select:has(.p-select-clear-icon) & {}
 
-  .p-dropdown-items {
-    @apply rounded-lg
-      before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none
-      after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none;
+    .p-select.p-disabled & {
+      @apply text-gray-50;
+    }
 
-    .p-dropdown-item {
-      @apply px-4 py-2 transition text-body-2 outline-0 outline-none text-gray-90;
+    &-empty {
+      @apply overflow-hidden opacity-0;
+    }
 
-      &.p-highlight {
-        @apply bg-support-3 text-primary;
-      }
+    .p-select-sm & {
+    }
+
+    .p-select-lg & {}
+  }
+
+  input.p-select-label {
+    @apply cursor-default;
+  }
+
+  & &-overlay {
+    @apply cursor-default;
+  }
+
+  &-overlay {
+    @apply absolute top-0 left-0 mt-2 bg-white text-gray-90 border-0 border-none rounded-lg drop-shadow-lg;
+  }
+
+  &-header {}
+
+  &-filter {
+    @apply w-full;
+  }
+
+  &-list-container {
+    @apply overflow-auto;
+  }
+
+  &-option-group {
+
+  }
+
+  &-list {
+    @apply m-0 p-0 list-none gap-0 flex flex-col
+    before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none
+    after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none;
+  }
+
+  &-option {
+    @apply cursor-pointer text-body-2 whitespace-nowrap relative overflow-hidden flex items-center px-4 py-2 border-0 border-none text-gray-90 transition;
+
+    &:not(.p-select-option-selected):not(.p-disabled).p-focus {
+      @apply bg-white text-primary;
+    }
+
+    &.p-select-option-selected {
+      @apply bg-support-1 text-primary;
 
       &.p-focus {
-        @apply text-primary;
+        @apply bg-support-1 text-primary;
       }
     }
   }
-}
 
-.p-dropdown-items-wrapper {
-  @apply overflow-auto rounded-lg;
-}
+  &-option-blank-icon {
+    @apply shrink-0
+  }
 
-.p-dropdown-item {
-  @apply cursor-pointer whitespace-nowrap relative overflow-hidden flex items-center;
-}
+  &-option-check-icon {
+    @apply relative shrink-0 text-support-3;
+  }
 
-.p-dropdown-items {
-  @apply m-0 p-0 list-none;
-}
+  &-empty-message {
+    @apply px-4 py-2;
+  }
 
-.p-multiselect-label-container {
-  @apply p-2;
+  &-fluid {
+    @apply flex w-full;
+  }
 }
 
+select.p-select {
+  @apply px-4 py-2;
+}

assets/css/scss/atoms/_input_switch.scss

@@ -1,47 +1,51 @@
-.p-inputswitch {
-  @apply align-middle h-4 w-8;
+.p-toggleswitch {
+  @apply inline-block w-8 h-4;
 
-  .p-inputswitch-input {
-    @apply appearance-none absolute top-0 left-0 w-full h-full p-0 m-0 opacity-0  z-[1] outline-0 outline-none rounded-full;
+  &-input {
+    @apply cursor-pointer appearance-none absolute top-0 start-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-0 outline-none rounded-full;
   }
 
-  .p-inputswitch-slider {
-    @apply bg-gray-30 rounded-full transition-none outline-transparent
-      before:bg-white before:duration-200 before:h-3 before:left-0.5 before:-mt-1.5 before:rounded-full before:w-3;
-  }
+  &-slider {
+     @apply cursor-pointer w-full h-full border-0 border-none bg-gray-30 transition rounded-full drop-shadow-none;
 
-  &.p-highlight .p-inputswitch-slider {
-    @apply bg-secondary
-      before:bg-white before:translate-x-4;
-  }
+    .p-toggleswitch.p-toggleswitch-checked & {
+      @apply bg-secondary;
+    }
 
-  &:not(.p-disabled) {
-    &:has(.p-inputswitch-input:hover) {
-      .p-inputswitch-slider {
-        @apply bg-gray-30;
-      }
+    .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) & {
+      @apply bg-gray-50;
+    }
 
-      &.p-highlight .p-inputswitch-slider {
-        @apply bg-secondary;
-      }
+    .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked & {
+      @apply bg-secondary;
     }
 
-    &:has(.p-inputswitch-input:focus-visible) .p-inputswitch-slider {
-      @apply outline-0 outline-none outline-offset-0 shadow-lg;
+    .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:focus-visible) & {
+      @apply outline-none outline-0;
     }
-  }
 
-  &.p-invalid > .p-inputswitch-slider {
-    @apply border-error;
+    .p-toggleswitch.p-disabled & { }
+
+    .p-toggleswitch.p-invalid > & {
+      @apply border border-solid border-danger;
+    }
   }
-}
 
-.p-inputswitch-input {
-  @apply cursor-pointer;
-}
+  &-handle {
+    @apply absolute flex justify-center items-center bg-white text-gray-90 h-3 w-3 top-0.5 left-0.5 rounded-full transition-colors;
 
-.p-inputswitch-slider {
-  @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent
-    before:absolute before:content-[""] before:top-1/2;
-}
+    .p-toggleswitch.p-toggleswitch-checked & {
+      @apply translate-x-4;
+    }
+
+    .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover) & { }
+
+    .p-toggleswitch.p-disabled & { }
 
+    .p-toggleswitch:not(.p-disabled):has(.p-toggleswitch-input:hover).p-toggleswitch-checked & { }
+  }
+
+  &.p-disabled {
+    @apply opacity-100;
+  }
+}