@dynamic-framework/ui-react 2.0.0-dev.1 → 2.0.0-dev.3

package/src/style/base/_buttons.scss

@@ -16,10 +16,11 @@
   --#{$prefix}btn–text-decoration: #{if($link-decoration == none, null, none)};
   --#{$prefix}btn-lg-padding-y: #{$btn-padding-y-lg};
   --#{$prefix}btn-lg-padding-x: #{$btn-padding-x-lg};
-  --#{$prefix}btn-lg-font-size: #{$btn-font-size-lg};
+  --#{$prefix}btn-lg-font-size: #{$btn-lg-font-size};
   --#{$prefix}btn-sm-padding-y: #{$btn-padding-y-sm};
   --#{$prefix}btn-sm-padding-x: #{$btn-padding-x-sm};
   --#{$prefix}btn-sm-font-size: #{$btn-font-size-sm};
+  --#{$prefix}btn-box-shadow: #{btn-box-shadow};
 
   display: inline-flex;
   flex-direction: row;
@@ -28,7 +29,6 @@
   justify-content: center;
   padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
   font-family: var(--#{$prefix}btn-font-family);
-  @include font-size(var(--#{$prefix}btn-font-size));
   font-weight: var(--#{$prefix}btn-font-weight);
   line-height: var(--#{$prefix}btn-line-height);
   color: var(--#{$prefix}btn-color);
@@ -40,6 +40,8 @@
   user-select: none;
   border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
   border-radius: var(--#{$prefix}btn-border-radius);
+  box-shadow: var(--#{$prefix}btn-box-shadow);
+  @include font-size(var(--#{$prefix}btn-font-size));
   @include gradient-bg(var(--#{$prefix}btn-bg));
   @include box-shadow(var(--#{$prefix}btn-box-shadow));
   @include transition($btn-transition);
@@ -147,15 +149,150 @@
     @include df-button-variant-mapper($color);
   }
 
-  .btn-outline-#{$color} {
-    @include df-button-variant-mapper($color, "outline");
-  }
-
   .btn-link-#{$color} {
     @include df-button-variant-mapper($color, "link");
   }
 }
 
+
+.btn-outline-primary {
+  --#{$prefix}btn-color: var(--#{$prefix}primary-500);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}primary-700);
+  --#{$prefix}btn-border-color: var(--#{$prefix}primary-500);
+  --#{$prefix}btn-active-color: var(--#{$prefix}primary-500);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}primary-600);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}primary-700);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}primary-600);
+  --#{$prefix}btn-active-color: var(--#{$prefix}primary-600);
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-primary-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}primary-500);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}primary-500);
+  }
+}
+
+.btn-outline-secondary {
+  --#{$prefix}btn-color: var(--#{$prefix}secondary-700);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}secondary-400);
+  --#{$prefix}btn-border-color: var(--#{$prefix}secondary-200);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}secondary-400);
+  --#{$prefix}btn-active-color: var(--#{$prefix}secondary-700);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}secondary-700);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}secondary-700);
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-secondary-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}secondary-200);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}secondary-600);
+  }
+}
+
+.btn-outline-light {
+  --#{$prefix}btn-color: var(--#{$prefix}gray-25);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}gray-25);
+  --#{$prefix}btn-border-color: var(--#{$prefix}gray-25);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}gray-50);
+  --#{$prefix}btn-active-color: var(--#{$prefix}gray-50);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}gray-50);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}gray-50);
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-light-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}gray-25);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}gray-25);
+    opacity: var(--#{$prefix}btn-disabled-opacity);
+  }
+}
+
+.btn-outline-success {
+  --#{$prefix}btn-color: var(--#{$prefix}success-500);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}success-700);
+  --#{$prefix}btn-border-color: var(--#{$prefix}success-500);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}success-600);
+  --#{$prefix}btn-active-color: var(--#{$prefix}success-700);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}success-700);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}success-700);
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-success-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}success-500);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}success-500);
+  }
+}
+
+.btn-outline-danger {
+  --#{$prefix}btn-color: var(--#{$prefix}danger-500);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}danger-700);
+  --#{$prefix}btn-border-color: var(--#{$prefix}danger-500);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}danger-600);
+  --#{$prefix}btn-active-color: var(--#{$prefix}danger-700);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}danger-700);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}danger-700);
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-danger-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-active-border-color: var(--#{$prefix}danger-500);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}danger-500);
+  }
+}
+
+.btn-outline-info {
+  --#{$prefix}btn-color: var(--#{$prefix}info-500);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}info-700);
+  --#{$prefix}btn-border-color: var(--#{$prefix}info-500);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}info-600);
+  --#{$prefix}btn-active-color: var(--#{$prefix}info-700);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}info-700);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}info-700);
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-info-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}info-500);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}info-500);
+  }
+}
+
+.btn-outline-warning {
+  --#{$prefix}btn-color: var(--#{$prefix}warning-600);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}warning-700);
+  --#{$prefix}btn-border-color: var(--#{$prefix}warning-500);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}warning-600);
+  --#{$prefix}btn-active-color: var(--#{$prefix}warning-700);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}warning-700);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}warning-700);
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-warning-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}warning-500);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}warning-600);
+  }
+}
+
+.btn-outline-dark {
+  --#{$prefix}btn-color: var(--#{$prefix}black);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}black);
+  --#{$prefix}btn-border-color: var(--#{$prefix}black);
+  --#{$prefix}btn-active-border-color: var(--#{$prefix}black);
+  --#{$prefix}btn-active-color: var(--#{$prefix}black);
+  --#{$prefix}btn-hover-color: var(--#{$prefix}black);
+  --#{$prefix}btn-focus-color: var(--#{$prefix}black);
+  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
+  --#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}btn-dark-focus-shadow-rgb);
+  &:disabled,
+  &.disabled {
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}black);
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}black);
+  }
+}
+
 .btn-lg {
   @include button-size(
     var(--#{$prefix}btn-lg-padding-y),
@@ -177,8 +314,9 @@
 [class*="btn-link-"] {
   --#{$prefix}btn-text-decoration: var(--#{$prefix}link-decoration);
 
+  &.hover,
   &:hover {
-    --#{$prefix}btn-text-decoration: underline;
+    background: rgba(0, 0, 0, .03);
   }
 
   @if $enable-gradients {
@@ -192,40 +330,28 @@
 
 // Make a button look and behave like a link
 .btn-link {
-  --#{$prefix}btn-font-weight: #{$font-weight-normal};
   --#{$prefix}btn-color: #{$btn-link-color};
   --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-color: transparent;
-  --#{$prefix}btn-hover-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-hover-color: #{$btn-link-color};
   --#{$prefix}btn-hover-border-color: transparent;
-  --#{$prefix}btn-active-color: #{$btn-link-hover-color};
+  --#{$prefix}btn-active-color: #{$btn-link-color};
   --#{$prefix}btn-active-border-color: transparent;
   --#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
   --#{$prefix}btn-disabled-border-color: transparent;
   --#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
   --#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
+  --#{$prefix}btn-box-shadow: none;
 
   text-decoration: $link-decoration;
   @if $enable-gradients {
     background-image: none;
   }
 
-  &.hover,
-  &:hover,
-  &.focus-visible,
-  &:focus-visible {
-    text-decoration: $link-hover-decoration;
-  }
-
   &.focus-visible,
   &:focus-visible {
     color: var(--#{$prefix}btn-color);
   }
 
-  &.hover,
-  &:hover {
-    color: var(--#{$prefix}btn-hover-color);
-  }
-
   // No need for an active state here
 }

package/src/style/base/_dropdown.scss

@@ -1,3 +1,21 @@
+// .dropdown-item {
+//   --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
+// }
+
 .dropdown-item {
   --#{$prefix}dropdown-item-border-radius: #{$dropdown-item-border-radius};
+  --#{$prefix}dropdown-item-active-bg: var(--#{$prefix}gray-25);
+  --#{$prefix}dropdown-item-active-color: inherit;
+  &:active {
+    color: var(--#{$prefix}dropdown-item-active-color);
+    background-color: var(--#{$prefix}dropdown-item-active-bg);
+  }
+  &.dropdown-item-danger {
+    color: var(--#{$prefix}danger-500);
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: var(--#{$prefix}danger-25);
+    }
+  }
 }

package/src/style/base/_input-group.scss

@@ -65,6 +65,7 @@
   --#{$prefix}input-disabled-border-color: #{$input-disabled-border-color};
   --#{$prefix}input-disabled-bg: #{$input-disabled-bg};
   --#{$prefix}input-disabled-color: #{$input-disabled-color};
+  --#{$prefix}btn-group-text-color: #{$gray-400};
 
   // input group icon sizes
   --#{$prefix}input-group-sm-icon-size: #{$input-group-sm-icon-size};
@@ -137,3 +138,7 @@
     margin: -1px;
   }
 }
+
+.input-group-text {
+  color: var(--#{$prefix}btn-group-text-color);
+}

package/src/style/base/_list-group.scss

@@ -0,0 +1,6 @@
+.list-group-item {
+  --#{$prefix}list-group-item-gap: .75rem;
+  display: flex;
+  gap: var(--#{$prefix}list-group-item-gap);
+  align-items: center;
+}

package/src/style/base/_pagination.scss

@@ -3,6 +3,7 @@
   --#{$prefix}pagination-border-radius: #{$pagination-page-border-radius};
   --#{$prefix}pagination-page-control-color: #{$pagination-page-control-color};
   --#{$prefix}pagination-page-control-disabled-color: #{$pagination-page-control-disabled-color};
+  gap: var(--#{$prefix}ref-spacer-1);
   margin: 0;
 
   .page-item {
@@ -26,6 +27,7 @@
     justify-content: center;
     width: 100%;
     height: 100%;
+    padding-inline: .5rem;
     border-radius: var(--#{$prefix}pagination-border-radius);
   }
 

package/src/style/base/_tables.scss

@@ -52,6 +52,10 @@
   border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color;
 }
 
+th {
+  font-weight: var(--#{$prefix}fw-semibold);
+}
+
 //
 // Change placement of captions with a class
 //

package/src/style/base/_tooltip.scss

@@ -2,7 +2,7 @@
   --#{$prefix}tooltip-sm-font-size: #{$tooltip-font-size-sm};
   --#{$prefix}tooltip-lg-font-size: #{$tooltip-font-size-lg};
 
-  fill: var(--#{$prefix}tooltip-bg);
+  // fill: var(--#{$prefix}tooltip-bg);
 
   &.tooltip-sm {
     --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-sm-font-size);
@@ -11,13 +11,4 @@
   &.tooltip-lg {
     --#{$prefix}tooltip-font-size: var(--#{$prefix}tooltip-lg-font-size);
   }
-
-  @each $theme, $value in $theme-colors {
-    $color: color-contrast-var($value);
-
-    &.tooltip-#{$theme} {
-      --#{$prefix}tooltip-color: #{$color};
-      --#{$prefix}tooltip-bg: var(--#{$prefix}#{$theme});
-    }
-  }
 }

package/src/style/components/_+import.scss

@@ -2,12 +2,11 @@
 @import "d-icon";
 @import "d-input-pin";
 @import "d-button-icon";
-@import "d-quick-action-button";
-@import "d-quick-action-select";
-@import "d-quick-action-check";
-@import "d-quick-action-switch";
 @import "d-chip";
+@import "d-tabs";
 @import "d-modal";
+@import "d-timeline";
+@import "d-box";
 @import "d-offcanvas";
 @import "d-collapse-icon-text";
 @import "d-datepicker";
@@ -22,3 +21,4 @@
 @import "d-select";
 @import "d-table-head";
 @import "d-input-phone";
+@import "d-credit-card";

package/src/style/components/_d-avatar.scss

@@ -1,8 +1,8 @@
 .d-avatar {
   --#{$prefix}avatar-border: 1px solid var(--#{$prefix}avatar-bg);
   --#{$prefix}avatar-size: var(--#{$prefix}ref-spacer-12);
-  --#{$prefix}avatar-bg: var(--#{$prefix}secondary-100);
-  --#{$prefix}avatar-color: var(--#{$prefix}secondary-500);
+  --#{$prefix}avatar-bg: var(--#{$prefix}gray-100);
+  --#{$prefix}avatar-color: var(--#{$prefix}gray-500);
   --#{$prefix}avatar-font-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}avatar-border-radius: var(--#{$prefix}border-radius-pill);
 
@@ -33,24 +33,6 @@
     background-color: var(--#{$prefix}avatar-bg);
     border-radius: var(--#{$prefix}avatar-border-radius);
   }
-
-  @each $theme, $value in map-remove($theme-colors, "light", "dark") {
-    $color: color-contrast($value);
-    &.d-avatar-#{$theme} {
-      --#{$prefix}avatar-color: var(--#{$prefix}#{$theme}-500);
-      --#{$prefix}avatar-bg: var(--#{$prefix}#{$theme}-100);
-    }
-
-    &.d-avatar-dark-#{$theme} {
-      --#{$prefix}avatar-color: var(--#{$prefix}white);
-      --#{$prefix}avatar-bg: var(--#{$prefix}#{$theme}-500);
-    }
-
-    &.d-avatar-light-#{$theme} {
-      --#{$prefix}avatar-color: var(--#{$prefix}#{$theme}-500);
-      --#{$prefix}avatar-bg: var(--#{$prefix}white);
-    }
-  }
 }
 
 .d-avatar-xs {

package/src/style/components/_d-box.scss

@@ -0,0 +1,13 @@
+.d-box {
+  --#{$prefix}box-bg: #{var(--#{$prefix}white)};
+  --#{$prefix}box-border: 0;
+  --#{$prefix}box-border-radius: #{var(--#{$prefix}border-radius)};
+  --#{$prefix}box-padding: #{var(--#{$prefix}ref-spacer-4)};
+  --#{$prefix}box-shadow: #{var(--#{$prefix}box-shadow-lg)};
+  padding: var(--#{$prefix}box-padding);
+
+  background-color: var(--#{$prefix}box-bg);
+  border: var(--#{$prefix}box-border);
+  border-radius: var(--#{$prefix}box-border-radius);
+  box-shadow: var(--#{$prefix}box-shadow);
+}

package/src/style/components/_d-carousel.scss

@@ -1,5 +1,5 @@
 @import "node_modules/@splidejs/splide/src/css/template/default/index";
-
+// stylelint-disable
 .d-carousel {
   // Arrows
   --#{$prefix}carousel-arrow-space: calc(var(--#{$prefix}ref-spacer-4) * -1);
@@ -19,8 +19,26 @@
     }
   }
 
+  .splide__pagination__page {
+    margin: 0;
+  }
+
   .d-carousel-pagination {
     bottom: var(--#{$prefix}carousel-pagination-bottom);
+    position: relative;
+    bottom: auto;
+    top: -0.5rem;
+    width: fit-content;
+    background: var(--#{$prefix}gray-25);
+    padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-4);
+    border-radius: var(--#{$prefix}border-radius-lg);
+    margin: auto;
+    gap: var(--#{$prefix}ref-spacer-2);
+
+    li {
+      margin: 0;
+      display: flex;
+    }
 
     .d-carousel-pagination-page {
       background-color: var(--#{$prefix}carousel-pagination-page-bg);

package/src/style/components/_d-credit-card.scss

@@ -0,0 +1,67 @@
+.d-credit-card {
+  --#{$prefix}d-credit-card-bg:
+    radial-gradient(circle at 25% 10%, rgba(255, 255, 255, .12), transparent 18%), linear-gradient(
+      135deg,
+      #ff9a8b 0%,
+      #ffb199 12%,
+      #caa6ff 40%,
+      #7aa7ff 65%,
+      #39e6d6 100%
+    );
+  --#{$prefix}d-credit-card-aspect-ratio: 16/9;
+  --#{$prefix}d-credit-card-chip-bg: rgba(255, 255, 255, .12);
+  --#{$prefix}d-credit-card-font-family-number: var(--#{$prefix}font-monospace);
+  --#{$prefix}d-credit-card-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}d-credit-card-number-size: inherit;
+  --#{$prefix}d-credit-card-chip-size: 30px;
+  flex-direction: column;
+
+  aspect-ratio: var(--#{$prefix}d-credit-card-aspect-ratio);
+  padding: var(--#{$prefix}d-credit-card-padding);
+  background: var(--#{$prefix}d-credit-card-bg);
+  --#{$prefix}d-credit-card-logo-size: 22%;
+
+  > * {
+    display: flex;
+    align-items: center;
+  }
+
+  .d-credit-card-details {
+    .name {
+      font-size: var(--#{$prefix}ref-fs-6);
+    }
+    .date {
+      font-size: var(--#{$prefix}ref-fs-6);
+    }
+  }
+
+  .d-credit-card-logo {
+    width: var(--#{$prefix}d-credit-card-logo-size);
+  }
+
+  .d-credit-card-chip {
+    background: var(--#{$prefix}d-credit-card-chip-bg);
+  }
+
+  .d-credit-card-chip-image {
+    width: var(--#{$prefix}d-credit-card-chip-size);
+  }
+
+  .d-credit-card-number {
+    font-family: var(--#{$prefix}d-credit-card-font-family-number);
+    font-size: var(--#{$prefix}d-credit-card-number-size);
+  }
+
+  &.is-vertical {
+    --#{$prefix}d-credit-card-aspect-ratio: 9/16;
+    --#{$prefix}d-credit-card-number-size: var(--#{$prefix}ref-spacer-3);
+    --#{$prefix}d-credit-card-logo-size: 30%;
+  }
+
+  .d-credit-card-header {
+    align-items: center;
+    justify-content: space-between;
+    min-height: 45px;
+  }
+
+}

package/src/style/components/_d-datepicker.scss

@@ -74,9 +74,12 @@
   --#{$prefix}datepicker-in-range-disabled-bg: #{$datepicker-in-range-disabled-bg};
 
   // Time
-  --#{$prefix}datepicker-time-list-item-width: 85px;
+  --#{$prefix}datepicker-time-list-item-width: #{$datepicker-time-list-item-width};
   --#{$prefix}datepicker-time-list-item-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-1);
 
+  // Top
+  --#{$prefix}datepicker-top-header-bg: var(--#{$prefix}primary-500);
+
 
   background-color: var(--#{$prefix}datepicker-bg);
   border: var(--#{$prefix}datepicker-border);
@@ -85,6 +88,10 @@
   display: inline-block;
   position: relative;
   line-height: initial;
+  overflow: hidden;
+  p {
+    font-weight: 500;
+  }
 }
 
 .react-datepicker--time-only {
@@ -102,27 +109,10 @@
 .react-datepicker-popper {
   z-index: 1;
   line-height: 0;
+}
 
-  .react-datepicker__triangle {
-    --#{$prefix}datepicker-border-color: var(--#{$prefix}gray-100);
-    stroke: var(--#{$prefix}datepicker-border-color);
-  }
-
-  &[data-placement^="bottom"] {
-    .react-datepicker__triangle {
-      --#{$prefix}datepicker-header-bg: var(--#{$prefix}secondary-soft);
-      fill: var(--#{$prefix}datepicker-header-bg);
-      color: var(--#{$prefix}datepicker-header-bg);
-    }
-  }
-
-  &[data-placement^="top"] {
-    .react-datepicker__triangle {
-      --#{$prefix}datepicker-header-bg: var(--#{$prefix}white);
-      fill: var(--#{$prefix}datepicker-header-bg);
-      color: var(--#{$prefix}datepicker-header-bg);
-    }
-  }
+.react-datepicker__triangle {
+  display: none;
 }
 
 .react-datepicker__header {
@@ -147,6 +137,13 @@
     border-top-right-radius: var(--#{$prefix}datepicker-border-radius);
   }
 
+  .custom-year-selector {
+    width: 6ch;
+    background: none;
+    color: var(--#{$prefix}white);
+    border: 0;
+  }
+
   &-selector {
     display: flex;
     align-items: center;
@@ -179,15 +176,11 @@
           }
         }
       }
-
-      &.custom-year-selector .d-select__single-value {
-        width: 4ch;
-      }
     }
 
     p {
       margin: 0;
-      font-weight: bold;
+      font-weight: 500;
     }
 
     .header-button:first-child {
@@ -237,6 +230,7 @@
 
 .react-datepicker__year {
   margin: var(--#{$prefix}datepicker-body-margin);
+  padding: 1rem;
   text-align: center;
 
   &-wrapper {
@@ -252,6 +246,34 @@
   }
 }
 
+.react-datepicker__month {
+  padding: 1rem;
+}
+
+.react-datepicker__header--custom,
+.react-datepicker__header-month-selector {
+  padding-top: .5rem;
+  padding-bottom: .5rem;
+}
+
+.react-datepicker__month-text--selected {
+  font-weight: var(--#{$prefix}fw-semibold);
+}
+
+.datepicker-top-header {
+  background: var(--#{$prefix}primary-500);
+  color: var(--#{$prefix}white);
+  padding: 1rem;
+  margin-bottom: 1rem;
+  margin-top: -.5rem;
+}
+
+.react-datepicker__year,
+.react-datepicker__quarterPicker {
+  --#{$prefix}datepicker-body-gap: 1rem;
+  --#{$prefix}datepicker-body-margin: 1rem;
+}
+
 .react-datepicker__month,
 .react-datepicker__quarter {
   margin: var(--#{$prefix}datepicker-body-margin);
@@ -277,6 +299,22 @@
     width: 6ch;
   }
 }
+
+.react-datepicker__month-text,
+.react-datepicker__quarter-text,
+.react-datepicker__year-text {
+  padding: .25rem;
+  border: 1px solid var(--#{$prefix}gray-50);
+  border-radius: var(--#{$prefix}datepicker-border-radius);
+}
+
+
+.react-datepicker__month-text--today,
+.react-datepicker__year-text--today,
+.react-datepicker__quarter-text--today {
+  font-weight: var(--#{$prefix}fw-semibold) !important;
+}
+
 // START TODO: Revisar con Mati diseño del time
 .react-datepicker__time-container {
   float: right;

package/src/style/components/_d-icon.scss

@@ -8,13 +8,20 @@
   display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
   align-items: center;
   justify-content: center;
-  width: var(--#{$prefix}icon-size);
-  height: var(--#{$prefix}icon-size);
   padding: var(--#{$prefix}icon-padding);
   font-size: var(--#{$prefix}icon-size) !important; /* stylelint-disable-line declaration-no-important */
+  line-height: 1;
   color: var(--#{$prefix}icon-color);
   background-color: var(--#{$prefix}icon-bg-color);
-  border-radius: var(--#{$prefix}icon-padding);
+  border-radius: calc(var(--bs-icon-padding) * 4);
+
+  // For Lucide icons (SVG)
+  svg {
+    display: block;
+    width: var(--#{$prefix}icon-size);
+    height: var(--#{$prefix}icon-size);
+    color: var(--#{$prefix}icon-color);
+  }
 }
 
 .d-icon-loading {

package/src/style/components/_d-modal.scss

@@ -25,6 +25,9 @@
   .modal-footer {
     gap: var(--#{$prefix}modal-footer-gap);
     padding: var(--#{$prefix}modal-footer-padding);
+    > * {
+      margin: 0;
+    }
   }
 
   .d-modal-action-fill > * {