@unifiedsoftware/styles 2.0.0-alpha.1 → 2.0.0-alpha.11

package/css/fci.css

@@ -1,13 +1,31 @@
 .us-theme-fci .us-accordion {
-  --us-accordion-border-radius: 10px;
-  --us-accordion-border-width: 1px;
-  --us-accordion-border-style: solid;
   --us-accordion-border-color: var(--us-border-color);
+  --us-accordion-item-border: 1px solid var(--us-accordion-border-color);
   --us-accordion-header-border-color: var(--us-accordion-border-color);
   --us-accordion-header-title-font-weight: 500;
   --us-accordion-header-subtitle-font-weight: 400;
+  --us-accordion-body-color: inherit;
+}
+.us-theme-fci .us-accordion > .us-outline {
+  --us-outline-border-width: 0px;
+  --us-outline-z-index: 1;
+  --us-outline-border-color: var(--us-accordion-border-color);
+}
+.us-theme-fci .us-accordion--bordered:not(.us-accordion--splitted) {
+  --us-accordion-border-radius: 10px;
+}
+.us-theme-fci .us-accordion--bordered:not(.us-accordion--splitted) > .us-outline {
+  --us-outline-border-width: 1px;
 }
-.us-theme-fci .us-accordion--xs .us-accordion-header {
+.us-theme-fci .us-accordion--bordered.us-accordion--splitted .us-accordion-item {
+  --us-accordion-border-radius: 10px;
+  --us-accordion-item-border: none;
+}
+.us-theme-fci .us-accordion--bordered.us-accordion--splitted .us-accordion-item > .us-outline {
+  --us-outline-border-width: 1px;
+}
+.us-theme-fci .us-accordion--xs {
+  --us-accordion-splitted-gap: 0.25rem;
   --us-accordion-header-min-height: 36px;
   --us-accordion-header-padding-y: 0.685rem;
   --us-accordion-header-padding-x: 1rem;
@@ -18,14 +36,13 @@
   --us-accordion-header-title-line-height: 18px;
   --us-accordion-header-subtitle-font-size: 11px;
   --us-accordion-header-title-line-height: 14px;
-}
-.us-theme-fci .us-accordion--xs .us-accordion-body {
   --us-accordion-body-padding-y: 1rem;
   --us-accordion-body-padding-x: 1rem;
   --us-accordion-body-font-size: 0.75rem;
   --us-accordion-body-line-height: 18px;
 }
-.us-theme-fci .us-accordion--sm .us-accordion-header {
+.us-theme-fci .us-accordion--sm {
+  --us-accordion-splitted-gap: 0.5rem;
   --us-accordion-header-min-height: 48px;
   --us-accordion-header-padding-y: 0.625rem;
   --us-accordion-header-padding-x: 1rem;
@@ -35,17 +52,13 @@
   --us-accordion-header-title-line-height: 20px;
   --us-accordion-header-subtitle-font-size: 0.75rem;
   --us-accordion-header-subtitle-line-height: 16px;
-}
-.us-theme-fci .us-accordion--sm .us-accordion-body {
   --us-accordion-body-padding-y: 1.25rem;
   --us-accordion-body-padding-x: 1rem;
   --us-accordion-body-font-size: 0.875rem;
   --us-accordion-body-line-height: 20px;
 }
 .us-theme-fci .us-accordion--md {
-  --us-accordion-splitted-gap: 0.5rem;
-}
-.us-theme-fci .us-accordion--md .us-accordion-header {
+  --us-accordion-splitted-gap: 0.75rem;
   --us-accordion-header-min-height: 56px;
   --us-accordion-header-padding-y: 0.625rem;
   --us-accordion-header-padding-x: 1rem;
@@ -57,17 +70,16 @@
   --us-accordion-header-title-line-height: 24px;
   --us-accordion-header-subtitle-font-size: 0.8125rem;
   --us-accordion-header-subtitle-line-height: 18px;
-}
-.us-theme-fci .us-accordion--md .us-accordion-header .us-icon:not(.us-button .us-icon) {
-  --us-icon-font-size-default: 24px;
-}
-.us-theme-fci .us-accordion--md .us-accordion-body {
   --us-accordion-body-padding-y: 1.5rem;
   --us-accordion-body-padding-x: 1rem;
   --us-accordion-body-font-size: 1rem;
   --us-accordion-body-line-height: 24px;
 }
-.us-theme-fci .us-accordion--lg .us-accordion-header {
+.us-theme-fci .us-accordion--md .us-accordion-header .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 24px;
+}
+.us-theme-fci .us-accordion--lg {
+  --us-accordion-splitted-gap: 1rem;
   --us-accordion-header-min-height: 64px;
   --us-accordion-header-padding-y: 0.625rem;
   --us-accordion-header-padding-x: 1rem;
@@ -78,14 +90,13 @@
   --us-accordion-header-title-line-height: 24px;
   --us-accordion-header-subtitle-font-size: 0.8125rem;
   --us-accordion-header-subtitle-line-height: 18px;
-}
-.us-theme-fci .us-accordion--lg .us-accordion-body {
   --us-accordion-body-padding-y: 1.5rem;
   --us-accordion-body-padding-x: 1rem;
   --us-accordion-body-font-size: 1rem;
   --us-accordion-body-line-height: 24px;
 }
-.us-theme-fci .us-accordion--xl .us-accordion-header {
+.us-theme-fci .us-accordion--xl {
+  --us-accordion-splitted-gap: 1.25rem;
   --us-accordion-header-min-height: 3.5rem;
   --us-accordion-header-padding-y: 0.625rem;
   --us-accordion-header-padding-x: 1rem;
@@ -96,119 +107,177 @@
   --us-accordion-header-title-line-height: 24px;
   --us-accordion-header-subtitle-font-size: 0.8125rem;
   --us-accordion-header-subtitle-line-height: 18px;
-}
-.us-theme-fci .us-accordion--xl .us-accordion-body {
   --us-accordion-body-padding-y: 1.5rem;
   --us-accordion-body-padding-x: 1rem;
   --us-accordion-body-font-size: 1rem;
   --us-accordion-body-line-height: 24px;
 }
+.us-theme-fci .us-accordion-item > .us-outline {
+  --us-outline-border-width: 0px;
+  --us-outline-z-index: 1;
+  --us-outline-border-color: var(--us-accordion-border-color);
+}
 .us-theme-fci .us-accordion-item--selected {
   --us-accordion-header-title-font-weight: 700;
 }
-.us-theme-fci .us-accordion--plain.us-accordion--primary .us-accordion-body {
-  --us-accordion-body-color: var(--us-primary-color);
-}
-.us-theme-fci .us-accordion--plain.us-accordion--primary .us-accordion-body > .us-surface {
+.us-theme-fci .us-accordion-body > .us-surface {
   --us-surface-color: var(--us-white-color);
 }
-.us-theme-fci .us-accordion-header--plain.us-accordion-header--primary {
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--primary {
   --us-accordion-header-color: var(--us-primary-color);
 }
-.us-theme-fci .us-accordion-header--plain.us-accordion-header--primary > .us-surface {
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--primary .us-accordion-header > .us-surface {
   --us-surface-color: var(--us-white-color);
 }
-.us-theme-fci .us-accordion--plain.us-accordion--secondary .us-accordion-body {
-  --us-accordion-body-color: inherit;
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--secondary {
+  --us-accordion-header-color: var(--us-secondary-color);
 }
-.us-theme-fci .us-accordion--plain.us-accordion--secondary .us-accordion-body > .us-surface {
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--secondary .us-accordion-header > .us-surface {
   --us-surface-color: var(--us-white-color);
 }
-.us-theme-fci .us-accordion-header--plain.us-accordion-header--secondary {
-  --us-accordion-header-color: var(--us-secondary-color);
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--success {
+  --us-accordion-header-color: var(--us-success-color);
 }
-.us-theme-fci .us-accordion-header--plain.us-accordion-header--secondary > .us-surface {
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--success .us-accordion-header > .us-surface {
   --us-surface-color: var(--us-white-color);
 }
-.us-theme-fci .us-accordion--flat.us-accordion--primary .us-accordion-body {
-  --us-accordion-body-color: var(--us-primary-color);
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--info {
+  --us-accordion-header-color: var(--us-info-color);
 }
-.us-theme-fci .us-accordion--flat.us-accordion--primary .us-accordion-body > .us-surface {
-  --us-surface-color: var(--us-primary-color);
-  --us-surface-opacity: 0.16;
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--info .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-white-color);
 }
-.us-theme-fci .us-accordion-header--flat.us-accordion-header--primary {
-  --us-accordion-header-color: var(--us-primary-color);
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--warning {
+  --us-accordion-header-color: var(--us-warning-color);
+}
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--warning .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--danger {
+  --us-accordion-header-color: var(--us-danger-color);
+}
+.us-theme-fci .us-accordion-item--plain.us-accordion-item--danger .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--primary {
+  --us-accordion-header-color: var(--us-white-color);
 }
-.us-theme-fci .us-accordion-header--flat.us-accordion-header--primary > .us-surface {
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--primary .us-accordion-header > .us-surface {
   --us-surface-color: var(--us-primary-color);
-  --us-surface-opacity: 0.16;
 }
-.us-theme-fci .us-accordion--flat.us-accordion--secondary .us-accordion-body {
-  --us-accordion-body-color: inherit;
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--secondary {
+  --us-accordion-header-color: var(--us-white-color);
 }
-.us-theme-fci .us-accordion--flat.us-accordion--secondary .us-accordion-body > .us-surface {
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--secondary .us-accordion-header > .us-surface {
   --us-surface-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--success {
+  --us-accordion-header-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--success .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-success-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--info {
+  --us-accordion-header-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--info .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-info-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--warning {
+  --us-accordion-header-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--warning .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-warning-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--danger {
+  --us-accordion-header-color: var(--us-white-color);
+}
+.us-theme-fci .us-accordion-item--filled.us-accordion-item--danger .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-danger-color);
+}
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--primary {
+  --us-accordion-header-color: var(--us-primary-color);
+}
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--primary .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-primary-color);
   --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion-header--flat.us-accordion-header--secondary {
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--secondary {
   --us-accordion-header-color: var(--us-secondary-color);
 }
-.us-theme-fci .us-accordion-header--flat.us-accordion-header--secondary > .us-surface {
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--secondary .us-accordion-header > .us-surface {
   --us-surface-color: var(--us-secondary-color);
   --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion--tonal.us-accordion--primary .us-accordion-body {
-  --us-accordion-body-color: inherit;
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--success {
+  --us-accordion-header-color: var(--us-success-color);
 }
-.us-theme-fci .us-accordion--tonal.us-accordion--primary .us-accordion-body > .us-surface {
-  --us-surface-color: var(--us-primary-color);
-  --us-surface-opacity: 0.16;
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--success .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-success-color);
+  --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion-header--tonal.us-accordion-header--primary {
-  --us-accordion-header-color: var(--us-secondary-color);
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--info {
+  --us-accordion-header-color: var(--us-info-color);
 }
-.us-theme-fci .us-accordion-header--tonal.us-accordion-header--primary > .us-surface {
-  --us-surface-color: var(--us-primary-color);
-  --us-surface-opacity: 0.16;
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--info .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-info-color);
+  --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion--tonal.us-accordion--secondary .us-accordion-body {
-  --us-accordion-body-color: inherit;
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--warning {
+  --us-accordion-header-color: var(--us-warning-color);
 }
-.us-theme-fci .us-accordion--tonal.us-accordion--secondary .us-accordion-body > .us-surface {
-  --us-surface-color: var(--us-secondary-color);
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--warning .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-warning-color);
   --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion-header--tonal.us-accordion-header--secondary {
-  --us-accordion-header-color: var(--us-secondary-color);
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--danger {
+  --us-accordion-header-color: var(--us-danger-color);
 }
-.us-theme-fci .us-accordion-header--tonal.us-accordion-header--secondary > .us-surface {
-  --us-surface-color: var(--us-secondary-color);
+.us-theme-fci .us-accordion-item--flat.us-accordion-item--danger .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-danger-color);
   --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion--filled.us-accordion--primary .us-accordion-body {
-  --us-accordion-body-color: #fff;
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--primary {
+  --us-accordion-header-color: var(--us-black-color);
 }
-.us-theme-fci .us-accordion--filled.us-accordion--primary .us-accordion-body > .us-surface {
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--primary .us-accordion-header > .us-surface {
   --us-surface-color: var(--us-primary-color);
+  --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion-header--filled.us-accordion-header--primary {
-  --us-accordion-header-color: var(--us-white-color);
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--secondary {
+  --us-accordion-header-color: var(--us-black-color);
 }
-.us-theme-fci .us-accordion-header--filled.us-accordion-header--primary > .us-surface {
-  --us-surface-color: var(--us-primary-color);
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--secondary .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-secondary-color);
+  --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion--filled.us-accordion--secondary .us-accordion-body {
-  --us-accordion-body-color: #fff;
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--success {
+  --us-accordion-header-color: var(--us-black-color);
 }
-.us-theme-fci .us-accordion--filled.us-accordion--secondary .us-accordion-body > .us-surface {
-  --us-surface-color: var(--us-secondary-color);
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--success .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-success-color);
+  --us-surface-opacity: 0.08;
 }
-.us-theme-fci .us-accordion-header--filled.us-accordion-header--secondary {
-  --us-accordion-header-color: var(--us-white-color);
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--info {
+  --us-accordion-header-color: var(--us-black-color);
 }
-.us-theme-fci .us-accordion-header--filled.us-accordion-header--secondary > .us-surface {
-  --us-surface-color: var(--us-secondary-color);
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--info .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-info-color);
+  --us-surface-opacity: 0.08;
+}
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--warning {
+  --us-accordion-header-color: var(--us-black-color);
+}
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--warning .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-warning-color);
+  --us-surface-opacity: 0.08;
+}
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--danger {
+  --us-accordion-header-color: var(--us-black-color);
+}
+.us-theme-fci .us-accordion-item--tonal.us-accordion-item--danger .us-accordion-header > .us-surface {
+  --us-surface-color: var(--us-danger-color);
+  --us-surface-opacity: 0.08;
 }
 
 .us-theme-fci .us-toolbar {
@@ -252,7 +321,7 @@
 }
 
 .us-theme-fci .us-icon {
-  --us-icon-font-size: 1.5rem;
+  --us-icon-font-size-default: 1.5rem;
   --us-icon-color: inherit;
 }
 .us-theme-fci .us-icon--xs {
@@ -314,7 +383,12 @@
   --us-badge-background: var(--us-secondary-color);
 }
 .us-theme-fci .us-badge--secondary {
-  --us-badge-color: var(--us-black-color);
+  --us-badge-color: var(--us-secondary-color);
+  --us-badge-background: #fff;
+}
+.us-theme-fci .us-badge--secondary > .us-overlay {
+  --us-overlay-color: inherit;
+  --us-overlay-opacity: 0.16;
 }
 .us-theme-fci .us-badge--success {
   --us-badge-background: var(--us-success-color);
@@ -333,7 +407,7 @@
   --us-chip-padding-y: 0.125rem;
   --us-chip-padding-x: 0.5rem;
   --us-chip-font-size: 0.75rem;
-  --us-chip-font-weight: 400;
+  --us-chip-font-weight: 500;
   --us-chip-border-radius: 9999px;
 }
 .us-theme-fci .us-chip > .us-overlay {
@@ -400,10 +474,20 @@
   --us-chip-color: var(--us-white-color);
 }
 .us-theme-fci .us-chip--outlined > .us-outline {
+  --us-outline-border-width: 1px;
   --us-outline-border-color: currentColor;
 }
+.us-theme-fci .us-chip--flat > .us-outline {
+  --us-outline-border-width: 1px;
+  --us-outline-border-color: transparent;
+}
 .us-theme-fci .us-chip--flat > .us-overlay {
-  --us-overlay-opacity: 0.08;
+  --us-overlay-color: inherit;
+  --us-overlay-opacity: 0.16;
+}
+.us-theme-fci .us-chip--text > .us-outline {
+  --us-outline-border-width: 1px;
+  --us-outline-border-color: transparent;
 }
 .us-theme-fci .us-chip--filled.us-chip--primary {
   --us-chip-background: var(--us-primary-color);
@@ -429,6 +513,14 @@
 .us-theme-fci .us-chip--text.us-chip--secondary {
   --us-chip-color: var(--us-secondary-color);
 }
+.us-theme-fci .us-chip--filled.us-chip--secondary {
+  --us-chip-color: var(--us-secondary-color);
+  --us-chip-background: transparent;
+}
+.us-theme-fci .us-chip--filled.us-chip--secondary > .us-overlay {
+  --us-overlay-color: inherit;
+  --us-overlay-opacity: 0.16;
+}
 .us-theme-fci .us-chip--filled.us-chip--success {
   --us-chip-background: var(--us-success-color);
 }
@@ -441,6 +533,15 @@
 .us-theme-fci .us-chip--text.us-chip--success {
   --us-chip-color: var(--us-success-color);
 }
+.us-theme-fci .us-chip--outlined.us-chip--success {
+  --us-chip-color: var(--us-success-dark-color);
+}
+.us-theme-fci .us-chip--flat.us-chip--success {
+  --us-chip-color: var(--us-success-dark-color);
+}
+.us-theme-fci .us-chip--text.us-chip--success {
+  --us-chip-color: var(--us-success-dark-color);
+}
 .us-theme-fci .us-chip--filled.us-chip--info {
   --us-chip-background: var(--us-info-color);
 }
@@ -453,6 +554,12 @@
 .us-theme-fci .us-chip--text.us-chip--info {
   --us-chip-color: var(--us-info-color);
 }
+.us-theme-fci .us-chip--flat.us-chip--info {
+  --us-chip-color: var(--us-info-dark-color);
+}
+.us-theme-fci .us-chip--text.us-chip--info {
+  --us-chip-color: var(--us-info-dark-color);
+}
 .us-theme-fci .us-chip--filled.us-chip--warning {
   --us-chip-background: var(--us-warning-color);
 }
@@ -465,6 +572,15 @@
 .us-theme-fci .us-chip--text.us-chip--warning {
   --us-chip-color: var(--us-warning-color);
 }
+.us-theme-fci .us-chip--outlined.us-chip--warning {
+  --us-chip-color: var(--us-warning-dark-color);
+}
+.us-theme-fci .us-chip--flat.us-chip--warning {
+  --us-chip-color: var(--us-warning-dark-color);
+}
+.us-theme-fci .us-chip--text.us-chip--warning {
+  --us-chip-color: var(--us-warning-dark-color);
+}
 .us-theme-fci .us-chip--filled.us-chip--danger {
   --us-chip-background: var(--us-danger-color);
 }
@@ -491,7 +607,7 @@ html {
   --us-button-divider-color: #fff;
 }
 .us-theme-fci .us-button--xs {
-  --us-button-height: 24px;
+  --us-button-height: 22px;
   --us-button-padding-y: 0;
   --us-button-padding-x: 0.625rem;
   --us-button-font-size: 0.75rem;
@@ -499,10 +615,10 @@ html {
   --us-button-gap: 0.25rem;
 }
 .us-theme-fci .us-button--xs .us-icon {
-  --us-icon-font-size: 0.875rem;
+  --us-icon-font-size: 0.75rem;
 }
 .us-theme-fci .us-button--sm {
-  --us-button-height: 28px;
+  --us-button-height: 26px;
   --us-button-padding-y: 0;
   --us-button-padding-x: 0.75rem;
   --us-button-font-size: 0.75rem;
@@ -510,39 +626,50 @@ html {
   --us-button-gap: 0.25rem;
 }
 .us-theme-fci .us-button--sm .us-icon {
-  --us-icon-font-size: 1rem;
+  --us-icon-font-size: 0.875rem;
 }
 .us-theme-fci .us-button--md {
-  --us-button-height: 36px;
+  --us-button-height: 30px;
   --us-button-padding-y: 0;
-  --us-button-padding-x: 1rem;
+  --us-button-padding-x: 0.875rem;
   --us-button-font-size: 0.875rem;
-  --us-button-border-radius: 8px;
+  --us-button-border-radius: 6px;
   --us-button-gap: 0.375rem;
 }
 .us-theme-fci .us-button--md .us-icon {
-  --us-icon-font-size: 1.125rem;
+  --us-icon-font-size: 1rem;
 }
 .us-theme-fci .us-button--lg {
-  --us-button-height: 36px;
+  --us-button-height: 34px;
   --us-button-padding-y: 0;
   --us-button-padding-x: 1rem;
-  --us-button-font-size: 1rem;
-  --us-button-border-radius: 6px;
+  --us-button-font-size: 0.875rem;
+  --us-button-border-radius: 8px;
   --us-button-gap: 0.5rem;
 }
 .us-theme-fci .us-button--lg .us-icon {
-  --us-icon-font-size: 1.25rem;
+  --us-icon-font-size: 1.125rem;
 }
 .us-theme-fci .us-button--xl {
   --us-button-height: 40px;
   --us-button-padding-y: 0;
-  --us-button-padding-x: 1.125rem;
-  --us-button-font-size: 1.125rem;
-  --us-button-border-radius: 6px;
+  --us-button-padding-x: 1.25rem;
+  --us-button-font-size: 1rem;
+  --us-button-border-radius: 8px;
   --us-button-gap: 0.5rem;
 }
 .us-theme-fci .us-button--xl .us-icon {
+  --us-icon-font-size: 1.25rem;
+}
+.us-theme-fci .us-button--2xl {
+  --us-button-height: 44px;
+  --us-button-padding-y: 0;
+  --us-button-padding-x: 1.5rem;
+  --us-button-font-size: 1.125rem;
+  --us-button-border-radius: 10px;
+  --us-button-gap: 0.75rem;
+}
+.us-theme-fci .us-button--2xl .us-icon {
   --us-icon-font-size: 1.5rem;
 }
 .us-theme-fci .us-button--filled {
@@ -568,18 +695,18 @@ html {
 .us-theme-fci .us-button--outlined > .us-overlay {
   --us-overlay-color: inherit;
   --us-overlay-opacity: 0;
-  --us-_hover-overlay-opacity: 0.12;
+  --us-_hover-overlay-opacity: 0.16;
   --us-_active-overlay-opacity: 0.24;
   --us-_focus-hover-overlay-opacity: 0.12;
   --us-_focus-active-overlay-opacity: 0.24;
 }
 .us-theme-fci .us-button--outlined > .us-outline {
-  --us-outline-border-width: 2px;
+  --us-outline-border-width: 1px;
   --us-outline-border-color: currentColor;
 }
 .us-theme-fci .us-button--flat > .us-overlay {
   --us-overlay-color: inherit;
-  --us-overlay-opacity: 0.12;
+  --us-overlay-opacity: 0.16;
   --us-_hover-overlay-opacity: 0.24;
   --us-_active-overlay-opacity: 0.32;
   --us-_focus-hover-overlay-opacity: 0.24;
@@ -592,7 +719,7 @@ html {
 .us-theme-fci .us-button--text > .us-overlay {
   --us-overlay-color: inherit;
   --us-overlay-opacity: 0;
-  --us-_hover-overlay-opacity: 0.12;
+  --us-_hover-overlay-opacity: 0.16;
   --us-_active-overlay-opacity: 0.24;
   --us-_focus-hover-overlay-opacity: 0.12;
   --us-_focus-active-overlay-opacity: 0.24;
@@ -601,17 +728,23 @@ html {
   --us-outline-border-width: 1px;
   --us-outline-border-color: transparent;
 }
-.us-theme-fci .us-button--filled.us-button--inherit {
-  --us-button-background: inherit;
+.us-theme-fci .us-button--xs.us-button--icon-only .us-icon {
+  --us-icon-font-size: 0.875rem;
 }
-.us-theme-fci .us-button--outlined.us-button--inherit {
-  --us-button-color: inherit;
+.us-theme-fci .us-button--sm.us-button--icon-only .us-icon {
+  --us-icon-font-size: 1rem;
 }
-.us-theme-fci .us-button--flat.us-button--inherit {
-  --us-button-color: inherit;
+.us-theme-fci .us-button--md.us-button--icon-only .us-icon {
+  --us-icon-font-size: 1.25rem;
+}
+.us-theme-fci .us-button--lg.us-button--icon-only .us-icon {
+  --us-icon-font-size: 1.5rem;
 }
-.us-theme-fci .us-button--text.us-button--inherit {
-  --us-button-color: inherit;
+.us-theme-fci .us-button--xl.us-button--icon-only .us-icon {
+  --us-icon-font-size: 1.75rem;
+}
+.us-theme-fci .us-button--2xl.us-button--icon-only .us-icon {
+  --us-icon-font-size: 1.875rem;
 }
 .us-theme-fci .us-button--filled.us-button--primary {
   --us-button-background: var(--us-primary-color);
@@ -637,6 +770,27 @@ html {
 .us-theme-fci .us-button--text.us-button--secondary {
   --us-button-color: var(--us-secondary-color);
 }
+.us-theme-fci .us-button--filled.us-button--secondary {
+  --us-button-color: var(--us-secondary-color);
+  --us-button-background: transparent;
+}
+.us-theme-fci .us-button--filled.us-button--secondary > .us-overlay {
+  --us-overlay-color: inherit;
+  --us-overlay-opacity: 0.16;
+  --us-_hover-overlay-opacity: 0.24;
+  --us-_active-overlay-opacity: 0.32;
+  --us-_focus-hover-overlay-opacity: 0.24;
+  --us-_focus-active-overlay-opacity: 0.32;
+}
+.us-theme-fci .us-button--outlined.us-button--secondary > .us-overlay {
+  --us-_hover-overlay-opacity: 0.08;
+  --us-_active-overlay-opacity: 0.12;
+  --us-_focus-hover-overlay-opacity: 0.08;
+  --us-_focus-active-overlay-opacity: 0.12;
+}
+.us-theme-fci .us-button--outlined.us-button--secondary > .us-outline {
+  --us-outline-opacity: 0.16;
+}
 .us-theme-fci .us-button--filled.us-button--success {
   --us-button-background: var(--us-success-color);
 }
@@ -649,6 +803,24 @@ html {
 .us-theme-fci .us-button--text.us-button--success {
   --us-button-color: var(--us-success-color);
 }
+.us-theme-fci .us-button--outlined.us-button--success {
+  --us-button-color: var(--us-success-dark-color);
+}
+.us-theme-fci .us-button--outlined.us-button--success > .us-overlay {
+  --us-overlay-color: var(--us-success-color);
+}
+.us-theme-fci .us-button--flat.us-button--success {
+  --us-button-color: var(--us-success-dark-color);
+}
+.us-theme-fci .us-button--flat.us-button--success > .us-overlay {
+  --us-overlay-color: var(--us-success-color);
+}
+.us-theme-fci .us-button--text.us-button--success {
+  --us-button-color: var(--us-success-dark-color);
+}
+.us-theme-fci .us-button--text.us-button--success > .us-overlay {
+  --us-overlay-color: var(--us-success-color);
+}
 .us-theme-fci .us-button--filled.us-button--info {
   --us-button-background: var(--us-info-color);
 }
@@ -661,6 +833,18 @@ html {
 .us-theme-fci .us-button--text.us-button--info {
   --us-button-color: var(--us-info-color);
 }
+.us-theme-fci .us-button--flat.us-button--info {
+  --us-button-color: var(--us-info-dark-color);
+}
+.us-theme-fci .us-button--flat.us-button--info > .us-overlay {
+  --us-overlay-color: var(--us-info-color);
+}
+.us-theme-fci .us-button--text.us-button--info {
+  --us-button-color: var(--us-info-dark-color);
+}
+.us-theme-fci .us-button--text.us-button--info > .us-overlay {
+  --us-overlay-color: var(--us-info-color);
+}
 .us-theme-fci .us-button--filled.us-button--warning {
   --us-button-background: var(--us-warning-color);
 }
@@ -673,6 +857,24 @@ html {
 .us-theme-fci .us-button--text.us-button--warning {
   --us-button-color: var(--us-warning-color);
 }
+.us-theme-fci .us-button--outlined.us-button--warning {
+  --us-button-color: var(--us-warning-dark-color);
+}
+.us-theme-fci .us-button--outlined.us-button--warning > .us-overlay {
+  --us-overlay-color: var(--us-warning-color);
+}
+.us-theme-fci .us-button--flat.us-button--warning {
+  --us-button-color: var(--us-warning-dark-color);
+}
+.us-theme-fci .us-button--flat.us-button--warning > .us-overlay {
+  --us-overlay-color: var(--us-warning-color);
+}
+.us-theme-fci .us-button--text.us-button--warning {
+  --us-button-color: var(--us-warning-dark-color);
+}
+.us-theme-fci .us-button--text.us-button--warning > .us-overlay {
+  --us-overlay-color: var(--us-warning-color);
+}
 .us-theme-fci .us-button--filled.us-button--danger {
   --us-button-background: var(--us-danger-color);
 }
@@ -788,35 +990,37 @@ html {
 .us-theme-fci .us-input {
   --us-input-font-family: var(--us-font-sans);
   --us-input-border-radius: 6px;
-  --us-input-gap: 0.5rem;
-  --us-input-icon-size: 1.125rem;
 }
 .us-theme-fci .us-input--xs {
-  --us-input-height: 24px;
+  --us-input-height: 22px;
   --us-input-padding-y: 0.282rem;
   --us-input-padding-x: 0.625rem;
   --us-input-font-size: 0.75rem;
 }
 .us-theme-fci .us-input--sm {
-  --us-input-height: 28px;
+  --us-input-height: 24px;
   --us-input-padding-y: 0.407rem;
   --us-input-padding-x: 0.75rem;
   --us-input-font-size: 0.75rem;
 }
 .us-theme-fci .us-input--md {
-  --us-input-height: 32px;
+  --us-input-height: 30px;
   --us-input-padding-y: 0.532rem;
   --us-input-padding-x: 0.875rem;
   --us-input-font-size: 0.75rem;
+  --us-input-content-gap: 0.25rem;
+}
+.us-theme-fci .us-input--md .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 16px;
 }
 .us-theme-fci .us-input--lg {
-  --us-input-height: 36px;
+  --us-input-height: 34px;
   --us-input-padding-y: 0.625rem;
   --us-input-padding-x: 1rem;
   --us-input-font-size: 0.85rem;
 }
 .us-theme-fci .us-input--xl {
-  --us-input-height: 40px;
+  --us-input-height: 44px;
   --us-input-padding-y: 0.75rem;
   --us-input-padding-x: 1.125rem;
   --us-input-font-size: 0.85rem;
@@ -843,18 +1047,35 @@ html {
 .us-theme-fci .us-input--text > .us-outline {
   --us-outline-border-width: 1px;
 }
-.us-theme-fci .us-input--filled.us-input--inherit {
+.us-theme-fci .us-input--filled {
   --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
 }
-.us-theme-fci .us-input--filled.us-input--inherit > .us-overlay {
+.us-theme-fci .us-input--filled > .us-overlay {
   --us-overlay-color: #fff;
   --us-overlay-opacity: 1;
 }
-.us-theme-fci .us-input--filled.us-input--inherit > .us-outline {
+.us-theme-fci .us-input--filled > .us-outline {
   --us-outline-border-color: transparent;
-  --us-outline-focus-border-color: var(--us-primary-color);
   --us-outline-focus-opacity: 1;
 }
+.us-theme-fci .us-input--filled.us-input--primary > .us-outline {
+  --us-outline-focus-border-color: var(--us-primary-color);
+}
+.us-theme-fci .us-input--filled.us-input--secondary > .us-outline {
+  --us-outline-focus-border-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-input--filled.us-input--success > .us-outline {
+  --us-outline-focus-border-color: var(--us-success-color);
+}
+.us-theme-fci .us-input--filled.us-input--info > .us-outline {
+  --us-outline-focus-border-color: var(--us-info-color);
+}
+.us-theme-fci .us-input--filled.us-input--warning > .us-outline {
+  --us-outline-focus-border-color: var(--us-warning-color);
+}
+.us-theme-fci .us-input--filled.us-input--danger > .us-outline {
+  --us-outline-focus-border-color: var(--us-danger-color);
+}
 .us-theme-fci .us-input--filled.us-input--light > .us-overlay {
   --us-overlay-color: #fff;
   --us-overlay-opacity: 0.8;
@@ -866,20 +1087,37 @@ html {
   --us-outline-focus-border-color: #fff;
   --us-outline-focus-opacity: 1;
 }
-.us-theme-fci .us-input--outlined.us-input--inherit {
+.us-theme-fci .us-input--outlined {
   --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
 }
-.us-theme-fci .us-input--outlined.us-input--inherit > .us-overlay {
+.us-theme-fci .us-input--outlined > .us-overlay {
   --us-overlay-color: inherit;
   --us-overlay-opacity: 0;
 }
-.us-theme-fci .us-input--outlined.us-input--inherit > .us-outline {
+.us-theme-fci .us-input--outlined > .us-outline {
   --us-outline-border-color: currentColor;
   --us-outline-opacity: 0.12;
   --us-outline-hover-opacity: 0.24;
-  --us-outline-focus-border-color: var(--us-primary-color);
   --us-outline-focus-opacity: 1;
 }
+.us-theme-fci .us-input--outlined.us-input--primary > .us-outline {
+  --us-outline-focus-border-color: var(--us-primary-color);
+}
+.us-theme-fci .us-input--outlined.us-input--secondary > .us-outline {
+  --us-outline-focus-border-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-input--outlined.us-input--success > .us-outline {
+  --us-outline-focus-border-color: var(--us-success-color);
+}
+.us-theme-fci .us-input--outlined.us-input--info > .us-outline {
+  --us-outline-focus-border-color: var(--us-info-color);
+}
+.us-theme-fci .us-input--outlined.us-input--warning > .us-outline {
+  --us-outline-focus-border-color: var(--us-warning-color);
+}
+.us-theme-fci .us-input--outlined.us-input--danger > .us-outline {
+  --us-outline-focus-border-color: var(--us-danger-color);
+}
 .us-theme-fci .us-input--outlined.us-input--light {
   --us-input-color: #fff;
   --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -895,19 +1133,36 @@ html {
   --us-outline-focus-border-color: #fff;
   --us-outline-focus-opacity: 1;
 }
-.us-theme-fci .us-input--flat.us-input--inherit {
+.us-theme-fci .us-input--flat {
   --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
 }
-.us-theme-fci .us-input--flat.us-input--inherit > .us-overlay {
+.us-theme-fci .us-input--flat > .us-overlay {
   --us-overlay-color: inherit;
   --us-overlay-opacity: 0.08;
   --us-_hover-overlay-opacity: 0.12;
 }
-.us-theme-fci .us-input--flat.us-input--inherit > .us-outline {
+.us-theme-fci .us-input--flat > .us-outline {
   --us-outline-border-color: transparent;
-  --us-outline-focus-border-color: var(--us-primary-color);
   --us-outline-focus-opacity: 1;
 }
+.us-theme-fci .us-input--flat.us-input--primary > .us-outline {
+  --us-outline-focus-border-color: var(--us-primary-color);
+}
+.us-theme-fci .us-input--flat.us-input--secondary > .us-outline {
+  --us-outline-focus-border-color: var(--us-secondary-color);
+}
+.us-theme-fci .us-input--flat.us-input--success > .us-outline {
+  --us-outline-focus-border-color: var(--us-success-color);
+}
+.us-theme-fci .us-input--flat.us-input--info > .us-outline {
+  --us-outline-focus-border-color: var(--us-info-color);
+}
+.us-theme-fci .us-input--flat.us-input--warning > .us-outline {
+  --us-outline-focus-border-color: var(--us-warning-color);
+}
+.us-theme-fci .us-input--flat.us-input--danger > .us-outline {
+  --us-outline-focus-border-color: var(--us-danger-color);
+}
 .us-theme-fci .us-input--flat.us-input--light {
   --us-input-color: #fff;
   --us-input-placeholder-color: rgba(255, 255, 255, 0.6);
@@ -922,14 +1177,14 @@ html {
   --us-outline-focus-border-color: #fff;
   --us-outline-focus-opacity: 1;
 }
-.us-theme-fci .us-input--text.us-input--inherit {
+.us-theme-fci .us-input--text {
   --us-input-placeholder-color: rgba(0, 0, 0, 0.6);
 }
-.us-theme-fci .us-input--text.us-input--inherit > .us-overlay {
+.us-theme-fci .us-input--text > .us-overlay {
   --us-overlay-color: inherit;
   --us-overlay-opacity: 0;
 }
-.us-theme-fci .us-input--text.us-input--inherit > .us-outline {
+.us-theme-fci .us-input--text > .us-outline {
   --us-outline-border-color: transparent;
 }
 .us-theme-fci .us-input--text.us-input--light {
@@ -944,6 +1199,9 @@ html {
   --us-outline-border-color: transparent;
 }
 
+.us-theme-fci .us-checkbox-group--xs {
+  --us-checkbox-group-gap: 0.2rem;
+}
 .us-theme-fci .us-checkbox-group--sm {
   --us-checkbox-group-gap: 0.375rem;
 }
@@ -953,42 +1211,67 @@ html {
 .us-theme-fci .us-checkbox-group--lg {
   --us-checkbox-group-gap: 0.75rem;
 }
+.us-theme-fci .us-checkbox-group--xl {
+  --us-checkbox-group-gap: 0.875rem;
+}
 .us-theme-fci .us-checkbox {
   --us-checkbox-control-border-width: 1px;
   --us-checkbox-control-border-style: solid;
   --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
-  --us-checkbox-control-border-radius: 6px;
   --us-checkbox-control-color: var(--us-white-color);
   --us-_checked-checkbox-control-border-color: var(--us-primary-color);
   --us-_focus-checkbox-control-box-shadow: 0px 4px 8px rgba(var(--us-primary-rgb) / 40%);
   --us-checkbox-tap-background: var(--us-primary-color);
 }
+.us-theme-fci .us-checkbox--xs {
+  --us-checkbox-gap: 0.375rem;
+  --us-checkbox-control-border-radius: 4px;
+  --us-checkbox-control-width: 14px;
+  --us-checkbox-control-height: 14px;
+  --us-checkbox-label-font-size: 0.75rem;
+}
+.us-theme-fci .us-checkbox--xs .us-icon {
+  --us-icon-font-size: 0.5rem;
+}
 .us-theme-fci .us-checkbox--sm {
   --us-checkbox-gap: 0.375rem;
+  --us-checkbox-control-border-radius: 4px;
   --us-checkbox-control-width: 16px;
   --us-checkbox-control-height: 16px;
   --us-checkbox-label-font-size: 0.75rem;
 }
 .us-theme-fci .us-checkbox--sm .us-icon {
-  --us-icon-font-size: 0.75rem;
+  --us-icon-font-size: 0.5rem;
 }
 .us-theme-fci .us-checkbox--md {
   --us-checkbox-gap: 0.5rem;
-  --us-checkbox-control-width: 20px;
-  --us-checkbox-control-height: 20px;
+  --us-checkbox-control-border-radius: 4px;
+  --us-checkbox-control-width: 18px;
+  --us-checkbox-control-height: 18px;
   --us-checkbox-label-font-size: 0.875rem;
 }
 .us-theme-fci .us-checkbox--md .us-icon {
-  --us-icon-font-size: 1rem;
+  --us-icon-font-size: 0.625rem;
 }
 .us-theme-fci .us-checkbox--lg {
   --us-checkbox-gap: 0.5rem;
-  --us-checkbox-control-width: 24px;
-  --us-checkbox-control-height: 24px;
-  --us-checkbox-label-font-size: 1rem;
+  --us-checkbox-control-border-radius: 6px;
+  --us-checkbox-control-width: 20px;
+  --us-checkbox-control-height: 20px;
+  --us-checkbox-label-font-size: 0.875rem;
 }
 .us-theme-fci .us-checkbox--lg .us-icon {
-  --us-icon-font-size: 1.125rem;
+  --us-icon-font-size: 0.75rem;
+}
+.us-theme-fci .us-checkbox--xl {
+  --us-checkbox-gap: 0.5rem;
+  --us-checkbox-control-border-radius: 6px;
+  --us-checkbox-control-width: 22px;
+  --us-checkbox-control-height: 22px;
+  --us-checkbox-label-font-size: 1rem;
+}
+.us-theme-fci .us-checkbox--xl .us-icon {
+  --us-icon-font-size: 0.875rem;
 }
 .us-theme-fci .us-checkbox--light {
   --us-checkbox-control-border-color: rgba(0, 0, 0, 0.2);
@@ -1007,6 +1290,9 @@ html {
   --us-checkbox-label-color: var(--us-white-color);
 }
 
+.us-theme-fci .us-radio-group--xs {
+  --us-radio-group-gap: 0.2rem;
+}
 .us-theme-fci .us-radio-group--sm {
   --us-radio-group-gap: 0.375rem;
 }
@@ -1016,6 +1302,9 @@ html {
 .us-theme-fci .us-radio-group--lg {
   --us-radio-group-gap: 0.75rem;
 }
+.us-theme-fci .us-radio-group--xl {
+  --us-radio-group-gap: 0.875rem;
+}
 .us-theme-fci .us-radio {
   --us-radio-control-border-width: 1px;
   --us-radio-control-border-style: solid;
@@ -1026,6 +1315,15 @@ html {
   --us-_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--us-primary-rgb) / 40%);
   --us-radio-tap-background: var(--us-primary-color);
 }
+.us-theme-fci .us-radio--xs {
+  --us-radio-gap: 0.375rem;
+  --us-radio-control-width: 14px;
+  --us-radio-control-height: 14px;
+  --us-radio-label-font-size: 0.75rem;
+}
+.us-theme-fci .us-radio--xs .us-icon {
+  --us-icon-font-size: 0.5rem;
+}
 .us-theme-fci .us-radio--sm {
   --us-radio-gap: 0.375rem;
   --us-radio-control-width: 16px;
@@ -1036,21 +1334,30 @@ html {
   --us-icon-font-size: 0.5rem;
 }
 .us-theme-fci .us-radio--md {
+  --us-radio-gap: 0.5rem;
+  --us-radio-control-width: 18px;
+  --us-radio-control-height: 18px;
+  --us-radio-label-font-size: 0.875rem;
+}
+.us-theme-fci .us-radio--md .us-icon {
+  --us-icon-font-size: 0.625rem;
+}
+.us-theme-fci .us-radio--lg {
   --us-radio-gap: 0.5rem;
   --us-radio-control-width: 20px;
   --us-radio-control-height: 20px;
   --us-radio-label-font-size: 0.875rem;
 }
-.us-theme-fci .us-radio--md .us-icon {
+.us-theme-fci .us-radio--lg .us-icon {
   --us-icon-font-size: 0.75rem;
 }
-.us-theme-fci .us-radio--lg {
+.us-theme-fci .us-radio--xl {
   --us-radio-gap: 0.5rem;
-  --us-radio-control-width: 24px;
-  --us-radio-control-height: 24px;
+  --us-radio-control-width: 22px;
+  --us-radio-control-height: 22px;
   --us-radio-label-font-size: 1rem;
 }
-.us-theme-fci .us-radio--lg .us-icon {
+.us-theme-fci .us-radio--xl .us-icon {
   --us-icon-font-size: 0.875rem;
 }
 .us-theme-fci .us-radio--light {
@@ -1069,6 +1376,36 @@ html {
   --us-_focus-radio-control-box-shadow: 0px 4px 8px rgba(255 255 255 / 40%);
   --us-radio-label-color: var(--us-white-color);
 }
+.us-theme-fci .us-radio--primary {
+  --us-_checked-radio-control-border-color: var(--us-primary-color);
+  --us-_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--us-primary-rgb) / 40%);
+  --us-radio-tap-background: var(--us-primary-color);
+}
+.us-theme-fci .us-radio--secondary {
+  --us-_checked-radio-control-border-color: var(--us-secondary-color);
+  --us-_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--us-secondary-rgb) / 40%);
+  --us-radio-tap-background: var(--us-secondary-color);
+}
+.us-theme-fci .us-radio--success {
+  --us-_checked-radio-control-border-color: var(--us-success-color);
+  --us-_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--us-success-rgb) / 40%);
+  --us-radio-tap-background: var(--us-success-color);
+}
+.us-theme-fci .us-radio--info {
+  --us-_checked-radio-control-border-color: var(--us-info-color);
+  --us-_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--us-info-rgb) / 40%);
+  --us-radio-tap-background: var(--us-info-color);
+}
+.us-theme-fci .us-radio--warning {
+  --us-_checked-radio-control-border-color: var(--us-warning-color);
+  --us-_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--us-warning-rgb) / 40%);
+  --us-radio-tap-background: var(--us-warning-color);
+}
+.us-theme-fci .us-radio--danger {
+  --us-_checked-radio-control-border-color: var(--us-danger-color);
+  --us-_focus-radio-control-box-shadow: 0px 4px 8px rgba(var(--us-danger-rgb) / 40%);
+  --us-radio-tap-background: var(--us-danger-color);
+}
 
 .us-theme-fci .us-switch {
   --us-switch-control-color: rgba(0, 0, 0, 0.2);
@@ -1080,9 +1417,20 @@ html {
   --us-switch-thumb-color: var(--us-white-color);
   --us-switch-control-border-radius: 9999px;
 }
+.us-theme-fci .us-switch--xs {
+  --us-switch-gap: 0.375rem;
+  --us-switch-control-width: 20px;
+  --us-switch-control-height: 14px;
+  --us-switch-thumb-width: 8px;
+  --us-switch-thumb-height: 8px;
+  --us-switch-label-font-size: 0.75rem;
+}
+.us-theme-fci .us-switch--xs .us-icon {
+  --us-icon-font-size: 0.75rem;
+}
 .us-theme-fci .us-switch--sm {
   --us-switch-gap: 0.375rem;
-  --us-switch-control-width: 26px;
+  --us-switch-control-width: 24px;
   --us-switch-control-height: 16px;
   --us-switch-thumb-width: 10px;
   --us-switch-thumb-height: 10px;
@@ -1092,6 +1440,17 @@ html {
   --us-icon-font-size: 0.75rem;
 }
 .us-theme-fci .us-switch--md {
+  --us-switch-gap: 0.5rem;
+  --us-switch-control-width: 28px;
+  --us-switch-control-height: 18px;
+  --us-switch-thumb-width: 12px;
+  --us-switch-thumb-height: 12px;
+  --us-switch-label-font-size: 0.875rem;
+}
+.us-theme-fci .us-switch--md .us-icon {
+  --us-icon-font-size: 1rem;
+}
+.us-theme-fci .us-switch--lg {
   --us-switch-gap: 0.5rem;
   --us-switch-control-width: 32px;
   --us-switch-control-height: 20px;
@@ -1099,18 +1458,18 @@ html {
   --us-switch-thumb-height: 14px;
   --us-switch-label-font-size: 0.875rem;
 }
-.us-theme-fci .us-switch--md .us-icon {
-  --us-icon-font-size: 1rem;
+.us-theme-fci .us-switch--lg .us-icon {
+  --us-icon-font-size: 1.125rem;
 }
-.us-theme-fci .us-switch--lg {
+.us-theme-fci .us-switch--xl {
   --us-switch-gap: 0.5rem;
-  --us-switch-control-width: 40px;
-  --us-switch-control-height: 24px;
-  --us-switch-thumb-width: 18px;
-  --us-switch-thumb-height: 18px;
+  --us-switch-control-width: 36px;
+  --us-switch-control-height: 22px;
+  --us-switch-thumb-width: 14px;
+  --us-switch-thumb-height: 14px;
   --us-switch-label-font-size: 1rem;
 }
-.us-theme-fci .us-switch--lg .us-icon {
+.us-theme-fci .us-switch--xl .us-icon {
   --us-icon-font-size: 1.125rem;
 }
 .us-theme-fci .us-switch--light {
@@ -1263,7 +1622,7 @@ html {
 .us-theme-fci .us-tabs--underlined .us-tab {
   --us-tab-indicator-color: var(--us-primary-action-color);
   --us-tab-indicator-height: 3px;
-  --us-tab-indicator-border-radius: 3px 3px 0px 0px;
+  --us-tab-indicator-border-radius: 3px;
   --us-tab-border-radius: 0px;
 }
 .us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
@@ -1275,6 +1634,79 @@ html {
 .us-theme-fci .us-tabs--underlined .us-tab--selected {
   --us-tab-color: var(--us-primary-action-color);
 }
+.us-theme-fci .us-tabs--underlined .us-tab {
+  --us-tab-indicator-color: var(--us-primary-action-color);
+  --us-tab-indicator-height: 3px;
+  --us-tab-indicator-border-radius: 3px;
+  --us-tab-border-radius: 0px;
+}
+.us-theme-fci .us-tabs--underlined .us-tab > .us-surface {
+  --us-surface-opacity: 0;
+}
+.us-theme-fci .us-tabs--underlined .us-tab > .us-overlay {
+  --us-overlay-opacity: 0;
+  --us-overlay-color: inherit;
+  --us-_hover-overlay-opacity: 0.08;
+  --us-_active-overlay-opacity: 0.12;
+}
+.us-theme-fci .us-tabs--underlined .us-tab--selected .us-theme-fci .us-tabs--underlined .us-tab__indicator {
+  --us-tab-color: var(--us-primary-action-color);
+}
+.us-theme-fci .us-tabs--underlined .us-tab__indicator > .us-surface {
+  --us-surface-opacity: 0;
+  --us-surface-transition: none;
+}
+.us-theme-fci .us-tabs--underlined .us-tab__indicator > .us-overlay {
+  --us-overlay-opacity: 0;
+  --us-overlay-transition: none;
+}
+.us-theme-fci .us-tabs--underlined .us-tab--selected .us-tab__indicator > .us-surface {
+  --us-surface-opacity: 1;
+}
+.us-theme-fci .us-tabs--underlined .us-tab--selected .us-tab__indicator > .us-overlay {
+  --us-overlay-opacity: 0;
+}
+.us-theme-fci .us-tabs--pills {
+  --us-tab-indicator-color: var(--us-primary-action-color);
+  --us-tab-indicator-height: 3px;
+  --us-tab-indicator-border-radius: 3px 3px 0px 0px;
+}
+.us-theme-fci .us-tabs--pills .us-tab {
+  --us-tab-indicator-height: 100%;
+  --us-tab-indicator-border-radius: 9999px;
+  --us-tab-border-radius: 9999px;
+}
+.us-theme-fci .us-tabs--pills .us-tab > .us-surface {
+  --us-surface-opacity: 0;
+}
+.us-theme-fci .us-tabs--pills .us-tab > .us-overlay {
+  --us-overlay-opacity: 0;
+  --us-overlay-color: inherit;
+  --us-_hover-overlay-opacity: 0.08;
+  --us-_active-overlay-opacity: 0.12;
+}
+.us-theme-fci .us-tabs--pills .us-tab--selected {
+  --us-tab-color: var(--us-primary-action-color);
+}
+.us-theme-fci .us-tabs--pills .us-tab__indicator > .us-surface {
+  --us-surface-opacity: 0;
+  --us-surface-transition: none;
+}
+.us-theme-fci .us-tabs--pills .us-tab__indicator > .us-overlay {
+  --us-overlay-opacity: 0;
+  --us-overlay-color: inherit;
+  --us-_hover-overlay-opacity: 0.08;
+  --us-_active-overlay-opacity: 0.12;
+}
+.us-theme-fci .us-tabs--pills .us-tab--selected .us-tab__indicator > .us-surface {
+  --us-surface-opacity: 0.12;
+}
+.us-theme-fci .us-tabs--pills .us-tab--selected .us-tab__indicator > .us-overlay {
+  --us-overlay-opacity: 0;
+  --us-overlay-color: inherit;
+  --us-_hover-overlay-opacity: 0.08;
+  --us-_active-overlay-opacity: 0.12;
+}
 .us-theme-fci .us-tab {
   --us-tab-color: var(--us-secondary-action-color);
   --us-tab-padding-y: 0px;
@@ -1285,12 +1717,23 @@ html {
 }
 
 .us-theme-fci .us-card {
-  --us-card-border-width: 0px;
+  --us-card-border-width: 1px;
   --us-card-border-style: solid;
   --us-card-border-color: var(--us-border-color);
-  --us-card-border-radius: 10px;
+  --us-card-border-radius: 8px;
   --us-card-box-shadow: rgb(255, 255, 255) 0px 0px 0px 0px, rgba(51, 65, 85, 0.1) 0px 0px 0px 1px,
   	rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
+  --us-card-title-font-weight: 700;
+  --us-card-subtitle-font-weight: 400;
+  --us-card-header-title-font-weight: 500;
+  --us-card-header-title-color: var(--us-title-color);
+  --us-card-header-subtitle-font-weight: 400;
+  --us-card-header-subtitle-color: var(--us-subtitle-color);
+  --us-card-body-color: var(--us-body-color);
+}
+.us-theme-fci .us-card > .us-surface {
+  --us-surface-color: var(--us-white-color);
+  --us-surface-opacity: 1;
 }
 .us-theme-fci .us-card > .us-overlay {
   --us-overlay-color: inherit;
@@ -1308,118 +1751,184 @@ html {
   --us-_hover-overlay-opacity: 0.12;
   --us-_active-overlay-opacity: 0.16;
 }
-.us-theme-fci .us-card-header {
-  --us-card-header-border-color: var(--us-card-border-color);
+.us-theme-fci .us-card--xs {
+  --us-card-header-padding-y: 0.375rem;
+  --us-card-header-padding-x: 0.75rem;
+  --us-card-header-min-height: 1.75rem;
+  --us-card-header-gap: 0.5rem;
+  --us-card-header-content-gap: 0.25rem;
+  --us-card-header-title-font-size: 11px;
   --us-card-header-title-font-weight: 500;
-  --us-card-header-title-color: var(--us-title-color);
-  --us-card-header-subtitle-font-weight: 400;
-  --us-card-header-subtitle-color: var(--us-subtitle-color);
-}
-.us-theme-fci .us-card-body {
-  --us-card-body-color: var(--us-body-color);
-}
-.us-theme-fci .us-card-footer {
-  --us-card-footer-min-height: 48px;
-  --us-card-footer-padding-y: 0.5rem;
-  --us-card-footer-padding-x: 1rem;
-  --us-card-footer-border-color: rgba(9, 30, 66, 0.14);
-}
-.us-theme-fci .us-card--xs .us-card-header {
-  --us-card-header-min-height: 36px;
-  --us-card-header-padding-y: 0.685rem;
-  --us-card-header-padding-x: 1rem;
-  --us-card-header-padding-level: 1.25rem;
-  --us-card-header-font-size: 12px;
-  --us-card-header-gap: 1rem;
-  --us-card-header-title-font-size: 12px;
-  --us-card-header-title-line-height: 18px;
-  --us-card-header-subtitle-font-size: 11px;
+  --us-card-header-title-line-height: 14px;
+  --us-card-header-subtitle-font-size: 10px;
+  --us-card-header-subtitle-font-weight: 500;
   --us-card-header-subtitle-line-height: 14px;
-}
-.us-theme-fci .us-card--xs .us-card-body {
-  --us-card-body-padding-y: 1rem;
-  --us-card-body-padding-x: 1rem;
+  --us-card-body-padding-y: 0.375rem;
+  --us-card-body-padding-x: 0.75rem;
   --us-card-body-font-size: 0.75rem;
   --us-card-body-line-height: 18px;
-  --us-card-body-color: var(--us-body-color);
-}
-.us-theme-fci .us-card--sm .us-card-header {
-  --us-card-header-min-height: 48px;
-  --us-card-header-padding-y: 0.625rem;
+  --us-card-footer-padding-y: 0.375rem;
+  --us-card-footer-padding-x: 0.75rem;
+  --us-card-footer-min-height: 1.75rem;
+  --us-card-footer-gap: 0.5rem;
+}
+.us-theme-fci .us-card--xs .us-card-header .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 16px;
+}
+.us-theme-fci .us-card--sm {
+  --us-card-title-padding-y: 0.875rem 0.375rem;
+  --us-card-title-font-size: 1.25rem;
+  --us-card-header-padding-y: 0.375rem;
   --us-card-header-padding-x: 1rem;
-  --us-card-header-padding-level: 1.25rem;
-  --us-card-header-gap: 1rem;
-  --us-card-header-title-font-size: 0.875rem;
-  --us-card-header-title-line-height: 20px;
-  --us-card-header-subtitle-font-size: 0.75rem;
+  --us-card-header-min-height: 2rem;
+  --us-card-header-gap: 0.75rem;
+  --us-card-header-content-gap: 0.5rem;
+  --us-card-header-title-font-size: 12px;
+  --us-card-header-title-font-weight: 500;
+  --us-card-header-title-line-height: 16px;
+  --us-card-header-subtitle-font-size: 11px;
+  --us-card-header-subtitle-font-weight: 500;
   --us-card-header-subtitle-line-height: 16px;
-}
-.us-theme-fci .us-card--sm .us-card-body {
-  --us-card-body-padding-y: 1.25rem;
+  --us-card-body-padding-y: 0.375rem;
   --us-card-body-padding-x: 1rem;
   --us-card-body-font-size: 0.875rem;
   --us-card-body-line-height: 20px;
-  --us-card-body-color: var(--us-body-color);
+  --us-card-footer-padding-y: 0.375rem;
+  --us-card-footer-padding-x: 1rem;
+  --us-card-footer-min-height: 2rem;
+  --us-card-footer-gap: 0.75rem;
 }
-.us-theme-fci .us-card--md .us-card-header {
-  --us-card-header-min-height: 56px;
-  --us-card-header-padding-y: 0.625rem;
+.us-theme-fci .us-card--sm .us-card-header .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 20px;
+}
+.us-theme-fci .us-card--md {
+  --us-card-title-padding-y: 1rem 0.5rem;
+  --us-card-title-font-size: 1.25rem;
+  --us-card-header-min-height: 2rem;
+  --us-card-header-padding-y: 0.5rem;
   --us-card-header-padding-x: 1rem;
-  --us-card-header-padding-level: 1.25rem;
-  --us-card-header-font-size: 0.75rem;
-  --us-card-header-gap: 1rem;
-  --us-card-header-title-font-size: 1rem;
-  --us-card-header-title-line-height: 24px;
-  --us-card-header-subtitle-font-size: 0.8125rem;
-  --us-card-header-subtitle-line-height: 18px;
+  --us-card-header-gap: 0.75rem;
+  --us-card-header-content-gap: 0.5rem;
+  --us-card-header-title-font-size: 13px;
+  --us-card-header-title-line-height: 16px;
+  --us-card-header-subtitle-font-size: 12px;
+  --us-card-header-subtitle-line-height: 16px;
+  --us-card-body-padding-y: 0.5rem;
+  --us-card-body-padding-x: 1rem;
+  --us-card-body-font-size: 0.875rem;
+  --us-card-body-line-height: 24px;
+  --us-card-footer-padding-y: 0.5rem;
+  --us-card-footer-padding-x: 1rem;
+  --us-card-footer-min-height: 2rem;
+  --us-card-footer-gap: 1rem;
 }
 .us-theme-fci .us-card--md .us-card-header .us-icon:not(.us-button .us-icon) {
   --us-icon-font-size-default: 24px;
 }
-.us-theme-fci .us-card--md .us-card-body {
-  --us-card-body-padding-y: 1.5rem;
-  --us-card-body-padding-x: 1rem;
-  --us-card-body-font-size: 1rem;
-  --us-card-body-line-height: 24px;
-  --us-card-body-color: var(--us-body-color);
-}
-.us-theme-fci .us-card--lg .us-card-header {
-  --us-card-header-min-height: 64px;
+.us-theme-fci .us-card--lg {
+  --us-card-title-padding-y: 1.25rem 0.75rem;
+  --us-card-title-font-size: 1.5rem;
   --us-card-header-padding-y: 0.625rem;
-  --us-card-header-padding-x: 1rem;
-  --us-card-header-padding-level: 1.25rem;
-  --us-card-header-font-size: 0.75rem;
+  --us-card-header-padding-x: 1.25rem;
+  --us-card-header-min-height: 2.25rem;
   --us-card-header-gap: 1rem;
-  --us-card-header-title-font-size: 0.875rem;
-  --us-card-header-title-line-height: 24px;
-  --us-card-header-subtitle-font-size: 1rem;
+  --us-card-header-content-gap: 0.75rem;
+  --us-card-header-title-font-size: 14px;
+  --us-card-header-title-line-height: 18px;
+  --us-card-header-subtitle-font-size: 13px;
   --us-card-header-subtitle-line-height: 18px;
-}
-.us-theme-fci .us-card--lg .us-card-body {
-  --us-card-body-padding-y: 1.5rem;
-  --us-card-body-padding-x: 1rem;
+  --us-card-body-padding-y: 0.625rem;
+  --us-card-body-padding-x: 1.25rem;
   --us-card-body-font-size: 1rem;
   --us-card-body-line-height: 24px;
-  --us-card-body-color: var(--us-body-color);
-}
-.us-theme-fci .us-card--xl .us-card-header {
-  --us-card-header-min-height: 72px;
-  --us-card-header-padding-y: 0.625rem;
-  --us-card-header-padding-x: 1rem;
-  --us-card-header-padding-level: 1.25rem;
-  --us-card-header-font-size: 0.75rem;
+  --us-card-footer-padding-y: 0.625rem;
+  --us-card-footer-padding-x: 1.25rem;
+  --us-card-footer-min-height: 2.25rem;
+  --us-card-footer-gap: 1rem;
+}
+.us-theme-fci .us-card--lg .us-card-header .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 28px;
+}
+.us-theme-fci .us-card--xl {
+  --us-card-header-padding-y: 0.75rem;
+  --us-card-header-padding-x: 1.5rem;
+  --us-card-header-min-height: 2.5rem;
+  --us-card-header-gap: 1rem;
+  --us-card-header-content-gap: 0.875rem;
+  --us-card-header-title-font-size: 16px;
+  --us-card-header-title-line-height: 20px;
+  --us-card-header-subtitle-font-size: 15px;
+  --us-card-header-subtitle-line-height: 20px;
+  --us-card-body-padding-y: 0.75rem;
+  --us-card-body-padding-x: 1.5rem;
+  --us-card-body-font-size: 1.125rem;
+  --us-card-body-line-height: 28px;
+  --us-card-footer-padding-y: 0.75rem;
+  --us-card-footer-padding-x: 1.5rem;
+  --us-card-footer-min-height: 2.5rem;
+  --us-card-footer-gap: 1rem;
+}
+.us-theme-fci .us-card--xl .us-card-header .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 36px;
+}
+.us-theme-fci .us-card--2xl {
+  --us-card-header-padding-y: 0.75rem;
+  --us-card-header-padding-x: 1.5rem;
+  --us-card-header-min-height: 3rem;
   --us-card-header-gap: 1rem;
-  --us-card-header-title-font-size: 1rem;
+  --us-card-header-content-gap: 1rem;
+  --us-card-header-title-font-size: 18px;
   --us-card-header-title-line-height: 24px;
-  --us-card-header-subtitle-font-size: 0.8125rem;
-  --us-card-header-subtitle-line-height: 18px;
+  --us-card-header-subtitle-font-size: 16px;
+  --us-card-header-subtitle-line-height: 24px;
+  --us-card-body-padding-y: 0.75rem;
+  --us-card-body-padding-x: 1.5rem;
+  --us-card-body-font-size: 1.25rem;
+  --us-card-body-line-height: 36px;
+  --us-card-footer-padding-y: 0.75rem;
+  --us-card-footer-padding-x: 1.5rem;
+  --us-card-footer-min-height: 2.5rem;
+  --us-card-footer-gap: 1rem;
+}
+.us-theme-fci .us-card--2xl .us-card-header .us-icon:not(.us-button .us-icon) {
+  --us-icon-font-size-default: 40px;
 }
-.us-theme-fci .us-card--xl .us-card-body {
-  --us-card-body-padding-y: 1.5rem;
-  --us-card-body-padding-x: 1rem;
-  --us-card-body-font-size: 1rem;
-  --us-card-body-line-height: 24px;
-  --us-card-body-color: var(--us-body-color);
+
+.us-theme-fci .us-description > .us-surface {
+  --us-surface-opacity: 0;
+}
+.us-theme-fci .us-description > .us-overlay {
+  --us-overlay-opacity: 0;
+  --us-_hover-overlay-opacity: 0.08;
+  --us-_active-overlay-opacity: 0.12;
+}
+.us-theme-fci .us-descriptions {
+  --us-description-label-color: var(--us-secondary-action-color);
+  --us-description-text-color: var(--us-primary-color);
+}
+.us-theme-fci .us-descriptions--sm {
+  --us-description-padding-y: 0.5rem;
+  --us-description-padding-x: 0.75rem;
+  --us-description-gap-y: 0.5rem;
+  --us-description-gap-x: 0.75rem;
+  --us-description-label-font-size: 12px;
+  --us-description-text-font-size: 12px;
+}
+.us-theme-fci .us-descriptions--md {
+  --us-description-padding-y: 0.5rem;
+  --us-description-padding-x: 1rem;
+  --us-description-gap-y: 0.5rem;
+  --us-description-gap-x: 1rem;
+  --us-description-label-font-size: 13px;
+  --us-description-text-font-size: 13px;
+}
+.us-theme-fci .us-descriptions--lg {
+  --us-description-padding-y: 0.75rem;
+  --us-description-padding-x: 1.25rem;
+  --us-description-gap-y: 0.75rem;
+  --us-description-gap-x: 1.25rem;
+  --us-description-label-font-size: 14px;
+  --us-description-text-font-size: 14px;
 }
 
 .us-theme-fci .us-result--sm {
@@ -1561,11 +2070,14 @@ html {
 .us-theme-fci {
   --us-primary-rgb: 153 0 0;
   --us-primary-color: hsl(0, 100%, 30%);
-  --us-secondary-color: hsl(217, 33%, 17%);
-  --us-success-color: hsl(150, 100%, 30%);
-  --us-info-color: rgb(120, 40, 200);
-  --us-warning-color: rgb(245, 165, 36);
-  --us-danger-color: rgb(243, 18, 18);
+  --us-secondary-color: #0f172a;
+  --us-success-color: #16a34a;
+  --us-success-dark-color: #15803d;
+  --us-info-color: #7c3aed;
+  --us-info-dark-color: #5b21b6;
+  --us-warning-color: #f89406;
+  --us-warning-dark-color: #ae6704;
+  --us-danger-color: #dc2626;
   --us-black-color: #000;
   --us-white-color: #fff;
   --us-border-color: rgba(0, 0, 0, 0.12);
@@ -1578,6 +2090,15 @@ html {
   	Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --us-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
   	Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --us-fs-xs: 0.75rem;
+  --us-fs-sm: 0.875rem;
+  --us-fs-md: 1rem;
+  --us-fs-lg: 1.125rem;
+  --us-fs-xl: 1.25rem;
+  --us-fs-2xl: 1.5rem;
+  --us-fs-3xl: 1.75rem;
+  --us-fs-4xl: 2rem;
+  --us-fs-5xl: 2.5rem;
   --us-shadow-none: none;
   --us-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --us-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);