@ncds/ui-admin 1.3.0 → 1.5.0

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

@@ -51,6 +51,14 @@
   --orange-500: #e4501e;
   --orange-600: #b93815;
   --orange-700: #772917;
+  --violet-50: #fbfaff;
+  --violet-100: #ece9fe;
+  --violet-200: #ddd6fe;
+  --violet-300: #c3b5fd;
+  --violet-400: #a48afb;
+  --violet-500: #6927da;
+  --violet-600: #5720b7;
+  --violet-700: #491c96;
   --focus-ring-4px-primary-100: 0px 0px 0px 3px #ffeaee;
   --focus-ring-4px-gray-100: 0px 0px 0px 3px #f2f4f7;
   --focus-ring-4px-error-100: 0px 0px 0px 3px #fee4e2;
@@ -69,7 +77,21 @@
   --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;
-  --font-families-commerce-sans: Commerce Sans;
+  --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;
   --line-heights-display-xl: 76px;
   --line-heights-display-lg: 60px;
   --line-heights-display-md: 46px;
@@ -283,25 +305,25 @@ button {
 }
 .ncua-btn--secondary {
   box-shadow: var(--shadow-xs);
-  background-color: var(--primary-red-50);
-  border: 1px solid var(--primary-red-200);
-  color: var(--primary-red-600);
+  background-color: var(--gray-500);
+  border: 1px solid var(--gray-600);
+  color: var(--base-white);
 }
 .ncua-btn--secondary:hover:not([disabled], .is-disable) {
-  background-color: var(--primary-red-100);
-  border: 1px solid var(--primary-red-300);
-  color: var(--primary-red-700);
+  background-color: var(--gray-600);
+  border: 1px solid var(--gray-700);
+  color: var(--base-white);
 }
 .ncua-btn--secondary:focus:not([disabled], .is-disabled) {
-  background-color: var(--primary-red-50);
-  border: 1px solid var(--primary-red-200);
-  color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-primary-color-100);
+  background-color: var(--gray-500);
+  border: 1px solid var(--gray-600);
+  color: var(--base-white);
+  box-shadow: var(--shadow-xs-focused-3px-gray-100);
 }
 .ncua-btn--secondary:disabled, .ncua-btn--secondary.is-disable {
-  background-color: var(--primary-red-50);
-  border: 1px solid var(--primary-red-100);
-  color: var(--primary-red-300);
+  background-color: var(--gray-100);
+  border: 1px solid var(--gray-200);
+  color: var(--gray-200);
   cursor: default;
 }
 .ncua-btn--secondary-gray {
@@ -331,6 +353,7 @@ button {
   color: var(--blue-500);
 }
 .ncua-btn--tertiary:hover:not([disabled], .is-disable) {
+  background-color: var(--blue-100);
   color: var(--blue-600);
 }
 .ncua-btn--tertiary:disabled, .ncua-btn--tertiary.is-disable {
@@ -341,53 +364,64 @@ button {
   color: var(--gray-700);
 }
 .ncua-btn--tertiary-gray:hover:not([disabled], .is-disable) {
+  background-color: var(--gray-100);
   color: var(--gray-700);
 }
 .ncua-btn--tertiary-gray:disabled, .ncua-btn--tertiary-gray.is-disable {
   color: var(--gray-200);
   cursor: default;
 }
-.ncua-btn--link {
+.ncua-btn--text {
   color: var(--blue-500);
 }
-.ncua-btn--link:hover:not([disabled], .is-disable) {
+.ncua-btn--text:hover:not([disabled], .is-disable) {
   color: var(--blue-600);
 }
-.ncua-btn--link:disabled, .ncua-btn--link.is-disable {
+.ncua-btn--text:disabled, .ncua-btn--text.is-disable {
   color: var(--gray-200);
   cursor: default;
 }
-.ncua-btn--link-gray {
+.ncua-btn--text-gray {
   color: var(--gray-500);
 }
-.ncua-btn--link-gray:hover:not([disabled], .is-disable) {
+.ncua-btn--text-gray:hover:not([disabled], .is-disable) {
   color: var(--gray-700);
 }
-.ncua-btn--link-gray:disabled, .ncua-btn--link-gray.is-disable {
+.ncua-btn--text-gray:disabled, .ncua-btn--text-gray.is-disable {
+  color: var(--gray-200);
+  cursor: default;
+}
+.ncua-btn--text-red {
+  color: var(--primary-red-600);
+}
+.ncua-btn--text-red:hover:not([disabled], .is-disable) {
+  color: var(--primary-red-700);
+}
+.ncua-btn--text-red:disabled, .ncua-btn--text-red.is-disable {
   color: var(--gray-200);
   cursor: default;
 }
 .ncua-btn--destructive {
   box-shadow: var(--shadow-xs);
-  background-color: var(--primary-red-500);
+  background-color: var(--base-white);
   border: 1px solid var(--primary-red-600);
-  color: var(--base-white);
+  color: var(--primary-red-600);
 }
 .ncua-btn--destructive:hover:not([disabled], .is-disable) {
-  background-color: var(--primary-red-700);
+  background-color: var(--primary-red-100);
   border: 1px solid var(--primary-red-700);
-  color: var(--base-white);
+  color: var(--primary-red-700);
 }
 .ncua-btn--destructive:focus:not([disabled], .is-disabled) {
-  background-color: var(--primary-red-500);
+  background-color: var(--base-white);
   border: 1px solid var(--primary-red-600);
-  color: var(--base-white);
-  box-shadow: var(--shadow-xs-focused-4px-primary-color-100);
+  color: var(--primary-red-600);
+  box-shadow: var(--shadow-xs-focused-3px-error-100);
 }
 .ncua-btn--destructive:disabled, .ncua-btn--destructive.is-disable {
-  background-color: var(--primary-red-200);
-  border: 1px solid var(--primary-red-300);
-  color: var(--primary-red-300);
+  background-color: var(--base-white);
+  border: 1px solid var(--primary-red-200);
+  color: var(--primary-red-200);
   cursor: default;
 }
 .ncua-btn--xxs {
@@ -463,7 +497,7 @@ button {
   z-index: 0;
 }
 
-[class*=ncua-btn--link] {
+[class*=ncua-btn--text] {
   padding: 0;
   height: auto !important;
   background-color: transparent !important;
@@ -518,25 +552,13 @@ button {
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-button-group__item[href] {
-  text-decoration: none;
-}
-.ncua-button-group__item[href]:hover {
-  text-decoration: none;
-}
-.ncua-button-group__item:first-child {
+:where(.ncua-button-group__item):first-child {
   padding-left: 0;
 }
-.ncua-button-group__item:last-child {
+:where(.ncua-button-group__item):last-child {
   padding-right: 0;
 }
-.ncua-button-group__item.is-current, .ncua-button-group__item:hover, .ncua-button-group__item:focus {
-  color: var(--gray-600);
-}
-.ncua-button-group__item:disabled, .ncua-button-group__item:disabled:hover, .ncua-button-group__item:disabled:focus, .ncua-button-group__item.is-disabled, .ncua-button-group__item.is-disabled:hover, .ncua-button-group__item.is-disabled:focus {
-  color: var(--gray-200);
-}
-.ncua-button-group__item + .ncua-button-group__item::after {
+:where(.ncua-button-group__item + .ncua-button-group__item)::after {
   content: "";
   position: absolute;
   left: 0;
@@ -546,92 +568,146 @@ button {
   height: 12px;
   background-color: var(--gray-200);
 }
-.ncua-button-group__item:where(.is-only-icon) {
-  padding: 6px;
+:where(.ncua-button-group__item).is-current, :where(.ncua-button-group__item):hover {
+  color: var(--gray-600);
 }
-:where(.ncua-button-group.has-border) {
-  border-radius: 6px;
+:is(:where(.ncua-button-group__item):disabled, :where(.ncua-button-group__item:disabled):hover, :where(.ncua-button-group__item:disabled):focus) {
+  color: var(--gray-200);
+  background-color: var(--gray-50);
 }
-
-.ncua-button-group--xxs .ncua-button-group__item {
+:where(.ncua-button-group--xxs) .ncua-button-group__item {
   padding: 4px 12px;
   font-size: var(--font-size-xxxs);
   line-height: var(--line-heights-xxxs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-:where(.ncua-button-group--xxs .ncua-button-group__item.is-current, .ncua-button-group--xxs .ncua-button-group__item:hover, .ncua-button-group--xxs .ncua-button-group__item:focus) {
-  font-weight: var(--font-weights-commerce-sans-1);
-}
-.ncua-button-group--xxs .ncua-button-group__item:where(.is-only-icon) {
-  padding: 6px;
-}
-:where(.ncua-button-group--xxs.has-border) {
-  border-radius: 4px;
-}
 
-.ncua-button-group--xs .ncua-button-group__item {
+:where(.ncua-button-group--xs) .ncua-button-group__item {
   padding: 4px 16px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-:where(.ncua-button-group--xs .ncua-button-group__item.is-current, .ncua-button-group--xs .ncua-button-group__item:hover, .ncua-button-group--xs .ncua-button-group__item:focus) {
-  font-weight: var(--font-weights-commerce-sans-1);
-}
-.ncua-button-group--xs .ncua-button-group__item:where(.is-only-icon) {
-  padding: 6px;
-}
-:where(.ncua-button-group--xs.has-border) {
-  border-radius: 6px;
-}
 
-.ncua-button-group--sm .ncua-button-group__item {
+:where(.ncua-button-group--sm) .ncua-button-group__item {
   padding: 6px 16px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-:where(.ncua-button-group--sm .ncua-button-group__item.is-current, .ncua-button-group--sm .ncua-button-group__item:hover, .ncua-button-group--sm .ncua-button-group__item:focus) {
-  font-weight: var(--font-weights-commerce-sans-1);
-}
-.ncua-button-group--sm .ncua-button-group__item:where(.is-only-icon) {
-  padding: 10px;
-}
-:where(.ncua-button-group--sm.has-border) {
-  border-radius: 6px;
-}
 
-.ncua-button-group--md .ncua-button-group__item {
+:where(.ncua-button-group--md) .ncua-button-group__item {
   padding: 8px 16px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
 }
-:where(.ncua-button-group--md .ncua-button-group__item.is-current, .ncua-button-group--md .ncua-button-group__item:hover, .ncua-button-group--md .ncua-button-group__item:focus) {
-  font-weight: var(--font-weights-commerce-sans-1);
+
+:where(.ncua-button-group--xxs:has(.is-only-icon), .ncua-button-group--xs:has(.is-only-icon)) .ncua-button-group__item {
+  padding: 6px;
 }
-.ncua-button-group--md .ncua-button-group__item:where(.is-only-icon) {
+
+:where(.ncua-button-group--sm:has(.is-only-icon), .ncua-button-group--md:has(.is-only-icon)) .ncua-button-group__item {
   padding: 10px;
 }
-:where(.ncua-button-group--md.has-border) {
-  border-radius: 8px;
-}
 
 :where(.ncua-button-group.has-border) {
   box-shadow: var(--shadow-xs);
+}
+:where(.ncua-button-group.has-border) .ncua-button-group__item {
   border: 1px solid var(--gray-200);
 }
-:where(.ncua-button-group.has-border) .ncua-button-group__item + .ncua-button-group__item::after {
+:where(.ncua-button-group.has-border) .ncua-button-group__item svg {
+  display: block;
+}
+
+:where(.ncua-button-group.has-border .ncua-button-group__item + .ncua-button-group__item)::after {
   content: none;
 }
-:where(.ncua-button-group.has-border) .ncua-button-group__item.is-current, :where(.ncua-button-group.has-border) .ncua-button-group__item:focus, :where(.ncua-button-group.has-border) .ncua-button-group__item:hover {
-  background-color: var(--gray-50);
+
+:where(.ncua-button-group.has-border .ncua-button-group__item):not(:last-child) {
+  border-width: 1px 0 1px 1px;
 }
-:where(.ncua-button-group.has-border) .ncua-button-group__item:nth-child(n+2) {
-  border-left: 1px solid var(--gray-200);
+
+:where(.ncua-button-group.has-border .ncua-button-group__item):hover {
+  background: var(--gray-50);
 }
-:where(.ncua-button-group.has-border) .ncua-button-group__item svg {
-  display: block;
+
+:where(.ncua-button-group.has-border:has(.is-current)) .ncua-button-group__item {
+  background: var(--gray-50);
+}
+
+:where(.ncua-button-group.has-border:has(.is-current)) svg {
+  color: inherit;
+}
+
+:where(.ncua-button-group.has-border) .is-current {
+  background: var(--base-white);
+  border-color: var(--gray-300);
+}
+
+:where(.ncua-button-group.has-border .is-current) svg, :where(.ncua-button-group.has-border .ncua-button-group__item:hover) svg {
+  color: var(--icon-color);
+}
+
+:where(.ncua-button-group.has-border .is-current) + .ncua-button-group__item {
+  border-inline-start-color: var(--gray-300);
+}
+
+:where(.ncua-button-group.has-border:has(.is-current) .ncua-button-group__item):hover {
+  background: var(--base-white);
+}
+
+:where(.ncua-button-group--xxs.has-border) {
+  border-radius: 4px;
+}
+
+:where(.ncua-button-group--xxs.has-border .ncua-button-group__item):first-child {
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+:where(.ncua-button-group--xxs.has-border .ncua-button-group__item):last-child {
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+:where(.ncua-button-group--xs.has-border) {
+  border-radius: 6px;
+}
+
+:where(.ncua-button-group--xs.has-border .ncua-button-group__item):first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+:where(.ncua-button-group--xs.has-border .ncua-button-group__item):last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+:where(.ncua-button-group--sm.has-border) {
+  border-radius: 6px;
+}
+
+:where(.ncua-button-group--sm.has-border .ncua-button-group__item):first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+:where(.ncua-button-group--sm.has-border .ncua-button-group__item):last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+:where(.ncua-button-group--md.has-border) {
+  border-radius: 8px;
+}
+
+:where(.ncua-button-group--md.has-border .ncua-button-group__item):first-child {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+:where(.ncua-button-group--md.has-border .ncua-button-group__item):last-child {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
 }
 
 .ncua-button-close-x {
@@ -678,7 +754,67 @@ button {
   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;
@@ -728,22 +864,30 @@ button {
   background-color: var(--gray-100);
   border-radius: 4px;
 }
-.ncua-checkbox-input__ico {
+.ncua-checkbox-input:has(input:checked)::before, .ncua-checkbox-input.has-indeterminate::before {
   position: absolute;
-  top: 0;
-  left: 0;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  z-index: 2;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  content: "";
+  z-index: 5;
+  width: 12px;
+  height: 12px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: 100% 100%;
 }
-.ncua-checkbox-input :not(input:checked + .ncua-checkbox-input__ico) > svg {
-  display: none;
+.ncua-checkbox-input:has(input:checked)::before {
+  background-image: var(--check-icon);
 }
-.ncua-checkbox-input :disabled + .ncua-checkbox-input__ico {
-  border-radius: 4px;
+.ncua-checkbox-input:has(input:disabled:checked)::before {
+  background-image: var(--check-icon-disabled);
+}
+.ncua-checkbox-input.has-indeterminate::before {
+  background-image: var(--indeterminate-icon);
+}
+.ncua-checkbox-input.has-indeterminate:has(input:disabled)::before {
+  background-image: var(--indeterminate-icon-disabled);
 }
 
 .ncua-checkbox-field {
@@ -1188,67 +1332,12 @@ button {
   color: var(--primary-red-600);
 }
 
-.ncua-file-input {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
-}
-.ncua-file-input__input-container {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-}
-.ncua-file-input__label {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-.ncua-file-input__file-tags {
-  display: flex;
-  padding: 12px 8px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
-  align-self: stretch;
-  background: var(--gray-50);
-}
-.ncua-file-input__hint-list {
-  margin: 0;
-  list-style: disc;
-  color: var(--gray-400);
-}
-.ncua-file-input--xs {
-  font-size: var(--font-size-xxs);
-  line-height: var(--line-heights-xxs);
-}
-.ncua-file-input--sm {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-heights-xs);
-}
-.ncua-file-input--xs .ncua-file-input__input-container {
-  gap: 4px;
-}
-.ncua-file-input--sm .ncua-file-input__input-container {
-  gap: 6px;
-}
-.ncua-file-input--xs .ncua-file-input__hint-list {
-  font-size: var(--font-size-xxxs);
-  line-height: var(--line-heights-xxxs);
-}
-.ncua-file-input--md .ncua-file-input__hint-list {
-  font-size: inherit;
-  line-height: inherit;
-}
-
 .ncua-input {
   display: inline-flex;
   flex-direction: column;
   line-height: normal;
   vertical-align: top;
   gap: 4px;
-  font-size: var(--font-size-xxs);
 }
 .ncua-input > *:last-child {
   margin-bottom: 0;
@@ -1266,6 +1355,7 @@ button {
 .ncua-input__content {
   box-shadow: var(--shadow-xs);
   border-radius: 6px;
+  align-items: center;
 }
 .ncua-input:where(:not([class*=textarea])) .ncua-input__content {
   display: flex;
@@ -1283,6 +1373,16 @@ button {
 .ncua-input__field--sm {
   padding: 6px 12px;
 }
+.ncua-input__field:has(.ncua-input__stepper-button-group ~ .ncua-input__number) {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-left: 2px;
+}
+.ncua-input__field:has(.ncua-input__number ~ .ncua-input__stepper-button-group) {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  padding-right: 2px;
+}
 .ncua-input__field {
   position: relative;
   flex: 1;
@@ -1330,9 +1430,20 @@ button {
 .ncua-input textarea:focus {
   outline: none;
 }
+.ncua-input .ncua-input__content-wrap {
+  display: flex;
+  align-items: center;
+}
 .ncua-input .ncua-input__field {
   border-radius: 6px;
 }
+.ncua-input .ncua-input__field-text-count {
+  color: var(--gray-300);
+  padding-left: 8px;
+}
+.ncua-input .ncua-input__field-text-count-current {
+  color: var(--gray-400);
+}
 .ncua-input--xs {
   gap: 4px;
 }
@@ -1347,7 +1458,10 @@ button {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
 }
-.ncua-input--xs {
+.ncua-input {
+  font-size: var(--font-size-xxs);
+}
+.ncua-input--xs {
   font-size: var(--font-size-xxs);
 }
 .ncua-input--sm {
@@ -1367,6 +1481,7 @@ button {
 .ncua-input__clear {
   border-radius: 10px;
   background: var(--gray-100);
+  cursor: pointer;
 }
 .ncua-input__clear-icon {
   padding: 2px;
@@ -1400,16 +1515,6 @@ button {
 .ncua-input.is-disabled .ncua-input__field {
   overflow: hidden;
 }
-.ncua-input.is-disabled .ncua-input__field::after {
-  position: absolute;
-  top: 0;
-  left: 0;
-  content: "";
-  width: 100%;
-  height: 100%;
-  background: inherit;
-  opacity: 0.5;
-}
 .ncua-input.is-disabled input,
 .ncua-input.is-disabled textarea {
   color: var(--gray-300);
@@ -1424,6 +1529,31 @@ button {
 .ncua-input.full-width {
   width: 100%;
 }
+.ncua-input__number::-webkit-inner-spin-button, .ncua-input__number::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+.ncua-input__number {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+.ncua-input__stepper-button-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ncua-input__field--xs .ncua-input__stepper-button-group ~ .ncua-input__number {
+  padding-left: 10px;
+}
+.ncua-input__field--sm .ncua-input__stepper-button-group ~ .ncua-input__number {
+  padding-left: 12px;
+}
+.ncua-input__field--xs .ncua-input__icon-wrap + .ncua-input__stepper-button-group {
+  margin-left: 10px;
+}
+.ncua-input__field--sm .ncua-input__icon-wrap + .ncua-input__stepper-button-group {
+  margin-left: 12px;
+}
 
 .ncua-input__leading-text-wrap .ncua-input__leading-text {
   display: flex;
@@ -1456,10 +1586,6 @@ button {
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   padding: 4px 10px;
-  padding: 5px 10px;
-  font-size: var(--font-size-xs);
-  line-height: var(--line-heights-xs);
-  font-weight: var(--font-weights-commerce-sans-1);
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
   padding: 4px 10px;
@@ -1476,6 +1602,12 @@ button {
 .ncua-input__trailing-button .ncua-input__button:not(:disabled) {
   cursor: pointer;
 }
+.ncua-input__trailing-button .ncua-input__button {
+  padding: 5px 10px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
 .ncua-input__trailing-button .ncua-input__button--xs {
   padding: 5px 10px;
   font-size: var(--font-size-xs);
@@ -1500,9 +1632,33 @@ button {
   font-size: var(--font-size-xxs);
 }
 .ncua-input--textarea textarea {
+  resize: block;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
+  height: 100%;
+  word-wrap: break-word;
+  min-height: 120px;
+  padding: 12px;
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+  box-shadow: var(--shadow-xs);
+}
+.ncua-input--textarea textarea:disabled {
+  white-space: pre-wrap;
+  background-color: var(--gray-50);
+  border-color: var(--gray-200);
 }
+.ncua-input--textarea textarea:focus {
+  border-color: var(--gray-400);
+  box-shadow: var(--shadow-xs-focused-3px-gray-100);
+}
+.ncua-input--textarea.destructive textarea {
+  border-color: var(--primary-red-600);
+}
+.ncua-input--textarea.destructive textarea:focus {
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
+}
+
 .ncua-input--textarea--xs textarea {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
@@ -1517,24 +1673,6 @@ button {
 .ncua-input--textarea--sm {
   font-size: var(--font-size-xs);
 }
-.ncua-input--textarea .ncua-input__content {
-  flex-direction: column;
-  align-items: flex-start;
-  height: 126px;
-}
-.ncua-input--textarea .ncua-input__field {
-  padding: 12px;
-  height: 100%;
-  border-radius: 8px;
-}
-.ncua-input--textarea textarea {
-  height: 100%;
-  resize: none;
-  word-wrap: break-word;
-}
-.ncua-input--textarea textarea:disabled {
-  white-space: pre-wrap;
-}
 
 .ncua-input__text-count-wrap {
   width: 100%;
@@ -1557,6 +1695,54 @@ button {
   color: var(--primary-red-600);
 }
 
+.ncua-combobox {
+  display: inline-block;
+  min-width: 320px;
+}
+.ncua-combobox__content {
+  position: relative;
+}
+.ncua-combobox .ncua-input {
+  width: 100%;
+}
+.ncua-combobox .ncua-input__content {
+  width: 100%;
+}
+.ncua-combobox .ncua-input.is-disabled .ncua-btn--text {
+  color: var(--gray-200);
+}
+.ncua-combobox .ncua-input__icon-wrap .ncua-btn__label {
+  min-width: 20px;
+}
+.ncua-combobox__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 8px;
+}
+.ncua-combobox.ncua-combobox--xs .ncua-hint-text {
+  margin-block-start: 4px;
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-combobox.ncua-combobox--sm .ncua-hint-text {
+  margin-block-start: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+
+.ncua-select-dropdown__no-results {
+  padding: 21px 0;
+  color: var(--gray-700);
+  font-size: var(--font-size-xs);
+  text-align: center;
+  cursor: default;
+  user-select: none;
+}
+.ncua-select-dropdown__no-results:hover {
+  background-color: transparent;
+}
+
 .ncua-label {
   display: flex;
   gap: 4px;
@@ -1568,6 +1754,10 @@ button {
   color: var(--primary-red-500);
 }
 
+.ncua-modal-open {
+  overflow: hidden !important;
+}
+
 .ncua-modal-backdrop {
   position: fixed;
   top: 0;
@@ -1591,6 +1781,7 @@ button {
   display: flex;
   flex-direction: column;
   box-shadow: var(--shadow-xl);
+  padding: 16px 0px;
 }
 .ncua-modal--sm {
   max-width: 400px;
@@ -1604,6 +1795,9 @@ button {
 .ncua-modal--xl {
   max-width: 760px;
 }
+.ncua-modal--2xl {
+  max-width: 1000px;
+}
 @media (max-width: 768px) {
   .ncua-modal {
     max-height: calc(100vh - 160px);
@@ -1611,7 +1805,7 @@ button {
 }
 
 .ncua-modal__header {
-  padding: 16px 20px 16px;
+  padding: 0px 20px 16px;
   border-bottom: none;
   position: relative;
   display: flex;
@@ -1624,6 +1818,9 @@ button {
   background-color: var(--gray-100);
   margin: 0 0 16px;
 }
+.ncua-modal__header:has(.ncua-modal__close-button) {
+  padding-right: 48px;
+}
 .ncua-modal__header--left {
   align-items: flex-start;
 }
@@ -1651,7 +1848,7 @@ button {
   flex: 1;
 }
 .ncua-modal__header--close-button.ncua-modal__header--left {
-  padding: 20px 56px 20px 20px;
+  padding: 0px 56px 16px 20px;
 }
 
 .ncua-modal__title {
@@ -1665,6 +1862,7 @@ button {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   color: var(--gray-700);
+  word-break: break-all;
 }
 .ncua-modal__title .ncua-modal__title-subtitle {
   font-weight: var(--font-weights-commerce-sans-0);
@@ -1675,7 +1873,7 @@ button {
 
 .ncua-modal__close-button {
   position: absolute;
-  top: 10px;
+  top: -6px;
   right: 16px;
 }
 
@@ -1691,7 +1889,7 @@ button {
 }
 
 .ncua-modal__actions-wrapper {
-  padding: 16px 20px 16px;
+  padding: 16px 20px 0px;
 }
 .ncua-modal__actions-wrapper--checkbox {
   display: flex;
@@ -1754,6 +1952,9 @@ button {
 .ncua-modal__actions--stretch button {
   flex: 1;
 }
+.ncua-modal__actions--full-width button {
+  flex: 1;
+}
 
 @media (max-width: 768px) {
   .ncua-modal__actions-checkbox {
@@ -1777,7 +1978,7 @@ button {
   position: relative;
   width: 100%;
   padding: 16px;
-  max-width: 398px;
+  max-width: 430px;
   border: 1px solid var(--gray-200);
   background-color: var(--base-white);
   border-radius: 12px;
@@ -1810,10 +2011,12 @@ button {
   flex-direction: column;
   gap: 4px;
   padding-right: 32px;
+  align-self: center;
 }
 @media (max-width: 768px) {
   .ncua-floating-notification__text-container {
     padding-right: 0;
+    align-self: flex-start;
   }
 }
 .ncua-floating-notification__title-wrapper {
@@ -1865,10 +2068,10 @@ button {
   border-radius: 6px;
   padding: 5px 10px;
 }
-.ncua-floating-notification .ncua-notification__action-button--link-gray {
+.ncua-floating-notification .ncua-notification__action-button--text-gray {
   color: var(--gray-700);
 }
-.ncua-floating-notification .ncua-notification__action-button--link {
+.ncua-floating-notification .ncua-notification__action-button--text {
   color: var(--blue-500);
   font-weight: var(--font-weights-commerce-sans-1);
 }
@@ -1926,7 +2129,7 @@ button {
     gap: 4px;
   }
 }
-.ncua-full-width-notification__title, .ncua-full-width-notification__supporting-text {
+.ncua-full-width-notification__title, .ncua-full-width-notification__supporting-text, .ncua-full-width-notification__link {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
 }
@@ -1936,6 +2139,11 @@ button {
 .ncua-full-width-notification__supporting-text {
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-full-width-notification__link, .ncua-full-width-notification__link:hover {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
 .ncua-full-width-notification__actions-container {
   display: flex;
   align-items: center;
@@ -1977,7 +2185,7 @@ button {
 .ncua-full-width-notification--neutral .ncua-notification__action-button {
   color: var(--gray-500);
 }
-.ncua-full-width-notification--neutral .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--neutral .ncua-notification__action-button--link {
+.ncua-full-width-notification--neutral .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--neutral .ncua-notification__action-button--text {
   color: var(--gray-600);
 }
 @media (max-width: 768px) {
@@ -1996,7 +2204,7 @@ button {
 .ncua-full-width-notification--error .ncua-notification__action-button {
   color: var(--primary-red-500);
 }
-.ncua-full-width-notification--error .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--error .ncua-notification__action-button--link {
+.ncua-full-width-notification--error .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--error .ncua-notification__action-button--text {
   color: var(--primary-red-600);
 }
 @media (max-width: 768px) {
@@ -2015,7 +2223,7 @@ button {
 .ncua-full-width-notification--warning .ncua-notification__action-button {
   color: var(--orange-500);
 }
-.ncua-full-width-notification--warning .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--warning .ncua-notification__action-button--link {
+.ncua-full-width-notification--warning .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--warning .ncua-notification__action-button--text {
   color: var(--orange-600);
 }
 @media (max-width: 768px) {
@@ -2034,7 +2242,7 @@ button {
 .ncua-full-width-notification--success .ncua-notification__action-button {
   color: var(--green-500);
 }
-.ncua-full-width-notification--success .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--success .ncua-notification__action-button--link {
+.ncua-full-width-notification--success .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--success .ncua-notification__action-button--text {
   color: var(--green-600);
 }
 @media (max-width: 768px) {
@@ -2043,6 +2251,25 @@ button {
     border-style: solid;
   }
 }
+.ncua-full-width-notification--info {
+  color: var(--violet-600);
+  background-color: var(--violet-50);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: var(--violet-200);
+}
+.ncua-full-width-notification--info .ncua-notification__action-button {
+  color: var(--violet-500);
+}
+.ncua-full-width-notification--info .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--info .ncua-notification__action-button--text {
+  color: var(--violet-600);
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification--info {
+    border-width: 1px 0 0 0;
+    border-style: solid;
+  }
+}
 .ncua-full-width-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -2052,7 +2279,7 @@ button {
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-0);
 }
-.ncua-full-width-notification .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification .ncua-notification__action-button--link {
+.ncua-full-width-notification .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification .ncua-notification__action-button--text {
   font-weight: var(--font-weights-commerce-sans-1);
 }
 @media (max-width: 768px) {
@@ -2061,94 +2288,295 @@ button {
   }
 }
 
-.ncua-radio-input {
-  position: relative;
-  flex: none;
-  display: inline-block;
-  width: 16px;
-  height: 16px;
-  line-height: 1;
-  background-color: var(--base-white);
-  border-radius: 50%;
+.ncua-message-notification {
+  width: 100%;
 }
-.ncua-radio-input :where(input) {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  margin: 0;
+.ncua-message-notification__container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
   width: 100%;
-  height: 100%;
-  border: 1px solid var(--gray-200);
-  font: inherit;
-  border-radius: 50%;
+  padding: 16px 24px;
 }
-.ncua-radio-input :where(input):not(:disabled):hover {
-  border-color: var(--gray-600);
-  background-color: var(--gray-100);
+@media (max-width: 768px) {
+  .ncua-message-notification__container {
+    padding: 16px;
+  }
 }
-.ncua-radio-input :where(input):focus {
-  border-color: var(--gray-400);
-  box-shadow: var(--focus-ring-4px-gray-100);
+.ncua-message-notification__content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
 }
-.ncua-radio-input :where(input):checked {
-  border-color: var(--gray-700);
-  outline: none;
+@media (max-width: 768px) {
+  .ncua-message-notification__content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
 }
-.ncua-radio-input :where(input):disabled {
-  border-color: var(--gray-200);
-  background-color: var(--gray-100);
+.ncua-message-notification__content-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
 }
-.ncua-radio-input :where(input)::before {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  content: "";
-  transform: translate(-50%, -50%);
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
+.ncua-message-notification__icon {
+  flex-shrink: 0;
 }
-.ncua-radio-input :where(input):disabled::before {
-  background-color: var(--gray-100);
+.ncua-message-notification__text-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
-.ncua-radio-input :where(input):checked::before {
-  background-color: var(--gray-700);
+.ncua-message-notification__title {
+  font-size: var(--font-size-md);
+  line-height: var(--line-heights-md);
+  font-weight: var(--font-weights-commerce-sans-2);
 }
-.ncua-radio-input :where(input):checked:disabled::before {
-  background-color: var(--gray-200);
+.ncua-message-notification__supporting-text {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+  font-weight: var(--font-weights-commerce-sans-0);
 }
-.ncua-radio-input.destructive :where(input) {
-  border-color: var(--primary-red-600);
+.ncua-message-notification__actions-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
 }
-.ncua-radio-input.destructive :where(input):focus {
-  border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+@media (max-width: 768px) {
+  .ncua-message-notification__actions-container {
+    width: 100%;
+    justify-content: flex-end;
+  }
 }
-
-.ncua-radio-field {
-  position: relative;
+.ncua-message-notification__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-message-notification__footer-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-end;
+}
+.ncua-message-notification__hide-link {
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-0);
-  font-size: var(--font-size-xs);
+}
+.ncua-message-notification__close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
   cursor: pointer;
+  border-radius: 8px;
+  padding: 8px;
+  flex-shrink: 0;
 }
-.ncua-radio-field__text {
-  display: block;
-  color: var(--gray-500);
-  font-weight: var(--font-weights-commerce-sans-1);
+.ncua-message-notification--neutral {
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+  border-radius: 8px;
+  border: 1px solid var(--gray-300);
+  box-shadow: var(--shadow-lg);
 }
-.ncua-radio-field__support-text {
-  color: var(--gray-400);
+.ncua-message-notification--neutral .ncua-message-notification__title {
+  color: var(--gray-600);
 }
-.ncua-radio-field--sm .ncua-radio-field__text, .ncua-radio-field--sm .ncua-radio-field__support-text {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-heights-sm);
+.ncua-message-notification--neutral .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+  opacity: 0.8;
 }
-.ncua-radio-field.has-text {
+.ncua-message-notification--neutral .ncua-notification__action-button {
+  color: var(--gray-500);
+}
+.ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
+  color: var(--gray-600);
+}
+.ncua-message-notification--neutral .ncua-message-notification__hide-link {
+  color: var(--gray-500);
+}
+.ncua-message-notification--error {
+  color: var(--primary-red-600);
+  background-color: var(--primary-red-50);
+  border-radius: 8px;
+  border: 1px solid var(--primary-red-300);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-message-notification--error .ncua-message-notification__title {
+  color: var(--primary-red-600);
+}
+.ncua-message-notification--error .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+  opacity: 0.8;
+}
+.ncua-message-notification--error .ncua-notification__action-button {
+  color: var(--primary-red-500);
+}
+.ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
+  color: var(--primary-red-600);
+}
+.ncua-message-notification--error .ncua-message-notification__hide-link {
+  color: var(--gray-500);
+}
+.ncua-message-notification--warning {
+  color: var(--orange-600);
+  background-color: var(--orange-50);
+  border-radius: 8px;
+  border: 1px solid var(--orange-300);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-message-notification--warning .ncua-message-notification__title {
+  color: var(--orange-600);
+}
+.ncua-message-notification--warning .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+  opacity: 0.8;
+}
+.ncua-message-notification--warning .ncua-notification__action-button {
+  color: var(--orange-500);
+}
+.ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
+  color: var(--orange-600);
+}
+.ncua-message-notification--warning .ncua-message-notification__hide-link {
+  color: var(--gray-500);
+}
+.ncua-message-notification--success {
+  color: var(--green-600);
+  background-color: var(--green-50);
+  border-radius: 8px;
+  border: 1px solid var(--green-300);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-message-notification--success .ncua-message-notification__title {
+  color: var(--green-600);
+}
+.ncua-message-notification--success .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+  opacity: 0.8;
+}
+.ncua-message-notification--success .ncua-notification__action-button {
+  color: var(--green-500);
+}
+.ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
+  color: var(--green-600);
+}
+.ncua-message-notification--success .ncua-message-notification__hide-link {
+  color: var(--gray-500);
+}
+.ncua-message-notification .ncua-notification__action-button {
+  background: transparent;
+  border: none;
+  padding: 0;
+  vertical-align: middle;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+
+.ncua-radio-input {
+  position: relative;
+  flex: none;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  background-color: var(--base-white);
+  border-radius: 50%;
+}
+.ncua-radio-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: 50%;
+}
+.ncua-radio-input :where(input):not(:disabled):hover {
+  border-color: var(--gray-600);
+  background-color: var(--gray-100);
+}
+.ncua-radio-input :where(input):focus {
+  border-color: var(--gray-400);
+  box-shadow: var(--focus-ring-4px-gray-100);
+}
+.ncua-radio-input :where(input):checked {
+  border-color: var(--gray-700);
+  outline: none;
+}
+.ncua-radio-input :where(input):disabled {
+  border-color: var(--gray-200);
+  background-color: var(--gray-100);
+}
+.ncua-radio-input :where(input)::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: "";
+  transform: translate(-50%, -50%);
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+}
+.ncua-radio-input :where(input):disabled::before {
+  background-color: var(--gray-100);
+}
+.ncua-radio-input :where(input):checked::before {
+  background-color: var(--gray-700);
+}
+.ncua-radio-input :where(input):checked:disabled::before {
+  background-color: var(--gray-200);
+}
+.ncua-radio-input.destructive :where(input) {
+  border-color: var(--primary-red-600);
+}
+.ncua-radio-input.destructive :where(input):focus {
+  border-color: var(--primary-red-600);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
+}
+
+.ncua-radio-field {
+  position: relative;
+  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  font-size: var(--font-size-xs);
+  cursor: pointer;
+}
+.ncua-radio-field__text {
+  display: block;
+  color: var(--gray-500);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-radio-field__support-text {
+  color: var(--gray-400);
+}
+.ncua-radio-field--sm .ncua-radio-field__text, .ncua-radio-field--sm .ncua-radio-field__support-text {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-radio-field.has-text {
   display: inline-flex;
   gap: 6px;
 }
@@ -2173,14 +2601,14 @@ button {
 .ncua-tag--sm {
   font-size: var(--font-size-xxxs);
   padding: 2px 8px;
-  line-height: 14px;
-  border-radius: 4px;
+  line-height: var(--line-heights-xxxs);
+  border-radius: var(--border-radius-xs);
 }
 .ncua-tag--md {
   font-size: var(--font-size-sm);
   padding: 1px 9px;
-  line-height: 22px;
-  border-radius: 6px;
+  line-height: var(--line-heights-sm);
+  border-radius: var(--border-radius-sm);
 }
 .ncua-tag__text {
   overflow: hidden;
@@ -2190,28 +2618,28 @@ button {
   word-wrap: break-word;
 }
 .ncua-tag > svg, .ncua-tag > .ncua-dot {
-  margin-right: 4px;
+  margin-right: var(--spacing-xs);
 }
 .ncua-tag__count {
   display: inline-flex;
   align-items: center;
   min-width: 16px;
   height: 14px;
-  margin-left: 6px;
+  margin-left: var(--spacing-sm);
   margin-right: -5px;
   padding: 0 5px;
   background-color: var(--gray-100);
-  border-radius: 3px;
+  border-radius: var(--border-radius-xxs);
   text-align: center;
 }
 .ncua-tag__count + .ncua-tag__close {
-  margin-left: 6px;
+  margin-left: var(--spacing-sm);
 }
 .ncua-tag--md .ncua-tag__count {
   height: 16px;
 }
 .ncua-tag__close {
-  margin-left: 3px;
+  margin-left: var(--spacing-xxs);
   margin-right: -5px;
   padding: 0;
   display: inline-flex;
@@ -2220,6 +2648,84 @@ button {
   background-color: transparent;
   border: none;
 }
+.ncua-tag--truncated {
+  position: relative;
+  overflow: visible;
+}
+.ncua-tag__tooltip {
+  position: absolute;
+  z-index: 1000;
+  pointer-events: none;
+}
+.ncua-tag__tooltip:not([class*="--top-"]):not([class*="--bottom-"]):not([class*="--left"]):not([class*="--right"]) {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: var(--spacing-md);
+}
+.ncua-tag__tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: var(--spacing-md);
+}
+.ncua-tag__tooltip--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: var(--spacing-md);
+}
+.ncua-tag__tooltip--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: var(--spacing-md);
+}
+.ncua-tag__tooltip--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: var(--spacing-md);
+}
+.ncua-tag__tooltip--top-left {
+  bottom: 100%;
+  right: 0;
+  margin-bottom: var(--spacing-md);
+}
+.ncua-tag__tooltip--top-right {
+  bottom: 100%;
+  left: 0;
+  margin-bottom: var(--spacing-md);
+}
+.ncua-tag__tooltip--bottom-left {
+  top: 100%;
+  right: 0;
+  margin-top: var(--spacing-md);
+}
+.ncua-tag__tooltip--bottom-right {
+  top: 100%;
+  left: 0;
+  margin-top: var(--spacing-md);
+}
+.ncua-tag__tooltip--measuring {
+  opacity: 0;
+  visibility: hidden;
+}
+.ncua-tag__tooltip-content {
+  display: block;
+  padding: var(--spacing-md) var(--spacing-lg);
+  background-color: var(--base-white);
+  color: var(--gray-500);
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: 1.33;
+  border-radius: var(--border-radius-sm);
+  border: 1px solid var(--gray-100);
+  white-space: nowrap;
+  text-align: center;
+  max-width: var(--max-width-tooltip);
+  box-shadow: var(--shadow-tooltip);
+}
 
 .ncua-tooltip {
   position: relative;
@@ -2230,6 +2736,10 @@ button {
 .ncua-tooltip svg {
   cursor: pointer;
 }
+.ncua-tooltip__icon {
+  display: inline-block;
+  cursor: pointer;
+}
 .ncua-tooltip__bg {
   position: absolute;
   border-radius: 6px;
@@ -2237,7 +2747,7 @@ button {
   display: flex;
   flex-direction: column;
   gap: 4px;
-  box-shadow: var(--shadow-lg);
+  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
 }
 .ncua-tooltip__bg::after {
   position: absolute;
@@ -2247,6 +2757,31 @@ button {
 .ncua-tooltip__content {
   line-height: 14px;
   width: max-content;
+  font-weight: 100;
+}
+.ncua-tooltip__close-button {
+  position: absolute;
+  top: 4px;
+  right: 8px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+.ncua-tooltip__close-button:hover {
+  opacity: 1;
+  background-color: transparent;
+}
+.ncua-tooltip__close-button svg {
+  width: 14px;
+  height: 14px;
 }
 .ncua-tooltip__bg--black {
   background-color: var(--gray-700);
@@ -2254,6 +2789,21 @@ button {
 .ncua-tooltip__bg--black::after {
   border-color: var(--gray-700);
 }
+.ncua-tooltip__bg--black .ncua-tooltip__close-button {
+  color: var(--base-white);
+}
+.ncua-tooltip__bg--black.ncua-tooltip__bg--left::after {
+  border-left-color: var(--gray-700);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+.ncua-tooltip__bg--black.ncua-tooltip__bg--right::after {
+  border-right-color: var(--gray-700);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
 .ncua-tooltip__bg--black .ncua-tooltip__title {
   font-weight: 500;
   color: var(--base-white);
@@ -2267,6 +2817,21 @@ button {
 .ncua-tooltip__bg--white::after {
   border-color: var(--base-white);
 }
+.ncua-tooltip__bg--white .ncua-tooltip__close-button {
+  color: var(--gray-600);
+}
+.ncua-tooltip__bg--white.ncua-tooltip__bg--left::after {
+  border-left-color: var(--base-white);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-right-color: transparent;
+}
+.ncua-tooltip__bg--white.ncua-tooltip__bg--right::after {
+  border-right-color: var(--base-white);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+}
 .ncua-tooltip__bg--white .ncua-tooltip__title {
   font-weight: 500;
   color: var(--gray-500);
@@ -2353,6 +2918,34 @@ button {
 .ncua-tooltip__bg--bottom-right::after {
   right: 15px;
 }
+.ncua-tooltip__bg--left {
+  top: 50%;
+  right: calc(100% + 6px);
+  transform: translateY(-50%);
+}
+.ncua-tooltip__bg--left::after {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid;
+  border-right: 0;
+}
+.ncua-tooltip__bg--right {
+  top: 50%;
+  left: calc(100% + 6px);
+  transform: translateY(-50%);
+}
+.ncua-tooltip__bg--right::after {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid;
+  border-left: 0;
+}
 .ncua-tooltip--hidden-arrow .ncua-tooltip__bg::after {
   content: none;
 }
@@ -2362,10 +2955,59 @@ button {
 .ncua-tooltip:not(:hover) .ncua-tooltip__bg {
   display: none;
 }
-.ncua-tooltip:has(.ncua-tooltip__title) .ncua-tooltip__bg {
-  padding: 12px;
+.ncua-tooltip:hover .ncua-tooltip__bg {
+  display: flex;
 }
-
+.ncua-tooltip--long:not(:hover) .ncua-tooltip__bg--visible {
+  display: flex;
+}
+.ncua-tooltip--auto .ncua-tooltip__bg {
+  display: none;
+}
+.ncua-tooltip--auto .ncua-tooltip__bg--visible {
+  display: flex;
+}
+.ncua-tooltip--auto .ncua-tooltip__bg--measuring {
+  display: flex !important;
+  visibility: hidden !important;
+}
+.ncua-tooltip--auto .ncua-tooltip__bg--force-hidden {
+  display: none !important;
+}
+.ncua-tooltip:has(.ncua-tooltip__title) .ncua-tooltip__bg {
+  padding: 12px;
+}
+.ncua-tooltip__bg:has(.ncua-tooltip__close-button) {
+  padding-right: 35px;
+}
+.ncua-tooltip--long .ncua-tooltip__bg {
+  padding: 12px;
+  padding-right: 36px;
+}
+.ncua-tooltip--short .ncua-tooltip__bg {
+  white-space: nowrap;
+}
+
+.ncua-tooltip-global-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 2000;
+  display: block;
+}
+
+.ncua-tooltip-panel {
+  position: fixed;
+  left: -99999px;
+  top: -99999px;
+  opacity: 0;
+  transition: opacity 0.18s ease;
+  pointer-events: auto;
+  right: auto;
+  bottom: auto;
+  transform: none;
+}
+
 :root {
   --select-height-xs: 28px;
   --select-height-sm: 36px;
@@ -2385,6 +3027,7 @@ button {
   border: 1px solid var(--gray-200);
   background-color: var(--base-white);
   overflow: hidden;
+  box-shadow: var(--shadow-xs);
 }
 .ncua-select__tag {
   -webkit-appearance: none;
@@ -2394,63 +3037,76 @@ button {
   flex: 1;
   outline: none;
   color: var(--gray-700);
-  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
+  background: var(--base-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
+  background-size: var(--icon-size) var(--icon-size);
+}
+.ncua-select__tag:disabled {
+  background: var(--gray-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23757678' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 8px center;
   background-size: var(--icon-size) var(--icon-size);
+  cursor: not-allowed;
+  color: var(--gray-300);
 }
 .ncua-select__content:focus-within {
   border-color: var(--gray-400);
   box-shadow: var(--shadow-xs-focused-3px-gray-100);
 }
+.ncua-select__content:has(.ncua-select__tag:disabled) {
+  border-color: var(--gray-200);
+}
 .ncua-select.destructive .ncua-select__content {
   border-color: var(--primary-red-600);
 }
 .ncua-select.destructive .ncua-select__content:focus-within {
   box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
-.ncua-select--xs {
+.ncua-select--xs .ncua-select__content {
   height: var(--select-height-xs);
   border-radius: 6px;
 }
-.ncua-select--xs > .ncua-select__tag {
+.ncua-select--xs .ncua-select__tag {
   padding-inline: 10px 28px;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-xs);
 }
-.ncua-select--xs + .ncua-hint-text {
+.ncua-select--xs .ncua-hint-text {
   margin-block-start: 4px;
   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;
-  --icon-size: 16px;
 }
-.ncua-select--sm > .ncua-select__tag {
+.ncua-select--sm .ncua-select__tag {
   padding-inline: 12px 30px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-0);
   line-height: var(--line-heights-sm);
 }
-.ncua-select--sm + .ncua-hint-text {
+.ncua-select--sm .ncua-hint-text {
   margin-block-start: 6px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
 .ncua-select--md {
+  --icon-size: 16px;
+}
+.ncua-select--md .ncua-select__content {
   min-width: 132px;
   height: var(--select-height-md);
   border-radius: 8px;
-  --icon-size: 16px;
 }
-.ncua-select--md > .ncua-select__tag {
+.ncua-select--md .ncua-select__tag {
   padding-inline: 12px 30px;
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-1);
   line-height: var(--line-heights-sm);
 }
-.ncua-select--md + .ncua-hint-text {
+.ncua-select--md .ncua-hint-text {
   margin-block-start: 6px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
@@ -2475,6 +3131,294 @@ button {
   border-radius: 0;
 }
 
+:root {
+  --select-dropdown-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+}
+
+.ncua-select-dropdown {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  overflow: hidden;
+  min-width: 100%;
+  width: max-content;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+  box-shadow: var(--shadow-lg);
+}
+.ncua-select-dropdown--down {
+  top: calc(100% + 4px);
+}
+.ncua-select-dropdown--up {
+  bottom: calc(100% + 4px);
+}
+.ncua-select-dropdown__content {
+  padding: 8px 6px;
+}
+.ncua-select-dropdown__options {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  scrollbar-color: #eaecf0 transparent;
+}
+.ncua-select-dropdown__options::-webkit-scrollbar {
+  width: 6px;
+}
+.ncua-select-dropdown__options::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 8px;
+}
+.ncua-select-dropdown__options::-webkit-scrollbar-thumb {
+  background: #eaecf0;
+  border-radius: 8px;
+}
+.ncua-select-dropdown__options::-webkit-scrollbar-thumb:hover {
+  background: #d0d5dd;
+}
+.ncua-select-dropdown__option {
+  min-width: 84px;
+  padding: 8px 26px 8px 12px;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  position: relative;
+  border-radius: 6px;
+}
+.ncua-select-dropdown__option:hover, .ncua-select-dropdown__option--focused {
+  background-color: var(--gray-50);
+}
+.ncua-select-dropdown__option--selected {
+  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 24 24' stroke='none'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M20.707 5.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586 19.293 5.293a1 1 0 0 1 1.414 0' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat right 8px center;
+}
+.ncua-select-dropdown__option__option-text {
+  display: inline-block;
+  max-width: 327px;
+  color: var(--gray-600);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ncua-select-dropdown--xs .ncua-select-dropdown__option {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-select-dropdown--sm .ncua-select-dropdown__option {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-select-dropdown--md .ncua-select-dropdown__option {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-select-dropdown__footer {
+  border-top: 1px solid var(--gray-100);
+  background-color: var(--color-white);
+  border-radius: 0 0 8px 8px;
+}
+.ncua-select-dropdown__footer-buttons {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 12px;
+}
+.ncua-select-dropdown__footer-left {
+  display: flex;
+  align-items: center;
+}
+.ncua-select-dropdown__footer-right {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+:root {
+  --selectbox-simple-height-xs: 18px;
+  --selectbox-simple-height-sm: 22px;
+  --selectbox-simple-height-md: 22px;
+}
+
+.ncua-selectbox {
+  position: relative;
+  display: inline-block;
+}
+.ncua-selectbox__content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  cursor: pointer;
+  transition: all 0.15s ease-in-out;
+}
+.ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox__content) {
+  border-color: var(--gray-300);
+}
+.ncua-selectbox__content:focus {
+  outline: none;
+  border-color: var(--gray-400);
+  box-shadow: var(--shadow-xs-focused-3px-gray-100);
+}
+.ncua-selectbox__value {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--gray-700);
+}
+.ncua-selectbox__value:empty::before {
+  content: attr(data-placeholder);
+  color: var(--gray-400);
+}
+.ncua-selectbox__chevron {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease-in-out;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-500);
+}
+.ncua-selectbox__chevron svg {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+.ncua-selectbox__chevron--up {
+  transform: translateY(-50%) rotate(180deg);
+}
+.ncua-selectbox__arrow {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  transition: transform 0.2s ease-in-out;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-400);
+}
+.ncua-selectbox__arrow svg {
+  width: var(--icon-size);
+  height: var(--icon-size);
+}
+.ncua-selectbox__arrow--up {
+  transform: translateY(-50%) rotate(180deg);
+}
+.ncua-selectbox--open .ncua-selectbox__content {
+  border-color: var(--gray-400);
+  box-shadow: var(--shadow-xs-focused-3px-gray-100);
+}
+.ncua-selectbox--disabled .ncua-selectbox__content {
+  background-color: var(--gray-50);
+  border-color: var(--gray-200);
+  cursor: not-allowed;
+}
+.ncua-selectbox--disabled .ncua-selectbox__value {
+  color: var(--gray-400);
+}
+.ncua-selectbox--disabled .ncua-selectbox__arrow {
+  color: var(--gray-300);
+}
+.ncua-selectbox.destructive .ncua-selectbox__content {
+  border-color: var(--primary-red-600);
+}
+.ncua-selectbox.destructive .ncua-selectbox__content:focus {
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
+}
+.ncua-selectbox--xs .ncua-selectbox__content {
+  height: var(--select-height-xs);
+  border-radius: 6px;
+}
+.ncua-selectbox--xs .ncua-selectbox__value {
+  padding-inline: 10px 28px;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-xs);
+}
+.ncua-selectbox--xs .ncua-hint-text {
+  margin-block-start: 4px;
+  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;
+}
+.ncua-selectbox--sm .ncua-selectbox__value {
+  padding-inline: 12px 30px;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-sm);
+}
+.ncua-selectbox--sm .ncua-hint-text {
+  margin-block-start: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-selectbox--md {
+  min-width: 132px;
+  --icon-size: 16px;
+}
+.ncua-selectbox--md .ncua-selectbox__content {
+  height: var(--select-height-md);
+  border-radius: 8px;
+}
+.ncua-selectbox--md .ncua-selectbox__value {
+  padding-inline: 12px 30px;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-sm);
+}
+.ncua-selectbox--md .ncua-hint-text {
+  margin-block-start: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-selectbox--simple .ncua-selectbox__content {
+  border: 0;
+  background-color: transparent;
+}
+.ncua-selectbox--simple .ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox--simple .ncua-selectbox__content) {
+  border-color: transparent;
+}
+.ncua-selectbox--simple .ncua-selectbox__content:focus {
+  border-color: transparent;
+  box-shadow: none;
+}
+.ncua-selectbox--simple.ncua-selectbox--xs .ncua-selectbox__content {
+  min-width: auto;
+  height: var(--selectbox-simple-height-xs);
+  border-radius: 0;
+}
+.ncua-selectbox--simple.ncua-selectbox--sm .ncua-selectbox__content {
+  min-width: auto;
+  height: var(--selectbox-simple-height-sm);
+  border-radius: 0;
+}
+.ncua-selectbox--simple.ncua-selectbox--md .ncua-selectbox__content {
+  min-width: auto;
+  height: var(--selectbox-simple-height-md);
+  border-radius: 0;
+}
+.ncua-selectbox--multiple {
+  min-width: 320px;
+}
+.ncua-selectbox__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 8px;
+}
+
 .ncua-pagination {
   display: flex;
   align-items: center;
@@ -2607,20 +3551,226 @@ button {
   box-shadow: var(--shadow-lg);
 }
 
-@keyframes ncua-spinner-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.ncua-spinner {
-  display: grid;
-  place-items: center;
+:root {
+  --switch-xxs-height: 24px;
+  --switch-xxs-line-height: 14px;
+  --switch-xxs-padding: 5px 12px;
+  --switch-xxs-border-radius: 4px;
+  --switch-xxs-gap: 0px;
+  --switch-xs-height: 28px;
+  --switch-xs-line-height: 18px;
+  --switch-xs-padding: 5px 12px;
+  --switch-xs-border-radius: 6px;
+  --switch-xs-gap: 0px;
+  --switch-sm-height: 32px;
+  --switch-sm-line-height: 22px;
+  --switch-sm-padding: 5px 12px;
+  --switch-sm-border-radius: 6px;
+  --switch-sm-gap: 0px;
+  --switch-md-height: 36px;
+  --switch-md-line-height: 22px;
+  --switch-md-padding: 5px 12px;
+  --switch-md-border-radius: 8px;
+  --switch-md-gap: 0px;
+}
+
+.ncua-switch {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2px;
+  align-items: center;
+  background-color: var(--gray-100);
+  padding: 2px;
+  user-select: none;
+  vertical-align: top;
+  cursor: pointer;
+  margin: 0;
+  font-weight: inherit;
+  height: var(--switch-xs-height);
+  border-radius: var(--switch-xs-border-radius);
+  gap: var(--switch-xs-gap);
 }
-.ncua-spinner__content {
-  text-align: center;
+.ncua-switch__radio {
+  display: none;
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.ncua-switch__option {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+  background-color: var(--gray-100);
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  font-family: inherit;
+  font-weight: var(--font-weights-medium);
+  color: var(--gray-300);
+  outline: none;
+  white-space: nowrap;
+  text-align: center;
+  height: calc(var(--switch-xs-height) - 4px);
+  padding: var(--switch-xs-padding);
+  font-size: var(--font-size-xs);
+  line-height: var(--switch-xs-line-height);
+  border-radius: calc(var(--switch-xs-border-radius) - 2px);
+}
+.ncua-switch__option--active {
+  background-color: var(--base-white);
+  color: var(--gray-600);
+  box-shadow: var(--shadow-sm);
+  z-index: 1;
+}
+.ncua-switch__option--inactive {
+  background-color: var(--gray-100);
+  color: var(--gray-300);
+}
+.ncua-switch__option:not(:disabled):hover:not(.ncua-switch__option--active) {
+  background-color: var(--gray-100);
+  color: var(--gray-400);
+}
+.ncua-switch__label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  margin: 0;
+  line-height: 1;
+}
+.ncua-switch__label > * {
+  display: inline-flex;
+  align-items: center;
+}
+.ncua-switch__label svg,
+.ncua-switch__label img {
+  flex-shrink: 0;
+  vertical-align: middle;
+  max-height: 14px;
+  object-fit: contain;
+}
+.ncua-switch__label img {
+  max-width: none;
+  height: auto;
+}
+.ncua-switch__text {
+  font-size: var(--font-size-xs);
+  line-height: var(--switch-xs-line-height);
+}
+.ncua-switch--xxs {
+  height: var(--switch-xxs-height);
+  border-radius: var(--switch-xxs-border-radius);
+  gap: var(--switch-xxs-gap);
+}
+.ncua-switch--xxs .ncua-switch__option {
+  height: calc(var(--switch-xxs-height) - 4px);
+  padding: var(--switch-xxs-padding);
+  font-size: var(--font-size-xxxs);
+  line-height: var(--switch-xxs-line-height);
+  border-radius: calc(var(--switch-xxs-border-radius) - 2px);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-switch--xxs .ncua-switch__label {
+  gap: 2px;
+}
+.ncua-switch--xxs .ncua-switch__label svg,
+.ncua-switch--xxs .ncua-switch__label img {
+  max-height: 12px;
+}
+.ncua-switch--xs {
+  height: var(--switch-xs-height);
+  border-radius: var(--switch-xs-border-radius);
+  gap: var(--switch-xs-gap);
+}
+.ncua-switch--xs .ncua-switch__option {
+  height: calc(var(--switch-xs-height) - 4px);
+  padding: var(--switch-xs-padding);
+  font-size: var(--font-size-xs);
+  line-height: var(--switch-xs-line-height);
+  border-radius: calc(var(--switch-xs-border-radius) - 2px);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-switch--xs .ncua-switch__label {
+  gap: 3px;
+}
+.ncua-switch--xs .ncua-switch__label svg,
+.ncua-switch--xs .ncua-switch__label img {
+  max-height: 14px;
+}
+.ncua-switch--sm {
+  height: var(--switch-sm-height);
+  border-radius: var(--switch-sm-border-radius);
+  gap: var(--switch-sm-gap);
+}
+.ncua-switch--sm .ncua-switch__option {
+  height: calc(var(--switch-sm-height) - 4px);
+  padding: var(--switch-sm-padding);
+  font-size: var(--font-size-sm);
+  line-height: var(--switch-sm-line-height);
+  border-radius: calc(var(--switch-sm-border-radius) - 2px);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-switch--sm .ncua-switch__label {
+  gap: 4px;
+}
+.ncua-switch--sm .ncua-switch__label svg,
+.ncua-switch--sm .ncua-switch__label img {
+  max-height: 16px;
+}
+.ncua-switch--md {
+  height: var(--switch-md-height);
+  border-radius: var(--switch-md-border-radius);
+  gap: var(--switch-md-gap);
+}
+.ncua-switch--md .ncua-switch__option {
+  height: calc(var(--switch-md-height) - 4px);
+  padding: var(--switch-md-padding);
+  font-size: var(--font-size-sm);
+  line-height: var(--switch-md-line-height);
+  border-radius: calc(var(--switch-md-border-radius) - 2px);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-switch--md .ncua-switch__label {
+  gap: 5px;
+}
+.ncua-switch--md .ncua-switch__label svg,
+.ncua-switch--md .ncua-switch__label img {
+  max-height: 18px;
+}
+.ncua-switch--disabled {
+  cursor: not-allowed;
+}
+.ncua-switch--disabled .ncua-switch__option {
+  cursor: not-allowed;
+  color: var(--gray-300);
+}
+.ncua-switch--disabled .ncua-switch__option--active {
+  background-color: var(--gray-50);
+  color: var(--gray-300);
+  box-shadow: var(--shadow-sm);
+}
+
+@keyframes ncua-spinner-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.ncua-spinner {
+  display: grid;
+  place-items: center;
+}
+.ncua-spinner__content {
+  text-align: center;
 }
 .ncua-spinner__content::before {
   content: "";
@@ -2815,7 +3965,6 @@ button {
 
 .ncua-date-picker {
   position: relative;
-  display: inline-flex;
   width: 138px;
   height: 28px;
 }
@@ -2836,7 +3985,7 @@ button {
 .ncua-date-picker__input {
   width: 100%;
   height: 100%;
-  padding: 0;
+  padding: 0 3px 0 0;
   border: 0;
   outline: none;
   color: inherit;
@@ -2844,7 +3993,8 @@ button {
   font: inherit;
 }
 .ncua-date-picker__input::placeholder {
-  color: var(--gray-700);
+  color: var(--gray-300, #a4a5a8);
+  font-size: var(--font-size-xxs, 12px);
 }
 .ncua-date-picker__input:disabled {
   background-color: var(--gray-50);
@@ -2876,12 +4026,19 @@ button {
 .ncua-date-picker .flatpickr-calendar::before, .ncua-date-picker .flatpickr-calendar::after {
   content: none;
 }
+.ncua-date-picker .flatpickr-calendar.static {
+  top: calc(100% + 6px);
+}
 .ncua-date-picker .numInputWrapper .cur-year {
   margin-inline-start: 4px;
   transform: translateY(2px);
 }
 .ncua-date-picker .numInputWrapper span {
   opacity: 1;
+  width: 12px;
+  height: 12px;
+  border: 0;
+  padding: 0;
 }
 .ncua-date-picker .flatpickr-months {
   justify-content: space-between;
@@ -2919,6 +4076,21 @@ button {
   overflow: visible;
   flex: none;
 }
+.ncua-date-picker .flatpickr-months .numInputWrapper span::after {
+  top: 0;
+  width: 12px;
+  height: 12px;
+  border: 0;
+  background-size: 12px 12px;
+  background-repeat: no-repeat;
+}
+.ncua-date-picker .flatpickr-months .numInputWrapper span.arrowUp::after {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2212%22%20viewBox%3D%220%200%2013%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M9.5%207.5L6.5%204.5L3.5%207.5%22%20stroke%3D%22%23171818%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
+}
+.ncua-date-picker .flatpickr-months .numInputWrapper span.arrowDown::after {
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2213%22%20height%3D%2212%22%20viewBox%3D%220%200%2013%2012%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M9.5%207.5L6.5%204.5L3.5%207.5%22%20stroke%3D%22%23171818%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
+  transform: rotate(180deg);
+}
 .ncua-date-picker .flatpickr-current-month {
   position: initial;
   width: auto;
@@ -2932,6 +4104,10 @@ button {
   font-size: var(--font-size-lg);
   color: inherit;
 }
+.ncua-date-picker .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
+.ncua-date-picker .flatpickr-current-month .numInputWrapper:hover {
+  border-radius: 6px;
+}
 .ncua-date-picker .flatpickr-monthDropdown-months {
   margin: 0;
   padding: 0;
@@ -2943,6 +4119,9 @@ button {
   font-weight: 700;
   line-height: 22px;
 }
+.ncua-date-picker .flatpickr-current-month .flatpickr-monthDropdown-months {
+  margin-block-start: 0;
+}
 .ncua-date-picker .flatpickr-innerContainer {
   justify-content: center;
 }
@@ -3056,17 +4235,129 @@ button {
 .ncua-date-picker--disabled .ncua-date-picker__input {
   color: var(--gray-300);
 }
+.ncua-date-picker--disabled .ncua-date-picker__ico path {
+  stroke: var(--gray-300);
+}
+.ncua-date-picker--destructive .flatpickr-wrapper {
+  border-color: var(--primary-red-500);
+}
+.ncua-date-picker--destructive .ncua-date-picker__destructive {
+  color: var(--primary-red-500);
+  font-size: var(--font-size-xxs);
+}
+.ncua-date-picker--has-time {
+  width: auto;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time {
+  align-items: center;
+  padding: 8px 16px;
+  max-height: 112px;
+  height: 112px;
+  line-height: 1;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .numInputWrapper {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .numInputWrapper:hover,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .numInputWrapper:hover {
+  background-color: transparent;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time input,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time input,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .flatpickr-am-pm {
+  color: var(--gray-700, #171818);
+  font-weight: var(--font-weights-commerce-sans-2, 700);
+  height: 40px;
+  width: 50px;
+  border-radius: 6px;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-time-separator,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-am-pm,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .flatpickr-time-separator,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .flatpickr-am-pm {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .flatpickr-time-separator,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .flatpickr-time-separator {
+  height: 100%;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowUp,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowDown,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowUp,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowDown {
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  width: 24px;
+  padding: 0;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowUp::after,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowDown::after,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowUp::after,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowDown::after {
+  border: 0;
+  width: 14px;
+  height: 14px;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowUp:hover,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowDown:hover,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowUp:hover,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowDown:hover {
+  background-color: var(--gray-50);
+  border-radius: 4px;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowUp,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowUp {
+  top: 0;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowUp::after,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowUp::after {
+  top: 50%;
+  transform: translateY(-50%);
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.58736 4.83736C6.81516 4.60955 7.18451 4.60955 7.41232 4.83736L10.9123 8.33736C11.1401 8.56516 11.1401 8.93451 10.9123 9.16232C10.6845 9.39012 10.3152 9.39012 10.0874 9.16232L6.99984 6.0748L3.91232 9.16232C3.68451 9.39012 3.31516 9.39012 3.08736 9.16232C2.85955 8.93451 2.85955 8.56516 3.08736 8.33736L6.58736 4.83736Z' fill='%23757678'/%3E%3C/svg%3E") !important;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowDown,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowDown {
+  top: auto;
+  bottom: 0;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime .flatpickr-time .arrowDown::after,
+.ncua-date-picker--has-time .flatpickr-calendar.hasTime.noCalendar .flatpickr-time .arrowDown::after {
+  top: 50%;
+  transform: translateY(-50%) rotate(180deg);
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.58736 4.83736C6.81516 4.60955 7.18451 4.60955 7.41232 4.83736L10.9123 8.33736C11.1401 8.56516 11.1401 8.93451 10.9123 9.16232C10.6845 9.39012 10.3152 9.39012 10.0874 9.16232L6.99984 6.0748L3.91232 9.16232C3.68451 9.39012 3.31516 9.39012 3.08736 9.16232C2.85955 8.93451 2.85955 8.56516 3.08736 8.33736L6.58736 4.83736Z' fill='%23757678'/%3E%3C/svg%3E") !important;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.noCalendar {
+  padding-block-start: 0;
+}
+.ncua-date-picker--has-time .flatpickr-calendar.noCalendar .flatpickr-time {
+  border-block-start-width: 0;
+}
 
 .ncua-range-date-picker {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: 4px;
 }
 
 .ncua-range-date-picker-with-buttons {
   display: inline-flex;
   align-items: center;
-  gap: 16px;
+  gap: 4px;
+}
+.ncua-range-date-picker-with-buttons .ncua-button-group {
+  margin-inline-end: 4px;
 }
 
 .ncua-carousel-number-group {
@@ -3349,11 +4640,15 @@ button {
 .ncua-progress-bar-bottom-float {
   padding-bottom: 42px;
 }
+.ncua-progress-bar--single-segment {
+  text-align: left;
+}
 .ncua-progress-bar__content {
   display: flex;
   align-items: center;
   width: 100%;
   gap: 8px;
+  margin-bottom: 4px;
 }
 .ncua-progress-bar__bar {
   flex-grow: 1;
@@ -3362,11 +4657,44 @@ button {
   border-radius: 5px;
   overflow: hidden;
 }
+.ncua-progress-bar__bar--segments {
+  display: flex;
+  border-radius: 5px;
+  background-color: var(--gray-100);
+}
 .ncua-progress-bar__fill {
   height: 100%;
-  background-color: var(--gray-600);
   border-radius: 5px;
   transition: width 0.3s ease;
+  flex-shrink: 0;
+  background-color: var(--gray-600);
+}
+.ncua-progress-bar__fill--spaced {
+  margin-left: auto;
+}
+.ncua-progress-bar__fill--color-red {
+  background-color: var(--primary-red-400);
+}
+.ncua-progress-bar__fill--color-green {
+  background-color: var(--green-400);
+}
+.ncua-progress-bar__fill--color-blue {
+  background-color: var(--blue-400);
+}
+.ncua-progress-bar__fill--color-pink {
+  background-color: var(--pink-400);
+}
+.ncua-progress-bar__fill--color-orange {
+  background-color: var(--orange-400);
+}
+.ncua-progress-bar__fill--color-violet {
+  background-color: var(--violet-400);
+}
+.ncua-progress-bar__fill--color-gray {
+  background-color: var(--gray-400);
+}
+.ncua-progress-bar__bar--segments .ncua-progress-bar__fill {
+  border-radius: 5px;
 }
 .ncua-progress-bar__label {
   font-size: var(--font-size-sm);
@@ -3375,10 +4703,18 @@ button {
 }
 .ncua-progress-bar__label-right {
   min-width: 45px;
+  font-size: 11px;
+  line-height: 14px;
+  font-style: normal;
+  font-weight: 500;
 }
 .ncua-progress-bar__label-bottom {
   margin-top: 8px;
   align-self: flex-end;
+  font-size: 11px;
+  line-height: 14px;
+  font-style: normal;
+  font-weight: 500;
 }
 .ncua-progress-bar__label-top-float, .ncua-progress-bar__label-bottom-float {
   position: absolute;
@@ -3400,6 +4736,42 @@ button {
 .ncua-progress-bar__label-bottom-float {
   bottom: 0;
 }
+.ncua-progress-bar__label--segment {
+  font-size: 11px;
+  line-height: 14px;
+  font-style: normal;
+  font-weight: 500;
+  white-space: nowrap;
+  position: absolute;
+  transform: translateX(-50%);
+}
+.ncua-progress-bar__label--color-red {
+  color: var(--primary-red-600);
+}
+.ncua-progress-bar__label--color-green {
+  color: var(--green-600);
+}
+.ncua-progress-bar__label--color-blue {
+  color: var(--blue-600);
+}
+.ncua-progress-bar__label--color-pink {
+  color: var(--pink-600);
+}
+.ncua-progress-bar__label--color-orange {
+  color: var(--orange-600);
+}
+.ncua-progress-bar__label--color-violet {
+  color: var(--violet-600);
+}
+.ncua-progress-bar__label--color-gray {
+  color: var(--gray-600);
+}
+.ncua-progress-bar__labels--multiple {
+  position: relative;
+  width: 100%;
+  margin-top: 4px;
+  height: 20px;
+}
 
 .ncua-empty-state {
   display: flex;
@@ -3426,11 +4798,20 @@ button {
   margin-top: 16px;
 }
 
-.ncua-tab-button {
+.ncua-horizontal-tab {
+  position: relative;
+  overflow-x: auto;
+}
+.ncua-horizontal-tab__item {
+  width: auto !important;
+}
+.ncua-horizontal-tab__item:last-child {
+  margin-right: 0 !important;
+}
+.ncua-horizontal-tab .ncua-tab-button {
   display: inline-flex;
   gap: 8px;
   align-items: center;
-  justify-content: center;
   width: 100%;
   font-weight: var(--font-weights-commerce-sans-2);
   color: var(--gray-400);
@@ -3440,62 +4821,68 @@ button {
   padding: 5px 12px;
   height: 34px;
   font-size: var(--font-size-xs);
+  justify-content: center;
 }
-.ncua-tab-button:hover, .ncua-tab-button.is-active {
+.ncua-horizontal-tab .ncua-tab-button:hover, .ncua-horizontal-tab .ncua-tab-button.is-active {
   color: var(--gray-700);
 }
-.ncua-tab-button--sm {
+.ncua-horizontal-tab--sm .ncua-tab-button {
   padding: 5px 12px;
   height: 34px;
   font-size: var(--font-size-xs);
 }
-.ncua-tab-button--md {
+.ncua-horizontal-tab--sm.ncua-horizontal-tab--button-white .ncua-tab-button {
+  height: 28px;
+}
+.ncua-horizontal-tab--md .ncua-tab-button {
   padding: 7px 12px;
   height: 38px;
   font-size: var(--font-size-sm);
 }
-.ncua-tab-button--lg {
+.ncua-horizontal-tab--md.ncua-horizontal-tab--button-white .ncua-tab-button {
+  height: 32px;
+}
+.ncua-horizontal-tab--lg .ncua-tab-button {
   padding: 9px 14px;
   height: 44px;
   font-size: var(--font-size-md);
 }
-.ncua-tab-button--button-primary:hover, .ncua-tab-button--button-primary.is-active {
-  background-color: var(--gray-50);
+.ncua-horizontal-tab--lg.ncua-horizontal-tab--button-white .ncua-tab-button {
+  height: 40px;
 }
-.ncua-tab-button--button-primary:focus {
-  box-shadow: var(--focus-ring-4px-gray-100);
-}
-.ncua-tab-button--button-white {
-  padding: 5px 12px;
-  height: 28px;
-}
-.ncua-tab-button--button-white.ncua-tab-button--sm {
-  padding: 5px 12px;
-  height: 28px;
+.ncua-horizontal-tab--fullWidth {
+  width: 100%;
 }
-.ncua-tab-button--button-white.ncua-tab-button--md {
-  padding: 7px 12px;
-  height: 32px;
+.ncua-horizontal-tab--fullWidth .ncua-horizontal-tab__item {
+  width: 100% !important;
 }
-.ncua-tab-button--button-white.ncua-tab-button--lg {
-  padding: 9px 14px;
-  height: 40px;
+.ncua-horizontal-tab--fullWidth .swiper-slide {
+  flex-shrink: 1;
 }
-.ncua-tab-button--button-white:hover {
-  box-shadow: var(--shadow-sm);
+.ncua-horizontal-tab--underline::after, .ncua-horizontal-tab--underline-fill::after {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  content: "";
+  background-color: var(--gray-100);
 }
-.ncua-tab-button--button-white.is-active {
-  color: var(--gray-500);
-  box-shadow: var(--shadow-sm);
+.ncua-horizontal-tab--underline .ncua-tab-button, .ncua-horizontal-tab--underline-fill .ncua-tab-button {
+  border-radius: 0;
 }
-.ncua-tab-button--underline-fill {
+.ncua-horizontal-tab--underline-fill .ncua-tab-button {
   position: relative;
-  border-radius: 0;
 }
-.ncua-tab-button--underline-fill:hover, .ncua-tab-button--underline-fill.is-active, .ncua-tab-button--underline-fill.is-active:focus {
+.ncua-horizontal-tab--underline-fill .ncua-horizontal-tab__item:hover .ncua-tab-button,
+.ncua-horizontal-tab--underline-fill .ncua-tab-button.is-active,
+.ncua-horizontal-tab--underline-fill .ncua-tab-button.is-active:focus {
   background-color: var(--gray-100);
+  color: var(--gray-700);
 }
-.ncua-tab-button--underline-fill:hover::before, .ncua-tab-button--underline-fill.is-active::before, .ncua-tab-button--underline-fill.is-active:focus::before {
+.ncua-horizontal-tab--underline-fill .ncua-horizontal-tab__item:hover .ncua-tab-button::before,
+.ncua-horizontal-tab--underline-fill .ncua-tab-button.is-active::before,
+.ncua-horizontal-tab--underline-fill .ncua-tab-button.is-active:focus::before {
   width: 100%;
   height: 2px;
   content: "";
@@ -3504,13 +4891,15 @@ button {
   bottom: 0;
   left: 0;
 }
-.ncua-tab-button--underline {
-  border-radius: 0;
-}
-.ncua-tab-button--underline:hover, .ncua-tab-button--underline.is-active {
+.ncua-horizontal-tab--underline .ncua-tab-button {
   position: relative;
 }
-.ncua-tab-button--underline:hover::before, .ncua-tab-button--underline.is-active::before {
+.ncua-horizontal-tab--underline .ncua-horizontal-tab__item:hover .ncua-tab-button,
+.ncua-horizontal-tab--underline .ncua-tab-button.is-active {
+  color: var(--gray-700);
+}
+.ncua-horizontal-tab--underline .ncua-horizontal-tab__item:hover .ncua-tab-button::before,
+.ncua-horizontal-tab--underline .ncua-tab-button.is-active::before {
   width: 100%;
   height: 2px;
   content: "";
@@ -3519,29 +4908,6 @@ button {
   bottom: 0;
   left: 0;
 }
-.ncua-tab-button--line-vertical {
-  border-radius: 0;
-}
-.ncua-tab-button--line-vertical:hover, .ncua-tab-button--line-vertical.is-active, .ncua-tab-button--line-vertical.is-active:focus {
-  box-shadow: -2px 0 var(--gray-700);
-}
-
-.ncua-horizontal-tab {
-  position: relative;
-  overflow-x: auto;
-}
-.ncua-horizontal-tab__item {
-  width: auto !important;
-}
-.ncua-horizontal-tab--underline::after, .ncua-horizontal-tab--underline-fill::after {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  content: "";
-  background-color: var(--gray-100);
-}
 .ncua-horizontal-tab--button-primary .swiper-slide:first-child, .ncua-horizontal-tab--button-white .swiper-slide:first-child {
   padding-left: 4px;
 }
@@ -3549,17 +4915,25 @@ button {
   padding-right: 4px;
   margin-right: 0;
 }
+.ncua-horizontal-tab--button-primary .ncua-tab-button:hover, .ncua-horizontal-tab--button-primary .ncua-tab-button.is-active {
+  background-color: var(--gray-50);
+}
+.ncua-horizontal-tab--button-primary .ncua-tab-button:focus {
+  outline: none;
+  box-shadow: var(--focus-ring-4px-gray-100);
+}
+.ncua-horizontal-tab--button-primary .ncua-horizontal-tab__item:hover .ncua-tab-button {
+  background-color: var(--gray-50);
+  color: var(--gray-700);
+}
 .ncua-horizontal-tab--button-primary .swiper-slide {
   padding: 4px 0;
 }
 .ncua-horizontal-tab--button-white {
-  display: inline-block;
-  background: var(--gray-50);
+  background-color: var(--gray-50);
   border: 1px solid var(--gray-100);
   border-radius: 8px;
-}
-.ncua-horizontal-tab--button-white .swiper-slide {
-  padding: 3px 0;
+  display: inline-block;
 }
 .ncua-horizontal-tab--button-white .ncua-tab-button {
   background-color: var(--gray-50);
@@ -3567,20 +4941,55 @@ button {
 .ncua-horizontal-tab--button-white .ncua-tab-button:hover, .ncua-horizontal-tab--button-white .ncua-tab-button.is-active {
   background-color: var(--base-white);
   border-radius: 6px;
-  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.06);
+  box-shadow: var(--shadow-sm);
   color: var(--gray-500);
 }
-.ncua-horizontal-tab--fullWidth {
-  width: 100%;
+.ncua-horizontal-tab--button-white .ncua-tab-button:focus {
+  outline: none;
+  box-shadow: var(--shadow-sm);
 }
-.ncua-horizontal-tab--fullWidth .ncua-horizontal-tab__item {
-  width: 100% !important;
+.ncua-horizontal-tab--button-white .swiper-slide {
+  padding: 3px 0;
 }
-.ncua-horizontal-tab--fullWidth .swiper-slide {
-  flex-shrink: 1;
+.ncua-horizontal-tab--button-white .ncua-horizontal-tab__item:hover .ncua-tab-button {
+  background-color: var(--base-white);
+  border-radius: 6px;
+  box-shadow: var(--shadow-sm);
+  color: var(--gray-500);
 }
-.ncua-horizontal-tab__item:last-child {
-  margin-right: 0 !important;
+.ncua-horizontal-tab--line-vertical .ncua-tab-button {
+  border-radius: 0;
+}
+.ncua-horizontal-tab--line-vertical .ncua-tab-button:hover, .ncua-horizontal-tab--line-vertical .ncua-tab-button.is-active, .ncua-horizontal-tab--line-vertical .ncua-tab-button.is-active:focus {
+  box-shadow: -2px 0 var(--gray-700);
+}
+.ncua-horizontal-tab--line-vertical .ncua-horizontal-tab__item:hover .ncua-tab-button {
+  box-shadow: -2px 0 var(--gray-700);
+  color: var(--gray-700);
+}
+.ncua-horizontal-tab__item:has(.ncua-tab-close) {
+  position: relative;
+}
+.ncua-horizontal-tab__item:has(.ncua-tab-close) .ncua-tab-button {
+  padding-inline-end: 34px;
+}
+.ncua-horizontal-tab__item:has(.ncua-tab-close) .ncua-tab-close {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  transform: translateY(-50%);
+  width: 14px;
+  height: 14px;
+  padding: 0;
+  background-color: transparent;
+  color: var(--gray-300);
+  cursor: pointer;
+}
+.ncua-horizontal-tab__item:has(.ncua-tab-close) .ncua-tab-close svg {
+  vertical-align: top;
+}
+.ncua-horizontal-tab__item:has(.ncua-tab-close) .ncua-tab-close:hover {
+  color: var(--gray-600);
 }
 
 .ncua-vertical-tab {
@@ -3589,11 +4998,36 @@ button {
   flex-direction: column;
   gap: 4px;
 }
+.ncua-vertical-tab .ncua-tab-button {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  width: 100%;
+  font-weight: var(--font-weights-commerce-sans-2);
+  color: var(--gray-400);
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: transparent;
+  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--button-primary .ncua-tab-button:hover, .ncua-vertical-tab--button-primary .ncua-tab-button.is-active {
+  background-color: var(--gray-50);
+}
+.ncua-vertical-tab--button-primary .ncua-tab-button:focus {
+  outline: none;
+  box-shadow: var(--focus-ring-4px-gray-100);
+}
 .ncua-vertical-tab--button-white {
-  padding: 4px;
   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);
@@ -3604,8 +5038,15 @@ button {
   box-shadow: var(--shadow-sm);
   color: var(--gray-500);
 }
-.ncua-vertical-tab .ncua-tab-button {
-  justify-content: flex-start;
+.ncua-vertical-tab--button-white .ncua-tab-button:focus {
+  outline: none;
+  box-shadow: var(--shadow-sm);
+}
+.ncua-vertical-tab--line-vertical .ncua-tab-button {
+  border-radius: 0;
+}
+.ncua-vertical-tab--line-vertical .ncua-tab-button:hover, .ncua-vertical-tab--line-vertical .ncua-tab-button.is-active, .ncua-vertical-tab--line-vertical .ncua-tab-button.is-active:focus {
+  box-shadow: -2px 0 var(--gray-700);
 }
 
 .ncua-progress-circle {
@@ -3749,6 +5190,233 @@ button {
   top: 80%;
 }
 
+.ncua-file-input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.ncua-file-input__input-container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.ncua-file-input__label {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ncua-file-input__file-tags {
+  display: flex;
+  padding: 12px 8px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  align-self: stretch;
+  background: var(--gray-50);
+}
+.ncua-file-input__file-tag-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+.ncua-file-input__file-image {
+  width: 20px;
+  height: 20px;
+  object-fit: cover;
+}
+.ncua-file-input__hint-list {
+  margin: 0;
+  list-style: disc;
+  color: var(--gray-400);
+  padding-left: 16px;
+}
+.ncua-file-input--xs {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-file-input--sm {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-file-input--xs .ncua-file-input__input-container {
+  gap: 4px;
+}
+.ncua-file-input--sm .ncua-file-input__input-container {
+  gap: 6px;
+}
+.ncua-file-input--xs .ncua-file-input__hint-list {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-file-input--sm .ncua-file-input__hint-list {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.ncua-image-file-input {
+  display: flex;
+  gap: 8px;
+}
+.ncua-image-file-input__previews {
+  display: flex;
+  gap: 8px;
+}
+.ncua-image-file-input__empty-slot-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ncua-image-file-input__empty-slot-wrapper .ncua-tooltip {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 10;
+}
+.ncua-image-file-input__empty-slot-wrapper .ncua-tooltip svg {
+  opacity: 0;
+  cursor: pointer;
+}
+.ncua-image-file-input__preview-container {
+  position: relative;
+  border: 1px dashed var(--gray-200);
+  border-radius: var(--border-radius-md);
+  background-color: var(--gray-50);
+  background-repeat: no-repeat;
+  background-position: center;
+  overflow: hidden;
+  cursor: pointer;
+}
+.ncua-image-file-input__preview-container:has(.ncua-image-file-input__preview-image) {
+  border: none;
+}
+.ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image)) {
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+.ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image)):focus {
+  outline: 2px solid var(--primary-500);
+  outline-offset: 2px;
+}
+.ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image))[disabled], .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image)).is-disable {
+  background-color: var(--gray-100);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.ncua-image-file-input__preview-container::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(23, 24, 24, 0.9);
+  border-radius: var(--border-radius-md);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+.ncua-image-file-input__preview-container:has(.ncua-image-file-input__preview-image):hover::after {
+  opacity: 1;
+}
+.ncua-image-file-input__preview-container[disabled], .ncua-image-file-input__preview-container.is-disable, .ncua-image-file-input__preview-container.ncua-btn:hover {
+  border: 1px dashed var(--gray-200);
+}
+.ncua-image-file-input__preview-remove-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  z-index: 1;
+  padding: 0;
+  min-width: auto;
+  background: transparent;
+  color: var(--gray-200);
+}
+.ncua-image-file-input__preview-container:hover .ncua-image-file-input__preview-remove-button {
+  opacity: 1;
+}
+.ncua-image-file-input__preview-remove-button:hover:not([disabled], .is-disable) {
+  color: var(--gray-200);
+}
+.ncua-image-file-input__preview-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: var(--border-radius-md);
+  object-fit: cover;
+}
+.ncua-image-file-input .ncua-file-input__hint-list {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-image-file-input .ncua-file-input__hint-list li + li {
+  margin-top: 0;
+}
+.ncua-image-file-input .ncua-file-input__input-container:has(.ncua-label:empty) {
+  gap: 0;
+}
+.ncua-image-file-input--xs {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-image-file-input--xs .ncua-image-file-input__previews {
+  height: 48px;
+  min-width: 48px;
+}
+.ncua-image-file-input--xs .ncua-image-file-input__empty-slot-wrapper .ncua-tooltip svg {
+  width: 48px;
+  height: 48px;
+}
+.ncua-image-file-input--xs .ncua-image-file-input__preview-container {
+  width: 48px;
+  height: 48px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4.16669V15.8334M4.16669 10H15.8334' stroke='%23757678' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+.ncua-image-file-input--xs .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image))[disabled], .ncua-image-file-input--xs .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image)).is-disable {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4.16669V15.8334M4.16669 10H15.8334' stroke='%23d3d4d8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+.ncua-image-file-input--xs .ncua-image-file-input__empty-slot-wrapper .ncua-tooltip .ncua-tooltip__bg {
+  top: auto;
+  bottom: -20px;
+}
+.ncua-image-file-input--sm {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-image-file-input--sm .ncua-image-file-input__previews {
+  height: 80px;
+  min-width: 80px;
+}
+.ncua-image-file-input--sm .ncua-image-file-input__empty-slot-wrapper .ncua-tooltip svg {
+  width: 80px;
+  height: 80px;
+}
+.ncua-image-file-input--sm .ncua-image-file-input__preview-container {
+  width: 80px;
+  height: 80px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4.16669V15.8334M4.16669 10H15.8334' stroke='%23757678' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+.ncua-image-file-input--sm .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image))[disabled], .ncua-image-file-input--sm .ncua-image-file-input__preview-container:not(:has(.ncua-image-file-input__preview-image)).is-disable {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 4.16669V15.8334M4.16669 10H15.8334' stroke='%23d3d4d8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+.ncua-image-file-input--sm .ncua-image-file-input__empty-slot-wrapper .ncua-tooltip .ncua-tooltip__bg {
+  top: auto;
+  bottom: -16px;
+}
+.ncua-image-file-input--xs .ncua-file-input {
+  gap: 8px;
+}
+.ncua-image-file-input--sm .ncua-file-input {
+  gap: 16px;
+}
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;