@dynamic-framework/ui-react 1.19.0 → 1.20.0

package/dist/css/dynamic-ui.css

@@ -1,5 +1,5 @@
 /*!
- * dynamic-framework 1.19.0
+ * dynamic-framework 1.20.0
  * bootstrap ^5.3.3
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
  */
@@ -297,7 +297,7 @@
   --bs-label-padding-y: var(--bs-ref-spacer-0);
   --bs-label-padding-x: var(--bs-ref-spacer-2);
   --bs-label-font-size: var(--bs-fs-small);
-  --bs-label-font-weight: var(--bs-fw-bold);
+  --bs-label-font-weight: var(--bs-fw-normal);
   --bs-label-color: var(--bs-gray);
   --bs-btn-border-radius: var(--bs-border-radius-pill);
   --bs-btn-lg-border-radius: var(--bs-border-radius-pill);
@@ -3073,13 +3073,13 @@ progress {
   font-size: 1rem;
   font-weight: var(--bs-fw-normal);
   line-height: 1.5;
-  color: var(--bs-gray);
+  color: var(--bs-gray-900);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   background-color: var(--bs-white);
   background-clip: padding-box;
-  border: var(--bs-border-width) solid var(--bs-border-color);
+  border: var(--bs-border-width) solid var(--bs-gray-300);
   border-radius: var(--bs-border-radius-sm);
   box-shadow: 0 0 0 transparent;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3096,7 +3096,7 @@ progress {
   cursor: pointer;
 }
 .form-control:focus {
-  color: var(--bs-gray);
+  color: var(--bs-gray-900);
   background-color: var(--bs-white);
   border-color: var(--bs-focus-ring-color);
   outline: 0;
@@ -3130,7 +3130,7 @@ progress {
   margin: -0.75rem -1rem;
   -webkit-margin-end: 1rem;
           margin-inline-end: 1rem;
-  color: var(--bs-gray);
+  color: var(--bs-gray-900);
   background-color: var(--bs-white);
   pointer-events: none;
   border-color: inherit;
@@ -3146,7 +3146,7 @@ progress {
   margin: -0.75rem -1rem;
   -webkit-margin-end: 1rem;
           margin-inline-end: 1rem;
-  color: var(--bs-gray);
+  color: var(--bs-gray-900);
   background-color: var(--bs-white);
   pointer-events: none;
   border-color: inherit;
@@ -3270,7 +3270,7 @@ textarea.form-control-lg {
   font-size: 1rem;
   font-weight: var(--bs-fw-normal);
   line-height: 1.5;
-  color: var(--bs-gray);
+  color: var(--bs-gray-900);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -3279,7 +3279,7 @@ textarea.form-control-lg {
   background-repeat: no-repeat;
   background-position: right 1rem center;
   background-size: 24px;
-  border: var(--bs-border-width) solid var(--bs-border-color);
+  border: var(--bs-border-width) solid var(--bs-gray-300);
   border-radius: var(--bs-border-radius-sm);
   box-shadow: none;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@@ -3305,7 +3305,7 @@ textarea.form-control-lg {
 }
 .form-select:-moz-focusring {
   color: transparent;
-  text-shadow: 0 0 0 var(--bs-gray);
+  text-shadow: 0 0 0 var(--bs-gray-900);
 }
 
 .form-select-sm {
@@ -3692,7 +3692,7 @@ textarea.form-control-lg {
   font-size: 1rem;
   font-weight: var(--bs-fw-normal);
   line-height: 1.5;
-  color: var(--bs-gray);
+  color: var(--bs-gray-900);
   text-align: center;
   white-space: nowrap;
   background-color: var(--bs-white);
@@ -7530,7 +7530,7 @@ body {
 }
 
 .input-group {
-  --bs-input-border-color: var(--bs-border-color);
+  --bs-input-border-color: var(--bs-gray-300);
   --bs-input-border-width: var(--bs-border-width);
   --bs-input-border-radius: var(--bs-border-radius-sm);
   --bs-input-focus-border-color: var(--bs-focus-ring-color);
@@ -9351,7 +9351,7 @@ label .d-icon {
 .d-icon {
   --bs-icon-color: var(--bs-icon-component-color, inherit);
   --bs-icon-bg-color: var(--bs-icon-component-bg-color, inherit);
-  --bs-icon-size: var(--bs-icon-component-size, $spacer-6);
+  --bs-icon-size: var(--bs-icon-component-size, var(--bs-ref-spacer-6));
   --bs-icon-padding: var(--bs-icon-component-padding, 0);
   --bs-icon-loading-duration: var(--bs-icon-component-loading-duration, 1.8);
   display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
@@ -9387,7 +9387,7 @@ label .d-icon {
   flex-direction: column;
   align-items: flex-start;
 }
-.d-input-pin form {
+.d-input-pin .d-input-pin-group {
   display: flex;
   flex-direction: row;
   gap: var(--bs-input-pin-form-gap);
@@ -9399,6 +9399,9 @@ label .d-icon {
   text-align: center;
   box-shadow: none;
 }
+.d-input-pin .form-control:has(~ .input-group-text) {
+  padding: var(--bs-ref-spacer-3) var(--bs-ref-spacer-4);
+}
 .d-input-pin .form-control::-webkit-inner-spin-button,
 .d-input-pin .form-control::-webkit-outer-spin-button {
   margin: 0;
@@ -9434,6 +9437,7 @@ label .d-icon {
 }
 .d-input-pin .input-group-text {
   padding-left: var(--bs-input-pin-form-gap);
+  background-color: transparent;
 }
 
 .d-quick-action-button {
@@ -10677,35 +10681,42 @@ label .d-icon {
   --bs-datepicker-box-shadow: var(--bs-box-shadow);
   --bs-datepicker-font-size: var(--bs-ref-spacer-4);
   --bs-datepicker-header-gap: var(--bs-ref-spacer-4);
-  --bs-datepicker-header-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-6);
+  --bs-datepicker-header-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-7);
   --bs-datepicker-header-background-color: var(--bs-secondary-soft);
   --bs-datepicker-header-border: 0;
   --bs-datepicker-header-font-size: var(--bs-fs-6);
+  --bs-datepicker-header-button-padding: 0;
+  --bs-datepicker-header-select-padding: 0 var(--bs-ref-spacer-1);
+  --bs-datepicker-header-select-font-weight: var(--bs-fw-bold);
+  --bs-datepicker-header-select-menu-width: fit-content;
   --bs-datepicker-day-names-margin: 0;
   --bs-datepicker-day-names-font-size: var(--bs-ref-spacer-4);
   --bs-datepicker-day-name-weight: var(--bs-fw-bold);
   --bs-datepicker-day-name-margin: 0;
-  --bs-datepicker-day-name-size: var(--bs-ref-spacer-4);
+  --bs-datepicker-day-name-padding: 0;
+  --bs-datepicker-day-name-size: var(--bs-ref-spacer-5);
   --bs-datepicker-day-name-color: var(--bs-gray-500);
-  --bs-datepicker-month-gap: var(--bs-ref-spacer-2);
-  --bs-datepicker-month-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-6) var(--bs-ref-spacer-6);
+  --bs-datepicker-month-gap: .875rem;
+  --bs-datepicker-month-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-7) var(--bs-ref-spacer-6);
   --bs-datepicker-month-margin: 0;
   --bs-datepicker-month-color: var(--bs-white);
-  --bs-datepicker-week-gap: var(--bs-ref-spacer-2);
+  --bs-datepicker-week-gap: var(--bs-ref-spacer-8);
   --bs-datepicker-day-margin: 0;
   --bs-datepicker-day-font-size: var(--bs-fs-small);
-  --bs-datepicker-day-size: var(--bs-ref-spacer-4);
-  --bs-datepicker-day-padding: var(--bs-ref-spacer-4);
+  --bs-datepicker-day-size: var(--bs-ref-spacer-5);
+  --bs-datepicker-day-padding: 0;
   --bs-datepicker-day-radius: 100%;
-  --bs-datepicker-day-bg-hover: var(--bs-body);
-  --bs-datepicker-day-color-hover: var(--bs-info-100);
+  --bs-datepicker-day-color: var(--bs-gray-900);
+  --bs-datepicker-day-disabled-color: var(--bs-gray-300);
+  --bs-datepicker-day-color-hover: var(--bs-gray-900);
+  --bs-datepicker-day-bg-hover: var(--bs-info-100);
   --bs-datepicker-day-selected-color: var(--bs-white);
   --bs-datepicker-day-selected-bg: var(--bs-secondary-500);
   --bs-datepicker-day-in-range-color: var(--bs-dark);
   --bs-datepicker-day-in-range-bg: var(--bs-secondary-100);
   --bs-datepicker-day-outside-month-color: var(--bs-gray-400);
   --bs-datepicker-day-today-font-weight: var(--bs-fw-normal);
-  --bs-datepicker-day-today-box-shadow: 0 0 0 2px inset var(--bs-secondary);
+  --bs-datepicker-day-today-box-shadow: 0 0 0 2px var(--bs-secondary);
   --bs-datepicker-time-container-margin: 0;
   --bs-datepicker-time-container-align: center;
   --bs-datepicker-time-input-width: 50%;
@@ -10734,17 +10745,14 @@ label .d-icon {
 }
 .react-datepicker .react-datepicker__header .react-datepicker__day-names {
   display: flex;
-  gap: var(--bs-ref-spacer-2);
+  gap: var(--bs-ref-spacer-8);
   margin: var(--bs-datepicker-day-names-margin);
   font-size: var(--bs-datepicker-day-names-font-size);
 }
 .react-datepicker .react-datepicker__header .react-datepicker__day-name {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   width: var(--bs-datepicker-day-name-size);
   height: var(--bs-datepicker-day-name-size);
-  padding: var(--bs-datepicker-day-padding);
+  padding: var(--bs-datepicker-day-name-padding);
   margin: var(--bs-datepicker-day-name-margin);
   font-weight: var(--bs-datepicker-day-name-weight);
   line-height: var(--bs-datepicker-day-name-size);
@@ -10760,11 +10768,11 @@ label .d-icon {
   padding: var(--bs-datepicker-month-padding);
   margin: var(--bs-datepicker-month-margin);
 }
-.react-datepicker .react-datepicker__month .react-datepicker__week {
+.react-datepicker .react-datepicker__week {
   display: flex;
   gap: var(--bs-datepicker-week-gap);
 }
-.react-datepicker .react-datepicker__month .react-datepicker__day {
+.react-datepicker .react-datepicker__day {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10774,6 +10782,12 @@ label .d-icon {
   margin: var(--bs-datepicker-day-margin);
   font-size: var(--bs-datepicker-day-font-size);
   line-height: var(--bs-datepicker-day-size);
+  color: var(--bs-datepicker-day-color);
+}
+.react-datepicker .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end, .react-datepicker .react-datepicker__day.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
+  color: var(--bs-datepicker-day-selected-color);
+  background-color: var(--bs-datepicker-day-selected-bg);
+  box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
 }
 .react-datepicker .react-datepicker__day:not(.react-datepicker__day--selected,
 .react-datepicker__month-text--selected,
@@ -10791,9 +10805,13 @@ label .d-icon {
 .react-datepicker__month-text--selected,
 .react-datepicker__quarter-text--selected,
 .react-datepicker__year-text--selected):hover {
-  color: var(--bs-datepicker-day-bg-hover);
-  background-color: var(--bs-datepicker-day-color-hover);
+  color: var(--bs-datepicker-day-color-hover);
+  background-color: var(--bs-datepicker-day-bg-hover);
   border-radius: var(--bs-datepicker-day-radius);
+  box-shadow: 0 0 0 2px var(--bs-datepicker-day-bg-hover);
+}
+.react-datepicker .react-datepicker__day--disabled {
+  color: var(--bs-datepicker-day-disabled-color);
 }
 .react-datepicker .react-datepicker__day--selected,
 .react-datepicker .react-datepicker__month--selected,
@@ -10802,14 +10820,12 @@ label .d-icon {
   color: var(--bs-datepicker-day-selected-color);
   background-color: var(--bs-datepicker-day-selected-bg);
   border-radius: var(--bs-datepicker-day-radius);
+  box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
 }
 .react-datepicker .react-datepicker__day--selected.react-datepicker__day--in-range.react-datepicker__day--range-start, .react-datepicker .react-datepicker__day--selected.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
   color: var(--bs-datepicker-day-selected-color);
   background-color: var(--bs-datepicker-day-selected-bg);
-}
-.react-datepicker .react-datepicker__day.react-datepicker__day--in-range.react-datepicker__day--range-end, .react-datepicker .react-datepicker__day.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
-  color: var(--bs-datepicker-day-selected-color);
-  background-color: var(--bs-datepicker-day-selected-bg);
+  box-shadow: 0 0 0 2px var(--bs-datepicker-day-selected-bg);
 }
 .react-datepicker .react-datepicker__day--in-range,
 .react-datepicker .react-datepicker__month-text--in-range,
@@ -10866,7 +10882,40 @@ label .d-icon {
   color: var(--bs-datepicker-time-input-label-color);
 }
 .react-datepicker .d-datepicker-header {
-  font-size: var(--bs-fs-6);
+  font-size: var(--bs-datepicker-header-font-size);
+}
+.react-datepicker .header-button {
+  --bs-btn-padding-y: var(--bs-datepicker-header-button-padding);
+  --bs-btn-padding-x: var(--bs-datepicker-header-button-padding);
+}
+.react-datepicker .header-button:hover, .react-datepicker .header-button:active {
+  color: inherit;
+  background-color: inherit;
+}
+.react-datepicker .header-button:focus {
+  --bs-btn-focus-outline-offset: 8px;
+}
+.react-datepicker .d-select:focus-within .input-group {
+  border-color: transparent;
+  box-shadow: none;
+}
+.react-datepicker .d-select .input-group {
+  --bs-input-border-width: 0;
+}
+.react-datepicker .d-select .d-select__indicators {
+  display: none;
+}
+.react-datepicker .d-select .d-select__control {
+  padding: var(--bs-datepicker-header-select-padding);
+  background-color: transparent;
+}
+.react-datepicker .d-select .d-select__single-value {
+  font-weight: var(--bs-datepicker-header-select-font-weight);
+}
+.react-datepicker .d-select__menu {
+  left: 50%;
+  min-width: var(--bs-datepicker-header-select-menu-width);
+  translate: -50%;
 }
 
 .d-datepicker-time {
@@ -10900,85 +10949,6 @@ label .d-icon {
   background-image: var(--bs-datepicker-calendar-picker-icon);
 }
 
-.react-datepicker.d-month-picker {
-  --bs-monthpicker-header-padding: var(--bs-ref-spacer-4) var(--bs-ref-spacer-2) 0;
-  --bs-monthpicker-font-weight: var(--bs-fw-normal);
-  --bs-monthpicker-header-color: var(--bs-white);
-  --bs-monthpicker-header-bg: var(--bs-dark);
-  --bs-monthpicker-month-gap: 0;
-  --bs-monthpicker-month-padding: var(--bs-ref-spacer-2) var(--bs-ref-spacer-6) var(--bs-ref-spacer-4);
-  --bs-monthpicker-month-color: var(--bs-white);
-  --bs-monthpicker-month-bg: var(--bs-dark);
-  --bs-monthpicker-month-today-color: var(--bs-white);
-  --bs-monthpicker-month-selected-bg: var(--bs-gray-500);
-  --bs-monthpicker-month-selected-box-shadow: 0 0 0 1px inset var(--bs-gray-100);
-  --bs-monthpicker-month-hover-bg: var(--bs-gray-700);
-  --bs-monthpicker-month-wrapper-gap: var(--bs-ref-spacer-2);
-  --bs-monthpicker-month-wrapper-font-size: var(--bs-fs-small);
-  --bs-monthpicker-single-month-width: 46px;
-  --bs-monthpicker-single-month-padding: var(--bs-ref-spacer-2);
-  --bs-monthpicker-single-month-margin: 0;
-  --bs-monthpicker-single-month-text-transform: capitalize;
-  --bs-monthpicker-single-month-radius: var(--bs-ref-spacer-6);
-  --bs-monthpicker-single-month-line-height: var(--bs-fs-6);
-  --bs-monthpicker-single-month-after-display: inline;
-  --bs-monthpicker-single-month-after-content: ".";
-  --bs-datepicker-triangle-color: var(--bs-dark);
-  font-family: var(--bs-datepicker-font-family);
-  border: var(--bs-datepicker-border);
-  box-shadow: var(--bs-datepicker-box-shadow);
-}
-.react-datepicker.d-month-picker .react-datepicker__header {
-  padding: var(--bs-monthpicker-header-padding);
-  font-weight: var(--bs-monthpicker-font-weight);
-  color: var(--bs-monthpicker-header-color);
-  background-color: var(--bs-monthpicker-header-bg);
-}
-.react-datepicker.d-month-picker .react-datepicker__header .btn-sm, .react-datepicker.d-month-picker .react-datepicker__header .btn-group-sm > .btn {
-  --bs-btn-padding-x: 0;
-  --bs-btn-padding-y: 0;
-  --bs-btn-font-size: var(--bs-fs-5);
-}
-.react-datepicker.d-month-picker .react-datepicker__month.react-datepicker__monthPicker,
-.react-datepicker.d-month-picker .react-datepicker__header.react-datepicker-year-header {
-  gap: var(--bs-monthpicker-month-gap);
-  padding: var(--bs-monthpicker-month-padding);
-  color: var(--bs-monthpicker-month-color);
-  background-color: var(--bs-monthpicker-month-bg);
-}
-.react-datepicker.d-month-picker .react-datepicker__month--selected,
-.react-datepicker.d-month-picker .react-datepicker__month-text--in-range,
-.react-datepicker.d-month-picker .react-datepicker__month-text--in-selecting-range,
-.react-datepicker.d-month-picker .react-datepicker__month-text--keyboard-selected {
-  color: var(--bs-monthpicker-month-today-color);
-  background-color: var(--bs-monthpicker-month-selected-bg);
-  box-shadow: var(--bs-monthpicker-month-selected-box-shadow);
-}
-.react-datepicker.d-month-picker .react-datepicker__month-text:hover {
-  background-color: var(--bs-monthpicker-month-hover-bg);
-}
-.react-datepicker.d-month-picker .react-datepicker__month-wrapper {
-  display: flex;
-  gap: var(--bs-monthpicker-month-wrapper-gap);
-  font-size: var(--bs-monthpicker-month-wrapper-font-size);
-}
-.react-datepicker.d-month-picker .react-datepicker__month-wrapper .react-datepicker__month-text {
-  width: var(--bs-monthpicker-single-month-width);
-  padding: var(--bs-monthpicker-single-month-padding);
-  margin: var(--bs-monthpicker-single-month-margin);
-  line-height: var(--bs-monthpicker-single-month-line-height);
-  text-transform: var(--bs-monthpicker-single-month-text-transform);
-  border-radius: var(--bs-monthpicker-single-month-radius);
-}
-.react-datepicker.d-month-picker .react-datepicker__month-wrapper .react-datepicker__month-text::after {
-  display: var(--bs-monthpicker-single-month-after-display);
-  content: var(--bs-monthpicker-single-month-after-content);
-}
-.react-datepicker.d-month-picker .react-datepicker__triangle::after, .react-datepicker.d-month-picker .react-datepicker__triangle::before {
-  top: 0;
-  border-bottom-color: var(--bs-datepicker-triangle-color);
-}
-
 .nav-pills,
 .nav-underline {
   --bs-tabs-nav-gap: var(--bs-ref-spacer-6);
@@ -11752,7 +11722,7 @@ label .d-icon {
   1rem: 1rem;
   font-weight: var(--bs-fw-normal);
   line-height: 1.5;
-  color: var(--bs-gray);
+  color: var(--bs-gray-900);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -11767,7 +11737,7 @@ label .d-icon {
   }
 }
 .d-select .d-select__control:focus {
-  color: var(--bs-gray);
+  color: var(--bs-gray-900);
   background-color: var(--bs-white);
   outline: 0;
 }
@@ -11777,6 +11747,7 @@ label .d-icon {
 }
 .d-select .d-select__menu-list {
   top: calc(var(--bs-input-border-width) * 2);
+  margin: calc(var(--bs-input-border-width) * -1);
   background: var(--bs-white);
   border-radius: var(--bs-input-border-radius);
   box-shadow: var(--bs-select-menu-shadow);
@@ -11941,102 +11912,102 @@ label .d-icon {
 }
 
 .link-primary {
-  color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-primary-500-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-primary-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-primary-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-primary:hover, .link-primary:focus {
-  color: RGBA(173, 22, 77, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(173, 22, 77, var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(173, 22, 77, var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-primary-600-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-primary-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-primary-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-secondary {
-  color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-secondary-500-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-secondary-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-secondary-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-secondary:hover, .link-secondary:focus {
-  color: RGBA(58, 58, 146, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(58, 58, 146, var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(58, 58, 146, var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-secondary-600-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-secondary-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-secondary-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-success {
-  color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-success-500-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-success-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-success-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-success:hover, .link-success:focus {
-  color: RGBA(2, 108, 71, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(2, 108, 71, var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(2, 108, 71, var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-success-600-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-success-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-success-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-info {
-  color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-info-500-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-info-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-info-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-info:hover, .link-info:focus {
-  color: RGBA(43, 87, 175, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(43, 87, 175, var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(43, 87, 175, var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-info-600-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-info-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-info-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-warning {
-  color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-warning-500-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-warning-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-warning-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-warning:hover, .link-warning:focus {
-  color: RGBA(252, 205, 87, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(252, 205, 87, var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(252, 205, 87, var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-warning-600-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-warning-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-warning-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-danger {
-  color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-danger-500-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-danger-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-danger-500-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-danger:hover, .link-danger:focus {
-  color: RGBA(169, 38, 38, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(169, 38, 38, var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(169, 38, 38, var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-danger-600-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-danger-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-danger-600-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-light {
-  color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-light:hover, .link-light:focus {
-  color: RGBA(249, 249, 255, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(249, 249, 255, var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(249, 249, 255, var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-gray-300-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-gray-300-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-gray-300-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-dark {
-  color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-dark:hover, .link-dark:focus {
-  color: RGBA(18, 18, 28, var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(18, 18, 28, var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(18, 18, 28, var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-gray-700-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-gray-700-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-gray-700-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 
 .link-body-emphasis {
-  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
-          text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
+  color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
+          text-decoration-color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
 }
 .link-body-emphasis:hover, .link-body-emphasis:focus {
-  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;
-  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
-          text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
+  color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;
+  -webkit-text-decoration-color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
+          text-decoration-color: rgba(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
 }
 
 .focus-ring:focus {
@@ -15895,6 +15866,36 @@ label .d-icon {
   .d-sm-none {
     display: none !important;
   }
+  .w-sm-25 {
+    width: 25% !important;
+  }
+  .w-sm-50 {
+    width: 50% !important;
+  }
+  .w-sm-75 {
+    width: 75% !important;
+  }
+  .w-sm-100 {
+    width: 100% !important;
+  }
+  .w-sm-auto {
+    width: auto !important;
+  }
+  .h-sm-25 {
+    height: 25% !important;
+  }
+  .h-sm-50 {
+    height: 50% !important;
+  }
+  .h-sm-75 {
+    height: 75% !important;
+  }
+  .h-sm-100 {
+    height: 100% !important;
+  }
+  .h-sm-auto {
+    height: auto !important;
+  }
   .flex-sm-fill {
     flex: 1 1 auto !important;
   }
@@ -17035,6 +17036,36 @@ label .d-icon {
   .d-md-none {
     display: none !important;
   }
+  .w-md-25 {
+    width: 25% !important;
+  }
+  .w-md-50 {
+    width: 50% !important;
+  }
+  .w-md-75 {
+    width: 75% !important;
+  }
+  .w-md-100 {
+    width: 100% !important;
+  }
+  .w-md-auto {
+    width: auto !important;
+  }
+  .h-md-25 {
+    height: 25% !important;
+  }
+  .h-md-50 {
+    height: 50% !important;
+  }
+  .h-md-75 {
+    height: 75% !important;
+  }
+  .h-md-100 {
+    height: 100% !important;
+  }
+  .h-md-auto {
+    height: auto !important;
+  }
   .flex-md-fill {
     flex: 1 1 auto !important;
   }
@@ -18175,6 +18206,36 @@ label .d-icon {
   .d-lg-none {
     display: none !important;
   }
+  .w-lg-25 {
+    width: 25% !important;
+  }
+  .w-lg-50 {
+    width: 50% !important;
+  }
+  .w-lg-75 {
+    width: 75% !important;
+  }
+  .w-lg-100 {
+    width: 100% !important;
+  }
+  .w-lg-auto {
+    width: auto !important;
+  }
+  .h-lg-25 {
+    height: 25% !important;
+  }
+  .h-lg-50 {
+    height: 50% !important;
+  }
+  .h-lg-75 {
+    height: 75% !important;
+  }
+  .h-lg-100 {
+    height: 100% !important;
+  }
+  .h-lg-auto {
+    height: auto !important;
+  }
   .flex-lg-fill {
     flex: 1 1 auto !important;
   }
@@ -19315,6 +19376,36 @@ label .d-icon {
   .d-xl-none {
     display: none !important;
   }
+  .w-xl-25 {
+    width: 25% !important;
+  }
+  .w-xl-50 {
+    width: 50% !important;
+  }
+  .w-xl-75 {
+    width: 75% !important;
+  }
+  .w-xl-100 {
+    width: 100% !important;
+  }
+  .w-xl-auto {
+    width: auto !important;
+  }
+  .h-xl-25 {
+    height: 25% !important;
+  }
+  .h-xl-50 {
+    height: 50% !important;
+  }
+  .h-xl-75 {
+    height: 75% !important;
+  }
+  .h-xl-100 {
+    height: 100% !important;
+  }
+  .h-xl-auto {
+    height: auto !important;
+  }
   .flex-xl-fill {
     flex: 1 1 auto !important;
   }
@@ -20455,6 +20546,36 @@ label .d-icon {
   .d-xxl-none {
     display: none !important;
   }
+  .w-xxl-25 {
+    width: 25% !important;
+  }
+  .w-xxl-50 {
+    width: 50% !important;
+  }
+  .w-xxl-75 {
+    width: 75% !important;
+  }
+  .w-xxl-100 {
+    width: 100% !important;
+  }
+  .w-xxl-auto {
+    width: auto !important;
+  }
+  .h-xxl-25 {
+    height: 25% !important;
+  }
+  .h-xxl-50 {
+    height: 50% !important;
+  }
+  .h-xxl-75 {
+    height: 75% !important;
+  }
+  .h-xxl-100 {
+    height: 100% !important;
+  }
+  .h-xxl-auto {
+    height: auto !important;
+  }
   .flex-xxl-fill {
     flex: 1 1 auto !important;
   }