@ncds/ui-admin 1.7.0 → 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);
@@ -594,6 +601,106 @@ button {
   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;
@@ -675,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);
 }
@@ -774,106 +887,6 @@ 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-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-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");
@@ -1439,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;
@@ -1595,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;
 }
@@ -1608,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 {
@@ -2735,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);
@@ -3168,17 +3184,17 @@ button {
   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;
@@ -4069,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%;
@@ -4443,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;
@@ -4458,13 +4498,33 @@ button {
   margin-inline-end: 4px;
 }
 
-.ncua-carousel-number-group {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-.ncua-carousel-number-group--light .ncua-carousel-number-group__number {
-  color: var(--gray-600);
+.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;
+  gap: 2px;
+}
+.ncua-carousel-number-group--light .ncua-carousel-number-group__number {
+  color: var(--gray-600);
 }
 .ncua-carousel-number-group--light .ncua-carousel-number-group__total {
   color: var(--gray-300);
@@ -4493,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;
@@ -4950,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 {
@@ -5526,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;