@dynamic-framework/ui-react 1.30.0 → 1.31.0

package/dist/css/dynamic-ui.css

@@ -1,5 +1,5 @@
 /*!
- * dynamic-framework 1.30.0
+ * dynamic-framework 1.31.0
  * bootstrap ^5.3.3
  * license https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md
  */
@@ -300,10 +300,10 @@
   --bs-border-radius-xxl: 2.5rem;
   --bs-border-radius-2xl: var(--bs-border-radius-xxl);
   --bs-border-radius-pill: 50rem;
-  --bs-box-shadow: 0 12px 14px 0 rgba(21, 21, 26, 0.2);
-  --bs-box-shadow-sm: 0 8px 12px 0 rgba(21, 21, 26, 0.05);
-  --bs-box-shadow-lg: 0 20px 22px 0 rgba(21, 21, 26, 0.25);
-  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.75);
+  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
+  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
+  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
   --bs-focus-ring-width: 0.25rem;
   --bs-focus-ring-opacity: 0.25;
   --bs-focus-ring-border-color-rgb: var(--bs-secondary-300-rgb);
@@ -359,7 +359,8 @@
   --bs-fw-bold: 700;
   --bs-fw-bolder: 800;
   --bs-label-padding-y: var(--bs-ref-spacer-0);
-  --bs-label-padding-x: var(--bs-ref-spacer-2);
+  --bs-label-padding-x: var(--bs-ref-spacer-0);
+  --bs-label-margin-bottom: var(--bs-ref-spacer-1);
   --bs-label-font-size: var(--bs-fs-small);
   --bs-label-font-weight: var(--bs-fw-normal);
   --bs-label-color: var(--bs-gray-700);
@@ -4470,7 +4471,7 @@ progress {
 }
 
 .form-text {
-  margin-top: 0.5rem;
+  margin-top: var(--bs-ref-spacer-1);
   font-size: var(--bs-fs-small);
   color: var(--bs-body-color);
 }
@@ -4529,7 +4530,7 @@ progress {
   opacity: 1;
 }
 .form-control:disabled {
-  color: var(--bs-gray-300);
+  color: var(--bs-body-color);
   background-color: var(--bs-gray-100);
   border-color: var(--bs-gray-300);
   opacity: 1;
@@ -4708,7 +4709,7 @@ textarea.form-control-lg {
   background-image: none;
 }
 .form-select:disabled {
-  color: var(--bs-gray-300);
+  color: var(--bs-body-color);
   background-color: var(--bs-gray-100);
   border-color: var(--bs-gray-300);
 }
@@ -5160,7 +5161,7 @@ textarea.form-control-lg {
 .valid-feedback {
   display: none;
   width: 100%;
-  margin-top: 0.5rem;
+  margin-top: var(--bs-ref-spacer-1);
   font-size: var(--bs-fs-small);
   color: var(--bs-form-valid-color);
 }
@@ -5171,7 +5172,7 @@ textarea.form-control-lg {
   z-index: 5;
   display: none;
   max-width: 100%;
-  padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
+  padding: var(--bs-ref-spacer-2) var(--bs-ref-spacer-1);
   margin-top: 0.1rem;
   font-size: var(--bs-body-font-size);
   color: var(--bs-white);
@@ -5230,7 +5231,7 @@ textarea.form-control-lg {
 .invalid-feedback {
   display: none;
   width: 100%;
-  margin-top: 0.5rem;
+  margin-top: var(--bs-ref-spacer-1);
   font-size: var(--bs-fs-small);
   color: var(--bs-form-invalid-color);
 }
@@ -5241,7 +5242,7 @@ textarea.form-control-lg {
   z-index: 5;
   display: none;
   max-width: 100%;
-  padding: var(--bs-ref-spacer-1) var(--bs-ref-spacer-2);
+  padding: var(--bs-ref-spacer-2) var(--bs-ref-spacer-1);
   margin-top: 0.1rem;
   font-size: var(--bs-body-font-size);
   color: var(--bs-white);
@@ -6618,9 +6619,9 @@ textarea.form-control-lg {
   --bs-breadcrumb-margin-bottom: 1rem;
   --bs-breadcrumb-bg: ;
   --bs-breadcrumb-border-radius: ;
-  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
+  --bs-breadcrumb-divider-color: var(--bs-body-color);
   --bs-breadcrumb-item-padding-x: 0.5rem;
-  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
+  --bs-breadcrumb-item-active-color: var(--bs-body-color);
   display: flex;
   flex-wrap: wrap;
   padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
@@ -6648,21 +6649,21 @@ textarea.form-control-lg {
   --bs-pagination-padding-x: var(--bs-ref-spacer-1);
   --bs-pagination-padding-y: var(--bs-ref-spacer-1);
   --bs-pagination-font-size: 1rem;
-  --bs-pagination-color: var(--bs-gray);
+  --bs-pagination-color: var(--bs-body-color);
   --bs-pagination-bg: transparent;
   --bs-pagination-border-width: 0;
   --bs-pagination-border-color: var(--bs-border-color);
   --bs-pagination-border-radius: var(--bs-border-radius);
-  --bs-pagination-hover-color: var(--bs-secondary);
-  --bs-pagination-hover-bg: var(--bs-secondary-100);
+  --bs-pagination-hover-color: var(--bs-body-color);
+  --bs-pagination-hover-bg: var(--bs-primary-50);
   --bs-pagination-hover-border-color: 0;
-  --bs-pagination-focus-color: var(--bs-secondary);
-  --bs-pagination-focus-bg: var(--bs-secondary-100);
+  --bs-pagination-focus-color: var(--bs-body-color);
+  --bs-pagination-focus-bg: var(--bs-primary-50);
   --bs-pagination-focus-box-shadow: 0;
   --bs-pagination-active-color: var(--bs-white);
   --bs-pagination-active-bg: var(--bs-primary);
   --bs-pagination-active-border-color: var(--bs-primary);
-  --bs-pagination-disabled-color: var(--bs-gray-400);
+  --bs-pagination-disabled-color: var(--bs-body-color);
   --bs-pagination-disabled-bg: var(--bs-transparent);
   --bs-pagination-disabled-border-color: var(--bs-border-color);
   display: flex;
@@ -6842,11 +6843,11 @@ textarea.form-control-lg {
 .progress-stacked {
   --bs-progress-height: 1rem;
   --bs-progress-font-size: var(--bs-fs-small);
-  --bs-progress-bg: var(--bs-secondary-100);
+  --bs-progress-bg: var(--bs-gray-200);
   --bs-progress-border-radius: var(--bs-border-radius-pill);
   --bs-progress-box-shadow: none;
   --bs-progress-bar-color: var(--bs-white);
-  --bs-progress-bar-bg: var(--bs-secondary);
+  --bs-progress-bar-bg: var(--bs-primary);
   --bs-progress-bar-transition: width 0.6s ease;
   display: flex;
   height: var(--bs-progress-height);
@@ -7351,7 +7352,7 @@ textarea.form-control-lg {
 .modal {
   --bs-modal-zindex: 1055;
   --bs-modal-width: 500px;
-  --bs-modal-padding: var(--bs-ref-spacer-6);
+  --bs-modal-padding: var(--bs-ref-spacer-4);
   --bs-modal-margin: 0.5rem;
   --bs-modal-color: ;
   --bs-modal-bg: var(--bs-white);
@@ -7360,9 +7361,9 @@ textarea.form-control-lg {
   --bs-modal-border-radius: var(--bs-border-radius);
   --bs-modal-box-shadow: var(--bs-box-shadow-sm);
   --bs-modal-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
-  --bs-modal-header-padding-x: var(--bs-ref-spacer-6);
+  --bs-modal-header-padding-x: var(--bs-ref-spacer-4);
   --bs-modal-header-padding-y: var(--bs-ref-spacer-4);
-  --bs-modal-header-padding: var(--bs-ref-spacer-8) var(--bs-ref-spacer-6) var(--bs-ref-spacer-4);
+  --bs-modal-header-padding: var(--bs-ref-spacer-4);
   --bs-modal-header-border-color: transparent;
   --bs-modal-header-border-width: var(--bs-border-width);
   --bs-modal-title-line-height: 1.5;
@@ -7643,8 +7644,8 @@ textarea.form-control-lg {
 .tooltip {
   --bs-tooltip-zindex: 1080;
   --bs-tooltip-max-width: 300px;
-  --bs-tooltip-padding-x: var(--bs-ref-spacer-2);
-  --bs-tooltip-padding-y: var(--bs-ref-spacer-1);
+  --bs-tooltip-padding-x: var(--bs-ref-spacer-1);
+  --bs-tooltip-padding-y: var(--bs-ref-spacer-2);
   --bs-tooltip-margin: ;
   --bs-tooltip-font-size: var(--bs-body-font-size);
   --bs-tooltip-color: var(--bs-body-bg);
@@ -8161,8 +8162,8 @@ textarea.form-control-lg {
   --bs-offcanvas-zindex: 1055;
   --bs-offcanvas-width: 400px;
   --bs-offcanvas-height: 30vh;
-  --bs-offcanvas-padding-x: var(--bs-ref-spacer-6);
-  --bs-offcanvas-padding-y: var(--bs-ref-spacer-6);
+  --bs-offcanvas-padding-x: var(--bs-ref-spacer-4);
+  --bs-offcanvas-padding-y: var(--bs-ref-spacer-4);
   --bs-offcanvas-color: var(--bs-body-color);
   --bs-offcanvas-bg: var(--bs-white);
   --bs-offcanvas-border-width: var(--bs-border-width);
@@ -8898,6 +8899,10 @@ body {
   --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dc3545'/%3e%3c/svg%3e");
 }
 
+.form-check-label {
+  --bs-label-padding-x: var(--bs-ref-spacer-2);
+}
+
 .form-check-input {
   --bs-form-check-input-focus-border-color: var(--bs-focus-ring-border-color);
   --bs-form-check-input-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
@@ -8927,7 +8932,7 @@ body {
 }
 
 .form-text {
-  --bs-form-text-padding: 0 0.5rem;
+  --bs-form-text-padding: 0 0;
   --bs-form-text-gap: var(--bs-ref-spacer-1);
   --bs-form-text-color: var(--bs-body-color);
   display: inline-flex;
@@ -8993,7 +8998,7 @@ body {
   --bs-input-focus-box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
   --bs-input-disabled-border-color: var(--bs-gray-300);
   --bs-input-disabled-bg: var(--bs-gray-100);
-  --bs-input-disabled-color: var(--bs-gray-300);
+  --bs-input-disabled-color: var(--bs-body-color);
   border: var(--bs-input-border-width) solid var(--bs-input-border-color);
   border-radius: var(--bs-input-border-radius);
 }
@@ -9846,7 +9851,7 @@ body {
 }
 
 .progress {
-  --bs-progress-bar-font-weight: var(--bs-fw-bold);
+  --bs-progress-bar-font-weight: var(--bs-fw-normal);
   font-weight: var(--bs-progress-bar-font-weight);
 }
 .progress .progress-bar:not(:empty) {
@@ -9874,42 +9879,36 @@ body {
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-primary);
   --bs-alert-border-color: var(--bs-surface-primary);
-  --bs-alert-link-color: var(--bs-white);
 }
 .alert.alert-secondary {
   --bs-alert-icon-color: var(--bs-secondary-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-secondary);
   --bs-alert-border-color: var(--bs-surface-secondary);
-  --bs-alert-link-color: var(--bs-white);
 }
 .alert.alert-success {
   --bs-alert-icon-color: var(--bs-success-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-success);
   --bs-alert-border-color: var(--bs-surface-success);
-  --bs-alert-link-color: var(--bs-white);
 }
 .alert.alert-info {
   --bs-alert-icon-color: var(--bs-info-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-info);
   --bs-alert-border-color: var(--bs-surface-info);
-  --bs-alert-link-color: var(--bs-white);
 }
 .alert.alert-warning {
   --bs-alert-icon-color: var(--bs-warning-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-warning);
   --bs-alert-border-color: var(--bs-surface-warning);
-  --bs-alert-link-color: var(--bs-gray-700);
 }
 .alert.alert-danger {
   --bs-alert-icon-color: var(--bs-danger-500);
   --bs-alert-color: var(--bs-body-color);
   --bs-alert-bg: var(--bs-surface-danger);
   --bs-alert-border-color: var(--bs-surface-danger);
-  --bs-alert-link-color: var(--bs-white);
 }
 
 .collapse-container {
@@ -9962,12 +9961,20 @@ body {
 .pagination {
   --bs-pagination-page-item-size: 2rem;
   --bs-pagination-border-radius: 2rem;
+  --bs-pagination-page-control-color: var(--bs-primary);
+  --bs-pagination-page-control-disabled-color: var(--bs-primary-200);
   margin: 0;
 }
 .pagination .page-item {
   min-width: var(--bs-pagination-page-item-size);
   min-height: var(--bs-pagination-page-item-size);
 }
+.pagination :is(.page-item:first-child, .page-item:last-child):not(.disabled) .page-link {
+  color: var(--bs-pagination-page-control-color);
+}
+.pagination :is(.page-item:first-child, .page-item:last-child).disabled .page-link {
+  color: var(--bs-pagination-page-control-disabled-color);
+}
 .pagination .page-link {
   display: flex;
   align-items: center;
@@ -10007,6 +10014,7 @@ label {
   gap: var(--bs-ref-spacer-1);
   align-items: center;
   padding: var(--bs-label-padding-y) var(--bs-label-padding-x);
+  margin-bottom: var(--bs-label-margin-bottom);
   font-size: var(--bs-label-font-size);
   font-weight: var(--bs-label-font-weight);
   color: var(--bs-label-color);
@@ -10235,8 +10243,8 @@ label .d-icon {
 }
 
 .tooltip {
-  --bs-tooltip-sm-font-size: var(--bs-fs-small);
-  --bs-tooltip-lg-font-size: var(--bs-fs-6);
+  --bs-tooltip-sm-font-size: var(--bs-fs-body-small);
+  --bs-tooltip-lg-font-size: var(--bs-fs-body-medium);
   fill: var(--bs-tooltip-bg);
 }
 .tooltip.tooltip-sm {
@@ -10721,11 +10729,11 @@ label .d-icon {
 }
 
 .modal {
-  --bs-modal-header-gap: var(--bs-ref-spacer-6);
-  --bs-modal-footer-padding: var(--bs-ref-spacer-6);
-  --bs-modal-separator-margin-x: var(--bs-ref-spacer-6);
+  --bs-modal-header-gap: var(--bs-ref-spacer-4);
+  --bs-modal-footer-padding: var(--bs-ref-spacer-4);
+  --bs-modal-separator-margin-x: var(--bs-ref-spacer-4);
   --bs-modal-separator-height: 1px;
-  --bs-modal-separator-bg: var(--bs-gray-200);
+  --bs-modal-separator-bg: var(--bs-gray-100);
 }
 .modal .modal-header {
   flex-direction: row;
@@ -10763,8 +10771,11 @@ label .d-icon {
 }
 
 .offcanvas {
-  --bs-offcanvas-header-gap: var(--bs-ref-spacer-6);
-  --bs-offcanvas-footer-gap: var(--bs-ref-spacer-6);
+  --bs-offcanvas-header-gap: var(--bs-ref-spacer-4);
+  --bs-offcanvas-footer-gap: var(--bs-ref-spacer-4);
+  --bs-offcanvas-separator-margin-x: var(--bs-ref-spacer-4);
+  --bs-offcanvas-separator-height: 1px;
+  --bs-offcanvas-separator-bg: var(--bs-gray-100);
 }
 .offcanvas .offcanvas-header {
   flex-direction: row;
@@ -10775,8 +10786,13 @@ label .d-icon {
 .offcanvas .offcanvas-header:has(.d-offcanvas-close:only-child) {
   justify-content: flex-end;
 }
+.offcanvas .d-offcanvas-separator {
+  height: var(--bs-offcanvas-separator-height);
+  margin: 0 var(--bs-offcanvas-separator-margin-x);
+  background: var(--bs-offcanvas-separator-bg);
+}
 .offcanvas .offcanvas-body {
-  padding: 0 var(--bs-offcanvas-padding-x);
+  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
 }
 .offcanvas .d-offcanvas-footer {
   display: flex;
@@ -12399,12 +12415,12 @@ label .d-icon {
   --bs-step-icon-container-border-width: 1px;
   --bs-step-icon-container-border-color: var(--bs-secondary);
   --bs-step-icon-container-border-radius: 100%;
-  --bs-step-icon-container-z-index: 3;
+  --bs-step-icon-container-z-index: 1;
   /* Base step */
   --bs-step-label-height: var(--bs-ref-spacer-12);
   --bs-step-icon-size: var(--bs-ref-spacer-6);
   --bs-step-gap: var(--bs-ref-spacer-2);
-  --bs-step-z-index: 2;
+  --bs-step-z-index: 0;
   /* Checked step */
   --bs-step-check-text-color: var(--bs-white);
   --bs-step-check-background-color: var(--bs-success);
@@ -12416,8 +12432,10 @@ label .d-icon {
   --bs-step-line-stroke: 1px;
   --bs-step-line-color: var(--bs-secondary);
   /* Step label */
-  --bs-step-label-padding: var(--bs-ref-spacer-6);
+  --bs-step-label-padding: var(--bs-ref-spacer-4);
   --bs-step-vertical-label-padding: var(--bs-ref-spacer-4);
+  --bs-step-label-font-size: var(--bs-body-font-size);
+  --bs-step-description-font-size: var(--bs-fs-body-tiny);
   position: relative;
   display: flex;
 }
@@ -12475,11 +12493,21 @@ label .d-icon {
   z-index: var(--bs-step-z-index);
   width: 50%;
 }
-.d-stepper-desktop .d-step .d-step-label {
+.d-stepper-desktop .d-step .d-step-text-container {
   padding-right: var(--bs-step-label-padding);
   padding-left: var(--bs-step-label-padding);
   text-align: center;
 }
+.d-stepper-desktop .d-step .d-step-text-container .d-step-label {
+  font-size: var(--bs-step-label-font-size);
+}
+.d-stepper-desktop .d-step .d-step-text-container .d-step-description {
+  font-size: var(--bs-step-description-font-size);
+}
+.d-stepper-desktop.is-align-start .d-step-text-container {
+  text-align: left;
+  transform: translateX(calc(50% - var(--bs-step-icon-container-size) / 2 - var(--bs-step-label-padding)));
+}
 .d-stepper-desktop.is-vertical {
   flex-direction: column;
 }
@@ -12491,12 +12519,15 @@ label .d-icon {
   align-items: center;
   height: 100%;
 }
-.d-stepper-desktop.is-vertical .d-step .d-step-label {
+.d-stepper-desktop.is-vertical .d-step .d-step-text-container {
   display: flex;
+  flex-direction: column;
   flex-grow: 1;
-  align-items: center;
+  align-items: flex-start;
   min-height: var(--bs-step-label-height);
   padding: var(--bs-step-vertical-label-padding);
+}
+.d-stepper-desktop.is-vertical .d-step .d-step-label {
   text-align: left;
 }
 .d-stepper-desktop.is-vertical .d-step .d-step-value::after {
@@ -12533,20 +12564,20 @@ label .d-icon {
   --bs-step-progress-outter-size: 62px;
   --bs-step-progress-outter-z-index: 1;
   --bs-step-progress-outter-fill-background-color: var(--bs-secondary-500);
-  --bs-step-progress-outter-background-color: var(--bs-gray-300);
+  --bs-step-progress-outter-background-color: var(--bs-secondary-100);
   /* Inner circle */
   --bs-step-progress-inner-size: 50px;
   --bs-step-progress-inner-z-index: 2;
   --bs-step-progress-inner-background-color: var(--bs-white);
   /* Current step */
   --bs-step-current-step-z-index: 3;
-  --bs-step-current-step-font-weight: var(--bs-fw-bold);
-  --bs-step-current-step-color: var(--bs-gray-700);
+  --bs-step-current-step-font-weight: var(--bs-fw-normal);
+  --bs-step-current-step-color: var(--bs-secondary-500);
   /* Info circle */
   --bs-step-info-max-width: 12rem;
-  --bs-step-info-label-font-size: var(--bs-fs-6);
-  --bs-step-info-description-font-size: var(--bs-fs-small);
-  --bs-step-info-description-color: var(--bs-gray-500);
+  --bs-step-info-label-font-size: var(--bs-body-font-size);
+  --bs-step-info-description-font-size: var(--bs-fs-body-tiny);
+  --bs-step-info-description-color: var(--bs-body-color);
   display: flex;
   gap: var(--bs-step-container-gap);
   align-items: center;
@@ -12605,7 +12636,7 @@ label .d-icon {
 
 .d-select {
   --bs-select-gap: 0.5rem;
-  --bs-select-menu-shadow: 0 8px 12px 0 rgba(21, 21, 26, 0.05);
+  --bs-select-menu-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
   --bs-select-menu-z-index: 1000;
   --bs-select-option-focus-bg: var(--bs-gray-100);
   --bs-select-option-selected-color: var(--bs-secondary);