cax-design-system 2.2.0 → 2.4.0

package/resources/cax.scss

@@ -978,127 +978,6 @@
             background-color: transparent;
         }
     }
-
-    .cax-autocomplete .cax-autocomplete-loader {
-    }
-    .cax-autocomplete.cax-autocomplete-dd .cax-autocomplete-loader {
-        right: 3.25rem;
-    }
-    .cax-autocomplete:not(.cax-disabled):hover .cax-autocomplete-multiple-container {
-        border-color: #52525b;
-    }
-    .cax-autocomplete:not(.cax-disabled).cax-focus .cax-autocomplete-multiple-container {
-        outline: 1px solid var(--cax-focus-ring-color);
-        outline-offset: -1px;
-        box-shadow: none;
-        border-color: #52525b;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container {
-        padding: 0.25rem 0.75rem;
-        gap: 0.5rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
-        padding: 0.25rem 0;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token input {
-        font-family: var(--font-family);
-        font-feature-settings: var(--font-feature-settings, normal);
-        font-size: 1rem;
-        color: #ffffff;
-        padding: 0;
-        margin: 0;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
-        padding: 0.25rem 0.75rem;
-        background: #3f3f46;
-        color: #ffffff;
-        border-radius: 16px;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
-        margin-left: 0.5rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token.cax-focus {
-        background: #3f3f46;
-        color: #ffffff;
-    }
-    .cax-autocomplete.cax-invalid.cax-component > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    .cax-autocomplete-panel {
-        background: var(--white-100);
-        color: var(--black-100);
-        border: 1px solid var(--grey-200);
-        border-radius: 7px;
-        box-shadow:
-            0 4px 6px -1px rgba(0, 0, 0, 0.1),
-            0 2px 4px -2px rgba(0, 0, 0, 0.1);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items {
-        padding: 0.25rem 0.25rem;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item {
-        margin: 2px 0;
-        padding: 0.5rem 0.75rem;
-        border: 0 none;
-        color: var(--grey-900);
-        background: var(--white-100);
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-        border-radius: 4px;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:first-child {
-        margin-top: 0;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight {
-        color: var(--grey-900);
-        background: var(--grey-100);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight.cax-focus {
-        background: rgba(34, 211, 238, 0.24);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
-        color: #ffffff;
-        background: rgba(255, 255, 255, 0.08);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled):hover {
-        color: var(--black-100);
-        background: var(--grey-100);
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item-group {
-        margin: 0;
-        padding: 0.5rem 0.75rem;
-        color: #71717a;
-        background: #18181b;
-        font-weight: 600;
-    }
-    .cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-empty-message {
-        padding: 0.5rem 0.75rem;
-        color: var(--grey-900);
-        background: var(--white-100);
-    }
-
-    cax-autocomplete.ng-dirty.ng-invalid > .cax-autocomplete > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    cax-autocomplete.cax-autocomplete-clearable .cax-inputtext {
-        padding-left: 1.9rem;
-        padding-right: 1.9rem;
-    }
-    cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-clear-icon {
-        color: #a1a1aa;
-        // left: 11rem;
-    }
-
-    cax-autocomplete.cax-autocomplete-clearable .cax-autocomplete-dd .cax-autocomplete-clear-icon {
-        color: #a1a1aa;
-        right: 3.25rem;
-    }
     .cax-cascadeselect {
         border: 1px solid var(--neutral-200);
         transition:
@@ -1453,43 +1332,6 @@
         color: var(--neutral-900);
     }
 
-    cax-inputnumber.ng-dirty.ng-invalid > .cax-inputnumber > .cax-inputtext {
-        border-color: #fca5a5;
-    }
-
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-input {
-        padding-right: 2.5rem;
-    }
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-clear-icon {
-        color: #a1a1aa;
-        right: 0.75rem;
-    }
-
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-stacked .cax-inputnumber-clear-icon {
-        right: 3.25rem;
-    }
-    cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-horizontal .cax-inputnumber-clear-icon {
-        right: 3.25rem;
-    }
-
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input {
-        background-color: #27272a;
-    }
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:hover {
-        background-color: var(--neutral-500);
-    }
-    cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:focus {
-        background-color: #27272a;
-    }
-    .cax-inputnumber-input {
-        width: 46px;
-        height: 40px;
-        border-radius: 5px;
-        border: 1px solid var(--neutral-200);
-        color: var(--neutral-500);
-        font-weight: 400;
-    }
-
     .cax-inputotp {
         display: flex;
         align-items: center;
@@ -3290,74 +3132,6 @@
         border-bottom-right-radius: 6px;
     }
 
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link {
-        padding: 1.125rem 1.125rem 1.125rem 1.125rem;
-        border: 1px solid #e0e5eb;
-        color: var(--neutral-900);
-        background: var(--neutral-300);
-        font-weight: 600;
-        border-radius: 6px;
-        font-size: 16px;
-        border-bottom: 1px solid #e0e5eb;
-        transition:
-            background-color 0.2s,
-            color 0.2s,
-            border-color 0.2s,
-            box-shadow 0.2s,
-            outline-color 0.2s;
-    }
-    .cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
-        margin-right: 0.5rem;
-    }
-
-    .cax-accordion .cax-accordion-header:not(.cax-disabled).cax-highlight .cax-accordion-header-link {
-        background: var(--neutral-300);
-        border-color: 1px solid #e0e5eb;
-        color: var(--neutral-900);
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-
-    .cax-accordion .cax-accordion-content {
-        padding: 0 1.125rem 1.125rem 1.125rem;
-        border: 1px solid #e0e5eb;
-        background: var(--white-100);
-        color: var(--neutral-900);
-        font-size: 0.875rem;
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-tab {
-        margin-bottom: 0;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-header .cax-accordion-header-link {
-        border-radius: 0;
-    }
-    .cax-accordion cax-accordiontab .cax-accordion-content {
-        border-radius: 0;
-    }
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header .cax-accordion-header-link {
-        border-top: 0 none;
-    }
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-highlight):not(.cax-disabled):hover .cax-accordion-header-link,
-    .cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-disabled).cax-highlight:hover .cax-accordion-header-link {
-        border-top: 0 none;
-    }
-    .cax-accordion cax-accordiontab:first-child .cax-accordion-header .cax-accordion-header-link {
-        border-top-right-radius: 6px;
-        border-top-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab:last-child .cax-accordion-header:not(.cax-highlight) .cax-accordion-header-link {
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-    .cax-accordion cax-accordiontab:last-child .cax-accordion-content {
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
-    }
-
     .cax-card {
         background: var(--white-900);
         color: var(--neutral-900);
@@ -3399,7 +3173,7 @@
         padding: 0 1rem;
     }
     .cax-divider.cax-divider-horizontal:before {
-        border-top: 1px #3f3f46;
+        border-top: 1px var(--neutral-100);
     }
     .cax-divider.cax-divider-horizontal .cax-divider-content {
         padding: 0 0.5rem;
@@ -5654,28 +5428,6 @@
     .cax-accordion cax-accordiontab:last-of-type .cax-accordion-tab {
         border-bottom: 0 none;
     }
-
-    .cax-autocomplete .cax-autocomplete-multiple-container {
-        padding: 0.25rem 0.25rem;
-        gap: 0.25rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
-        border-radius: 4px;
-        margin: 0;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
-        margin-left: 0.375rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
-        margin-left: 0.5rem;
-    }
-    .cax-autocomplete .cax-autocomplete-multiple-container:has(.cax-autocomplete-token) .cax-autocomplete-input-token {
-        margin-left: 0.5rem;
-    }
-    .cax-autocomplete.cax-disabled {
-        opacity: 1;
-    }
-
     .cax-card {
         border-radius: 12px;
         display: flex;
@@ -5903,73 +5655,6 @@
         // padding: 0.5rem;
     }
 
-    .cax-inputnumber.cax-inputnumber-buttons-stacked {
-        position: relative;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-input {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button-group {
-        position: absolute;
-        top: 1px;
-        right: 1px;
-        height: calc(100% - 2px);
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button {
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-        background-color: transparent;
-        border: 0 none;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button {
-        background-color: transparent;
-        border: 1px solid #3f3f46;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-up {
-        border-left: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-down {
-        border-right: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button {
-        background-color: transparent;
-        border: 1px solid #3f3f46;
-        color: #a1a1aa;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:hover {
-        background-color: rgba(255, 255, 255, 0.03);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:active {
-        background-color: rgba(255, 255, 255, 0.08);
-        color: #ffffff;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-up {
-        border-bottom: 0 none;
-    }
-    .cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-down {
-        border-top: 0 none;
-    }
-
     .cax-inputswitch .cax-inputswitch-slider {
         border: 0 none;
     }
@@ -7015,6 +6700,8 @@ cax-calendar.ng-dirty.ng-invalid > .cax-calendar > .cax-inputtext {
 }
 .cax-datepicker .cax-yearpicker {
     margin: 4px;
+    padding-right: 12px !important;
+    padding-left: 12px !important;
 }
 .cax-datepicker .cax-yearpicker .cax-yearpicker-year {
     padding: 0.25rem;
@@ -7953,11 +7640,15 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
 
 .cax-nav {
     background-color: var(--white-100);
-    border-right: 1px solid var(--neutral-200);
+    border-right: 1.5px solid var(--neutral-75);
+}
+
+.cax-nav .cax-nav-header {
+    color: var(--neutral-900);
 }
 
 .cax-nav .cax-divider.cax-divider-vertical::before {
-    border-color: var(--neutral-300);
+    border-color: var(--neutral-100);
 }
 
 .cax-nav-bottom-container {
@@ -7970,10 +7661,10 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
         li {
             i {
                 font-size: 24px;
-                color: var(--neutral-700);
+                color: var(--neutral-900);
             }
             &:hover {
-                background-color: var(--neutral-300);
+                background-color: var(--neutral-75);
             }
         }
         li.active {
@@ -7989,15 +7680,16 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
 .cax-nav-list-label {
     font-size: 16px;
     font-weight: 600;
-    color: var(--neutral-700);
+    color: var(--neutral-900);
     margin-left: 8px;
 }
 
 .cax-nav-account-details {
-    border: 1px solid var(--neutral-300);
+    border: 1px solid var(--neutral-125);
 
     &:hover {
-        background-color: var(--neutral-300);
+        border: 1px solid var(--neutral-200);
+        background-color: var(--neutral-75);
     }
 
     .cax-nav-account-icon {
@@ -8010,7 +7702,7 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
 }
 
 .cax-nav-account-details.active {
-    background: var(--neutral-300);
+    background: var(--neutral-50);
 }
 
 .cax-nav-user {
@@ -8018,34 +7710,29 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
         color: var(--neutral-900);
     }
     .cax-nav-user-role {
-        color: var(--neutral-700);
+        color: var(--neutral-750);
     }
 }
 
 .cax-nav-copyright {
-    color: var(--neutral-500);
+    color: var(--neutral-750);
 }
-.cax-nav-profile-options,
-.cax-nav-organisation-list {
+.cax-nav-profile-options {
     background-color: var(--white-100);
 }
 .cax-nav-logout {
     color: var(--error-500);
 }
-.cax-nav-organisation-container:hover {
-    background-color: var(--neutral-300);
-    .cax-radiobutton .cax-radiobutton-box {
-        border-color: var(--primary-600);
-    }
-}
-.cax-nav-organisation-container.active {
-    background-color: var(--neutral-300);
-}
-.cax-nav-organisation {
-    .cax-nav-organisation-name {
-        color: var(--neutral-900);
+
+.cax-nav-overlay,
+.cax-nav-overlay-expand {
+    border: 1px solid var(--neutral-125) !important;
+    background: var(--neutral-50) !important;
+    i {
+        font-size: 24px;
     }
 }
+
 .cax-nav-backdrop {
     position: fixed;
     top: 0;
@@ -8130,7 +7817,6 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
         box-shadow 0.2s,
         outline-color 0.2s;
     appearance: none;
-    border-radius: 8px;
 }
 
 .cax-input-size-sm {
@@ -8295,7 +7981,6 @@ cax-radiobutton.ng-dirty.ng-invalid > .cax-radiobutton > .cax-radiobutton-box {
 }
 .cax-inputtext {
     border: 1px solid var(--neutral-200);
-
     &:hover {
         border: 1px solid var(--neutral-300);
     }
@@ -8382,7 +8067,7 @@ input.cax-input-invalid:not(:disabled):focus,
 
 .cax-input-icon-left > .cax-icon-wrapper.cax-icon,
 .cax-input-icon-left > i:first-of-type {
-    left: 0.75rem;
+    left: 0.6rem;
     color: var(--neutral-750);
 }
 
@@ -8997,7 +8682,7 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 }
 .cax-button:not(:disabled):active {
     background: var(--primary-500);
-    color: var(--surface-100);
+    color: var(--white-100);
     border-color: var(--primary-500);
 }
 .cax-button.cax-button-outlined {
@@ -9077,10 +8762,6 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
         0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 .cax-button.cax-button-icon-only {
-    border-top-left-radius: 0;
-    border-top-right-radius: var(--radius-100);
-    border-bottom-right-radius: var(--radius-100);
-    border-bottom-left-radius: 0;
     min-width: 2.5rem;
     padding: var(--space-100) 0;
 }
@@ -9237,9 +8918,8 @@ cax-inputmask.cax-inputmask-clearable .cax-inputmask-clear-icon {
 .cax-button.cax-button-secondary:not(:disabled):active,
 .cax-button-group.cax-button-secondary > .cax-button:not(:disabled):active,
 .cax-splitbutton.cax-button-secondary > .cax-button:not(:disabled):active {
-    background: var(--neutral-150);
+    background: var(--neutral-75);
     color: var(--neutral-900);
-    border-color: 1px solid var(--neutral-150);
 }
 .cax-button.cax-button-secondary.cax-button-outlined,
 .cax-button-group.cax-button-secondary > .cax-button.cax-button-outlined,
@@ -11370,7 +11050,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
 .cax-overlaypanel {
     background: var(--white-100);
     color: var(--neutral-900);
-    border: 1px solid var(--neutral-300);
+    border: 1px solid var(--neutral-100);
     border-radius: 8px;
 }
 .cax-overlaypanel .cax-overlaypanel-content {
@@ -11438,6 +11118,92 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     box-shadow: none;
 }
 
+.cax-accordion .cax-accordion-header .cax-accordion-header-link {
+    padding: var(--space-200) 17.5px var(--space-200) 17.5px;
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+    background: var(--neutral-75);
+    font-weight: 600;
+    border-radius: 6px;
+    font-size: 20px;
+    border-bottom: 1px solid var(--neutral-200);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+}
+.cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
+    margin-right: 0.5rem;
+}
+
+.cax-accordion .cax-accordion-header:not(.cax-disabled).cax-highlight .cax-accordion-header-link {
+    background: var(--neutral-75);
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.cax-accordion .cax-accordion-content {
+    padding: 0 1.125rem 1.125rem 1.125rem;
+    border: 1px solid #e0e5eb;
+    background: var(--white-100);
+    color: var(--neutral-900);
+    font-size: 20px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    border-bottom-right-radius: 6px;
+    border-bottom-left-radius: 6px;
+}
+.cax-accordion cax-accordiontab .cax-accordion-tab {
+    margin-bottom: 0;
+}
+.cax-accordion cax-accordiontab .cax-accordion-header .cax-accordion-header-link {
+    border-radius: 0;
+}
+.cax-accordion cax-accordiontab .cax-accordion-content {
+    border-radius: 0;
+}
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header .cax-accordion-header-link {
+    border-top: 0 none;
+}
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-highlight):not(.cax-disabled):hover .cax-accordion-header-link,
+.cax-accordion cax-accordiontab:not(:first-child) .cax-accordion-header:not(.cax-disabled).cax-highlight:hover .cax-accordion-header-link {
+    border-top: 0 none;
+}
+.cax-accordion cax-accordiontab:first-child .cax-accordion-header .cax-accordion-header-link {
+    border-top-right-radius: var(--radius-150);
+    border-top-left-radius: var(--radius-150);
+}
+.cax-accordion cax-accordiontab:last-child .cax-accordion-header:not(.cax-highlight) .cax-accordion-header-link {
+    border-bottom-right-radius: var(--radius-150);
+    border-bottom-left-radius: var(--radius-150);
+}
+.cax-accordion cax-accordiontab:last-child .cax-accordion-content {
+    border-bottom-right-radius: var(--radius-150);
+    border-bottom-left-radius: var(--radius-150);
+}
+
+.cax-accordion .cax-accordion-header .cax-accordion-header-link {
+    // border-radius: 6px !important;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+.cax-accordion .cax-accordion-header .cax-accordion-header-link .cax-accordion-toggle-icon {
+    transform: rotate(90deg);
+}
+.cax-accordion .cax-accordion-header.cax-highlight .cax-accordion-toggle-icon {
+    transform: rotate(-180deg);
+}
+.cax-accordion .cax-accordion-header:not(.cax-disabled) .cax-accordion-header-link:focus-visible {
+    outline-offset: -2px;
+}
+.cax-accordion cax-accordiontab:last-of-type .cax-accordion-tab {
+    border-bottom: 0 none;
+}
+
 .cax-timeline .cax-timeline-event-marker {
     border: 1px solid var(--primary-500);
     border-radius: 50%;
@@ -11453,8 +11219,8 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     padding-bottom: 1rem;
 }
 
-.cax-timeline-event-content:hover{
-    background: var(--neutral-75); 
+.cax-timeline-event-content:hover {
+    background: var(--neutral-75);
 }
 
 .cax-timeline.cax-timeline-vertical .cax-timeline-event-connector {
@@ -11474,8 +11240,7 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
     position: relative;
     color: var(--primary-500);
     font-size: 10px;
-    font-weight : 600;
-
+    font-weight: 600;
 }
 .cax-timeline .cax-timeline-event-marker::after {
     content: ' ';
@@ -11487,3 +11252,626 @@ cax-dropdown.ng-dirty.ng-invalid > .cax-dropdown {
         0px 0.5px 0px 0px rgba(0, 0, 0, 0.06),
         0px 1px 1px 0px rgba(0, 0, 0, 0.12);
 }
+.cax-inputnumber {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    .cax-inputnumber-button {
+        width: 37px;
+        border: 1px solid var(--neutral-150);
+    }
+    // Modify button layouts
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-button-group {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            border: 1px solid var(--neutral-150);
+            border-radius: 0px 8px 8px 0px;
+            height: 32px;
+            .cax-button {
+                min-width: 37px;
+                height: 15.5px;
+                border: none;
+                i,
+                .cax-icon {
+                    display: inline-flex;
+                    font-size: 1rem;
+                }
+                &:active,
+                &:focus {
+                    position: relative;
+                    z-index: 1;
+
+                    &::after {
+                        content: '';
+                        position: absolute;
+                        left: -1px;
+                        right: -1px;
+                        height: 100%;
+                        border: 1px solid var(--blue-500);
+                    }
+                }
+
+                &:first-child:active::after,
+                &:first-child:focus::after {
+                    top: -1px;
+                    border-radius: 0 8px 0 0;
+                }
+
+                &:last-child:active::after,
+                &:last-child:focus::after {
+                    bottom: -1px;
+                    border-radius: 0 0 8px 0;
+                }
+            }
+
+            // Remove previous border color changes
+            &:has(.cax-button:active),
+            &:has(.cax-button:focus) {
+                border-color: var(--neutral-150);
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-button.cax-inputnumber-button {
+            min-width: 32px;
+            height: 32px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            i,
+            .cax-icon {
+                display: inline-flex;
+                font-size: 1.5rem;
+            }
+        }
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    // Input styles
+    .cax-inputnumber-input {
+        width: 100%;
+        height: 32px;
+        padding: 7px 10.5px;
+        border: 1px solid var(--neutral-200);
+        transition: all 0.2s;
+        &:hover {
+            border-color: var(--neutral-300);
+        }
+        &:focus {
+            outline: none;
+            border-color: var(--blue-500);
+        }
+        &:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+
+            & + .cax-input-prefix,
+            & + .cax-input-prefix-icon,
+            & ~ .cax-input-suffix,
+            & ~ i,
+            & ~ .cax-icon {
+                opacity: 0.6;
+                cursor: not-allowed;
+                color: var(--neutral-400);
+            }
+        }
+    }
+
+    &.cax-input-icon-left {
+        .cax-inputnumber-input {
+            padding-left: 2.5rem;
+        }
+    }
+
+    &.cax-disabled {
+        .cax-input-prefix,
+        .cax-input-prefix-icon,
+        .cax-input-suffix,
+        i,
+        .cax-icon {
+            opacity: 0.6;
+            cursor: not-allowed;
+            color: var(--neutral-400);
+        }
+    }
+
+    input.cax-inputnumber-input {
+        font-weight: 500;
+        box-shadow: none;
+        &[inputmode='symbol'] {
+            letter-spacing: 0px;
+        }
+        &[inputmode='decimal'] {
+            letter-spacing: 0px;
+        }
+    }
+
+    .cax-input-prefix,
+    .cax-input-prefix-icon {
+        position: absolute;
+        top: 50%;
+        left: 0.75rem;
+        transform: translateY(-50%);
+        color: var(--neutral-750);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        i {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 16px;
+            height: 16px;
+            margin-right: 4px;
+        }
+        & + .cax-inputnumber-input {
+            letter-spacing: 0px;
+            padding-left: 2.75rem;
+            text-indent: 20px;
+            &[inputmode='symbol'] {
+                text-indent: 24px;
+            }
+        }
+    }
+
+    &.cax-input-icon-left {
+        .cax-inputnumber-input {
+            padding-left: 2.5rem;
+        }
+    }
+    .cax-inputnumber-input {
+        &:not(.cax-filled) {
+            &::placeholder {
+                opacity: 1;
+            }
+        }
+    }
+
+    .cax-input-prefix,
+    .cax-input-prefix-icon {
+        position: absolute;
+        left: 0.75rem;
+        transform: translateY(-50%);
+        color: var(--neutral-750);
+        z-index: 1;
+        display: flex;
+        font-size: large;
+        align-items: center;
+        & + .cax-inputnumber-input {
+            padding-left: 0.7rem;
+            &::before {
+                content: '\00a0';
+                display: inline;
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked,
+    &.cax-inputnumber-buttons-horizontal,
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        &.cax-input-icon-left .cax-inputnumber-input {
+            padding-left: 0.7rem;
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        .cax-input-prefix,
+        .cax-input-prefix-icon {
+            display: none;
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-input {
+            padding: 7px 10.5px;
+        }
+
+        &.cax-input-icon-left {
+            .cax-input-prefix,
+            .cax-input-prefix-icon {
+                display: flex;
+            }
+
+            .cax-inputnumber-input {
+                padding-left: 0.7rem;
+            }
+        }
+    }
+
+    input.cax-inputnumber-input {
+        font-weight: 500;
+        &[inputmode='symbol'] {
+            padding-left: 2.25rem;
+            word-spacing: 0.25rem;
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-button-group {
+            .cax-button {
+                position: relative;
+                min-width: 37px;
+                height: 15.5px;
+                border: none;
+
+                &:first-child {
+                    border-radius: 0 8px 0 0;
+                    border-bottom: 1px solid var(--neutral-150);
+
+                    &:active,
+                    &:focus {
+                        border-color: var(--neutral-150);
+                        border-radius: 0 8px 0 0;
+                    }
+                }
+
+                &:last-child {
+                    border-radius: 0 0 8px 0;
+
+                    &:active,
+                    &:focus {
+                        border-color: var(--neutral-150);
+                        border-radius: 0 0 8px 0;
+                    }
+                }
+
+                &:active,
+                &:focus {
+                    border: 1px solid var(--neutral-150);
+                    z-index: 1;
+                }
+
+                i,
+                .cax-icon {
+                    display: inline-flex;
+                    font-size: 1.5rem;
+                }
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-stacked {
+        .cax-inputnumber-input {
+            border-right: 0;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+
+        .cax-inputnumber-button-group {
+            border: 1px solid var(--neutral-150);
+            border-left: 0;
+            border-radius: 0 8px 8px 0;
+
+            .cax-button {
+                border: none;
+                border-radius: 0 !important;
+
+                &:first-child {
+                    border-radius: 0 8px 0 0 !important;
+                    border-bottom: 1px solid var(--neutral-150);
+                }
+
+                &:last-child {
+                    border-radius: 0 0 8px 0 !important;
+                }
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-horizontal {
+        .cax-inputnumber-input {
+            border-radius: 0;
+        }
+
+        .cax-button.cax-inputnumber-button {
+            &.cax-inputnumber-button-up {
+                border-radius: 0 8px 8px 0 !important;
+            }
+
+            &.cax-inputnumber-button-down {
+                border-radius: 8px 0 0 8px !important;
+            }
+        }
+    }
+
+    &.cax-inputnumber-buttons-vertical {
+        .cax-inputnumber-input {
+            border-radius: 0;
+        }
+
+        .cax-button.cax-inputnumber-button {
+            &.cax-inputnumber-button-up {
+                border-radius: 8px 8px 0 0 !important;
+            }
+
+            &.cax-inputnumber-button-down {
+                border-radius: 0 0 8px 8px !important;
+            }
+        }
+    }
+}
+
+.cax-input-prefix,
+.cax-input-prefix-icon {
+    &:not(:first-child) {
+        margin-left: 0;
+    }
+}
+
+.cax-input-icon-left > i,
+.cax-input-icon-left > .cax-icon-wrapper,
+.cax-input-icon-right > i,
+.cax-input-icon-right > .cax-icon-wrapper {
+    margin-top: -1px;
+    transform: translateY(-50%);
+    position: absolute;
+    top: 50%;
+}
+
+.cax-inputnumber-input {
+    border: 1px solid var(--neutral-200);
+    color: var(--neutral-900);
+}
+
+.cax-inputnumber.cax-inputnumber-buttons-stacked {
+    position: relative;
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button {
+    height: calc(100% - 2px);
+    background-color: var(--neutral-75);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-stacked .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button {
+    background-color: var(--neutral-75);
+    border: 1px solid var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-up {
+    border-left: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-horizontal .cax-inputnumber-button.cax-inputnumber-button-down {
+    border-right: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button {
+    background-color: var(--neutral-75);
+    border: 1px solid var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:hover {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button:active {
+    background-color: var(--neutral-150);
+    color: var(--neutral-900);
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-up {
+    border-bottom: 0 none;
+}
+.cax-inputnumber.cax-inputnumber-buttons-vertical .cax-inputnumber-button.cax-inputnumber-button-down {
+    border-top: 0 none;
+}
+
+cax-inputnumber.ng-dirty.ng-invalid > .cax-inputnumber > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-input {
+    padding-right: 2.5rem;
+}
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-clear-icon {
+    color: var(--neutral-400);
+    right: 0.75rem;
+}
+
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-stacked .cax-inputnumber-clear-icon {
+    right: 3.25rem;
+}
+cax-inputnumber.cax-inputnumber-clearable .cax-inputnumber-buttons-horizontal .cax-inputnumber-clear-icon {
+    right: 3.25rem;
+}
+
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input {
+    background-color: #27272a;
+}
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:hover {
+    background-color: var(--neutral-500);
+}
+cax-inputnumber.cax-inputnumber.cax-variant-filled > .cax-inputnumber-input:enabled:focus {
+    background-color: #27272a;
+}
+.cax-autocomplete .cax-autocomplete-loader {
+}
+.cax-autocomplete.cax-autocomplete-dd .cax-autocomplete-loader {
+    right: 3.25rem;
+}
+.cax-autocomplete:not(.cax-disabled):hover .cax-autocomplete-multiple-container {
+    border-color: #52525b;
+}
+.cax-autocomplete:not(.cax-disabled).cax-focus .cax-autocomplete-multiple-container {
+    outline: 1px solid var(--cax-focus-ring-color);
+    outline-offset: -1px;
+    box-shadow: none;
+    border-color: #52525b;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container {
+    padding: 0.25rem 0.75rem;
+    gap: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
+    padding: 0.25rem 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token input {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: 1rem;
+    color: var(--white-100);
+    padding: 0;
+    margin: 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
+    padding: 0.25rem 0.75rem;
+    background: #3f3f46;
+    color: var(--white-100);
+    border-radius: 16px;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token.cax-focus {
+    background: #3f3f46;
+    color: var(--black-100);
+}
+.cax-autocomplete.cax-invalid.cax-component > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+.cax-autocomplete-panel {
+    background: var(--white-100);
+    color: var(--black-100);
+    border: 1px solid var(--grey-200);
+    border-radius: 7px;
+    box-shadow:
+        0 4px 6px -1px rgba(0, 0, 0, 0.1),
+        0 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+.cax-autocomplete-panel .cax-autocomplete-items {
+    padding: 0.25rem 0.25rem;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item {
+    margin: 2px 0;
+    padding: 0.5rem 0.75rem;
+    border: 0 none;
+    color: var(--grey-900);
+    background: var(--white-100);
+    transition:
+        background-color 0.2s,
+        color 0.2s,
+        border-color 0.2s,
+        box-shadow 0.2s,
+        outline-color 0.2s;
+    border-radius: 4px;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:first-child {
+    margin-top: 0;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight {
+    color: var(--grey-900);
+    background: var(--grey-100);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item.cax-highlight.cax-focus {
+    background: rgba(34, 211, 238, 0.24);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled).cax-focus {
+    color: var(--white-100);
+    background: rgba(255, 255, 255, 0.08);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item:not(.cax-highlight):not(.cax-disabled):hover {
+    color: var(--black-100);
+    background: var(--grey-100);
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-item-group {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    color: #71717a;
+    background: #18181b;
+    font-weight: 600;
+}
+.cax-autocomplete-panel .cax-autocomplete-items .cax-autocomplete-empty-message {
+    padding: 0.5rem 0.75rem;
+    color: var(--grey-900);
+    background: var(--white-100);
+}
+
+.cax-autocomplete.ng-dirty.ng-invalid > .cax-autocomplete > .cax-inputtext {
+    border-color: var(--error-600);
+}
+
+.cax-autocomplete .cax-inputtext {
+    padding-left: 1.9rem;
+    padding-right: 1.9rem;
+}
+.cax-autocomplete .cax-autocomplete-clear-icon {
+    color: var(--neutral-300);
+}
+
+.cax-autocomplete .cax-autocomplete-dd .cax-autocomplete-clear-icon {
+    color: var(--neutral-300);
+    right: 3.25rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container {
+    padding: 0.25rem 0.25rem;
+    gap: 0.25rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token {
+    border-radius: 4px;
+    margin: 0;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-token .cax-autocomplete-token-icon {
+    margin-left: 0.375rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container .cax-autocomplete-input-token {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete .cax-autocomplete-multiple-container:has(.cax-autocomplete-token) .cax-autocomplete-input-token {
+    margin-left: 0.5rem;
+}
+.cax-autocomplete.cax-disabled {
+    opacity: 1;
+}