@ncds/ui-admin 0.0.34 → 0.0.35

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

@@ -0,0 +1,3653 @@
+:root {
+  --primary-red-50: #fffafd;
+  --primary-red-100: #ffeaee;
+  --primary-red-200: #fecbd2;
+  --primary-red-300: #ff9fa5;
+  --primary-red-400: #f86f76;
+  --primary-red-450: #f7444e;
+  --primary-red-500: #ec1d31;
+  --primary-red-600: #dc0a2b;
+  --primary-red-700: #a60013;
+  --base-white: #ffffff;
+  --base-black: #000000;
+  --gray-50: #f6f7f9;
+  --gray-100: #eaecf0;
+  --gray-200: #d3d4d8;
+  --gray-300: #a4a5a8;
+  --gray-400: #757678;
+  --gray-450: #5e5e60;
+  --gray-500: #464748;
+  --gray-600: #2f2f30;
+  --gray-700: #171818;
+  --green-50: #f6fef9;
+  --green-100: #d3f8df;
+  --green-200: #aaf0c4;
+  --green-300: #73e2a3;
+  --green-400: #3ccb7f;
+  --green-500: #099250;
+  --green-600: #087443;
+  --green-700: #095c37;
+  --blue-50: #f5faff;
+  --blue-100: #e0efff;
+  --blue-200: #b2ddff;
+  --blue-300: #84caff;
+  --blue-400: #53b1fd;
+  --blue-500: #1570ef;
+  --blue-600: #1849a9;
+  --blue-700: #194185;
+  --pink-50: #fef6fb;
+  --pink-100: #fce7f6;
+  --pink-200: #fcceee;
+  --pink-300: #faa7e0;
+  --pink-400: #f670c7;
+  --pink-500: #dd2590;
+  --pink-600: #c11574;
+  --pink-700: #851651;
+  --orange-50: #fefaf5;
+  --orange-100: #fdead7;
+  --orange-200: #f9dbaf;
+  --orange-300: #f7b27a;
+  --orange-400: #f38744;
+  --orange-500: #e4501e;
+  --orange-600: #b93815;
+  --orange-700: #772917;
+  --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;
+  --shadow-xs: 0px 1px 2px 0px #1018280d;
+  --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
+  --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
+  --shadow-xs-focused-4px-primary-color-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
+  --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
+  --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
+  --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
+  --shadow-sm-focused-4px-primary-color-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
+  --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
+  --shadow-sm-focused-4px-error-100: 0px 0px 0px 4px #fee4e2, 0px 1px 2px 0px #1018280d;
+  --shadow-md: 0px 4px 8px -2px #1018281a, 0px 2px 4px -2px #1018280f;
+  --shadow-lg: 0px 12px 16px -4px #10182814, 0px 4px 6px -2px #10182808;
+  --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;
+  --line-heights-display-xl: 76px;
+  --line-heights-display-lg: 60px;
+  --line-heights-display-md: 46px;
+  --line-heights-display-sm: 38px;
+  --line-heights-display-xs: 32px;
+  --line-heights-xl: 30px;
+  --line-heights-lg: 28px;
+  --line-heights-md: 24px;
+  --line-heights-sm: 22px;
+  --line-heights-xs: 18px;
+  --line-heights-xxs: 16px;
+  --line-heights-xxxs: 14px;
+  --font-weights-commerce-sans-0: 400;
+  --font-weights-commerce-sans-1: 500;
+  --font-weights-commerce-sans-2: 700;
+  --font-size-xxxs: 11px;
+  --font-size-xxs: 12px;
+  --font-size-xs: 13px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-display-xs: 24px;
+  --font-size-display-sm: 30px;
+  --font-size-display-md: 36px;
+  --font-size-display-lg: 48px;
+  --font-size-display-xl: 60px;
+}
+
+@font-face {
+  font-family: "CommerceSans";
+  font-weight: 400;
+  font-style: normal;
+  src: url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Regular.woff") format("woff"), url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Regular.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-family: "CommerceSans";
+  font-weight: 500;
+  font-style: normal;
+  src: url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Medium.woff") format("woff"), url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Medium.woff2") format("woff2");
+  font-display: swap;
+}
+@font-face {
+  font-family: "CommerceSans";
+  font-weight: 700;
+  font-style: normal;
+  src: url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Bold.woff") format("woff"), url("https://rlyiz0wtg.toastcdn.net/CommerceSans-Bold.woff2") format("woff2");
+  font-display: swap;
+}
+* {
+  margin: 0;
+}
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "CommerceSans", sans-serif;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+fieldset {
+  border: 0;
+}
+
+input,
+button,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  border: 0;
+}
+
+.a11y {
+  position: absolute;
+  overflow: hidden;
+  margin: -1px;
+  width: 1px;
+  height: 1px;
+  clip: rect(0, 0, 0, 0);
+}
+
+.bold {
+  font-weight: bold;
+}
+
+.ncua-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.ncua-link--link-gray {
+  color: var(--gray-500);
+}
+.ncua-link--link-gray:hover, .ncua-link--link-gray:hover:not(.is-disable) {
+  color: var(--gray-700);
+}
+.ncua-link--link-gray.is-disable {
+  color: var(--gray-200);
+  pointer-events: none;
+  cursor: default;
+}
+.ncua-link--link-color {
+  color: var(--blue-500);
+}
+.ncua-link--link-color:hover, .ncua-link--link-color:hover:not(.is-disable) {
+  color: var(--blue-600);
+}
+.ncua-link--link-color.is-disable {
+  color: var(--gray-200);
+  pointer-events: none;
+  cursor: default;
+}
+.ncua-link--sm {
+  font-size: var(--font-size-xs);
+}
+.ncua-link--md {
+  font-size: var(--font-size-sm);
+}
+.ncua-link--lg {
+  font-size: var(--font-size-md);
+}
+.ncua-link__icon {
+  width: 20px;
+  height: 20px;
+}
+:where(.ncua-link--lg) .ncua-link__icon {
+  width: 24px;
+  height: 24px;
+}
+
+:root {
+  --button-height-xxs: 24px;
+  --button-height-xs: 28px;
+  --button-height-sm: 36px;
+  --button-height-md: 40px;
+}
+
+.ncua-btn {
+  border: 0;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  line-height: normal;
+  color: inherit;
+  transition: background-color 0.2s ease-in-out;
+}
+.ncua-btn__label {
+  pointer-events: none;
+}
+.ncua-btn svg {
+  pointer-events: none;
+}
+.ncua-btn--primary {
+  box-shadow: var(--shadow-xs);
+  background-color: var(--primary-red-450);
+  border: 1px solid var(--primary-red-500);
+  color: var(--base-white);
+}
+.ncua-btn--primary:hover:not([disabled], .is-disable) {
+  background-color: var(--primary-red-600);
+  border: 1px solid var(--primary-red-700);
+  color: var(--base-white);
+}
+.ncua-btn--primary:focus:not([disabled], .is-disabled) {
+  background-color: var(--primary-red-450);
+  border: 1px solid var(--primary-red-500);
+  color: var(--base-white);
+  box-shadow: var(--shadow-xs-focused-4px-primary-color-100);
+}
+.ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
+  background-color: var(--primary-red-100);
+  border: 1px solid var(--primary-red-200);
+  color: var(--primary-red-300);
+  cursor: default;
+}
+.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);
+}
+.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);
+}
+.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);
+}
+.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);
+  cursor: default;
+}
+.ncua-btn--secondary-gray {
+  box-shadow: var(--shadow-xs);
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  color: var(--gray-700);
+}
+.ncua-btn--secondary-gray:hover:not([disabled], .is-disable) {
+  background-color: var(--gray-50);
+  border: 1px solid var(--gray-200);
+  color: var(--gray-700);
+}
+.ncua-btn--secondary-gray:focus:not([disabled], .is-disabled) {
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  color: var(--gray-700);
+  box-shadow: var(--shadow-xs-focused-4px-gray-100);
+}
+.ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  color: var(--gray-200);
+  cursor: default;
+}
+.ncua-btn--tertiary {
+  color: var(--blue-500);
+}
+.ncua-btn--tertiary:hover:not([disabled], .is-disable) {
+  color: var(--blue-600);
+}
+.ncua-btn--tertiary:disabled, .ncua-btn--tertiary.is-disable {
+  color: var(--gray-200);
+  cursor: default;
+}
+.ncua-btn--tertiary-gray {
+  color: var(--gray-700);
+}
+.ncua-btn--tertiary-gray:hover:not([disabled], .is-disable) {
+  color: var(--gray-700);
+}
+.ncua-btn--tertiary-gray:disabled, .ncua-btn--tertiary-gray.is-disable {
+  color: var(--gray-200);
+  cursor: default;
+}
+.ncua-btn--link {
+  color: var(--blue-500);
+}
+.ncua-btn--link:hover:not([disabled], .is-disable) {
+  color: var(--blue-600);
+}
+.ncua-btn--link:disabled, .ncua-btn--link.is-disable {
+  color: var(--gray-200);
+  cursor: default;
+}
+.ncua-btn--link-gray {
+  color: var(--gray-500);
+}
+.ncua-btn--link-gray:hover:not([disabled], .is-disable) {
+  color: var(--gray-700);
+}
+.ncua-btn--link-gray:disabled, .ncua-btn--link-gray.is-disable {
+  color: var(--gray-200);
+  cursor: default;
+}
+.ncua-btn--destructive {
+  box-shadow: var(--shadow-xs);
+  background-color: var(--primary-red-500);
+  border: 1px solid var(--primary-red-600);
+  color: var(--base-white);
+}
+.ncua-btn--destructive:hover:not([disabled], .is-disable) {
+  background-color: var(--primary-red-700);
+  border: 1px solid var(--primary-red-700);
+  color: var(--base-white);
+}
+.ncua-btn--destructive:focus:not([disabled], .is-disabled) {
+  background-color: var(--primary-red-500);
+  border: 1px solid var(--primary-red-600);
+  color: var(--base-white);
+  box-shadow: var(--shadow-xs-focused-4px-primary-color-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);
+  cursor: default;
+}
+.ncua-btn--xxs {
+  padding: 5px 8px;
+  gap: 4px;
+  height: var(--button-height-xxs);
+  font-size: var(--font-size-xxxs);
+  border-radius: 4px;
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xxxs);
+}
+.ncua-btn--xs {
+  padding: 5px 10px;
+  gap: 4px;
+  height: var(--button-height-xs);
+  font-size: var(--font-size-xs);
+  border-radius: 6px;
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+}
+.ncua-btn--sm {
+  padding: 7px 14px;
+  gap: 8px;
+  height: var(--button-height-sm);
+  font-size: var(--font-size-sm);
+  border-radius: 6px;
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-sm);
+}
+.ncua-btn--md {
+  padding: 10px 16px;
+  gap: 8px;
+  height: var(--button-height-md);
+  font-size: var(--font-size-sm);
+  border-radius: 8px;
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-md);
+}
+.ncua-btn.is-full {
+  width: 100%;
+}
+.ncua-btn.is-link {
+  padding: 0;
+  border: 0;
+  box-shadow: none;
+}
+.ncua-btn--link-gray {
+  color: var(--gray-500);
+}
+.ncua-btn--link-gray:hover, .ncua-btn--link-gray:hover:not(.is-disable) {
+  color: var(--gray-700);
+}
+.ncua-btn--link-gray.is-disable {
+  color: var(--gray-200);
+  pointer-events: none;
+  cursor: default;
+}
+.ncua-btn--link-color {
+  color: var(--blue-500);
+}
+.ncua-btn--link-color:hover, .ncua-btn--link-color:hover:not(.is-disable) {
+  color: var(--blue-600);
+}
+.ncua-btn--link-color.is-disable {
+  color: var(--gray-200);
+  pointer-events: none;
+  cursor: default;
+}
+.ncua-btn svg {
+  flex: none;
+}
+.ncua-btn span {
+  z-index: 0;
+}
+
+[class*=ncua-btn--link] {
+  padding: 0;
+  height: auto !important;
+  background-color: transparent !important;
+  vertical-align: top;
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+
+.ncua-btn--xxs.only-icon {
+  padding: 0;
+  width: var(--button-height-xxs);
+}
+
+.ncua-btn--xs.only-icon {
+  padding: 0;
+  width: var(--button-height-xs);
+}
+
+.ncua-btn--sm.only-icon {
+  padding: 0;
+  width: var(--button-height-sm);
+}
+
+.ncua-btn--md.only-icon {
+  padding: 0;
+  width: var(--button-height-md);
+}
+
+.has-underline {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.ncua-button-group {
+  display: inline-flex;
+  overflow: hidden;
+  color: var(--gray-400);
+}
+.ncua-button-group__item {
+  position: relative;
+  cursor: pointer;
+  color: inherit;
+  border: none;
+  outline: none;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  background-color: var(--base-white);
+  gap: 8px;
+}
+.ncua-button-group__item[href] {
+  text-decoration: none;
+}
+.ncua-button-group__item[href]:hover {
+  text-decoration: none;
+}
+.ncua-button-group__item:first-child {
+  padding-left: 0;
+}
+.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 {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 12px;
+  background-color: var(--gray-200);
+}
+.ncua-button-group--xs .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--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: 4px;
+}
+
+.ncua-button-group--sm .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--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: 6px;
+}
+:where(.ncua-button-group--sm.has-border) {
+  border-radius: 6px;
+}
+
+.ncua-button-group--md .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--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);
+}
+.ncua-button-group--md .ncua-button-group__item:where(.is-only-icon) {
+  padding: 10px;
+}
+:where(.ncua-button-group--md.has-border) {
+  border-radius: 6px;
+}
+
+.ncua-button-group--lg .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--lg .ncua-button-group__item.is-current, .ncua-button-group--lg .ncua-button-group__item:hover, .ncua-button-group--lg .ncua-button-group__item:focus) {
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-button-group--lg .ncua-button-group__item:where(.is-only-icon) {
+  padding: 10px;
+}
+:where(.ncua-button-group--lg.has-border) {
+  border-radius: 8px;
+}
+
+:where(.ncua-button-group.has-border) {
+  box-shadow: var(--shadow-xs);
+  border: 1px solid var(--gray-200);
+}
+: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:nth-child(n+2) {
+  border-left: 1px solid var(--gray-200);
+}
+:where(.ncua-button-group.has-border) .ncua-button-group__item svg {
+  display: block;
+}
+
+.ncua-button-close-x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-400);
+  border-radius: 8px;
+  cursor: pointer;
+  background-color: transparent;
+}
+.ncua-button-close-x:hover {
+  background-color: var(--gray-50);
+  color: var(--gray-500);
+}
+.ncua-button-close-x:focus {
+  background-color: var(--gray-50);
+}
+.ncua-button-close-x--xs {
+  width: 28px;
+  height: 28px;
+}
+.ncua-button-close-x--sm {
+  width: 36px;
+  height: 36px;
+}
+.ncua-button-close-x--md {
+  width: 40px;
+  height: 40px;
+}
+.ncua-button-close-x--lg {
+  width: 44px;
+  height: 44px;
+}
+.ncua-button-close-x--dark {
+  color: var(--gray-100);
+}
+.ncua-button-close-x--dark:hover {
+  color: var(--base-white);
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.ncua-button-close-x--dark:focus {
+  color: var(--gray-100);
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.ncua-checkbox-input {
+  position: relative;
+  flex: none;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  background-color: var(--base-white);
+  border-radius: 4px;
+}
+.ncua-checkbox-input :where(input) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+  border: 1px solid var(--gray-200);
+  font: inherit;
+  border-radius: 4px;
+}
+.ncua-checkbox-input :where(input):focus {
+  border-color: var(--gray-400);
+  box-shadow: var(--focus-ring-4px-gray-100);
+}
+.ncua-checkbox-input :where(input):checked {
+  border-color: var(--gray-700);
+  background-color: var(--gray-50);
+  outline: none;
+}
+.ncua-checkbox-input :where(input):disabled {
+  border-color: var(--gray-200);
+  background-color: var(--gray-100);
+}
+.ncua-checkbox-input.destructive :where(input) {
+  border-color: var(--primary-red-600);
+}
+.ncua-checkbox-input.destructive :where(input):focus {
+  border-color: var(--primary-red-600);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
+}
+.ncua-checkbox-input:hover {
+  border-color: var(--gray-600);
+  background-color: var(--gray-100);
+  border-radius: 4px;
+}
+.ncua-checkbox-input__ico {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+.ncua-checkbox-input :not(input:checked + .ncua-checkbox-input__ico) > svg {
+  display: none;
+}
+.ncua-checkbox-input :disabled + .ncua-checkbox-input__ico {
+  border-radius: 4px;
+}
+
+.ncua-checkbox-field {
+  position: relative;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  cursor: pointer;
+}
+.ncua-checkbox-field__text {
+  display: block;
+  color: var(--gray-500);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-checkbox-field__support-text {
+  color: var(--gray-400);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-checkbox-field:hover .ncua-checkbox-field__input {
+  border-color: var(--gray-700);
+  background-color: var(--gray-50);
+  border-radius: 4px;
+}
+.ncua-checkbox-field--md .ncua-checkbox-field__text,
+.ncua-checkbox-field--md .ncua-checkbox-field__support-text {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-checkbox-field.has-text {
+  display: inline-flex;
+  gap: 6px;
+}
+.ncua-checkbox-field.has-text .ncua-checkbox-field__input {
+  transform: translateY(1px);
+}
+.ncua-checkbox-field.has-text.ncua-checkbox-field--md .ncua-checkbox-field__input {
+  transform: translateY(3px);
+}
+
+.ncua-featured-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.ncua-featured-icon--sm {
+  width: 32px;
+  height: 32px;
+}
+.ncua-featured-icon--md {
+  width: 40px;
+  height: 40px;
+}
+.ncua-featured-icon--lg {
+  width: 48px;
+  height: 48px;
+}
+.ncua-featured-icon--xl {
+  width: 56px;
+  height: 56px;
+}
+.ncua-featured-icon--light-circle.ncua-featured-icon--neutral {
+  color: var(--gray-500);
+  background-color: var(--gray-100);
+  border-radius: 50%;
+}
+.ncua-featured-icon--light-circle.ncua-featured-icon--error {
+  color: var(--primary-red-500);
+  background-color: var(--primary-red-100);
+  border-radius: 50%;
+}
+.ncua-featured-icon--light-circle.ncua-featured-icon--warning {
+  color: var(--orange-500);
+  background-color: var(--orange-100);
+  border-radius: 50%;
+}
+.ncua-featured-icon--light-circle.ncua-featured-icon--success {
+  color: var(--green-500);
+  background-color: var(--green-100);
+  border-radius: 50%;
+}
+.ncua-featured-icon--dark-circle.ncua-featured-icon--neutral {
+  color: var(--base-white);
+  background-color: var(--gray-400);
+  border-radius: 50%;
+}
+.ncua-featured-icon--dark-circle.ncua-featured-icon--error {
+  color: var(--base-white);
+  background-color: var(--primary-red-400);
+  border-radius: 50%;
+}
+.ncua-featured-icon--dark-circle.ncua-featured-icon--warning {
+  color: var(--base-white);
+  background-color: var(--orange-400);
+  border-radius: 50%;
+}
+.ncua-featured-icon--dark-circle.ncua-featured-icon--success {
+  color: var(--base-white);
+  background-color: var(--green-400);
+  border-radius: 50%;
+}
+.ncua-featured-icon--outline-circle {
+  border-radius: 50%;
+}
+.ncua-featured-icon--outline-circle.ncua-featured-icon--neutral {
+  color: var(--gray-500);
+}
+.ncua-featured-icon--outline-circle.ncua-featured-icon--neutral .ncua-featured-icon__outline {
+  border-color: var(--gray-500);
+}
+.ncua-featured-icon--outline-circle.ncua-featured-icon--error {
+  color: var(--primary-red-500);
+}
+.ncua-featured-icon--outline-circle.ncua-featured-icon--error .ncua-featured-icon__outline {
+  border-color: var(--primary-red-500);
+}
+.ncua-featured-icon--outline-circle.ncua-featured-icon--warning {
+  color: var(--orange-500);
+}
+.ncua-featured-icon--outline-circle.ncua-featured-icon--warning .ncua-featured-icon__outline {
+  border-color: var(--orange-500);
+}
+.ncua-featured-icon--outline-circle.ncua-featured-icon--success {
+  color: var(--green-500);
+}
+.ncua-featured-icon--outline-circle.ncua-featured-icon--success .ncua-featured-icon__outline {
+  border-color: var(--green-500);
+}
+.ncua-featured-icon--square-outline.ncua-featured-icon--sm {
+  border-radius: 6px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  box-shadow: var(--shadow-xs);
+}
+.ncua-featured-icon--square-outline.ncua-featured-icon--md {
+  border-radius: 8px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  box-shadow: var(--shadow-xs);
+}
+.ncua-featured-icon--square-outline.ncua-featured-icon--lg {
+  border-radius: 10px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  box-shadow: var(--shadow-xs);
+}
+.ncua-featured-icon--square-outline.ncua-featured-icon--xl {
+  border-radius: 12px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  box-shadow: var(--shadow-xs);
+}
+.ncua-featured-icon__outline {
+  position: absolute;
+  border-style: solid;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.ncua-featured-icon__outline--inner {
+  width: 75%;
+  height: 75%;
+  border-width: 2px;
+  opacity: 0.3;
+}
+.ncua-featured-icon__outline--outer {
+  width: 100%;
+  height: 100%;
+  border-width: 2px;
+  opacity: 0.1;
+}
+
+.ncua-divider {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+.ncua-divider__line {
+  flex: 1;
+  height: 1px;
+  background-color: var(--gray-100);
+}
+.ncua-divider__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ncua-divider--background-fill {
+  padding: 8px 0;
+  background-color: var(--gray-50);
+  border-radius: 8px;
+}
+.ncua-divider--text {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+  color: var(--gray-500);
+}
+.ncua-divider--heading {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-md);
+  color: var(--gray-700);
+}
+
+.ncua-dot {
+  display: inline-block;
+  border-radius: 50%;
+  margin: 1px;
+}
+.ncua-dot--sm {
+  width: 6px;
+  height: 6px;
+}
+.ncua-dot--md {
+  width: 8px;
+  height: 8px;
+}
+.ncua-dot--lg {
+  width: 10px;
+  height: 10px;
+}
+.ncua-dot--neutral {
+  background-color: var(--gray-500);
+}
+.ncua-dot--error {
+  background-color: var(--primary-red-500);
+}
+.ncua-dot--warning {
+  background-color: var(--orange-500);
+}
+.ncua-dot--success {
+  background-color: var(--green-500);
+}
+.ncua-dot--blue {
+  background-color: var(--blue-500);
+}
+.ncua-dot--pink {
+  background-color: var(--pink-500);
+}
+.ncua-dot--disabled {
+  background-color: var(--gray-300);
+}
+
+.ncua-dropdown {
+  position: relative;
+  display: inline-block;
+}
+.ncua-dropdown__trigger {
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ncua-dropdown__trigger--icon {
+  width: 20px;
+  height: 20px;
+}
+.ncua-dropdown__trigger--icon + .ncua-dropdown__menu {
+  top: calc(100% - 4px);
+}
+.ncua-dropdown__trigger--icon svg {
+  width: 100%;
+  height: 100%;
+}
+.ncua-dropdown__trigger--avatar + .ncua-dropdown__menu {
+  top: calc(100% - 8px);
+  left: 5px;
+}
+.ncua-dropdown--right .ncua-dropdown__trigger--avatar + .ncua-dropdown__menu {
+  left: auto;
+  right: 5px;
+}
+.ncua-dropdown__trigger--avatar .ncua-dropdown__avatar {
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 4px solid var(--gray-50);
+}
+.ncua-dropdown__trigger--avatar .ncua-dropdown__avatar img {
+  width: 32px;
+  height: 32px;
+  object-fit: cover;
+}
+.ncua-dropdown__trigger--button {
+  height: 28px;
+  padding: 5px 10px;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-100);
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  color: var(--gray-700);
+  box-shadow: var(--shadow-xs);
+}
+.ncua-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 240px;
+  background-color: var(--base-white);
+  border-radius: 8px;
+  border: 1px solid var(--gray-100);
+  box-shadow: var(--shadow-md);
+  overflow: hidden;
+}
+.ncua-dropdown--right .ncua-dropdown__menu {
+  left: auto;
+  right: 0;
+}
+.ncua-dropdown__header {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--gray-100);
+}
+.ncua-dropdown__header-avatar-group {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.ncua-dropdown__header .ncua-dropdown__avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ncua-dropdown__header .ncua-dropdown__avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.ncua-dropdown__header-text {
+  display: flex;
+  flex-direction: column;
+}
+.ncua-dropdown__header-title {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  color: var(--gray-600);
+  line-height: var(--line-heights-xs);
+}
+.ncua-dropdown__header-subtitle {
+  font-size: var(--font-size-xxxs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  color: var(--gray-400);
+  line-height: var(--line-heights-xxxs);
+}
+.ncua-dropdown__menu-items {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.ncua-dropdown__group {
+  padding: 4px 0;
+  border-bottom: 1px solid var(--gray-100);
+}
+.ncua-dropdown__group:last-child {
+  border-bottom: none;
+}
+.ncua-dropdown__item {
+  cursor: pointer;
+  padding: 2px 6px;
+  width: 100%;
+  position: relative;
+}
+.ncua-dropdown__item-clickable-layer {
+  position: absolute;
+  top: 2px;
+  left: 6px;
+  right: 6px;
+  bottom: 2px;
+  border-radius: 6px;
+  background: transparent;
+  z-index: 1;
+}
+.ncua-dropdown__item-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 7px 10px;
+  border-radius: 6px;
+}
+.ncua-dropdown__item:hover .ncua-dropdown__item-content {
+  background-color: var(--gray-50);
+}
+.ncua-dropdown__item-text-group {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--gray-500);
+}
+.ncua-dropdown__item-icon {
+  width: 14px;
+  height: 14px;
+}
+.ncua-dropdown__item-text {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  line-height: var(--line-heights-xs);
+}
+.ncua-dropdown__item-shortcut {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  color: var(--gray-400);
+  line-height: var(--line-heights-xs);
+}
+.ncua-dropdown__item.is-disabled {
+  pointer-events: none;
+  cursor: default;
+}
+.ncua-dropdown__item.is-disabled .ncua-dropdown__item-text,
+.ncua-dropdown__item.is-disabled .ncua-dropdown__item-shortcut {
+  color: var(--gray-200);
+}
+.ncua-dropdown__item.is-disabled svg {
+  opacity: 0.5;
+}
+.ncua-dropdown__item.is-danger .ncua-dropdown__item-text {
+  color: var(--primary-red-700);
+}
+.ncua-dropdown__item.is-danger svg {
+  color: var(--primary-red-700);
+}
+
+.ncua-hint-text {
+  color: var(--gray-400);
+  margin-top: 0;
+}
+.ncua-hint-text.destructive {
+  color: var(--primary-red-600);
+}
+
+.ncua-input {
+  display: inline-flex;
+  flex-direction: column;
+  line-height: normal;
+  vertical-align: top;
+}
+.ncua-input > *:last-child {
+  margin-bottom: 0;
+}
+.ncua-input__label {
+  display: flex;
+  align-items: center;
+}
+.ncua-input__help-icon {
+  margin-left: 2px;
+  color: var(--gray-300);
+  width: 14px;
+  height: 14px;
+}
+.ncua-input__content {
+  box-shadow: var(--shadow-xs);
+  border-radius: 6px;
+}
+.ncua-input:where(:not([class*=textarea])) .ncua-input__content {
+  display: flex;
+}
+.ncua-input__field {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+}
+.ncua-input__field--xs {
+  padding: 4px 10px;
+}
+.ncua-input__field--md {
+  padding: 6px 12px;
+}
+.ncua-input__field {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  line-height: 1;
+}
+.ncua-input:focus-within :where(.ncua-input__field) {
+  border-color: var(--gray-400);
+  box-shadow: var(--shadow-xs-focused-3px-gray-100);
+  z-index: 1;
+}
+.ncua-input input,
+.ncua-input textarea {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  color: var(--gray-700);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+  background-color: var(--base-white);
+}
+.ncua-input input::-webkit-input-placeholder,
+.ncua-input textarea::-webkit-input-placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input::-moz-placeholder,
+.ncua-input textarea::-moz-placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input:-ms-input-placeholder,
+.ncua-input textarea:-ms-input-placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input::-ms-input-placeholder,
+.ncua-input textarea::-ms-input-placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input::placeholder,
+.ncua-input textarea::placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input:focus,
+.ncua-input textarea:focus {
+  outline: none;
+}
+.ncua-input .ncua-input__field {
+  border-radius: 6px;
+}
+.ncua-input--xs {
+  gap: 4px;
+}
+.ncua-input--xs input {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-input--md {
+  gap: 6px;
+}
+.ncua-input--md input {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-input--xs {
+  font-size: var(--font-size-xxs);
+}
+.ncua-input--md {
+  font-size: var(--font-size-xs);
+}
+.ncua-input input:-webkit-autofill, .ncua-input input:-webkit-autofill:hover, .ncua-input input:-webkit-autofill:focus, .ncua-input input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 30px var(--base-white) inset !important;
+}
+.ncua-input__icon-wrap {
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+}
+.ncua-input__clear {
+  border-radius: 10px;
+  background: var(--gray-100);
+}
+.ncua-input__clear-icon {
+  padding: 2px;
+  border-radius: 10px;
+}
+.ncua-input__validation-icon {
+  color: var(--green-500);
+}
+.ncua-input__destructive-icon {
+  color: var(--primary-red-600);
+}
+.ncua-input__password-icon {
+  color: var(--gray-300);
+}
+.ncua-input__left-icon {
+  margin-right: 8px;
+}
+.ncua-input__right-icon {
+  margin-left: 8px;
+}
+.ncua-input.destructive .ncua-input__field {
+  border-color: var(--primary-red-600);
+}
+.ncua-input.destructive:where(:focus-within) .ncua-input__field {
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
+}
+.ncua-input.is-disabled .ncua-input__content > :not(button) {
+  background-color: var(--gray-50);
+  border-color: var(--gray-200);
+}
+.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);
+  background-color: inherit;
+}
+.ncua-input.is-disabled .ncua-input__destructive-ico {
+  display: none;
+}
+.ncua-input.is-disabled .ncua-input__button {
+  color: var(--gray-200);
+}
+.ncua-input.full-width {
+  width: 100%;
+}
+
+.ncua-input__leading-text-wrap .ncua-input__leading-text {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+}
+.ncua-input__leading-text-wrap .ncua-input__leading-text--xs {
+  padding: 4px 10px;
+}
+.ncua-input__leading-text-wrap .ncua-input__leading-text--md {
+  padding: 6px 12px;
+}
+.ncua-input__leading-text-wrap .ncua-input__leading-text {
+  border-radius: 6px 0 0 6px;
+  border-right-width: 0;
+  color: var(--gray-400);
+  font-size: var(--font-size-sm);
+}
+.ncua-input__leading-text-wrap .ncua-input__leading-text + .ncua-input__field {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
+}
+
+.ncua-input__trailing-button .ncua-input__button {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+}
+.ncua-input__trailing-button .ncua-input__button--xs {
+  padding: 4px 10px;
+}
+.ncua-input__trailing-button .ncua-input__button--md {
+  padding: 6px 12px;
+}
+.ncua-input__trailing-button .ncua-input__button {
+  border-radius: 0 6px 6px 0;
+  border-left-width: 0;
+  color: var(--gray-700);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-input__trailing-button .ncua-input__button:not(:disabled) {
+  cursor: pointer;
+}
+.ncua-input__trailing-button .ncua-input__button--xs {
+  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--md {
+  padding: 7px 14px;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-input__trailing-button .ncua-input__field {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-right: -1px;
+}
+
+.ncua-input--textarea {
+  gap: 4px;
+  width: 100%;
+}
+.ncua-input--textarea--sm textarea {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-input--textarea--md textarea {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-input--textarea--sm {
+  font-size: var(--font-size-xxs);
+}
+.ncua-input--textarea--md {
+  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%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ncua-input__text-count {
+  color: var(--gray-400);
+}
+.ncua-input.destructive .ncua-input__text-count {
+  color: var(--primary-red-600);
+}
+
+.ncua-input__text-count-text-count {
+  color: var(--gray-500);
+}
+.ncua-input.destructive .ncua-input__text-count-text-count {
+  color: var(--primary-red-600);
+}
+
+.ncua-label {
+  display: flex;
+  gap: 4px;
+  color: var(--gray-600);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+:where(.ncua-label.is-required)::before {
+  content: "*";
+  color: var(--primary-red-500);
+}
+
+.ncua-modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 0 16px;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.ncua-modal {
+  background-color: var(--base-white);
+  border-radius: 12px;
+  width: 100%;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-xl);
+}
+.ncua-modal--sm {
+  max-width: 400px;
+}
+.ncua-modal--md {
+  max-width: 560px;
+}
+.ncua-modal--lg {
+  max-width: 640px;
+}
+.ncua-modal--xl {
+  max-width: 760px;
+}
+@media (max-width: 768px) {
+  .ncua-modal {
+    max-height: calc(100vh - 160px);
+  }
+}
+
+.ncua-modal__header {
+  padding: 16px 20px 16px;
+  border-bottom: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ncua-modal__header-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--gray-100);
+  margin: 0 0 16px;
+}
+.ncua-modal__header--left {
+  align-items: flex-start;
+}
+.ncua-modal__header--left .ncua-modal__title {
+  align-items: flex-start;
+  text-align: left;
+}
+.ncua-modal__header--center {
+  align-items: center;
+}
+.ncua-modal__header--center .ncua-modal__title {
+  align-items: center;
+  text-align: center;
+}
+.ncua-modal__header--center .ncua-modal__title .ncua-modal__title-text,
+.ncua-modal__header--center .ncua-modal__title .ncua-modal__title-subtitle {
+  text-align: center;
+}
+.ncua-modal__header--horizontal {
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 16px;
+}
+.ncua-modal__header--horizontal .ncua-modal__title {
+  flex: 1;
+}
+.ncua-modal__header--close-button.ncua-modal__header--left {
+  padding: 20px 56px 20px 20px;
+}
+
+.ncua-modal__title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+.ncua-modal__title .ncua-modal__title-text {
+  font-weight: var(--font-weights-commerce-sans-2);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+  color: var(--gray-700);
+}
+.ncua-modal__title .ncua-modal__title-subtitle {
+  font-weight: var(--font-weights-commerce-sans-0);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  color: var(--gray-400);
+}
+
+.ncua-modal__close-button {
+  position: absolute;
+  top: 10px;
+  right: 16px;
+}
+
+.ncua-modal__content {
+  padding: 0 20px 0;
+  overflow-y: auto;
+  flex: 1;
+}
+@media (max-width: 768px) {
+  .ncua-modal__content {
+    padding: 0 16px 0;
+  }
+}
+
+.ncua-modal__actions-wrapper {
+  padding: 16px 20px 16px;
+}
+.ncua-modal__actions-wrapper--checkbox {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 8px;
+}
+@media (max-width: 768px) {
+  .ncua-modal__actions-wrapper--checkbox {
+    flex-direction: column-reverse;
+  }
+}
+
+.ncua-modal__actions {
+  display: flex;
+  gap: 8px;
+}
+.ncua-modal__actions-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--gray-100);
+  margin: 16px 0 0;
+}
+.ncua-modal__actions--vertical {
+  flex-direction: column;
+}
+@media (max-width: 768px) {
+  .ncua-modal__actions--vertical {
+    flex-direction: column-reverse;
+  }
+}
+.ncua-modal__actions--horizontal {
+  flex-direction: row;
+}
+@media (max-width: 768px) {
+  .ncua-modal__actions--horizontal {
+    flex-direction: column-reverse;
+  }
+}
+.ncua-modal__actions--checkbox {
+  flex-direction: row;
+}
+@media (max-width: 768px) {
+  .ncua-modal__actions--checkbox {
+    width: 100%;
+    justify-content: stretch;
+    flex-direction: column-reverse;
+  }
+}
+.ncua-modal__actions--center {
+  justify-content: center;
+}
+.ncua-modal__actions--right {
+  justify-content: flex-end;
+}
+.ncua-modal__actions--stretch {
+  justify-content: stretch;
+}
+.ncua-modal__actions--stretch button {
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .ncua-modal__actions-checkbox {
+    width: 100%;
+  }
+}
+.ncua-modal__actions-checkbox-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+@media (max-width: 768px) {
+  .ncua-modal__actions-checkbox-content {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
+.ncua-floating-notification {
+  position: relative;
+  width: 100%;
+  padding: 16px;
+  max-width: 398px;
+  border: 1px solid var(--gray-200);
+  background-color: var(--base-white);
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+}
+@media (max-width: 768px) {
+  .ncua-floating-notification {
+    max-width: 100%;
+    padding: 22px 18px;
+  }
+}
+.ncua-floating-notification__content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.ncua-floating-notification__container {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+@media (max-width: 768px) {
+  .ncua-floating-notification__container {
+    flex-direction: column;
+  }
+}
+.ncua-floating-notification__text-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-right: 32px;
+}
+@media (max-width: 768px) {
+  .ncua-floating-notification__text-container {
+    padding-right: 0;
+  }
+}
+.ncua-floating-notification__title-wrapper {
+  width: 100%;
+  display: flex;
+  padding-right: 32px;
+}
+.ncua-floating-notification__title, .ncua-floating-notification__supporting-text {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+@media (max-width: 768px) {
+  .ncua-floating-notification__title, .ncua-floating-notification__supporting-text {
+    font-size: var(--font-size-md);
+    line-height: var(--line-heights-md);
+  }
+}
+.ncua-floating-notification__title {
+  color: var(--gray-600);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-floating-notification__supporting-text {
+  color: var(--gray-400);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-floating-notification__actions {
+  display: flex;
+  gap: 12px;
+  margin-top: 8px;
+}
+.ncua-floating-notification__close-button {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+}
+.ncua-floating-notification .ncua-notification__action-button {
+  min-height: 20px;
+  background: transparent;
+  border: none;
+  padding: 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-floating-notification .ncua-notification__action-button--secondary-gray {
+  color: var(--gray-700);
+  border: 1px solid var(--gray-200);
+  font-weight: var(--font-weights-commerce-sans-1);
+  box-shadow: var(--box-shadow-xs);
+  border-radius: 6px;
+  padding: 5px 10px;
+}
+.ncua-floating-notification .ncua-notification__action-button--link-gray {
+  color: var(--gray-700);
+}
+.ncua-floating-notification .ncua-notification__action-button--link {
+  color: var(--blue-500);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+
+.ncua-full-width-notification {
+  width: 100%;
+}
+.ncua-full-width-notification__container {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 8px 32px;
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification__container {
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+}
+.ncua-full-width-notification__content {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification__content {
+    position: relative;
+    gap: 0;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+.ncua-full-width-notification__content-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.ncua-full-width-notification__text-container {
+  flex: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification__text-container {
+    flex-direction: column;
+    gap: 4px;
+  }
+}
+.ncua-full-width-notification__title, .ncua-full-width-notification__supporting-text {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-full-width-notification__title {
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-full-width-notification__supporting-text {
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-full-width-notification__actions-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-full-width-notification__actions {
+  display: flex;
+  gap: 12px;
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification__actions {
+    margin-top: 16px;
+  }
+}
+.ncua-full-width-notification__close-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 8px;
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification__close-button {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+}
+.ncua-full-width-notification--neutral {
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: var(--gray-200);
+}
+.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 {
+  color: var(--gray-600);
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification--neutral {
+    border-width: 1px 0 0 0;
+    border-style: solid;
+  }
+}
+.ncua-full-width-notification--error {
+  color: var(--primary-red-600);
+  background-color: var(--primary-red-50);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: var(--primary-red-200);
+}
+.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 {
+  color: var(--primary-red-600);
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification--error {
+    border-width: 1px 0 0 0;
+    border-style: solid;
+  }
+}
+.ncua-full-width-notification--warning {
+  color: var(--orange-600);
+  background-color: var(--orange-50);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: var(--orange-200);
+}
+.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 {
+  color: var(--orange-600);
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification--warning {
+    border-width: 1px 0 0 0;
+    border-style: solid;
+  }
+}
+.ncua-full-width-notification--success {
+  color: var(--green-600);
+  background-color: var(--green-50);
+  border-style: solid;
+  border-width: 0 0 1px 0;
+  border-color: var(--green-200);
+}
+.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 {
+  color: var(--green-600);
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification--success {
+    border-width: 1px 0 0 0;
+    border-style: solid;
+  }
+}
+.ncua-full-width-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-full-width-notification .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification .ncua-notification__action-button--link {
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+@media (max-width: 768px) {
+  .ncua-full-width-notification__icon {
+    display: none;
+  }
+}
+
+.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--md .ncua-radio-field__text, .ncua-radio-field--md .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;
+}
+.ncua-radio-field.has-text .ncua-radio-field__input {
+  transform: translateY(1px);
+}
+.ncua-radio-field.has-text.ncua-radio-field--md .ncua-radio-field__input {
+  transform: translateY(3px);
+}
+
+.ncua-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--gray-200);
+  color: var(--gray-500);
+  line-height: 1.5;
+  font-weight: var(--font-weights-commerce-sans-1);
+  background-color: var(--base-white);
+  vertical-align: top;
+  overflow: hidden;
+}
+.ncua-tag--sm {
+  font-size: var(--font-size-xxxs);
+  padding: 2px 8px;
+  line-height: 14px;
+  border-radius: 4px;
+}
+.ncua-tag--md {
+  font-size: var(--font-size-sm);
+  padding: 1px 9px;
+  line-height: 22px;
+  border-radius: 6px;
+}
+.ncua-tag__text {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+.ncua-tag > svg, .ncua-tag > .ncua-dot {
+  margin-right: 4px;
+}
+.ncua-tag__count {
+  display: inline-flex;
+  align-items: center;
+  min-width: 16px;
+  height: 14px;
+  margin-left: 6px;
+  margin-right: -5px;
+  padding: 0 5px;
+  background-color: var(--gray-100);
+  border-radius: 3px;
+  text-align: center;
+}
+.ncua-tag__count + .ncua-tag__close {
+  margin-left: 6px;
+}
+.ncua-tag--md .ncua-tag__count {
+  height: 16px;
+}
+.ncua-tag__close {
+  margin-left: 3px;
+  margin-right: -5px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
+.ncua-tooltip {
+  position: relative;
+}
+.ncua-tooltip {
+  font-size: var(--font-size-xxs);
+}
+.ncua-tooltip svg {
+  cursor: pointer;
+}
+.ncua-tooltip__bg {
+  position: absolute;
+  border-radius: 6px;
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-shadow: var(--shadow-lg);
+}
+.ncua-tooltip__bg::after {
+  position: absolute;
+  border: 6px solid transparent;
+  content: "";
+}
+.ncua-tooltip__content {
+  line-height: 14px;
+  width: max-content;
+}
+.ncua-tooltip__bg--black {
+  background-color: var(--gray-700);
+}
+.ncua-tooltip__bg--black::after {
+  border-color: var(--gray-700);
+}
+.ncua-tooltip__bg--black .ncua-tooltip__title {
+  font-weight: 500;
+  color: var(--base-white);
+}
+.ncua-tooltip__bg--black .ncua-tooltip__content {
+  color: var(--gray-200);
+}
+.ncua-tooltip__bg--white {
+  background-color: var(--base-white);
+}
+.ncua-tooltip__bg--white::after {
+  border-color: var(--base-white);
+}
+.ncua-tooltip__bg--white .ncua-tooltip__title {
+  font-weight: 500;
+  color: var(--gray-500);
+}
+.ncua-tooltip__bg--white .ncua-tooltip__content {
+  color: var(--gray-400);
+}
+.ncua-tooltip__bg--top {
+  top: auto;
+  bottom: calc(100% + 16px);
+  right: 50%;
+  transform: translateX(50%);
+}
+.ncua-tooltip__bg--top::after {
+  top: 100%;
+  border-block-end: 0;
+  border-inline: 6px solid transparent;
+}
+.ncua-tooltip__bg--top::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.ncua-tooltip__bg--top-left {
+  top: auto;
+  bottom: calc(100% + 16px);
+  left: -12px;
+}
+.ncua-tooltip__bg--top-left::after {
+  top: 100%;
+  border-block-end: 0;
+  border-inline: 6px solid transparent;
+}
+.ncua-tooltip__bg--top-left::after {
+  left: 12px;
+}
+.ncua-tooltip__bg--top-right {
+  top: auto;
+  bottom: calc(100% + 16px);
+  right: -12px;
+}
+.ncua-tooltip__bg--top-right::after {
+  top: 100%;
+  border-block-end: 0;
+  border-inline: 6px solid transparent;
+}
+.ncua-tooltip__bg--top-right::after {
+  right: 15px;
+}
+.ncua-tooltip__bg--bottom {
+  top: calc(100% + 6px);
+  right: 50%;
+  transform: translateX(50%);
+}
+.ncua-tooltip__bg--bottom::after {
+  bottom: 100%;
+  border-block-start: 0;
+  border-inline: 6px solid transparent;
+}
+.ncua-tooltip__bg--bottom::after {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.ncua-tooltip__bg--bottom-left {
+  top: calc(100% + 6px);
+  left: -12px;
+}
+.ncua-tooltip__bg--bottom-left::after {
+  bottom: 100%;
+  border-block-start: 0;
+  border-inline: 6px solid transparent;
+}
+.ncua-tooltip__bg--bottom-left::after {
+  left: 12px;
+}
+.ncua-tooltip__bg--bottom-right {
+  top: calc(100% + 6px);
+  right: -12px;
+}
+.ncua-tooltip__bg--bottom-right::after {
+  bottom: 100%;
+  border-block-start: 0;
+  border-inline: 6px solid transparent;
+}
+.ncua-tooltip__bg--bottom-right::after {
+  right: 15px;
+}
+.ncua-tooltip--hidden-arrow .ncua-tooltip__bg::after {
+  content: none;
+}
+.ncua-tooltip--stroke svg:hover {
+  color: var(--gray-400);
+}
+.ncua-tooltip:not(:hover) .ncua-tooltip__bg {
+  display: none;
+}
+.ncua-tooltip:has(.ncua-tooltip__title) .ncua-tooltip__bg {
+  padding: 12px;
+}
+
+:root {
+  --select-height-xs: 28px;
+  --select-height-sm: 36px;
+  --select-height-md: 40px;
+  --select-simple-height-xs: 18px;
+  --select-simple-height-sm: 22px;
+  --select-simple-height-md: 22px;
+}
+
+.ncua-select__content {
+  display: flex;
+  align-items: center;
+  padding-inline-start: 14px;
+  border: 1px solid var(--gray-200);
+  background-color: var(--base-white);
+  overflow: hidden;
+  position: relative;
+}
+.ncua-select__content::after {
+  width: 14px;
+  height: 14px;
+  background-image: 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");
+  content: "";
+  transform: translateY(-50%);
+  position: absolute;
+  top: 50%;
+  right: 10px;
+}
+.ncua-select__icon {
+  margin-right: 8px;
+}
+.ncua-select__icon svg {
+  display: block;
+}
+.ncua-select select {
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0;
+  height: 100%;
+  flex: 1;
+  background-color: transparent;
+  outline: none;
+  color: var(--gray-700);
+}
+.ncua-select__content:focus-within {
+  border-color: var(--gray-400);
+  box-shadow: var(--shadow-xs-focused-3px-gray-100);
+}
+.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 {
+  height: var(--select-height-xs);
+  border-radius: 6px;
+  padding-inline: 10px 28px;
+}
+.ncua-select--xs > .ncua-select__tag {
+  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 {
+  margin-block-start: 4px;
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-select--sm {
+  height: var(--select-height-sm);
+  border-radius: 6px;
+  padding-inline: 12px 30px;
+}
+.ncua-select--sm > .ncua-select__tag {
+  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 {
+  margin-block-start: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-select--sm.ncua-select__content::after {
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23757678' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+.ncua-select--md {
+  min-width: 132px;
+  height: var(--select-height-md);
+  border-radius: 8px;
+  padding-inline: 12px 30px;
+}
+.ncua-select--md > .ncua-select__tag {
+  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 {
+  margin-block-start: 6px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-select--md.ncua-select__content::after {
+  width: 16px;
+  height: 16px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23757678' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+.ncua-select--simple .ncua-select__content {
+  padding-inline-start: 0;
+  border: 0;
+  background-color: transparent;
+}
+.ncua-select--simple .ncua-select--xs {
+  min-width: auto;
+  height: var(--select-simple-height-xs);
+  border-radius: 0;
+}
+.ncua-select--simple .ncua-select--sm {
+  min-width: auto;
+  height: var(--select-simple-height-sm);
+  border-radius: 0;
+}
+.ncua-select--simple .ncua-select--md {
+  min-width: auto;
+  height: var(--select-simple-height-md);
+  border-radius: 0;
+}
+
+.ncua-pagination {
+  display: flex;
+  align-items: center;
+}
+.ncua-pagination__before {
+  margin-inline: 4px 8px;
+}
+.ncua-pagination__item + .ncua-pagination__item {
+  margin-inline-start: 4px;
+}
+.ncua-pagination__page-num {
+  font-size: 14px;
+  font-weight: 500;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding-inline: 10px;
+  min-width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  border: 0;
+  background-color: transparent;
+  color: var(--gray-500);
+  cursor: pointer;
+}
+.ncua-pagination__page-num:hover, .ncua-pagination__page-num:focus, .ncua-pagination__page-num.is-current {
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+  font-weight: 700;
+  outline: none;
+}
+.ncua-pagination__next {
+  margin-inline: 8px 4px;
+}
+.ncua-pagination--pc {
+  justify-content: center;
+}
+.ncua-pagination--pc .ncua-pagination__list {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+.ncua-pagination--pc .ncua-pagination__page-info {
+  display: none;
+}
+.ncua-pagination--mo {
+  justify-content: space-between;
+}
+.ncua-pagination--mo .ncua-pagination__list {
+  display: none;
+}
+.ncua-pagination--mo .ncua-pagination__first,
+.ncua-pagination--mo .ncua-pagination__last {
+  display: none;
+}
+.ncua-pagination--mo .ncua-pagination__page-info {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  font-size: 14px;
+  color: var(--gray-400);
+}
+.ncua-pagination--mo .ncua-pagination__current-num {
+  font-style: normal;
+  color: var(--gray-700);
+}
+
+.ncua-slider {
+  position: relative;
+  width: 100%;
+  height: 40px;
+  user-select: none;
+  touch-action: none;
+}
+.ncua-slider__track {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 8px;
+  background-color: var(--gray-100);
+  border-radius: 4px;
+}
+.ncua-slider__progress {
+  position: absolute;
+  height: 8px;
+  background-color: var(--gray-500);
+  border-radius: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.ncua-slider__handle {
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 20px;
+  height: 20px;
+  background-color: var(--base-white);
+  border: 1.5px solid var(--gray-400);
+  border-radius: 12px;
+  cursor: pointer;
+  box-shadow: var(--shadow-md);
+}
+.ncua-slider__handle.is-active {
+  border-color: var(--gray-500);
+}
+.ncua-slider__label {
+  position: absolute;
+  top: calc(50% + 18px);
+  left: 50%;
+  transform: translate(-50%, 0);
+  font-size: var(--font-size-xxxs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  color: var(--gray-500);
+  white-space: nowrap;
+}
+.ncua-slider__label--tooltip {
+  top: calc(50% - 8px);
+  color: var(--gray-500);
+  background-color: var(--base-white);
+  transform: translate(-50%, -100%);
+  padding: 8px 12px;
+  border-radius: 6px;
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+  font-weight: var(--font-weights-commerce-sans-1);
+  border: 1px solid var(--gray-200);
+  box-shadow: var(--shadow-lg);
+}
+
+@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: "";
+  display: inline-block;
+  border-radius: 50%;
+  border-style: solid;
+  border-color: var(--gray-100);
+  border-top-color: var(--gray-500);
+  animation: ncua-spinner-rotate 1s linear infinite;
+}
+.ncua-spinner__text {
+  margin: 0;
+  color: var(--gray-500);
+}
+.ncua-spinner--xs {
+  font-size: 11px;
+}
+.ncua-spinner--xs .ncua-spinner__content::before {
+  margin-block-end: 12px;
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+.ncua-spinner--sm {
+  font-size: 14px;
+}
+.ncua-spinner--sm .ncua-spinner__content::before {
+  margin-block-end: 16px;
+  width: 32px;
+  height: 32px;
+  border-width: 4px;
+}
+.ncua-spinner--md {
+  font-size: 14px;
+}
+.ncua-spinner--md .ncua-spinner__content::before {
+  margin-block-end: 16px;
+  width: 48px;
+  height: 48px;
+  border-width: 6px;
+}
+.ncua-spinner--lg {
+  font-size: 18px;
+}
+.ncua-spinner--lg .ncua-spinner__content::before {
+  margin-block-end: 16px;
+  width: 56px;
+  height: 56px;
+  border-width: 6px;
+}
+.ncua-spinner--xl {
+  font-size: 18px;
+}
+.ncua-spinner--xl .ncua-spinner__content::before {
+  margin-block-end: 20px;
+  width: 64px;
+  height: 64px;
+  border-width: 8px;
+}
+.ncua-spinner--backdrop {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 200;
+}
+
+:root {
+  --toggle-sm-width: 28px;
+  --toggle-sm-height: 16px;
+  --toggle-sm-slider-size: 12px;
+  --toggle-sm-slider-top: 2px;
+  --toggle-sm-slider-left: 2px;
+  --toggle-sm-translate: 12px;
+  --toggle-sm-font-size: var(--font-size-xs);
+  --toggle-sm-line-height: var(--line-heights-xs);
+  --toggle-sm-text-margin: 8px;
+  --toggle-md-width: 44px;
+  --toggle-md-height: 24px;
+  --toggle-md-slider-size: 20px;
+  --toggle-md-slider-top: 2px;
+  --toggle-md-slider-left: 2px;
+  --toggle-md-translate: 20px;
+  --toggle-md-font-size: var(--font-size-md);
+  --toggle-md-line-height: var(--line-heights-md);
+  --toggle-md-text-margin: 12px;
+  --toggle-focus-shadow: 0px 0px 0px 3px rgba(242, 244, 247, 0.8);
+  --toggle-checked-focus-shadow: 0 0 0 2px rgba(46, 168, 79, 0.2);
+}
+
+.ncua-toggle {
+  position: relative;
+  display: inline-flex;
+  cursor: pointer;
+  user-select: none;
+}
+.ncua-toggle__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.ncua-toggle__switch {
+  position: relative;
+  display: inline-block;
+  background-color: var(--gray-200);
+  border-radius: 12px;
+  transition: background-color 0.3s, box-shadow 0.3s;
+}
+.ncua-toggle__slider {
+  position: absolute;
+  background-color: var(--base-white);
+  border-radius: 50%;
+  transition: transform 0.3s;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.ncua-toggle--sm .ncua-toggle__text-wrapper {
+  margin-top: -1px;
+}
+.ncua-toggle__text {
+  display: block;
+  color: var(--gray-600);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-toggle__support-text {
+  margin-top: 2px;
+  color: var(--gray-400);
+}
+.ncua-toggle--sm .ncua-toggle__switch {
+  width: var(--toggle-sm-width);
+  height: var(--toggle-sm-height);
+}
+.ncua-toggle--sm .ncua-toggle__slider {
+  width: var(--toggle-sm-slider-size);
+  height: var(--toggle-sm-slider-size);
+  top: var(--toggle-sm-slider-top);
+  left: var(--toggle-sm-slider-left);
+}
+.ncua-toggle--sm .ncua-toggle__text-wrapper {
+  margin-left: var(--toggle-sm-text-margin);
+  font-size: var(--toggle-sm-font-size);
+  line-height: var(--toggle-sm-line-height);
+}
+.ncua-toggle--sm .ncua-toggle__input:checked + .ncua-toggle__switch .ncua-toggle__slider {
+  transform: translateX(var(--toggle-sm-translate));
+}
+.ncua-toggle--md .ncua-toggle__switch {
+  width: var(--toggle-md-width);
+  height: var(--toggle-md-height);
+}
+.ncua-toggle--md .ncua-toggle__slider {
+  width: var(--toggle-md-slider-size);
+  height: var(--toggle-md-slider-size);
+  top: var(--toggle-md-slider-top);
+  left: var(--toggle-md-slider-left);
+}
+.ncua-toggle--md .ncua-toggle__text-wrapper {
+  margin-left: var(--toggle-md-text-margin);
+  font-size: var(--toggle-md-font-size);
+  line-height: var(--toggle-md-line-height);
+}
+.ncua-toggle--md .ncua-toggle__input:checked + .ncua-toggle__switch .ncua-toggle__slider {
+  transform: translateX(var(--toggle-md-translate));
+}
+.ncua-toggle:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
+  background-color: var(--gray-300);
+}
+.ncua-toggle:not(.ncua-toggle--disabled):hover .ncua-toggle__input:checked + .ncua-toggle__switch {
+  background-color: var(--green-600);
+}
+.ncua-toggle__input:checked + .ncua-toggle__switch {
+  background-color: var(--green-500);
+}
+.ncua-toggle__input:checked:focus + .ncua-toggle__switch {
+  box-shadow: var(--toggle-checked-focus-shadow);
+}
+.ncua-toggle__input:focus + .ncua-toggle__switch {
+  box-shadow: var(--toggle-focus-shadow);
+}
+.ncua-toggle--disabled {
+  cursor: not-allowed;
+}
+.ncua-toggle--disabled .ncua-toggle__switch {
+  background-color: var(--gray-100);
+}
+.ncua-toggle--disabled .ncua-toggle__slider {
+  background-color: var(--gray-50);
+}
+
+.ncua-date-picker {
+  position: relative;
+  display: inline-flex;
+}
+.ncua-date-picker .flatpickr-wrapper {
+  border: 1px solid var(--gray-200);
+  border-radius: 6px;
+  font-weight: 400;
+  background: var(--base-white);
+  box-shadow: var(--shadow-xs);
+  color: var(--gray-700);
+}
+.ncua-date-picker .flatpickr-wrapper:focus-within {
+  border-color: var(--gray-400);
+}
+.ncua-date-picker__input {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  outline: none;
+  color: inherit;
+  vertical-align: top;
+  font: inherit;
+}
+.ncua-date-picker__input::placeholder {
+  color: var(--gray-700);
+}
+.ncua-date-picker__input:disabled {
+  background-color: var(--gray-50);
+  border-color: var(--gray-200);
+  cursor: default;
+}
+.ncua-date-picker__input:disabled::placeholder {
+  color: var(--gray-300);
+}
+.ncua-date-picker__ico {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-right: 12px;
+}
+.ncua-date-picker .flatpickr-calendar {
+  max-height: none;
+  padding-block-start: 12px;
+  border-radius: 8px;
+  left: 0;
+  box-shadow: 1px 0 0 var(--gray-200), -1px 0 0 var(--gray-200), 0 1px 0 var(--gray-200), 0 -1px 0 var(--gray-200), 0 3px 13px rgba(0, 0, 0, 0.08);
+}
+.ncua-date-picker .flatpickr-calendar::before, .ncua-date-picker .flatpickr-calendar::after {
+  content: none;
+}
+.ncua-date-picker .numInputWrapper .cur-year {
+  margin-inline-start: 4px;
+  transform: translateY(2px);
+}
+.ncua-date-picker .numInputWrapper span {
+  opacity: 1;
+}
+.ncua-date-picker .flatpickr-months {
+  justify-content: space-between;
+  margin-inline: auto;
+  margin-block-end: 12px;
+}
+.ncua-date-picker .flatpickr-months .flatpickr-prev-month,
+.ncua-date-picker .flatpickr-months .flatpickr-next-month {
+  position: initial;
+  width: 36px;
+  height: 36px;
+}
+.ncua-date-picker .flatpickr-months .flatpickr-prev-month svg,
+.ncua-date-picker .flatpickr-months .flatpickr-next-month svg {
+  vertical-align: top;
+  transform: translateY(1px);
+}
+.ncua-date-picker .flatpickr-months .flatpickr-prev-month:hover,
+.ncua-date-picker .flatpickr-months .flatpickr-next-month:hover {
+  border-radius: 6px;
+  background-color: var(--gray-50);
+}
+.ncua-date-picker .flatpickr-months .flatpickr-prev-month:hover svg,
+.ncua-date-picker .flatpickr-months .flatpickr-next-month:hover svg {
+  fill: initial;
+}
+.ncua-date-picker .flatpickr-months .flatpickr-month {
+  overflow: visible;
+  flex: none;
+}
+.ncua-date-picker .flatpickr-current-month {
+  position: initial;
+  width: auto;
+  display: flex;
+  padding-block-start: 6px;
+  gap: 4px;
+}
+.ncua-date-picker .flatpickr-monthDropdown-months {
+  margin: 0;
+  padding: 0;
+  transform: translateY(-1px);
+}
+.ncua-date-picker .flatpickr-current-month .flatpickr-monthDropdown-months,
+.ncua-date-picker .flatpickr-current-month .cur-year {
+  font-weight: 700;
+  line-height: 22px;
+}
+.ncua-date-picker .flatpickr-innerContainer {
+  justify-content: center;
+}
+.ncua-date-picker .flatpickr-weekdays {
+  margin-inline: auto;
+}
+.ncua-date-picker .dayContainer {
+  row-gap: 4px;
+}
+.ncua-date-picker .flatpickr-days {
+  justify-content: center;
+  padding-block-end: 12px;
+}
+.ncua-date-picker .flatpickr-day:hover {
+  background-color: var(--gray-50);
+  border-color: var(--gray-50);
+}
+.ncua-date-picker .flatpickr-day.selected {
+  background-color: var(--gray-500);
+  border-color: var(--gray-500);
+}
+.ncua-date-picker .flatpickr-day.selected:hover {
+  border-color: var(--gray-700);
+  background-color: var(--gray-700);
+}
+.ncua-date-picker .flatpickr-day.today {
+  border-color: var(--gray-600);
+}
+.ncua-date-picker--sm {
+  width: 138px;
+  height: 28px;
+}
+.ncua-date-picker--sm .flatpickr-wrapper {
+  height: 100%;
+  padding: 5px 10px;
+  font-size: var(--font-size-xs);
+}
+.ncua-date-picker--md {
+  width: 156px;
+  height: 36px;
+}
+.ncua-date-picker--md .flatpickr-wrapper {
+  height: 100%;
+  padding: 7px 12px;
+  font-size: var(--font-size-sm);
+}
+.ncua-date-picker--sm .flatpickr-calendar {
+  width: 248px;
+}
+.ncua-date-picker--sm .flatpickr-months,
+.ncua-date-picker--sm .flatpickr-weekdays,
+.ncua-date-picker--sm .flatpickr-days {
+  width: 224px;
+}
+.ncua-date-picker--sm .dayContainer {
+  max-width: 224px;
+  min-width: 224px;
+  column-gap: 0;
+  font-size: 13px;
+}
+.ncua-date-picker--sm .flatpickr-day {
+  max-width: 32px;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
+}
+.ncua-date-picker--sm .flatpickr-current-month .flatpickr-monthDropdown-months,
+.ncua-date-picker--sm .flatpickr-current-month .cur-year {
+  font-size: var(--font-size-sm);
+}
+.ncua-date-picker--md .flatpickr-calendar {
+  width: 343px;
+}
+.ncua-date-picker--md .flatpickr-months,
+.ncua-date-picker--md .flatpickr-weekdays,
+.ncua-date-picker--md .flatpickr-days {
+  width: 311px;
+}
+.ncua-date-picker--md .dayContainer {
+  max-width: 311px;
+  min-width: 311px;
+  column-gap: 9.83px;
+  font-size: 14px;
+}
+.ncua-date-picker--md .flatpickr-day {
+  max-width: 36px;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+}
+.ncua-date-picker--md .flatpickr-current-month .flatpickr-monthDropdown-months,
+.ncua-date-picker--md .flatpickr-current-month .cur-year {
+  font-size: var(--font-size-lg);
+}
+.ncua-date-picker--disabled .flatpickr-wrapper,
+.ncua-date-picker--disabled .ncua-date-picker__input {
+  background-color: var(--gray-50);
+}
+.ncua-date-picker--disabled .ncua-date-picker__input {
+  color: var(--gray-300);
+}
+
+.ncua-range-date-picker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ncua-range-date-picker-with-buttons {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.ncua-carousel-number-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.ncua-carousel-number-group--light .ncua-carousel-number-group__number {
+  color: var(--gray-600);
+}
+.ncua-carousel-number-group--light .ncua-carousel-number-group__total {
+  color: var(--gray-300);
+}
+.ncua-carousel-number-group--dark .ncua-carousel-number-group__number {
+  color: var(--base-white);
+}
+.ncua-carousel-number-group--dark .ncua-carousel-number-group__total {
+  color: var(--gray-300);
+}
+.ncua-carousel-number-group--sm {
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 500;
+}
+.ncua-carousel-number-group.framed {
+  border-radius: 13px;
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--light {
+  background-color: var(--base-white);
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--dark {
+  background-color: rgba(12, 17, 29, 0.6);
+}
+.ncua-carousel-number-group.framed.ncua-carousel-number-group--sm {
+  padding: 2px 8px;
+}
+
+.ncua-carousel-arrow {
+  display: inline-block;
+  border-radius: 999px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.ncua-carousel-arrow__icon {
+  display: block;
+}
+.ncua-carousel-arrow--line {
+  outline: 1px solid var(--gray-200);
+}
+.ncua-carousel-arrow--md {
+  padding: 8px;
+}
+.ncua-carousel-arrow--md .ncua-carousel-arrow__icon {
+  width: 16px;
+  height: 16px;
+}
+
+.ncua-breadcrumb {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-xs);
+}
+.ncua-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 32px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.ncua-breadcrumb__list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  color: var(--gray-400);
+  font-weight: var(--font-weights-commerce-sans-1);
+  cursor: pointer;
+}
+.ncua-breadcrumb__list-item:first-child {
+  height: 24px;
+  padding: 4px;
+}
+.ncua-breadcrumb__list-item--active {
+  color: var(--gray-600);
+}
+.ncua-breadcrumb__list-item:hover > .ncua-breadcrumb__item {
+  background-color: var(--gray-100);
+  border-radius: 4px;
+}
+.ncua-breadcrumb__list-item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: -24px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M6 12L10 8L6 4" stroke="%23D3D4D8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: center;
+  pointer-events: none;
+}
+.ncua-breadcrumb__item {
+  display: flex;
+  padding: 4px 6px;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+.ncua-breadcrumb__item:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+.ncua-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  overflow: hidden;
+  border-radius: 16px;
+  font-weight: 500;
+}
+.ncua-badge--xs {
+  font-size: var(--font-size-xxxs);
+  padding: 2px 8px;
+  height: 18px;
+  line-height: var(--line-heights-xxxs);
+}
+.ncua-badge--sm {
+  font-size: var(--font-size-xs);
+  padding: 2px 10px;
+  height: 22px;
+  line-height: var(--line-heights-xs);
+}
+.ncua-badge--md {
+  font-size: var(--font-size-sm);
+  padding: 2px 10px;
+  height: 26px;
+  line-height: var(--line-heights-sm);
+}
+.ncua-badge--pill-outline.ncua-badge--neutral {
+  color: var(--gray-600);
+  border: 1px solid var(--gray-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--error {
+  color: var(--primary-red-600);
+  border: 1px solid var(--primary-red-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--warning {
+  color: var(--orange-600);
+  border: 1px solid var(--orange-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--success {
+  color: var(--green-600);
+  border: 1px solid var(--green-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--blue {
+  color: var(--blue-600);
+  border: 1px solid var(--blue-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--pink {
+  color: var(--pink-600);
+  border: 1px solid var(--pink-400);
+  background-color: var(--base-white);
+}
+.ncua-badge--pill-outline.ncua-badge--disabled {
+  color: var(--gray-300);
+  border: 1px solid var(--gray-200);
+  background-color: var(--gray-100);
+}
+.ncua-badge--pill-dark-color.ncua-badge--neutral {
+  color: var(--base-white);
+  background-color: var(--base-black);
+}
+.ncua-badge--pill-dark-color.ncua-badge--error {
+  color: var(--base-white);
+  background-color: var(--primary-red-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--warning {
+  color: var(--base-white);
+  background-color: var(--orange-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--success {
+  color: var(--base-white);
+  background-color: var(--green-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--blue {
+  color: var(--base-white);
+  background-color: var(--blue-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--pink {
+  color: var(--base-white);
+  background-color: var(--pink-500);
+}
+.ncua-badge--pill-dark-color.ncua-badge--disabled {
+  color: var(--gray-300);
+  background-color: var(--gray-100);
+}
+
+.ncua-badge-group {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px 3px 4px;
+  border-radius: 16px;
+  cursor: pointer;
+}
+.ncua-badge-group:hover {
+  text-decoration: none;
+}
+.ncua-badge-group__label {
+  margin-left: 8px;
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-badge-group svg {
+  margin-left: 4px;
+}
+.ncua-badge-group.ncua-badge-group--neutral {
+  color: var(--gray-600);
+  background-color: var(--gray-50);
+  border: 1px solid var(--gray-100);
+}
+.ncua-badge-group.ncua-badge-group--neutral:hover {
+  background-color: var(--gray-100);
+  border-color: var(--gray-200);
+}
+.ncua-badge-group.ncua-badge-group--error {
+  color: var(--primary-red-600);
+  background-color: var(--primary-red-50);
+  border: 1px solid var(--primary-red-100);
+}
+.ncua-badge-group.ncua-badge-group--error:hover {
+  background-color: var(--primary-red-100);
+  border-color: var(--primary-red-200);
+}
+.ncua-badge-group.ncua-badge-group--warning {
+  color: var(--orange-600);
+  background-color: var(--orange-50);
+  border: 1px solid var(--orange-100);
+}
+.ncua-badge-group.ncua-badge-group--warning:hover {
+  background-color: var(--orange-100);
+  border-color: var(--orange-200);
+}
+.ncua-badge-group.ncua-badge-group--success {
+  color: var(--green-600);
+  background-color: var(--green-50);
+  border: 1px solid var(--green-100);
+}
+.ncua-badge-group.ncua-badge-group--success:hover {
+  background-color: var(--green-100);
+  border-color: var(--green-200);
+}
+.ncua-badge-group.ncua-badge-group--xs {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-badge-group.ncua-badge-group--sm {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+
+.ncua-progress-bar {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+.ncua-progress-bar-top-float {
+  padding-top: 42px;
+}
+.ncua-progress-bar-bottom-float {
+  padding-bottom: 42px;
+}
+.ncua-progress-bar__content {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+}
+.ncua-progress-bar__bar {
+  flex-grow: 1;
+  height: 4px;
+  background-color: var(--gray-100);
+  border-radius: 5px;
+  overflow: hidden;
+}
+.ncua-progress-bar__fill {
+  height: 100%;
+  background-color: var(--gray-600);
+  border-radius: 5px;
+  transition: width 0.3s ease;
+}
+.ncua-progress-bar__label {
+  font-size: var(--font-size-sm);
+  color: var(--gray-700);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-progress-bar__label-right {
+  min-width: 45px;
+}
+.ncua-progress-bar__label-bottom {
+  margin-top: 8px;
+  align-self: flex-end;
+}
+.ncua-progress-bar__label-top-float, .ncua-progress-bar__label-bottom-float {
+  position: absolute;
+  left: var(--progress-value, 0%);
+  transform: translateX(-50%);
+  transition: left 0.3s ease;
+  height: 32px;
+  padding: 0 12px;
+  line-height: 32px;
+  background-color: var(--base-white);
+  border-radius: 6px;
+  border: 1px solid var(--gray-100);
+  font-size: var(--font-size-xxs);
+  box-shadow: var(--shadow-lg);
+}
+.ncua-progress-bar__label-top-float {
+  top: 0;
+}
+.ncua-progress-bar__label-bottom-float {
+  bottom: 0;
+}
+
+.ncua-empty-state {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.ncua-empty-state__title {
+  color: var(--gray-700);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-sm);
+}
+.ncua-empty-state__description {
+  display: inline-block;
+  margin-top: 4px;
+  color: var(--gray-400);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-empty-state__button-group {
+  display: flex;
+  gap: 6px;
+  margin-top: 16px;
+}
+
+.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);
+  border-radius: 6px;
+  cursor: pointer;
+  background-color: transparent;
+}
+.ncua-tab-button:hover, .ncua-tab-button.is-active {
+  color: var(--gray-700);
+}
+.ncua-tab-button--xs {
+  padding: 5px 12px;
+  height: 34px;
+  font-size: var(--font-size-xs);
+}
+.ncua-tab-button--sm {
+  padding: 7px 12px;
+  height: 38px;
+  font-size: var(--font-size-sm);
+}
+.ncua-tab-button--md {
+  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-tab-button--button-primary:focus {
+  box-shadow: var(--focus-ring-4px-gray-100);
+}
+.ncua-tab-button--button-white.ncua-tab-button--xs {
+  padding: 5px 12px;
+  height: 28px;
+}
+.ncua-tab-button--button-white.ncua-tab-button--sm {
+  padding: 7px 12px;
+  height: 32px;
+}
+.ncua-tab-button--button-white.ncua-tab-button--md {
+  padding: 9px 14px;
+  height: 40px;
+}
+.ncua-tab-button--button-white:hover {
+  box-shadow: var(--shadow-sm);
+}
+.ncua-tab-button--button-white.is-active {
+  color: var(--gray-500);
+  box-shadow: var(--shadow-sm);
+}
+.ncua-tab-button--underline-fill {
+  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 {
+  background-color: var(--gray-100);
+}
+.ncua-tab-button--underline-fill:hover::before, .ncua-tab-button--underline-fill.is-active::before, .ncua-tab-button--underline-fill.is-active:focus::before {
+  width: 100%;
+  height: 2px;
+  content: "";
+  background-color: var(--gray-500);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+.ncua-tab-button--underline {
+  border-radius: 0;
+}
+.ncua-tab-button--underline:hover, .ncua-tab-button--underline.is-active {
+  position: relative;
+}
+.ncua-tab-button--underline:hover::before, .ncua-tab-button--underline.is-active::before {
+  width: 100%;
+  height: 2px;
+  content: "";
+  background-color: var(--gray-500);
+  position: absolute;
+  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;
+}
+.ncua-horizontal-tab--button-primary .swiper-slide:last-child, .ncua-horizontal-tab--button-white .swiper-slide:last-child {
+  padding-right: 4px;
+  margin-right: 0;
+}
+.ncua-horizontal-tab--button-primary .swiper-slide {
+  padding: 4px 0;
+}
+.ncua-horizontal-tab--button-white {
+  display: inline-block;
+  background: var(--gray-50);
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+}
+.ncua-horizontal-tab--button-white .swiper-slide {
+  padding: 3px 0;
+}
+.ncua-horizontal-tab--button-white .ncua-tab-button {
+  background-color: var(--gray-50);
+}
+.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);
+  color: var(--gray-500);
+}
+.ncua-horizontal-tab--fullWidth {
+  width: 100%;
+}
+.ncua-horizontal-tab--fullWidth .ncua-horizontal-tab__item {
+  width: 100% !important;
+}
+.ncua-horizontal-tab--fullWidth .swiper-slide {
+  flex-shrink: 1;
+}
+.ncua-horizontal-tab__item:last-child {
+  margin-right: 0 !important;
+}
+
+.ncua-vertical-tab {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ncua-vertical-tab--button-white {
+  padding: 4px;
+  background-color: var(--gray-50);
+  border: 1px solid var(--gray-100);
+  border-radius: 8px;
+}
+.ncua-vertical-tab--button-white .ncua-tab-button {
+  background-color: var(--gray-50);
+}
+.ncua-vertical-tab--button-white .ncua-tab-button:hover, .ncua-vertical-tab--button-white .ncua-tab-button.is-active {
+  background-color: var(--base-white);
+  border-radius: 6px;
+  box-shadow: var(--shadow-sm);
+  color: var(--gray-500);
+}
+.ncua-vertical-tab .ncua-tab-button {
+  justify-content: flex-start;
+}
+
+.ncua-progress-circle {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  --circle-radius: 45;
+  --circle-circumference: 282.7431;
+  --half-circle-circumference: 141.37155;
+}
+.ncua-progress-circle__content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ncua-progress-circle__svg {
+  width: var(--size);
+  height: var(--size);
+}
+.ncua-progress-circle-half-circle .ncua-progress-circle__svg {
+  height: calc(var(--size) / 2);
+  overflow: visible;
+}
+
+.ncua-progress-circle__background {
+  stroke: var(--gray-100);
+  stroke-linecap: round;
+}
+.ncua-progress-circle__progress {
+  stroke: var(--primary-red-450);
+  transition: stroke-dashoffset 0.3s ease;
+  stroke-linecap: round;
+}
+.ncua-progress-circle__label-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+.ncua-progress-circle__label {
+  color: var(--gray-700);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-progress-circle__label-text {
+  color: var(--gray-500);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-progress-circle__outside-label {
+  margin-top: 10px;
+  font-weight: var(--font-weights-commerce-sans-1);
+  text-align: center;
+}
+.ncua-progress-circle-xxs {
+  --size: 64px;
+  --stroke-width: 6px;
+  --radius: calc((64px - 6px) / 2);
+  --circumference: calc(2 * 3.14159 * var(--radius));
+}
+.ncua-progress-circle-xxs .ncua-progress-circle__label {
+  font-size: var(--font-size-sm);
+  line-height: 1.5;
+}
+.ncua-progress-circle-xxs .ncua-progress-circle__label-text {
+  font-size: var(--font-size-xs);
+}
+.ncua-progress-circle-xxs .ncua-progress-circle__outside-label {
+  font-size: var(--font-size-xs);
+}
+.ncua-progress-circle-xs {
+  --size: 160px;
+  --stroke-width: 16px;
+  --radius: calc((160px - 16px) / 2);
+  --circumference: calc(2 * 3.14159 * var(--radius));
+}
+.ncua-progress-circle-xs .ncua-progress-circle__label {
+  font-size: var(--font-size-display-xs);
+  line-height: 1.3;
+}
+.ncua-progress-circle-xs .ncua-progress-circle__label-text {
+  font-size: var(--font-size-xxs);
+}
+.ncua-progress-circle-xs .ncua-progress-circle__outside-label {
+  font-size: var(--font-size-xxs);
+}
+.ncua-progress-circle-sm {
+  --size: 200px;
+  --stroke-width: 20px;
+  --radius: calc((200px - 20px) / 2);
+  --circumference: calc(2 * 3.14159 * var(--radius));
+}
+.ncua-progress-circle-sm .ncua-progress-circle__label {
+  font-size: var(--font-size-display-sm);
+  line-height: 1.3;
+}
+.ncua-progress-circle-sm .ncua-progress-circle__label-text {
+  font-size: var(--font-size-xs);
+}
+.ncua-progress-circle-sm .ncua-progress-circle__outside-label {
+  font-size: var(--font-size-xs);
+}
+.ncua-progress-circle-md {
+  --size: 240px;
+  --stroke-width: 24px;
+  --radius: calc((240px - 24px) / 2);
+  --circumference: calc(2 * 3.14159 * var(--radius));
+}
+.ncua-progress-circle-md .ncua-progress-circle__label {
+  font-size: var(--font-size-display-md);
+  line-height: 1.3;
+}
+.ncua-progress-circle-md .ncua-progress-circle__label-text {
+  font-size: var(--font-size-sm);
+}
+.ncua-progress-circle-md .ncua-progress-circle__outside-label {
+  font-size: var(--font-size-sm);
+}
+.ncua-progress-circle-lg {
+  --size: 280px;
+  --stroke-width: 28px;
+  --radius: calc((280px - 28px) / 2);
+  --circumference: calc(2 * 3.14159 * var(--radius));
+}
+.ncua-progress-circle-lg .ncua-progress-circle__label {
+  font-size: var(--font-size-display-lg);
+  line-height: 1.3;
+}
+.ncua-progress-circle-lg .ncua-progress-circle__label-text {
+  font-size: var(--font-size-sm);
+}
+.ncua-progress-circle-lg .ncua-progress-circle__outside-label {
+  font-size: var(--font-size-sm);
+}
+.ncua-progress-circle-half-circle .ncua-progress-circle__label-container {
+  top: 80%;
+}