@ncds/ui-admin 0.0.24 → 0.0.25

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

@@ -55,7 +55,8 @@
   --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-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;
@@ -326,28 +327,22 @@ button {
   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(--gray-200);
   cursor: default;
 }
@@ -374,7 +369,7 @@ button {
 .ncua-btn--destructive {
   box-shadow: var(--shadow-xs);
   background-color: var(--primary-red-500);
-  border: 1px solid var(--primary-red-500);
+  border: 1px solid var(--primary-red-600);
   color: var(--base-white);
 }
 .ncua-btn--destructive:hover:not([disabled], .is-disable) {
@@ -386,6 +381,7 @@ button {
   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);
@@ -505,6 +501,7 @@ button {
   color: var(--gray-400);
 }
 .ncua-button-group__item {
+  cursor: pointer;
   color: inherit;
   border: none;
   outline: none;
@@ -512,9 +509,8 @@ button {
   justify-content: center;
   align-items: center;
   box-sizing: border-box;
-  cursor: pointer;
-  gap: 8px;
   background-color: var(--base-white);
+  gap: 8px;
 }
 .ncua-button-group__item[href] {
   text-decoration: none;
@@ -529,32 +525,36 @@ button {
 .ncua-button-group__item:last-child {
   padding-right: 0;
 }
-.ncua-button-group__item.is-active {
+.ncua-button-group__item.is-disabled {
+  color: var(--gray-200);
+}
+.ncua-button-group__item.is-current {
   color: var(--gray-600);
 }
-.ncua-button-group.has-border {
+:where(.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 {
+:where(.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 {
+:where(.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);
+:where(.ncua-button-group.has-border) .ncua-button-group__item.is-current {
+  color: var(--gray-600);
+  background-color: var(--gray-50);
 }
-.ncua-button-group.has-border .ncua-button-group__item:nth-child(n+2) {
+:where(.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 {
+:where(.ncua-button-group.has-border) .ncua-button-group__item svg {
   display: block;
 }
+
 .ncua-button-group:not(.has-border) .ncua-button-group__item {
   position: relative;
+  background-color: transparent;
 }
 .ncua-button-group:not(.has-border) .ncua-button-group__item:not(:last-child):after {
   content: "";
@@ -568,32 +568,55 @@ button {
 }
 .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-xxxs);
+  line-height: var(--line-heights-xxxs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-button-group--xs .ncua-button-group__item.is-only-icon {
+  padding: 6px;
+}
+:where(.ncua-button-group--xs.has-border) {
+  border-radius: 4px;
+}
+
 .ncua-button-group--sm .ncua-button-group__item {
+  padding: 5px 16px;
   font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-button-group--sm .ncua-button-group__item.is-only-icon {
+  padding: 6px;
+}
+:where(.ncua-button-group--sm.has-border) {
+  border-radius: 6px;
+}
+
 .ncua-button-group--md .ncua-button-group__item {
+  padding: 7px 16px;
   font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-button-group--md .ncua-button-group__item.is-only-icon {
+  padding: 10px;
+}
+:where(.ncua-button-group--md.has-border) {
+  border-radius: 6px;
+}
+
 .ncua-button-group--lg .ncua-button-group__item {
+  padding: 9px 16px;
   font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
 }
+.ncua-button-group--lg .ncua-button-group__item.is-only-icon {
+  padding: 10px;
+}
+:where(.ncua-button-group--lg.has-border) {
+  border-radius: 8px;
+}
 
 .ncua-btn-close {
   display: inline-flex;
@@ -664,10 +687,12 @@ button {
 }
 .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);
@@ -690,6 +715,7 @@ button {
   align-items: center;
   width: 100%;
   height: 100%;
+  z-index: 2;
 }
 .ncua-checkbox-input :not(input:checked + .ncua-checkbox-input__ico) > svg {
   display: none;
@@ -713,13 +739,15 @@ button {
 }
 .ncua-checkbox-field__support-text {
   color: var(--gray-400);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
 }
 .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--md .ncua-checkbox-field__text {
   font-size: var(--font-size-sm);
   line-height: 22px;
 }
@@ -757,69 +785,93 @@ button {
   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);
 }
@@ -930,6 +982,7 @@ button {
   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);
@@ -985,7 +1038,7 @@ button {
 .ncua-dropdown__header-subtitle {
   font-size: var(--font-size-xxxs);
   font-weight: var(--font-weights-commerce-sans-0);
-  color: var(--gray-500);
+  color: var(--gray-400);
   line-height: var(--line-heights-xxxs);
 }
 .ncua-dropdown__menu-items {
@@ -1028,19 +1081,19 @@ button {
   background-color: var(--gray-50);
 }
 .ncua-dropdown__item-text-group {
+  flex: 1;
   display: flex;
   align-items: center;
   gap: 8px;
-  flex: 1;
+  color: var(--gray-500);
 }
 .ncua-dropdown__item-icon {
-  width: 20px;
-  height: 20px;
+  width: 14px;
+  height: 14px;
 }
 .ncua-dropdown__item-text {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-1);
-  color: var(--gray-600);
   line-height: var(--line-heights-xs);
 }
 .ncua-dropdown__item-shortcut {
@@ -1152,7 +1205,6 @@ button {
 }
 .ncua-input input::placeholder,
 .ncua-input textarea::placeholder {
-  transform: translateY(1px);
   color: var(--gray-300);
 }
 .ncua-input input:focus,
@@ -1254,24 +1306,25 @@ button {
   width: 100%;
 }
 
-.ncua-input__leading-text {
+.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);
   border-radius: 6px 0 0 6px;
+  border-right-width: 0;
   color: var(--gray-400);
   font-size: var(--font-size-sm);
-  border-width: 1px 0 1px 1px;
 }
-.ncua-input__leading-text--xs {
+.ncua-input__leading-text-wrap .ncua-input__leading-text--xs {
   padding: 5px 10px;
 }
-.ncua-input__leading-text--md {
+.ncua-input__leading-text-wrap .ncua-input__leading-text--md {
   padding: 6px 12px;
 }
-.ncua-input__leading-text + .ncua-input__field {
-  border-radius: 0 6px 6px 0;
+.ncua-input__leading-text-wrap .ncua-input__leading-text + .ncua-input__field {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }
 
 .ncua-input__trailing-button .ncua-input__button {
@@ -1282,7 +1335,7 @@ button {
   border-radius: 0 6px 6px 0;
   border-left-width: 0;
   color: var(--gray-700);
-  font-weight: var(--font-weight-commerce-sans-2);
+  font-weight: var(--font-weights-commerce-sans-2);
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
   padding: 5px 10px;
@@ -1311,8 +1364,22 @@ button {
 }
 
 .ncua-input--textarea {
-  font-size: var(--font-size-xxxs);
   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;
@@ -1347,11 +1414,18 @@ button {
   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-weight-commerce-sans-1);
+  font-weight: var(--font-weights-commerce-sans-1);
 }
 :where(.ncua-label.is-required)::before {
   content: "*";
@@ -1918,6 +1992,10 @@ button {
   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);
@@ -1928,6 +2006,7 @@ button {
 }
 .ncua-radio-input :where(input):disabled {
   border-color: var(--gray-200);
+  background-color: var(--gray-100);
 }
 .ncua-radio-input :where(input)::before {
   position: absolute;
@@ -1955,16 +2034,12 @@ button {
   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;
+  line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-0);
-  font-size: var(--font-size-1);
+  font-size: var(--font-size-xs);
   cursor: pointer;
 }
 .ncua-radio-field__text {
@@ -1975,14 +2050,9 @@ button {
 .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--md .ncua-radio-field__text {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
 }
 .ncua-radio-field.has-text {
   display: inline-flex;
@@ -1998,7 +2068,6 @@ button {
 .ncua-tag {
   display: inline-flex;
   align-items: center;
-  border-radius: 6px;
   border: 1px solid var(--gray-200);
   color: var(--gray-500);
   line-height: 1.5;
@@ -2011,11 +2080,13 @@ button {
   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;
@@ -2046,7 +2117,7 @@ button {
   display: inline-flex;
   align-items: center;
   min-width: 16px;
-  height: 16px;
+  height: 14px;
   margin-left: 6px;
   margin-right: -5px;
   padding: 0 5px;
@@ -2057,6 +2128,9 @@ button {
 .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;
@@ -2235,7 +2309,7 @@ button {
   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");
+  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%);
 }
@@ -2251,14 +2325,13 @@ button {
   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);
+  box-shadow: var(--shadow-xs-focused-3px-gray-100);
 }
 .ncua-select.destructive .ncua-select__content {
   border-color: var(--primary-red-600);
@@ -2279,6 +2352,7 @@ button {
 .ncua-select--xs {
   height: var(--select-height-xs);
   border-radius: 6px;
+  padding-right: 28px;
 }
 .ncua-select--xs > .ncua-select__tag {
   font-size: var(--font-size-xs);
@@ -2286,21 +2360,33 @@ button {
 }
 .ncua-select--sm {
   height: var(--select-height-sm);
-  border-radius: 8px;
+  border-radius: 6px;
+  padding-right: 30px;
 }
 .ncua-select--sm > .ncua-select__tag {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.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-right: 30px;
 }
 .ncua-select--md > .ncua-select__tag {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.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;
@@ -2457,6 +2543,8 @@ button {
   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);
 }
@@ -2642,9 +2730,6 @@ button {
 .ncua-toggle--md.ncua-toggle--checked .ncua-toggle__slider {
   transform: translateX(var(--toggle-md-translate));
 }
-.ncua-toggle--disabled {
-  cursor: not-allowed;
-}
 .ncua-toggle:not(.ncua-toggle--disabled):hover .ncua-toggle__switch {
   background-color: var(--gray-300);
 }
@@ -2660,6 +2745,15 @@ button {
 .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;
@@ -2873,6 +2967,15 @@ button {
   gap: 8px;
 }
 
+.ncua-range-date-picker-with-buttons {
+  display: inline-flex;
+  align-items: center;
+  gap: 16px;
+}
+.ncua-range-date-picker-with-buttons .ncua-range-date-picker {
+  transform: translateY(1px);
+}
+
 .ncua-carousel-number-group {
   display: inline-flex;
   align-items: center;
@@ -2931,13 +3034,13 @@ button {
 .ncua-breadcrumb {
   display: flex;
   align-items: center;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
 }
 .ncua-breadcrumb__list {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 20px;
+  gap: 32px;
   padding: 0;
   margin: 0;
   list-style: none;
@@ -2947,23 +3050,26 @@ button {
   display: flex;
   align-items: center;
   height: 28px;
-  padding: 4px 8px;
+  padding: 4px 6px;
   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:not(:first-child):not(:last-child) {
-  color: var(--gray-600);
+.ncua-breadcrumb__list-item:hover {
   background-color: var(--gray-100);
   border-radius: 4px;
 }
 .ncua-breadcrumb__list-item:not(:last-child)::after {
   content: "";
   position: absolute;
-  right: -18px;
+  right: -24px;
   top: 50%;
   transform: translateY(-50%);
   display: inline-block;
@@ -3124,10 +3230,12 @@ button {
   transform: translateX(-50%);
   transition: left 0.3s ease;
   height: 32px;
-  padding: 7px 12px;
+  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 {
@@ -3165,6 +3273,7 @@ button {
 .ncua-tab-button {
   display: inline-flex;
   gap: 8px;
+  align-items: center;
   justify-content: center;
   width: 100%;
   font-weight: var(--font-weights-commerce-sans-2);
@@ -3177,17 +3286,17 @@ button {
   color: var(--gray-700);
 }
 .ncua-tab-button--xs {
-  padding: 9px 12px;
+  padding: 5px 12px;
   height: 34px;
   font-size: var(--font-size-xs);
 }
 .ncua-tab-button--sm {
-  padding: 11px 12px;
+  padding: 7px 12px;
   height: 38px;
   font-size: var(--font-size-sm);
 }
 .ncua-tab-button--md {
-  padding: 14px;
+  padding: 9px 14px;
   height: 44px;
   font-size: var(--font-size-md);
 }
@@ -3244,9 +3353,6 @@ button {
 .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-tab-button .ncua-badge {
-  transform: translateY(-1px);
-}
 
 .ncua-horizontal-tab {
   position: relative;