@italia/input 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/src/it-input.js

@@ -1081,7 +1081,7 @@ if (typeof window !== 'undefined') {
     window._itAnalytics = window._itAnalytics || {};
     window._itAnalytics = {
         ...window._itAnalytics,
-        version: '1.0.0-alpha.4',
+        version: '1.0.0-alpha.6',
     };
 }
 
@@ -1279,7 +1279,7 @@ var styles = css`@charset "UTF-8";
 .form-check [type=checkbox]:focus + label,
 .form-check [type=radio]:focus + label {
   border-color: hsl(0, 0%, 0%) !important;
-  box-shadow: 0 0 0 2px var(--bs-color-border-inverse), 0 0 0 5px var(--bs-color-outline-focus) !important;
+  box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
   outline: 3px solid transparent !important;
   outline-offset: 3px !important;
 }
@@ -1319,7 +1319,7 @@ hr {
 
 p {
   margin-top: 0;
-  margin-bottom: var(--bs-paragraph-spacing);
+  margin-bottom: var(--bsi-paragraph-spacing);
 }
 
 abbr[title] {
@@ -1329,21 +1329,21 @@ abbr[title] {
 }
 
 address {
-  margin-bottom: var(--bs-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
   font-style: normal;
   line-height: inherit;
 }
 
 ol,
 ul {
-  padding-left: var(--bs-spacing-l);
+  padding-left: var(--bsi-spacing-l);
 }
 
 ol,
 ul,
 dl {
   margin-top: 0;
-  margin-bottom: var(--bs-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 
 ol ol,
@@ -1354,22 +1354,22 @@ ul ol {
 }
 
 dt {
-  font-weight: var(--bs-font-weight-strong);
+  font-weight: var(--bsi-font-weight-strong);
 }
 
 dd {
-  margin-bottom: var(--bs-spacing-xxs);
+  margin-bottom: var(--bsi-spacing-xxs);
   margin-left: 0;
 }
 
 blockquote {
-  margin: 0 0 var(--bs-spacing-s);
+  margin: 0 0 var(--bsi-spacing-s);
 }
 
 sub,
 sup {
   position: relative;
-  font-size: var(--bs-font-size-1);
+  font-size: var(--bsi-font-size-1);
   line-height: 0;
   vertical-align: baseline;
 }
@@ -1383,13 +1383,14 @@ sup {
 }
 
 a {
-  color: var(--bs-color-link);
+  color: var(--bsi-color-link);
   text-decoration: underline;
   text-decoration-skip-ink: auto;
   text-underline-offset: 2px;
 }
 a:hover {
-  color: var(--bs-color-link-hover);
+  color: var(--bsi-color-link-hover);
+  cursor: pointer;
 }
 
 pre,
@@ -1402,7 +1403,7 @@ samp {
 pre {
   display: block;
   margin-top: 0;
-  margin-bottom: var(--bs-paragraph-spacing);
+  margin-bottom: var(--bsi-paragraph-spacing);
   overflow: auto;
 }
 pre code {
@@ -1597,81 +1598,82 @@ progress {
 }
 
 .btn {
-  --bs-btn-padding-x: var(--bs-spacing-s);
-  --bs-btn-padding-y: var(--bs-spacing-xs);
-  --bs-btn-font-family: var(--bs-font-sans);
-  --bs-btn-font-weight: var(--bs-font-weight-solid);
-  --bs-btn-font-size: var(--bs-label-font-size);
-  --bs-btn-line-height: var(--bs-font-line-height-3);
-  --bs-btn-text-color: var(--bs-color-text-primary);
-  --bs-btn-background: transparent;
-  --bs-btn-border-size: 0;
-  --bs-btn-border-color: transparent;
-  --bs-btn-border-radius: var(--bs-radius-smooth);
-  --bs-btn-outline-border-size: 2px;
-  --bs-btn-outline-border-color: transparent;
-  --bs-btn-disabled-opacity: 0.5;
-}
-
+  --bsi-btn-background: transparent;
+  --bsi-btn-border-color: transparent;
+  --bsi-btn-border-radius: var(--bsi-radius-smooth);
+  --bsi-btn-border-size: 0;
+  --bsi-btn-disabled-opacity: 0.5;
+  --bsi-btn-font-family: var(--bsi-font-sans);
+  --bsi-btn-font-size: var(--bsi-label-font-size);
+  --bsi-btn-font-weight: var(--bsi-font-weight-solid);
+  --bsi-btn-line-height: var(--bsi-font-leading-3);
+  --bsi-btn-outline-border-color: transparent;
+  --bsi-btn-outline-border-size: 2px;
+  --bsi-btn-padding-x: var(--bsi-spacing-s);
+  --bsi-btn-padding-y: var(--bsi-spacing-xs);
+  --bsi-btn-text-color: var(--bsi-color-text-primary);
+}
+
+/* stylelint-disable-next-line no-duplicate-selectors */
 .btn {
   display: inline-block;
-  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
-  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
-  border-radius: var(--bs-btn-border-radius);
-  background: var(--bs-btn-background);
-  box-shadow: var(--bs-btn-box-shadow, none);
-  color: var(--bs-btn-text-color);
-  font-family: var(--bs-btn-font-family);
-  font-size: var(--bs-btn-font-size);
-  font-weight: var(--bs-btn-font-weight);
-  line-height: var(--bs-btn-line-height);
+  padding: var(--bsi-btn-padding-y) var(--bsi-btn-padding-x);
+  border: var(--bsi-btn-border-width) solid var(--bsi-btn-border-color);
+  border-radius: var(--bsi-btn-border-radius);
+  background: var(--bsi-btn-background);
+  box-shadow: var(--bsi-btn-box-shadow, none);
+  color: var(--bsi-btn-text-color);
+  font-family: var(--bsi-btn-font-family);
+  font-size: var(--bsi-btn-font-size);
+  font-weight: var(--bsi-btn-font-weight);
+  line-height: var(--bsi-btn-line-height);
   text-align: center;
   text-decoration: none;
   vertical-align: middle;
   white-space: initial;
   width: auto;
-  transition: all var(--bs-transition-instant) ease-in-out;
+  transition: all var(--bsi-transition-instant) ease-in-out;
   user-select: none;
 }
 .btn:hover {
-  color: var(--bs-btn-text-color);
+  color: var(--bsi-btn-text-color);
 }
 .btn:disabled, .btn.disabled {
-  opacity: var(--bs-btn-disabled-opacity);
+  opacity: var(--bsi-btn-disabled-opacity);
   cursor: not-allowed;
   pointer-events: none;
 }
 .btn:focus-visible {
-  border-color: var(--bs-btn-hover-border-color);
+  border-color: var(--bsi-btn-hover-border-color);
   outline: 0;
 }
 .btn-check:focus-visible + .btn {
-  border-color: var(--bs-btn-hover-border-color);
+  border-color: var(--bsi-btn-hover-border-color);
   outline: 0;
 }
 
 .btn-link {
-  --bs-btn-background: transparent;
-  --bs-btn-border-color: transparent;
+  --bsi-btn-background: transparent;
+  --bsi-btn-border-color: transparent;
   text-decoration: underline;
 }
 .btn-link:hover {
-  color: var(--bs-color-link-hover);
+  color: var(--bsi-color-link-hover);
 }
 
 .btn-xs {
-  --bs-btn-padding-x: var(--bs-spacing-xs);
-  --bs-btn-padding-y: var(--bs-spacing-xs);
-  --bs-btn-font-size: var(--bs-label-font-size-s);
-  --bs-btn-line-height: var(--bs-font-line-height-1);
-  --bs-rounded-icon-size: 20px;
+  --bsi-btn-padding-x: var(--bsi-spacing-xs);
+  --bsi-btn-padding-y: var(--bsi-spacing-xs);
+  --bsi-btn-font-size: var(--bsi-label-font-size-s);
+  --bsi-btn-line-height: var(--bsi-font-leading-1);
+  --bsi-rounded-icon-size: 20px;
 }
 
 .btn-lg {
-  --bs-btn-padding-x: var(--bs-spacing-m);
-  --bs-btn-padding-y: var(--bs-spacing-s);
-  --bs-btn-font-size: var(--bs-label-font-size-m);
-  --bs-btn-line-height: var(--bs-font-line-height-5);
+  --bsi-btn-padding-x: var(--bsi-spacing-m);
+  --bsi-btn-padding-y: var(--bsi-spacing-s);
+  --bsi-btn-font-size: var(--bsi-label-font-size-l);
+  --bsi-btn-line-height: var(--bsi-font-leading-5);
 }
 
 .btn-progress {
@@ -1683,7 +1685,7 @@ progress {
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  gap: var(--bs-icon-spacing);
+  gap: var(--bsi-icon-spacing);
 }
 
 .btn-full {
@@ -1710,16 +1712,16 @@ progress {
 
 .btn-primary,
 a.btn-primary {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-primary);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-primary);
 }
 .btn-primary:hover,
 a.btn-primary:hover {
-  --bs-btn-background: var(--bs-color-background-primary-hover);
+  --bsi-btn-background: var(--bsi-color-background-primary-hover);
 }
 .btn-primary:active,
 a.btn-primary:active {
-  --bs-btn-background: var(--bs-color-background-primary-active);
+  --bsi-btn-background: var(--bsi-color-background-primary-active);
 }
 .btn-primary.btn-progress,
 a.btn-primary.btn-progress {
@@ -1730,16 +1732,16 @@ a.btn-primary.btn-progress {
 
 .btn-secondary,
 a.btn-secondary {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-secondary);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-secondary);
 }
 .btn-secondary:hover,
 a.btn-secondary:hover {
-  --bs-btn-background: var(--bs-color-background-secondary-hover);
+  --bsi-btn-background: var(--bsi-color-background-secondary-hover);
 }
 .btn-secondary:active,
 a.btn-secondary:active {
-  --bs-btn-background: var(--bs-color-background-secondary-active);
+  --bsi-btn-background: var(--bsi-color-background-secondary-active);
 }
 .btn-secondary:disabled.btn-progress, .btn-secondary.disabled.btn-progress,
 a.btn-secondary:disabled.btn-progress,
@@ -1751,173 +1753,174 @@ a.btn-secondary.disabled.btn-progress {
 
 .btn-success,
 a.btn-success {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-success);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-success);
 }
 .btn-success:hover,
 a.btn-success:hover {
-  --bs-btn-background: var(--bs-color-background-success-hover);
+  --bsi-btn-background: var(--bsi-color-background-success-hover);
 }
 .btn-success:active,
 a.btn-success:active {
-  --bs-btn-background: var(--bs-color-background-success-active);
+  --bsi-btn-background: var(--bsi-color-background-success-active);
 }
 
 .btn-warning,
 a.btn-warning {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-warning);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-warning);
 }
 .btn-warning:hover,
 a.btn-warning:hover {
-  --bs-btn-background: var(--bs-color-background-warning-hover);
+  --bsi-btn-background: var(--bsi-color-background-warning-hover);
 }
 .btn-warning:active,
 a.btn-warning:active {
-  --bs-btn-background: var(--bs-color-background-warning-active);
+  --bsi-btn-background: var(--bsi-color-background-warning-active);
 }
 
 .btn-danger,
 a.btn-danger {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-danger);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-danger);
 }
 .btn-danger:hover,
 a.btn-danger:hover {
-  --bs-btn-background: var(--bs-color-background-danger-hover);
+  --bsi-btn-background: var(--bsi-color-background-danger-hover);
 }
 .btn-danger:active,
 a.btn-danger:active {
-  --bs-btn-background: var(--bs-color-background-danger-active);
+  --bsi-btn-background: var(--bsi-color-background-danger-active);
 }
 
 .btn[class*=btn-outline-] {
-  --bs-btn-box-shadow: inset 0 0 0 var(--bs-btn-outline-border-size) var(--bs-btn-outline-border-color);
+  --bsi-btn-box-shadow: inset 0 0 0 var(--bsi-btn-outline-border-size) var(--bsi-btn-outline-border-color);
 }
 
 .btn-outline-primary,
 a.btn-outline-primary {
-  --bs-btn-outline-border-color: var(--bs-color-border-primary);
-  --bs-btn-text-color: var(--bs-color-text-primary);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-primary);
+  --bsi-btn-text-color: var(--bsi-color-text-primary);
 }
 .btn-outline-primary:hover,
 a.btn-outline-primary:hover {
-  --bs-btn-outline-border-color: var(--bs-color-border-primary-hover);
-  --bs-btn-text-color: var(--bs-color-link-hover);
+  --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-primary-hover) 70%, black);
+  --bsi-btn-text-color: var(--bsi-color-link-hover);
 }
 .btn-outline-primary:active,
 a.btn-outline-primary:active {
-  --bs-btn-outline-border-color: var(--bs-color-border-primary-active);
-  --bs-btn-text-color: var(--bs-color-link-active);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-primary-active);
+  --bsi-btn-text-color: var(--bsi-color-link-active);
 }
 .btn-outline-secondary,
 a.btn-outline-secondary {
-  --bs-btn-outline-border-color: var(--bs-color-border-secondary);
-  --bs-btn-text-color: var(--bs-color-text-secondary);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-secondary);
+  --bsi-btn-text-color: var(--bsi-color-text-secondary);
 }
 .btn-outline-secondary:hover,
 a.btn-outline-secondary:hover {
-  --bs-btn-outline-border-color: var(--bs-color-border-secondary-hover);
-  --bs-btn-text-color: var(--bs-color-text-secondary-hover);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-secondary-hover);
+  --bsi-btn-text-color: var(--bsi-color-link-secondary-hover);
 }
 .btn-outline-secondary:active,
 a.btn-outline-secondary:active {
-  --bs-btn-outline-border-color: var(--bs-color-border-secondary-active);
-  --bs-btn-text-color: var(--bs-color-text-secondary-active);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-secondary-active);
+  --bsi-btn-text-color: var(--bsi-color-link-secondary-active);
 }
 .btn-outline-success,
 a.btn-outline-success {
-  --bs-btn-outline-border-color: var(--bs-color-border-success);
-  --bs-btn-text-color: var(--bs-color-text-success);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-success);
+  --bsi-btn-text-color: var(--bsi-color-text-success);
 }
 .btn-outline-success:hover,
 a.btn-outline-success:hover {
-  --bs-btn-outline-border-color: var(--bs-color-border-success-hover);
-  --bs-btn-text-color: var(--bs-color-text-success-hover);
+  /* aumenta contrasto scurendo il bordo rispetto al token base */
+  --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-success-hover) 70%, black);
+  --bsi-btn-text-color: var(--bsi-color-text-success-hover);
 }
 .btn-outline-success:active,
 a.btn-outline-success:active {
-  --bs-btn-outline-border-color: var(--bs-color-border-success-active);
-  --bs-btn-text-color: var(--bs-color-text-success-active);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-success-active);
+  --bsi-btn-text-color: var(--bsi-color-text-success-active);
 }
 .btn-outline-warning,
 a.btn-outline-warning {
-  --bs-btn-outline-border-color: var(--bs-color-border-warning);
-  --bs-btn-text-color: var(--bs-color-text-warning);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-warning);
+  --bsi-btn-text-color: var(--bsi-color-text-warning);
 }
 .btn-outline-warning:hover,
 a.btn-outline-warning:hover {
-  --bs-btn-outline-border-color: var(--bs-color-border-warning-hover);
-  --bs-btn-text-color: var(--bs-color-text-warning-hover);
+  --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-warning-hover) 70%, black);
+  --bsi-btn-text-color: var(--bsi-color-text-warning-hover);
 }
 .btn-outline-warning:active,
 a.btn-outline-warning:active {
-  --bs-btn-outline-border-color: var(--bs-color-border-warning-active);
-  --bs-btn-text-color: var(--bs-color-text-warning-active);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-warning-active);
+  --bsi-btn-text-color: var(--bsi-color-text-warning-active);
 }
 .btn-outline-danger,
 a.btn-outline-danger {
-  --bs-btn-outline-border-color: var(--bs-color-border-danger);
-  --bs-btn-text-color: var(--bs-color-text-danger);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-danger);
+  --bsi-btn-text-color: var(--bsi-color-text-danger);
 }
 .btn-outline-danger:hover,
 a.btn-outline-danger:hover {
-  --bs-btn-outline-border-color: var(--bs-color-border-danger-hover);
-  --bs-btn-text-color: var(--bs-color-text-danger-hover);
+  --bsi-btn-outline-border-color: color-mix(in srgb, var(--bsi-color-border-danger-hover) 70%, black);
+  --bsi-btn-text-color: var(--bsi-color-text-danger-hover);
 }
 .btn-outline-danger:active,
 a.btn-outline-danger:active {
-  --bs-btn-outline-border-color: var(--bs-color-border-danger-active);
-  --bs-btn-text-color: var(--bs-color-text-danger-active);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-danger-active);
+  --bsi-btn-text-color: var(--bsi-color-text-danger-active);
 }
 
 .bg-dark .btn-link {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
 }
 .bg-dark a.btn-primary,
 .bg-dark .btn-primary {
-  --bs-btn-text-color: var(--bs-color-text-primary);
-  --bs-btn-background: var(--bs-color-background-inverse);
+  --bsi-btn-text-color: var(--bsi-color-text-primary);
+  --bsi-btn-background: var(--bsi-color-background-inverse);
 }
 .bg-dark a.btn-primary:hover,
 .bg-dark .btn-primary:hover {
-  --bs-btn-background: color-mix(in srgb, var(--bs-color-background-inverse) 85%, black);
+  --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 85%, black);
 }
 .bg-dark a.btn-primary:active,
 .bg-dark .btn-primary:active {
-  --bs-btn-background: color-mix(in srgb, var(--bs-color-background-inverse) 80%, black);
+  --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-inverse) 80%, black);
 }
 .bg-dark a.btn-secondary,
 .bg-dark .btn-secondary {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
-  --bs-btn-background: var(--bs-color-background-secondary);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
+  --bsi-btn-background: var(--bsi-color-background-secondary);
 }
 .bg-dark a.btn-secondary:hover, .bg-dark a.btn-secondary:active,
 .bg-dark .btn-secondary:hover,
 .bg-dark .btn-secondary:active {
-  --bs-btn-background: color-mix(in srgb, var(--bs-color-background-secondary) 85%, black);
+  --bsi-btn-background: color-mix(in srgb, var(--bsi-color-background-secondary) 85%, black);
 }
 .bg-dark .btn-outline-primary,
 .bg-dark a.btn-outline-primary {
-  --bs-btn-outline-border-color: var(--bs-color-border-inverse);
-  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bsi-btn-outline-border-color: var(--bsi-color-border-inverse);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
 }
 .bg-dark .btn-outline-primary:hover,
 .bg-dark a.btn-outline-primary:hover {
-  --bs-btn-boxshadow-color-darken: color-mix(in srgb, var(--bs-color-border-inverse) 80%, black);
-  --bs-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bs-btn-boxshadow-color-darken) 80%, gray);
-  --bs-btn-outline-border-color: var(--bs-btn-boxshadow-color-desaturated);
+  --bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-border-inverse) 80%, black);
+  --bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
+  --bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
 }
 .bg-dark .btn-outline-secondary,
 .bg-dark a.btn-outline-secondary {
-  --bs-btn-text-color: var(--bs-color-text-inverse);
+  --bsi-btn-text-color: var(--bsi-color-text-inverse);
 }
 .bg-dark .btn-outline-secondary:hover, .bg-dark .btn-outline-secondary:active,
 .bg-dark a.btn-outline-secondary:hover,
 .bg-dark a.btn-outline-secondary:active {
-  --bs-btn-boxshadow-color-darken: color-mix(in srgb, var(--bs-color-background-secondary) 80%, black);
-  --bs-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bs-btn-boxshadow-color-darken) 80%, gray);
-  --bs-btn-outline-border-color: var(--bs-btn-boxshadow-color-desaturated);
+  --bsi-btn-boxshadow-color-darken: color-mix(in srgb, var(--bsi-color-background-secondary) 80%, black);
+  --bsi-btn-boxshadow-color-desaturated: color-mix(in srgb, var(--bsi-btn-boxshadow-color-darken) 80%, gray);
+  --bsi-btn-outline-border-color: var(--bsi-btn-boxshadow-color-desaturated);
 }
 
 .btn-close {
@@ -1927,25 +1930,24 @@ a.btn-outline-danger:active {
   height: 2.5rem;
   padding: 0;
   border: 0;
-  opacity: 0.5;
   background-color: transparent;
-  color: var(--bs-color-text-base);
 }
 .btn-close .icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
+  fill: var(--bsi-icon-secondary);
 }
-.btn-close:hover {
-  opacity: 1;
+.btn-close .icon:hover {
+  fill: var(--bsi-icon-default);
   text-decoration: none;
 }
 .btn-close:focus {
   opacity: 1;
 }
 .btn-close:disabled, .btn-close.disabled {
-  opacity: var(--bs-btn-disabled-opacity);
+  opacity: var(--bsi-btn-disabled-opacity);
   pointer-events: none;
   user-select: none;
 }
@@ -1955,21 +1957,21 @@ a.btn-outline-danger:active {
 }
 
 .row {
-  --bs-gutter-x: 24px;
-  --bs-gutter-y: 0;
+  --bsi-gutter-x: 24px;
+  --bsi-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
-  margin-top: calc(-1 * var(--bs-gutter-y));
-  margin-right: calc(-0.5 * var(--bs-gutter-x));
-  margin-left: calc(-0.5 * var(--bs-gutter-x));
+  margin-top: calc(-1 * var(--bsi-gutter-y));
+  margin-right: calc(-0.5 * var(--bsi-gutter-x));
+  margin-left: calc(-0.5 * var(--bsi-gutter-x));
 }
 .row > * {
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
-  padding-right: calc(var(--bs-gutter-x) * 0.5);
-  padding-left: calc(var(--bs-gutter-x) * 0.5);
-  margin-top: var(--bs-gutter-y);
+  padding-right: calc(var(--bsi-gutter-x) * 0.5);
+  padding-left: calc(var(--bsi-gutter-x) * 0.5);
+  margin-top: var(--bsi-gutter-y);
 }
 
 .col {
@@ -2122,62 +2124,62 @@ a.btn-outline-danger:active {
 
 .g-0,
 .gx-0 {
-  --bs-gutter-x: 0;
+  --bsi-gutter-x: 0;
 }
 
 .g-0,
 .gy-0 {
-  --bs-gutter-y: 0;
+  --bsi-gutter-y: 0;
 }
 
 .g-1,
 .gx-1 {
-  --bs-gutter-x: 0.25rem;
+  --bsi-gutter-x: 0.25rem;
 }
 
 .g-1,
 .gy-1 {
-  --bs-gutter-y: 0.25rem;
+  --bsi-gutter-y: 0.25rem;
 }
 
 .g-2,
 .gx-2 {
-  --bs-gutter-x: 0.5rem;
+  --bsi-gutter-x: 0.5rem;
 }
 
 .g-2,
 .gy-2 {
-  --bs-gutter-y: 0.5rem;
+  --bsi-gutter-y: 0.5rem;
 }
 
 .g-3,
 .gx-3 {
-  --bs-gutter-x: 1rem;
+  --bsi-gutter-x: 1rem;
 }
 
 .g-3,
 .gy-3 {
-  --bs-gutter-y: 1rem;
+  --bsi-gutter-y: 1rem;
 }
 
 .g-4,
 .gx-4 {
-  --bs-gutter-x: 1.5rem;
+  --bsi-gutter-x: 1.5rem;
 }
 
 .g-4,
 .gy-4 {
-  --bs-gutter-y: 1.5rem;
+  --bsi-gutter-y: 1.5rem;
 }
 
 .g-5,
 .gx-5 {
-  --bs-gutter-x: 3rem;
+  --bsi-gutter-x: 3rem;
 }
 
 .g-5,
 .gy-5 {
-  --bs-gutter-y: 3rem;
+  --bsi-gutter-y: 3rem;
 }
 
 @media (min-width: 576px) {
@@ -2302,51 +2304,51 @@ a.btn-outline-danger:active {
   }
   .g-sm-0,
   .gx-sm-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-sm-0,
   .gy-sm-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-sm-1,
   .gx-sm-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-sm-1,
   .gy-sm-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-sm-2,
   .gx-sm-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-sm-2,
   .gy-sm-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-sm-3,
   .gx-sm-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-sm-3,
   .gy-sm-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-sm-4,
   .gx-sm-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-sm-4,
   .gy-sm-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-sm-5,
   .gx-sm-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-sm-5,
   .gy-sm-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 @media (min-width: 768px) {
@@ -2471,51 +2473,51 @@ a.btn-outline-danger:active {
   }
   .g-md-0,
   .gx-md-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-md-0,
   .gy-md-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-md-1,
   .gx-md-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-md-1,
   .gy-md-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-md-2,
   .gx-md-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-md-2,
   .gy-md-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-md-3,
   .gx-md-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-md-3,
   .gy-md-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-md-4,
   .gx-md-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-md-4,
   .gy-md-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-md-5,
   .gx-md-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-md-5,
   .gy-md-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 @media (min-width: 992px) {
@@ -2640,51 +2642,51 @@ a.btn-outline-danger:active {
   }
   .g-lg-0,
   .gx-lg-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-lg-0,
   .gy-lg-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-lg-1,
   .gx-lg-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-lg-1,
   .gy-lg-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-lg-2,
   .gx-lg-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-lg-2,
   .gy-lg-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-lg-3,
   .gx-lg-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-lg-3,
   .gy-lg-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-lg-4,
   .gx-lg-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-lg-4,
   .gy-lg-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-lg-5,
   .gx-lg-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-lg-5,
   .gy-lg-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 @media (min-width: 1200px) {
@@ -2809,51 +2811,51 @@ a.btn-outline-danger:active {
   }
   .g-xl-0,
   .gx-xl-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-xl-0,
   .gy-xl-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-xl-1,
   .gx-xl-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-xl-1,
   .gy-xl-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-xl-2,
   .gx-xl-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-xl-2,
   .gy-xl-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-xl-3,
   .gx-xl-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-xl-3,
   .gy-xl-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-xl-4,
   .gx-xl-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-xl-4,
   .gy-xl-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-xl-5,
   .gx-xl-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-xl-5,
   .gy-xl-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 @media (min-width: 1400px) {
@@ -2978,64 +2980,66 @@ a.btn-outline-danger:active {
   }
   .g-xxl-0,
   .gx-xxl-0 {
-    --bs-gutter-x: 0;
+    --bsi-gutter-x: 0;
   }
   .g-xxl-0,
   .gy-xxl-0 {
-    --bs-gutter-y: 0;
+    --bsi-gutter-y: 0;
   }
   .g-xxl-1,
   .gx-xxl-1 {
-    --bs-gutter-x: 0.25rem;
+    --bsi-gutter-x: 0.25rem;
   }
   .g-xxl-1,
   .gy-xxl-1 {
-    --bs-gutter-y: 0.25rem;
+    --bsi-gutter-y: 0.25rem;
   }
   .g-xxl-2,
   .gx-xxl-2 {
-    --bs-gutter-x: 0.5rem;
+    --bsi-gutter-x: 0.5rem;
   }
   .g-xxl-2,
   .gy-xxl-2 {
-    --bs-gutter-y: 0.5rem;
+    --bsi-gutter-y: 0.5rem;
   }
   .g-xxl-3,
   .gx-xxl-3 {
-    --bs-gutter-x: 1rem;
+    --bsi-gutter-x: 1rem;
   }
   .g-xxl-3,
   .gy-xxl-3 {
-    --bs-gutter-y: 1rem;
+    --bsi-gutter-y: 1rem;
   }
   .g-xxl-4,
   .gx-xxl-4 {
-    --bs-gutter-x: 1.5rem;
+    --bsi-gutter-x: 1.5rem;
   }
   .g-xxl-4,
   .gy-xxl-4 {
-    --bs-gutter-y: 1.5rem;
+    --bsi-gutter-y: 1.5rem;
   }
   .g-xxl-5,
   .gx-xxl-5 {
-    --bs-gutter-x: 3rem;
+    --bsi-gutter-x: 3rem;
   }
   .g-xxl-5,
   .gy-xxl-5 {
-    --bs-gutter-y: 3rem;
+    --bsi-gutter-y: 3rem;
   }
 }
 .row.variable-gutters {
   margin-right: -12px;
   margin-left: -12px;
-  margin-right: -6px;
-  margin-left: -6px;
 }
 .row.variable-gutters > .col,
 .row.variable-gutters > [class*=col-] {
   padding-right: 12px;
   padding-left: 12px;
 }
+.row.variable-gutters {
+  margin-right: -6px;
+  margin-left: -6px;
+}
 .row.variable-gutters > .col,
 .row.variable-gutters > [class*=col-] {
   padding-right: 6px;
@@ -3098,9 +3102,9 @@ a.btn-outline-danger:active {
 }
 
 .row.row-column-border > [class^=col-] {
-  padding-top: var(--bs-spacing-l);
-  padding-bottom: var(--bs-spacing-l);
-  border-top: var(--bs-border-base) solid var(--bs-color-border-subtle);
+  padding-top: var(--bsi-spacing-l);
+  padding-bottom: var(--bsi-spacing-l);
+  border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
 }
 .row.row-column-border > [class^=col-]:first-child {
   border: none;
@@ -3112,23 +3116,23 @@ a.btn-outline-danger:active {
   padding-right: 0;
 }
 .row.row-column-menu-left > [class^=col-]:first-child {
-  padding: var(--bs-spacing-s) 0;
+  padding: var(--bsi-spacing-s) 0;
 }
 .row.row-column-menu-right > [class^=col-]:last-child {
-  padding: var(--bs-spacing-s) 0;
+  padding: var(--bsi-spacing-s) 0;
 }
 .row.row-card {
-  background-color: var(--bs-color-background-inverse);
+  background-color: var(--bsi-color-background-inverse);
 }
 @media (min-width: 992px) {
   .row.row-column-border {
     margin-top: 1rem;
-    border-top: var(--bs-border-base) solid var(--bs-color-border-subtle);
+    border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
   }
   .row.row-column-border > [class^=col-] {
     padding: 3rem 3rem;
     border-top: none;
-    border-left: var(--bs-border-base) solid var(--bs-color-border-subtle);
+    border-left: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
   }
   .row.row-column-border > [class^=col-]:first-child {
     border: none;
@@ -3174,40 +3178,40 @@ a.btn-outline-danger:active {
   }
 }
 .row.row-border h1 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h2 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h3 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h4 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h5 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 .row.row-border h6 {
-  border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  padding-bottom: var(--bs-spacing-s);
-  margin-bottom: var(--bs-spacing-s);
+  border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  padding-bottom: var(--bsi-spacing-s);
+  margin-bottom: var(--bsi-spacing-s);
 }
 @media (min-width: 576px) {
   .row.row-border {
-    border-bottom: var(--bs-border-base) solid var(--bs-color-border-subtle);
-    padding-bottom: var(--bs-spacing-s);
-    margin-bottom: var(--bs-spacing-s);
+    border-bottom: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+    padding-bottom: var(--bsi-spacing-s);
+    margin-bottom: var(--bsi-spacing-s);
   }
   .row.row-border h1 {
     border: none;
@@ -3254,9 +3258,9 @@ a.btn-outline-danger:active {
   width: auto;
 }
 .sticky-wrapper.is-sticky.navbar-wrapper .navbar {
-  padding-top: var(--bs-spacing-s);
-  padding-bottom: var(--bs-spacing-s);
-  border-top: var(--bs-border-base) solid var(--bs-color-border-subtle);
+  padding-top: var(--bsi-spacing-s);
+  padding-bottom: var(--bsi-spacing-s);
+  border-top: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
 }
 .sticky-wrapper.is-sticky.navbar-wrapper.sticky-expanded {
   z-index: auto;
@@ -3296,14 +3300,20 @@ a.btn-outline-danger:active {
   bottom: auto;
 }
 
-@keyframes progress-bar-stripes {
-  0% {
-    background-position-x: 16px;
-  }
+.progress {
+  --bsi-progress-bg: var(--bsi-color-background-secondary-lighter);
+  --bsi-progress-border-radius: var(--bsi-radius-smooth);
+  --bsi-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
+  --bsi-progress-label-color: var(--bsi-color-text-secondary);
+  --bsi-progress-label-font-size: var(--bsi-label-font-size-xs);
+  --bsi-progress-bar-transition: width 0.5s ease;
+  --bsi-progress-bar-bg: var(--bsi-color-background-secondary);
+  --bsi-progress-height: 4px;
 }
+
 .progress-bar-striped {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-size: var(--bs-progress-height) var(--bs-progress-height);
+  background-size: var(--bsi-progress-height) var(--bsi-progress-height);
 }
 
 .progress-bar-animated {
@@ -3315,6 +3325,11 @@ a.btn-outline-danger:active {
   }
 }
 
+@keyframes progress-bar-stripes {
+  0% {
+    background-position-x: 16px;
+  }
+}
 @keyframes progressBarIndeterminate {
   0% {
     left: -5%;
@@ -3328,25 +3343,13 @@ a.btn-outline-danger:active {
   }
 }
 .progress {
-  --bs-progress-height: 16px;
-  --bs-progress-font-size: 0.75rem;
-  --bs-progress-bg: hsl(0, 0%, 90%);
-  --bs-progress-border-radius: 0;
-  --bs-progress-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-  --bs-progress-bar-color: hsl(0, 0%, 100%);
-  --bs-progress-bar-bg: hsl(210, 100%, 40%);
-  --bs-progress-bar-transition: width 0.6s ease;
   display: flex;
   overflow: hidden;
-  font-size: var(--bs-progress-font-size);
-  background-color: var(--bs-progress-bg);
-  border-radius: var(--bs-progress-border-radius);
-  height: 4px;
+  background-color: var(--bsi-progress-bg);
+  border-radius: var(--bsi-progress-border-radius);
+  height: var(--bsi-progress-height);
   box-shadow: none;
 }
-.progress.progress-color {
-  background-color: hsl(210, 3%, 85%);
-}
 .progress.progress-indeterminate {
   position: relative;
 }
@@ -3363,22 +3366,23 @@ a.btn-outline-danger:active {
   flex-direction: column;
   justify-content: center;
   overflow: hidden;
-  color: var(--bs-progress-bar-color);
   text-align: center;
   white-space: nowrap;
-  transition: var(--bs-progress-bar-transition);
-  background-color: hsl(210, 17%, 44%);
+  transition: var(--bsi-progress-bar-transition);
 }
 @media (prefers-reduced-motion: reduce) {
   .progress-bar {
     transition: none;
   }
 }
+.progress-bar {
+  background-color: var(--bsi-progress-bar-bg);
+}
 
 .progress-bar-label {
   text-align: right;
-  font-size: 0.75rem;
-  color: hsl(0, 0%, 10%);
+  font-size: var(--bsi-progress-label-font-size);
+  color: var(--bsi-progress-label-color);
   font-weight: 500;
 }
 
@@ -3388,55 +3392,50 @@ a.btn-outline-danger:active {
   bottom: 0;
   width: 100%;
   left: 0;
-  border-radius: 0 0 4px 4px;
+  border-radius: 0 0 var(--bsi-progress-border-radius) var(--bsi-progress-border-radius);
 }
 .btn-progress .progress-bar {
-  height: 4px;
+  height: var(--bsi-progress-height);
 }
 
-@media (min-width: 576px) {
-  .progress-bar-label {
-    font-size: 0.75rem;
-  }
-}
 body {
-  font-family: var(--bs-font-sans);
+  font-family: var(--bsi-font-sans);
 }
 
 p,
 ul,
 ol,
 dl {
-  font-size: var(--bs-body-font-size);
-  line-height: var(--bs-body-line-height);
+  font-size: var(--bsi-body-font-size);
+  line-height: var(--bsi-body-leading);
 }
 
 caption,
 figcaption {
-  font-size: var(--bs-caption-font-size);
-  line-height: var(--bs-caption-line-height);
+  font-size: var(--bsi-caption-font-size);
+  line-height: var(--bsi-caption-leading);
 }
 
 b,
 strong {
-  font-weight: var(--bs-font-weight-strong);
+  font-weight: var(--bsi-font-weight-strong);
 }
 
 mark,
 code {
-  padding: 0 var(--bs-spacing-3xs);
+  padding: 0 var(--bsi-spacing-3xs);
 }
 
 mark {
-  background-color: var(--bs-highlight-background);
+  background-color: var(--bsi-highlight-background);
 }
 
 pre,
 code,
 kbd,
 samp {
-  border-radius: var(--bs-radius-smooth);
-  font-family: var(--bs-font-mono);
+  border-radius: var(--bsi-radius-smooth);
+  font-family: var(--bsi-font-mono);
 }
 
 ins,
@@ -3444,18 +3443,18 @@ del {
   position: relative;
   display: flex;
   align-items: center;
-  padding: var(--bs-spacing-3xs) var(--bs-spacing-m);
-  font: var(--bs-body-font-size);
+  padding: var(--bsi-spacing-3xs) var(--bsi-spacing-m);
+  font: var(--bsi-body-font-size);
   text-decoration: none;
 }
 
 ins {
-  background-color: var(--bs-ins-background);
+  background-color: var(--bsi-ins-background);
   text-decoration: none;
 }
 
 del {
-  background-color: var(--bs-del-background);
+  background-color: var(--bsi-del-background);
 }
 
 del::before,
@@ -3474,57 +3473,57 @@ ins::before {
 
 kbd {
   margin: 0 2px;
-  padding: 2px var(--bs-spacing-3xs);
-  border: var(--bs-border-base) solid var(--bs-color-border-subtle);
-  background-color: var(--bs-color-background-secondary-lighter);
-  box-shadow: var(--bs-elevation-low), 0 2px 0 0 hsla(255, 0%, 100%, 0.7) inset;
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-font-size-1);
-  font-weight: var(--bs-font-weight-solid);
+  padding: 2px var(--bsi-spacing-3xs);
+  border: var(--bsi-border-base) solid var(--bsi-color-border-subtle);
+  background-color: var(--bsi-color-background-secondary-lighter);
+  box-shadow: var(--bsi-elevation-low), 0 2px 0 0 hsla(255, 0%, 100%, 0.7) inset;
+  color: var(--bsi-color-text-secondary);
+  font-size: var(--bsi-font-size-1);
+  font-weight: var(--bsi-font-weight-solid);
   white-space: nowrap;
 }
 kbd kbd {
   padding: 0;
-  font-size: var(--bs-code-font-size);
+  font-size: var(--bsi-code-font-size);
 }
 
 small,
 .small {
-  font-size: var(--bs-caption-font-size);
+  font-size: var(--bsi-caption-font-size);
 }
 
 .x-small {
-  font-size: var(--bs-font-size-1);
+  font-size: var(--bsi-font-size-1);
 }
 
 h1,
 .h1 {
-  font-size: var(--bs-heading-1-font-size);
+  font-size: var(--bsi-heading-1-font-size);
 }
 
 h2,
 .h2 {
-  font-size: var(--bs-heading-2-font-size);
+  font-size: var(--bsi-heading-2-font-size);
 }
 
 h3,
 .h3 {
-  font-size: var(--bs-heading-3-font-size);
+  font-size: var(--bsi-heading-3-font-size);
 }
 
 h4,
 .h4 {
-  font-size: var(--bs-heading-4-font-size);
+  font-size: var(--bsi-heading-4-font-size);
 }
 
 h5,
 .h5 {
-  font-size: var(--bs-heading-5-font-size);
+  font-size: var(--bsi-heading-5-font-size);
 }
 
 h6,
 .h6 {
-  font-size: var(--bs-heading-6-font-size);
+  font-size: var(--bsi-heading-6-font-size);
 }
 
 h1,
@@ -3540,8 +3539,8 @@ h5,
 h6,
 .h6 {
   margin-top: 0;
-  margin-bottom: var(--bs-heading-spacing);
-  line-height: var(--bs-heading-line-height);
+  margin-bottom: var(--bsi-heading-spacing);
+  line-height: var(--bsi-heading-line-height);
 }
 :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + h1, p + h1,
 :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + .h1,
@@ -3566,7 +3565,7 @@ p + .h5,
 p + h6,
 :is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6) + .h6,
 p + .h6 {
-  padding-top: var(--bs-spacing-s);
+  padding-top: var(--bsi-spacing-s);
 }
 
 h1,
@@ -3575,7 +3574,7 @@ h3,
 .h1,
 .h2,
 .h3 {
-  font-weight: var(--bs-heading-font-weight);
+  font-weight: var(--bsi-heading-font-weight);
 }
 
 h4,
@@ -3584,7 +3583,7 @@ h6,
 .h4,
 .h5,
 .h6 {
-  font-weight: var(--bs-heading-font-weight-weak);
+  font-weight: var(--bsi-heading-font-weight-weak);
 }
 
 h1,
@@ -3594,37 +3593,37 @@ h1,
 }
 
 .font-serif {
-  font-family: var(--bs-font-serif) !important;
+  font-family: var(--bsi-font-serif) !important;
 }
 
 .font-sans-serif {
-  font-family: var(--bs-font-sans) !important;
+  font-family: var(--bsi-font-sans) !important;
 }
 
 .font-monospace {
-  font-family: var(--bs-font-mono) !important;
+  font-family: var(--bsi-font-mono) !important;
 }
 
 .display-1 {
-  font-size: var(--bs-display-font-size);
-  font-weight: var(--bs-heading-font-weight);
-  line-height: var(--bs-heading-line-height);
+  font-size: var(--bsi-display-font-size);
+  font-weight: var(--bsi-heading-font-weight);
+  line-height: var(--bsi-heading-line-height);
 }
 
 .lead {
-  font-size: var(--bs-lead-font-size);
-  font-weight: var(--bs-lead-font-weight);
-  line-height: var(--bs-lead-line-height);
+  font-size: var(--bsi-lead-font-size);
+  font-weight: var(--bsi-lead-font-weight);
+  line-height: var(--bsi-lead-line-height);
 }
 
 blockquote,
 .blockquote {
-  margin: var(--bs-spacing-m) 0;
-  margin-left: var(--bs-spacin-inline-xs);
-  padding: var(--bs-spacing-s);
-  border-left: var(--bs-border-thick) solid var(--bs-border-color-secondary);
-  font-size: var(--bs-body-font-size);
-  line-height: var(--bs-body-line-height);
+  margin: var(--bsi-spacing-m) 0;
+  margin-left: var(--bsi-spacin-inline-xs);
+  padding: var(--bsi-spacing-s);
+  border-left: var(--bsi-border-thick) solid var(--bsi-border-color-secondary);
+  font-size: var(--bsi-body-font-size);
+  line-height: var(--bsi-body-leading);
 }
 blockquote > :last-child,
 .blockquote > :last-child {
@@ -3632,8 +3631,8 @@ blockquote > :last-child,
 }
 blockquote.text-end,
 .blockquote.text-end {
-  margin-right: var(--bs-spacin-inline-xs);
-  border-right: var(--bs-border-thick) solid var(--bs-border-color-secondary);
+  margin-right: var(--bsi-spacin-inline-xs);
+  border-right: var(--bsi-border-thick) solid var(--bsi-border-color-secondary);
 }
 blockquote.text-center, blockquote.text-end, blockquote.blockquote-simple,
 .blockquote.text-center,
@@ -3655,9 +3654,9 @@ blockquote.blockquote-simple,
 blockquote.blockquote-card,
 .blockquote.blockquote-card {
   margin-left: 0;
-  padding: var(--bs-spacing-m);
-  background-color: var(--bs-color-background-inverse);
-  box-shadow: var(--bs-elevation-low);
+  padding: var(--bsi-spacing-m);
+  background-color: var(--bsi-color-background-inverse);
+  box-shadow: var(--bsi-elevation-low);
 }
 blockquote.blockquote-card .blockquote-footer,
 .blockquote.blockquote-card .blockquote-footer {
@@ -3670,53 +3669,53 @@ blockquote.blockquote-card .blockquote-footer:before,
 blockquote.blockquote-card.dark,
 .blockquote.blockquote-card.dark {
   border-left: none;
-  background-color: var(--bs-color-background-primary);
-  color: var(--bs-color-text-inverse);
+  background-color: var(--bsi-color-background-primary);
+  color: var(--bsi-color-text-inverse);
 }
 blockquote.blockquote-card.dark .blockquote-footer,
 .blockquote.blockquote-card.dark .blockquote-footer {
-  color: var(--bs-color-text-inverse);
+  color: var(--bsi-color-text-inverse);
 }
 
 .blockquote-footer {
   margin-top: 0;
-  margin-bottom: var(--bs-spacing-s);
-  color: var(--bs-color-text-secondary);
-  font-size: var(--bs-label-font-size);
+  margin-bottom: var(--bsi-spacing-s);
+  color: var(--bsi-color-text-secondary);
+  font-size: var(--bsi-label-font-size);
 }
 .blockquote-footer::before {
   content: "— ";
 }
 .bg-dark .blockquote-footer {
-  color: var(--bs-color-text-muted);
+  color: var(--bsi-color-text-muted);
 }
 
 .initialism {
-  font-size: var(--bs-label-font-size-s);
+  font-size: var(--bsi-label-font-size-s);
   text-transform: uppercase;
 }
 
 :root {
-  --bs-form-control-height: 2.5rem;
-  --bs-form-control-spacing: var(--bs-spacing-xxs);
-  --bs-form-control-background-color: var(--bs-color-background-inverse);
-  --bs-form-control-border-color: var(--bs-color-border-secondary);
-  --bs-form-control-border-radius: var(--bs-radius-smooth);
-  --bs-form-control-placeholder-color: var(--bs-color-text-muted);
-  --bs-form-control-label-color: var(--bs-color-text-base);
-  --bs-form-control-text-color: var(--bs-color-text-secondary);
-  --bs-form-control-font-size: var(--bs-body-font-size);
-  --bs-form-group-spacing-y: var(--bs-spacing-m);
-  --bs-form-checkbox-border-color: var(--bs-color-border-secondary);
-  --bs-form-checkbox-border-radius: var(--bs-radius-smooth);
-  --bs-form-checked-color: var(--bs-color-background-primary);
+  --bsi-form-control-height: 2.5rem;
+  --bsi-form-control-spacing: var(--bsi-spacing-xxs);
+  --bsi-form-control-background-color: var(--bsi-color-background-inverse);
+  --bsi-form-control-border-color: var(--bsi-color-border-secondary);
+  --bsi-form-control-border-radius: var(--bsi-radius-smooth);
+  --bsi-form-control-placeholder-color: var(--bsi-color-text-muted);
+  --bsi-form-control-label-color: var(--bsi-color-text-base);
+  --bsi-form-control-text-color: var(--bsi-color-text-secondary);
+  --bsi-form-control-font-size: var(--bsi-body-font-size);
+  --bsi-form-group-spacing-y: var(--bsi-spacing-m);
+  --bsi-form-checkbox-border-color: var(--bsi-color-border-secondary);
+  --bsi-form-checkbox-border-radius: var(--bsi-radius-smooth);
+  --bsi-form-checked-color: var(--bsi-color-background-primary);
 }
 
 input[readonly],
 textarea[readonly],
 select[readonly] {
-  --bs-form-control-border-color: var(--bs-color-border-subtle);
-  --bs-form-control-background-color: var(--bs-color-background-muted);
+  --bsi-form-control-border-color: var(--bsi-color-border-subtle);
+  --bsi-form-control-background-color: var(--bsi-color-background-muted);
   cursor: not-allowed;
 }
 
@@ -3725,29 +3724,30 @@ textarea,
 select {
   display: block;
   width: 100%;
-  padding: var(--bs-form-control-spacing);
-  border: 1px solid var(--bs-form-control-border-color);
-  border-radius: var(--bs-form-control-border-radius);
-  background-color: var(--bs-form-control-background-color);
-  color: var(--bs-form-control-text-color);
-  font-size: var(--bs-form-control-font-size);
+  padding: var(--bsi-form-control-spacing);
+  border: 1px solid var(--bsi-form-control-border-color);
+  border-radius: var(--bsi-form-control-border-radius);
+  background-color: var(--bsi-form-control-background-color);
+  color: var(--bsi-form-control-text-color);
+  font-size: var(--bsi-form-control-font-size);
 }
 input.disabled, input:disabled,
 textarea.disabled,
 textarea:disabled,
 select.disabled,
 select:disabled {
-  border-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
   opacity: 1;
-  background-color: var(--bs-color-background-disabled);
-  color: var(--bs-color-text-disabled);
+  background-color: var(--bsi-color-background-disabled);
+  color: var(--bsi-color-text-disabled);
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 input:focus,
 textarea:focus {
   outline: 3px solid transparent;
   outline-offset: 3px;
-  box-shadow: 0 0 0 2px var(--bs-color-border-inverse), 0 0 0 5px var(--bs-color-outline-focus) !important;
+  box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
 }
 
 input::file-selector-button {
@@ -3785,7 +3785,7 @@ input::-webkit-date-and-time-value {
 select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='hsl%280, 0%, 15%%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
-  background-position: right var(--bs-form-control-spacing) center;
+  background-position: right var(--bsi-form-control-spacing) center;
   background-size: 16px 12px;
   appearance: none;
 }
@@ -3811,6 +3811,9 @@ select:-moz-focusring {
 select option {
   font-weight: normal;
 }
+select {
+  /* stylelint-disable-next-line no-duplicate-selectors */ /* TO DO check these styles */
+}
 select:disabled {
   opacity: 1;
   background-color: hsl(210, 3%, 85%);
@@ -3818,7 +3821,7 @@ select:disabled {
 
 textarea {
   height: auto;
-  font-size: var(--bs-body-font-size);
+  font-size: var(--bsi-body-font-size);
   line-height: 1.5;
 }
 
@@ -3826,13 +3829,14 @@ label {
   display: inline-block;
   width: auto;
   max-width: 100%;
-  margin-bottom: var(--bs-spacing-xxs);
-  color: var(--bs-form-control-label-color);
-  font-size: var(--bs-label-font-size-s);
-  font-weight: var(--bs-font-weight-solid);
-  line-height: var(--bs-label-line-height);
+  margin-bottom: var(--bsi-spacing-xxs);
+  color: var(--bsi-form-control-label-color);
+  font-size: var(--bsi-label-font-size-s);
+  font-weight: var(--bsi-font-weight-solid);
+  line-height: var(--bsi-label-leading);
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors */
 input,
 textarea {
   outline: 0;
@@ -3848,26 +3852,26 @@ input[type=time] {
 }
 
 fieldset legend {
-  margin-bottom: var(--bs-spacing-s);
-  padding: 0 var(--bs-form-input-spacing-x);
+  margin-bottom: var(--bsi-spacing-s);
+  padding: 0 var(--bsi-form-input-spacing-x);
   background-color: transparent;
-  color: var(--bs-form-control-text-color);
-  font-size: var(--bs-label-sm);
-  font-weight: var(--bs-font-weight-solid);
+  color: var(--bsi-form-control-text-color);
+  font-size: var(--bsi-label-sm);
+  font-weight: var(--bsi-font-weight-solid);
 }
 
 ::placeholder {
-  color: var(--bs-form-control-placeholder-color);
+  color: var(--bsi-form-control-placeholder-color);
 }
 
 input::-webkit-datetime-edit {
-  background-color: var(--bs-color-background-primary-lighter);
-  color: var(--bs-form-contro-text-color);
+  background-color: var(--bsi-color-background-primary-lighter);
+  color: var(--bsi-form-contro-text-color);
 }
 
 .form-group {
   position: relative;
-  margin-bottom: var(--bs-form-group-spacing-y);
+  margin-bottom: var(--bsi-form-group-spacing-y);
 }
 .form-group label.input-symbol-label:not(.active) {
   left: 2.25rem;
@@ -3881,8 +3885,8 @@ input::-webkit-datetime-edit {
 }
 
 .form-text {
-  margin: var(--bs-spacing-xxs) 0;
-  color: var(--bs-color-text-secondary);
+  margin: var(--bsi-spacing-xxs) 0;
+  color: var(--bsi-color-text-secondary);
 }
 
 .form-group.active .form-file-name {
@@ -3893,7 +3897,7 @@ input::-webkit-datetime-edit {
   display: none;
   width: 100%;
   margin-top: 0.25rem;
-  color: var(--bs-color-text-warning);
+  color: var(--bsi-color-text-warning);
   font-size: 0.75rem;
 }
 
@@ -3904,7 +3908,7 @@ input::-webkit-datetime-edit {
 }
 
 .input-group .input-group-text .btn {
-  border-radius: var(--bs-form-control-border-radius) 0 0 var(--bs-form-control-border-radius);
+  border-radius: var(--bsi-form-control-border-radius) 0 0 var(--bsi-form-control-border-radius);
 }
 .input-group .input-group-append {
   margin-left: 0;
@@ -3914,21 +3918,21 @@ input::-webkit-datetime-edit {
   padding-top: 0;
   padding-bottom: 0;
   border-bottom: 1px solid hsl(210, 17%, 44%);
-  border-radius: 0 var(--bs-form-control-border-radius) var(--bs-form-control-border-radius) 0;
+  border-radius: 0 var(--bsi-form-control-border-radius) var(--bsi-form-control-border-radius) 0;
 }
 
 .form-check {
   position: relative;
-  padding-left: 0;
-  align-items: center;
 }
 .form-check + .form-check {
-  margin-top: var(--bs-spacing-s);
+  margin-top: var(--bsi-spacing-s);
 }
 .form-check [type=checkbox],
 .form-check [type=radio] {
   position: absolute;
-  height: 100%;
+  top: 9px;
+  left: 9px;
+  width: auto;
   margin-top: 0;
   margin-left: 0;
   opacity: 0;
@@ -3936,19 +3940,17 @@ input::-webkit-datetime-edit {
 .form-check [type=checkbox] + label,
 .form-check [type=radio] + label {
   position: relative;
-  display: flex;
-  align-items: center;
+  margin-bottom: 0;
   padding-left: 28px;
-  font-size: var(--bs-label-font-size);
-  font-weight: var(--bs-font-weight-solid);
+  font-size: var(--bsi-label-font-size);
+  font-weight: var(--bsi-font-weight-solid);
   cursor: pointer;
-  margin-bottom: 0;
   user-select: none;
 }
 @media (min-width: 576px) {
   .form-check [type=checkbox] + label,
   .form-check [type=radio] + label {
-    font-size: var(--bs-label-font-size-m);
+    font-size: var(--bsi-label-font-size-l);
   }
 }
 .form-check input[type=checkbox] + label::after,
@@ -3959,13 +3961,13 @@ input::-webkit-datetime-edit {
   content: "";
   border-width: 2px;
   border-style: solid;
-  transition: all var(--bs-transition-instant) ease-out;
+  transition: all var(--bsi-transition-instant) ease-out;
 }
 .form-check input[type=checkbox] + label::after {
   top: 0;
   width: 20px;
   height: 20px;
-  border-radius: var(--bs-form-control-border-radius);
+  border-radius: var(--bsi-form-control-border-radius);
 }
 .form-check input[type=checkbox]:checked + label::before {
   top: 3px;
@@ -3974,7 +3976,7 @@ input::-webkit-datetime-edit {
   height: 12px;
   border-width: 2px;
   border-style: solid;
-  border-color: transparent var(--bs-color-border-inverse) var(--bs-color-border-inverse) transparent;
+  border-color: transparent var(--bsi-color-border-inverse) var(--bsi-color-border-inverse) transparent;
   opacity: 1;
   transform: rotate(40deg);
   transform-origin: 100% 100%;
@@ -3982,12 +3984,12 @@ input::-webkit-datetime-edit {
 }
 .form-check input[type=checkbox]:checked + label::after {
   z-index: 0;
-  border-color: var(--bs-form-checked-color);
-  background-color: var(--bs-form-checked-color);
+  border-color: var(--bsi-form-checked-color);
+  background-color: var(--bsi-form-checked-color);
 }
 .form-check input[type=checkbox]:not(:checked) + label::after {
   z-index: 0;
-  border-color: var(--bs-form-checkbox-border-color);
+  border-color: var(--bsi-form-checkbox-border-color);
   background-color: transparent;
 }
 .form-check input[type=checkbox]:not(:checked) + label::before {
@@ -4002,12 +4004,12 @@ input::-webkit-datetime-edit {
   cursor: not-allowed;
 }
 .form-check input[type=checkbox]:disabled:not(:checked) + label::after {
-  border-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
   background-color: transparent;
 }
 .form-check input[type=checkbox]:disabled:checked + label::after {
-  border-color: var(--bs-color-border-disabled);
-  background-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
+  background-color: var(--bsi-color-border-disabled);
 }
 .form-check input[type=radio] + label::after, .form-check input[type=radio] + label::before {
   position: absolute;
@@ -4019,11 +4021,11 @@ input::-webkit-datetime-edit {
   height: 20px;
   border-width: 2px;
   border-style: solid;
-  border-radius: var(--bs-radius-rounded);
-  transition: all var(--bs-transition-instant) ease-out;
+  border-radius: var(--bsi-radius-rounded);
+  transition: all var(--bsi-transition-instant) ease-out;
 }
 .form-check input[type=radio]:not(:checked) + label::after, .form-check input[type=radio]:not(:checked) + label::before {
-  border-color: var(--bs-form-checkbox-border-color);
+  border-color: var(--bsi-form-checkbox-border-color);
 }
 .form-check input[type=radio]:not(:checked) + label:after {
   z-index: -1;
@@ -4031,25 +4033,30 @@ input::-webkit-datetime-edit {
 }
 .form-check input[type=radio]:checked + label::after {
   z-index: 0;
-  border-color: var(--bs-form-checked-color);
-  background-color: var(--bs-form-checked-color);
+  border-color: var(--bsi-form-checked-color);
+  background-color: var(--bsi-form-checked-color);
   transform: scale(0.64);
 }
 .form-check input[type=radio]:checked + label::before {
-  border-color: var(--bs-form-checked-color);
+  border-color: var(--bsi-form-checked-color);
 }
 .form-check input[type=radio]:disabled + label {
   cursor: not-allowed;
 }
 .form-check input[type=radio]:disabled:not(:checked) + label::after, .form-check input[type=radio]:disabled:not(:checked) + label::before {
-  border-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
 }
 .form-check input[type=radio]:disabled:checked + label::after {
-  border-color: var(--bs-color-border-disabled);
-  background-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
+  background-color: var(--bsi-color-border-disabled);
 }
 .form-check input[type=radio]:disabled:checked + label::before {
-  border-color: var(--bs-color-border-disabled);
+  border-color: var(--bsi-color-border-disabled);
+}
+.form-check .form-text {
+  display: block;
+  margin-bottom: 0.5rem;
+  padding-right: 3.25rem;
 }
 .form-check.form-check-group {
   margin-bottom: 1rem;
@@ -4058,6 +4065,7 @@ input::-webkit-datetime-edit {
 }
 .form-check.form-check-group input[type=checkbox] + label,
 .form-check.form-check-group input[type=radio] + label {
+  position: static;
   padding-right: 3.25rem;
   padding-left: 0;
 }
@@ -4073,17 +4081,12 @@ input::-webkit-datetime-edit {
 .form-check.form-check-group input[type=radio]:checked + label::before {
   right: 0;
 }
-.form-check.form-check-group .form-text {
-  display: block;
-  margin-bottom: 0.5rem;
-  padding-right: 3.25rem;
-}
 .form-check.form-check-group input.semi-checked:not(:checked) + label::before {
   right: 4px;
   left: auto;
 }
 .form-check input.semi-checked:not(:checked) + label::before {
-  top: 9px;
+  top: 12px;
   left: 4px;
   width: 12px;
   height: 2px;
@@ -4091,21 +4094,21 @@ input::-webkit-datetime-edit {
   border-style: none;
   border-color: transparent;
   opacity: 1;
-  background: var(--bs-color-background-inverse);
+  background: var(--bsi-color-background-inverse);
   transform: none;
   backface-visibility: hidden;
 }
 .form-check input.semi-checked:not(:checked) + label::after {
   z-index: 0;
-  border-color: var(--bs-form-checked-color);
-  background-color: var(--bs-form-checked-color);
+  border-color: var(--bsi-form-checked-color);
+  background-color: var(--bsi-form-checked-color);
 }
 
 .form-check-inline {
   display: inline-block;
 }
 .form-check-inline:not(:last-child) {
-  margin-right: var(--bs-spacing-m);
+  margin-right: var(--bsi-spacing-m);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -4126,7 +4129,7 @@ input::-webkit-datetime-edit {
 .form-check [type=checkbox]:focus + label,
 .form-check [type=radio]:focus + label {
   border-color: hsl(0, 0%, 0%) !important;
-  box-shadow: 0 0 0 2px var(--bs-color-border-inverse), 0 0 0 5px var(--bs-color-outline-focus) !important;
+  box-shadow: 0 0 0 2px var(--bsi-color-border-inverse), 0 0 0 5px var(--bsi-color-outline-focus) !important;
   outline: 3px solid transparent !important;
   outline-offset: 3px !important;
 }
@@ -4140,10 +4143,10 @@ input::-webkit-datetime-edit {
 
 .form-control-plaintext {
   border: 0;
-  --bs-form-control-border-color: transparent;
-  --bs-form-control-border-radius: 0;
-  --bs-form-control-background-color: transparent;
-  --bs-form-control-spacing: 0;
+  --bsi-form-control-border-color: transparent;
+  --bsi-form-control-border-radius: 0;
+  --bsi-form-control-background-color: transparent;
+  --bsi-form-control-spacing: 0;
 }
 .form-control-plaintext:focus {
   outline: 0;
@@ -4160,28 +4163,28 @@ input::-webkit-datetime-edit {
 }
 .form-control:disabled {
   cursor: not-allowed;
-  background: var(--bs-color-background-disabled);
+  background: var(--bsi-color-background-disabled);
   border: 0;
-  color: var(--bs-color-text-disabled);
+  color: var(--bsi-color-text-disabled);
 }
 .was-validated .form-control:valid, .form-control.is-valid {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23008055' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
 }
 .was-validated .form-control:invalid, .form-control.is-invalid {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23cc334d' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
-  border-color: var(--bs-color-border-danger);
+  border-color: var(--bsi-color-border-danger);
 }
 .form-control.warning {
   background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M2%2012C2%206.47715%206.47715%202%2012%202C14.6522%202%2017.1957%203.05357%2019.0711%204.92893C20.9464%206.8043%2022%209.34784%2022%2012C22%2017.5228%2017.5228%2022%2012%2022C6.47715%2022%202%2017.5228%202%2012ZM3%2012C3%2016.9706%207.02944%2021%2012%2021C16.9706%2021%2021%2016.9706%2021%2012C21%207.02944%2016.9706%203%2012%203C7.02944%203%203%207.02944%203%2012ZM11.5%2014.2V5.7H12.7V14.2H11.5ZM12.6%2018.3V16.5H11.4V18.3H12.6Z%22/%3E%0A%3C/svg%3E") no-repeat;
-  border-color: var(--bs-color-border-warning);
+  border-color: var(--bsi-color-border-warning);
 }
 .form-control.is-valid ~ .warning-feedback {
   display: block;
 }
 
 .form-control-sm {
-  --bs-form-control-spacing: var(--bs-spacing-xxs) var(--bs-spacing-3xs);
-  --bs-form-control-font-size: var(--bs-label-font-size);
+  --bsi-form-control-spacing: var(--bsi-spacing-xxs) var(--bsi-spacing-3xs);
+  --bsi-form-control-font-size: var(--bsi-label-font-size);
 }
 .form-control-sm::file-selector-button {
   padding: 0.25rem 0.5rem;
@@ -4190,7 +4193,7 @@ input::-webkit-datetime-edit {
 }
 
 .form-control-lg {
-  --bs-form-control-font-size: var(--bs-lead-font-size);
+  --bsi-form-control-font-size: var(--bsi-lead-font-size);
 }
 .form-control-lg::file-selector-button {
   padding: 0.5rem 1rem;
@@ -4233,15 +4236,15 @@ textarea.form-control-lg {
 
 .password-icon {
   position: absolute;
-  top: calc(var(--bs-form-control-spacing) * 4.5);
-  right: var(--bs-form-control-spacing);
+  top: calc(var(--bsi-form-control-spacing) * 4.5);
+  right: var(--bsi-form-control-spacing);
   z-index: 10;
-  padding: 0 var(--bs-spacing-xxs);
-  background-color: var(--bs-form-control-background-color);
+  padding: 0 var(--bsi-spacing-xxs);
+  background-color: var(--bsi-form-control-background-color);
   cursor: pointer;
 }
 .password-icon .icon {
-  fill: var(--bs-icon-primary);
+  fill: var(--bsi-icon-primary);
 }
 
 .password-meter {
@@ -4270,12 +4273,12 @@ textarea.form-control-lg {
 }
 .input-number.input-number-adaptive input[type=number] {
   width: auto;
-  transition: all va(--bs-transition-instant);
+  transition: all va(--bsi-transition-instant);
 }
 .input-number input[type=number] {
   appearance: textfield;
-  border-top-right-radius: var(--bs-form-control-border-radius) !important;
-  border-bottom-right-radius: var(--bs-form-control-border-radius) !important;
+  border-top-right-radius: var(--bsi-form-control-border-radius) !important;
+  border-bottom-right-radius: var(--bsi-form-control-border-radius) !important;
 }
 .input-number input[type=number]::-webkit-inner-spin-button, .input-number input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
@@ -4284,7 +4287,7 @@ textarea.form-control-lg {
   display: none;
 }
 .input-number input[type=number]:not(:disabled) {
-  border-left: 1px solid var(--bs-form-control-border-color);
+  border-left: 1px solid var(--bsi-form-control-border-color);
 }
 .input-number input[type=number][readonly] ~ .input-group-text .input-number-add,
 .input-number input[type=number][readonly] ~ .input-group-text .input-number-sub {
@@ -4303,7 +4306,7 @@ textarea.form-control-lg {
   bottom: 0;
   right: 0;
   z-index: 10;
-  padding-right: var(--bs-form-control-spacing);
+  padding-right: var(--bsi-form-control-spacing);
   border: none;
   background: transparent;
 }
@@ -4330,21 +4333,21 @@ textarea.form-control-lg {
   border-style: solid;
 }
 .input-number .input-group-text button:focus.input-number-add:after, .input-number .input-group-text button:hover.input-number-add:after {
-  border-color: transparent transparent hsl(210, 54%, 20%) transparent;
+  border-color: transparent transparent var(--bsi-form-control-border-color) transparent;
 }
 .input-number .input-group-text button:focus.input-number-sub:after, .input-number .input-group-text button:hover.input-number-sub:after {
-  border-color: hsl(210, 54%, 20%) transparent transparent transparent;
+  border-color: var(--bsi-form-control-border-color) transparent transparent transparent;
 }
 .input-number .input-group-text button:focus:not([data-focus-mouse=true]) {
   opacity: 1;
 }
 .input-number .input-group-text button.input-number-add:after {
   border-width: 0 5px 6px 5px;
-  border-color: transparent transparent hsl(210, 17.6470588235%, 43.35%) transparent;
+  border-color: transparent transparent var(--bsi-form-control-border-color) transparent;
 }
 .input-number .input-group-text button.input-number-sub:after {
   border-width: 6px 5px 0 5px;
-  border-color: hsl(210, 17.6470588235%, 43.35%) transparent transparent transparent;
+  border-color: var(--bsi-form-control-border-color) transparent transparent transparent;
 }
 .input-number .input-group-text button:hover {
   cursor: pointer;
@@ -4396,11 +4399,11 @@ textarea.form-control-lg {
 .input-group-text {
   display: flex;
   align-items: center;
-  padding: var(--bs-form-control-spacing) 0 var(--bs-form-control-spacing) var(--bs-form-control-spacing);
-  font-size: var(--bs-body-font-size);
-  font-weight: var(--bs-font-weight-solid);
-  color: var(--bs-form-inpunt-text-color);
-  background-color: var(--bs-form-control-background-color);
+  padding: var(--bsi-form-control-spacing) 0 var(--bsi-form-control-spacing) var(--bsi-form-control-spacing);
+  font-size: var(--bsi-body-font-size);
+  font-weight: var(--bsi-font-weight-solid);
+  color: var(--bsi-form-inpunt-text-color);
+  background-color: var(--bsi-form-control-background-color);
   text-align: center;
   white-space: nowrap;
   border-top-width: 1px;
@@ -4408,13 +4411,13 @@ textarea.form-control-lg {
   border-right-width: 0;
   border-bottom-width: 1px;
   border-style: solid;
-  border-color: var(--bs-form-control-border-color);
-  border-radius: var(--bs-form-control-border-radius);
+  border-color: var(--bsi-form-control-border-color);
+  border-radius: var(--bsi-form-control-border-radius);
 }
 .disabled .input-group-text {
-  background-color: var(--bs-color-background-disabled);
-  border-color: var(--bs-color-border-disabled);
-  color: var(--bs-color-text-disabled);
+  background-color: var(--bsi-color-background-disabled);
+  border-color: var(--bsi-color-border-disabled);
+  color: var(--bsi-color-text-disabled);
 }
 
 .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
@@ -4448,7 +4451,7 @@ textarea.form-control-lg {
   font-size: 0.75rem;
 }
 .form-feedback.just-validate-error-label {
-  color: var(--bs-color-text-danger);
+  color: var(--bsi-color-text-danger);
 }
 
 .input-group-text:has(~ [data-focus-mouse=true]:not(.btn)),
@@ -4464,7 +4467,7 @@ button:has(~ [data-focus-mouse=true]:not(.btn)),
 .is-invalid ~ .input-group-text,
 button:has(~ .is-invalid),
 .is-invalid + button {
-  border-color: var(--bs-color-border-danger) !important;
+  border-color: var(--bsi-color-border-danger) !important;
 }
 
 .sr-only-justvalidate-bi {
@@ -4472,7 +4475,7 @@ button:has(~ .is-invalid),
 }
 
 .just-validate-success-field {
-  border-color: var(--bs-color-border-success) !important;
+  border-color: var(--bsi-color-border-success) !important;
   padding-right: calc(1.5em + 0.75rem) !important;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23008055' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
 }
@@ -4481,7 +4484,7 @@ button:has(~ .is-invalid),
 .just-validate-success-field ~ .input-group-text,
 button:has(~ .just-validate-success-field),
 .just-validate-success-field + button {
-  border-color: var(--bs-color-border-success);
+  border-color: var(--bsi-color-border-success);
 }
 
 .just-validate-success-field + .input-group-text.align-buttons,
@@ -4512,14 +4515,14 @@ textarea.just-validate-success-field {
 
 input[type=checkbox].is-invalid,
 input[type=radio].is-invalid {
-  --bs-form-checkbox-border-color: var(--bs-color-border-danger);
+  --bsi-form-checkbox-border-color: var(--bsi-color-border-danger);
 }
 
 select.is-invalid {
-  border: 1px solid var(--bs-color-border-danger);
+  border: 1px solid var(--bsi-color-border-danger);
 }
 select.just-validate-success-field {
-  border: 1px solid var(--bs-color-border-success);
+  border: 1px solid var(--bsi-color-border-success);
 }
 
 .position-absolute {
@@ -4535,27 +4538,27 @@ select.just-validate-success-field {
 }
 
 .bg-muted {
-  --bs-bg-opacity: 1;
+  --bsi-bg-opacity: 1;
   background-color: hsl(0, 0%, 96%) !important;
 }
 
 .bg-danger {
-  --bs-bg-opacity: 1;
+  --bsi-bg-opacity: 1;
   background-color: hsl(350, 60%, 50%) !important;
 }
 
 .bg-warning {
-  --bs-bg-opacity: 1;
+  --bsi-bg-opacity: 1;
   background-color: hsl(36, 100%, 30%) !important;
 }
 
 .bg-success {
-  --bs-bg-opacity: 1;
+  --bsi-bg-opacity: 1;
   background-color: hsl(160, 100%, 25%) !important;
 }
 
 .border-start {
-  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+  border-left: var(--bsi-border-base) var(--bsi-border-style) var(--bsi-color-border-subtle) !important;
 }
 
 .border-start-0 {
@@ -4563,7 +4566,7 @@ select.just-validate-success-field {
 }
 
 .border-end {
-  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
+  border-right: var(--bsi-border-base) var(--bsi-border-style) var(--bsi-color-border-subtle) !important;
 }
 
 .border-end-0 {
@@ -4571,127 +4574,127 @@ select.just-validate-success-field {
 }
 
 .border-white {
-  --bs-border-opacity: 1;
+  --bsi-border-opacity: 1;
   border-color: white !important;
 }
 
 .text-primary {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-primary-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-secondary {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: hsl(210, 33%, 28%) !important;
 }
 
 .text-success {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-success-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-info {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-info-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-warning {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-warning-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-danger {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-danger-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-light {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-light-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-dark {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-dark-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-black {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-black-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-white {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-white-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-100 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-100-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-100-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-200 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-200-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-200-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-300 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-300-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-300-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-400 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-400-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-400-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-500 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-500-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-500-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-600 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-600-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-600-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-700 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-700-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-700-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-800 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-800-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-800-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-900 {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-900-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-900-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-body {
-  --bs-text-opacity: 1;
-  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
+  --bsi-text-opacity: 1;
+  color: rgba(var(--bsi-body-color-rgb), var(--bsi-text-opacity)) !important;
 }
 
 .text-muted {
-  --bs-text-opacity: 1;
+  --bsi-text-opacity: 1;
   color: hsl(210, 17%, 44%) !important;
 }
 
 .text-black-50 {
-  --bs-text-opacity: 1;
+  --bsi-text-opacity: 1;
   color: rgba(0, 0, 0, 0.5) !important;
 }
 
 .text-white-50 {
-  --bs-text-opacity: 1;
+  --bsi-text-opacity: 1;
   color: rgba(255, 255, 255, 0.5) !important;
 }
 
 .text-reset {
-  --bs-text-opacity: 1;
+  --bsi-text-opacity: 1;
   color: inherit !important;
 }
 
@@ -4764,8 +4767,8 @@ select.just-validate-success-field {
   }
 }
 .password-icon {
-  top: calc(var(--bs-form-control-spacing) * 5);
-  --bs-icon-default: var(--bs-icon-primary);
+  top: calc(var(--bsi-form-control-spacing) * 5);
+  --bsi-icon-default: var(--bsi-icon-primary);
 }
 
 .is-invalid + .input-group-text.align-buttons {