@ncds/ui-admin 0.0.8 → 0.0.9

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

@@ -0,0 +1,1438 @@
+: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 rgba(16, 24, 40, 0.05), 0px 0px 0px 3px #f2f4f7;
+  --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: 76;
+  --line-heights-display-lg: 60;
+  --line-heights-display-md: 46;
+  --line-heights-display-sm: 38;
+  --line-heights-display-xs: 32;
+  --line-heights-xl: 30;
+  --line-heights-lg: 28;
+  --line-heights-md: 24;
+  --line-heights-sm: 22;
+  --line-heights-xs: 18;
+  --line-heights-xxs: 14;
+  --font-weights-commerce-sans-0: regular;
+  --font-weights-commerce-sans-1: medium;
+  --font-weights-commerce-sans-2: bold;
+  --font-size-xxs: 11px;
+  --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: 16px;
+  line-height: 1.5;
+}
+
+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;
+}
+
+.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: 28px;
+  --button-height-xs: 32px;
+  --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;
+  gap: 8px;
+  line-height: normal;
+  color: inherit;
+}
+.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(--base-white);
+  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 {
+  background-color: var(--base-white);
+  color: var(--blue-500);
+}
+.ncua-btn--tertiary:hover:not([disabled], .is-disable) {
+  background-color: var(--blue-50);
+  color: var(--blue-600);
+}
+.ncua-btn--tertiary:disabled, .ncua-btn--tertiary.is-disable {
+  background-color: var(--base-white);
+  color: var(--gray-200);
+  cursor: default;
+}
+.ncua-btn--tertiary-gray {
+  background-color: var(--base-white);
+  color: var(--gray-700);
+}
+.ncua-btn--tertiary-gray:hover:not([disabled], .is-disable) {
+  background-color: var(--gray-50);
+  color: var(--gray-700);
+}
+.ncua-btn--tertiary-gray:disabled, .ncua-btn--tertiary-gray.is-disable {
+  background-color: var(--base-white);
+  color: var(--base-white);
+  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-200);
+  color: var(--base-white);
+}
+.ncua-btn--destructive:hover:not([disabled], .is-disable) {
+  background-color: var(--primary-red-700);
+  border: 1px solid var(--primary-red-300);
+  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);
+}
+.ncua-btn--destructive:disabled, .ncua-btn--destructive.is-disable {
+  background-color: var(--primary-red-50);
+  border: 1px solid var(--primary-red-300);
+  color: var(--primary-red-300);
+  cursor: default;
+}
+.ncua-btn--xxs {
+  padding: 5px 8px;
+  height: var(--button-height-xxs);
+  font-size: var(--font-size-xxs);
+  border-radius: 6px;
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-btn--xs {
+  padding: 5px 12px;
+  height: var(--button-height-xs);
+  font-size: var(--font-size-xs);
+  border-radius: 6px;
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-btn--sm {
+  padding: 8px 14px;
+  height: var(--button-height-sm);
+  font-size: var(--font-size-sm);
+  border-radius: 8px;
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.ncua-btn--md {
+  padding: 10px 16px;
+  height: var(--button-height-md);
+  font-size: var(--font-size-sm);
+  border-radius: 8px;
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+.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*=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 {
+  color: inherit;
+  border: none;
+  outline: none;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  gap: 8px;
+  background-color: var(--base-white);
+}
+.ncua-button-group__item[href] {
+  text-decoration: none;
+}
+.ncua-button-group__item[href]:hover {
+  color: inherit;
+  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-active {
+  color: var(--gray-600);
+}
+.ncua-button-group.has-border {
+  border: 1px solid var(--gray-200);
+  border-radius: 8px;
+  box-shadow: var(--shadow-xs);
+}
+.ncua-button-group.has-border .ncua-button-group__item:hover {
+  background-color: var(--gray-50);
+}
+.ncua-button-group.has-border .ncua-button-group__item:focus {
+  color: var(--gray-600);
+}
+.ncua-button-group.has-border .ncua-button-group__item.is-disabled {
+  background-color: var(--base-white);
+  color: var(--gray-200);
+}
+.ncua-button-group.has-border .ncua-button-group__item:nth-child(n+2) {
+  border-left: 1px solid var(--gray-200);
+}
+.ncua-button-group.has-border .ncua-button-group__item svg {
+  display: block;
+}
+.ncua-button-group:not(.has-border) .ncua-button-group__item {
+  position: relative;
+}
+.ncua-button-group:not(.has-border) .ncua-button-group__item:not(:last-child):after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1px;
+  height: 12px;
+  background-color: var(--gray-200);
+}
+.ncua-button-group--xs .ncua-button-group__item {
+  padding: 5px 12px;
+}
+.ncua-button-group--sm .ncua-button-group__item {
+  padding: 5px 16px;
+}
+.ncua-button-group--md .ncua-button-group__item {
+  padding: 7px 16px;
+}
+.ncua-button-group--lg .ncua-button-group__item {
+  padding: 9px 16px;
+}
+.ncua-button-group--xs .ncua-button-group__item {
+  font-size: var(--font-size-xxs);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-button-group--sm .ncua-button-group__item {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-button-group--md .ncua-button-group__item {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-button-group--lg .ncua-button-group__item {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-2);
+}
+
+.ncua-btn-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gray-400);
+  border-radius: 8px;
+  cursor: pointer;
+}
+.ncua-btn-close:hover {
+  background-color: var(--gray-50);
+  color: var(--gray-500);
+}
+.ncua-btn-close:focus {
+  background-color: var(--gray-50);
+}
+.ncua-btn-close--sm {
+  width: 36px;
+  height: 36px;
+}
+.ncua-btn-close--md {
+  width: 40px;
+  height: 40px;
+}
+.ncua-btn-close--lg {
+  width: 44px;
+  height: 44px;
+}
+.ncua-btn-close--dark {
+  color: var(--gray-100);
+}
+.ncua-btn-close--dark:hover {
+  color: var(--base-white);
+  background-color: rgba(255, 255, 255, 0.2);
+}
+.ncua-btn-close--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);
+}
+.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);
+  outline: none;
+}
+.ncua-checkbox-input :where(input):disabled {
+  border-color: var(--gray-200);
+}
+.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%;
+}
+.ncua-checkbox-input :not(input:checked + .ncua-checkbox-input__ico) > svg {
+  display: none;
+}
+.ncua-checkbox-input :disabled + .ncua-checkbox-input__ico {
+  background-color: var(--gray-100);
+  border-radius: 4px;
+}
+
+.ncua-checkbox-field {
+  position: relative;
+  line-height: 18px;
+  font-weight: var(--font-weights-commerce-sans-0);
+  font-size: var(--font-size-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);
+}
+.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 {
+  font-size: var(--font-size-sm);
+  line-height: 22px;
+}
+.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-hint-text {
+  color: var(--gray-400);
+}
+.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 {
+  margin-bottom: 4px;
+}
+.ncua-input__content {
+  box-shadow: var(--shadow-xs);
+  border-radius: 8px;
+}
+.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);
+  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 {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  color: var(--gray-700);
+  font-size: var(--font-size-sm);
+  line-height: 1rem;
+  background-color: var(--base-white);
+}
+.ncua-input input::-webkit-input-placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input::-moz-placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input:-ms-input-placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input::-ms-input-placeholder {
+  color: var(--gray-300);
+}
+.ncua-input input::placeholder {
+  transform: translateY(1px);
+  color: var(--gray-300);
+}
+.ncua-input input:focus {
+  outline: none;
+}
+.ncua-input--xs {
+  gap: 4px;
+  padding: 5px 10px;
+  font-size: var(--font-size-xxs);
+  border-radius: 6px;
+}
+.ncua-input--xs input {
+  font-size: var(--font-size-xs);
+}
+.ncua-input--md {
+  gap: 6px;
+  padding: 7px 12px;
+  font-size: var(--font-size-sm);
+  border-radius: 6px;
+}
+.ncua-input--md input {
+  font-size: var(--font-size-sm);
+}
+.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 {
+  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 {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  border-radius: 6px 0 0 6px;
+  color: var(--gray-400);
+  font-size: var(--font-size-sm);
+  border-width: 1px 0 1px 1px;
+}
+.ncua-input__leading-text--xs {
+  padding: 5px 10px;
+}
+.ncua-input__leading-text--md {
+  padding: 7px 12px;
+}
+.ncua-input__leading-text + .ncua-input__field {
+  border-radius: 0 6px 6px 0;
+}
+
+.ncua-input__trailing-button .ncua-input__button {
+  display: flex;
+  align-items: center;
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-200);
+  border-radius: 0 6px 6px 0;
+  border-left-width: 0;
+  color: var(--gray-700);
+  font-weight: var(--font-weight-commerce-sans-2);
+}
+.ncua-input__trailing-button .ncua-input__button--xs {
+  padding: 5px 10px;
+}
+.ncua-input__trailing-button .ncua-input__button--md {
+  padding: 7px 12px;
+}
+.ncua-input__trailing-button .ncua-input__button:not(:disabled) {
+  cursor: pointer;
+}
+.ncua-input__trailing-button .ncua-input__field {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.ncua-label {
+  display: flex;
+  gap: 4px;
+  color: var(--gray-600);
+  font-weight: var(--font-weight-commerce-sans-1);
+}
+:where(.ncua-label.is-required)::before {
+  content: "*";
+  color: var(--primary-red-500);
+}
+
+.ncua-radio-input {
+  position: relative;
+  flex: none;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  background-color: var(--base-white);
+}
+.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):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);
+}
+.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-input:hover {
+  border-color: var(--gray-600);
+  background-color: var(--gray-100);
+}
+
+.ncua-radio-field {
+  position: relative;
+  line-height: 18px;
+  font-weight: var(--font-weights-commerce-sans-0);
+  font-size: var(--font-size-1);
+  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:hover .ncua-radio-field__input {
+  border-color: var(--gray-700);
+  background-color: var(--gray-50);
+  border-radius: 4px;
+}
+.ncua-radio-field--md {
+  font-size: var(--font-size-2);
+  line-height: 22px;
+}
+.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-tooltip {
+  position: relative;
+  font-size: 11px;
+}
+.ncua-tooltip svg {
+  cursor: pointer;
+}
+.ncua-tooltip__bg {
+  position: absolute;
+  padding: 12px;
+  border-radius: 4px;
+  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;
+}
+
+: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 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-inline-start: 14px;
+  border: 1px solid var(--gray-200);
+  background-color: var(--base-white);
+  overflow: hidden;
+}
+.ncua-select__content::after {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  width: 14px;
+  height: 14px;
+  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='%23171818' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  content: "";
+  transform: translateY(-50%);
+}
+.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;
+  padding-right: 42px;
+  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-4px-primary-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__destructive-icon {
+  position: absolute;
+  top: 50%;
+  right: 25px;
+  width: 14px;
+  height: 14px;
+  font-size: 0;
+  color: var(--primary-red-600);
+  transform: translateY(-50%);
+}
+.ncua-select--xs {
+  height: var(--select-height-xs);
+  border-radius: 6px;
+}
+.ncua-select--xs > .ncua-select__tag {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-select--sm {
+  height: var(--select-height-sm);
+  border-radius: 8px;
+}
+.ncua-select--sm > .ncua-select__tag {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-0);
+}
+.ncua-select--md {
+  min-width: 132px;
+  height: var(--select-height-md);
+  border-radius: 8px;
+}
+.ncua-select--md > .ncua-select__tag {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weights-commerce-sans-1);
+}
+.ncua-select--simple .ncua-select__content {
+  padding-inline-start: 0;
+  border: 0;
+}
+.ncua-select--simple .ncua-select__content::after {
+  right: 0;
+}
+.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-select--simple select {
+  padding-right: 18px;
+}
+.ncua-select .ncua-hint-text {
+  margin-block-start: 6px;
+  font-size: var(--font-size-xxs);
+}
+
+.ncua-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.ncua-pagination__list {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+.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;
+  cursor: pointer;
+}
+.ncua-pagination__page-num:hover, .ncua-pagination__page-num:focus, .ncua-pagination__page-num.is-current {
+  background-color: var(--gray-50);
+}
+.ncua-pagination__page-num:hover, .ncua-pagination__page-num.is-current {
+  font-weight: 700;
+}
+.ncua-pagination__page-num:focus {
+  outline: none;
+  box-shadow: var(--focus-ring-4px-gray-100);
+}
+.ncua-pagination__page-info {
+  display: none;
+}
+.ncua-pagination__next {
+  margin-inline: 8px 4px;
+}
+@media (max-width: 768px) {
+  .ncua-pagination {
+    justify-content: space-between;
+  }
+  .ncua-pagination__list {
+    display: none;
+  }
+  .ncua-pagination__first, .ncua-pagination__last {
+    display: none;
+  }
+  .ncua-pagination__page-info {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    font-size: 14px;
+    color: var(--gray-400);
+  }
+  .ncua-pagination__current-num {
+    font-style: normal;
+    color: var(--gray-700);
+  }
+}
+
+@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;
+}