@dynamic-framework/ui-react 1.19.0 → 1.20.0

package/dist/types/components/DDatePicker/DDatePicker.d.ts

@@ -1,11 +1,11 @@
 import type { Locale } from 'date-fns';
 import type { ReactDatePickerProps } from 'react-datepicker';
 import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps } from '../interface';
-type Props<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = BaseProps & FamilyIconProps & Omit<ReactDatePickerProps<CustomModifierNames, WithRange>, 'selected' | 'selectsRange' | 'locale'> & {
+type Props<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = BaseProps & FamilyIconProps & Pick<ReactDatePickerProps<CustomModifierNames, WithRange>, 'formatWeekDay' | 'onChange' | 'autoFocus' | 'inline' | 'withPortal' | 'minDate' | 'showTimeInput' | 'calendarStartDay' | 'dateFormat' | 'selectsStart' | 'selectsEnd' | 'startDate' | 'endDate' | 'fixedHeight'> & {
     date?: string | null;
-    withMonthSelector?: boolean;
     selectsRange?: boolean;
     inputLabel?: string;
+    inputHint?: string;
     inputAriaLabel?: string;
     inputActionAriaLabel?: string;
     iconInput?: string;
@@ -14,12 +14,16 @@ type Props<CustomModifierNames extends string = never, WithRange extends boolean
     timeLabel?: string;
     iconHeaderPrevMonth?: string;
     iconHeaderNextMonth?: string;
+    iconHeaderSize?: ComponentSize;
     headerPrevMonthAriaLabel?: string;
     headerNextMonthAriaLabel?: string;
-    headerIconSize?: ComponentSize;
     headerButtonVariant?: ButtonVariant;
     headerButtonTheme?: string;
     locale?: Locale;
+    minYearSelect?: number;
+    maxYearSelect?: number;
+    invalid?: boolean;
+    valid?: boolean;
 };
-export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, withMonthSelector, inputLabel, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerIconSize, headerButtonVariant, headerButtonTheme, locale, className, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
+export default function DDatePicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ date, selectsRange, inputLabel, inputHint, inputAriaLabel, inputActionAriaLabel, inputId, timeId, timeLabel, iconInput: iconInputProp, iconHeaderPrevMonth: iconHeaderPrevMonthProp, iconHeaderNextMonth: iconHeaderNextMonthProp, iconMaterialStyle: iconMaterialStyleProp, iconFamilyClass, iconFamilyPrefix, minYearSelect, maxYearSelect, iconHeaderSize, headerPrevMonthAriaLabel, headerNextMonthAriaLabel, headerButtonVariant, headerButtonTheme, invalid, valid, locale, className, formatWeekDay: formatWeekDayProp, style, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DDatePickerHeader/DDatePickerHeader.d.ts

@@ -3,14 +3,13 @@ import DButton from '../DButton';
 import type { BaseProps, ButtonVariant, ComponentSize, FamilyIconProps } from '../interface';
 type Props = BaseProps & FamilyIconProps & {
     locale?: Locale;
-    monthDate: Date;
+    date: Date;
     decreaseMonth: () => void;
     increaseMonth: () => void;
     changeMonth: (monthNumber: number) => void;
     changeYear: (yearNumber: number) => void;
     prevMonthButtonDisabled: boolean;
     nextMonthButtonDisabled: boolean;
-    withMonthSelector: boolean;
     iconPrevMonth: string;
     iconNextMonth: string;
     prevMonthAriaLabel?: string;
@@ -18,6 +17,8 @@ type Props = BaseProps & FamilyIconProps & {
     iconSize: ComponentSize;
     buttonVariant: ButtonVariant;
     buttonTheme: string;
-} & Omit<ComponentProps<typeof DButton>, 'iconStart' | 'onMClick' | 'isDisabled'>;
-export default function DDatePickerHeader({ monthDate, changeMonth, changeYear, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, withMonthSelector, iconPrevMonth, iconNextMonth, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel, nextMonthAriaLabel, iconSize, buttonVariant, buttonTheme, locale, style, className, }: Props): import("react/jsx-runtime").JSX.Element;
+    minYearSelect: number;
+    maxYearSelect: number;
+} & Omit<ComponentProps<typeof DButton>, 'iconStart' | 'onClick' | 'disabled'>;
+export default function DDatePickerHeader({ date, changeYear, changeMonth, decreaseMonth, increaseMonth, prevMonthButtonDisabled, nextMonthButtonDisabled, iconPrevMonth, iconNextMonth, iconFamilyClass, iconFamilyPrefix, iconMaterialStyle, prevMonthAriaLabel, nextMonthAriaLabel, iconSize, buttonVariant, buttonTheme, locale, style, className, minYearSelect, maxYearSelect, }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/components/DDatePickerInput/DDatePickerInput.d.ts

@@ -4,6 +4,7 @@ import type { BaseProps } from '../interface';
 type Props = BaseProps & {
     value?: string;
     onClick?: () => void;
-} & Omit<ComponentProps<typeof DInput>, 'type' | 'isReadOnly' | 'onIconEndClick' | 'value'>;
+    inputLabel?: string;
+} & Omit<ComponentProps<typeof DInput>, 'type' | 'onIconEndClick' | 'value'>;
 declare const ForwardedDDatePickerInput: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export default ForwardedDDatePickerInput;

package/dist/types/contexts/index.d.ts

@@ -1,2 +1,2 @@
 export * from './DContext';
-export * from './DPortalContext';
+export { useDPortalContext, PortalProps } from './DPortalContext';

package/dist/types/hooks/useStackState.d.ts

@@ -6,7 +6,7 @@
  * @returns The list and controls to modify the stack
  * @see https://react-hooks.org/docs/useStackState
  */
-export default function useStackState<T>(initialList: T[]): [
+export default function useStackState<T>(initialList?: T[]): [
     T[],
     {
         clear: () => void;

package/package.json

@@ -3,7 +3,7 @@
   "sideEffects": [
     "*.css"
   ],
-  "version": "1.19.0",
+  "version": "1.20.0",
   "description": "React Dynamic Framework",
   "license": "https://github.com/dynamic-framework/dynamic-ui/blob/master/libraries/dynamic-ui-react/LICENSE.md",
   "repository": {
@@ -149,5 +149,5 @@
     "react-dom": "^18.2.0",
     "react-i18next": "^13.3.1"
   },
-  "gitHead": "9542d1738c6c95536756b97fb13d1f032d760523"
+  "gitHead": "390121896cb0178e9faf24aef8f1da30a55fa6bf"
 }

package/src/style/abstracts/_utilities.scss

@@ -113,5 +113,17 @@ $utilities: map-merge(
       css-variable-name: display-font-size,
       values: $display-font-sizes
     ),
+    "height": map-merge(
+      map-get($utilities, "height"),
+      (
+        responsive: true,
+      )
+    ),
+    "width": map-merge(
+      map-get($utilities, "width"),
+      (
+        responsive: true,
+      )
+    ),
   )
 );

package/src/style/abstracts/variables/_forms.scss

@@ -27,9 +27,10 @@ $input-disabled-color: var(--#{$prefix}gray-300) !default;
 $input-disabled-bg: var(--#{$prefix}gray-100) !default;
 $input-disabled-border-color: var(--#{$prefix}gray-300) !default;
 
-$input-color: var(--#{$prefix}gray) !default;
+$input-color: var(--#{$prefix}gray-900) !default;
 $input-box-shadow: 0 0 0 transparent !default; // to avoid the none in the bootstrap box-shadow calculation
 
+$input-border-color: var(--#{$prefix}gray-300) !default;
 $input-border-radius: var(--#{$prefix}border-radius-sm) !default;
 $input-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
 $input-border-radius-lg: var(--#{$prefix}border-radius-sm) !default;

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

@@ -12,7 +12,6 @@
 @import "d-collapse-icon-text";
 @import "d-datepicker";
 @import "d-timepicker";
-@import "d-monthpicker";
 @import "d-tabs";
 @import "d-popover";
 @import "d-box-file";

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

@@ -10,36 +10,43 @@
 
   // Header variables
   --#{$prefix}datepicker-header-gap: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}datepicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}datepicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-7);
   --#{$prefix}datepicker-header-background-color: var(--#{$prefix}secondary-soft);
   --#{$prefix}datepicker-header-border: 0;
   --#{$prefix}datepicker-header-font-size: var(--#{$prefix}fs-6);
+  --#{$prefix}datepicker-header-button-padding: 0;
+  --#{$prefix}datepicker-header-select-padding: 0 var(--#{$prefix}ref-spacer-1);
+  --#{$prefix}datepicker-header-select-font-weight: var(--#{$prefix}fw-bold);
+  --#{$prefix}datepicker-header-select-menu-width: fit-content;
 
   --#{$prefix}datepicker-day-names-margin: 0;
   --#{$prefix}datepicker-day-names-font-size: var(--#{$prefix}ref-spacer-4);
 
   --#{$prefix}datepicker-day-name-weight: var(--#{$prefix}fw-bold);
   --#{$prefix}datepicker-day-name-margin: 0;
-  --#{$prefix}datepicker-day-name-size: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-day-name-padding: 0;
+  --#{$prefix}datepicker-day-name-size: var(--#{$prefix}ref-spacer-5);
   --#{$prefix}datepicker-day-name-color: var(--#{$prefix}gray-500);
 
   // Calendar variables
-  --#{$prefix}datepicker-month-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-6) var(--#{$prefix}ref-spacer-6);
+  --#{$prefix}datepicker-month-gap: .875rem;
+  --#{$prefix}datepicker-month-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-7) var(--#{$prefix}ref-spacer-6);
   --#{$prefix}datepicker-month-margin: 0;
   --#{$prefix}datepicker-month-color: var(--#{$prefix}white);
 
-  --#{$prefix}datepicker-week-gap: var(--#{$prefix}ref-spacer-2);
+  --#{$prefix}datepicker-week-gap: var(--#{$prefix}ref-spacer-8);
 
   // Day variables
   --#{$prefix}datepicker-day-margin: 0;
   --#{$prefix}datepicker-day-font-size: var(--#{$prefix}fs-small);
-  --#{$prefix}datepicker-day-size: var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}datepicker-day-padding: var(--#{$prefix}ref-spacer-4);
+  --#{$prefix}datepicker-day-size: var(--#{$prefix}ref-spacer-5);
+  --#{$prefix}datepicker-day-padding: 0;
   --#{$prefix}datepicker-day-radius: 100%;
+  --#{$prefix}datepicker-day-color: var(--#{$prefix}gray-900);
+  --#{$prefix}datepicker-day-disabled-color: var(--#{$prefix}gray-300);
 
-  --#{$prefix}datepicker-day-bg-hover: var(--#{$prefix}body);
-  --#{$prefix}datepicker-day-color-hover: var(--#{$prefix}info-100);
+  --#{$prefix}datepicker-day-color-hover: var(--#{$prefix}gray-900);
+  --#{$prefix}datepicker-day-bg-hover: var(--#{$prefix}info-100);
 
   --#{$prefix}datepicker-day-selected-color: var(--#{$prefix}white);
   --#{$prefix}datepicker-day-selected-bg: var(--#{$prefix}secondary-500);
@@ -50,7 +57,7 @@
   --#{$prefix}datepicker-day-outside-month-color: var(--#{$prefix}gray-400);
 
   --#{$prefix}datepicker-day-today-font-weight: var(--#{$prefix}fw-normal);
-  --#{$prefix}datepicker-day-today-box-shadow: 0 0 0 2px inset var(--#{$prefix}secondary);
+  --#{$prefix}datepicker-day-today-box-shadow: 0 0 0 2px var(--#{$prefix}secondary);
 
   // Time variables
   --#{$prefix}datepicker-time-container-margin: 0;
@@ -81,17 +88,14 @@
 
     .react-datepicker__day-names {
       display: flex;
-      gap: var(--#{$prefix}ref-spacer-2);
+      gap: var(--#{$prefix}ref-spacer-8);
       margin: var(--#{$prefix}datepicker-day-names-margin);
       font-size: var(--#{$prefix}datepicker-day-names-font-size);
     }
     .react-datepicker__day-name {
-      display: flex;
-      align-items: center;
-      justify-content: center;
       width: var(--#{$prefix}datepicker-day-name-size);
       height: var(--#{$prefix}datepicker-day-name-size);
-      padding: var(--#{$prefix}datepicker-day-padding);
+      padding: var(--#{$prefix}datepicker-day-name-padding);
       margin: var(--#{$prefix}datepicker-day-name-margin);
       font-weight: var(--#{$prefix}datepicker-day-name-weight);
       line-height: var(--#{$prefix}datepicker-day-name-size);
@@ -114,21 +118,29 @@
     padding: var(--#{$prefix}datepicker-month-padding);
     margin: var(--#{$prefix}datepicker-month-margin);
 
-    .react-datepicker__week {
-      display: flex;
-      gap: var(--#{$prefix}datepicker-week-gap);
-    }
+  }
+  .react-datepicker__week {
+    display: flex;
+    gap: var(--#{$prefix}datepicker-week-gap);
+  }
 
-    .react-datepicker__day {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: var(--#{$prefix}datepicker-day-size);
-      height: var(--#{$prefix}datepicker-day-size);
-      padding: var(--#{$prefix}datepicker-day-padding);
-      margin: var(--#{$prefix}datepicker-day-margin);
-      font-size: var(--#{$prefix}datepicker-day-font-size);
-      line-height: var(--#{$prefix}datepicker-day-size);
+  .react-datepicker__day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--#{$prefix}datepicker-day-size);
+    height: var(--#{$prefix}datepicker-day-size);
+    padding: var(--#{$prefix}datepicker-day-padding);
+    margin: var(--#{$prefix}datepicker-day-margin);
+    font-size: var(--#{$prefix}datepicker-day-font-size);
+    line-height: var(--#{$prefix}datepicker-day-size);
+    color: var(--#{$prefix}datepicker-day-color);
+
+    &.react-datepicker__day--in-range.react-datepicker__day--range-end,
+    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
+      color: var(--#{$prefix}datepicker-day-selected-color);
+      background-color: var(--#{$prefix}datepicker-day-selected-bg);
+      box-shadow: 0 0 0 2px var(--#{$prefix}datepicker-day-selected-bg);
     }
   }
 
@@ -142,12 +154,17 @@
     .react-datepicker__month-text--selected,
     .react-datepicker__quarter-text--selected,
     .react-datepicker__year-text--selected):hover {
-      color: var(--#{$prefix}datepicker-day-bg-hover);
-      background-color: var(--#{$prefix}datepicker-day-color-hover);
+      color: var(--#{$prefix}datepicker-day-color-hover);
+      background-color: var(--#{$prefix}datepicker-day-bg-hover);
       border-radius: var(--#{$prefix}datepicker-day-radius);
+      box-shadow: 0 0 0 2px var(--#{$prefix}datepicker-day-bg-hover);
     }
   }
 
+  .react-datepicker__day--disabled {
+    color: var(--#{$prefix}datepicker-day-disabled-color);
+  }
+
   // Selected single item
   .react-datepicker__day--selected,
   .react-datepicker__month--selected,
@@ -156,6 +173,7 @@
     color: var(--#{$prefix}datepicker-day-selected-color);
     background-color: var(--#{$prefix}datepicker-day-selected-bg);
     border-radius: var(--#{$prefix}datepicker-day-radius);
+    box-shadow: 0 0 0 2px var(--#{$prefix}datepicker-day-selected-bg);
   }
 
   .react-datepicker__day--selected {
@@ -163,13 +181,7 @@
     &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start {
       color: var(--#{$prefix}datepicker-day-selected-color);
       background-color: var(--#{$prefix}datepicker-day-selected-bg);
-    }
-  }
-  .react-datepicker__day {
-    &.react-datepicker__day--in-range.react-datepicker__day--range-end,
-    &.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-end {
-      color: var(--#{$prefix}datepicker-day-selected-color);
-      background-color: var(--#{$prefix}datepicker-day-selected-bg);
+      box-shadow: 0 0 0 2px var(--#{$prefix}datepicker-day-selected-bg);
     }
   }
 
@@ -239,7 +251,45 @@
     }
   }
   .d-datepicker-header {
-    font-size: var(--#{$prefix}fs-6);
+    font-size: var(--#{$prefix}datepicker-header-font-size);
+  }
+
+  .header-button {
+    --#{$prefix}btn-padding-y: var(--#{$prefix}datepicker-header-button-padding);
+    --#{$prefix}btn-padding-x: var(--#{$prefix}datepicker-header-button-padding);
+    &:hover,
+    &:active {
+      color: inherit;
+      background-color: inherit;
+    }
+    &:focus {
+      --#{$prefix}btn-focus-outline-offset: 8px;
+    }
+  }
+
+  .d-select {
+    &:focus-within .input-group {
+      border-color: transparent;
+      box-shadow: none;
+    }
+    .input-group {
+      --#{$prefix}input-border-width: 0;
+    }
+    .d-select__indicators {
+      display: none;
+    }
+    .d-select__control {
+      padding: var(--#{$prefix}datepicker-header-select-padding);
+      background-color: transparent;
+    }
+    .d-select__single-value {
+      font-weight: var(--#{$prefix}datepicker-header-select-font-weight);
+    }
+  }
+  .d-select__menu {
+    left: 50%;
+    min-width: var(--#{$prefix}datepicker-header-select-menu-width);
+    translate: -50%;
   }
 }
 

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

@@ -1,7 +1,7 @@
 .d-icon {
   --#{$prefix}icon-color: var(--#{$prefix}icon-component-color, inherit);
   --#{$prefix}icon-bg-color: var(--#{$prefix}icon-component-bg-color, inherit);
-  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, $spacer-6);
+  --#{$prefix}icon-size: var(--#{$prefix}icon-component-size, var(--#{$prefix}ref-spacer-6));
   --#{$prefix}icon-padding: var(--#{$prefix}icon-component-padding, 0);
   --#{$prefix}icon-loading-duration: var(--#{$prefix}icon-component-loading-duration, 1.8);
 

package/src/style/components/_d-input-pin.scss

@@ -9,7 +9,7 @@
   flex-direction: column;
   align-items: flex-start;
 
-  form {
+  .d-input-pin-group {
     display: flex;
     flex-direction: row;
     gap: var(--#{$prefix}input-pin-form-gap);
@@ -21,6 +21,10 @@
     height: var(--#{$prefix}input-pin-form-control-size);
     text-align: center;
     box-shadow: none;
+
+    &:has(~ .input-group-text) {
+      padding: var(--#{$prefix}ref-spacer-3) var(--#{$prefix}ref-spacer-4);
+    }
   }
 
   .form-control::-webkit-inner-spin-button,
@@ -64,5 +68,6 @@
 
   .input-group-text {
     padding-left: var(--#{$prefix}input-pin-form-gap);
+    background-color: transparent;
   }
 }

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

@@ -101,6 +101,7 @@
   // select menu
   .d-select__menu-list {
     top: calc(var(--#{$prefix}input-border-width) * 2);
+    margin: calc(var(--#{$prefix}input-border-width) * -1);
     background: $input-bg;
     border-radius: var(--#{$prefix}input-border-radius);
     box-shadow: var(--#{$prefix}select-menu-shadow);

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

@@ -1,7 +1,8 @@
 @import "bootstrap/scss/helpers/clearfix";
 // @import "bootstrap/scss/helpers/color-bg";
 @import "color-bg";
-@import "bootstrap/scss/helpers/colored-links";
+//@import "bootstrap/scss/helpers/colored-links";
+@import "colored-links";
 @import "bootstrap/scss/helpers/focus-ring";
 @import "bootstrap/scss/helpers/icon-link";
 @import "bootstrap/scss/helpers/ratio";

package/src/style/helpers/_colored-links.scss

@@ -0,0 +1,70 @@
+// All-caps `RGBA()` function used because of this Sass bug: https://github.com/sass/node-sass/issues/2251
+@each $color-name, $value in map-remove($theme-colors, "light", "dark") {
+  $color: rgba(var(--#{$prefix}#{$color-name}-500-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $text-underline-color: rgba(var(--#{$prefix}#{$color-name}-500-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-color: rgba(var(--#{$prefix}#{$color-name}-600-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-text-decoration-color: rgba(var(--#{$prefix}#{$color-name}-600-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  .link-#{$color-name} {
+    color: $color;
+    text-decoration-color: $text-underline-color;
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        color: $hover-color;
+        text-decoration-color: $hover-text-decoration-color;
+      }
+    }
+  }
+}
+
+.link-light {
+  $color: rgba(var(--#{$prefix}light-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $text-underline-color: rgba(var(--#{$prefix}light-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-color: rgba(var(--#{$prefix}gray-300-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-text-decoration-color: rgba(var(--#{$prefix}gray-300-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  color: $color;
+  text-decoration-color: $text-underline-color;
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: $hover-color;
+      text-decoration-color: $hover-text-decoration-color;
+    }
+  }
+}
+
+.link-dark {
+  $color: rgba(var(--#{$prefix}dark-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $text-underline-color: rgba(var(--#{$prefix}dark-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-color: rgba(var(--#{$prefix}gray-700-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  $hover-text-decoration-color: rgba(var(--#{$prefix}gray-700-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  color: $color;
+  text-decoration-color: $text-underline-color;
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: $hover-color;
+      text-decoration-color: $hover-text-decoration-color;
+    }
+  }
+}
+
+// One-off special link helper as a bridge until v6
+.link-body-emphasis {
+  color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, 1)) if($enable-important-utilities, !important, null);
+  text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, 1)) if($enable-important-utilities, !important, null);
+
+  @if $link-shade-percentage != 0 {
+    &:hover,
+    &:focus {
+      color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-opacity, .75)) if($enable-important-utilities, !important, null);
+      text-decoration-color: rgba(var(--#{$prefix}emphasis-color-rgb), var(--#{$prefix}link-underline-opacity, .75)) if($enable-important-utilities, !important, null);
+    }
+  }
+}

package/src/style/root/_root.scss

@@ -193,7 +193,7 @@
   --#{$prefix}label-padding-y: var(--#{$prefix}ref-spacer-0);
   --#{$prefix}label-padding-x: var(--#{$prefix}ref-spacer-2);
   --#{$prefix}label-font-size: var(--#{$prefix}fs-small);
-  --#{$prefix}label-font-weight: var(--#{$prefix}fw-bold);
+  --#{$prefix}label-font-weight: var(--#{$prefix}fw-normal);
   --#{$prefix}label-color: var(--#{$prefix}gray);
 
   --#{$prefix}btn-border-radius: #{$btn-border-radius};

package/dist/types/components/DMonthPicker/DMonthPicker.d.ts

@@ -1,12 +0,0 @@
-import type { ReactDatePickerProps } from 'react-datepicker';
-import type { BaseProps, FamilyIconProps } from '../interface';
-type Props<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = BaseProps & FamilyIconProps & Omit<ReactDatePickerProps<CustomModifierNames, WithRange>, 'selectsRange' | 'locale'> & {
-    date: string;
-    locale?: Locale;
-    headerPrevYearAriaLabel?: string;
-    headerNextYearAriaLabel?: string;
-    iconPrevMonth?: string;
-    iconNextMonth?: string;
-};
-export default function DMonthPicker<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined>({ onChange, date, locale, className, calendarClassName, headerPrevYearAriaLabel, headerNextYearAriaLabel, iconFamilyClass, iconFamilyPrefix, iconPrevMonth: iconPrevMonthProp, iconNextMonth: iconNextMonthProp, ...props }: Props<CustomModifierNames, WithRange>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/components/DMonthPicker/index.d.ts

@@ -1,2 +0,0 @@
-import DMonthPicker from './DMonthPicker';
-export default DMonthPicker;

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

@@ -1,98 +0,0 @@
-// stylelint-disable selector-class-pattern
-
-.react-datepicker.d-month-picker {
-  // Month variables
-  --#{$prefix}monthpicker-header-padding: var(--#{$prefix}ref-spacer-4) var(--#{$prefix}ref-spacer-2) 0;
-  --#{$prefix}monthpicker-font-weight: var(--#{$prefix}fw-normal);
-  --#{$prefix}monthpicker-header-color: var(--#{$prefix}white);
-  --#{$prefix}monthpicker-header-bg: var(--#{$prefix}dark);
-
-  --#{$prefix}monthpicker-month-gap: 0;
-  --#{$prefix}monthpicker-month-padding: var(--#{$prefix}ref-spacer-2) var(--#{$prefix}ref-spacer-6) var(--#{$prefix}ref-spacer-4);
-  --#{$prefix}monthpicker-month-color: var(--#{$prefix}white);
-  --#{$prefix}monthpicker-month-bg: var(--#{$prefix}dark);
-
-  --#{$prefix}monthpicker-month-today-color: var(--#{$prefix}white);
-  --#{$prefix}monthpicker-month-selected-bg: var(--#{$prefix}gray-500);
-  --#{$prefix}monthpicker-month-selected-box-shadow: 0 0 0 1px inset var(--#{$prefix}gray-100);
-
-  --#{$prefix}monthpicker-month-hover-bg: var(--#{$prefix}gray-700);
-
-  --#{$prefix}monthpicker-month-wrapper-gap: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}monthpicker-month-wrapper-font-size: var(--#{$prefix}fs-small);
-
-  --#{$prefix}monthpicker-single-month-width: 46px;
-  --#{$prefix}monthpicker-single-month-padding: var(--#{$prefix}ref-spacer-2);
-  --#{$prefix}monthpicker-single-month-margin: 0;
-  --#{$prefix}monthpicker-single-month-text-transform: capitalize;
-  --#{$prefix}monthpicker-single-month-radius: var(--#{$prefix}ref-spacer-6);
-  --#{$prefix}monthpicker-single-month-line-height: var(--#{$prefix}fs-6);
-
-  --#{$prefix}monthpicker-single-month-after-display: inline;
-  --#{$prefix}monthpicker-single-month-after-content: ".";
-
-  --#{$prefix}datepicker-triangle-color: var(--#{$prefix}dark);
-
-  font-family: var(--#{$prefix}datepicker-font-family);
-  border: var(--#{$prefix}datepicker-border);
-  box-shadow: var(--#{$prefix}datepicker-box-shadow);
-
-  .react-datepicker__header {
-    padding: var(--#{$prefix}monthpicker-header-padding);
-    font-weight: var(--#{$prefix}monthpicker-font-weight);
-    color: var(--#{$prefix}monthpicker-header-color);
-    background-color: var(--#{$prefix}monthpicker-header-bg);
-
-    .btn-sm {
-      --#{$prefix}btn-padding-x: 0;
-      --#{$prefix}btn-padding-y: 0;
-      --#{$prefix}btn-font-size: var(--#{$prefix}fs-5);
-    }
-  }
-
-  .react-datepicker__month.react-datepicker__monthPicker,
-  .react-datepicker__header.react-datepicker-year-header {
-    gap: var(--#{$prefix}monthpicker-month-gap);
-    padding: var(--#{$prefix}monthpicker-month-padding);
-    color: var(--#{$prefix}monthpicker-month-color);
-    background-color: var(--#{$prefix}monthpicker-month-bg);
-
-  }
-  .react-datepicker__month--selected,
-  .react-datepicker__month-text--in-range,
-  .react-datepicker__month-text--in-selecting-range,
-  .react-datepicker__month-text--keyboard-selected {
-    color: var(--#{$prefix}monthpicker-month-today-color);
-    background-color: var(--#{$prefix}monthpicker-month-selected-bg);
-    box-shadow: var(--#{$prefix}monthpicker-month-selected-box-shadow);
-  }
-  .react-datepicker__month-text:hover {
-    background-color: var(--#{$prefix}monthpicker-month-hover-bg);
-  }
-  .react-datepicker__month-wrapper {
-    display: flex;
-    gap: var(--#{$prefix}monthpicker-month-wrapper-gap);
-    font-size: var(--#{$prefix}monthpicker-month-wrapper-font-size);
-    .react-datepicker__month-text {
-      width: var(--#{$prefix}monthpicker-single-month-width);
-      padding: var(--#{$prefix}monthpicker-single-month-padding);
-      margin: var(--#{$prefix}monthpicker-single-month-margin);
-      line-height: var(--#{$prefix}monthpicker-single-month-line-height);
-      text-transform: var(--#{$prefix}monthpicker-single-month-text-transform);
-      border-radius: var(--#{$prefix}monthpicker-single-month-radius);
-      &::after {
-        display: var(--#{$prefix}monthpicker-single-month-after-display);
-        content: var(--#{$prefix}monthpicker-single-month-after-content);
-      }
-    }
-  }
-  .react-datepicker__triangle {
-    &::after,
-    &::before {
-      top: 0;
-      border-bottom-color: var(--#{$prefix}datepicker-triangle-color);
-    }
-  }
-}
-
-// stylelint-enable selector-class-pattern