@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/ui-admin/assets/styles/style.css

@@ -28,7 +28,7 @@
   --green-600: #087443;
   --green-700: #095c37;
   --blue-50: #f5faff;
-  --blue-100: #e0efff;
+  --blue-100: #d1e9ff;
   --blue-200: #b2ddff;
   --blue-300: #84caff;
   --blue-400: #53b1fd;
@@ -48,7 +48,7 @@
   --orange-200: #f9dbaf;
   --orange-300: #f7b27a;
   --orange-400: #f38744;
-  --orange-500: #e4501e;
+  --orange-500: #e04f16;
   --orange-600: #b93815;
   --orange-700: #772917;
   --violet-50: #fbfaff;
@@ -63,13 +63,14 @@
   --focus-ring-4px-gray-100: 0px 0px 0px 3px #f2f4f7;
   --focus-ring-4px-error-100: 0px 0px 0px 3px #fee4e2;
   --shadow-xs: 0px 1px 2px 0px #1018280d;
+  --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
   --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
   --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
-  --shadow-xs-focused-4px-primary-color-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
+  --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
   --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
   --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
-  --shadow-sm-focused-4px-primary-color-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
+  --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
   --shadow-sm-focused-4px-error-100: 0px 0px 0px 4px #fee4e2, 0px 1px 2px 0px #1018280d;
   --shadow-md: 0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f;
@@ -77,21 +78,13 @@
   --shadow-xl: 0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808;
   --shadow-2xl: 0px 24px 48px -12px #1018282e;
   --shadow-3xl: 0px 32px 64px -12px #10182824;
-  --shadow-tooltip: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.5),
-    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
-  --spacing-xxs: 3px;
   --spacing-xs: 4px;
-  --spacing-sm: 6px;
-  --spacing-md: 8px;
-  --spacing-lg: 12px;
-  --spacing-xl: 16px;
-  --border-radius-xxs: 3px;
-  --border-radius-xs: 4px;
-  --border-radius-sm: 6px;
-  --border-radius-md: 8px;
-  --border-radius-lg: 12px;
-  --max-width-tooltip: 400px;
-  --font-families-commerce-sans: CommerceSans;
+  --spacing-s: 8px;
+  --spacing-m: 16px;
+  --spacing-l: 24px;
+  --spacing-xl: 32px;
+  --spacing-xxl: 40px;
+  --font-families-commerce-sans: 'CommerceSans', 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif;
   --line-heights-display-xl: 76px;
   --line-heights-display-lg: 60px;
   --line-heights-display-md: 46px;
@@ -121,6 +114,20 @@
   --font-size-display-xl: 60px;
 }
 
+:root {
+  --spacing-xxs: 3px;
+  --spacing-sm: 6px;
+  --spacing-lg: 12px;
+  --border-radius-xxs: 3px;
+  --border-radius-xs: 4px;
+  --border-radius-sm: 6px;
+  --border-radius-md: 8px;
+  --border-radius-lg: 12px;
+  --shadow-tooltip: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.5),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  --max-width-tooltip: 400px;
+}
+
 @font-face {
   font-family: "CommerceSans";
   font-weight: 400;
@@ -295,7 +302,7 @@ button {
   background-color: var(--primary-red-450);
   border: 1px solid var(--primary-red-500);
   color: var(--base-white);
-  box-shadow: var(--shadow-xs-focused-4px-primary-color-100);
+  box-shadow: var(--shadow-xs-focused-4px-primary-100);
 }
 .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
   background-color: var(--primary-red-100);
@@ -525,11 +532,175 @@ button {
   width: var(--button-height-md);
 }
 
+@keyframes ncua-btn-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.ncua-btn__spinner {
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  animation: ncua-btn-spinner-rotate 1s linear infinite;
+  flex-shrink: 0;
+}
+
+.ncua-btn--xxs .ncua-btn__spinner {
+  width: 12px;
+  height: 12px;
+  border-width: 1.5px;
+}
+
+.ncua-btn--xs .ncua-btn__spinner {
+  width: 14px;
+  height: 14px;
+  border-width: 1.5px;
+}
+
+.ncua-btn--sm .ncua-btn__spinner {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.ncua-btn--md .ncua-btn__spinner {
+  width: 20px;
+  height: 20px;
+  border-width: 2px;
+}
+
+.ncua-btn--primary .ncua-btn__spinner {
+  border-color: var(--primary-red-200);
+  border-top-color: var(--primary-red-400);
+}
+
+.ncua-btn--destructive .ncua-btn__spinner {
+  border-color: var(--primary-red-200);
+  border-top-color: var(--primary-red-400);
+}
+
+.ncua-btn--secondary .ncua-btn__spinner {
+  border-color: var(--gray-100);
+  border-top-color: var(--gray-500);
+}
+
+.ncua-btn--secondary-gray .ncua-btn__spinner {
+  border-color: var(--gray-100);
+  border-top-color: var(--gray-500);
+}
+
+.ncua-btn.is-loading {
+  pointer-events: none;
+}
+
 .has-underline {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
 
+.ncua-button-close-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-400);
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: transparent;
+}
+.ncua-button-close-x:hover {
+  background-color: var(--gray-50);
+  color: var(--gray-500);
+}
+.ncua-button-close-x:focus {
+  background-color: var(--gray-50);
+}
+.ncua-button-close-x--xs {
+  width: 28px;
+  height: 28px;
+}
+.ncua-button-close-x--sm {
+  width: 36px;
+  height: 36px;
+}
+.ncua-button-close-x--md {
+  width: 40px;
+  height: 40px;
+}
+.ncua-button-close-x--lg {
+  width: 44px;
+  height: 44px;
+}
+.ncua-button-close-x--dark {
+  color: var(--gray-100);
+}
+.ncua-button-close-x--dark:hover {
+  color: var(--base-white);
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.ncua-button-close-x--dark:focus {
+  color: var(--gray-100);
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.ncua-button-stepper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 10px;
+  cursor: pointer;
+  background-color: var(--gray-100);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 6px 4px;
+  border-radius: 4px 4px 1px 1px;
+}
+.ncua-button-stepper:hover:not(:disabled), .ncua-button-stepper:focus:not(:disabled) {
+  background-color: var(--gray-200);
+}
+.ncua-button-stepper:disabled {
+  background-color: var(--gray-100);
+}
+.ncua-button-stepper--xs {
+  width: 20px;
+  height: 10px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
+  background-size: 6px 4px;
+}
+.ncua-button-stepper--xs:hover:not(:disabled), .ncua-button-stepper--xs:focus:not(:disabled) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23171818'/%3E%3C/svg%3E");
+}
+.ncua-input:focus-within .ncua-button-stepper--xs {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%232f2f30'/%3E%3C/svg%3E");
+}
+.ncua-input.is-disabled .ncua-button-stepper--xs, .ncua-button-stepper--xs:disabled {
+  cursor: not-allowed;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23a4a5a8'/%3E%3C/svg%3E");
+}
+.ncua-button-stepper--sm {
+  width: 22px;
+  height: 14px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
+  background-size: 8.2px 4.7px;
+}
+.ncua-button-stepper--sm:hover:not(:disabled), .ncua-button-stepper--sm:focus:not(:disabled) {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23171818'/%3E%3C/svg%3E");
+}
+.ncua-input:focus-within .ncua-button-stepper--sm {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%232f2f30'/%3E%3C/svg%3E");
+}
+.ncua-input.is-disabled .ncua-button-stepper--sm, .ncua-button-stepper--sm:disabled {
+  cursor: not-allowed;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23a4a5a8'/%3E%3C/svg%3E");
+}
+.ncua-button-stepper--down {
+  transform: rotate(180deg);
+}
+
 .ncua-button-group {
   display: inline-flex;
   overflow: hidden;
@@ -611,6 +782,12 @@ button {
   padding: 10px;
 }
 
+.ncua-button-group.full-width {
+  width: 100%;
+}
+.ncua-button-group.full-width .ncua-button-group__item {
+  flex: 1;
+}
 :where(.ncua-button-group.has-border) {
   box-shadow: var(--shadow-xs);
 }
@@ -710,159 +887,59 @@ button {
   border-bottom-right-radius: 8px;
 }
 
-.ncua-button-close-x {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--gray-400);
-  border-radius: 8px;
-  cursor: pointer;
-  background-color: transparent;
-}
-.ncua-button-close-x:hover {
-  background-color: var(--gray-50);
-  color: var(--gray-500);
+.ncua-checkbox-input {
+  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23171818' stroke-width='1.6666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
+  --check-icon-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23d3d4d8' stroke-width='1.6666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
+  --indeterminate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6H9.5' stroke='%232f2f30' stroke-width='1.66666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
+  --indeterminate-icon-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6H9.5' stroke='%23d3d4d8' stroke-width='1.66666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
+  position: relative;
+  flex: none;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  background-color: var(--base-white);
+  border-radius: 4px;
 }
-.ncua-button-close-x:focus {
-  background-color: var(--gray-50);
+.ncua-checkbox-input :where(input) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--gray-200);
+  font: inherit;
+  border-radius: 4px;
 }
-.ncua-button-close-x--xs {
-  width: 28px;
-  height: 28px;
+.ncua-checkbox-input :where(input):focus {
+  border-color: var(--gray-400);
+  box-shadow: var(--focus-ring-4px-gray-100);
 }
-.ncua-button-close-x--sm {
-  width: 36px;
-  height: 36px;
+.ncua-checkbox-input :where(input):checked {
+  border-color: var(--gray-700);
+  background-color: var(--gray-50);
+  outline: none;
 }
-.ncua-button-close-x--md {
-  width: 40px;
-  height: 40px;
+.ncua-checkbox-input :where(input):disabled {
+  border-color: var(--gray-200);
+  background-color: var(--gray-100);
 }
-.ncua-button-close-x--lg {
-  width: 44px;
-  height: 44px;
+.ncua-checkbox-input.destructive :where(input) {
+  border-color: var(--primary-red-600);
 }
-.ncua-button-close-x--dark {
-  color: var(--gray-100);
+.ncua-checkbox-input.destructive :where(input):focus {
+  border-color: var(--primary-red-600);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
-.ncua-button-close-x--dark:hover {
-  color: var(--base-white);
-  background-color: rgba(255, 255, 255, 0.2);
-}
-.ncua-button-close-x--dark:focus {
-  color: var(--gray-100);
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.ncua-button-stepper {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 10px;
-  cursor: pointer;
-  background-color: var(--gray-100);
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 6px 4px;
-  border-radius: 4px 4px 1px 1px;
-}
-.ncua-button-stepper:hover:not(:disabled), .ncua-button-stepper:focus:not(:disabled) {
-  background-color: var(--gray-200);
-}
-.ncua-button-stepper:disabled {
-  background-color: var(--gray-100);
-}
-.ncua-button-stepper--xs {
-  width: 20px;
-  height: 10px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
-  background-size: 6px 4px;
-}
-.ncua-button-stepper--xs:hover:not(:disabled), .ncua-button-stepper--xs:focus:not(:disabled) {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23171818'/%3E%3C/svg%3E");
-}
-.ncua-input:focus-within .ncua-button-stepper--xs {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%232f2f30'/%3E%3C/svg%3E");
-}
-.ncua-input.is-disabled .ncua-button-stepper--xs, .ncua-button-stepper--xs:disabled {
-  cursor: not-allowed;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6px' height='4px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23a4a5a8'/%3E%3C/svg%3E");
-}
-.ncua-button-stepper--sm {
-  width: 22px;
-  height: 14px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23757678'/%3E%3C/svg%3E");
-  background-size: 8.2px 4.7px;
-}
-.ncua-button-stepper--sm:hover:not(:disabled), .ncua-button-stepper--sm:focus:not(:disabled) {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23171818'/%3E%3C/svg%3E");
-}
-.ncua-input:focus-within .ncua-button-stepper--sm {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%232f2f30'/%3E%3C/svg%3E");
-}
-.ncua-input.is-disabled .ncua-button-stepper--sm, .ncua-button-stepper--sm:disabled {
-  cursor: not-allowed;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.2px' height='4.7px' viewBox='0 0 7 4' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.14645 0.146447C3.34171 -0.0488155 3.65829 -0.0488155 3.85355 0.146447L6.85355 3.14645C7.04882 3.34171 7.04882 3.65829 6.85355 3.85355C6.65829 4.04882 6.34171 4.04882 6.14645 3.85355L3.5 1.20711L0.853553 3.85355C0.658291 4.04882 0.341709 4.04882 0.146447 3.85355C-0.0488155 3.65829 -0.0488155 3.34171 0.146447 3.14645L3.14645 0.146447Z' fill='%23a4a5a8'/%3E%3C/svg%3E");
-}
-.ncua-button-stepper--down {
-  transform: rotate(180deg);
-}
-
-.ncua-checkbox-input {
-  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23171818' stroke-width='1.6666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
-  --check-icon-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M10 3L4.5 8.5L2 6' stroke='%23d3d4d8' stroke-width='1.6666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
-  --indeterminate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6H9.5' stroke='%232f2f30' stroke-width='1.66666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
-  --indeterminate-icon-disabled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6H9.5' stroke='%23d3d4d8' stroke-width='1.66666' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E");
-  position: relative;
-  flex: none;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  line-height: 1;
-  background-color: var(--base-white);
-  border-radius: 4px;
-}
-.ncua-checkbox-input :where(input) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  margin: 0;
-  width: 100%;
-  height: 100%;
-  border: 1px solid var(--gray-200);
-  font: inherit;
-  border-radius: 4px;
-}
-.ncua-checkbox-input :where(input):focus {
-  border-color: var(--gray-400);
-  box-shadow: var(--focus-ring-4px-gray-100);
-}
-.ncua-checkbox-input :where(input):checked {
-  border-color: var(--gray-700);
-  background-color: var(--gray-50);
-  outline: none;
-}
-.ncua-checkbox-input :where(input):disabled {
-  border-color: var(--gray-200);
-  background-color: var(--gray-100);
-}
-.ncua-checkbox-input.destructive :where(input) {
-  border-color: var(--primary-red-600);
-}
-.ncua-checkbox-input.destructive :where(input):focus {
-  border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
-}
-.ncua-checkbox-input:hover {
-  border-color: var(--gray-600);
-  background-color: var(--gray-100);
-  border-radius: 4px;
+.ncua-checkbox-input:hover {
+  border-color: var(--gray-600);
+  background-color: var(--gray-100);
+  border-radius: 4px;
 }
 .ncua-checkbox-input:has(input:checked)::before, .ncua-checkbox-input.has-indeterminate::before {
   position: absolute;
@@ -1375,12 +1452,12 @@ button {
   line-height: var(--line-heights-sm);
   padding: 6px 12px;
 }
-.ncua-input__field:has(.ncua-input__stepper-button-group ~ .ncua-input__number) {
+.ncua-input__field:has(.ncua-input__stepper-button-group ~ input) {
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 2px;
 }
-.ncua-input__field:has(.ncua-input__number ~ .ncua-input__stepper-button-group) {
+.ncua-input__field:has(input ~ .ncua-input__stepper-button-group) {
   padding-top: 2px;
   padding-bottom: 2px;
   padding-right: 2px;
@@ -1531,11 +1608,14 @@ button {
 .ncua-input.full-width {
   width: 100%;
 }
-.ncua-input__number::-webkit-inner-spin-button, .ncua-input__number::-webkit-outer-spin-button {
+.ncua-input.full-width .ncua-input__content {
+  flex: 1;
+}
+.ncua-input__number input::-webkit-inner-spin-button, .ncua-input__number input::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-.ncua-input__number {
+.ncua-input__number input {
   -moz-appearance: textfield;
   appearance: textfield;
 }
@@ -1544,10 +1624,10 @@ button {
   flex-direction: column;
   gap: 2px;
 }
-.ncua-input__field--xs .ncua-input__stepper-button-group ~ .ncua-input__number {
+.ncua-input__field--xs .ncua-input__stepper-button-group ~ input {
   padding-left: 10px;
 }
-.ncua-input__field--sm .ncua-input__stepper-button-group ~ .ncua-input__number {
+.ncua-input__field--sm .ncua-input__stepper-button-group ~ input {
   padding-left: 12px;
 }
 .ncua-input__field--xs .ncua-input__icon-wrap + .ncua-input__stepper-button-group {
@@ -2671,26 +2751,26 @@ button {
 .ncua-tag__tooltip--top-left {
   bottom: 100%;
   right: 0;
-  margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-s);
 }
 .ncua-tag__tooltip--top-right {
   bottom: 100%;
   left: 0;
-  margin-bottom: var(--spacing-md);
+  margin-bottom: var(--spacing-s);
 }
 .ncua-tag__tooltip--bottom-left {
   top: 100%;
   right: 0;
-  margin-top: var(--spacing-md);
+  margin-top: var(--spacing-s);
 }
 .ncua-tag__tooltip--bottom-right {
   top: 100%;
   left: 0;
-  margin-top: var(--spacing-md);
+  margin-top: var(--spacing-s);
 }
 .ncua-tag__tooltip-content {
   display: block;
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-s) var(--spacing-lg);
   background-color: var(--base-white);
   color: var(--gray-500);
   font-size: var(--font-size-xxs);
@@ -2819,14 +2899,16 @@ button {
 .ncua-tooltip__bg--top {
   top: auto;
   bottom: calc(100% + 16px);
-  right: 50%;
-  transform: translateX(50%);
 }
 .ncua-tooltip__bg--top::after {
   top: 100%;
   border-block-end: 0;
   border-inline: 6px solid transparent;
 }
+.ncua-tooltip__bg--top {
+  right: 50%;
+  transform: translateX(50%);
+}
 .ncua-tooltip__bg--top::after {
   left: 50%;
   transform: translateX(-50%);
@@ -2834,64 +2916,74 @@ button {
 .ncua-tooltip__bg--top-left {
   top: auto;
   bottom: calc(100% + 16px);
-  left: -12px;
 }
 .ncua-tooltip__bg--top-left::after {
   top: 100%;
   border-block-end: 0;
   border-inline: 6px solid transparent;
 }
+.ncua-tooltip__bg--top-left {
+  left: -12px;
+}
 .ncua-tooltip__bg--top-left::after {
   left: 12px;
 }
 .ncua-tooltip__bg--top-right {
   top: auto;
   bottom: calc(100% + 16px);
-  right: -12px;
 }
 .ncua-tooltip__bg--top-right::after {
   top: 100%;
   border-block-end: 0;
   border-inline: 6px solid transparent;
 }
+.ncua-tooltip__bg--top-right {
+  right: -12px;
+}
 .ncua-tooltip__bg--top-right::after {
   right: 15px;
 }
 .ncua-tooltip__bg--bottom {
   top: calc(100% + 6px);
-  right: 50%;
-  transform: translateX(50%);
 }
 .ncua-tooltip__bg--bottom::after {
   bottom: 100%;
   border-block-start: 0;
   border-inline: 6px solid transparent;
 }
+.ncua-tooltip__bg--bottom {
+  right: 50%;
+  transform: translateX(50%);
+}
 .ncua-tooltip__bg--bottom::after {
   left: 50%;
   transform: translateX(-50%);
 }
 .ncua-tooltip__bg--bottom-left {
   top: calc(100% + 6px);
-  left: -12px;
 }
 .ncua-tooltip__bg--bottom-left::after {
   bottom: 100%;
   border-block-start: 0;
   border-inline: 6px solid transparent;
 }
+.ncua-tooltip__bg--bottom-left {
+  left: -12px;
+}
 .ncua-tooltip__bg--bottom-left::after {
   left: 12px;
 }
 .ncua-tooltip__bg--bottom-right {
   top: calc(100% + 6px);
-  right: -12px;
 }
 .ncua-tooltip__bg--bottom-right::after {
   bottom: 100%;
   border-block-start: 0;
   border-inline: 6px solid transparent;
 }
+.ncua-tooltip__bg--bottom-right {
+  right: -12px;
+}
 .ncua-tooltip__bg--bottom-right::after {
   right: 15px;
 }
@@ -3051,9 +3143,6 @@ button {
   font-size: var(--font-size-xxs);
   line-height: var(--line-heights-xxs);
 }
-.ncua-select--sm {
-  --icon-size: 16px;
-}
 .ncua-select--sm .ncua-select__content {
   height: var(--select-height-sm);
   border-radius: 6px;
@@ -3069,7 +3158,7 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
-.ncua-select--md {
+.ncua-select--sm {
   --icon-size: 16px;
 }
 .ncua-select--md .ncua-select__content {
@@ -3088,21 +3177,24 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
+.ncua-select--md {
+  --icon-size: 16px;
+}
 .ncua-select--simple .ncua-select__content {
   border: 0;
   background-color: transparent;
 }
-.ncua-select--simple .ncua-select--xs {
+.ncua-select--simple.ncua-select--xs {
   min-width: auto;
   height: var(--select-simple-height-xs);
   border-radius: 0;
 }
-.ncua-select--simple .ncua-select--sm {
+.ncua-select--simple.ncua-select--sm {
   min-width: auto;
   height: var(--select-simple-height-sm);
   border-radius: 0;
 }
-.ncua-select--simple .ncua-select--md {
+.ncua-select--simple.ncua-select--md {
   min-width: auto;
   height: var(--select-simple-height-md);
   border-radius: 0;
@@ -3143,8 +3235,6 @@ button {
   list-style: none;
   overflow-y: auto;
   overscroll-behavior: contain;
-  scrollbar-width: thin;
-  scrollbar-color: #eaecf0 transparent;
 }
 .ncua-select-dropdown__options::-webkit-scrollbar {
   width: 6px;
@@ -3160,6 +3250,10 @@ button {
 .ncua-select-dropdown__options::-webkit-scrollbar-thumb:hover {
   background: #d0d5dd;
 }
+.ncua-select-dropdown__options {
+  scrollbar-width: thin;
+  scrollbar-color: #eaecf0 transparent;
+}
 .ncua-select-dropdown__option {
   min-width: 84px;
   padding: 8px 26px 8px 12px;
@@ -3347,9 +3441,6 @@ button {
   font-size: var(--font-size-xxs);
   line-height: var(--line-heights-xxs);
 }
-.ncua-selectbox--sm {
-  --icon-size: 16px;
-}
 .ncua-selectbox--sm .ncua-selectbox__content {
   height: var(--select-height-sm);
   border-radius: 6px;
@@ -3365,9 +3456,11 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
+.ncua-selectbox--sm {
+  --icon-size: 16px;
+}
 .ncua-selectbox--md {
   min-width: 132px;
-  --icon-size: 16px;
 }
 .ncua-selectbox--md .ncua-selectbox__content {
   height: var(--select-height-md);
@@ -3384,6 +3477,9 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
+.ncua-selectbox--md {
+  --icon-size: 16px;
+}
 .ncua-selectbox--simple .ncua-selectbox__content {
   border: 0;
   background-color: transparent;
@@ -3989,13 +4085,15 @@ button {
   background: var(--base-white);
   box-shadow: var(--shadow-xs);
   color: var(--gray-700);
-  height: 100%;
   padding: 5px 10px;
   font-size: var(--font-size-xs);
 }
 .ncua-date-picker .flatpickr-wrapper:focus-within {
   border-color: var(--gray-400);
 }
+.ncua-date-picker .flatpickr-wrapper {
+  height: 100%;
+}
 .ncua-date-picker__input {
   width: 100%;
   height: 100%;
@@ -4363,6 +4461,28 @@ button {
   border-block-start-width: 0;
 }
 
+.ncua-date-picker--portal {
+  border: 1px solid var(--gray-200);
+  border-radius: 6px;
+  font-weight: 400;
+  background: var(--base-white);
+  box-shadow: var(--shadow-xs);
+  color: var(--gray-700);
+  padding: 5px 10px;
+  font-size: var(--font-size-xs);
+}
+.ncua-date-picker--portal:focus-within {
+  border-color: var(--gray-400);
+}
+.ncua-date-picker--portal .flatpickr-calendar.arrowTop {
+  margin-top: 9px;
+  margin-inline-start: -10px;
+}
+.ncua-date-picker--portal .flatpickr-calendar.arrowBottom {
+  margin-top: -34px;
+  margin-inline-start: -10px;
+}
+
 .ncua-range-date-picker {
   display: inline-flex;
   align-items: center;
@@ -4378,6 +4498,26 @@ button {
   margin-inline-end: 4px;
 }
 
+.ncua-carousel-arrow {
+  display: inline-block;
+  border-radius: 999px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.ncua-carousel-arrow__icon {
+  display: block;
+}
+.ncua-carousel-arrow--line {
+  outline: 1px solid var(--gray-200);
+}
+.ncua-carousel-arrow--md {
+  padding: 8px;
+}
+.ncua-carousel-arrow--md .ncua-carousel-arrow__icon {
+  width: 16px;
+  height: 16px;
+}
+
 .ncua-carousel-number-group {
   display: inline-flex;
   align-items: center;
@@ -4413,26 +4553,6 @@ button {
   padding: 2px 8px;
 }
 
-.ncua-carousel-arrow {
-  display: inline-block;
-  border-radius: 999px;
-  background-color: #ffffff;
-  cursor: pointer;
-}
-.ncua-carousel-arrow__icon {
-  display: block;
-}
-.ncua-carousel-arrow--line {
-  outline: 1px solid var(--gray-200);
-}
-.ncua-carousel-arrow--md {
-  padding: 8px;
-}
-.ncua-carousel-arrow--md .ncua-carousel-arrow__icon {
-  width: 16px;
-  height: 16px;
-}
-
 .ncua-breadcrumb {
   display: flex;
   align-items: center;
@@ -4839,11 +4959,13 @@ button {
   padding: 5px 12px;
   height: 34px;
   font-size: var(--font-size-xs);
-  justify-content: center;
 }
 .ncua-horizontal-tab .ncua-tab-button:hover, .ncua-horizontal-tab .ncua-tab-button.is-active {
   color: var(--gray-700);
 }
+.ncua-horizontal-tab .ncua-tab-button {
+  justify-content: center;
+}
 .ncua-horizontal-tab--sm .ncua-tab-button {
   padding: 5px 12px;
   height: 34px;
@@ -4868,16 +4990,16 @@ button {
 .ncua-horizontal-tab--lg.ncua-horizontal-tab--button-white .ncua-tab-button {
   height: 40px;
 }
-.ncua-horizontal-tab--fullWidth {
+.ncua-horizontal-tab.full-width {
   width: 100%;
 }
-.ncua-horizontal-tab--fullWidth .ncua-horizontal-tab__item {
+.ncua-horizontal-tab.full-width .ncua-horizontal-tab__item {
   width: 100% !important;
 }
-.ncua-horizontal-tab--fullWidth .swiper-wrapper {
+.ncua-horizontal-tab.full-width .swiper-wrapper {
   width: auto;
 }
-.ncua-horizontal-tab--fullWidth .swiper-slide {
+.ncua-horizontal-tab.full-width .swiper-slide {
   flex-shrink: 1;
 }
 .ncua-horizontal-tab--underline::after, .ncua-horizontal-tab--underline-fill::after {
@@ -4950,7 +5072,6 @@ button {
   background-color: var(--gray-50);
   border: 1px solid var(--gray-100);
   border-radius: 8px;
-  display: inline-block;
 }
 .ncua-horizontal-tab--button-white .ncua-tab-button {
   background-color: var(--gray-50);
@@ -4965,6 +5086,9 @@ button {
   outline: none;
   box-shadow: var(--shadow-sm);
 }
+.ncua-horizontal-tab--button-white {
+  display: inline-block;
+}
 .ncua-horizontal-tab--button-white .swiper-slide {
   padding: 3px 0;
 }
@@ -5028,11 +5152,13 @@ button {
   padding: 5px 12px;
   height: 34px;
   font-size: var(--font-size-xs);
-  justify-content: flex-start;
 }
 .ncua-vertical-tab .ncua-tab-button:hover, .ncua-vertical-tab .ncua-tab-button.is-active {
   color: var(--gray-700);
 }
+.ncua-vertical-tab .ncua-tab-button {
+  justify-content: flex-start;
+}
 .ncua-vertical-tab--button-primary .ncua-tab-button:hover, .ncua-vertical-tab--button-primary .ncua-tab-button.is-active {
   background-color: var(--gray-50);
 }
@@ -5044,7 +5170,6 @@ button {
   background-color: var(--gray-50);
   border: 1px solid var(--gray-100);
   border-radius: 8px;
-  padding: 4px;
 }
 .ncua-vertical-tab--button-white .ncua-tab-button {
   background-color: var(--gray-50);
@@ -5059,6 +5184,9 @@ button {
   outline: none;
   box-shadow: var(--shadow-sm);
 }
+.ncua-vertical-tab--button-white {
+  padding: 4px;
+}
 .ncua-vertical-tab--line-vertical .ncua-tab-button {
   border-radius: 0;
 }
@@ -5438,6 +5566,426 @@ button {
   gap: 16px;
 }
 
+.ncua-table-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+
+.ncua-table {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  background: var(--base-white);
+  border: 1px solid var(--gray-100);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-xs);
+  overflow: hidden;
+}
+.ncua-table__scroll-container {
+  width: 100%;
+  overflow-y: auto;
+}
+.ncua-table__scroll-container::-webkit-scrollbar {
+  width: 16px;
+}
+.ncua-table__scroll-container::-webkit-scrollbar-track {
+  background: transparent;
+  padding: 4px;
+  margin-top: 40px;
+}
+.ncua-table__scroll-container::-webkit-scrollbar-thumb {
+  background: var(--gray-200);
+  border-radius: 8px;
+  border: 5px solid transparent;
+  background-clip: padding-box;
+  min-height: 40px;
+}
+.ncua-table__table {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+  margin-bottom: 0;
+  overflow: visible;
+}
+.ncua-table__header {
+  background: var(--gray-100);
+}
+.ncua-table__header tr {
+  border-bottom: none;
+}
+.ncua-table__header-cell {
+  padding: 0 16px;
+  min-height: 40px;
+  height: 40px;
+  background: var(--gray-100);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-5);
+  line-height: var(--line-heights-xs);
+  color: var(--gray-500);
+  text-align: center;
+  vertical-align: middle;
+  border-bottom: 1px solid var(--gray-200);
+  border-right: 1px solid var(--gray-200);
+  white-space: nowrap;
+  position: relative;
+}
+.ncua-table__header-cell:last-child {
+  border-right: none;
+}
+.ncua-table__header-cell--sortable {
+  cursor: pointer;
+  user-select: none;
+}
+.ncua-table__header-cell-inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+}
+.ncua-table__header-cell-text {
+  white-space: nowrap;
+}
+.ncua-table .ncua-checkbox-input::before {
+  pointer-events: none;
+}
+.ncua-table__sort-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+}
+.ncua-table__sort-icon svg {
+  display: block;
+  width: 16px;
+  height: 16px;
+  color: var(--gray-400);
+}
+.ncua-table__header-cell[aria-sort=ascending] .ncua-table__sort-icon svg, .ncua-table__header-cell[aria-sort=descending] .ncua-table__sort-icon svg {
+  transform: scale(0.85);
+}
+.ncua-table__body {
+  background: var(--base-white);
+}
+.ncua-table__row {
+  min-height: 48px;
+  background: var(--base-white);
+  transition: background-color 0.15s ease;
+}
+.ncua-table__row:nth-child(2n), .ncua-table__row:nth-child(2n+1) {
+  background-color: var(--base-white);
+}
+.ncua-table__row td {
+  border-bottom: 1px solid var(--gray-100);
+}
+.ncua-table__row:last-child td {
+  border-bottom: none;
+}
+.ncua-table__row--selected {
+  background: var(--gray-50);
+}
+.ncua-table__row--selected td:first-child {
+  position: relative;
+}
+.ncua-table__row--selected td:first-child::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: var(--base-black);
+  z-index: 1;
+}
+.ncua-table__row--warning {
+  background: var(--warning-50, #fffaeb);
+}
+.ncua-table__row--warning td {
+  border-bottom-color: var(--warning-200, #fedf89);
+}
+.ncua-table__row--error {
+  background: var(--error-50, #fef3f2);
+}
+.ncua-table__row--error td {
+  border-bottom-color: var(--error-200, #fecdca);
+}
+.ncua-table--hoverable .ncua-table__row:not(.ncua-table__row--selected):not(.ncua-table__row--warning):not(.ncua-table__row--error):hover {
+  background: var(--gray-50);
+}
+.ncua-table--hoverable .ncua-table__row--selected:hover {
+  background: var(--gray-100);
+}
+.ncua-table__cell {
+  padding: 10px 8px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-4);
+  line-height: var(--line-heights-xs);
+  color: var(--gray-700);
+  text-align: center;
+  vertical-align: middle;
+  border-right: 1px solid var(--gray-100);
+  min-height: 48px;
+  word-break: break-word;
+}
+.ncua-table__cell:last-child {
+  border-right: none;
+}
+.ncua-table__checkbox-cell {
+  width: 56px;
+  min-width: 56px;
+  max-width: 56px;
+  text-align: center;
+  vertical-align: middle;
+  border-right: 1px solid var(--gray-100);
+}
+.ncua-table__checkbox-cell--header {
+  padding: 0 16px;
+  background: var(--gray-100);
+  border-right-color: var(--gray-200);
+  border-bottom: 1px solid var(--gray-200);
+}
+.ncua-table__checkbox-cell--body {
+  padding: 12px 16px;
+  height: 48px;
+}
+.ncua-table__footer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--gray-50);
+  border-top: 1px solid var(--gray-200);
+  box-shadow: var(--shadow-xs);
+  padding: 8px 24px;
+  gap: 8px;
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+}
+.ncua-table__footer-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+.ncua-table__pagination {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding: 12px 0;
+  gap: 16px;
+}
+.ncua-table__empty {
+  text-align: center;
+  padding: 40px 16px;
+  color: var(--gray-500);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-table--selectable {
+  border-left: none;
+}
+.ncua-table--selectable .ncua-table__header-cell:first-child,
+.ncua-table--selectable .ncua-table__body .ncua-table__row:not(.ncua-table__row--selected) td:first-child {
+  box-shadow: inset 1px 0 0 0 var(--gray-100);
+}
+.ncua-table--selectable {
+  background: var(--gray-50);
+  padding-bottom: 8px;
+}
+.ncua-table--selectable .ncua-table__table {
+  background: var(--base-white);
+}
+.ncua-table--selectable .ncua-table__scroll-container,
+.ncua-table--selectable > .ncua-table__table {
+  box-shadow: 0 1px 0 0 var(--gray-200);
+}
+.ncua-table--selectable:has(.ncua-table__footer) {
+  padding-bottom: 0;
+  background: var(--base-white);
+}
+.ncua-table--selectable:has(.ncua-table__footer) .ncua-table__scroll-container,
+.ncua-table--selectable:has(.ncua-table__footer) > .ncua-table__table {
+  box-shadow: none;
+}
+.ncua-table--in-data-grid.ncua-table--selectable .ncua-table__header-cell:first-child,
+.ncua-table--in-data-grid.ncua-table--selectable .ncua-table__body .ncua-table__row:not(.ncua-table__row--selected) td:first-child {
+  box-shadow: none;
+  border-left: none;
+}
+.ncua-table--in-data-grid.ncua-table--selectable.ncua-table--fixed-header .ncua-table__header-cell:first-child {
+  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200);
+}
+.ncua-table--fixed-header {
+  position: relative;
+}
+.ncua-table--fixed-header::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 16px;
+  height: 40px;
+  background: var(--gray-100);
+  border-bottom: 1px solid var(--gray-200);
+  z-index: 11;
+  pointer-events: none;
+}
+.ncua-table--fixed-header .ncua-table__header-cell {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  border-bottom: none;
+  border-right: none;
+  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200);
+}
+.ncua-table--fixed-header .ncua-table__header-cell:last-child {
+  border-right: none;
+  box-shadow: inset 0 -1px 0 0 var(--gray-200);
+}
+.ncua-table--fixed-header.ncua-table--selectable .ncua-table__header-cell:first-child {
+  box-shadow: inset 0 -1px 0 0 var(--gray-200), inset -1px 0 0 0 var(--gray-200), inset 1px 0 0 0 var(--gray-100);
+}
+.ncua-table--vertical .ncua-table__row td:first-child,
+.ncua-table--vertical .ncua-table__row th:first-child {
+  width: 240px;
+  min-width: 240px;
+  max-width: 240px;
+  padding: 10px 16px;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-5);
+  line-height: var(--line-heights-sm);
+  color: var(--gray-700);
+  text-align: left;
+  background: var(--gray-50);
+  border-right: 1px solid var(--gray-100);
+}
+.ncua-table--vertical .ncua-table__row td:last-child,
+.ncua-table--vertical .ncua-table__row th:last-child {
+  padding: 10px 16px;
+  text-align: left;
+  font-weight: var(--font-weights-commerce-sans-4);
+}
+.ncua-table--vertical .ncua-table__required {
+  color: var(--primary-red-500, #ec1d31);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-5);
+  margin-right: 2px;
+}
+
+.ncua-data-grid {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.ncua-data-grid__search-filter {
+  border: 1px solid var(--gray-200);
+  border-radius: var(--border-radius-md);
+  overflow: hidden;
+  margin-bottom: var(--spacing-m);
+}
+.ncua-data-grid__summary {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  padding: 0 0 var(--spacing-lg) var(--spacing-lg);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  color: var(--gray-500);
+}
+.ncua-data-grid__table-wrapper {
+  border: 1px solid var(--gray-100);
+  border-radius: var(--border-radius-md);
+  box-shadow: var(--shadow-xs);
+}
+.ncua-data-grid__filter-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-s) 24px;
+  background-color: var(--base-white);
+  border-bottom: 1px solid var(--gray-200);
+}
+.ncua-data-grid__action-bar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+  padding: var(--spacing-s) 24px;
+  background-color: var(--gray-50);
+  position: relative;
+  z-index: 2;
+}
+.ncua-data-grid__action-bar:empty {
+  padding: var(--spacing-xs) 0;
+}
+.ncua-data-grid__action-bar--top {
+  border-bottom: 1px solid var(--gray-200);
+}
+.ncua-data-grid__action-bar--top:first-child {
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+}
+.ncua-data-grid__action-bar--bottom {
+  border-top: 1px solid var(--gray-200);
+}
+.ncua-data-grid__action-bar--bottom:last-child {
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+}
+.ncua-data-grid__action-bar--left {
+  justify-content: flex-start;
+}
+.ncua-data-grid__action-bar--right {
+  justify-content: flex-end;
+}
+.ncua-data-grid__action-bar--space-between {
+  justify-content: space-between;
+}
+.ncua-data-grid__table {
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  overflow: hidden;
+}
+.ncua-data-grid__table:first-child {
+  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
+}
+.ncua-data-grid__table:last-child {
+  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
+}
+.ncua-data-grid__table:first-child:last-child {
+  border-radius: var(--border-radius-md);
+}
+.ncua-data-grid__table .ncua-table-wrapper {
+  border: none;
+  box-shadow: none;
+  border-radius: 0;
+}
+.ncua-data-grid__table .ncua-table {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.ncua-data-grid__table .ncua-table--selectable {
+  padding-bottom: 0;
+  background: var(--base-white);
+}
+.ncua-data-grid__table .ncua-table--selectable .ncua-table__scroll-container,
+.ncua-data-grid__table .ncua-table--selectable > .ncua-table__table {
+  box-shadow: none;
+}
+.ncua-data-grid__pagination {
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-lg) 0;
+}
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;
@@ -6345,7 +6893,7 @@ span.flatpickr-weekday {
   }
 }
 /**
- * Swiper 11.2.6
+ * Swiper 11.2.10
  * Most modern mobile touch slider and framework with hardware accelerated transitions
  * https://swiperjs.com
  *
@@ -6353,7 +6901,7 @@ span.flatpickr-weekday {
  *
  * Released under the MIT License
  *
- * Released on: March 19, 2025
+ * Released on: June 28, 2025
  */
 /* FONT_START */
 @font-face {